section.homepage-banner {

  height: 100%;

  min-height: 963px;

  display: block;

  position: relative;

}



.carousel-indicators [data-bs-target] {

  position: relative;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  border: 1px solid #ffffff;

  background-color: transparent;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

}



button.active::before {

  content: "";

  display: block;

  width: 12px;

  height: 12px;

  background: rgb(255, 255, 255);

  border-radius: 50%;

}



.carousel-indicators {

  margin-bottom: 100px;

}



.homepage-text {

  position: absolute;

  top: 0px;

  z-index: 1;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}



.homepage-text .text h1 {

  color: #fff;

  margin-bottom: 20px;

}



.homepage-text .text {

  text-align: center;

}



.homepage-text .text p {

  width: 100%;

  max-width: 595px;

  margin: 0 auto;

  margin-bottom: 60px;

  color: #fff;

}



.box-container {

  display: flex;

  width: 100%;

}



.box {

  flex: 1;

  height: 500px;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: flex 0.5s ease;

  position: relative;

}



.box:hover {

  flex: 1.6;

  transition: flex 0.5s ease;

}



.box img {

  /* object-fit: unset; */
  object-fit: cover;

}



.box:hover img {

  transition: flex 0.5s ease;

}



.box-container .box img {

  transition: flex 0.5s ease;

}



.box-container .box:hover img.image-for-dekstop {

  display: none;

  transition: flex 0.5s ease;

}



.box-container img.image-for-mobile {

  display: none;

}



.box-container .box .image-for-hover {

  transition: flex 0.5s ease;

  display: none;

}



.box-container .box:hover .image-for-hover {

  transition: flex 0.5s ease;

  display: block;

}



.box h3 {

  position: absolute;

  z-index: 9;

  transform: rotate(-90deg);

  top: 50px;

  right: 5px;

}



.box:nth-of-type(2) h3 {

  top: 60px;

  right: -20px;

}



.box:nth-of-type(3) h3,

.box:nth-of-type(3) h3 {

  top: 60px;

  right: -20px;

}



.box:nth-of-type(4) h3 {

  top: 85px;

  right: -40px;

}



.box:nth-of-type(5) h3 {

  top: 70px;

  right: -30px;

}



.box:nth-of-type(6) h3 {

  top: 75px;

  right: -30px;

}



.box:nth-of-type(6),

.box:nth-of-type(6) img {

  border-radius: 0px 10px 10px 0px;

}



.box:nth-of-type(1),

.box:nth-of-type(1) img {

  border-radius: 10px 0px 0px 10px;

}



.wardrobe-essentials .text {

  display: flex;

  justify-content: space-between;

  margin-bottom: 60px;

}



.wardrobe-essentials .text p {

  width: 100%;

  max-width: 600px;

}



.dedicated {

  display: flex;

  align-items: center;

  gap: 196px;

}



.dedicated .text {

  display: flex;

  flex-direction: column;

  gap: 20px;

  margin-bottom: 60px;

}



.dedicated .image {

  width: 100%;

  max-width: 948px;

  height: 100%;

  max-height: 800px;

}



.dedicated .perks-con {

  display: flex;

  column-gap: 60px;

  flex-wrap: wrap;

  row-gap: 20px;

}



.dedicated .perks-con .perks svg {

  margin-bottom: 10px;

}



.dedicated .content {

  width: 100%;

  max-width: 600px;

  padding: 0px 12px;

}



.dedicated {

  margin-top: 0px !important;

}



section.wholesale-pricing .online-shop {

  display: flex;

  align-items: center;

}



section.wholesale-pricing .online-shop p {

  margin-right: 20px;

}



section.wholesale-pricing .online-shop .shop-links-con {

  display: flex;

  gap: 10px;

}



section.wholesale-pricing .online-shop a:last-child {

  margin-right: 0px;

}



section.wholesale-pricing .content {

  /* display: flex; */

  align-items: center;

}

/* Hide content by default */
.wholesale-pricing .content {
    display: none;
}

/* Only show the active slide */
.wholesale-pricing .content.active {
    display: flex; /* Or 'block' depending on your existing layout */
    gap: 30px;
}

/* Dot Container Styling */
section.wholesale-pricing .slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    /* padding: 20px 0; */
    margin-top: 60px;
}

section.wholesale-pricing .text1 ul, section.wholesale-pricing .text1 ol {
    padding-left: 1rem;
}

section.wholesale-pricing .text1 li {
    list-style: unset !important;
}

section.wholesale-pricing .dot {
    cursor: pointer;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #333; /* The outer ring */
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
}

/* The "Bullseye" effect for the active dot */ 
section.wholesale-pricing .dot.active  {
    background-color: #333;
    background-clip: content-box;
    padding: 3px; /* This creates the space between the ring and the solid dot */
}

/* Optional: Slight fade for the inactive dot ring */
section.wholesale-pricing .dot:not(.active) {
    border-color: #999;
}



.moving-images-con {

  width: unset;

}



.details-con,

.moving-images-con {

  width: 100%;

}



.moving-images-con .image:nth-of-type(2) {

  width: 100%;

  max-width: 296px;

  height: 100%;

  max-height: 400px;

  border-radius: 20px;

}



.moving-images-con .image:nth-of-type(1) img {

  border-radius: 20px;

}



.details-con {

  width: 100%;

  max-width: 600px;

}



.details-con .text {

  display: flex;

  flex-direction: column;

  gap: 30px;

  margin-bottom: 60px;

}



.details-con .text a {

  color: #242424;

}



.details-con .text .btn-btn a {

  color: #fff;

  text-decoration: none;

}



.details-con .text .btn-btn a:hover {

  color: #242424;

}



.moving-images-con .image:nth-of-type(2) img {

  border-radius: 20px;

}

@media (max-width: 991px) {
  section.wholesale-pricing .details-con .text p:first-of-type {
    margin-top: 30px !important;
  }
}

.moving-images-con {

  height: 100%;

  min-height: 620px;

  gap: 50px;

}



.moving-images-con {

  display: flex;

  justify-content: end;

  width: 100%;

}



.moving-images-con .image:nth-of-type(1) {

  position: unset;

  left: 0px;

  animation: moveUpDown 3s ease-in-out infinite alternate; /* Move up and down infinitely */

  width: 100%;

  max-width: 456px;

}



/* Keyframes for up and down movement */

@keyframes moveUpDown {

  0% {

    transform: translateY(0); /* Start at the initial position */

  }



  100% {

    transform: translateY(20px); /* Move down 50px (adjust as needed) */

  }

}



.moving-images-con .image:nth-of-type(2) {

  position: unset;

  right: 0px;

  animation: shortImage 5s ease-in-out infinite alternate;

  width: 100%;

  /* max-width: 270px; */

}



@keyframes shortImage {

  0% {

    transform: translateY(50px); /* Initial starting point */

  }

  50% {

    transform: translateY(100px); /* Move down to 100px */

  }

  100% {

    transform: translateY(0); /* Return to 0px when moving up */

  }

}






.contact .content {

  display: flex;

  align-items: center;

  gap: 200px;

}



.contact .contact-text,

.contact .input-form {

  width: 100%;

}



.contact .input-form {

  border-radius: 20px;

  border: 1px solid #f2f2f2;

  background: #fff;

  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);

  padding: 60px 30px;

}



.contact .input-con input,

.contact .input-con textarea {

  width: 100%;

  border-radius: 5px;

  outline: none;

  border-radius: 5px;

  border: 1px solid #8d8d8d;

}



.contact .input-con textarea {

  height: 250px;

}



.contact .input-con input {

  height: 40px;

}



.contact .input-con .inputs.email-phone-con {

  display: flex;

  gap: 20px;

}



.contact .input-con .inputs.email-phone-con .email,

.contact .input-con .inputs.email-phone-con .phone {

  width: 100%;

}



.contact .input-con form {

  display: flex;

  flex-direction: column;

  gap: 30px;

}



.contact .input-con .inputs label {

  color: var(--p---black, #404040);

  font-family: "Metropolis-Regular", sans-serif;

  font-size: 16px;

  font-style: normal;

  font-weight: 400;

  line-height: 25px; /* 156.25% */

  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.contact .input-con .inputs label br {

  display: none;

}



input.wpcf7-form-control.wpcf7-submit.has-spinner.cta {

  height: 100%;

}



span.wpcf7-not-valid-tip {

  position: absolute;

  color: red;

}



.wpcf7 form .wpcf7-response-output {

  margin: 0px !important;

  padding: 0px !important;

}



.contact .input-form .input-text h3 {

  margin-bottom: 20px;

}



.contact .input-form .input-text p {

  margin-bottom: 30px;

}



.contact .contact-text h2 {

  margin-bottom: 20px;

}



.contact .contact-text p {

  margin-bottom: 60px;

  width: 100%;

  max-width: 600px;

}



.contact .contact-text .phone-number-con {

  margin-bottom: 30px;

}



.contact .contact-text .phone-number-con .number a {

  border-right: 1px solid #404040;

}



.contact .contact-text .phone-number-con .number a:last-child {

  border-right: none;

}



.contact .contact-text .phone-number-con .number a:nth-of-type(1),

.contact .contact-text .phone-number-con .number a:nth-of-type(2) {

  padding-right: 10px;

}



.contact .contact-text .phone-number-con .number {

  display: flex;

  gap: 10px;

}



.contact .contact-text .email,

.contact .contact-text .phone-number-con {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.social .card-con {

  display: flex;



}



.social .card-con .card {

  border: none;

  position: relative;

  display: flex;

  place-content: center;

  place-items: center;

  text-align: center;

}



.social .card-con .card .text {

  position: absolute;

  border-radius: 10px;

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

  backdrop-filter: blur(2px);

  padding: 40px 10px;

  width: 100%;

  max-width: 250px;

  height: 100%;

  max-height: 300px;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.5s ease, visibility 0.5s ease;

}



.social .card-con .card:hover .text {

  opacity: 1;

  visibility: visible;

}



.social .card-con .card .text h3 {

  margin-bottom: 30px;

  font-size: 16px;

}



.social .card-con .card .text p {

  margin-bottom: 20px;

}



.social .card-con .card .social {

  display: flex;

  justify-content: center;

  gap: 20px;

}



.social h2 {

  text-align: center;

  margin-bottom: 60px;

}



section.social.global-padding {

  padding-bottom: 0px;

  padding-left: 0px;

  padding-right: 0px;

}



.dedicated .formobileImg {

  display: none;

}



.contact-text {

  width: 100%;

}



section.homepage-banner .carousel-item img {

  min-height: 963px;

  max-height: 963px;

}



span.validation-error {

  position: absolute;

  left: 0px;

  top: 40px;

  color: red;

}



.contact-text-mobile {

  display: none;

}





.details-con.for-mobile {

  display: none;

}



.dedicated img {

  border-radius: 20px 20px 20px 20px;

}


.moving-images-con.details-con.for-mobile.aos-init.aos-animate{
  display: none;
}

.fordesktopImg {
    width: 100%;
    max-width: none;
    height: auto;
    display: block;
    object-fit: cover;
    
}


@media (min-width: 1921px) {

  .social .card-con .card {

    width: 100vw;

  }



  .social .card-con .card .image {

    width: 100%;

  }



  .dedicated {

    justify-content: center;

  }

}



@media (max-width: 1510px) {

  .social .card-con .card .text {

    max-width: unset;

    max-height: unset;

    padding: 0px;

    border-radius: 0px;

    place-content: center;

  }

}



@media (max-width: 1199px) {



  .homepage-text {

    width: 100%;

    padding-left: 30px;

    padding-right: 30px;

  }



  a.navbar-brand img {

    max-width: 150px;

  }



  .contact .input-con .inputs.email-phone-con {

    flex-wrap: wrap;

  }



  .box-container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

  }



  .box {

    height: 300px;

  }



  .box-container .box .image-for-hover {

    display: block;

    object-fit: cover;

    object-position: top;

  }



  .box-container .box img.image-for-dekstop {

    display: none;

  }



  .box h3 {

    font-size: 18px;

  }



  .box:nth-of-type(6),

  .box:nth-of-type(6) img {

    border-radius: 0px 0px 10px 0px;

  }



  .box:nth-of-type(1),

  .box:nth-of-type(1) img {

    border-radius: 10px 0px 0px 0px;

  }



  .box:nth-of-type(3),

  .box:nth-of-type(3) img {

    border-radius: 0px 10px 0px 0px;

  }



  .box:nth-of-type(4),

  .box:nth-of-type(4) img {

    border-radius: 0px 0px 0px 10px;

  }



  .dedicated {

    gap: 50px;

    margin-top: 70px;

  }



  .dedicated .content {

    max-width: unset;

  }



  .dedicated .text {

    margin-bottom: 30px;

  }



  section.wholesale-pricing .content {

    gap: 50px;

  }



  .contact .content {

    gap: 50px;

  }



  .card .image {

    width: 100%;

  }



  .social .card-con {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

  }



  .social .card-con .card:hover .text {

    opacity: 1;

    visibility: visible;

  }



  .social .card-con .card .text {

    display: none;

  }



  .social .card-con .card .text.show {

    display: flex;

    visibility: visible;

    opacity: 1;

    max-width: 350px;

    max-height: 400px;

    flex-direction: column;

    place-content: center;

    border-radius: 10px;

  }

}



@media (max-width: 991px) {


  .details-con .text h2{
      text-align: center;
      margin-bottom: 30px;
  }


  .moving-images-con.details-con.for-mobile.aos-init.aos-animate{
    display: flex;
  }

  .moving-images-con.aos-init.aos-animate {
    display: none;
}

  .details-con.for-mobile .text h2,

  .details-con.for-mobile{

    display: block;

    text-align: center;



  }



  .details-con.for-mobile{

    margin-bottom: 75px;

  }



  .details-con.for-mobile .text{

    margin-bottom: 0px;

  }





  .contact .contact-text p {

    margin-bottom: 0px;

  }



  .contact-text.for-deskstop .phone-number-con,

  .contact-text.for-deskstop .email {

    display: none;

  }



  .contact-text-mobile {

    display: block;

  }



  .contact .contact-text p {

    max-width: unset;

  }



  .dedicated {

    flex-direction: column;

  }



  .dedicated .text {

    place-items: center;

    text-align: center;

  }



  .dedicated .perks-con {

    justify-content: center;

    text-align: center;

  }



  .dedicated .fordesktopImg {

    display: none;

  }



  .dedicated .formobileImg {

    display: block;

    border-radius: 20px;

  }



  .dedicated {

    gap: 0px;

  }



  section.wholesale-pricing .content {

    flex-direction: column-reverse;

  }



  .details-con {

    max-width: unset;

  }



  .contact .content {

    flex-direction: column-reverse;

  }



  .contact .input-con {

    max-width: unset;

  }



  .wardrobe-essentials .text {

    flex-direction: column;

    place-items: center;

    text-align: center;

    gap: 30px;

  }



  .moving-images-con {

    justify-content: center;

  }



  div#navbarNav,

  .search-container.pop-up-search {

    top: 90px;

  }

}



@media (max-width: 767px) {

  .box {

    height: 200px;

  }



  div#navbarNav,

  .search-container.pop-up-search {

    top: 75px;

  }



  .social h2 {

    margin-bottom: 30px;

  }



  .moving-images-con .image:nth-of-type(2) {

    max-height: unset;

    max-width: unset;

    width: unset;

    right: 0px;

    height: 100%;

    width: 50%;

  }

  .moving-images-con {

    min-height: unset;

  }



  .moving-images-con .image:nth-of-type(1) {

    left: 0px;

    max-width: unset;

    height: 100%;

    width: 100%;

  }



  .wardrobe-essentials .text {

    text-align: center;

    margin-bottom: 50px;

    gap: 0px;

  }



  .wardrobe-essentials .text p {

    max-width: unset;

    margin-bottom: 20px;

  }



  .wardrobe-essentials .text .image,

  .wardrobe-essentials .text h2 {

    margin-bottom: 30px;

  }



  .homepage-text {

    top: 58%;

    padding-left: 20px;
        
    padding-right: 20px;

  }



  .carousel-indicators {

    margin-bottom: 50px;

  }



  section.homepage-banner,

  section.homepage-banner .carousel-item img {

    min-height: 700px;

    max-height: 700px;

  }



  section.wholesale-pricing .online-shop a,

  section.wholesale-pricing .online-shop p {

    margin: 0px;

  }



  section.wholesale-pricing .online-shop {

    flex-direction: column;

    gap: 20px;

    align-items: baseline;

  }



  .details-con .text {

    margin-bottom: 60px;

  }



  input.wpcf7-form-control.wpcf7-submit.has-spinner.cta {

    max-width: unset;

  }



  .social .card-con {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0px;

  }



  .social .card-con .card .image {

    width: 100%;

  }



  .social .card-con .card .text {

    display: none;

  }



  .social .card-con .card .text.show {

    display: flex;

    flex-direction: column;

    visibility: visible;

    opacity: 1;

    max-height: unset;

    max-width: unset;

    border-radius: 0px;

  }



  .social .card-con .card .text {

    place-content: center;

  }



  .box-container {

    grid-template-columns: repeat(2, 1fr);

  }



  .box h3 {

    transform: rotate(0deg);

    top: 50% !important;

    right: unset !important;

    left: 50% !important;

    transform: translate(-50%, -50%);

    width: 100%;

    text-align: left;

    margin-left: 10px;

    font-size: 20px;

  }



  .box-container .box:hover .image-for-hover,

  .box-container .box .image-for-hover {

    display: none;

  }



  .box-container img.image-for-mobile {

    display: block;

  }



  .box-container img.image-for-mobile {

    object-fit: cover;

    object-position: 100% 5%;

  }



  .box:nth-of-type(2),

  .box:nth-of-type(2) img {

    border-radius: 0px 10px 0px 0px;

  }



  .box:nth-of-type(5),

  .box:nth-of-type(5) img {

    border-radius: 0px 0px 0px 10px;

  }

}



@media (max-width: 496px) {

  .contact .contact-text .phone-number-con .number a:nth-of-type(2) {

    border-right: none;

    padding: 0px;

  }



  .contact .contact-text .phone-number-con .number {

    gap: 20px;

  }



  .social .card-con {

    grid-template-rows: repeat(3, 300px);

  }



  .social .card-con .card .image {

    height: 100%;

  }

}



@media (max-width: 347px) {

  .contact .contact-text .phone-number-con .number a:nth-of-type(1) {

    border-right: none;

    padding: 0px;

  }

}


/* Pseudo-Carousel  */
    /* --- Toggle dots --- */
    .toggle-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin: 60px 0 0;
    }

    /* Each dot */
    .toggle-buttons a {
    --dot-size: 20px;
    width: var(--dot-size);
    height: var(--dot-size);
    display: inline-block;
    border-radius: 50%;
    border: 2px solid #111;         /* outline color */
    background: transparent;        /* hollow by default */
    transition: background .2s ease, transform .12s ease, box-shadow .2s ease;
    text-indent: -9999px;           /* hide any text if added */
    overflow: hidden;
    position: relative;
    }

    /* Make the click target a little bigger without changing visuals */
    .toggle-buttons a::before {
    content: "";
    position: absolute;
    inset: -8px;
    }

    /* Active = filled */
    .toggle-buttons a.is-active {
    background: #111;               /* fill color */
    }

    /* Hover/keyboard focus */
    .toggle-buttons a:hover,
    .toggle-buttons a:focus-visible {
    box-shadow: 0 0 0 4px rgba(17,17,17,.08);
    transform: scale(1.05);
    outline: none;
    }

    /* Default (no-JS fallback): show FRONT, hide BACK */
    #frontContent { display: flex; }
    #backContent  { display: none; }

    /* When JS is active we control visibility only via .is-visible */
    .js #frontContent,
    .js #backContent { display: none; }

    .js #frontContent.is-visible,
    .js #backContent.is-visible { display: flex; }
/* Pseudo-Carousel - End */


.wardrobe-essentials .global-padding {
  background-color: #FFF0E6;
}


/* wholesale responsive  */

@media (max-width: 1199px) and (min-width: 992px) {

  section.wholesale-pricing .content {
    gap: 40px;
    flex-direction: row;
    align-items: center;
  }

  .details-con {
    max-width: 520px;
  }

  .moving-images-con {
    min-height: 520px;
    gap: 30px;
  }

  .moving-images-con .image:nth-of-type(1) {
    max-width: 380px;
  }

  .moving-images-con .image:nth-of-type(2) {
    max-width: 240px;
  }

  section.wholesale-pricing {
    padding: 70px 30px !important;
  }

  .wholesale-pricing {
    padding: 70px 30px !important;
}
}

@media (max-width: 991px) and (min-width: 768px) {

  section.wholesale-pricing .content {
    flex-direction: column-reverse;
    gap: 50px;
  }

  .details-con {
    max-width: 100%;
    text-align: center;
  }

  .details-con .text {
    align-items: center;
  }

  .moving-images-con {
    justify-content: center;
    min-height: auto;
    gap: 20px;
  }

  .moving-images-con .image:nth-of-type(1),
  .moving-images-con .image:nth-of-type(2) {
    width: 100%;
    max-width: 320px;
  }

  section.wholesale-pricing {
    padding: 70px 30px !important;
  }
  .wholesale-pricing {
    padding: 70px 30px !important;
}
}

@media (max-width: 767px) and (min-width: 576px) {

  section.wholesale-pricing {
    padding: 50px 20px !important;
  }

  .wholesale-pricing {
    padding: 50px 20px !important;
}

  section.wholesale-pricing .content {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .details-con {
    text-align: center;
  }

  .details-con .text {
    gap: 15px;
    margin-bottom: 40px;
  }

  .moving-images-con {
    flex-direction: column;
    gap: 20px;
  }

  .moving-images-con .image:nth-of-type(1),
  .moving-images-con .image:nth-of-type(2) {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
}

@media (max-width: 575px) {

  section.wholesale-pricing {
    padding: 50px 20px !important;
  }

  .wholesale-pricing {
    padding: 50px 20px !important;
  }

  section.wholesale-pricing .content {
    flex-direction: column-reverse;
    gap: 30px;
  }

  .details-con .text h2 {
    font-size: 22px;
    line-height: 1.3;
  }

  .details-con .text p {
    font-size: 14px;
  }

  .moving-images-con {
    flex-direction: column;
    gap: 15px;
  }

  .moving-images-con .image:nth-of-type(1),
  .moving-images-con .image:nth-of-type(2) {
    width: 100%;
    max-width: 100%;
  }
}

/* Remove the existing padding and apply new padding */