*{
margin: 0 ;
padding: 0 ;
box-sizing: border-box;
/* border: 1px solid #fff; */
}
:root{
--color_07101D:#07101D;
--color_FF3C00:#ae9562;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
*{
/* border: 1px solid #fff; */
}
html{
overflow-x: hidden;
}
body{
font-family: poppins;
background-color: var(--color_07101D);
overflow-x: hidden;
direction: ltr;
display: flex;
flex-direction: column;
min-height: 100vh;
}
@font-face {
font-family: "poppins";
font-weight: 300;
font-style: normal;
src: url("../fonts/Poppins-Light.woff") format("woff");
}
@font-face {
font-family: "poppins";
font-weight: 400;
font-style: normal;
src: url("../fonts/Poppins-Regular.woff") format("woff");
}
@font-face {
font-family: "poppins";
font-weight: 500;
font-style: normal;
src: url("../fonts/Poppins-Medium.woff") format("woff");
}
@font-face {
font-family: "poppins";
font-weight: 600;
font-style: normal;
src: url("../fonts/Poppins-SemiBold.woff") format("woff");
}
/* @font-face {
font-family: kalameh;
font-style: normal;
font-weight: 900;
src: url('../font/WebFonts/_Woff/KalamehWeb-Black.woff') format('woff');
}
@font-face {
font-family: kalameh;
font-style: normal;
font-weight: bold;
src: url('../font/WebFonts/_Woff/KalamehWeb-Bold.woff') format('woff');
}
@font-face {
font-family: kalameh;
font-style: normal;
font-weight: normal;
src: url('../font/WebFonts/_Woff/KalamehWeb-Regular.woff') format('woff');
}
@font-face {
font-family: kalameh;
font-style: normal;
font-weight: 300;
src: url('../font/WebFonts/_Woff/KalamehWeb-Thin.woff') format('woff');
}
@font-face {
font-family: kalameh;
font-style: normal;
font-weight: 900;
src: url('../font/WebFonts/_Woff/KalamehWeb\(FaNum\)-Black.woff') format('woff');
}
@font-face {
font-family: kalameh;
font-style: normal;
font-weight: bold;
src: url('../font/WebFonts/_Woff/KalamehWeb\(FaNum\)-Bold.woff') format('woff');
}
@font-face {
font-family: kalameh;
font-style: normal;
font-weight: normal;
src: url('../font/WebFonts/_Woff/KalamehWeb\(FaNum\)-Regular.woff') format('woff');
}
@font-face {
font-family: Gilroy_Bold;
font-style: normal;
font-weight: bold;
src: url('../font/WebFonts/_Woff/Gilroy-Bold.woff') format('woff');
} */
main{
flex: 1 0 auto;
}
header{
overflow-x: hidden;
}
header::before{
content: '';
max-width: 534px;
width: 100%;
height: 536px;
background-image: radial-gradient(#3D0D58 38%, #070F1C 0);
position: absolute;
filter: blur(74px);
opacity: 0.4;
right: 119px;
top: -145px;
z-index: -1;
overflow-x: hidden;
}
header::after{
content: '';
background-image: url('../img/Group\ 1.png');
background-repeat: no-repeat;
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.bg_07101D{
background-color: var(--color_07101D) !important;
}
.text_FF3C00{
color: var(--color_FF3C00);
}
.border_FF3C00{
border-color: var(--color_FF3C00) !important;
}
.bg_FF3C00{
background-color: var(--color_FF3C00);
}
.title_main_header{
font-size: 4rem;
}
.w_70{
width: 70%;
}
.search_form_header{
height: 50px;
}
.search_form_header button{
right: 8px;
top: 16%;
}
.bg_gradient_main_site{
/* background-image: linear-gradient(to right,#7011AD,#BC0505,#FC630F); */
background: linear-gradient(to bottom, #C7B79C, #AE9562, #8B7B4B);
}
.main_img_header::before,.main_img_header::after{
content: '';
position: absolute;
background-repeat: no-repeat;
}
.main_img_header::before{
background-image: url('../img/Path\ \(1\).png');
width: 45px;
height: 81px;
top: 4rem;
right: 5rem;
}
.main_img_header::after{
background-image: url('../img/scribble\ final\ version-02\ \(2\).png');
width: 72px;
height: 57px;
bottom: 3rem;
left: 2rem;
}
.count_user_site{
width: 298px;
height: 79px;
backdrop-filter: blur(5px);
background-color: rgba(255,255,255,0.10);
bottom: 4rem;
right: 3rem;
}
.icon_header_container{
width: 81px;
height: 81px;
}
.wallet_box_2{
background-image: linear-gradient(to right bottom,#07101D,#978453);
}
.wallet_box_3{
background-image: linear-gradient(to right bottom,#07101D,#978453);
}
.wallet_box_4{
background-image: linear-gradient(to right bottom,#07101D,#FE007A);
}
.wallet_box_5{
background-image: linear-gradient(to right bottom,#07101D,#FFBB0D);
}
.wallet_box_6{
background-image: linear-gradient(to right bottom,#07101D,#978453);
}
.wallet_box_2::after{
border-top: 1px solid #978453;
}
.wallet_box_3::after{
border-top: 1px solid #978453;
}
.wallet_box_4::after{
border-top: 1px solid #FE007A;
}
.wallet_box_5::after{
border-top: 1px solid #FFBB0D;
}
.wallet_box_6::after{
border-top: 1px solid #978453;
}
.wallet_box{
padding: 1px;
height: 188px;
}
.wallet_box > div{
background-color: #161E2A;
}
.wallet_box::after{
content: '';
width: 43px;
height: 22px;
background-color: #07101D;
position: absolute;
right: -14px;
bottom: -3px;
transform: rotate(-43deg);
}
.box_hot_bids{
background-color: rgba(255, 255, 255, 0.10);
}
.img_hot_bids > div{
top: 1.8rem;
left: 2.4rem;
}
.bg_blur{
background-color: rgba(255, 255, 255, 0.10);
backdrop-filter: blur(10px);
}
.hearet_icon_hot_bids{
width: 58px;
height: 58px;
}
.text_time_hot_bids{
width: 150px;
height: 58px;
font-size: 1.5rem;
font-family: Gilroy_Bold;
}
.Ellipse_2{
width: 952px;
height: 991px;
border-radius: 100%;
position: absolute;
bottom: -55%;
left: -15%;
z-index: -1;
filter: blur(50px);
background: radial-gradient(62.37% 62.37% at 50.00% 50.00%, rgba(8, 164, 117, 0.10) 28.57%, rgba(7, 15, 28, 0.00) 100%);
}
.section_property{
margin-top: 11rem;
}
.box_property{
height: 240px;
}
.icon_box_property{
width: 90px;
height: 90px;
border: 1px solid rgba(255, 255, 255, 0.50);
background-color: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(25px);
right: 2rem;
top: -3rem;
}
.box_property_1,.box_property_2,.box_property_3{
/* border: 1px solid #00FF1A; */
background: linear-gradient(to bottom, #C7B79C, #AE9562, #8B7B4B);
}
.caption_box_trends{
background-color: rgba(255, 255, 255, 0.10);
height: 214px;
padding-top: 7rem;
}
.img_box_trend{
transform: translateY(103px);
}
.img_box_trend img{
width: 90%;
}
.Ellipse_3{
width: 1605px;
height: 1613px;
top: -17rem;
right: -37rem;
background: radial-gradient(62.37% 62.37% at 50% 50%, rgba(189, 9, 95, 0.13) 37.62%, rgba(7, 15, 28, 0.00) 100%);
}
.box_top_creators{
height: 182px;
border: 2px solid rgba(255, 255, 255, 0.20);
background-color: rgba(255, 255, 255, 0.10);
}
.section_news_letters{
/* background: linear-gradient(90deg, #A50E86 0.16%, #C10B70 24.02%, #E83947 38.73%, #DF330D 55.88%, #C55212 81.05%, #D37506 100%); */
background: linear-gradient(90deg, #E1D0B5, #C7B79C, #AE9562, #8B7B4B, #6F5B38);
height: 324px;
}
.section_news_letters::before,.section_news_letters::after{
content: '';
width: 982.714px;
height: 726.266px;
position: absolute;
background-repeat: no-repeat;
}
.section_news_letters::before{
background-image: url('../img/Group\ 122\ \(1\).png');
left: 0;
}
.section_news_letters::after{
background-image: url('../img/Group\ 123\ \(1\).png');
right: -31rem;
bottom: -27rem;
}
.cover_bg_news_letters{
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 149px 0 rgba(255,255,255,0.6);
}
footer{
background-color: #091028;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.icon_footer_link{
background-color: rgba(255, 255, 255, 0.10);
width: 52px;
height: 52px;
}
.icon_footer_instagram{
background: linear-gradient(90deg, #9A5BFF 0%, #FF1212 53.12%, #FF7F56 100%) !important;
}
.Ellipse_4{
filter: blur(50px);
top: -11%;
right: -12%;
width: 615px;
height: 584px;
background: radial-gradient(62.37% 62.37% at 50% 50%, rgba(8, 52, 164, 0.20) 21.7%, rgba(7, 15, 28, 0.00) 100%);
-webkit-filter: blur(50px);
}
.form_news_letters{
width: 70%;
}
@media screen and (max-width:991.98px) {
.bg_dark_md{
background-color: var(--bs-secondary-color);
}
header::before {
display: none;
width: 30%;
height: 46%;
right: 70%;
top: 0;
}
header::after{
display: none;
}
.Ellipse_2{
width: 551px;
height: 574px;
bottom: 55%;
left: 65%;
}
}
@media screen and (max-width:600.98px) {
.title_main_header{
font-size: 2.5rem;
}
.text_time_hot_bids{
width: 120px;
height: 34px;
font-size: 0.8rem;
}
.hearet_icon_hot_bids {
width: 31px;
height: 31px;
}
.main_img_header::before,.main_img_header::after{
transform: scale(0.8);
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
}
.count_user_site {
height: 56px;
}
.icon_header_container {
width: 40px;
height: 40px;
}
.icon_header_container img ,.icon_header_container svg {
width: 24px;
}
.fs-5 {
font-size: 1rem!important;
}
.fs-3 {
font-size: calc(1rem + .6vw)!important;
}
.fs-4 {
font-size: calc(1rem + .3vw)!important;
}
.arrowleft{
width: 22px;
}
.icon_box_property {
width: 58px;
height: 58px;
}
.icon_box_property svg {
width: 32px;
}
.box_property {
height: 198px;
}
.section_property {
margin-top: 6rem;
}
.form_news_letters{
width: 95%;
}
.cover_bg_news_letters {
box-shadow: none;
background-color: transparent;
}
.section_news_letters::before, .section_news_letters::after {
width: 380px;
height: 380px
}
.section_news_letters::before {
left: -5rem;
bottom: -8rem;
transform: rotate(-104deg);
}
.section_news_letters::after {
right: -6rem;
bottom: 1rem;
transform: rotate(-115deg);
}
}
.img_hot_bids img{
width: 100%;
aspect-ratio: 16 / 9; /* Ł†Ų³ŲØŲŖ Ų¹Ų±Ų¶ ŲØŁ‡ Ų§Ų±ŲŖŁŲ§Ų¹ */
object-fit: cover;
}
.box_property h4{
display: flex;
align-items: start;
min-height: 60px;
height: 60px;
overflow: hidden; /* Ł…Ų®ŁŪ Ś©Ų±ŲÆŁ† Ł…ŲŖŁ† Ų§Ų¶Ų§ŁŪ */
}
.caption_hot_bids h5,.caption_hot_bids p{
display: flex;
align-items: start;
/* min-height: 40px; */
height: 56px;
overflow: hidden; /* Ł…Ų®ŁŪ Ś©Ų±ŲÆŁ† Ł…ŲŖŁ† Ų§Ų¶Ų§ŁŪ */
}
.box_property p{
display: flex;
align-items: start;
min-height: 70px;
height: 70px;
overflow: hidden; /* Ł…Ų®ŁŪ Ś©Ų±ŲÆŁ† Ł…ŲŖŁ† Ų§Ų¶Ų§ŁŪ */
}
.arrowleft{
transform: rotate(179deg);
}
.text_customers_user{
height: 72px;
max-height: 72px;
overflow: hidden;
}
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 5px;
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 7px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #FC630F;
}
.card-wrapper{
margin: 0 auto;
}
.card-wrapper img{
width: 100%;
display: block;
}
.img-display{
overflow: hidden;
}
.img-showcase{
display: flex;
width: 100%;
transition: all 0.5s ease;
max-height: 429px;
object-fit: cover;
}
.img-showcase img{
min-width: 100%;
}
.img-select{
display: flex;
justify-content: center;
}
.img-item{
margin: 0.3rem;
}
.img-item a{
display: inline-block;
height: 80px;
max-height: 80px;
}
.img-item a img{
object-fit: cover;
height: 100%;
}
.card-wrapper .colors {
display: flex;
background: rgb(55, 55, 55);
padding: 5px;
border-radius: 10px;
align-items: center;
justify-content: center;
width: max-content;
gap: 10px;
}
.card-wrapper .colors div {
width: 25px;
height: 25px;
border-radius: 50%;
transition: 0.3s;
cursor: pointer;
border: 1px solid transparent;
}
.card-wrapper .colors div::before{
content: "";
width: 19px;
height: 19px;
display: block;
border-radius: 50%;
position: relative;
top: 2px;
left: 2px;
}
.black::before {
background: #000;
}
.red::before {
background: #ff0000;
}
.img-item:nth-child(1),
.img-item:nth-child(2),
.img-item:nth-child(3){
margin-right: 0;
}
.img-item:hover{
opacity: 0.8;
}
.product-content{
padding: 2rem 1rem;
}
.product-title{
font-size: 3rem;
text-transform: capitalize;
font-weight: 700;
position: relative;
color: #fff;
margin: 1rem 0;
}
.product-title::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 80px;
background: #fff;
}
.product-link{
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 0.9rem;
display: inline-block;
margin-bottom: 0.5rem;
background: #256eff;
color: #fff;
padding: 0 0.3rem;
transition: all 0.5s ease;
}
.product-link:hover{
opacity: 0.9;
}
.product-rating{
color: #ffc107;
}
.product-rating span{
font-weight: 600;
color: #252525;
}
.product-price{
margin: 1rem 0;
font-size: 1rem;
font-weight: 700;
}
.product-price span{
font-weight: 400;
}
.last-price span{
color: #f64749;
text-decoration: line-through;
}
.new-price span{
color: #256eff;
}
.product-detail h2{
text-transform: capitalize;
color: #fff;
padding-bottom: 0.6rem;
}
.product-detail p{
font-size: 0.9rem;
padding: 0.3rem;
opacity: 0.8;
color: #fff;
}
.product-detail ul li {
color: #fff;
}
.product-detail ul{
margin: 1rem 0;
font-size: 0.9rem;
}
.product-detail ul li{
margin: 0;
list-style: none;
background: url(https://fadzrinmadu.github.io/hosted-assets/product-detail-page-design-with-image-slider-html-css-and-javascript/checked.png) left center no-repeat;
background-size: 18px;
padding-left: 1.7rem;
margin: 0.4rem 0;
font-weight: 600;
opacity: 0.9;
}
.product-detail ul li span{
font-weight: 400;
}
.purchase-info{
margin: 1.5rem 0;
}
.purchase-info input,
.purchase-info .btn{
border: 1.5px solid #ddd;
border-radius: 25px;
text-align: center;
padding: 0.45rem 0.8rem;
outline: 0;
margin-right: 0.2rem;
margin-bottom: 1rem;
}
.purchase-info input{
width: 60px;
}
.purchase-info .btn{
cursor: pointer;
color: #fff;
}
.purchase-info .btn:first-of-type{
background: #256eff;
}
.purchase-info .btn:last-of-type{
background: #f64749;
}
.purchase-info .btn:hover{
opacity: 0.9;
}
.social-links{
display: flex;
align-items: center;
}
.social-links a{
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: #000;
border: 1px solid #000;
margin: 0 0.2rem;
border-radius: 50%;
text-decoration: none;
font-size: 0.8rem;
transition: all 0.5s ease;
}
.social-links a:hover{
background: #000;
border-color: transparent;
color: #fff;
}
.card-wrapper .card{
background-color: rgba(255, 255, 255, 0.10);
}
@media screen and (min-width: 992px){
.card-wrapper .card{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1.5rem;
}
.card-wrapper{
display: flex;
justify-content: center;
align-items: center;
}
.product-imgs{
display: flex;
flex-direction: column;
/* justify-content: center; */
padding-top: 2rem;
}
.product-content{
padding-top: 0;
}
}
.swiper-container {
position: relative;
/* width: 90vw;
height: 300px; */
}
.swiper-container > .swiper-slide__content {
position: absolute;
top: 0;
}
.swiper-slide {
/* height: 300px; */
/* display: flex; */
/* background: #eee; */
/* align-items: center; */
/* justify-content: center; */
transition: all 200ms linear;
transform: scale(0.8);
}
.swiper-slide.swiper-slide-active {
transform: scale(1);
/* background: #fc0; */
}
.swiper-slide__content {
height: 300px;
}
.filter_sidbar{
background-color: rgba(255, 255, 255, 0.10);
}
.pagination-dark .page-link {
background-color: rgba(255, 255, 255, 0.10); /* Semi-transparent white */
color: #fff; /* White text */
border-color: #444;
}
.pagination-dark .page-link:hover {
background-color: rgba(255, 255, 255, 0.2); /* Lighter on hover */
color: #fff;
}
.pagination-dark .page-item.active .page-link {
background-color: #ae9562; /* Orange for active state */
border-color: #ae9562; /* Matching border */
color: #fff; /* Keep text white */
}
.pageination_product_list ul li a{
font-size: 1.3rem;
}
.img_top_creators{
width: 105px;
height: 105px;
}
.max_h_124{
max-height: 124px;
overflow-y: auto;
}
.notfound .section{
padding: 4rem 2rem;
}
.notfound .section .error{
font-size: 150px;
color: #008B62;
text-shadow:
1px 1px 1px #00593E,
2px 2px 1px #00593E,
3px 3px 1px #00593E,
4px 4px 1px #00593E,
5px 5px 1px #00593E,
6px 6px 1px #00593E,
7px 7px 1px #00593E,
8px 8px 1px #00593E,
25px 25px 8px rgba(0,0,0, 0.2);
}
.notfound .page{
margin: 2rem 0;
font-size: 20px;
font-weight: 600;
color: #444;
}
.notfound .back-home{
display: inline-block;
color: #fff;
text-transform: uppercase;
font-weight: 600;
padding: 0.75rem 1rem 0.6rem;
transition: all 0.2s linear;
border-radius: 6px;
}
.notfound .back-home:hover{
background: #222;
color: #ddd;
}
input:focus{
outline: none;
}
.w_h_20px{
width: 15px;
height: 15px;
display: inline-block;
}
.form_search_products input{
color: #fff;
}
.logo_roza{
width: 48px;
}
.filter_sidbar .list-group-item{
background-color: #928050 ;
border: 0;
color: #fff;
}
.filter_sidbar .list-group-item.active{
background-color: #bba780;
}
.filter_sidbar input::placeholder{
color: #fff;
}
.whatsapp-button{
z-index: 100;
}