body {
  font-family: "poppins";
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: "BwMitgaDEMO";
  src: url("BwMitgaDEMO-Bold-BF65d56dfb00060.otf");

}

h2 {
  /* font-family: "Merienda", cursive; */
  /* font-family: "Philosopher", sans-serif; */
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 52px !important;
}

p {
  font-family: poppins;
  font-size: 14px;
}

h2 span {
  font-weight: 300;
}

video.video-background {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

video.video-backgroundss {
  width: 100%;
  height: 60vh;
  object-fit: contain;
  object-position: center;
  background: #eaeaea;
}

.cover-image {
  position: absolute;
  bottom: 0px;
  text-align: center;
  color: #fff;
  width: 100%;
}

.cover-image h1 {
  font-size: 52px;
}

.features {
  padding: 100px 70px 0px;
}

.features h2 {
  font-size: 42px;
}

.button {
  display: inline-flex;
  align-items: center;
  column-gap: 0.5rem;
  background-color: var(--skin-color);
  color: var(--title-color);
  padding: 0.75rem 1.4rem;
  border-radius: 0.25rem;
  font-weight: var(--font-medium);
  position: relative;
  z-index: 1;
  transition: 0.4s;
}

.button::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--mirage-color);
  z-index: -1;
  transform-origin: center;
  transform: scale(0);
  border-radius: 0.25rem;
  transition: 0.3s;
}

.button:hover::after {
  transform: scale(1);
}

.section {
  padding: 6.5rem 0 2rem;
}

.section-title {
  text-align: center;
  font-size: var(--h1-font-size);
  margin-bottom: var(--mb3);
}

.section-title::before {
  content: attr(data-heading);
  display: block;
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
  color: var(--skin-color);
}

::-webkit-scrollbar {
  width: 0.6rem;
  background-color: var(--scroll-box-color);
  border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-color);
  border-radius: 0.5rem;
}

.main {
  margin-left: 100px;
}

/* Main - Contact */

.contact-container {
  grid-template-columns: 300px 340px;
  column-gap: 3rem;
  justify-content: center;
  align-items: center;
}

.contact-info {
  display: grid;
  row-gap: 1rem;
}

.contact-card {
  background-color: var(--box-color);
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
}

.contact-card-icon {
  font-size: 1.8rem;
  color: var(--title-color);
  margin-bottom: var(--mb025);
}

.contact-card-title,
.contact-card-data {
  font-size: var(--small-font-size);
}

.contact-card-title {
  font-weight: var(--font-medium);
}

.contact-card-data {
  display: block;
  margin-bottom: var(--mb075);
}

.contact-button {
  color: var(--skin-color);
  font-size: var(--small-font-size);
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.25rem;
  cursor: pointer;
}

.contact-button-icon {
  font-size: 1rem;
  transition: 0.4s;
}

.contact-button:hover .contact-button-icon {
  transform: translateX(0.25rem);
}

.input-container {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1.9rem;
}

.input {
  width: 100%;
  border: 1px solid #d4d4d4;
  background-color: transparent;
  padding: 0.6rem 1.2rem;
  color: var(--title-color);
  font-weight: var(--font-medium);
  font-size: var(--normal-font-size);
  letter-spacing: 0.5px;
  border-radius: 20px;
  outline: none;
  transition: 0.4s;
}

textarea.input {
  padding: 0.8rem 1.2rem;
  min-height: 140px;
  border-radius: 20px;
  resize: none;
  border: 1px solid #d4d4d4;

}

.input-container label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  padding: 0 0.4rem;
  color: var(--text-color);
  font-size: 1rem;
  font-weight: var(--font-medium);
  pointer-events: none;
  z-index: 15;
  transition: 0.5s;
}

.input-container.textarea label {
  top: 1rem;
  transform: translateY(0);
}

.input-container span {
  position: absolute;
  top: 0;
  left: 25px;
  transform: translateY(-50%);
  font-size: var(--small-font-size);
  padding: 0 0.4rem;
  pointer-events: none;
  z-index: var(--z-fixed);
  color: transparent;
}

.input-container span::before,
.input-container span::after {
  content: "";
  position: absolute;
  width: 10%;
  opacity: 0;
  height: 5px;
  background-color: #fff;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.4s;
}

.input-container span::before {
  left: 50%;
}

.input-container span::after {
  right: 50%;
}

.input-container.focus label {
  top: 0;
  transform: translateY(-50%);
  left: 25px;
  font-size: var(--smaller-font-size);
}

.input-container.focus span::before,
.input-container.focus span::after {
  width: 50%;
  opacity: 1;
}

/* Darken contact card icons and buttons */
.contact-card-icon,
.contact-button,
.input-container label,
.button {
  color: var(--title-color);
}

/* Darken input placeholders */
.input::-webkit-input-placeholder,
.textarea::-webkit-input-placeholder {
  color: var(--text-color);
}

/* Darken textarea focus underline */
.input-container.focus span::before,
.input-container.focus span::after {
  background-color: var(--title-color);
}

/* Media Queries */

@media screen and (max-width: 1408px) {
  .container {
    margin-left: var(--mb25);
    margin-right: var(--mb25);
  }
}

@media screen and (max-width: 1024px) {
  .main {
    margin-left: 0;
  }
}

@media screen and (max-width: 768px) {
  .contact-container {
    grid-template-columns: 360px;
    row-gap: 3rem;
  }
}

@media screen and (max-width: 576px) {
  .contact-container {
    grid-template-columns: 300px;
  }
}

@media screen and (max-width: 350px) {
  .container {
    margin-left: var(--mb1);
    margin-right: var(--mb1);
  }

  .contact-container {
    grid-template-columns: 1fr;
  }
}

/* Theme Switcher Styles */
.theme-switcher {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
}

.theme-button {
  background-color: var(--skin-color);
  color: var(--title-color);
  padding: 0.5rem;
  border-radius: 50%;
  font-size: 1.2rem;
  transition: 0.3s;
}

.theme-button:hover {
  transform: rotate(90deg);
}

.theme-options {
  position: absolute;
  right: 0;
  top: 4rem;
  background-color: #636E63;
  border-radius: 0.5rem;
  padding: 0.5rem;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.theme-switcher.active .theme-options {
  display: flex;
}

.theme-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.theme-label::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: var(--theme-preview);
  border-radius: 50%;
  display: inline-block;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked+.theme-label {
  background-color: var(--skin-color);
  color: var(--title-color);
}



/* .overflow-hidden {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}
.pinWrapper {
  height: 100vh;
  width: 100%;
  position: relative;
  z-index: 11;
}
.scrollmagic-pin-spacer {
  position: absolute !important;
  clip: rect(auto, auto, auto, auto);
}
.event {
  position: relative;
  overflow: hidden;
      height: 100vh;
    width: 100%;
  z-index: 1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.event::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}
#section1.event::before {
  background-color: rgb(0 0 0 / 30%);
}
#section2.event::before {
  background-color: rgb(0 0 0 / 30%);
}
#section3.event::before {
  background-color: rgb(0 0 0 / 30%);
}
#section4.event::before {
  background-color: rgb(0 0 0 / 30%);
}
#section5.event::before {
  background-color: rgb(0 0 0 / 30%);
}
#section6.event::before {
  background-color: rgb(0 0 0 / 30%);
}


#section1 {
  background-image: url("https://alonfloors.roex.co.in/images/collection/natura%20proof%202%20Large.jpeg");
}
#section2 {
  background-image: url("https://alonfloors.roex.co.in/images/collection/supreme%20Large.jpeg");
}
#section3 {
  background-image: url("https://alonfloors.roex.co.in/images/collection/eclipse%20Large.jpeg");
}
#section4 {
  background-image: url("https://alonfloors.roex.co.in/images/collection/empire%20Large.jpeg");
}
#section5 {
  background-image: url("https://alonfloors.roex.co.in/images/collection/compac%20plus%20Large.jpeg");
}
#section6 {
  background-image: url("https://alonfloors.roex.co.in/images/collection/compac%20Large.jpeg");
}
.image {
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  background-size: cover;
  background-position: center center;
  transition: width 1s, height 1s;
  -webkit-transition: width 1s, height 1s;
  box-shadow: 2px 2px 10px 10px rgb(0 0 0 / 12%);
  -webkit-box-shadow: 2px 2px 10px 10px rgb(0 0 0 / 12%);
  transform-origin: center;
  -webkit-transform-origin: center;
  z-index: 8888;
  overflow: hidden;
  border-radius: 0;
}
.image:not(#loaderVideo) {
  top: -50%;
  width: 500px;
  height: 500px;
  left: auto;
  right: 100px;
  position: absolute;
  border-radius: 12px;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);

}
  #section1 .image  {
  background-image: url("https://alonfloors.roex.co.in/images/collection/natura%20proof%202%20Large.jpeg");
}
#section2 .image {
  background-image: url("https://alonfloors.roex.co.in/images/collection/supreme%20Large.jpeg");
}
#section3 .image {
  background-image: url("https://alonfloors.roex.co.in/images/collection/eclipse%20Large.jpeg");
}
#section4 .image {
  background-image: url("https://alonfloors.roex.co.in/images/collection/empire%20Large.jpeg");
}
#section5 .image {
  background-image: url("https://alonfloors.roex.co.in/images/collection/compac%20plus%20Large.jpeg");
}
#section6 .image {
  background-image: url("https://alonfloors.roex.co.in/images/collection/compac%20Large.jpeg");
}


.text {
  top: -50%;
  left: 0;
  position: absolute;
  transform: translate(100px, -50%);
  -webkit-transform: translate(100px, -50%);
  width: 43%;
  color:#fff;
}
#section1 .text {
  top: -50%;
  color:#fff;

}
.text h2{
    font-size: 42px;
}

.scrollBtn {
  position: absolute;
  bottom: 2.5%;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  width: 100px;
  height: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
  transition: all ease-in-out 0.35s;
  -webkit-transition: all ease-in-out 0.35s;
}
.scrollBtn.move {
  visibility: hidden;
  opacity: 0;
}
.scrollBtn span {
  width: 12px;
  height: 12px;
  display: block;
  border-bottom: 2px solid var(--white);
  border-right: 2px solid var(--white);
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  animation: animate 2s infinite;
  -webkit-animation: animate 2s infinite;
  margin: auto;
}
.scrollBtn h6 {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-family: "Titillium Web", sans-serif;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-transform: uppercase;
  letter-spacing: 2px;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-10px, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(10px, 10px);
  }
}
@-webkit-keyframes animate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-10px, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(10px, 10px);
  }
}

#preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;
  -webkit-transition: all 1s;
}
#preloader img,
#preloader video {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
#preloader::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 1;
}
.text-wrapper {
  text-align: center;
  height: 24px;
  overflow: hidden;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}
#first-text {
  animation: moveUp 1s 1s forwards;
  -webkit-animation: moveUp 1s 1s forwards;
}
#second-text {
  opacity: 0;
  transform: translateY(-30px);
  -webkit-transform: translateY(-30px);
  animation: scrollup 1s 1.2s forwards, moveUpAgain 1s 2.2s forwards;
  -webkit-animation: scrollup 1s 1.2s forwards, moveUpAgain 1s 2.2s forwards;
}
@keyframes moveUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px);
    opacity: 0;
  }
}
@-webkit-keyframes moveUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px);
    opacity: 0;
  }
}

@keyframes scrollup {
  100% {
    transform: translateY(-54px);
  }
}
@-webkit-keyframes scrollup {
  100% {
    transform: translateY(-54px);
  }
}

@keyframes moveUpAgain {
  0% {
    transform: translateY(-54px);
    opacity: 1;
  }
  60% {
    transform: translateY(-54px);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px);
    opacity: 0;
  }
}
@-webkit-keyframes moveUpAgain {
  0% {
    transform: translateY(-54px);
    opacity: 1;
  }
  60% {
    transform: translateY(-54px);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px);
    opacity: 0;
  }
}

@media screen and (max-width: 1399px) {
 
  .text {
    transform: translate(60px, -50%);
    -webkit-transform: translate(60px, -50%);
  }
  .image:not(#loaderVideo) {
    height: 450px;
    width: 450px;
    right: 80px;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
  }
}
@media screen and (max-width: 1199px) {
  
  .text {
    transform: translate(40px, -50%);
    -webkit-transform: translate(40px, -50%);
    width: 44%;
  }
  .image:not(#loaderVideo) {
    height: 400px;
    width: 400px;
    right: 60px;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
  }
}
@media screen and (max-width: 991px) {

  .text {
    transform: translate(24px, -50%);
    -webkit-transform: translate(24px, -50%);
    width: 44%;
  }
  .image:not(#loaderVideo) {
    height: 310px;
    width: 310px;
    right: 40px;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
  }
}
@media screen and (max-width: 767px) {

  .image:not(#loaderVideo) {
    height: 220px;
    width: 220px;
  }
}
@media screen and (max-width: 576px) {
  .text {
    top: -36%;
    width: 100%;
    width: calc(100% - 80px);
  }
  #section1 .text {
    top: 64%;
  }
  .image:not(#loaderVideo) {
    top: -75%;
    left: 24px;
    right: auto;
    transform: translate(0%, -25%);
    -webkit-transform: translate(0%, -25%);
  }
} */


.features-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
  padding: 50px 0px;
}

/* .features-colll img {
    width: 100%;
    height: 40vh;
    object-fit: cover;
}
.features-colll {
    padding: 10px;
    border: 1px solid #e9e3e3;
} */
.features-colll h3 {
  font-size: 16px;
  text-align: center;
  padding-top: 15px;
}

.img-full img {
  width: 100%;
}

.two-step {
  width: 100%;
  overflow: hidden;
}

.two-step h2 {
  font-size: 42px;
}

.two-step p {
  padding: 15px 0;
}

.text-concept1 {
  padding: 14px;
}

/*  */

.count {
  font-size: 52px;
  font-weight: bold;
  font-family: BwMitgaDEMO;
}

.counter-wrapper {
  background: #fff;
  padding: 100px;
}

.counter-wrapper:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* background: rgba(0,0,0,.5); */
}

.counter-inner {
  position: relative;
  z-index: 2;
}

.count-icon {
  font-size: 48px;
}

.text-c {
  font-size: 22px;
}

.border-top1 {
  border-top: 1px solid #e9e3e3;
}

.border-bott1 {
  border-bottom: 1px solid #e9e3e3;
}

/*  */

.f-explore {
  padding: 50px 80px 50px;
}

.f-explore h2 {
  font-size: 42px;
  padding-bottom: 25px;
}


.explo-data {
  padding: 10px;
  border: 1px solid #e9e3e3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .explo-data img {
    width: 100%;
    height: 55vh;
    object-fit: cover;
} */
.explo-data h3 {
  font-size: 22px;
  text-align: center;
  padding-top: 15px;
  position: absolute;
  bottom: 26px;
  text-align: center;
  display: flex;
  width: 100%;
  justify-content: center;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;

}

/*  */
.Products-sell {
  padding: 100px 80px 50px;
}

.Products-sell h2 {
  font-size: 42px;
  text-align: center;
  padding-bottom: 50px;
}

.slider-container {
  padding: 50px;
  overflow: hidden;
}

.slider-item {
  padding: 1rem;
}

/* Within Debug mode in Chrome, I found that the arrows were hidden so I adjusted them   */
.slick-next {
  right: -15px;
}

.slick-prev {
  left: -15px;
}


.slick-next:before,
.slick-prev:before {
  font-family: slick;
  font-size: 20px;
  line-height: 1;
  opacity: .75;
  color: #22a6b3;
}

.slick-dots {
  left: 0;
  /*   bottom:8px; */
}

.slick-dots:active {
  color: white;
}

/*The dots before they are active  */
.slick-dots li button:before {
  font-family: slick;
  font-size: 18px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  color: #000;
}

/* The dot when active */
.slick-dots li.slick-active button:before {
  color: #000;
}

/* Background Image styles */

figcaption {
  color: #000;
  text-align: center;
  font-size: 16px;
}

.slider-item- {
  border: 1px solid #00000045;
  padding: 5px;
}

.bg-image {
  background-size: cover;
  background-position: center;
  max-width: 100%;
  background-image: url('../img/RUSSET%20(Large).jpg');
  transition: .5s ease-in-out;

}

.bg-image:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: .5s ease-in-out;
  /*  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
  cursor: pointer;
}

.bg-2 {
  background-image: url('../img/product/spc/MIRROR_GRAY.JPG');
}

.bg-3 {
  background-image: url('../img/product/wallpanel_indoor/AMBER.jpg');
}

.bg-4 {
  background-image: url('../img/product/spc/MIAMI_WHITE_2%20(Large).jpg');
}

.bg-5 {
  background-image: url('../img/product/wallpanel_indoor/MOCHA_WOOD.jpg');
}

.bg-6 {
  background-image: url('../img/product/Baseboard/baseboard.jpg');
}

.bg-7 {
  background-image: url('../img/product/spc/ARCE_PARIS_COMPAC_PLUS%20(Large).jpg');
}

/* .bg-8{
   background-image: url('../img/compact.jpg');
}

.bg-9{
   background-image: url('../img/COMPAC+.webp');
}

.bg-10{
   background-image: url('../img/PARKHURTS%20OAK.jpg');
} */



/*Changes the height of the image  */
.landscape {
  padding-bottom: 120%;
}

@media (max-width: 600px) {
  figcaption {
    font-size: 0.8rem;
  }
}





/* animation */
:root {
  --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-duration: 1s;
}

@-webkit-keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-25%);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-25%);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes slideInleft {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideInleft {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes zoomReverseIn {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes zoomReverseIn {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes flipInY {
  0% {
    opacity: 0;
    transform: perspective(90vw) rotateY(67.5deg);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes flipInY {
  0% {
    opacity: 0;
    transform: perspective(90vw) rotateY(67.5deg);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

[data-animation] {
  opacity: 0;
  -webkit-animation-timing-function: var(--animation-timing-function);
  animation-timing-function: var(--animation-timing-function);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: var(--animation-duration);
  animation-duration: var(--animation-duration);
  will-change: transform, opacity;
}

.animations-disabled,
.animations-disabled [data-animation] {
  -webkit-animation: none !important;
  animation: none !important;
  opacity: 1 !important;
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

.slideInLeft {
  -webkit-animation-name: slideInleft;
  animation-name: slideInleft;
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

.zoomReverseIn {
  -webkit-animation-name: zoomReverseIn;
  animation-name: zoomReverseIn;
}

.flipInY {
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

.flipOutY {
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  animation-direction: reverse;
}


/*  */


/* .grid {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, minmax(200px, 1fr));
 
} */

.grid__thing {
  /* background-color: rebeccapurple; */
}

.grid__thing:first-child {
  grid-column: 1/3;
  grid-row: 1/3;
}

.grid__thing img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.gridywrap {
  padding: 0px 80px 0;
}

.gridywrap div[class*="gridy"] {
  background: #eee;
  box-shadow: inset 0 0 0 1px #ddd;
  padding: 15px;
  float: left;
  position: relative;
}

.gridywrap .gridy-1,
.gridywrap .gridy-2,
.gridywrap .gridy-3 {
  width: 320px;
  overflow: hidden;
}

.gridywrap .gridy-1 {
  width: 100%;
}

.gridywrap .gridy-2 {
  width: 100%;
}

.gridywrap .gridy-3 {
  width: 100%;
}

.gridywrap .gridyhe-1 {
  height: 320px;
}

.gridywrap .gridyhe-2 {
  height: 320px;
}

@media screen and (min-width: 640px) {
  .gridywrap .gridyhe-2 {
    height: 320px;
  }

  .gridywrap {
    width: 100%;
  }

  .gridywrap .gridy-1 {
    width: 50%;
  }

  .gridywrap .gridy-2 {
    width: 50%;
  }

  .gridywrap .gridy-3 {
    width: 100%;
  }
}

@media screen and (min-width: 1024px) {
  .gridywrap .gridy-1 {
    width: 33.3%;
  }

  .gridywrap .gridy-2 {
    width: 66.6%;
  }

  .gridywrap .gridy-3 {
    width: 100%;
  }

  .gridywrap .gridyhe-2 {
    height: 640px;
  }
}

/*styling*/
.gridywrap .gridimg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
}

.gridywrap .gridimg img {
  width: 100%;
}

.gridywrap .gridinfo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  transition: all 0.8s;
}

.gridywrap .gridinfo h3 {
  font-size: 36px;
  font-family: BwMitgaDEMO;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  margin: 130px 0 20px;
  position: relative;
}

.gridywrap .gridinfo h3:after {
  content: "";
  width: 25px;
  border-top: 4px solid #cc3333;
  display: block;
  margin: 0 auto;
  margin-top: 25px;
}

.gridywrap .gridinfo .gridmeta {
  transition-delay: 0.25s;
}

.gridywrap .gridinfo .gridmeta p {
  display: inline-block;
  font-size: 13px;
  color: #fff;
  margin-bottom: 15px;
}

.gridywrap .gridinfo .gridmeta p i {
  margin-right: 5px;
}

.gridywrap .gridinfo .gridmeta p.gridwho {
  margin-left: 25px;
}

.gridywrap .gridinfo p.gridexerpt {
  width: 80%;
  margin: 0 auto;
  line-height: 22px;
  margin-bottom: 25px;
  color: #fff;
  transition-delay: 0.5s;
  font-size: 14px;

}

.gridywrap .gridinfo * {
  opacity: 0;
  transition: all 0.8s;
}

.gridywrap .gridinfo h3 {
  opacity: 1;
}

.gridywrap .gridinfo .grid-btn {
  color: #fff;
  text-decoration: none;
  margin: 0 auto;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 25px;
  border: 1px solid #fff;
  display: block;
  overflow: hidden;
}

.gridywrap .gridinfo .grid-btn:hover {
  width: 150px;
  background: rgba(0, 0, 0, 0.3);
}

.gridywrap .gridinfo .grid-btn span {
  opacity: 0;
  display: none;
  transition: opacity 0.8s;
}

.gridywrap .gridinfo .grid-btn:hover span {
  opacity: 1;
  display: inline;
}

.gridywrap .gridinfo .grid-btn:hover i {
  opacity: 0;
  display: none;
}

.gridywrap .gridinfo:hover * {
  opacity: 1;
}

.gridywrap .gridinfo:hover p {
  opacity: 1;
}

.gridywrap .gridinfo:hover {
  background: rgba(0, 0, 0, 0.6);
}

.gridywrap .gridinfo:hover h3 {
  margin-top: 70px;
  opacity: 1;
}

.intro {
  text-align: center;
  padding: 25px;
  background: #111;
  color: #ddd;
}

.intro p {
  opacity: 0.5;
  font-size: 12px;
}

.intro p a {
  color: #fff;
}

.section-new {
  overflow: hidden;
  padding: 70px 0px 0px 70px;
}

/*  */
.spc-data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  padding: 0px 0px 0 0;
  align-items: center;
}

.dogs-img img {
  width: 100%;
  display: flex;
  margin: auto;
}

.spc-conte {
  padding-left: 0px;
}

.spc-conte h2 {
  font-size: 42px;
  padding-bottom: 15px;
}

.spc-data li {
  font-size: 14px;
  padding-bottom: 10px;
}

.spc-data li b {
  font-size: 16px;
}

.spc-data ul {
  list-style-type: none;
  padding-left: 0;
  padding-top: 15px;
}

.cover-spc img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.spc-backround {
  padding: 70px 70px 0px;
}

.spc-backround h2 {
  position: absolute;
  /* transform: translate(19%, 0%); */
  display: flex;
  justify-content: left;
  align-items: center;
  top: 85%;
  z-index: 999;
  color: #fff;
  font-size: 42px;
  margin: auto;
  padding-left: 25px;
  gap: 10px;
}

.cover-spc {
  position: relative;
  display: flex;
  justify-content: center;
}

.cover-spc:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* width: 20em;
  height: 20em; */
  /* background: rgba(0, 0, 0, 0.24); */
}

.new-rad {
  padding: 150px 30px 150px 100px;
  background: #ffffff;
  /* right: -76px; */
  position: relative;
  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 30px 10px 10px 30px; */
}

.coll-heading {
  text-align: center;
  padding-bottom: 50px;
  padding-top: 50px;
  font-size: 42px;

}



/* about page */
.abt-new-sec {
  padding: 50px 100px;
}

.abouts-sec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  align-items: center;
}

.about-conte-img img {
  width: 100%;
  height: 75vh;
  object-fit: cover;
}

.about-conte h2 {
  font-size: 42px;
  padding-bottom: 20px;
}

.about-conte p {
  max-width: 700px;
}

.vision-misii {
  padding: 50px 100px;
}

.vision-misii h2 {
  font-size: 42px;
  text-align: center;
}

.vision-misii p {
  text-align: center;
}

.valuable {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  align-items: center;
  padding: 50px 0;
  /* max-width: 1300px; */
  margin: auto;
}

.vmv img {
  width: 200px;
  margin: auto;
}

.vmv {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  border: 1px solid #e9e3e3;
  padding: 20px;
  height: auto;
}

.why-choose {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  /* align-items: center; */
}

.why-chose {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 20px 0;
}

.why-choose-c h2 {
  font-size: 42px;
  padding-bottom: 15px;
}

.why_choose {
  padding: 50px 100px;
}

.whychoose {
  border: 1px solid #e4e4e4;
  padding: 15px;
}

.whychoose h3 {
  font-size: 18px;
}

.vmv h3 {
  font-size: 18px;

}

.whychoose {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.icon img {
  width: 50px;
  opacity: 0.5;
}

.faq-img {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.faq-img img {
  width: 100%;
}

.faq-sec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.about_faq {
  padding: 50px 100px;

}



.form-data h2 {
  font-size: 42px;
}

.form-data p {
  padding: 15px 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 15px;
  text-align: center;
  /* align-items: baseline; */
}

.contect-detail {
  padding: 100px 0 50px;
  background-color: #fdfdfd;
}

.comtact-data a {
  text-decoration: none;
  color: #000;
}

.comtact-data p {
  margin-bottom: 0;
}

.comtact-data {
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  align-items: center;
  border: 1px solid #d4d4d4;
  padding: 15px;
  border-radius: 20px;
}

.comtact-data img {
  width: 40px;
}

/* media-gallary */

.media-gallary {
  padding: 50px 100px;
}

.gallary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  justify-content: center;
  align-items: center;
}

.gallary .card {
  color: #252a32;
  border-radius: 0px;
  background: #ffffff;
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24); */
  overflow: hidden;
  /* Hides image overflow */
  padding: 10px;
  border: 1px solid #d4d4d4;
}

.gallary .card-image {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 70%;
  background: #ffffff;
  overflow: hidden;
  /* Ensures zoomed image doesn't overflow */
}

.gallary .card-image img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  /* Smooth scaling effect */
  transition: all .5s ease-in-out;

}

.gallary .card-image:hover img {
  transform: scale(1.1);
  /* Zoom effect */
  transition: all .5s ease-in-out;
}


@media only screen and (max-width: 600px) {
  .gallary {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
}


.faq-secti h2 {
  text-align: center;
  font-size: 42px;
  padding: 50px 0;
}

.faq-secti {
  padding-bottom: 100px;
}

.articles-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 0 auto;
  padding: 50px 0;

}

.article-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  padding: 10px;
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
  transition: all 0.3s ease;
  overflow: hidden;
  margin-top: 25px;
  cursor: pointer;
  width: 100%;
  justify-content: space-between;
}

.article-card:hover {
  /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);*/
  /*transform: translateY(-3px);*/
}

.date {
  font-size: 14px;
  color: #666;
  padding: 0px;
  margin-top: 10px;
  gap: 15px;
  display: flex;
  align-items: baseline;
  font-size: 14px;
}

.read-more {
  font-size: 14px;
  color: #666;
  padding: 0px;
  margin-top: 10px;
  gap: 15px;
  display: flex;
  align-items: baseline;
  font-size: 14px;
  margin-bottom: 15px;
  transition: 0.5s all ease-in-out;
  text-decoration: none;
  justify-content: end;


}

.read-more a {
  color: #ffffff;
  text-decoration: none;
  background-color: #333;
  border: 1px solid #333;
  padding: 5px 15px;
  border-radius: 50px;
  transition: 0.5s all ease-in-out;
}

.read-more a:hover {
  background-color: #ffffff;
  color: #000;
  border: 1px solid lightgrey;
  transition: 0.5s all ease-in-out;

}


.read-more1 a {
  background-color: #ffffff;
  color: #000;
  border: 1px solid lightgrey;
  padding: 5px 15px;
  border-radius: 50px;
  transition: 0.5s all ease-in-out;
  text-decoration: none;

}

.read-more1 a:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: #333;
  padding: 5px 15px;
  border-radius: 50px;
  transition: 0.5s all ease-in-out;
}

.title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: #333;
  padding: 0px;
  margin: 10px 0;
}

.title-2 {
  font-size: 14px;
  line-height: 1.3;
  color: #333;
  padding: 0px;
  margin: 10px 0;
}

.author {
  font-size: 14px;
  color: #444;
  font-style: italic;
  padding: 0 20px 20px;
}

.image-container {
  position: relative;
  width: 100%;
  /* height: 200px; */
  overflow: hidden;
}

.image-placeholder {
  width: 100%;
  height: 100%;
}

.image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.article-card:hover .image-container img {
  transform: scale(1.1);
}

.image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  text-align: center;
}

.blog-d {
  font-size: 42px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .articles-container {
    grid-template-columns: 1fr;
  }

  .article-card {
    width: 100%;
  }
}

.catalogue-section {
  padding: 50px 0 0;
  text-align: center;
}

.catalogue-section h2 {
  font-size: 42px;

}

.membership {
  padding: 50px 100px;
}

.membership h2 {
  font-size: 42px;
  text-align: center;
  padding-bottom: 50px;
}

.utility {
  padding: 50px 0;
}

.utility h2 {
  font-size: 42px;
  text-align: center;
  padding-bottom: 50px;
}

.breadcum {
  display: flex;
  gap: 20px;
  list-style-type: none;
}

.breadcum a {
  font-size: 22px;
  color: #fff;
  text-decoration: none;
}

.breadcum li {
  font-size: 22px;
  color: #fff;
  text-decoration: none;
}

.contact-s {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}

.why-choose-i img {
  width: 100%;
}

.social-tag a {
  color: #000;
  text-decoration: none;
}

.tile-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.tile-image img {
  width: 100%;
}

.tile-card {
  border: 1px solid #d4d4d4;
  padding: 10px;
}

.grid-col-res {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
  padding: 0px 50px;
}

.portfolio img {
  width: 100%;
}


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

.services-item img {
  width: 100%;
}

.catalogue-da {
  padding: 60px 80px 100px;
}

.catalogue- h2 {
  font-size: 42px;
  text-align: center;
  font-family: BwMitgaDEMO;
}

.features-grid-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 0px 0px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  padding: 0px 0px;
}

.product--display {
  padding: 50px 80px;
}

.product-grid-base {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  padding: 0px 0px;
}

.grid-new-pro-one {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  padding: 0px 0px;
  align-items: center;

}

.prd-view-im img {
  width: 100%;
  height: 70vh;
  object-fit: cover;
}

.prod-grid-w {
  display: flex;
  gap: 50px;
  padding: 20px 0;
}

.prod-grid-w h5 {
  padding-bottom: 15px;
}

.prod-grid-w p {
  font-size: 18px;

}

.features-colll h3 {
  color: #000;
}

.ico-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 15px 0px;
  /* text-align: center; */

}

.pets {
  border: 1px solid #e9e3e3;
  padding: 10px;
}

.pets h3 {
  /* text-transform: uppercase; */
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.pets p {
  margin-bottom: 0;
}

.pets img {
  width: 75px;
}

.features-colll {
  overflow: hidden;
  position: relative;
  width: 100%;
  transition: transform 0.3s ease-in-out;
}

.features-colll img {
  width: 100px;
  height: 100px;
  /* object-fit: cover; */
  transition: all .5s ease-in-out;
}

.features-colll {
  padding: 10px;
  /* border: 1px solid #e9e3e3; */
}

/* .features-colll:hover img {
    transform: scale(1.3);
    transition: all .5s ease-in-out;

} */

.card {
  overflow: hidden;
  position: relative;
  width: 100%;
  transition: transform 0.3s ease-in-out;
}

.card img {
  width: 100%;
  height: 40vh;
  object-fit: cover;
  transition: all .5s ease-in-out;
}

.features-colll {
  padding: 10px;
  /* border: 1px solid #e9e3e3; */
  text-align: center;
}

.card:hover img {
  transform: scale(1.05);
  transition: all .5s ease-in-out;

}

.card-content {
  padding: 15px 15px 0px !important;
}

.prod-grid-w span {
  font-weight: 600;
  text-transform: capitalize;
}

.prod-grid-w p {
  font-size: 15px;
  font-style: 400;
}

.card-details h4 {
  font-weight: 400;

}

.product-bor {
  width: 50%;
}

.product-bor tr {
  border-bottom: 1px solid #ebe5e5;
}

.product-bor span {
  font-weight: 400;
  font-size: 14px;
}

.product-bor td {
  padding: 5px 0;
  font-weight: 400;
  font-size: 14px;
}

.card-details h5 {
  font-weight: 400;
  padding: 25px 0 10px;
  font-size: 18px;
}

.card-details h4 {
  font-weight: 400;
  font-size: 16px;
}

.product-desc {
  padding-top: 20px;
}

.product-bor- {
  width: 100%;
}

.product-bor- tr {
  border-bottom: 1px solid #ebe5e5;
  padding: 5px 0;
}

.product-bor- span {
  font-weight: 400;
  font-size: 14px;
}

.product-bor- td {
  font-weight: 400;
  font-size: 14px;
  padding: 5px 0;
}

.prod-grid-w {
  display: grid;
  gap: 50px;
  grid-template-columns: repeat(2, 1fr);
  padding: 20px 0;
}

.packingdetail td {
  font-size: 14px;
}

.utility td {
  font-size: 14px;

}

.exploreer {
  display: grid;
  gap: 50px;
  grid-template-columns: repeat(2, 1fr);
  padding: 20px 0;
  align-items: center;
}

.explore-f {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px;
  padding: 0px 0px;

}

.explo-data img {
  width: 100%;
  height: 30vh;
  object-fit: cover;
}

.features-grid-head .features-colll img {
  width: 100%;
  height: 40vh;
  object-fit: cover;
  transition: all .5s ease-in-out;
}

.features-grid-head .features-colll:hover img {
  transform: scale(1);
  transition: all .5s ease-in-out;

}

.card-content {
  padding: 15px;
  /* position: absolute; */
  z-index: 88 !important;
  bottom: 5px;
}

.card-content h5 {
  font-size: 18px;
}

.pro-det-view h5 {
  font-size: 16px;
  font-family: poppins;
}

.pro-det-view p {
  font-weight: 400;
  font-size: 14px !important;
  font-family: poppins;

}

.padd-left-r h2 {
  font-size: 42px;
  padding-bottom: 15px;
}

.related-products-section h5 {
  /* font-family: "DM Sans", sans-serif; */
  font-size: 16px;
  text-align: center;
  font-family: poppins;


}

.related-products-section {
  font-size: 18px;
  font-family: poppins;


}

.Btn {
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.4s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 10px;
}

.instagram {
  background: #f09433;
  background: -moz-linear-gradient(45deg,
      #f09433 0%,
      #e6683c 25%,
      #dc2743 50%,
      #cc2366 75%,
      #bc1888 100%);
  background: -webkit-linear-gradient(45deg,
      #f09433 0%,
      #e6683c 25%,
      #dc2743 50%,
      #cc2366 75%,
      #bc1888 100%);
  background: linear-gradient(45deg,
      #f09433 0%,
      #e6683c 25%,
      #dc2743 50%,
      #cc2366 75%,
      #bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
}

.youtube {
  background-color: #ff0000;
}

.twitter {
  background-color: #1da1f2;
}

.Btn:hover {
  width: 110px;
  transition-duration: 0.4s;
  border-radius: 30px;
}

.Btn:hover .text {
  opacity: 1;
  transition-duration: 0.4s;
}

.Btn:hover .svgIcon {
  opacity: 0;
  transition-duration: 0.3s;
}

.text {
  position: absolute;
  color: rgb(255, 255, 255);
  /* width: 120px; */
  font-weight: 600;
  opacity: 0;
  transition-duration: 0.4s;
}

.svgIcon {
  transition-duration: 0.3s;
}

.svgIcon path {
  fill: white;
}




.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.gallery-item {
  width: 25%;
  height: 50vh;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  border: 2px solid #fff;
  transition: all ease-out 0.5s;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  filter: grayscale(1);
}

.gallery-item h3 {
  position: absolute;
  color: white;
  bottom: 40px;
  left: 10px;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease;
}

.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.gallery-item {
  width: 25%;
  height: 50vh;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  border: 2px solid #fff;
  transition: all ease-out 0.5s;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  filter: grayscale(1);
}

.gallery-item h3 {
  position: absolute;
  color: white;
  bottom: 40px;
  left: 10px;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease;
}

.gallery-item a {
  position: absolute;
  color: white;
  bottom: 10px;
  left: 12px;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease;
}

/* .gallery-item h3 {
  font-size: 22px;
  font-weight: 500;
  font-family: Poppins;
} */

.gallery-item a {
  font-size: 1em;
  font-weight: 300;
}

.gallery-item:hover {
  width: 100%;
  filter: grayscale(0);
}


.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.gallery-item {
  width: 25%;
  height: 50vh;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  border: 2px solid #fff;
  transition: all ease-out 0.5s;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  filter: grayscale(1);
}

.gallery-item h3 {
  position: absolute;
  color: white;
  bottom: 40px;
  left: 10px;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease;
}

.gallery-item a {
  position: absolute;
  color: white;
  bottom: 10px;
  left: 12px;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease;
}

/* .gallery-item h3{
  font-size: 22px;
  font-weight: 500;
  font-family: Poppins;
} */

.gallery-item a {
  font-size: 1em;
}

.gallery-item p {
  font-size: 1em;
  display: none;
  position: absolute;
  color: white;
  bottom: 40px;
  left: 10px;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover {
  width: 100%;
  filter: grayscale(0);
}

.gallery-item:hover p {
  display: block;

}

.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.gallery-item {
  width: 25%;
  height: 50vh;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  border: 2px solid #fff;
  transition: all ease-out 0.5s;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  filter: grayscale(1);
}

.gallery-item h3 {
  position: absolute;
  color: white;
  bottom: 40px;
  left: 10px;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease;
}

.gallery-item a {
  position: absolute;
  color: white;
  bottom: 10px;
  left: 12px;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease;
}

/* .gallery-item h3 {
  font-size: 22px;
  font-weight: 500;
  font-family: Poppins;
} */

.gallery-item a {
  font-size: 1em;
}

.gallery-item:hover {
  width: 100%;
  filter: grayscale(0);
}


.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.gallery-item {
  width: 25%;
  height: 50vh;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  border: 2px solid #fff;
  transition: all ease-out 0.5s;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  filter: grayscale(1);
}

.gallery-item h3 {
  position: absolute;
  color: white;
  bottom: 40px;
  left: 10px;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease;
}

.gallery-item a {
  position: absolute;
  color: white;
  bottom: 10px;
  left: 12px;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease;
}

/* .gallery-item h3 {
  font-size: 22px;
  font-weight: 500;
  font-family: Poppins;
} */

.gallery-item a {
  font-size: 1em;
}

.gallery-item:hover {
  width: 100%;
  filter: grayscale(0);
}


.gallery-item a {
  position: absolute;
  color: white;
  bottom: 10px;
  left: 12px;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease;
}

.gallery-item h3 {
  font-size: 26px;
  font-family: BwMitgaDEMO;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}

.gallery-item a {
  font-size: 1em;
}

.gallery-item:hover {
  width: 100%;
  filter: grayscale(0);
}


.footer .svgIcon path {
  fill: #ffffff;
}

.capsule {
  /* background-color: #f5f5f5; */
  /* border: 1px solid #d3d3d3;
  border-radius: 30px;
  padding: 5px 15px; */
  font-family: poppins;
  font-size: 15px;
}

.application-area {
  display: flex;
  gap: 25px;
}

.padd-left-r h2 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 200;
}

.padd-left-r h4 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  padding-bottom: 10px;
}

.d-fcol {
  display: flex;
  gap: 10px;
  align-items: center;
}

.product-feat {
  background-color: #f5f5f5;
  padding: 20px 100px;
}

.featuress {
  display: flex;
  gap: 15px;
  padding: 20px 0px;
}

.featuress h5 {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-feat h4 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
}

.grid-fours {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 15px;
  padding: 15px 0;
  font-family: poppins;
}

.grid-choice {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
}

.table-responsive {
  font-family: poppins;
}

.fw-200 {
  font-weight: 400;
}

.outin {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.outin p {
  margin-bottom: 5px;
}


.animated-link {
  /* Basic Text Styles */
  color: #fff;
  text-decoration: none;
  padding-bottom: 2px;
  /* Space between text and border */
  position: relative;
  display: inline-block;
  /* Essential for containing the ::after element */
}

.animated-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0%;
  transform: translateX(0%);
  height: 2px;
  /* Border thickness */
  width: 0px;
  /* **Initial 20px width** */
  background-color: #fff;
  /* Border color */

  /* Animation/Transition Settings */
  transition: width 0.7s ease-out;
  /* Smooth animation over 0.3 seconds */
}

.animated-link:hover::after {

  width: 100%;
  color: #fff;
}

.animated-link:hover {

  color: #fff;

}

.animated-link1 {
  /* Basic Text Styles */
  color: #000;
  text-decoration: none;
  padding-bottom: 2px;
  /* Space between text and border */
  position: relative;
  display: inline-block;
  /* Essential for containing the ::after element */
}

.animated-link1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0%;
  transform: translateX(0%);
  height: 2px;
  /* Border thickness */
  width: 0px;
  /* **Initial 20px width** */
  background-color: #000;
  /* Border color */

  /* Animation/Transition Settings */
  transition: width 0.7s ease-out;
  /* Smooth animation over 0.3 seconds */
}

.animated-link1:hover::after {

  width: 100%;
  color: #000;
}

.animated-link1:hover {

  color: #000;

}

/* --- SECTION CONTAINER (No Change) --- */
.artisanal-feature-section {
  position: relative;
  width: 100%;
  height: 80vh;
  padding: 50px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #f7f5f2;
}

.description-artisanal {
  margin-bottom: 2rem;
}

/* --- BACKGROUND VISUAL (Container - No background-image property) --- */
.background-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Removed: background-image: url(...); */
  /* Removed: background-size: cover; */
  /* Removed: background-position: center center; */
  z-index: 0;
}

/* --- NEW STYLES for the <img> TAG --- */
.background-visual .visual-image-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures the image covers the container without distortion */
  display: block;
}

.collection-title {
  /* padding-bottom: 20px; */
}

/* --- CONTENT BOX (No Change) --- */
.content-box {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  padding: 50px;
  width: 600px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ... (Remaining CSS for text and buttons remains the same) ... */

/* --- RESPONSIVENESS ADJUSTMENTS --- */
@media (max-width: 992px) {
  .artisanal-feature-section {
    height: auto;
    padding: 40px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .background-visual {
    margin-bottom: 30px;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }

  /* .visual-image-element will still cover the 300px height */

  .content-box {
    width: 100%;
    max-width: 500px;
    padding: 30px;
    text-align: center;
  }

  /* ... (Rest of the media query remains the same) ... */
}

.download-cat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.content-img img {
  width: 100%;
}

.content-cata {
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px;
}

.porcelian-c {
  padding: 0px 80px 50px;
}

.content-cata h2 {
  padding-bottom: 15px;
}

.collec-griid {
  display: grid;
  grid-template-columns: 70% 30%;
}

.collection-demo {
  padding: 50px 80px;
}

.img-full-im img {
  width: 100%;
  height: 65vh;
  object-fit: cover;
  object-position: top;
}

.collec-griid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 20px;
  border: 1px solid #dadada;
}

.fix-cont {
  padding: 50px;
  /* background: #f5f5f5; */
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}

.fix-cont h2 {
  padding-bottom: 15px;
}

/* --- SECTION CONTAINER --- */
.download-catalogue-section {
  display: flex;
  /* Use flexbox for the two-column layout */
  max-width: 1400px;
  margin: 80px auto;
  /* Centered with vertical spacing */
  background-color: #ffffff;
  /* Main background */
  align-items: center;
  /* Vertically align content in the middle */
  position: relative;
  /* For the image's negative margin */
  min-height: 500px;
  /* Ensure enough height even with short content */
}

/* --- IMAGE COLUMN --- */
.catalogue-image-column {
  flex: 1;
  /* Takes up one part of the flexible space */
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 20px;
  /* Space between image and dark box */
  position: relative;
  z-index: 2;
  /* Ensure image is above the dark content if they overlap slightly */
}

.image-wrapper {
  /* To create the slight offset, use a container with a negative margin */
  margin-right: -100px;
  /* Pulls the image slightly into the content column */
  max-width: 600px;
  /* Control image size */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  /* Stronger shadow for depth */
  background-color: #f0f0f0;
  /* Light background behind image for contrast */
  padding: 20px;
  /* Internal padding for the image wrapper */
  border-radius: 4px;
}

.catalogue-image {
  width: 100%;
  height: auto;
  display: block;
}

/* --- CONTENT COLUMN (Dark background) --- */
.catalogue-content-column {
  flex: 1.2;
  /* Takes up more space than the image column */
  background-color: #212121;
  /* Dark background */
  color: #ffffff;
  /* White text */
  padding: 60px 80px 60px 120px;
  /* Generous padding, more on left to account for image overlap */
  position: relative;
  z-index: 1;
  /* Behind the image */
  height: 100%;
  /* Ensure it fills the height of the section */
  display: flex;
  /* Use flex for internal content alignment */
  flex-direction: column;
  justify-content: center;
}

.catalogue-content-column h2 {
  font-size: 2.2em;
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: 700;
  letter-spacing: 1px;
}

.underline-divider {
  display: block;
  width: 60px;
  height: 3px;
  background-color: #a0522d;
  /* Accent color for the underline */
  margin-bottom: 30px;
}

.catalogue-content-column p {
  font-size: 1em;
  line-height: 1.7;
  margin-bottom: 40px;
  color: #cccccc;
  /* Lighter text for readability on dark background */
}

.explore-more-btn {
  display: inline-block;
  padding: 12px 30px;
  border: 1px solid #ffffff;
  /* White border for contrast */
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  width: fit-content;
  /* Button only as wide as its content */
}

.explore-more-btn:hover {
  background-color: #a0522d;
  /* Accent color on hover */
  border-color: #a0522d;
  color: #ffffff;
}

/* --- RESPONSIVENESS --- */
@media (max-width: 992px) {
  .download-catalogue-section {
    flex-direction: column;
    /* Stack columns vertically */
    padding: 40px 20px;
  }

  .catalogue-image-column {
    padding-right: 0;
    margin-bottom: 30px;
  }

  .image-wrapper {
    margin-right: 0;
    /* Remove negative margin on mobile */
    max-width: 80%;
    /* Adjust image size */
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  }

  .catalogue-content-column {
    padding: 50px 30px;
    /* Adjust padding for mobile */
    text-align: center;
    /* Center content on smaller screens */
    width: 100%;
    min-height: auto;
  }

  .underline-divider {
    margin-left: auto;
    margin-right: auto;
  }

  .explore-more-btn {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 600px) {
  .catalogue-content-column h2 {
    font-size: 1.8em;
  }

  .catalogue-content-column p {
    font-size: 0.9em;
  }

  .image-wrapper {
    max-width: 95%;
  }
}

.number-head {
  font-size: 55px;
  font-weight: 700;
}

.footer-main-grid {
  display: grid;
  grid-template-columns: 30% 70%;
}

.footer-grid-all {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
}

.footer-logosec {
  padding-right: 25px;
}

.social-tag p {
  display: flex;
  gap: 10px;
  align-items: center;
}

.grid-choice video.video-background {
  width: 100%;
  height: 35vh;
  /* object-fit: fill; */
}

.flex-dd {
  display: flex;
  gap: 10px;
  align-items: start;
  flex-direction: column;
  justify-content: end;
}

.main-sss p {
  margin-bottom: 0px;
}

.main-sss h6 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 21px;
}

.spc-detail-tiles {
  height: 50vh;
  object-fit: cover;
}


.product-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px 0;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

/* Combined styles for search input and select boxes */
.product-controls select,
.product-controls input[type="text"] {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
  /* Style to make them look like boxes */
  height: 40px;
  line-height: 20px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.filter-group {
  display: flex;
  gap: 15px;
  align-items: center;
}

.search-group input {
  width: 250px;
}

/* Highlight focus with your brand color */
.product-controls select:focus,
.product-controls input:focus {
  border-color: #d7b56d;
  outline: none;
}

/* New Button Style */
#clear-filters-btn {
  padding: 10px 15px;
  background-color: #555;
  /* Darker color for contrast */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  height: 40px;
  width: 100%;
}

#clear-filters-btn:hover {
  background-color: #333;
}

.product-grid-spc {
  display: grid;
  /* Using auto-fit for better responsiveness */
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 30px 0;
}

/* ================================================
    EXISTING CARD AND POPUP CSS 
    ================================================
    */
.card {
  border-radius: 0px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  transition: transform 0.2s;
  padding: 10px;
  border: 1px solid #d4d4d4;
  position: relative;
  text-decoration: none;
  /* Ensure link styling is removed */
  display: block;
}

/* Optional: Added slight card lift on hover */
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card img {
  width: 100%;
  height: 30vh;
  object-fit: cover;
  transition: opacity 0.3s;
  /* Smooth transition for image swap */
}

.card-content {
  padding: 15px;
  z-index: 999;
  bottom: 5px
}

.card h5 {
  font-size: 18px;
  margin: 0px 0;
  color: #000
}

/* The following styles for .overlay and .popup are for your previous lightbox, 
       but are kept here just in case they are used elsewhere in your site.
       They are NOT used for the simple image swap on card hover.
    */
.overlay {
  display: none;
  /* ... (rest of the styles) ... */
}

.popup {
  display: none;
  /* ... (rest of the styles) ... */
}


.base-card {
  /* background: white; */
  border-radius: 0px;
  /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
  width: 100%;
  text-align: center;
  overflow: hidden;
  transition: transform 0.2s;
  padding: 10px;
  border: 1px solid #d4d4d4;
}

/* .card:hover {
      transform: scale(1.03);
    } */

.base-card img {
  width: 100%;
  /* height: 30vh; */
  object-fit: cover;
  /* **NEW: Add transition for smoother image swap** */
  transition: opacity 0.3s ease-in-out;
  transition: all .5s ease-in-out;

}

.card-content {
  padding: 15px;
  /* position: absolute; */
  z-index: 999;
  bottom: 5px
}

.base-card h2 {
  font-size: 18px;
  margin: 0px 0;
  color: #000
}

.base-card p {
  margin: 5px 0 15px;
  color: #555;
}

.base-card button {
  background-color: transparent;
  border: 1px solid #d7b56d;
  color: #d7b56d;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.base-card button:hover {
  background-color: #d7b56d;
  color: #fff;
}

.base-card {
  position: relative;
}

.popup {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 90%;
}

.popup img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

.popup-close {
  float: right;
  cursor: pointer;
  color: red;
  font-size: 18px;
}


.overlay {
  display: none;
  position: fixed;
  z-index: 998;
  /* behind popup */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.popup {
  display: none;
  position: fixed;
  z-index: 999;
  /* above overlay */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 90%;
}

.base-card:hover img {
  transform: scale(1.01);
  transition: all .5s ease-in-out;
  object-fit: contain;
  height: 20vh;
}

.base-card .card-content h5 {
  color: #000;
}
.features-grid-head-product{
      display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 0px 0px;
}
.product-images-f{
  border: 1px solid #e6e6e6;
  padding: 10px;
}
.product-images-f img{
  width: 100%;
  height: 35vh;
  object-fit: cover;
}
.product-images-f h3{
    color: #000;
    text-align: center;
    font-weight: 400;
    padding-top: 10px;
    font-size: 20px;
}

.wid75{
  width: 75px;
}
.app-flex{
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.grid-new-pro-ones{
  display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    padding: 0px 0px;
    align-items: center;
}
.mosaic-detail{
  display: flex;
  gap: 50px;
}
.laminate-grid{
    display: flex;
    grid-template-columns: repeat(1,1fr);
    gap: 10px;
    /* width: 50%; */
    flex-direction: column;

}
.laminate-grid .card img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    transition: opacity 0.3s;
}
.laminate-grid .card-content {
    padding: 0 15px;
    position: absolute;
    z-index: 999;
    bottom: 35px;
        width: 100%;
}
.laminate-grid .card:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.laminate-grid .card:hover img {
    transform: scale(1);
    transition: all .5s ease-in-out;
}
.laminate-grid .card{

  width: 40%;
  padding: 5px;
}
.laminate-grid .card h5 {
    color: #fff;
    width: 100%;
    text-align: center;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.catalogue-sec{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 15px;
}
.catalogues img {
    width: 100%;
    height: 40vh;
    object-fit: contain;
}
.catalogues {
    padding: 20px;
    background: #f5f5f5;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    flex-direction: column;
    align-items: anchor-center;
}
.catalogues h3{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 0;
}
.catalogue-da h2{
  padding-bottom: 40px;
  text-align: center;
}

.mosaic-se h4{
  font-size: 18px;
  padding-top: 20px;
}
.mosaic-se h5{
  font-size: 15px;
}
.mosaic-s h5{
      font-weight: 400;
    padding: 5px;
    font-size: 18px;
    margin: 0;
}
.app-flex-mos{
  display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    width: fit-content;
}
.bor1{
  border: 1px solid #000;
  padding: 10px;
  border-radius: 50%;
}