@tailwind base;
@tailwind components;
@tailwind utilities;





/*############## Custom Global Styles Here ##################*/

@font-face {
  font-family: 'GothamPro-regular';
  src: url('../fonts/GothamPro.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham-Pro-Bold';
  src: url('../fonts/GothamProBold.ttf') format('truetype');



}

@font-face {
  font-family: 'GothamProMedium';
  src: url('../fonts/GothamProMedium.ttf') format('truetype');



}



@font-face {
  font-family: 'MillerBanner-SemiBoldItalic';
  src: url('../fonts/Miller Banner Semi Bold Italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Gotham-Pro-Medium';
  src: url('../fonts/Gotham-Pro-Light.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham-Pro-Light';
  src: url('../fonts/Gotham-Pro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'MillerBanner-SemiBoldItalic-new';
  src: url('../fonts/fonnts.com-Miller-Banner-Semi-Bold.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'GothamProMedium';
  src: url('../fonts/GothamProMedium.ttf') format('truetype');



}

@font-face {
  font-family: 'Gotham-Pro-Bold';
  src: url('../fonts/GothamProBold.ttf') format('truetype');


}
@font-face {
  font-family: 'GothamProMedium';
  src: url('../fonts/GothamProMedium.ttf') format('truetype');
 
 
}

@font-face {
  font-family: 'GothamProMedium';
  src: url('../fonts/GothamProMedium.ttf') format('truetype');



}

p {
  font-family: 'GothamPro-regular', sans-serif;
}

.gotham-pro-regular {
  font-family: 'GothamPro-regular', sans-serif;
}

.gotham-pro-light {
  font-family: 'Gotham-Pro-Light', sans-serif;
}
.gotham-pro-bold {
  font-family: 'Gotham-Pro-Bold', sans-serif;
}
.gotham-pro-medium {
  font-family: 'GothamProMedium', sans-serif;
}

.gotham-pro-medium {
  font-family: 'GothamProMedium', sans-serif;
}


.footer-menu-heading {
  font-family: 'GothamPro-bold', 'GothamPro-regular', sans-serif;
  font-weight: 900;
  text-shadow: 0.35px 0 currentColor;
}

.footer-menu-list {
  font-family: 'Gotham-Pro-Light', 'GothamPro-regular', sans-serif;
  font-weight: 300;
  text-shadow: none;
}
.miller-banner-sbi {
   font-family: 'MillerBanner-SemiBoldItalic-new', serif;
}
.miller-banner-new {
  font-family: 'MillerBanner-SemiBoldItalic-new', serif;
}

.miller-banner-italic {
  font-family: 'MillerBanner-SemiBoldItalic-new', serif;
}

.gotham-pro-bold {
  font-family: 'Gotham-Pro-Bold', sans-serif;
}
.gotham-pro-medium {
  font-family: 'GothamProMedium', sans-serif;
} 

.btn-primary {
  @apply inline-flex items-center justify-center min-h-[42px] rounded-[3px] bg-[#891F03] px-8 text-[15px] font-normal text-white transition hover:opacity-90;
}







/*######################## Responsive Breakpoints ################## */


/* Desktop */

/* Large Desktop */
@media (max-width: 1536px) {}

/* Desktop */
@media (max-width: 1280px) {

  .how-chair-section .process-item:nth-child(1) .process-content {
    top: 25%;
    right: 12%;
  }

  .how-chair-section .process-item:nth-child(2) .process-content {
    top: 25%;
    right: -9%;
  }

  .how-chair-section .process-item:nth-child(3) .process-content {
    top: 25%;
    right: -4%;
  }

  .how-chair-section .process-item:nth-child(4) .process-content {
    top: 25%;
    right: -7%;
  }

}

/* Large Laptop */
@media (max-width: 1024px) {


  .how-chair-section .process-item:nth-child(1) .process-content {
    top: 63%;
    right: 12%;
  }

  .how-chair-section .process-item:nth-child(2) .process-content {
    top: 63%;
    right: -9%;
  }

  .how-chair-section .process-item:nth-child(3) .process-content {
    top: 63%;
    right: -4%;
  }

  .how-chair-section .process-item:nth-child(4) .process-content {
    top: 63%;
    right: -7%;
  }

}

/* Tablet */
@media (max-width: 900px) {

  .how-chair-section .process-item:nth-child(1) .process-content {
    top: 85%;
    right: 0%;
  }

  .how-chair-section .process-item:nth-child(2) .process-content {
    top: 85%;
    right: -9%;
  }

  .how-chair-section .process-item:nth-child(3) .process-content {
    top: 85%;
    right: -4%;
  }

  .how-chair-section .process-item:nth-child(4) .process-content {
    top: 85%;
    right: -7%;
  }

  .how-chair-section a {
    font-size: 17px;
    margin-top: 50px;
  }
   
}

/* Mobile */
@media (max-width: 767px) {

  /* how you get your perfect chair section */

  .how-chair-section .process-item:nth-child(1) .process-content {
    top: 8%;
    right: 12%;
  }

  .how-chair-section .process-item:nth-child(2) .process-content {
    top: 8%;
    right: -9%;
  }

  .how-chair-section .process-item:nth-child(3) .process-content {
    top: 8%;
    right: -4%;
  }

  .how-chair-section .process-item:nth-child(4) .process-content {
    top: 8%;
    right: -7%;
  }


  .how-chair-section {
    padding-top: 42px;
    padding-bottom: 38px;
  }

  .how-chair-section h2 {
    font-size: 27px;
    line-height: 1.05;
    max-width: 210px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6rem;
  }

  .how-chair-section .process-grid {
    margin-top: 60px;
    gap-row: 46px;
    gap-column: 18px;
  }

  .how-chair-section .process-item {
    min-height: 150px;
  }

  .how-chair-section .process-number {
    width: 108px;
    top: 52%;
    opacity: 1;
  }

  .how-chair-section .process-content {
    max-width: 140px;
    top: 0;
    right: auto;
    left: auto;
  }

  .how-chair-section .process-content h3 {
    font-size: 24px;
    line-height: 1;
  }

  .how-chair-section .process-content p {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.15;
  }

  /* .how-chair-section .mt-14.flex.justify-center {
      margin-top: 34px;
    } */

  .how-chair-section a {
    min-height: 38px;
    padding-left: 22px;
    padding-right: 22px;
    font-size: 12px;
  }

  .our-story-image-wrap {
    margin-top: -90px;
  }

  .our-story-section {
    position: none;
    overflow: visible !important;
  }

}

/* Small Mobile */
@media (max-width: 480px) {

  .img-number-1{
    width: 59% !important;
  }


  .how-chair-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .how-chair-section .process-grid {
    gap-column: 7.5rem;
  }

  .how-chair-section .process-content {
    max-width: 128px;
  }

  .how-chair-section .process-content h3 {
    font-size: 27px;
  }

  .how-chair-section .process-content p {
    font-size: 13px;
  }

  .how-chair-section .process-number {
    width: 100%;
    top: 36%;
  }

  .how-chair-section a {
    font-size: 15px;
    margin-top: 50px;
  }




}


@media (max-width: 390px) {}


@media (max-width: 375px) {}


/** choose by range */




@media (min-width: 480px) and (max-width: 540px) {
  #recliner-chairs .grid>div {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 24px;
  }

  #recliner-chairs .grid>div:nth-child(1) {
    padding-top: 196px;
  }

  #recliner-chairs .grid>div:nth-child(1)>div:first-child {
    width: 430px;
    top: -72px;
  }

  #recliner-chairs .grid>div:nth-child(2) {
    padding-top: 214px;
  }

  #recliner-chairs .grid>div:nth-child(2)>div:first-child {
    width: 272px;
    top: -88px;
  }

  #recliner-chairs .grid>div:nth-child(3) {
    padding-top: 186px;
  }

  #recliner-chairs .grid>div:nth-child(3)>div:first-child {
    width: 252px;
    top: -58px;
  }

  #recliner-chairs .grid>div h4 {
    padding-top: 0 !important;
  }
}

@media (min-width: 540px) and (max-width: 767px) {
  #recliner-chairs .grid>div {
    width: 360px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 28px;
  }

  #recliner-chairs .grid>div:nth-child(1) {
    padding-top: 208px;
  }

  #recliner-chairs .grid>div:nth-child(1)>div:first-child {
    width: 390px;
    top: -78px;
  }

  #recliner-chairs .grid>div:nth-child(2) {
    padding-top: 226px;
  }

  #recliner-chairs .grid>div:nth-child(2)>div:first-child {
    width: 286px;
    top: -92px;
  }

  #recliner-chairs .grid>div:nth-child(3) {
    padding-top: 198px;
  }

  #recliner-chairs .grid>div:nth-child(3)>div:first-child {
    width: 274px;
    top: -60px;
  }

  #recliner-chairs .grid>div h4 {
    padding-top: 0 !important;
  }
}