style.css

* {
  margin: 0;
  padding: 0;
}

html,
body {
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: top;
  /* padding: 5vw; */
  font-size: 2rem;
  width: 100%;
  top: 0vh;
}

.full-width {
  width: 100%;
}

.header-nav {
  display: flex;
  justify-content: space-between;

  padding-bottom: 5vh;
}

.logo img {

  max-height: 3vh;
  margin-left: 4vw;
  /* margin-top: -9vh; */
  padding: 2vw;
  z-index: 0.9;
  top: 0.9vh;
}

@media only screen and (max-width: 600px) {
  .logo img {
    width: 80%;
  }
}

.right-items {




  /* margin-top: -9vh; */

  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@media only screen and (max-width: 600px) {
  .right-items {
    display: none;
  }
}


.nav__links {
  list-style: none;
  display: flex;
  padding-right: 20px;
}

.nav__links li {
  padding: 0px 20px;
}

.search,
.cart,
.login {
  margin-left: 20px;
}

.nav__links li a {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 25px;
  color: #161618;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}

.nav__links li a:hover {
  color: #63A5B4;
}

#sale {
  color: red;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
}

#custom-color {
  color: rgb(255, 87, 51);
  /* The desired color in RGB format */
}

/* Add styles for menu list items */
#menu a {
  display: block;

}

/* Create an initial hidden line for each menu list item */
#menu a::before {
  content: '';

  width: 0;
  height: 2px;
  background-color: #63A5B4;
  /* Use the same color as the hamburger icon */
  bottom: 0;
  left: 0;
  transition: width 0.3s ease;
}

/* Expand the line on hover */
#menu a:hover::before {
  width: 80%;
}

#menuToggle {
  display: block;


  margin-top: 5vh;
  margin-left: 1.5vw;

  z-index: 1;

  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a {
  text-decoration: none;
  color: #FDFDFD;

  transition: color 0.3s ease;
}

#menuToggle input {
  display: block;
  width: 2rem;
  height: 32px;

  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */

  -webkit-touch-callout: none;
}

#menuToggle span {
  display: block;
  width: 2rem;
  height: 0.25rem;
  margin-bottom: 5px;




  background: #63A5B4;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* 
   * Transform all the slices of hamburger
   * into a crossmark.
   */
#menuToggle input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #63A5B4;
}

/*
   * hide the middle one.
   */
#menuToggle input:checked~span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
   *the last one should go the other direction
   */
#menuToggle input:checked~span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/*
   * Make this absolute positioned
   * at the top left of the screen
   */
#menu {


  background: #161618;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  transform: translate(-100%, 0);

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);

  box-shadow: 4px 0 6px rgba(0, 0, 0, 0.2);
  z-index: 3.9;
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

/*
   * slide it in from the left
   */
#menuToggle input:checked~ul {
  transform: none;
}

/* Sub Menu */
#menu li {

  padding: 10px 0;
  font-size: 22px;
}

.submenu {



  background: #161618;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out;
  opacity: 0;
  /* Initially hide the submenu */
  pointer-events: none;
  /* Ignore clicks on the hidden submenu */
  z-index: 0.1;
}

.submenu li {
  padding: 10px 0;
  font-size: 22px;
}

#menu li:hover .submenu {
  opacity: 1;
  visibility: visible;
}

.submenu-visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}


.menuToggle {
  font-family: 'Raleway', sans-serif;
}

#naviagtion {
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
}

.submenu {
  font-family: 'Raleway', sans-serif;
}

.hamburger {


  z-index: 999;
}

.content {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px;
}

.home-left {
  top: 10vh;
  left: 50px;
  color: #161618;


  font-size: 70px;
  font-style: SemiBold;
  text-align: left;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;

  letter-spacing: -1px;
  /* adjust as needed */

  /* adjust as needed */
  padding: 0;
}

@media only screen and (max-width: 600px) {
  .home-left {
    font-size: 35px;
  }

  .img-span .image {

    height: 35px;

  }
}



.img-span p {
  letter-spacing: 0px;

}

.sub-text-home-left {
  font-family: 'Raleway', sans-serif;
  color: #161618;
  font-size: 25px;
  margin-top: 100px;

  padding: 0px;

}

@media only screen and (max-width: 600px) {
  .sub-text-home-left {
    font-size: 15px;
  }
}



.left-space-text-home {}

.left-lamp-text-home {}

.customButton {

  /* Specify the height */
  height: 20vh;
  /* Specify the height */
  background: #FFFFFF url('Floor lamp black.png') no-repeat center;
  /* Add your initial button image here */
  background-size: contain;
  /* This ensures the image fits inside the button */
  transition: background 0.4s ease-in-out;
  /* This is to animate the change of image and color */
  border-radius: 15px;
  box-shadow: 0px 0px 10px rgba(220, 220, 220, 4.0);
}

.customButton:hover {
  background: #161618 url('Floor lamp.png') no-repeat center;
  /* Add your hover button image here */
  background-size: contain;
  /* This ensures the image fits inside the button */

}

.customButton2 {
  height: 20vh;
  background: #FFFFFF url('Floor mirror black.png') no-repeat center;
  /* Add your initial button image here */
  background-size: contain;
  /* This ensures the image fits inside the button */
  transition: background 0.4s ease-in-out;
  /* This is to animate the change of image and color */
  border-radius: 15px;
  box-shadow: 0px 0px 10px rgba(220, 220, 220, 4.0);
}

.customButton2:hover {
  background: #161618 url('Floor mirror.png') no-repeat center;
  /* Add your hover button image here */
  background-size: contain;
  /* This ensures the image fits inside the button */

}

.customButton3 {

  height: 20vh;
  /* Specify the height */
  background: #FFFFFF url('Sofa black.png') no-repeat center;
  /* Add your initial button image here */
  background-size: contain;
  /* This ensures the image fits inside the button */
  transition: background 0.4s ease-in-out;
  /* This is to animate the change of image and color */
  border-radius: 15px;
  box-shadow: 0px 0px 10px rgba(220, 220, 220, 4.0);
}

.customButton3:hover {
  background: #161618 url('Sofa.png') no-repeat center;
  /* Add your hover button image here */
  background-size: contain;
  /* This ensures the image fits inside the button */

}

.Mirror-btn {


  border-radius: 15px;
  background: #FFFFFF;
  /* Adjust color as needed */
  box-shadow: 0px 0px 10px rgba(220, 220, 220, 4.0);
  /* Adjust as needed */
  border-radius: 15px;
  /* Adjust as needed */
  z-index: 1;
}

.Sofa-btn {


  border-radius: 15px;
  background: #FFFFFF;
  /* Adjust color as needed */
  box-shadow: 0px 0px 10px rgba(220, 220, 220, 4.0);
  /* Adjust as needed */
  border-radius: 15px;
  /* Adjust as needed */
  z-index: 1;
  background-image: url('home page left side icon\Sofa.png');
}

.Lamp-btn {


  border-radius: 15px;
  background: #FFFFFF;
  /* Adjust color as needed */
  box-shadow: 0px 0px 10px rgba(220, 220, 220, 4.0);
  /* Adjust as needed */
  border-radius: 15px;
  /* Adjust as needed */
  z-index: 1;
}

.Mirror {}

.Lamp {}

.Sofa {}

.Mirror,
.Lamp,
.Sofa {
  z-index: 2;
}

.hamburger {
  top: 40px;
  left: 40px;

}

.hamburger-logo {
  width: 45px;
  height: 30px;
}

.left-sofa-text {

  color: rgba(22, 22, 24, 1);

  height: auto;

  font-size: 32px;
  font-style: Medium;
  text-align: center;
  font-family: Raleway;
  font-weight: 500;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.left-lamp-text {

  color: rgba(22, 22, 24, 1);

  height: auto;

  font-size: 32px;
  font-style: Medium;
  text-align: center;
  font-family: Raleway;
  font-weight: 500;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.left-mirror-text {

  color: rgba(22, 22, 24, 1);

  height: auto;

  font-size: 32px;
  font-style: Medium;
  text-align: center;
  font-family: Raleway;
  font-weight: 500;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.whats-new {

  color: rgba(0, 0, 0, 1);

  height: auto;

  font-size: 70px;
  font-style: SemiBold;
  text-align: left;
  flex: 1;
  font-family: Raleway;
  font-weight: 600;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

@media only screen and (max-width: 600px) {
  .whats-new {
    font-size: 25px;
  }
}

.whats-p {

  color: rgba(0, 0, 0, 0.8500000238418579);
  flex: 1;
  height: auto;

  font-size: 26px;
  font-style: Regular;
  text-align: right;
  font-family: Raleway;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none
}

@media only screen and (max-width: 600px) {
  .whats-p {
    font-size: 16px;
  }
}

.container {
  display: flex;
  padding-left: 10%;
  gap: 10px;
  padding-right: 10%;
}

@media only screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

.extra-gap {
  gap: 30px;
  align-items: center;
  
}

.v-container {
  display: flex;
  padding-left: 10%;
  padding-right: 10%;
  margin-top: 5%;
  flex-direction: column;
}

.centered-line {


  /* Adjust as needed */
  content: '';
  display: block;
  margin: 20px auto;
  width: 90%;
  border-bottom: 3px solid #63A5B4;
  left: 0;
  right: 0;
}

.product-1-image {
  height: 370px;
  width: 370px;

}

@media only screen and (max-width: 600px) {
  .product-1-image {
    width: 80vw;
    height: 80vw;
  }
}

.console-text {

  color: rgba(22, 22, 24, 1);

  height: auto;

  font-size: 16px;
  font-style: Regular;
  text-align: center;
  font-family: Raleway;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.price-1 {

  color: rgba(99, 165, 180, 1);

  height: auto;

  font-size: 20px;
  font-style: SemiBold;
  text-align: center;
  font-family: Raleway;
  font-weight: 600;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.new-product-1 {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

.product-2-image {


  border-radius: 5px;
}

.dining-table-text {

  color: rgba(22, 22, 24, 1);


  font-size: 16px;
  font-style: Regular;
  text-align: center;
  font-family: Raleway;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.price-2 {

  color: rgba(99, 165, 180, 1);
  width: 150px;
  height: auto;

  font-size: 20px;
  font-style: SemiBold;
  text-align: center;
  font-family: Raleway;
  font-weight: 600;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.product-3-image {


  border-radius: 5px;
}

.coffeetable-text {

  color: rgba(22, 22, 24, 1);
  width: 230px;
  height: auto;

  font-size: 16px;
  font-style: Regular;
  text-align: center;
  font-family: Raleway;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.price-3 {

  color: rgba(99, 165, 180, 1);
  width: 152px;
  height: auto;

  font-size: 20px;
  font-style: SemiBold;
  text-align: center;
  font-family: Raleway;
  font-weight: 600;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.product-4-image {


  border-radius: 5px;
}

.price-4 {

  color: rgba(99, 165, 180, 1);
  width: 148px;
  height: auto;

  font-size: 20px;
  font-style: SemiBold;
  text-align: center;
  font-family: Raleway;
  font-weight: 600;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.tvunit-text {

  color: rgba(22, 22, 24, 1);
  width: 275px;
  height: auto;

  font-size: 16px;
  font-style: Regular;
  text-align: left;
  font-family: Raleway;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.product-5-image-2 {
  top: 1751px;
  left: 637px;
  width: 216px;
  height: 259px;

  border-radius: 5px;
}

.price-5 {

  color: rgba(99, 165, 180, 1);
  width: 152px;
  height: auto;

  font-size: 20px;
  font-style: SemiBold;
  text-align: left;
  font-family: Raleway;
  font-weight: 600;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.bentwood-text {

  color: rgba(22, 22, 24, 1);
  width: 283px;
  height: auto;

  font-size: 16px;
  font-style: Regular;
  text-align: left;
  font-family: Raleway;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.product-5-image {


  border-radius: 5px;
}

.product-6-image-2 {


  border-radius: 5px;
}

.price-6 {

  color: rgba(99, 165, 180, 1);
  width: 151px;
  height: auto;

  font-size: 20px;
  font-style: SemiBold;
  text-align: left;
  font-family: Raleway;
  font-weight: 600;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.chealseachair {

  color: rgba(22, 22, 24, 1);
  width: 282px;
  height: auto;

  font-size: 16px;
  font-style: Regular;
  text-align: left;
  font-family: Raleway;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.product-6-image {

  border-radius: 5px;
}

.whats-new-btn {

  grid-auto-rows: 1fr;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media only screen and (max-width: 600px) {
  .whats-new-btn {
    display: flex;
    flex-direction: column;
  }
}

.square1 {

  justify-content: center;
  flex: 1;
  border-radius: 10px;
  background-color: #FFFFFF;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

.square2 {

  top: 700px;
  left: 800px;
  flex: 1;
  border-radius: 10px;
  background-color: #FFFFFF;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

.style-tips {
  top: 15px;
  background-color: #FFFFFF;
  color: rgba(0, 0, 0, 1);

  font-size: 28px;
  font-family: Raleway;
  font-weight: 999;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  .style-tips {
    font-size: 18px;
  }
}

.button12 {


  align-items: center;
  text-align: center;
  border-radius: 20px;
  font-family: 'Raleway', sans-serif;
  color: black;
  transition: background-color 0.3s;
  background-color: #63A5B4;
  font-size: 1.6rem;
  text-decoration: none;
}

.button12:hover {
  background-color: #161618;
  color: white;

}

.sign-up-btn {

  top: 1vh;
}

.home-instagram-icon {

  top: 3vh;
  left: 14vh;
  width: 38px;
  height: 38px;
}

.insta-all-font {
  display: flex;
  left: 7vh;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
}

.insta-main {

  color: rgba(2, 4, 8, 1);
  padding: 5px;

  font-size: 30px;
  font-weight: 800;
  font-family: Raleway;
  background-color: none;
}

@media only screen and (max-width: 600px) {
  .insta-main {
    font-size: 20px;
  }
}

.insta-id {
  top: 65px;
  left: 50px;
  color: rgba(2, 4, 8, 1);
  width: 366px;
  height: auto;

  font-size: 20px;
  text-align: center;
  font-family: Raleway;
  font-weight: bold;
}

@media only screen and (max-width: 600px) {
  .insta-id {
    font-size: 15px;
  }
}

.insta-ui {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}



.home-instagram-img-1 {
  height: 100px;
  width: 100px;

}

@media only screen and (max-width: 600px) {
  .insta-ui {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-instagram-img-1 {
    height: 25vw;
    width: 25vw;
  }
}

.mac-book-pro1415-rectangle60 {}

.footer {
  background-color: #161618;
  margin-top: 20px;
  width: 100%;

}

.contactus {

  color: rgba(243, 243, 243, 1);

  height: auto;

  font-size: 24px;
  font-style: Bold;
  text-align: left;
  font-family: Raleway;
  font-weight: 700;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.aboutus {

  color: rgba(243, 243, 243, 1);
  width: 124px;
  height: auto;

  font-size: 24px;
  font-style: Bold;
  text-align: center;
  font-family: Raleway;
  font-weight: 700;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.termsandconditions {

  color: rgba(243, 243, 243, 1);
  width: 242px;
  height: auto;

  font-size: 24px;
  font-style: Bold;
  text-align: left;
  font-family: Raleway;
  font-weight: 700;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}


.footer-explanation {

  color: rgba(243, 243, 243, 0.8500000238418579);
  margin-bottom: 20px;
  height: auto;
  flex: 1;
  font-size: 21px;
  font-style: Medium;
  text-align: left;
  font-family: Raleway;
  font-weight: 500;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.explanation-1 {

  color: rgba(243, 243, 243, 1);
  width: 203px;
  height: auto;

  font-size: 21px;
  font-style: Regular;
  text-align: left;
  font-family: Raleway;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

.explanation-2 {

  color: rgba(243, 243, 243, 1);
  width: 175px;
  height: auto;

  font-size: 21px;
  font-style: Medium;
  text-align: left;
  font-family: Raleway;
  font-weight: 500;
}

.logo-2 {
  margin-top: 20px;
  margin-left: 10%;
  margin-bottom: 20px;
  width: 20%;
}

@media only screen and (max-width: 600px) {
  .logo-2 {
    width: 80%;
  }
}

.fotter-rec {

  display: flex;
  justify-content: center;

  background-color: #161618;
  left: -1.1vh;
}

@media only screen and (max-width: 600px) {
  .fotter-rec {
    flex-direction: column;
  }
}

.contactus,
.aboutus,
.termsandconditions,
.footer-explanation,
.explanation-1,
.explanation-2 {
  background-color: transparent;
}

#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 5.5vh;

  
  border-radius: 20px;
  overflow: hidden;

  z-index: 0;
}

.video {
width: 50vw;
    height: 35vw;
  left: 0;
  top: 0;
  object-fit: cover;
  opacity: 1;
  border-radius: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

@media only screen and (max-width: 600px) {
  .video {
    width: 80vw;
    height: 45vw;
  }
}

.home-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.body-main {

  top: -2vh;
}

.inbox-fotter {
  margin-top: 30px;

}

.whole-body {}

.whats-new-container {


  z-index: 2;
}

.whatsnew-bio {
  display: flex;
  align-items: center;
}