@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins: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');

body {
    font-family: 'Poppins';
}

/* Header */

.header {
    padding: 20px 10px 10px 10px;
    position: relative;
    z-index: 3;
}

.navbar {
    display: block;
}

.footlogo img {
    width: 200px;
    margin-bottom: 10px;
}

.nav-ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 0;
    padding-left: 0;
}

.navlogo {
    width: 50%;
}

.list {
    color: #000000c4;
    text-decoration: none;
}

.list:hover,
.footul li:hover a {
    color: black;
    transition: 0.3s;
}

.loginbtns {
    text-align: end;
}

.login {
    color: white;
    text-decoration: none;
    background-color: #da0001;
    padding: 15px 35px;
    border-radius: 50px;
    border: 1px solid #da0001;
    font-size: 15px;
}

.login:hover {
    background-color: transparent;
    color: white;
    transition: 0.3s;
}

.active {
    color: black;
}

.search {
    display: grid;
    grid-template-columns: 70% 30%;
    align-items: center;
}

.notice_box a {
    color: black;
    text-decoration: none;
    font-size: 25px;
}

.notice_box {
    position: relative;
    float: left;
    margin-top: 8px;
    padding: 5px 13px;

}

.notice_box .bubble_count {
    position: absolute;
    top: 8px;
    right: 5px;
    color: white;
    font-size: 10px;
    background: black;
    padding: 1px 5px;
    border-radius: 25px;
}

.icons-div {
    display: flex;
}

span.input-group-btn {
    border: 1px solid;
}

input.form-control {
    border: 1px solid black;
    padding: 10px;
    border-radius: 0px 30px 30px 0px !important;
    border-left: 0;
}

.form-control:focus {
    outline: 0;
    border-color: black;
    box-shadow: none;
}

span.input-group-btn {
    border-radius: 30px 0px 0px 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 0;
}

.input-group {
    flex-direction: row-reverse;
}

/* Header */


.sec1 {
    padding: 220px 10px;
    text-align: center;
    background: url(../images/main-bg.png);
    background-position: center;
    background-size: cover;
    color: white;
}

.inner-sec1 {
    width: 85%;
    margin: auto;
}

.inner-sec1 h2 {
    letter-spacing: 2px;
    font-size: 80px;
}

.inner-sec1 h5 {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 10px;
}

.buybtn {
    color: white;
    background-color: #FFA442;
    padding: 15px 35px;
    border: 1px solid #FFA442;
    border-radius: 30px;
    text-decoration: none;
}

.contactbtn {
    color: white;
    background-color: transparent;
    padding: 15px 35px;
    border: 1px solid white;
    border-radius: 30px;
    text-decoration: none;
}

.buybtn:hover {
    color: white;
    background-color: transparent;
    border: 1px solid white;
    transition: 0.3s;
}

.contactbtn:hover,
.shopbtn:hover {
    color: white;
    background-color: #FFA442;
    border: 1px solid #FFA442;
    transition: 0.3s;
}

.sec1btns {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.sec2 {
    padding: 50px 10px;
    position: relative;
}

h4.price {
    font-size: 16px;
    color: #FFA442;
    font-weight: 400;
}

.price span {
    color: #7E7E7E;
    text-decoration: line-through;
    font-size: 14px;
    padding-left: 20px;
}

.stars i {
    font-size: 12px;
    color: #FFA442;
}

.stars i:last-of-type {
    color: #CBCBCB;
}

.bestsellers p {
    color: #333E48;
}

.stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.stars p {
    margin: 0;
    font-size: 12px;
    padding-left: 5px;
}

.bestsellers {
    border: 1px solid #FFA442;
    border-radius: 10px;
}

.bestsellers img {
    width: 100%;
}

.bestsellercntnt {
    padding: 10px;
}

.sec2head {
    text-align: center;
    width: 60%;
    margin: auto;
}

.greyhead {
    color: #333E48;
    font-size: 55px;
}

.owl-next {
    position: absolute;
    right: -60px;
    top: 50%;
    background: #FFA442 !important;
    color: black !important;
    width: 50px;
    height: 50px;
    font-size: 18px !important;
    border-radius: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.owl-prev {
    position: absolute;
    left: -60px;
    top: 50%;
    background: #FFA442 !important;
    color: black !important;
    width: 50px;
    height: 50px;
    font-size: 18px !important;
    border-radius: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sec3,
.sec4,
.sec5,
.sec6,
.sec7,
.sec8 {
    padding: 50px 10px;
}

.sec3-inner {
    background: url(../images/sec3bg.png);
    background-size: cover;
    color: white;
    padding: 50px;
    border-radius: 20px;
}

.sec3-inner h4 {
    font-size: 40px;
    width: 75%;
    margin: auto;
    font-weight: 600;
}

.prcdiv {
    padding: 30px 25px;
}

.startprc h6 {
    font-size: 16px;
    font-weight: 200;
    font-style: italic;
    letter-spacing: 1px;
    margin-bottom: 0;
}

.startprc h5 {
    font-size: 40px;
    font-weight: 700;
    font-family: 'Montserrat';
    margin-bottom: 0;
}

.startprc {
    width: 30%;
    background-color: #FFA442;
    padding: 15px;
    text-align: center;
}

.startprc h5 span {
    font-size: 25px;
}

.yellowhead {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 8px;
    color: #FFA442;
}

.inner-sec4 {
    text-align: center;
}

.tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
}

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

.prodcntnt h6 {
    font-size: 12px;
    margin-bottom: 5px;
    font-weight: 400;
}

.prodcntnt p {
    font-size: 14px;
    font-weight: 400;
}

.addtocart .price {
    margin-bottom: 0;
    color: black;
    font-size: 14px;
    font-weight: 700;
}

.addtocart .price span {
    font-size: 12px;
    padding-left: 5px;
}

.sale {
    margin-bottom: 0;
    padding: 5px 10px;
    background-color: #E4E4E4;
    font-size: 12px;
}

.prodname {
    font-size: 20px;
}

.prodcntnt {
    padding: 20px;
    border-top: 1px solid #707070;
}

.prodimg {
    padding: 20px
}

.addtocart a {
    color: black;
}

.bestprodstw {
    border: 1px solid white;
    border-radius: 10px;
}

.bestprodstw:hover {
    box-shadow: 7px 9px 22px #00000029;
    border: 1px solid #FFA442;
    transition: 0.3s;
}

.bestprodstw:hover .sale {
    background-color: black;
    color: white;
    transition: 0.3s;
}

ul#myTab {
    justify-content: center;
    border: 0;
    padding-bottom: 15px;
}

.prodimg img {
    width: 100%;
    height: 300px;
    object-fit: contain;
}

.tw-nav .nav-link {
    color: #A8A8A8;
    background-color: transparent;
    border: none;
    text-underline-offset: 5px;
}

.tw-nav .nav-link.active {
    color: #FFA442;
    background-color: transparent;
    text-decoration: underline;
}

.tw-nav .nav-link:hover {
    color: #FFA442;
    background-color: transparent;
    text-decoration: underline;
    transition: 0.3s;
}

.sec-car .item {
    background: url(../images/sec5bg.png);
    padding: 50px 50px 250px;
    border-radius: 20px;
    background-size: cover !important;
    background-position: center;
}

.sec5-inner {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sec5-inner,
.sec5-inner .greyhead,
.sec8-inner .greyhead,
.sec8-inner {
    color: white;
}

.dark {
    font-weight: 600;
    margin-bottom: 5px;
}

.inner-sec6 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sec6-img img {
    width: 80%;
}

.sec6-img {
    text-align: right;
}

.shopbtn {
    color: black;
    background-color: transparent;
    padding: 15px 35px;
    border: 1px solid black;
    border-radius: 30px;
    text-decoration: none;
}

.csprdcts {
    box-shadow: 6px 6px 20px #00000029;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 30px;
}

.csprdcts h3 {
    font-size: 18px;
    font-weight: 600;
    padding-top: 10px;
}

.csprdcts p {
    font-size: 14px;
}

.csprdcts img {
    width: 100%;
}

.inner-sec7 .greyhead {
    text-align: center;
    color: black;
}

.cs-nav .nav-link {
    color: #A8A8A8;
    background-color: transparent;
    border: none;
}

.cs-nav .nav-link.active {
    color: black;
    background-color: transparent;
}

.cs-nav .nav-link:hover {
    color: black;
    background-color: transparent;
    transition: 0.3s;
}

.csprdcts a,
.bestprodstw a,
.bestsellers a {
    color: inherit;
    text-decoration: none;
}

.sec8-bg {
    background: url(../images/sec8bg.png);
    background-size: cover;
    padding: 60px;
    border-radius: 35px;
}

.sec8-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 55%;
}

.count {
    display: inline-block;
    font-size: 18px;
    list-style-type: none;
    padding: 10px;
    background: white;
    color: black;
    text-transform: uppercase;
    text-align: center;
    width: 90px;
    border-radius: 15px;
    margin-right: 15px;
}

div#countdown ul {
    padding: 0;
}

.count span {
    display: block;
    font-size: 25px;
    font-weight: 700;
}


/* Promotions Page */

.promo-main .sec1 {
    background: url(../images/promotion/promo-bg.png);
    background-size: cover;
    background-position: center;
    padding: 260px 10px;
}

.promo-main .sec5head {
    text-align: center;
    margin: auto;
    width: 70%;
    padding: 20px 10px;
}

.promo-main .s5i1 {
    background: url(../images/promotion/image1.png) !important;
    background-position: center;
    background-size: cover !important;
}

.promo-main .s5i2 {
    background: url(../images/promotion/image2.png);
    background-position: center;
    background-size: cover !important;
}

.promo-main .s5i3 {
    background: url(../images/promotion/image3.png);
    background-position: center;
    background-size: cover !important;
}

.promo-main .sec3-inner {
    background: url(../images/promotion/sec3bg.png);
    background-size: cover;
    background-position: center;
}

.promo-main .sec8-bg {
    background: url(../images/promotion/sec8bg.png);
    background-size: cover;
    background-position: center;
}

.promo-main .sec5head .greyhead {
    color: black;
}


/* Promotions Page */


/* Shop Page */

.shop-main .sec1 {
    background: url(../images/shop/shop-bg.png);
    background-size: cover;
    background-position: center;
    padding: 260px 10px;
}

.shop-main .sec8-bg {
    background: url(../images/shop/sec8bg.png);
    background-size: cover;
    background-position: center;
}

.shop-main .sec3 .sec6-img {
    text-align: left;
}

.product-main .sec2head {
    text-align: center;
    margin: auto;
    width: 70%;
    padding: 20px 10px;
}

.product-main .sec2head .greyhead {
    color: black;
}

/* Shop Page */



/* Product Page */

.product-main .sec1 {
    background: url(../images/product/productbg.png);
    background-size: cover;
    background-position: center;
    padding: 260px 10px;
}

.product-main .sec8-bg {
    background: url(../images/product/sec8bg.png);
    background-size: cover;
    background-position: center;
}

.product-main .bestseller-main {
    display: grid;
    grid-template-columns: 17.5% 17.5% 17.5% 17.5% 17.5%;
    gap: 40px;
}

/* Product Page */


/* Blog Page */

.blog-main .sec1 {
    background: url(../images/blog/blogbg.png);
    background-size: cover;
    background-position: center;
    padding: 260px 10px;
}

.blog-main .blog {
    padding-bottom: 40px;
}

.blog-main .blog a {
    color: inherit;
    text-decoration: none;
}

.blog-main .blog img {
    width: 100%;
}

.blog-main .blog-info {
    display: grid;
    grid-template-columns: 26% 72.5%;
    gap: 10px;
    padding-top: 20px;
}

.blog-main .blog-date h4 {
    font-weight: 400;
    font-size: 24px;
}

.blog-main .blog-date h5 {
    font-weight: 400;
    font-size: 16px;
    color: #A8A8A8;
}

.blog-main .rm-blog {
    color: #FFB001 !important;
    text-decoration: none;
    font-size: 16px;
    margin-top: 30px;
    display: block;
}

.blog-main .rm-blog {
    margin-top: 15px;
}

.blog-main .rm-blog i {
    padding-left: 10px;
}

.blog-main .sec2head {
    text-align: center;
    margin: auto;
    width: 70%;
    padding: 20px 10px;
}

.blog-main .sec2head .greyhead {
    color: black;
}

/* Blog Page */





/* Footer */

.prdct {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.Main-foot {
    background-color: transparent;
    color: black;
    padding: 50px 10px;
}

.footul {
    list-style: none;
    padding: 0;
}

.footul a {
    color: black;
    text-decoration: none;
    line-height: 30px;
}

.footul i {
    color: #da0001;
    padding-right: 10px;
}

.footyy {
    display: grid;
    grid-template-columns: repeat(auto-fill, 33.3%);
}

.firstcol img {
    width: 15% !important;
}

.reserve p {
    margin-bottom: 0;
    font-size: 14px;
    font-family: 'Montserrat';
    text-align: center;
}

.copyright {
    color: black;
    background-color: transparent;
    padding: 10px;
    border-top: 1px solid black;
}

.socials i {
    font-size: 20px;
}

.socials {
    display: flex;
    align-items: center;
    gap: 25px;
}

.footlogo {
    text-align: center;
    padding-bottom: 15px;
}

.cards {
    display: flex;
}

.firstcol {
    width: 90%;
}

.secondcol {
    padding-left: 115px;
}

/* Footer */

.blog-cntnt h4 {
    font-size: 20px;
}

.search .form-control {
    font-size: 13px;
}


@media only screen and (min-width:0px) and (max-width:767px) {

    /* Header */

    .navbar-toggler {
        float: right;
    }

    .navbar-toggler i {
        font-size: 25px;
        color: black;
    }

    .navlogo {
        width: 60%;
    }

    .navbar-brand .logo {
        width: 72%;
    }

    #navbarOffcanvas {
        background-color: white !important;
    }

    .nav-ul {
        gap: 15px;
        flex-direction: column;
    }

    .list {
        color: black;
    }

    .login {
        padding: 10px 25px;
        font-size: 14px;
    }

    form {
        padding-bottom: 15px;
    }

    /* Header */

    .inner-sec1 h5 {
        font-size: 12px;
    }

    .inner-sec1 h2 {
        letter-spacing: 2px;
        font-size: 35px;
    }

    .sec1 {
        padding: 160px 10px;
    }

    .inner-sec1 {
        width: 100%;
        margin: auto;
    }

    .inner-sec1 p,
    .sec2head p,
    .bestsellers p {
        font-size: 14px;
    }

    .buybtn,
    .contactbtn {
        font-size: 12px;
    }

    .sec2head {
        width: 100%;
    }

    .greyhead {
        font-size: 35px;
    }

    .owl-next {
        position: absolute;
        right: -45px;
        width: 35px;
        height: 35px;
    }

    .owl-prev {
        position: absolute;
        left: -45px;
        width: 35px;
        height: 35px;
    }

    .startprc h6 {
        font-size: 14px;
    }

    .startprc h5 {
        font-size: 30px;
    }


    .search {
        display: grid;
        grid-template-columns: 100%;
    }

    .sec3-inner h4 {
        font-size: 26px;
        width: 100%;
        text-align: center;
    }

    .startprc {
        width: 60%;
        margin: auto;
    }

    .prodname {
        font-size: 15px;
    }

    .sec5-inner {
        width: 100%;
        text-align: center;
        align-items: center;
        font-size: 14px;
    }

    .sec-car .item {
        padding: 14px;
    }

    .inner-sec6 p,
    .sec8-inner p {
        font-size: 14px;
    }

    .sec6-img img {
        width: 100%;
        margin-top: 15px;
    }

    a.shopbtn {
        font-size: 12px;
    }

    .sec8-inner {
        align-items: center;
        width: 100%;
        text-align: center;
    }

    .sec2 {
        padding: 50px 50px;
    }

    .inner-sec6 {
        align-items: center;
        text-align: center;
    }

    .sec8-bg {
        padding: 25px 15px;
    }

    .count {
        font-size: 12px;
        width: 65px;
        margin-right: 10px;
    }

    .count span {
        font-size: 16px;
    }

    .sec3,
    .sec4,
    .sec5,
    .sec6,
    .sec7,
    .sec8 {
        padding: 25px 10px;
    }

    .sec5-inner .greyhead {
        font-size: 25px !important;
        width: 80%;
    }

    /* Promotions Page */

    .promo-main .sec1 {
        padding: 180px 10px;
        background-position: 22%;
        background-size: cover;
    }

    .promo-main .sec3-inner {
        background-position: 38%;
        background-size: cover;
    }

    .promo-main .sec8-bg {
        background-position: 0%;
        background-size: cover;
    }

    .promo-main .yellowhead {
        font-size: 10px;
    }

    .promo-main .sec5head {
        width: 100%;
        font-size: 14px;
        padding: 20px 10px;
    }

    .promo-main .s5i1,
    .promo-main .s5i2,
    .promo-main .s5i3 {
        background-size: cover;
    }

    .promo-main .sec2 {
        padding: 30px 10px;
    }



    /* Promotions Page */





    /* Shop Page */

    .shop-main .sec1 {
        padding: 180px 10px;
        background-position: 55%;
        background-size: cover;
    }

    .shop-main .down-ord {
        order: 1;
    }

    .shop-main .sec2 {
        padding: 30px 10px;
    }

    .shop-main .sec8-bg {
        background-position: 25%;
    }

    /* Shop Page */





    /* Product Page */

    .product-main .sec1 {
        padding: 180px 10px;
        background-position: 55%;
        background-size: cover;
    }

    .product-main .sec2 {
        padding: 30px 10px;
    }

    .product-main .sec8-bg {
        background-position: 45%;
    }

    .product-main .bestseller-main {
        display: grid;
        grid-template-columns: 47.5% 47.5%;
        gap: 20px;
    }

    .product-main .sec2head {
        width: 100%;
    }

    /* Product Page */




    /* Blog Page */

    .blog-main .sec1 {
        padding: 180px 10px;
        background-position: 55%;
        background-size: cover;
    }

    .blog-main .blog img {
        height: 100%;
    }

    .blog-main .blog-cntnt h4 {
        font-size: 16px;
        font-weight: 600;
    }

    .blog-main .blog-date h5 {
        font-size: 12px;
    }

    .blog-main .blog-date h4 {
        font-size: 21px;
    }

    .blog-main .blog p {
        font-size: 12px;
    }

    .blog-main .rm-blog {
        font-size: 14px;
    }

    .blog-main .blog p {
        font-size: 14px;
    }

    .blog-main .blog-info {
        grid-template-columns: 18% 79.5%;
    }

    .blog-main .rm-blog {
        margin-top: 10px;
    }

    .blog-main .sec2head {
        width: 100%;
    }

    .blog-main .sec2 {
        padding: 30px 10px;
    }

    /* Blog Page */






    /* Footer  */

    .firstcol img {
        width: 45%;
        margin-bottom: 10px;
    }

    .firstcol p {
        font-size: 14px;
    }

    .footul a {
        line-height: 35px;
        font-size: 14px;
    }

    .Main-foot {
        padding: 30px 10px;
    }

    .footul i {
        padding-right: 5px;
    }

    .socials {
        gap: 20px;
    }

    .socials i {
        font-size: 16px;
    }

    .footyy {
        grid-template-columns: 100%;
    }

    /* Footer  */
}

@media only screen and (min-width:768px) and (max-width:1023px) {

    /* Header */

    .navlogo {
        width: 100%;
    }

    .nav-ul {
        gap: 20px;
        font-size: 14px;
    }

    .login {
        padding: 10px 25px;
        font-size: 14px;
    }

    /* Header */

    .inner-sec1 h5 {
        font-size: 18px;
    }

    .inner-sec1 h2 {
        letter-spacing: 2px;
        font-size: 60px;
    }

    .sec1 {
        padding: 160px 10px;
    }

    .inner-sec1 {
        width: 100%;
        margin: auto;
    }

    .inner-sec1 p,
    .sec2head p,
    .bestsellers p {
        font-size: 14px;
    }

    .buybtn,
    .contactbtn {
        font-size: 14px;
    }

    .sec2head {
        width: 100%;
    }

    .greyhead {
        font-size: 45px;
    }

    .owl-next {
        position: absolute;
        right: -35px;
        width: 35px;
        height: 35px;
    }


    .owl-prev {
        position: absolute;
        left: -35px;
        width: 35px;
        height: 35px;
    }

    .search {
        display: grid;
        grid-template-columns: 100%;
    }

    .sec3-inner h4 {
        font-size: 26px;
        width: 100%;
    }

    .startprc {
        width: 60%;
    }

    .prodname {
        font-size: 15px;
    }

    .sec5-inner {
        width: 80%;
    }

    .sec-car .item {
        padding: 50px 50px 150px;
    }

    .inner-sec6 p,
    .sec8-inner p {
        font-size: 14px;
    }

    .sec6-img img {
        width: 100%;
    }

    a.shopbtn {
        font-size: 14px;
    }

    .sec8-inner {
        align-items: center;
        width: 100%;
        text-align: center;
    }

    /* Promotions Page */

    .promo-main .sec1 {
        padding: 180px 10px;
    }

    .promo-main .sec3-inner {
        background-position: 38%;
    }

    .promo-main .sec8-bg {
        background-position: 0%;
    }

    .promo-main .sec5head {
        width: 100%;
        font-size: 14px;
        padding: 30px 10px;
    }



    /* Promotions Page */





    /* Shop Page */

    .shop-main .sec1 {
        padding: 180px 10px;
        background-position: 55%;
        background-size: cover;
    }

    .shop-main .sec8-bg {
        background-position: 25%;
    }

    /* Shop Page */






    /* Product Page */

    .product-main .sec1 {
        padding: 180px 10px;
        background-position: 55%;
        background-size: cover;
    }

    .product-main .sec8-bg {
        background-position: 15%;
    }

    .product-main .bestseller-main {
        grid-template-columns: 30.3% 30.3% 30.3%;
        gap: 30px;
    }

    /* Product Page */



    /*  Blog Page  */


    .blog img {
        height: 100%;
    }

    .blog-cntnt h4 {
        font-size: 16px;
    }

    .blog-date h5 {
        font-size: 12px;
    }

    .blog-date h4 {
        font-size: 20px;
    }

    .blog p {
        font-size: 12px;
    }

    .blog p {
        font-size: 14px;
    }

    .blog-info {
        grid-template-columns: 16% 79.5%;
    }

    .rm-blog {
        margin-top: 10px;
        font-size: 14px;
    }

    .blog-main .sec2head {
        width: 100%;
    }

    /* Blog Page */



    /* Footer  */

    .firstcol p {
        font-size: 14px;
    }

    .fifthcol p {
        font-size: 14px;
    }

    .footul a {
        font-size: 14px;
    }

    .footul i {
        padding-right: 5px;
    }

    .socials i {
        font-size: 16px;
    }

    .footyy h4 {
        font-size: 18px;
    }

    .Main-foot {
        padding: 50px 10px 20px;
    }

    /* Footer  */
}