@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root {
  --primary_color: #8BC1CD;
  --secondary_color: #182135;
  --text_dark_color: #202020;
  --text_light_color: #fff;
  --hover: #b8b8b8;
  --description_p_color: #4a4a4a;
  --white: #fafafa;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: none;
}

.rounded-12px {
  border-radius: 12px;
}

.rounded-25px {
  border-radius: 25px;
}

.text-14px {
  font-size: 14px;
}

.text-16px {
  font-size: 16px;
}

.text-18px {
  font-size: 18px;
}

.text-20px {
  font-size: 20px;
}

.text-22px {
  font-size: 22px;
}

.text-24px {
  font-size: 24px;
}

body {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 14px;
  background: #FAFAFA;
  color: var(--text_dark_color);
}

.btn-custom {
  background: var(--primary_color);
  color: var(--white);
  border-radius: 12px;
}

.btn-custom-2 {
  background: var(--secondary_color);
  color: var(--white);
  border-radius: 12px;
}


.btn-custom:hover {
  background: var(--secondary_color);
  color: #fff;
}

.btn-custom-2:hover {
  background: var(--primary_color);
  color: #fff;
}

.btn-opacity {
  background: rgba(0, 0, 0, .2);
  color: var(--white);
  border-radius: 12px;
}

.bg-custom {
  background: var(--primary_color);
}

.bg-custom-2 {
  background: var(--secondary_color);
}


a {
  text-decoration: none;
  transition: all 0.1s linear;
  font-family: "Inter", sans-serif;
}

a:hover {
  text-decoration: none;
  color: var(--hover);
}

.clear {
  clear: both;
}


header {
  background: url(../images/headerBg.png);
  padding: 0px 0px 0px 0px;
}

header.homepage {
  position: absolute;
  width: 100%;
  z-index: 999;
  background: none;
}

header .logo {
  width: 80px;
  height: 80px;
}

.nav {
  padding: 10px 0px 10px 0px !important;
}

.navbar a {
  color: var(--text_light_color);
  font-weight: 600;
}

.navbar a:hover {
  color: var(--primary_color);
}

.nav-link:focus,
.nav-link:hover {
  color: var(--text_light_color);
}

.navbar a.nav-link-top {
  color: var(--text_light_color);
  font-weight: 400;
  font-size: 12px;
}


.navbar .menuSocial {
  border-radius: 8px;
  border: 1px solid var(--white);
  padding: 13px;
  margin-right: 20px;
}

.navbar .menuSocial a {
  font-size: 17px;
  padding: 16px 5px;
  color: var(--text_light_color);
}

.navbar .menuCustomerCare {
  display: flex;
  align-items: center;
  justify-content: start;
  color: var(--text_light_color);
  border: 1px solid var(--white);
  padding: 8px 12px;
  border-radius: 8px;
  margin-right: 20px;
}

.navbar .menuCustomerCare .icon {
  margin: 0px 8px 0px 8px;
  font-size: 24px;
  color: var(--text_light_color);
}

.navbar .menuCustomerCare .CustomerCareTitle {
  font-size: 11px;
  font-weight: 400;
  color: var(--text_light_color);
  text-align: right;
}

.navbar .menuCustomerCare .CustomerCareContent {
  font-size: 13px;
  font-weight: 600;
  color: var(--text_light_color);
}


.navbar .menuMyProfile {
  border-radius: 8px;
  border: 1px solid var(--white);
  padding: 8px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: start;
}

.navbar .menuMyProfile .orRegister {
  font-size: 11px;
  font-weight: 400;
  color: var(--text_light_color);
  text-align: left;
}

.navbar .menuMyProfile .login {
  font-size: 13px;
  font-weight: 600;
  color: var(--text_light_color);
}


.navbar .menuMyProfile a i {
  font-size: 24px;
  padding: 10px 5px;
  color: var(--text_light_color);
}

.navbar .menuCart {
  border-radius: 8px;
  border: 1px solid var(--white);
  padding: 8px;
  margin-right: 20px;
  position: relative;
}

.navbar .menuCart a {
  font-size: 24px;
  padding: 10px 5px;
  color: var(--text_light_color);
}

.navbar .menuCart .cartItemsCounter {
  position: absolute;
  right: -10px;
  top: -10px;
  background: var(--primary_color);
  color: #fff;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
}


#slider {
  width: 100%;
  height: 454px;
  margin: 0px;
  background: url(../images/headerBg.png) center top;
  display: flex;
  align-items: center;
  justify-content: end;
  flex-direction: column;
  padding-bottom: 100px;
}

#slider h1 {
  font-size: 36px;
  font-weight: 800;
  color: var(--white);
  margin: 0px 0px 20px 0px;
  text-align: center;
}


#slider h1 span {
  color: var(--primary_color);
}


#slider h2 {
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  margin: 80px 0px 10px 0px;
}

#slider input {
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  height: 55px;
  background: rgba(0, 0, 0, .2);
  border: 0px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  padding: 10px 20px;
}

#slider button {
  font-size: 24px;
  font-weight: 400;
  color: var(--white);
  height: 55px;
  background: rgba(0, 0, 0, .4);
  border: 0px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 10px 20px;
  transition: all .1s linear;
}

#slider button:hover {
  background: var(--primary_color);
}

#productList {
  width: 100%;
  margin: 60px 0px 60px 0px;
}

#productList h2 {
  width: 100%;
  text-align: center;
  font-size: 32px;
  color: var(--primary_color);
  font-weight: 700;
}

#productList p.description {
  color: #787878;
  font-size: 14px;
  text-align: center;
  margin: 20px 200px;
}

#productList .productBox {
  background: #fff;
  flex: 0 0 calc(20% - 20px);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 10px;
  margin: 10px 0px;
}

#productList .productBox img.productImage {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 10px;
  border-radius: 12px;
}


#productList .productBox h3 {
  color: var(--secondary_color);
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0px;
}

#productList .productBox h3 a {
  color: var(--secondary_color);
  font-size: 16px;
}

#productList .productBox:hover h3 a {
  color: var(--primary_color);
  font-size: 16px;
}


#productList .productBox .price {
  color: var(--secondary_color);
  font-size: 18px;
  font-weight: 600;
}

#productList .productBox .stars {
  font-size: 14px;
  color: var(--primary_color);
}


#productList .productBox a.addCart {
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary_color);
  margin: 0px 0px;
}

#sampleOrders {
  width: 100%;
  margin: 60px 0px 0px 0px;
}

#sampleOrders a.banner {
  width: 100%;
  height: 400px;
  background: url(../images/sampleBg.jpg) center center;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sampleOrders a.banner img {
  max-width: 80%;
  transition: all .1s linear;
}

#sampleOrders a.banner:hover img {
  transform: scale(1.2);
}

#features {
  width: 100%;
  margin: 0px 0px;
}

#features .featureCard {
  position: relative;
  aspect-ratio: 1/1;
  flex: 0 0 calc(25% - 10px);
  transition: all 0.3s linear;
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#features .featureCard .icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--primary_color);
  display: flex;
  align-items: center;
  justify-content: center;
}

#features .featureCard h3 {
  margin: 10px 0px;
  padding: 0px;
  font-size: 18px;
  font-weight: 700;
}

#features .featureCard p {
  margin: 10px 30px;
  padding: 0px;
  font-size: 14px;
  color: var(--primary_color);
}

#ourCollections {
  width: 100%;
  margin: 20px 0px;
}

#ourCollections h2 {
  width: 100%;
  text-align: center;
  font-size: 32px;
  color: var(--primary_color);
  font-weight: 700;
}

#ourCollections p.description {
  color: #787878;
  font-size: 14px;
  text-align: center;
  margin: 20px 200px 40px 200px;
}

#ourCollections .peppleSeriesCard {
  position: relative;
  aspect-ratio: 4/5;
  flex: 0 0 calc(32% - 10px);
  transition: all 0.3s linear;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url(../images/peppleMosaicBg.png) center center;
  border-radius: 20px;
}

#ourCollections .peppleSeriesCard:hover h3 {
  transform: scale(1.1) skewX(-20deg);
}

#ourCollections .peppleSeriesCard h3 {
  background-color: rgba(209, 165, 116, .8);
  color: white;
  border: none;
  padding: 10px 30px;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  transform: skewX(-20deg);
  border-radius: 10px;
  transition: all .1s linear;
}

#ourCollections .peppleSeriesCard h3 span {
  display: block;
  transform: skewX(20deg);
}

#ourCollections .mosaicSeriesCard {
  position: relative;
  aspect-ratio: 4/5;
  flex: 0 0 calc(32% - 10px);
  transition: all 0.3s linear;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url(../images/mosaicSeriesBg.png) center center;
  border-radius: 20px;
}

#ourCollections .mosaicSeriesCard:hover h3 {
  transform: scale(1.1) skewX(-20deg);
}

#ourCollections .mosaicSeriesCard h3 {
  background-color: rgba(255, 195, 118, .8);
  color: white;
  border: none;
  padding: 10px 30px;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  transform: skewX(-20deg);
  border-radius: 10px;
  transition: all .1s linear;
}

#ourCollections .mosaicSeriesCard h3 span {
  display: block;
  transform: skewX(20deg);
}

#ourCollections .ceramicPorcelainSeriesCard {
  position: relative;
  aspect-ratio: 4/5;
  flex: 0 0 calc(32% - 10px);
  transition: all 0.3s linear;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url(../images/ceramicPorcelainBg.png) center center;
  border-radius: 20px;
}

#ourCollections .ceramicPorcelainSeriesCard:hover h3 {
  transform: scale(1.1) skewX(-20deg);
}

#ourCollections .ceramicPorcelainSeriesCard h3 {
  background-color: rgba(96, 145, 177, .8);
  color: white;
  border: none;
  padding: 10px 30px;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  transform: skewX(-20deg);
  border-radius: 10px;
  transition: all .1s linear;
}

#ourCollections .ceramicPorcelainSeriesCard h3 span {
  display: block;
  transform: skewX(20deg);
}

#gallery {
  width: 100%;
  margin: 20px 0px;
  text-align: center;
}

#gallery img {
  max-width: 100%;
  height: auto;
}


#customerComments {
  width: 100%;
  margin: 60px 0px;
}

#customerComments .commentCard {
  flex: 0 0 calc(25% - 20px);
  transition: all 0.3s linear;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  border-radius: 20px;
  background: #fff;
  padding: 20px;
}

#customerComments .commentCard .commentImg {
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 3px solid var(--primary_color);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin: 10px 0px 0px 0px;
}

#customerComments .commentCard .commentImg img {
  aspect-ratio: 1/1;
  width: 100%;
  object-fit: contain;
}

#customerComments .commentCard h3 {
  font-size: 16px;
  color: var(--secondary_color);
  font-weight: 800;
  margin: 20px 0px 10px 0px;
  padding: 0px;
}

#customerComments .commentCard .stars {
  font-size: 16px;
  padding: 0px;
  margin: 0px 0px 10px 0px;
  color: #FFC107;
}

#customerComments .commentCard p {
  font-size: 14px;
  padding: 0px 0px 0px 60px;
  margin: 0px 0px 10px 0px;
  position: relative;
  color: var(--text_dark_color);
  min-height: 130px;
}

#customerComments .commentCard p::before {
  content: '"';
  font-size: 80px;
  position: absolute;
  left: 10px;
  top: -30px;
  font-weight: 800;
  transform: skewX(20deg);
  color: #D3D3D3;
}


#faqs {
  width: 100%;
  margin: 30px 0px;
  padding: 50px 0px;
  background: #fff;
}


#faqs h2 {
  width: 100%;
  text-align: left;
  font-size: 32px;
  color: var(--primary_color);
  font-weight: 700;
  margin: 0px 0px;
  padding: 0px;
}

#faqs p.description {
  color: #787878;
  font-size: 14px;
  text-align: left;
  margin: 10px 0px;
}

#faqs .collapse {
  padding: 0px;
  border: 0px !important;
  border-bottom: 0px !important;
}

#faqs .accordion-item {
  padding: 0px;
  border: 0px;
  border-bottom: 0px solid var(--bs-border-color);
}

#faqs .accordion-item h3 {
  margin: 0px;
  margin-bottom: 0px;
  border: 0px;
  border-bottom: 0px;
  font-weight: 500;
  font-size: 16px;
}

#faqs .accordion-item h3 .accordion-button {
  color: var(--text_dark_color);
  font-size: 14px;
  font-weight: 600;
  background: none;
  padding: 20px;
  border: 0px;
  border-bottom: 0px;
}

#faqs .accordion-item h3 .accordion-button:focus {
  box-shadow: none;
  outline: none;
  border-bottom: 0px;
}

#faqs .accordion-item .accordion-body {
  color: #646464;
  font-size: 14px;
  font-weight: 400;
  border-bottom: 0px;
}

footer {
  width: 100%;
  background: #000 url(../images/footerBg.png) top right;
  color: var(--white);
  padding: 50px 0px 20px 0px;
}

footer .logo {
  width: 80px;
  height: 80px;
}

footer h5 {
  margin: 0px 0px 10px 0px;
  padding: 0px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

footer ul {
  list-style-type: none;
  margin: 0px 60px 0px 0px;
  padding: 0px;
}

footer ul li {
  list-style-type: none;
  margin: 0px;
}

footer ul li a {
  color: #fff;
  font-weight: 300;
  display: inline-block;
  padding: 0px 0px 5px 0px;
}

footer ul li a:hover {
  color: var(--primary_color);
}



footer .ebulletin {
  max-width: 300px;
  color: var(--white)
}

footer .ebulletin h6 {
  font-weight: 300;
  font-size: 16px
}

footer .ebulletin p.description {
  font-weight: 300;
  font-size: 14px;
  color: #b0b0b0
}

footer .ebulletin form input {
  font-size: 12px;
  background: #FAFAFA;
  color: #A5ACBA;
  border: 0;
  padding: 10px;
  transition: .2s linear;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;

}

footer .ebulletin form input::placeholder {
  font-size: 12px;
  color: #b0b0b0;
}

footer .ebulletin form button {
  border: 0;
  font-size: 12px;
  color: var(--white);
  background: var(--primary_color);
  font-weight: 500;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

footer .hashtag {
  font-size: 4.4em;
  margin: 0px 0px;
  font-weight: 800;
  text-align: center;
  opacity: 0.2;
}

footer .footerBottom {
  font-size: 13px;
  margin-top: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}



footer .footerSocial {
  border-radius: 8px;
  border: 1px solid var(--white);
  padding: 12px;
  margin-right: 20px;
}

footer .footerSocial a {
  font-size: 20px;
  padding: 10px 5px;
  color: var(--text_light_color);
}

footer .footerCustomerCare {
  display: flex;
  align-items: center;
  justify-content: start;
  color: var(--text_light_color);
  border: 1px solid var(--white);
  padding: 8px 12px;
  border-radius: 8px;
}

footer .footerCustomerCare .icon {
  margin: 0px 8px 0px 8px;
  font-size: 24px;
  color: var(--text_light_color);
}

footer .footerCustomerCare .CustomerCareTitle {
  font-size: 11px;
  font-weight: 400;
  color: var(--text_light_color);
  text-align: right;
}

footer .footerCustomerCare .CustomerCareContent {
  font-size: 14px;
  font-weight: 600;
  color: var(--text_light_color);
}




#subPage {
  width: 100%;
  margin: 30px 0px 30px 0px;
}



#subPage h1 {
  font-size: 32px;
  font-weight: bold;
  margin: 10px;
  text-wrap: nowrap;
  text-align: center;
  color: var(--primary_color)
}

.breadcrumb {
  text-align: center;
  align-items: center;
  justify-content: center;
}

.breadcrumb .breadcrumb-item {
  font-size: 12px;
  color: var(--secondary_color);
}

.breadcrumb .breadcrumb-item a {
  color: var(--secondary_color);
}


.breadcrumb .breadcrumb-item.active {
  font-size: 12px;
  color: var(--primary_color);
}



#subPage .productBox {
  background: #fff;
  flex: 0 0 calc(33% - 20px);
  /* -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); */
  border-radius: 20px;
  padding: 10px;
  margin: 0px 0px 20px 0px;
}

#subPage .productBox img.productImage {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 10px;
  border-radius: 12px;
}


#subPage .productBox h3 {
  color: var(--secondary_color);
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0px;
}

#subPage .productBox h3 a {
  color: var(--secondary_color);
  font-size: 16px;
}

#subPage .productBox:hover h3 a {
  color: var(--primary_color);
  font-size: 16px;
}


#subPage .productBox .price {
  color: var(--secondary_color);
  font-size: 18px;
  font-weight: 600;
}

#subPage .productBox .stars {
  font-size: 14px;
  color: var(--primary_color);
}


#subPage .productBox a.addCart {
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary_color);
  margin: 0px 0px;
}


.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--primary_color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--primary_color);
  --bs-pagination-active-border-color: var(--primary_color);
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}




.similar .productBox {
  background: #fff;
  flex: 0 0 calc(25% - 20px) !important;
  /* -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); */
  border-radius: 20px;
  padding: 10px;
  margin: 0px 0px 20px 0px;
}


.list-group-item.active {
  z-index: 2;
  color: var(--bs-list-group-active-color);
  background-color: var(--primary_color);
  border-color: var(--primary_color);
}