@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

.container {
  max-width: 1280px;
  padding: 20px;
  margin: 0 auto;
}
.btn {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  display: inline-block;
  text-transform: uppercase;
  transition: 300ms;
}

:root {
  --primary: #d87d4a;
  --darken: #101010;
  --lighter: #f1f1f1;
  --light: #fafafa;
  --secondary: #fbaf84;
  --black: #000000;
  --text-gray: #787878;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Manrope", serif;
  background: #FAFAFA;
}
a {
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
/* ! Header */
.header {
  background: #000;
  color: #fff;
}
.header h1
{
  display: flex;
  justify-content: center;
  padding-top: 90px;
  padding-bottom: 90px;
  font-family: Manrope;
  font-size: 40px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 1.4285714626312256px;
}
#header {
  background: #141414;
}
#header .container {
  background: url("../images/bts.png") no-repeat center right / contain;
}
/* ? Navbar */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 30px 0;
  border-bottom: 2px solid #2b2b2b;
}
.nav-another
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 30px 0;
}
.nav-menu {
  display: flex;
  column-gap: 30px;
}
.nav-menu__item a {
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--light);
  transition: 300ms;
}
.nav-menu__item a:hover {
  color: var(--primary);
}
.nav-cart {
  color: var(--light);
}
.hover__text a
{
  transition: .3s;
}
.hover__text a:hover
{
  color: var(--primary) !important;
}
.hover__tex p
{
  transition: .3s;
}
.hover__tex p:hover
{
  color: var(--primary) !important;
  transform: scale(103%);
}

/* ? Hero */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 180px 0;
  color: var(--light);
}
.hero-title h4 {
  letter-spacing: 10px;
  font-size: 16px;
  font-weight: 100;
  opacity: 0.7;
}
.hero-title h1 {
  font-size: 56px;
  text-transform: uppercase;
  line-height: 58px;
  max-width: 400px;
  margin: 25px 0;
}
.hero-title p {
  max-width: 380px;
  font-size: 16px;
  opacity: 0.7;
}
.hero-title a {
  color: white;
  margin-top: 50px;
  background: var(--primary);
  border: 2px solid var(--primary);
}
.hero-title a:hover {
  background: transparent;
  color: var(--primary);
}
.main_center h3
{
  margin-top: 15px;
}
.main_center p
{
  margin-top: 15px;
}

.main_center
{
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mall
{
  margin-bottom: 168px;
  display: flex;
  justify-content: space-between
}
.shopping
{
  margin-top: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #F1F1F1;
  width: 350px;
  height: 204px;
  top: 80px;
  border-radius: 8px;
  position: relative;
}
.thing
{
  width: 123px;
  /* height: 160px; */
  position: absolute;
  left: 113.68px;
  bottom: 120px;
}
.thing__about
{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 66px;
}
.thing__about a
{
  color: #000000;
  text-transform: uppercase;

}
.thing__about p
{

  padding-top: 15px;
  display: flex;
  column-gap: 13px;
  color: var(--text-gray);
  font-family: Manrope;
  font-weight: 700;
  line-height: 17.76px;
  letter-spacing: 1px;
}
.speaker
{
  background: #D87D4A;
  width: 1240px;
  height: 560px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  color: #fff;
}
.speak-svg
{
  margin-right: 300px;
  border: 1px;
  opacity: 0.2px;
  position: relative;
}
.speak-png
{
  position: absolute;
  width: 400px;
  bottom: 125px;
  left: 180px;
}
.speaker__title
{
  position: absolute;
  width: 349px;
  height: 303px;
  top: 1434px;
  left: 831px;
  display: flex;
  display: block;
  flex-direction: column;
}
.speaker__title p
{
  font-family: Manrope;
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  width: 349px;
  opacity: 75%;
  padding-bottom: 40px;
}
.speaker__title button:hover
{
  background: #4C4C4C;
  border: 1px solid #4C4C4C;
  transform: scale(97%);
}
.speaker__title button
{
  transition: .3s;
  cursor: pointer;
  font-family: Manrope;
  font-size: 13px;
  font-weight: 700;
  line-height: 17.76px;
  letter-spacing: 1px;
  padding: 15px 30px;
  text-transform: uppercase;
  background: #000;
  border: 1px solid #000;
}
.speaker__title a
{
  color: #fff;

}
.speaker__title h2
{
  padding-top: 65px;
  font-family: Manrope;
  font-size: 56px;
  font-weight: 700;
  line-height: 58px;
  letter-spacing: 2px;
  padding-bottom: 24px;
}
.table__speaker
{
  background: url('../images/table-speak.png') no-repeat center / contain;
  height: 357px;
  margin-top: 48px;
}
.table__title
{
  padding-top: 121px;
  padding-left: 135px;
}

.table__title h2
{
  font-family: Manrope;
  font-size: 28px;
  font-weight: 700;
  line-height: 38.25px;
  letter-spacing: 2px;
  padding-bottom: 32px;
}
.table__title button
{
  color: #000;
  font-family: Manrope;
  font-size: 13px;
  font-weight: 700;
  line-height: 17.76px;
  letter-spacing: 1px;
}

.table__title button:hover
{
  background: #000;
  color: #fff;
}
.table__title button
{
  transition: .3s;
  cursor: pointer;
  padding: 15px 30px;
  text-transform: uppercase;
  border: 1.5px solid #000;
  background: #D8D8D8;
}
.mini__speaker
{
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
}
.mini__speaker-right
{
  width: 600px;
  height: 355px;
  background: #F1F1F1;
  border-radius: 8px;
  padding-top: 121px;
  padding-left: 135px;
}
.mini__speaker-right button:hover
{
  background: #000;
  color: #fff;
}
.mini__speaker-right button
{
  transition: .3s;
  color: #000;
  cursor: pointer;
  text-transform: uppercase;
  padding: 15px 30px;
  font-family: Manrope;
  font-size: 13px;
  font-weight: 700;
  line-height: 17.76px;
  letter-spacing: 1px;
  border: 1.5px solid #000;
}
.mini__speaker-right h2
{
  font-family: Manrope;
  font-size: 28px;
  font-weight: 700;
  line-height: 38.25px;
  letter-spacing: 2px;
  padding-bottom: 15px;
}
.main__end
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 200px;
}
.main__end span
{
  color: var(--primary);
}
.main__end p
{
  font-family: Manrope;
  font-size: 15px;
  font-weight: 600;
  line-height: 25px;
  opacity: 50%;
  width: 445px;
  padding-top: 32px;
}
.main__end h1
{
  width: 445px;
  font-family: Manrope;
  font-size: 40px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 1.4285714626312256px;
  text-transform: uppercase;
}
footer
{
  padding-top: 75px;
  background: var(--darken);
  height: 365px;
}
.foot__top
{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.foot__top
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 34px;
}
.foot__top-nav a
{
  color:#FFF;
  font-family: Manrope;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 25px;

}
.foot__top-nav
{
  display: flex;
  column-gap: 34px;
}
.foot__center
{
  display: flex;
  justify-content: space-between;
  padding-top: 36px;
  padding-bottom: 56px;
}
.foot__center p
{
  font-family: Manrope;
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  opacity: 50%;
  color: #fff;
  width: 540px;
  height: 100px;
}
.foot__center-icon
{
  padding-top: 65px;
  display: flex;
  column-gap: 16px;
}
.foot h4
{
  color: #fff;
  opacity: 50%;
  font-family: Manrope;
  font-size: 15px;
  font-weight: 700;
  line-height: 25px;
}
.foot span
{
  width: 101px;
  height: 4px;
  top: 3626px;
  left: 165px;
  background: var(--primary);
  position: absolute;
}
.sell-for-margin
{
  margin-top: 150px;
  /* margin-bottom: 150px; */
}
.for-margin
{
  margin-top: 140px;
}
.sell
{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sell__earphon
{
  width: 540px;
  height: 560px;
  top: 496px;
  left: 165px;
  border-radius: 8px;
  background: #F1F1F1;
  padding: 65px 95px 100px 95px;
}
.sell__title
{
  margin-left: 100px;
}
.sell__new
{
  font-family: Manrope;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 10px;
  line-height: 19.12px;
  color: var(--primary);
  padding-bottom: 16px;
}
.sell__title button:hover
{
  opacity: 75%;
}
.sell__title button
{
  font-family: Manrope;
  font-size: 13px;
  font-weight: 700;
  line-height: 17.76px;
  letter-spacing: 1px;
  margin-top: 40px;
  cursor: pointer;
  transition: .3s;
  padding: 15px 30px;
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  margin-left: 16px;
}
.sell__title :placeholder-shown
{
  font-family: Manrope;
  font-size: 13px;
  font-weight: 700;
  line-height: 17.76px;
  letter-spacing: 1px;
  width: 120px;
  height: 48px;
  top: 359px;
  left: 0.5px;
  border: 0;
  background: #F1F1F1;
  text-align: center;
}

.sell__title h1
{
  width: 445px;
  font-family: Manrope;
  font-size: 40px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 1.43px;
  padding-bottom: 31px;
}

.sell__p
{
  font-family: Manrope;
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  opacity: 50%;
  width: 445px;
}