/* main.css */

header{
    position: relative;
    z-index: 2;
}
body{
    /* background-image: var(--lightest-primary-orange); */
}
#head-info{
    background-color: var(--dark-primary-orange);
    color:#fff;
    padding:1em;
}
main{
    margin-top:1em;
    width: 100%;
    padding:0 7.5%;
    z-index:3;
}
.filter{
    width:100%;
    flex:1;
    /* background-color: var(--primary-orange); */
    background-image:url("../images/bg/bg1.png");
    /* background-position: 62%; */
    border-radius: 1em;
    color:#fff;
    padding:1em;
}

.filter > .flex-col .i-img{
    width:1.5em;
    font-family: Montserrat;
}

.filter > .flex-col .i-img i.i-size{
    font-size:1.3em;
}

.mid-rectangle{
    /* background-color: var(--primary-orange); */
    background-image:url("../images/bg/bg1.png");
    height:18em;
    width:100%;
    background-size: cover;
    /* margin:0 10%; */
    border-radius: 1em;
    color:#fff;
    flex:2;
    position:relative;
}
.mid-rectangle .in-text{
    margin-left:5%;
}

.mid-rectangle .in-text h1{
    font-weight:1000;
    margin:0;
    font-size:2em;
}

.mid-rectangle .in-image{
    background-image:url('../images/frame_1.png');
    height:21em;
    width:21em;
    background-size: cover;
    position:absolute;
    bottom:0%;
    right:-5%;
    transform: scaleX(-1);
    z-index:3;
}

section{
    margin:5% 7.5% 5% 7.5%;
}


/* SECTION 1 - TRENDING PRODUCT */
section#trendingProducts{
    /* margin:5% 0;
    padding:5% 0% 5% 10%; */
    margin:5% 0% 5% 7.5%;
    /* background-color:var(--dark-primary-orange);
    color:#fff; */
}

section#trendingProducts h3{
    font-size:1.05em;
}

section h2{
    font-family: Montserrat;
}

.products.overflow{
    overflow-x: auto;
}
.products{
    white-space: nowrap;
    scrollbar-width: none;
}

.product{
    font-family: Montserrat;
    display:inline-flex;
    margin-right:1em;
    cursor:pointer;
    padding-bottom:0.5em;

    /* New */
    margin-top:0.5em;
    border-radius:2em 2em 0.2em 0.2em;
}

.product .product_details{
    padding: 0 0.5em;
}

.product .product_image{
    height:12em;
    width:15em;
    background-size: 70% 80%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius:2em 2em 0.2em 0.2em;
    position:relative;
    background-color: #f7f7f7;
    transition: 0.5s all;
}

#to-peruz .products{
    display:flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    gap:3em 1em;

    /* flex-wrap: wrap;
    gap: 3em 10px; */
}

#to-peruz .products .product{
    margin-right:0;
}

#to-peruz .product .product_image{
    height:10em;
    width:14em;
    height:9em;
    width:12em;
    background-size: 70% 80%;
}

#to-peruz .product .product_details h3{
    font-size:1em;
}

#to-peruz .product .product_details h3 + span{
    font-size:0.9em;
}


#to-peruz .product .product_details h3{
    font-size:1em;
    font-weight: 400;
    color:var(--primary-orange);
}

#to-peruz .product .product_details h3 + span{
    font-size:0.9em;
    font-weight: 700;
}


#to-peruz .product .product_details span.circ{
    height:2em;
    width:2em;
}

.product .product_details .fa-star + span{
    font-size:0.9em;
}


.product_image.full{
    background-size: cover !important;
}

.product .product_image span{
    height:2em;
    width:2em;
    background:#fff;
    /* color: var(--primary-orange); */
    border-radius:2em;
    position:absolute;
    right:5%;
    top:5%;
}


.product .product_details{
    align-items: end;
    justify-content: space-between;
    padding-right:0.5em;
}

.product .product_details .rate-star{
    color:var(--primary-orange);
}

.product .product_details h3{
    margin:0;
}

/* .product:hover .product_image{
    background-size: 75% 85% !important;
}

.product:hover .product_image.full{
    background-size: 110% 110% !important;
} */

.product:hover{
    translate: 0 -4px;
    box-shadow: 0 0 5px 1px #0001;
}

.product .product_image span .like-btn{
    color:var(--light-primary-orange);
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.pagination a {
  color: #333;
  float: left;
  padding: 5px 10px;
  text-decoration: none;
  transition: background-color 0.3s;
  border: 1px solid #ddd;
  margin: 0 5px;
  border-radius: 5px;
}

.pagination a:hover {
  background-color: #f0f0f0;
}

.pagination a.active {
  background-color: var(--dark-primary-orange);
  color: white;
  border: 1px solid #f7f7f7;
}

.pagination a:first-child,
.pagination a:last-child {
  font-weight: bold;
}

@media (max-width:600px){
    section#trendingProduct{
        margin:15% 0% 15% 5%;
    }

    .product .product_image{
        height:10em;
        width:14em;
    }

    section{
        margin:5%;
    }
 
    section > h2{
        font-size: 21px;
    }

    main{
        padding:0 5%;
    }
    
    .mid-rectangle .in-text h1{
        font-size:1.8em;
    }

    .mid-rectangle .in-text span{
        font-size:0.9em;
        width:80%;
        display:inline-block;
    }

    .mid-rectangle{
        height:12em;
        border-radius: 1em 1em 0.2em 1em;
    }

    .mid-rectangle .in-image{
        background-image:url('../images/frame_1_nw.png');
        height:15em;
        width:15em;
        right:-6.5%;
    }

    section#to-peruz .product_details h3{
        font-size:0.8em !important;
    }

    
    section#to-peruz .product_details span{
        font-size:0.8em !important;
    }


    #to-peruz .products{
        gap:3em 1%;
        justify-content: space-between;
    }

    /* #to-peruz > .product{
        width:48%;
    } */

    #to-peruz .product .product_image{
        height:7em;
        width:10em;

        height:calc(43vw * 7/10);
        width:43vw;
        background-size: 60% 70%;
        border-radius:1em 1em 0.2em 0.2em;
    }    
}

@media (max-width:400px){
    /* #to-peruz .product{
        max-width:35%;
    } */
}