﻿/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 
button,input.hero-buttons,a{cursor:pointer;}
/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

button {font-family: mulish-variable, sans-serif;}
h1{font-size: clamp(2rem, 1.7021rem + 1.4894vw, 3.75rem);}
h1,h2,h3,h4,h5 {font-family: noto-sans-bengali, sans-serif;}
h2 {font-size:60px;text-transform: uppercase;margin-bottom: -10px;}
/*-------- BODY STYLES --------*/

body {
box-sizing: border-box;
font-family: mulish-variable, sans-serif;
background: #F4F3EF;
line-height: 1.8;
}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

/*--- HEADER STYLES ---------------------*/
header {}

.main-site-header {display: flex;align-items: center;background: #000;height: 200px;}
.logo {width: 100%;background: #F4F3EF;text-align: center;height:100%;max-width: 500px;}

.hero-buttons {width: 100%;max-width: 610px;margin: 0 auto;display:flex;gap:20px;margin-top: 12px;}
.hero-buttons button{background: rgba(217,217,217,.1);padding: 10px 13px;width: 100%;border: 3px solid #fff;color: #fff;text-transform: uppercase;font-size: 16px;font-weight:600;padding: 14px 17px;pointer-events:all}


.hero-buttons button:hover{background: #fff;color: #000;transition: ease-in-out .5s;}

.header-icons {display:flex;justify-content: flex-end;gap: 50px;margin-bottom: 30px;color:#fff;}
.header-icons a{color:#fff !important;font-size:20px;}
.header-icons .icons a{color:#fff;font-size:20px;}
.icons {border:solid 3px #fff;padding:0px 10px;}

.icons:hover  {background:rgba(255,255,255,0.5);transition:ease-in-out .5s;}

.header-icons.mobile-icons {display:none;}
/*---BODY--------------------------------*/

/*---ABOUT----------------------*/
.hero-buttons.about button{
	border: 3px solid #000;
	color: #000;
	
}
.hero-buttons.about{margin-top: 9px;}
.hero-buttons.about button:hover{background:#000;color:#fff; transition: .8s;}

.hero-buttons.about{
	margin-top: 9px;
}

.about-image {position:relative;}

/*---HERO ---------------*/

.hero {position: relative;}

.hero-overlay {
	position: absolute;
    z-index: 1;
    background: rgba(0, 0, 0,0.7);
    height: 100%;
    display: flex;
    flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	max-width: 1080px;
	gap:20px;
	pointer-events:none; 
}

.hero-content {width: 100%;max-width: 610px;margin: 0 auto;padding-top: 150px;pointer-events:none}
.hero-content h1{color: #ffff;font-size: 63px;line-height: 1.1;text-transform: uppercase;border-left:8px solid #fff;padding-left: 20px;}
.hero-content p{color: #ffff;margin-top:20px;}

/*---ABOUT ---------------*/
.about-flex {display:flex;justify-content: space-around;align-items: center;}
.about-flex img{width: 100%;max-width: 650px;}
.about-content{width: 100%;max-width: 596px;}

.background-border {position: absolute;border: 4px solid #000;padding: 190px;z-index: -1;left: -5%;top: -6%;}
.about-section{position: relative;padding:100px 0;width:90%;margin:0 auto;max-width: 1800px;}



/*--------Terms And Conditions--------------------*/
.terms-and-conditions .hero-buttons.about{display:block;max-width:610px !important;width:100%;text-align:center;}
.terms-and-conditions button.hero-buttons{text-align: center !important;
    display: block;}
.terms-and-conditions h3 {font-size:25px;}
/*--------CONTACT PAGE--------------------*/
.formfield {display: flex;flex-direction: column;width: 100%;}
.contact-header h1{text-transform:uppercase;}
section#contact-us {display: flex;justify-content: space-between;margin: 0 auto;}

section#contact-us form{width: 60%;}
.contact-form {width: 90%;background: #000;display:flex;justify-content: center;}
.wrapper-flex{display:flex;flex-direction: row;justify-content: space-between;gap: 25px;}
.wrapper-flex .formfield{width:100%;max-width:280px;}
.contact-us-content {width: 50%;display: flex;flex-direction: column;padding: 3px 100px;gap: 80px;align-items: center;justify-content: center;border-bottom: 1px #ccc solid;}
.contact-information {margin-top: 30px;font-size: 20px;width: 70%;text-align:center;}
.contact-information a{color:#000;}
.contact-information i{margin-right:9px;}
.contact-us-content p{text-align:center}
.small-buttons {display: flex;justify-content: center;gap: 18px;margin-top: 10px;width: 100%;}
.small-buttons a{color:#000;font-size: 28px;font-weight:900;}
input#Primary_Name,input#Phone,input#Email,input#Message,input#CaptchaAnswer,textarea#Message,textarea#Description {padding: 13px 15px;}
textarea#Description{padding: 13px 15px !important;background: #F4F3EF;border: solid 3px #000;font-family: mulish-variable, sans-serif;}
textarea#Message{font-family: mulish-variable, sans-serif;}
.CaptchaMessagePanel {color:#fff;}
.CaptchaPanel a {color:#fff;}
#contact-us input.hero-buttons {background: rgba(217,217,217,.1);padding: 10px 13px;width: 100%;max-width: none;border: 3px solid #fff;color: #fff;text-transform: uppercase;font-size: 16px;font-weight: 600;margin-left: 0;margin-top: 11px !important; }

iframe {display:block;}

.contact-us-content .background-border{padding: 190px 230px;left: 6%;top:25%;}

/*--------SELL WITH US PAGE--------------------*/
.form-flex {display: flex;gap:50px;}

#sell-with-us label{color:#000 !important;}
#sell-with-us .form {width: 90%;}
#sell-with-us input {padding: 13px 15px !important;background:#F4F3EF;border: solid 3px #000;}
#sell-with-us .formfield.description {width: 100%;max-width: unset;}
#sell-with-us .CaptchaMessagePanel,#sell-with-us .CaptchaPanel a {color:#000;}

#sell-with-us input.hero-buttons {border: 3px solid #000;color: #000;max-width:unset;margin-left:0;width: 27%;margin: 0 auto;}
#sell-with-us .hero-buttons {margin-top:0;max-width:unset;}

#sell-with-us input.hero-buttons:hover {background:#000;color:#fff;transition:ease-in-out .5s;}

#sell-with-us label {font-weight:800;}
.sell-with-us-header h1 {text-align: left;line-height: 1.2;text-transform:uppercase;width: 100%;}

.sell-with-us-header {position: relative;}
.sell-title {position: absolute;padding: 0 20px;border-left: 6px solid #fff;margin-bottom: 30px;left: 5%;top: 30%;color:#fff;}
.sell-image img {width: 100%;height: 100%;max-height: 280px;object-fit: cover;object-position: 0px 26%;background:#000;display: block;}

.sell-overlay {background:rgba(0,0,0,0.5);position:absolute;top:0;left:0;width:100%;height:100%;}
.sell-header {background:#000;}
section#sell-with-us {padding-bottom: 70px;border-bottom: 1px #ccc solid;}
/*--------FORM STYLES--------------------*/
section.search-section {display: flex;justify-content: space-between;gap: 25px;}
.search-flex {background: #000;width: 100%;max-width: 1000px;}

.search-flex h2{color:#fff;font-size:40px;text-align: left;margin-left: 9%;}
.form-image {width: 100%;position:relative;}
.form-image img{width: 100%;height: 100%;object-fit: cover;}
.form {width: 90%;text-align: center;margin: 90px auto;margin: 40px auto;box-sizing: border-box;padding: max(15px, 5%);}

.form-width {display: flex;flex-direction: column;align-items: center;margin-bottom: 20px;margin: 0 auto;}

label.main-label {color: #fff;justify-content: flex-start;display: flex;text-align: left;width: 81%;margin-top: 20px;margin-bottom: 5px;text-transform:uppercase;}

select#Category,select#Manufacturer {width: 80%;padding: 16px;font-weight: 800;letter-spacing: 2px;
font-family: mulish-variable, sans-serif;}

input#keywords {width:76%;padding: 16px;
font-family: mulish-variable, sans-serif;}

input.hero-buttons {    
	background: rgba(217,217,217,.1);
    padding: 10px 13px;
    width: 100%;
	max-width: 224px;
    border: 3px solid #fff;
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
	margin-left: 10%;
	margin-top:40px;}

.form-image .overlay {background: rgba(0,0,0,0.5);position: absolute;z-index: 999;height: 100%;width: 100%;}

input.hero-buttons:hover {background:#fff;transition:ease-in-out .5s;color:#000;}
#contact-us input.hero-buttons:hover {background:#fff;transition:ease-in-out .5s;color:#000;}

.terms-and-conditions {font-size:16px;width:90%;margin:0 auto;text-align:left;padding:40px 0;font-weight:500;font-weight: normal;}

/*-------- THANK YOU ----------------*/

.thankyou-content h2{line-height:1.2;font-size:35px;margin-bottom:10px;}

.thankyou-content{width: 100%;max-width: 596px;}

.thankyou-header h1 {text-align: left;}
.thankyou-flex img{width: 100%;max-width: 650px;}
.thankyou-flex {display:flex;justify-content: space-around;align-items: center;width:90%;margin:0 auto;}
.thankyou-header {position: relative;}
.sell-title {position: absolute;padding: 0 20px;border-left: 6px solid #fff;left: 5%;top: 37%;color:#fff;}
.thankyou-image img {width: 100%;height: 100%;max-height: 280px;object-fit: cover;object-position: 0px 80%;background:#000;display: block;}
.thankyou-image-content {position:relative;}
.thankyou-section{position: relative;padding:100px 0;width:100%;margin:0 auto;border-bottom:1px solid #ccc;}


/*-------- TERMS AND CONDITIONS STYLES ----------------*/
/*-------- FOOTER STYLES ----------------*/
footer{}
.footer {display:flex;}
.footer-logo {width:60%;}
.footer-logo img{margin: 0 auto;width: 100%;max-width: 410px;display: flex;margin-top: 50px;}
.footer-icons {display: flex;justify-content: center;gap: 50px;margin-top:40px;margin-bottom: 50px;color:#000;}
.footer-icons .icons{border:solid 3px #000;}
.footer-icons .icons a{color:#000;}
.black-background {display: flex;justify-content: space-evenly;width: 40%;background:#000;padding-top: 40px;align-items: flex-start;padding-top: 100px;}

.black-background p{color:#fff;font-size:20px;font-weight:800;text-transform:uppercase;margin-bottom:10px;}
.black-background a{color:#fff;}
.footer-icons .icons {font-size: 26px;}
.footer-icons a {color:#000;}
.footer-nav li {margin-bottom:5px;}

.icons:hover {}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
span.option-name,span.option-count {color: #000;}

.faceted-option-checkbox-container label {margin-top:0;}

.listing-card-grid.listing-data-selector {background: #fff;}
h2.no-listings-found {font-size: 40px;}
div#inventory-wrapper {padding: 50px 0;}
.compare-listings__label-text span {color:#000;}
/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1444px) {
	.wrapper-flex {flex-direction: column;gap:0;}
	.wrapper-flex .formfield {max-width:unset;}
	
}

@media only screen and (max-width: 1400px) {
	.logo {max-width: 430px;}
	.background-border {padding: 150px;}
	.about-flex img,.thankyou-flex img {max-width: 500px;}
	.hero-overlay {max-width: 840px;}
}
@media only screen and (max-width: 1500px) {
	.about-flex img, .thankyou-flex img {max-width: 540px;}
	.about-content,.thankyou-content {max-width: 476px;}
	.background-border {padding: 150px;}
	
}
@media only screen and (max-width: 1240px) {
	.mobile-header {display: flex;justify-content: space-around;width: 56%;margin-left: 20px;margin-top: 30px;}
	.header-icons {gap: 30px;}
}

@media only screen and (max-width: 1200px) {
	.about-flex, .thankyou-flex {display: flex;justify-content: space-between;gap: 60px;
    align-items: center;}
	.header-icons.mobile-icons {display:flex;height: 40px;}
	.logo {display: flex;}
	.contact-us-content {padding: 3px 60px;}
}
@media only screen and (max-width: 1000px) {
	.hero-overlay {max-width: unset;}
	div.thankyou-image-content{display:none;}
	.about-image{display: none;}
	.about-content,.thankyou-content{max-width: unset;}
	.about-section {padding: 0px 0 50px;}
	section.search-section {flex-direction: column;gap:0;}
	section#contact-us {flex-direction:column;}
	.contact-form {width:100%;}
	.contact-us-content {width:100%;padding:0;}
	.wrapper-flex{flex-direction:column;}
	.wrapper-flex .formfield {max-width:unset;}
	section#contact-us form {width:90%;}
	.contact-information {margin:0 auto;}
	.footer {flex-direction: column;}
	.black-background {width: 100%;padding-top: 40px;padding-bottom: 60px;}
	.footer-logo {width: 100%;}
	.form-image .overlay {height:98%;}
	.about-content .hero-buttons,.thankyou-content .hero-buttons {margin-left: 0px;}
	.hero-content { width: 90%;max-width: 860px;margin: 0 auto;display: flex;flex-direction: column;align-items: flex-start;}
	.form-flex {flex-direction: column;gap:0;}
	#sell-with-us .formfield {max-width:unset;}
	.hero-overlay {max-width: 590px;}
	.hero-content h1 {font-size: 51px;}
	.hero-buttons {max-width: 520px;flex-direction: column;margin-bottom:16px;gap:0;}
	.contact-information {width:100%;border-bottom: 1px #ccc solid;padding:30px 0 ;}
	#sell-with-us input.hero-buttons {width:90%;}

}


@media only screen and (max-width: 900px) {	
	.hero-content {max-width: 440px;}
	.hero-buttons {flex-direction: column;gap: 0px;max-width: 90%;}
	.thankyou-content .hero-buttons{width:100%;}
	.hero .hero-buttons {margin-left:20px;}
	.hero-content {margin-left: 30px;max-width: 570px;}
	.logo {display: flex;max-width: 250px;}
}


@media only screen and (max-width: 600px) {	
	.black-background {flex-direction: column;text-align: center;align-items:center;gap:20px;padding-bottom:80px;padding-top: 0;padding-top: 31px;}
	.footer-icons {gap:30px;}
	.footer-icons .icons{font-size: 17px;}
	.hero-content {max-width: 80%;}
	.header-icons {gap: 20px;}
	select#Category, select#Manufacturer {width: 90%;padding: 24px;}
	input#keywords {width: 76%;padding: 24px;}
	.black-background {flex-direction: column;text-align: center;align-items:center;gap:20px;padding-bottom:80px;padding-top: 0;padding-top: 31px;}
	.footer-icons {gap:30px;}
	.footer-icons .icons{font-size: 17px;}
	.hero-content {max-width: 80%;padding-top: 20%;}
	.header-icons {gap: 20px;}
	.search-flex h2 {font-size: 26px;}
	h2 {font-size: 45px;margin-left: 5%;}
	.about-section h2 {margin-bottom: 2px;}
	.hero-content h1 {font-size: 41px;}
	.hero-buttons {margin-bottom: 6px;}
}



@media only screen and (max-width: 500px) {	
	.hero-content h1 {font-size: 31px;}
	.mobile-header {margin-left: 0px;}
	.terms-and-conditions h3 {font-size: clamp(1.125rem, 1.1037rem + 0.1064vw, 1.25rem);}
}



@media only screen and (max-width: 400px) {	
	.hero-content h1 {font-size: 30px;}
}







