/* Google fonts link */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

*,
*::before,
*::after {
  margin: 0;

  padding: 0;

  box-sizing: border-box;

  /* transition: 0.3s; */
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;

  height: 100%;

  overflow-x: hidden;

  overflow: hidden;

  font-family: "Poppins", sans-serif;

  font-weight: 400;
}

a {
  text-decoration: none;
}

ul,
li {
  list-style: none;
}

:root {
  /* Brown Color */

  --brown-color-200: rgba(209, 197, 120, 0.2);
  /* #d1c57833 */

  --brown-color-300: rgba(239, 233, 192, 1);
  /* #efe9c0 */

  --brown-color-400: rgb(245 244 229);
  /* #d1c578 */

  --brown-color-500: rgb(161 133 98);
  /* #aa7936 */

  --brown-color-600: rgba(81, 70, 66, 1);
  /* #5d3a15 */

  /* Black Color */

  --black-color-300: rgba(137, 137, 137, 1);
  /* #898989 */

  --black-color-400: rgba(81, 70, 66, 1);
  /* #514642 */

  --black-color-500: rgba(44, 44, 44, 1);
  /* #2c2c2c */

  --black-color-600: rgba(28, 25, 11, 1);
  /* #1c190b */

  --black-color-700: rgba(0, 0, 0, 1);
  /* #000000 */

  /* White Color */

  --white-color-300: rgba(228, 228, 228, 1);
  /* #e4e4e4 */

  --white-color-700: rgba(255, 255, 255, 1);
  /* #ffffff */

  /* Font Family */

  --font-family-poppins: "Poppins", sans-serif;

  --font-family-playfair-display: "Playfair Display", serif;

  /* Radius */

  --radius-005: 0.3125rem;

  --radius-004: 0.25rem;

  --radius-003: 0.1875rem;

  --radius-010: 0.625rem;

  --radius-full: 50%;

  --radius-060: 3.75rem;

  --radius-030: 1.875rem;

  --radius-020: 1.25rem;

  --radius-008: 0.5rem;

  /* Font Size */

  --font-size-18: 1.125rem;

  --font-size-32: 2rem;

  --font-size-72: 4.5rem;

  --font-size-28: 1.75rem;

  --font-size-46: 2.875rem;

  --font-size-22: 1.375rem;

  --font-size-20: 1.25rem;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--brown-color-500);
}

::-webkit-scrollbar-thumb {
  background-color: var(--brown-color-400);
}

.noSelect {
  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -khtml-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
}

.noSelect:focus {
  outline: none !important;

  -webkit-tap-highlight-color: transparent;
}

:focus {
  outline: none !important;
}

.animateElement {
  filter: blur(1px);

  transform: scale(0.8) translateY(20px);
}

.horizontalLine {
  width: 100%;

  border: 0.0625rem solid rgb(228 228 228 / 48%);
}

select {
  appearance: none;
  /* Native dropdown arrow hatao */

  -webkit-appearance: none;
  /* Safari ke liye */

  -moz-appearance: none;
  /* Firefox ke liye */

  padding: 0.75rem 2.5rem 0.75rem 0.75rem;

  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5"/></svg>');

  background-repeat: no-repeat;

  background-position: right 0.75rem center;

  /* background-size: 1rem 1rem; */
}

.slick-list,
.slick-track {
  height: 100%;
}

/* Button */

.BrownBTN {
  position: relative;

  outline: none;

  border: none;

  color: var(--white-color-700);

  font-weight: 500;

  font-size: var(--font-size-18);

  line-height: var(--font-size-18);

  border-radius: var(--radius-004);

  font-family: var(--font-family-poppins);

  cursor: pointer;

  span {
    width: 100%;

    height: 100%;

    padding: 0.875rem 0.625rem;

    background-color: var(--brown-color-500);

    border-radius: var(--radius-004);

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    z-index: 2;
  }

  &::before {
    content: "";

    width: 100%;

    height: 100%;

    background-color: var(--black-color-600);

    position: absolute;

    border-radius: var(--radius-004);

    left: 0.25rem;

    top: 0.25rem;

    transition: 0.3s;
  }

  svg {
    width: 1.375rem;

    height: unset;

    transition: 0.3s;
  }

  &:hover::before {
    left: 0;

    top: 0;
  }

  &:hover svg {
    transform: rotate(34deg);
  }
}

.DarkBrownBTN {
  span {
    background-color: var(--black-color-400);
  }

  &::before {
    background-color: var(--brown-color-500);
  }
}

#success-message {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* =-------------------= loading Screen =-------------------= */

/* ========================================================== */

.loadingScreen {
  width: 100%;

  height: 100dvh;

  position: fixed;

  top: 0;

  left: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 111;

  /* transition-delay: 800; */

  div {
    flex: 1;

    height: 100%;

    background: #000;

    transform-origin: left;

    transition: 0.3s;

    background: var(--black-color-400);

    /* border-left: 0.0625rem dashed var(--brown-color-500); */

    &:nth-of-type(1) {
      transition-delay: 100;
    }

    &:nth-of-type(2) {
      transition-delay: 200;
    }

    &:nth-of-type(3) {
      transition-delay: 300;
    }

    &:nth-of-type(4) {
      transition-delay: 400;
    }

    &:nth-of-type(5) {
      transition-delay: 500;
    }

    &:nth-of-type(6) {
      transition-delay: 600;
    }
  }

  div.content {
    width: 21.875rem;

    height: auto;

    position: absolute;

    background: transparent;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    gap: 1.25rem;

    /* background-color: var(--brown-color-600);

    border-radius: var(--radius-full);

    box-shadow: 0rem 0rem 0 0.625rem var(--brown-color-500); */

    /* padding: 0.875rem; */

    /* outline: 0.125rem dashed var(--brown-color-400); */

    transition: 0.3s;

    img {
      width: 100%;

      height: 100%;

      object-fit: contain;
    }

    h1 {
      font-size: 1.5rem;

      font-weight: 600;

      color: var(--brown-color-400);
    }
  }

  &.hide {
    div:not(.content) {
      transform: scaleX(0);
    }

    div.content {
      opacity: 0;

      visibility: hidden;
    }
  }

  /* &.hide {

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

  } */
}

body.nav-open .offerBtn {
  display: none;
}

/* =-------------------= Navbar =-------------------= */

/* ================================================== */

nav {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  position: fixed;

  top: 1.4375rem;

  left: 0;

  z-index: 11;

  transition: 0.3s;

  .centerContent {
    width: 90.9375rem;

    border-radius: var(--radius-005);

    background-color: var(--brown-color-600);

    display: flex;

    justify-content: center;

    align-items: center;

    transition: 0.3s;

    .center_content {
      width: 90.9375rem;

      display: flex;

      justify-content: space-between;

      align-items: center;

      padding: 0.75rem 1.8125rem 0.75rem 1.8125rem;
    }

    a {
      width: 11.3125rem;

      z-index: 999;

      transition: 0.3s;

      img {
        width: 100%;
      }
    }

    .desktopNav {
      display: flex;

      gap: 0.5rem;

      justify-content: center;

      align-items: center;

      li {
        a {
          padding: 0.3125rem 0.8125rem 0.3125rem 0.8125rem;

          border-radius: var(--radius-005);

          font-size: var(--font-size-18);

          line-height: var(--font-size-18);

          font-weight: 500;

          color: var(--brown-color-400);

          transition: 0.3s;

          &.active,
          &:hover {
            background-color: var(--brown-color-500);
          }
        }
      }

      .socialMedia,
      .topUnderline {
        display: none;
      }
    }

    .btnAndBreadcrumb {
      display: flex;

      justify-content: center;

      align-items: stretch;

      gap: 0.625rem;

      a.offerBtn {
        button.BrownBTN {
          width: 100%;
        }
      }

      .breadcrumb {
        display: flex;

        justify-content: center;

        align-items: center;

        background-color: var(--brown-color-500);

        width: 3.5rem;

        padding: 5px;

        border-radius: 0.125rem;

        box-shadow: 0.125rem 0.125rem 0 0.0625rem var(--black-color-600);

        z-index: 99;

        cursor: pointer;

        display: none;

        svg {
          color: var(--white-color-700);
        }

        .navbarHamburgerIcon {
          display: flex;
        }

        .navbarCloseIcon {
          display: none;
        }

        &.active {
          .navbarHamburgerIcon {
            display: none;
          }

          .navbarCloseIcon {
            display: flex;
          }
        }
      }
    }
  }

  &.active {
    top: 0;

    .centerContent {
      width: 100%;

      border-radius: 0;

      box-shadow: 0 0 1.25rem 0 #3333;

      a {
        width: 10.8rem;
      }
    }
  }
}

/* =-------------------= header =-------------------= */

/* ================================================== */

header {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  height: 59rem;

  .slider {
    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    .slide {
      width: 100%;

      height: 100%;

      display: flex;

      justify-content: center;

      align-items: center;

      position: relative;

      .gradientLayer {
        width: 100%;

        height: 100%;

        position: absolute;

        top: 0;

        left: 0;

        background: linear-gradient(90deg,
            var(--white-color-700) 0%,

            transparent 100%);

        z-index: 1;
      }

      img {
        width: 100%;

        height: 100%;

        object-fit: cover;

        position: absolute;

        top: 0;

        left: 0;
      }

      .content {
        width: 78.75rem;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: flex-start;

        position: relative;

        /* margin-left: 17.1875rem; */

        z-index: 1;

        &::before {
          content: "";

          width: 0.4375rem;

          height: 100%;

          border-radius: var(--radius-010);

          background-color: var(--brown-color-400);

          position: absolute;

          left: -1.5rem;
        }

        p {
          font-weight: 300;

          font-size: var(--font-size-32);

          line-height: var(--font-size-32);

          color: var(--brown-color-600);
        }

        h1 {
          font-family: var(--font-family-playfair-display);

          font-weight: 700;

          font-size: var(--font-size-72);

          line-height: 6.875rem;

          color: var(--black-color-500);
        }

        .btns {
          margin-top: 2.3125rem;

          display: flex;

          gap: 2.125rem;

          justify-content: center;

          align-items: center;

          margin-left: 0.5rem;

          button {
            min-width: 10.375rem;

            &:last-of-type::before {
              background-color: #f2d766;
            }
          }
        }
      }
    }
  }

  .indicator {
    position: absolute;

    bottom: 4.7188rem;

    right: 15.4375rem;

    display: flex;

    gap: 0.9375rem;

    justify-content: center;

    align-items: center;

    z-index: 1;

    pointer-events: none;

    div {
      width: 1.25rem;

      height: 1.25rem;

      border-radius: var(--radius-003);

      background: rgba(150, 133, 127, 1);

      cursor: pointer;

      pointer-events: all;

      &.active {
        background-color: var(--brown-color-600);
      }
    }
  }
}

/* aboutUs */

/* ======= */

.aboutUs {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 7.75rem 0;
}

.aboutUs .centerContent {
  width: 90%;

  max-width: 82.125rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 2.3125rem;
}

.aboutUs .centerContent .topHeadingPart {
  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 0.625rem;
}

.aboutUs .centerContent .topHeadingPart span {
  font-size: var(--font-size-28);

  font-weight: 500;

  line-height: 1.125rem;

  color: var(--brown-color-600);
}

.aboutUs .centerContent .topHeadingPart h1 {
  font-size: var(--font-size-46);

  font-weight: 700;

  line-height: 3.5rem;

  font-family: var(--font-family-playfair-display);

  color: var(--black-color-500);
}

.aboutUs .centerContent .bottomContentPart {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 9.6563rem;

  padding-top: 1.25rem;
}

.aboutUs .centerContent .bottomContentPart .leftSideImage {
  width: 31.9688rem;

  height: 36.6044rem;
}

.aboutUs .centerContent .bottomContentPart .rightSide {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  gap: 2.375rem;
}

.aboutUs .centerContent .bottomContentPart .rightSide p {
  font-size: var(--font-size-18);

  font-weight: 300;

  line-height: 1.75rem;

  color: var(--black-color-700);
}

.aboutUs .centerContent .bottomContentPart .rightSide .ourQualityContainer {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  gap: 1.5rem;
}

.aboutUs .centerContent .bottomContentPart .rightSide .ourQualityContainer .quality {
  display: flex;

  justify-content: center;

  align-items: flex-start;

  gap: 0.9375rem;
}

.aboutUs .centerContent .bottomContentPart .rightSide .ourQualityContainer .quality .icon {
  width: 4.375rem;

  height: 4.375rem;

  border-radius: var(--radius-full);

  background: var(--black-color-400);

  display: flex;

  justify-content: center;

  align-items: center;

  flex-shrink: 0;
}

.aboutUs .centerContent .bottomContentPart .rightSide .ourQualityContainer .quality .icon img {
  width: 2.375rem;

  height: 2.375rem;
}

.aboutUs .centerContent .bottomContentPart .rightSide .ourQualityContainer .quality .content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  gap: 1.0625rem;

  padding-top: 1rem;
}

.aboutUs .centerContent .bottomContentPart .rightSide .ourQualityContainer .quality .content h3 {
  font-size: var(--font-size-22);

  font-weight: 600;

  line-height: 1.125rem;

  color: var(--black-color-500);
}

.aboutUs .centerContent .bottomContentPart .rightSide .ourQualityContainer .quality .content p {
  font-size: var(--font-size-18);

  font-weight: 300;

  line-height: 1.75rem;

  color: var(--black-color-700);
}

/* bestInteriorDesign */

/* ================== */

.bestInteriorDesign {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  background: url(../images/Shapes/bestInterriorDesign_pattern.webp);

  background-position: center;

  background-size: cover;

  padding: 6.75rem 0 4.75rem;

  position: relative;
}

.bestInteriorDesign::before {
  content: "";

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background: rgba(81, 70, 66, 0.9);
}

.bestInteriorDesign .centerContent {
  width: 90%;

  max-width: 58.0625rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  z-index: 1;
}

.bestInteriorDesign .centerContent h2 {
  font-size: var(--font-size-28);

  font-weight: 500;

  line-height: 1.125rem;

  color: var(--brown-color-400);

  margin-bottom: 0.625rem;
}

.bestInteriorDesign .centerContent h1 {
  font-family: var(--font-family-playfair-display);

  font-size: var(--font-size-46);

  font-weight: 700;

  line-height: 3.5rem;

  color: var(--white-color-700);

  margin-bottom: 1.875rem;
}

.bestInteriorDesign .centerContent p {
  font-size: var(--font-size-18);

  font-weight: 300;

  line-height: 1.75rem;

  text-align: center;

  color: var(--white-color-700);

  margin-bottom: 2.5rem;
}

.bestInteriorDesign .centerContent .btns {
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 1.875rem;
}

.bestInteriorDesign .centerContent .btns .BrownBTN {
  width: 10.625rem;

  height: 3.375rem;
}

/* services */

/* ======== */

.services {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 7.75rem 0;

  position: relative;

  scroll-margin: 3rem;
}

.services .bgImg01 {
  width: 14.8125rem;

  height: 16.0625rem;

  position: absolute;

  top: 2.895rem;

  left: 0;
}

.services .bgImg02 {
  width: 14.8125rem;

  height: 16.0625rem;

  position: absolute;

  bottom: 0;

  right: 0;
}

.services .centerContent {
  width: 90%;

  max-width: 82.125rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 2.3125rem;

  z-index: 1;
}

.services .centerContent .topHeadingAndParagraph {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 4.5rem;
}

.services .centerContent .topHeadingAndParagraph .leftSide {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  gap: 0.625rem;
}

.services .centerContent .topHeadingAndParagraph .leftSide h3 {
  font-size: var(--font-size-28);

  font-weight: 500;

  line-height: 1.125rem;

  color: var(--brown-color-600);
}

.services .centerContent .topHeadingAndParagraph .leftSide h1 {
  font-family: var(--font-family-playfair-display);

  font-size: var(--font-size-46);

  font-weight: 700;

  line-height: 4.375rem;

  color: var(--black-color-500);
}

.services .centerContent .topHeadingAndParagraph p {
  font-size: var(--font-size-18);

  font-weight: 300;

  line-height: 1.75rem;

  color: var(--black-color-700);

  flex-shrink: 0;
}

.services .centerContent .cardsContainer {
  width: 100%;

  min-height: 34.2506rem;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 1.5625rem;

  flex-wrap: wrap;

  margin-top: 1.25rem;
}

.services .centerContent .cardsContainer .card {
  width: 100%;

  max-width: 26.125rem;

  background: rgba(255, 255, 255, 0.3);

  border-radius: var(--radius-030);

  border: 0.0625rem solid var(--brown-color-600);

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  padding: 0 1.4675rem;

  position: relative;
}

.services .centerContent .cardsContainer .card .cardContent {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;
}

.services .centerContent .cardsContainer .card .cardContent .image {
  width: 23.2531rem;

  height: 17.4887rem;

  border-radius: var(--radius-030);

  overflow: hidden;

  position: relative;

  top: -1.4531rem;
}

.services .centerContent .cardsContainer .card .cardContent .image img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 1s;
}

.services .centerContent .cardsContainer .card:hover .cardContent .image img {
  transform: scale(1.2);

  filter: grayscale(1);
}

.services .centerContent .cardsContainer .card .cardContent .bottomContent {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  overflow: hidden;
}

.services .centerContent .cardsContainer .card .cardContent .bottomContent h3 {
  font-size: var(--font-size-20);

  font-weight: 600;

  color: var(--black-color-500);

  margin-bottom: 0.7312rem;

  text-transform: uppercase;
}

.services .centerContent .cardsContainer .card .cardContent .bottomContent p {
  font-size: var(--font-size-18);

  font-weight: 400;

  line-height: 1.75rem;

  text-align: center;

  color: var(--black-color-700);

  margin-bottom: 1.8175rem;
}

.services .centerContent .cardsContainer .card .cardContent .bottomContent .buttonArrow {
  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;
}

.services .centerContent .cardsContainer .card .cardContent .bottomContent .buttonArrow .downArrow {
  position: absolute;

  transition: 0.3s;
}

.services .centerContent .cardsContainer .card:hover .cardContent .bottomContent .buttonArrow .downArrow {
  transform: translateY(0.3125rem);
}

/* =-------------------= projects =-------------------= */

/* ==================================================== */

.projects {
  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 7.875rem 0;

  gap: 3.5625rem;

  background: var(--brown-color-600);

  scroll-margin: 3rem;

  .heading {
    width: 81.625rem;

    display: flex;

    gap: 2.3125rem;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    .content {
      width: 100%;

      display: flex;

      gap: 0.625rem;

      justify-content: space-between;

      align-items: center;

      .left {
        display: flex;

        gap: 3.8125rem;

        justify-content: center;

        align-items: center;

        .headingAndPera {
          display: flex;

          gap: 0.625rem;

          flex-direction: column;

          justify-content: flex-start;

          align-items: flex-start;

          h4 {
            font-weight: 500;

            font-size: var(--font-size-28);

            line-height: var(--font-size-18);

            color: var(--brown-color-400);
          }

          h1 {
            font-family: var(--font-family-playfair-display);

            font-weight: 700;

            font-size: var(--font-size-46);

            line-height: 3.5rem;

            color: var(--white-color-700);
          }
        }

        p {
          font-weight: 300;

          font-size: var(--font-size-18);

          line-height: var(--font-size-28);

          color: var(--white-color-700);
        }
      }

      .carouselArrow {
        display: flex;

        gap: 1.3125rem;

        justify-content: center;

        align-items: center;

        .left {
          width: 3.125rem;

          height: 3.125rem;

          border: 0.0625rem solid var(--white-color-700);

          border-radius: var(--radius-full);

          display: flex;

          justify-content: center;

          align-items: center;

          cursor: pointer;

          transition: 0.3s;

          svg {
            width: 1.625rem;

            height: unset;
          }

          &:nth-of-type(1):hover {
            box-shadow: -0.1875rem 0rem 0rem 0.1875rem #b57732;
          }

          &:nth-of-type(2):hover {
            box-shadow: 0.1875rem 0rem 0rem 0.1875rem #b57732;
          }
        }
      }
    }
  }

  .carousel {
    width: 100%;

    .slick-track {
      display: flex;

      gap: 0;

      justify-content: center;

      align-items: center;
    }

    .carousel-card {
      display: flex;

      gap: 1.875rem;

      flex-direction: column;

      justify-content: flex-start;

      align-items: flex-start;

      padding: 0 10px;

      flex-shrink: 0;

      .image {
        width: 100%;

        height: 31.25rem;

        border-radius: var(--radius-020);

        display: flex;

        justify-content: center;

        align-items: center;

        overflow: hidden;

        position: relative;

        a {
          width: 100%;

          height: 100%;
        }

        img {
          width: 100%;

          height: 100%;

          object-fit: cover;
        }

        .magnifyingIcon {
          width: 100%;

          height: 100%;

          position: absolute;

          top: 0;

          left: 0;

          background: rgba(209, 197, 120, 0.55);

          display: flex;

          justify-content: center;

          align-items: center;

          visibility: hidden;

          opacity: 0;

          transition: 0.3s;

          img {
            width: 3rem;

            height: 3rem;
          }
        }

        &:hover {
          .magnifyingIcon {
            visibility: visible;

            opacity: 1;

            backdrop-filter: blur(0.25rem);
          }
        }
      }

      .content {
        display: flex;

        gap: 0.5625rem;

        justify-content: center;

        align-items: center;

        transition: 0.3s;

        svg {
          width: 2.5625rem;

          height: unset;

          transition: 0.3s;
        }

        .shortDetail {
          display: flex;

          gap: 1.875rem;

          flex-direction: column;

          justify-content: center;

          align-items: center;

          transition: 0.3s;

          p {
            font-weight: 500;

            font-size: var(--font-size-18);

            line-height: var(--font-size-18);

            position: relative;

            display: flex;

            gap: 0.625rem;

            justify-content: center;

            align-items: center;

            transition: 0.3s;

            color: var(--white-color-700);

            &::before {
              content: "";

              width: 2.5rem;

              height: 0.125rem;

              background-color: var(--white-color-700);

              position: relative;

              left: 0;

              transition: 0.3s;
            }
          }

          h1 {
            font-weight: 500;

            font-size: var(--font-size-18);

            line-height: var(--font-size-18);

            color: var(--white-color-700);

            transition: 0.3s;
          }
        }
      }

      &:hover {
        .content {
          svg {
            transform: rotate(30deg);

            path {
              stroke: var(--brown-color-400);
            }
          }

          .shortDetail {
            p {
              color: var(--brown-color-400);

              &::before {
                background-color: var(--brown-color-400);
              }
            }

            h1 {
              color: var(--brown-color-400);

              text-decoration: underline;

              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

/* =-------------------= companies =-------------------= */

/* ===================================================== */

.companies {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: rgba(209, 197, 120, 0.2);

  .centerContent {
    width: 82.4375rem;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 3.6875rem 0;

    gap: 1.125rem;

    .company_left_carouselArrow,
    .company_right_carouselArrow {
      width: 2.5rem;

      height: 2.5rem;

      border-radius: 50%;

      display: flex;

      justify-content: center;

      align-items: center;

      border: 0.0625rem solid var(--black-color-500);

      flex-shrink: 0;

      transition: 0.3s;

      cursor: pointer;

      svg {
        width: 1.25rem;

        height: unset;
      }
    }

    .company_left_carouselArrow:hover {
      box-shadow: -0.1875rem 0rem 0rem 0.1875rem var(--brown-color-600);
    }

    .company_right_carouselArrow:hover {
      box-shadow: 0.1875rem 0rem 0rem 0.1875rem var(--brown-color-600);
    }

    .companies_carousel {
      width: 100%;

      display: flex;

      justify-content: center;

      align-items: center;

      /* padding: 0; */

      .slick-track {
        display: flex;

        gap: 0px;

        align-items: center;

        img {
          transition: 0.3s;

          padding: 0 2.6rem;

          &:hover {
            filter: brightness(0.5);
          }
        }
      }
    }
  }
}

/* =-------------------= contact us =-------------------= */

/* ====================================================== */

.contactUs {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 7.75rem 0;

  position: relative;

  scroll-margin: 3rem;

  .bgPattren {
    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    opacity: 0.9;
  }

  .bgColor {
    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    background-color: rgba(81, 70, 66, 0.9);
  }

  .centerContent {
    width: 90%;

    max-width: 82.125rem;

    display: flex;

    gap: 6.1875rem;

    justify-content: center;

    align-items: flex-start;

    z-index: 1;

    .leftSide {
      display: flex;

      gap: 3.125rem;

      flex-direction: column;

      justify-content: center;

      align-items: center;

      .info {
        width: 25.125rem;

        min-height: 8.125rem;

        border-radius: var(--radius-010);

        background-color: var(--white-color-700);

        display: flex;

        gap: 1.25rem;

        justify-content: flex-start;

        align-items: center;

        padding: 2.1875rem 1.9375rem;

        img {
          width: 3.125rem;

          height: unset;
        }

        .content {
          display: flex;

          gap: 0.625rem;

          flex-direction: column;

          justify-content: flex-start;

          align-items: flex-start;

          h1 {
            font-weight: 500;

            font-size: var(--font-size-28);

            line-height: var(--font-size-32);

            color: var(--black-color-700);
          }

          a,
          p {
            font-weight: 400;

            font-size: var(--font-size-18);

            line-height: var(--font-size-18);

            color: var(--brown-color-600);

            position: relative;
          }

          a {
            &::before {
              content: "";

              width: 100%;

              height: 0.0625rem;

              background-color: var(--brown-color-600);

              position: absolute;

              left: 0;

              bottom: 0;

              transform: scaleX(0);

              transform-origin: left;

              transition: 0.3s;
            }

            &:hover {
              &::before {
                transform: scaleX(1);
              }
            }
          }
        }
      }
    }

    .rightSide {
      max-width: 48.375rem;

      display: flex;

      gap: 2.875rem;

      flex-direction: column;

      justify-content: flex-start;

      align-items: flex-start;

      .headingAndPera {
        display: flex;

        gap: 1.875rem;

        flex-direction: column;

        justify-content: center;

        align-items: flex-start;

        .tagAndHeading {
          display: flex;

          gap: 0.625rem;

          flex-direction: column;

          justify-content: center;

          align-items: flex-start;

          h2 {
            font-weight: 500;

            font-size: var(--font-size-28);

            line-height: var(--font-size-18);

            color: var(--white-color-700);
          }

          h1 {
            font-family: var(--font-family-playfair-display);

            font-weight: 700;

            font-size: var(--font-size-46);

            line-height: 3.5rem;

            color: var(--brown-color-400);
          }
        }

        p {
          font-weight: 300;

          font-size: var(--font-size-18);

          line-height: var(--font-size-28);

          color: var(--white-color-700);
        }
      }

      form {
        width: 100%;

        display: flex;

        gap: 1.875rem;

        flex-direction: column;

        justify-content: flex-start;

        align-items: flex-end;

        .row {
          width: 100%;

          display: flex;

          gap: 1.25rem;

          justify-content: center;

          align-items: center;

          input,
          select {
            flex: 1;

            height: 3.5rem;

            border-radius: var(--radius-008);

            background-color: var(--white-color-700);

            padding: 1.1875rem;

            font-weight: 400;

            font-size: var(--font-size-18);

            line-height: var(--font-size-18);

            font-family: var(--font-family-poppins);

            color: var(--black-color-300);

            border: none;

            transition: 0.3s;
          }
        }

        textarea {
          width: 100%;

          height: 14.75rem;

          border-radius: var(--radius-008);

          background-color: var(--white-color-700);

          font-family: var(--font-family-poppins);

          font-weight: 400;

          font-size: var(--font-size-18);

          line-height: var(--font-size-18);

          color: var(--black-color-300);

          resize: none;

          border: none;

          outline: none;

          padding: 1.1875rem;

          transition: 0.3s;
        }

        .formBottomPart {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          gap: 10px;

          p {
            font-weight: 400;
            font-size: var(--font-size-18);
            line-height: var(--font-size-28);
            color: var(--brown-color-400);
          }
        }
      }
    }
  }
}

/* =-------------------= footer =-------------------= */

/* ================================================== */

footer {
  width: 100%;

  display: flex;

  gap: 3.125rem;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 6.25rem 0 3.5625rem;

  background-color: var(--brown-color-600);

  position: relative;

  .top {
    width: 90%;

    display: flex;

    gap: 4.375rem;

    justify-content: center;

    align-items: flex-start;

    .col {
      display: flex;

      flex-direction: column;

      justify-content: flex-start;

      align-items: flex-start;

      gap: 1.875rem;

      img {
        width: 22rem;

        height: unset;
      }

      p {
        font-weight: 400;

        font-size: var(--font-size-18);

        line-height: var(--font-size-28);

        color: var(--white-color-700);
      }

      h1 {
        font-family: var(--font-family-playfair-display);

        font-weight: 600;

        font-size: var(--font-size-32);

        line-height: var(--font-size-32);

        color: var(--brown-color-400);
      }

      ul {
        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        align-items: flex-start;

        &.quickLinks {
          gap: 1.125rem;

          li {
            a {
              font-weight: 400;

              font-size: var(--font-size-18);

              line-height: var(--font-size-18);

              color: var(--white-color-700);

              position: relative;

              &::before {
                content: "";

                width: 100%;

                height: 0.0625rem;

                background-color: var(--white-color-700);

                position: absolute;

                left: 0;

                bottom: 0;

                transform: scaleX(0);

                transform-origin: left;

                transition: 0.3s;
              }

              &:hover {
                &::before {
                  transform: scaleX(1);
                }
              }
            }
          }
        }

        &.contactDetails {
          gap: 1.25rem;

          li {
            display: flex;

            gap: 1.25rem;

            justify-content: center;

            align-items: center;

            .icon {
              width: 3.125rem;

              height: 3.125rem;

              border-radius: var(--radius-full);

              background: rgba(209, 197, 120, 0.1);

              display: flex;

              justify-content: center;

              align-items: center;

              svg {
                width: 1.5rem;

                height: unset;
              }
            }

            a,
            p {
              font-weight: 400;

              font-size: var(--font-size-18);

              line-height: var(--font-size-18);

              color: var(--white-color-700);

              position: relative;
            }

            a {
              &::before {
                content: "";

                width: 100%;

                height: 0.0625rem;

                background-color: var(--white-color-700);

                position: absolute;

                left: 0;

                bottom: 0;

                transform: scaleX(0);

                transform-origin: left;

                transition: 0.3s;
              }

              &:hover {
                &::before {
                  transform: scaleX(1);
                }
              }
            }
          }
        }
      }
    }
  }

  hr {
    width: 100%;

    border: 0.0625rem solid rgba(97, 85, 81, 1);
  }

  p.copyright {
    margin-top: 0.4375rem;

    font-size: var(--font-size-18);

    line-height: var(--font-size-18);

    text-transform: uppercase;

    color: rgba(150, 133, 127, 1);

    br.onlyMobile {
      display: none;
    }
  }
}

.socialMedia {
  display: flex;

  gap: 1.25rem;

  justify-content: center;

  align-items: center;

  a {
    width: 3.125rem;

    height: 3.125rem;

    border-radius: var(--radius-full);

    background: rgba(209, 197, 120, 0.1);

    display: flex;

    justify-content: center;

    align-items: center;

    transition: 0.3s;

    &:nth-of-type(1) {
      svg {
        width: 1.1875rem;
      }
    }

    &:nth-of-type(2) {
      svg {
        width: 1.125rem;
      }
    }

    &:nth-of-type(3) {
      svg {
        width: 1.1875rem;
      }
    }

    &:hover {
      box-shadow: 0.0625rem -0.0625rem 0rem 0rem var(--brown-color-400);
    }
  }
}

/* =-------------------= Media Query =-------------------= */

/* ======================================================= */

@media screen and (max-width: 1630px) {
  html {
    font-size: 14px;
  }
}

@media screen and (max-width: 1416px) {
  html {
    font-size: 12px;
  }
}

@media screen and (max-width: 1260px) {
  html {
    font-size: 10px;
  }

  .bestInteriorDesign .centerContent .btns .BrownBTN {
    width: 11.625rem;
  }
}

@media screen and (max-width: 1000px) {
  html {
    font-size: 8px;
  }
}

@media screen and (max-width: 800px) {
  html {
    font-size: 6px;
  }
}

@media screen and (max-width: 600px) {
  html {
    font-size: 11px;
  }

  :root {
    /* Font Size */

    --font-size-18: 1.125rem;

    --font-size-32: 1.5rem;

    --font-size-72: 3.3rem;

    --font-size-28: 1.45rem;

    --font-size-46: 2.375rem;

    --font-size-22: 1.375rem;

    --font-size-20: 1.25rem;
  }

  nav {
    .centerContent {
      width: 90%;

      .center_content {
        padding: 6px 12px;

        width: 100%;

        .desktopNav {
          position: fixed;

          top: 0;

          left: 0;

          width: 100%;

          height: 100dvh;

          background: var(--brown-color-600);

          display: flex;

          flex-direction: column;

          justify-content: center;

          align-items: center;

          gap: 0px;

          z-index: 99;

          /* visibility: hidden;

          opacity: 0; */

          pointer-events: none;

          transition: 0.3s;

          transform: translateX(-100%);

          &.active {
            /* visibility: visible;

            opacity: 1; */

            pointer-events: unset;

            transform: translateX(0%);
          }

          li {
            width: 90%;

            a {
              background: transparent;

              width: 100%;

              display: flex;

              justify-content: center;

              align-items: center;

              border-bottom: 1px dashed;

              padding: 18px 0;
            }
          }

          .socialMedia {
            width: 150px;

            gap: 1.4rem;

            margin-top: 6rem;

            display: flex;

            a {
              height: 3.55rem;

              &:nth-of-type(1) {
                svg {
                  width: 1.5rem;
                }
              }

              &:nth-of-type(2) {
                svg {
                  width: 1.5rem;
                }
              }

              &:nth-of-type(3) {
                svg {
                  width: 1.5rem;
                }
              }
            }
          }

          .topUnderline {
            position: absolute;

            top: 14%;

            width: 90%;

            height: 1px;

            border: 0.0625rem solid rgba(97, 85, 81, 1);

            display: flex;
          }
        }

        .btnAndBreadcrumb {
          .breadcrumb {
            display: flex;
          }
        }
      }
    }

    &.active {
      .centerContent {
        .desktopNav {
          .topUnderline {
            top: 10%;

            width: 94%;
          }
        }
      }
    }
  }

  header {
    height: 52rem;

    .indicator {
      right: 4.5rem;
    }

    .indicator {
      bottom: 2.5rem;

      right: 2.5rem;
    }

    .slider {
      .slide {
        padding: 10rem 0 8rem;

        .gradientLayer {
          background: linear-gradient(90deg,
              var(--white-color-700) 0%,

              #ffffffa8 100%);
        }

        .content {
          width: 84%;

          h1 {
            line-height: 4.6rem;

            br {
              display: none;
            }
          }
        }
      }
    }
  }

  .projects {
    .heading {
      width: 90%;

      .content {
        flex-direction: column;

        gap: 2.5rem;

        .left {
          gap: 1rem;

          flex-wrap: wrap;

          p {
            text-align: center;

            br {
              display: none;
            }
          }

          .headingAndPera {
            justify-content: center;

            align-items: center;
          }
        }

        .carouselArrow {
          width: 100%;

          justify-content: flex-end;
        }
      }
    }

    .carousel {
      .carousel-card {
        min-width: 335px;

        .image {
          height: 24.25rem;
        }
      }
    }
  }

  .companies {
    .centerContent {
      width: 90%;

      .companies_carousel {
        width: 81%;

        .slick-track {
          img {
            padding: 0 1.2rem;
          }
        }
      }
    }
  }

  .contactUs {
    .centerContent {
      flex-wrap: wrap-reverse;

      width: 86%;

      .leftSide {
        width: 100%;

        gap: 1.5rem;

        .info {
          width: 100%;
        }
      }

      .rightSide {
        max-width: unset;

        width: 100%;

        .headingAndPera {
          p {
            text-align: center;
          }

          .tagAndHeading {
            width: 100%;

            align-items: center;
          }
        }

        form {
          gap: 1.25rem;

          .row {
            flex-wrap: wrap;

            flex-direction: column;

            input,
            select {
              width: 100%;

              height: 4rem;

              flex: unset;
            }
          }

          .formBottomPart {
            justify-content: center;
            gap: 7px;


            button {
              width: 100%;

              height: 4rem;
            }
          }
        }
      }
    }
  }

  footer {
    padding: 6rem 0 3rem;

    .top {
      flex-wrap: wrap;
    }

    p.copyright {
      br.onlyMobile {
        display: block;
      }
    }
  }

  .aboutUs .centerContent .bottomContentPart {
    flex-wrap: wrap;

    gap: 3.75rem;
  }

  .services .centerContent .cardsContainer,
  .services .centerContent .topHeadingAndParagraph {
    flex-direction: column;
  }

  .aboutUs .centerContent .topHeadingPart h1 {
    text-align: center;
  }

  .bestInteriorDesign .centerContent h1 {
    text-align: center;

    margin-bottom: 1rem;
  }

  .services .centerContent .topHeadingAndParagraph p {
    text-align: center;
  }

  .services .centerContent .topHeadingAndParagraph p br {
    display: none;
  }

  .services .centerContent .topHeadingAndParagraph .leftSide {
    width: 100%;
  }

  .services .centerContent .topHeadingAndParagraph {
    gap: 1.25rem;
  }

  .services .centerContent .topHeadingAndParagraph .leftSide {
    align-items: center;
  }

  .services .centerContent .cardsContainer .card {
    max-width: 90%;
  }

  .services .centerContent .cardsContainer .card .cardContent .image {
    width: 100%;

    height: 20rem;
  }

  .services .centerContent .cardsContainer {
    gap: 3.5rem;
  }

  .aboutUs .centerContent .bottomContentPart .leftSideImage {
    width: 90%;

    height: unset;
  }

  .bestInteriorDesign .centerContent p br {
    display: none;
  }

  .services .centerContent .topHeadingAndParagraph .leftSide h1 {
    text-align: center;

    line-height: 3.2rem;
  }

  .aboutUs,
  .bestInteriorDesign,
  .services,
  .projects,
  .contactUs {
    padding: 6.5rem 0;
  }

  .bestInteriorDesign {
    background-position: left;
  }

  .aboutUs .centerContent,
  .services .centerContent {
    gap: 2.5rem;
  }

  .services .centerContent .topHeadingAndParagraph {
    gap: 1rem;
  }

  .aboutUs .centerContent .bottomContentPart .rightSide .ourQualityContainer .quality .content p br {
    display: none;
  }

  .aboutUs .centerContent .bottomContentPart .rightSide .ourQualityContainer .quality .content {
    gap: 0.6rem;
    padding-top: 0.8rem;
  }

  .aboutUs .centerContent .bottomContentPart .rightSide .ourQualityContainer {
    gap: 2rem;
  }

  .bestInteriorDesign .centerContent .btns {
    margin-top: 1rem;
  }

  .loadingScreen {
    div.content {
      width: 14.75rem;
    }
  }
}

@media screen and (max-width: 480px) {
  footer {
    .top {
      flex-direction: column;

      .col {
        p {
          line-height: unset;
        }

        img {
          width: 20rem;
        }
      }
    }

    p.copyright {
      font-size: 1.2rem;

      width: 90%;

      text-align: center;

      line-height: unset;
    }
  }
}