﻿body {
  overflow-x: hidden;
}

.mt-100 {
  margin-top: 100px;
}

.mb-100 {
  margin-bottom: 100px;
}

h1,
h2,
h4,
h5 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
}

p {
  font-family: 'Open Sans', sans-serif; font-weight: 500;
  font-size: 17px;
}

li {
  text-decoration: none !important;
}

a {
  text-decoration: none !important;
}

* {
  margin: 0;
  box-sizing: border-box;
}

:before,
:after {
  box-sizing: border-box;
}

/* .container{
	max-width: 1200px;
	margin:auto;
} */

.v-center {
  align-items: center;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.header-top-feature-two {
  margin-left: 14px;
}

.header-top-feature h5 {
  color: #fff;
   font-weight: 400;
  font-size: 15px;
}

.header-top-feature i {
  color: #fff;
}

.contact-btn {
  background-color: #d40801;
   font-weight: 400;
  color: #fff;
  border: solid 1px #ffffff87;
  font-size: 15px;
  padding: 4px 6px;
}

/* header */

.header .item-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.header .item-center {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.header {
  display: block;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  padding: 15px;
  background-color: #e20612;
  /*backdrop-filter: blur(10px);*/
  border-bottom: solid 1px #ffffff4a;
}

.menu-main {
  display: flex;
  align-items: center;
  justify-content: end;
}

.menu-sub ul li a {
  color: #000 !important;
}

.header .logo a {
  font-size: 30px;
  color: #000000;
  font-weight: 700;
  text-decoration: none;
}

.header .logo img {
  border-radius: 4px;
}

.header .item-right {
  display: flex;
  justify-content: flex-end;
}

.header .item-right a {
  text-decoration: none;
  font-size: 25px;
  color: #ffffff;
  display: inline-block;
  margin-left: 10px;
  transition: color 0.3s ease;
}

.header .menu > ul > li {
  display: inline-block;
  margin-left: 20px !important;
}

.header .menu > ul > li > a {
  font-size: 15px;
  font-weight: 500;
  color: #777777;
  position: relative;
  text-transform: capitalize;
  transition: color 0.3s ease;
  text-align: left;
   font-weight: 400;
}

.header .menu > ul > li .sub-menu {
  position: absolute;
  z-index: 500;
  background-color: #ffffff;
  box-shadow: -2px 2px 70px -25px rgba(0, 0, 0, 0.3);
  padding: 20px 30px;
  transition: all 0.5s ease;
  margin-top: 25px;
  opacity: 0;
  visibility: hidden;
}

@media (min-width: 992px) {
  .header .menu > ul > li.menu-item-has-children:hover .sub-menu {
    margin-top: 0;
    visibility: visible;
    opacity: 1;
  }
}

.header .menu > ul > li .sub-menu > ul > li {
  line-height: 1;
}

.header .menu > ul > li .sub-menu > ul > li > a {
  display: inline-block;
  padding: 10px 0;
  font-size: 15px;
  color: #555555;
  transition: color 0.3s ease;
  text-decoration: none;
  text-transform: capitalize;
}

.header .menu > ul > li .single-column-menu {
  min-width: 280px;
  max-width: 350px;
}

.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li {
  line-height: 1;
  display: block;
}

.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a {
  padding: 10px 0;
  display: inline-block;
  font-size: 15px;
  color: #555555;
  transition: color 0.3s ease;
}

.header .menu > ul > li .sub-menu.mega-menu {
  left: inherit;
  transform: translateX(-50%);
}

.header .menu > ul > li .sub-menu.mega-menu-column-4 {
  max-width: 200px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 15px;
}

.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item {
  padding: 0 15px;
}

.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item .title {
  font-size: 16px;
  color: #000;
  font-weight: 500;
  line-height: 1;
  padding: 10px 0;
}

.header
  .menu
  > ul
  > li
  .sub-menu.mega-menu-column-4
  > .list-item.text-center
  .title {
  text-align: center;
}

.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img {
  max-width: 100%;
  width: 100%;
  vertical-align: middle;
  margin-top: 10px;
  height: 300px;
  object-fit: cover;
}

.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:hover,
.header .menu > ul > li .sub-menu > ul > li > a:hover,
.header .item-right a:hover,
.header .menu > ul > li:hover > a {
  color: #d40801;
}

/* banner section */
.banner-section {
  background-image: url("../img/banner.jpg");
  background-size: cover;
  background-position: center;
  height: 700px;
  width: 100%;
  display: block;
}

.mobile-menu-head,
.mobile-menu-trigger {
  display: none;
}

/*responsive*/
@media (max-width: 991px) {
  .header {
    padding: 0px;
    background-color: #212529;
    padding-top: 5px;
    padding-bottom: 10px;
  }

  .header .item-center {
    order: 3;
    flex: 0 0 100%;
  }

  .header .item-left,
  .header .item-right {
    flex: 1 0 auto;
    justify-content: space-around;
  }

  .v-center {
    justify-content: space-between;
  }

  .header .mobile-menu-trigger {
    display: flex;
    height: 30px;
    width: 30px;
    margin-left: 15px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }

  .header .mobile-menu-trigger span {
    display: block;
    height: 2px;
    background-color: #ffffff;
    width: 24px;
    position: relative;
  }

  .header .mobile-menu-trigger span:before,
  .header .mobile-menu-trigger span:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
  }

  .header .mobile-menu-trigger span:before {
    top: -6px;
  }

  .header .mobile-menu-trigger span:after {
    top: 6px;
  }

  .header .item-right {
    align-items: center;
  }

  .header .menu {
    position: fixed;
    width: 320px;
    background-color: #ffffff;
    left: 0;
    top: 0;
    height: 100vh;
    overflow: hidden;
    transform: translate(-100%);
    transition: all 0.5s ease;
    z-index: 1099;
  }

  .header .menu.active {
    transform: translate(0%);
  }

  .header .menu > ul > li {
    line-height: 1;
    margin: 0;
    display: block;
  }

  .header .menu > ul > li > a {
    line-height: 30px;

    padding: 18px 50px 0 0px;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .header .menu > ul > li > a i {
    position: absolute;
    height: 50px;
    width: 50px;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 50px;
    /* transform: rotate(-90deg); */
  }

  .header .menu .mobile-menu-head {
    display: flex;
    height: 50px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 501;
    position: sticky;
    background-color: #ffffff;
    top: 0;
  }

  .header .menu .mobile-menu-head .go-back {
    height: 50px;
    width: 50px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    line-height: 50px;
    text-align: center;
    color: #000000;
    font-size: 16px;
    display: none;
  }

  .header .menu .mobile-menu-head.active .go-back {
    display: block;
  }

  .header .menu .mobile-menu-head .current-menu-title {
    font-size: 15px;
    font-weight: 500;
    color: #000000;
  }

  .header .menu .mobile-menu-head .mobile-menu-close {
    height: 50px;
    width: 50px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    line-height: 50px;
    text-align: center;
    color: #000000;
    font-size: 25px;
  }

  .header .menu .menu-main {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .header .menu > ul > li .sub-menu.mega-menu,
  .header .menu > ul > li .sub-menu {
    visibility: visible;
    opacity: 1;
    position: absolute;
    box-shadow: none;
    margin: 0;
    padding: 15px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 65px;
    max-width: none;
    min-width: auto;
    display: none;
    transform: translateX(0%);
    overflow-y: auto;
  }

  .header .menu > ul > li .sub-menu.active {
    display: block;
  }

  @keyframes slideLeft {
    0% {
      opacity: 0;
      transform: translateX(100%);
    }

    100% {
      opacity: 1;
      transform: translateX(0%);
    }
  }

  @keyframes slideRight {
    0% {
      opacity: 1;
      transform: translateX(0%);
    }

    100% {
      opacity: 0;
      transform: translateX(100%);
    }
  }

  .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img {
    margin-top: 0;
  }

  .header
    .menu
    > ul
    > li
    .sub-menu.mega-menu-column-4
    > .list-item.text-center
    .title {
    margin-bottom: 20px;
  }

  .header
    .menu
    > ul
    > li
    .sub-menu.mega-menu-column-4
    > .list-item.text-center:last-child
    .title {
    margin-bottom: 0px;
  }

  .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item {
    flex: 0 0 100%;
    padding: 0px;
  }

  .header .menu > ul > li .sub-menu > ul > li > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a {
    display: block;
  }

  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul {
    margin-bottom: 15px;
  }

  .menu-overlay {
    position: fixed;
    /* background-color: rgba(0, 0, 0, 0.5); */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1098;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
  }

  .menu-overlay.active {
    /*visibility: visible;*/
    opacity: 1;
  }

  .menu-main {
    display: block;
  }

  .user-ic {
    color: #000;
  }

  .bg-zoom {
    animation: none !important;
  }
}

.menu-items-left {
  flex: 0 0 75%;
  display: flex;
  justify-content: end;
}

@media (max-width: 576px) {
}

.list-item a {
  display: block !important;
  padding-top: 15px;
  padding-bottom: 15px;
  color: #000;
  font-family: 'Manrope', sans-serif; font-weight: 400;
  text-decoration: none;
}

.list-item a:hover {
  text-decoration: none;
}

/************************** Hamburger Full Menu  ********************/

/*.button_container {*/
/*position: fixed;*/
/*  position: absolute;*/
/*  top: 5%;*/
/*  right: 13%;*/
/*  height: 27px;*/
/*  width: 35px;*/
/*  cursor: pointer;*/
/*  z-index: 100;*/
/*  transition: opacity 0.25s ease;*/
/*}*/

.button_container {
  /* position: fixed; */
  position: relative;
  top: 0;
  right: 0;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity 0.25s ease;
}

.button_container:before {
  content: "";
  position: absolute;
  border: solid 1px #ffffffa8;
  left: -10px;
  right: 0px;
  top: -12px;
  bottom: 0;
  height: 50px;
  width: 55px;
  border-radius: 5px;
}

.button_container:hover {
  opacity: 0.7;
}

.button_container.active .top {
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #fff;
}

.button_container.active .middle {
  opacity: 0;
  background: #fff;
}

.button_container.active .bottom {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #fff;
}

.button_container .top {
  background: #fff;
  border: none;
  height: 3.3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.35s ease;
  cursor: pointer;
}

.button_container .bottom {
  background: #fff;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.35s ease;
  cursor: pointer;
}

.button_container .middle {
  background: #fff;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.35s ease;
  cursor: pointer;
}

.button_container span:nth-of-type(2) {
  top: 11px;
}

.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay-burger {
  position: fixed;
  background: rgb(14 14 14 / 73%);
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s, height 0.35s;
  overflow: hidden;
  z-index: 6;
}

.overlay-burger.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}

.overlay-burger.open li {
  animation: fadeInRight 0.5s ease forwards;
  animation-delay: 0.35s;
}

.overlay-burger.open li:nth-of-type(2) { animation-delay: 0.4s; }
.overlay-burger.open li:nth-of-type(3) { animation-delay: 0.45s; }
.overlay-burger.open li:nth-of-type(4) { animation-delay: 0.5s; }
.overlay-burger.open li:nth-of-type(5) { animation-delay: 0.55s; }
.overlay-burger.open li:nth-of-type(6) { animation-delay: 0.6s; }
.overlay-burger.open li:nth-of-type(7) { animation-delay: 0.65s; }
.overlay-burger.open li:nth-of-type(8) { animation-delay: 0.7s; }
.overlay-burger.open li:nth-of-type(9) { animation-delay: 0.75s; }
.overlay-burger.open li:nth-of-type(10) { animation-delay: 0.8s; }
.overlay-burger.open li:nth-of-type(11) { animation-delay: 0.85s; }
.overlay-burger.open li:nth-of-type(12) { animation-delay: 0.9s; }
.overlay-burger.open li:nth-of-type(13) { animation-delay: 0.95s; }
.overlay-burger.open li:nth-of-type(14) { animation-delay: 1s; }
.overlay-burger.open li:nth-of-type(15) { animation-delay: 1.05s; }
.overlay-burger.open li:nth-of-type(16) { animation-delay: 1.1s; }
.overlay-burger.open li:nth-of-type(17) { animation-delay: 1.15s; }
.overlay-burger.open li:nth-of-type(18) { animation-delay: 1.2s; }
.overlay-burger.open li:nth-of-type(19) { animation-delay: 1.25s; }
.overlay-burger.open li:nth-of-type(20) { animation-delay: 1.3s; }

.overlay-burger nav {
  position: relative;
  /* height: 70%;
  top: 50%;
  transform: translateY(-50%); */
}

.overlay-burger ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}

.overlay-burger ul li {
  display: block;

  min-height: 50px;
  position: relative;
  opacity: 0;
}

.overlay-menu li {
  font-size: 23px;
}

.overlay-burger ul li a {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: 0.3s ease;
}

/* .overlay-burger ul li a:hover:after, .overlay-burger ul li a:focus:after, .overlay-burger ul li a:active:after {
 transform: translateY(-100%);
} */
/* .overlay-burger ul li a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: #dc0c0c;
  transition: 0.3s ease;
} */

.overlay-burger ul li a:hover {
  letter-spacing: 2px;
  transition: 0.3s ease;
  color: #d40801;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }

  100% {
    opacity: 1;
    left: 0;
  }
}

.heads {
  display: flex;
  justify-content: space-between;
}

.phone-contact-info h5 {
  color: #fff;
}

.phone-contact-info-data {
  padding-left: 12px;
}

.phone-contact-info span {
  color: #d3d3d3;
}

.contact-inof-desk h5 {
  color: #fff;
   font-weight: 400;
  margin: 0;
}

.hamburger-wrapper {
  margin-right: auto !important;
  margin-left: auto !important;
  width: 80%;
}

/************************** Hero Section Start ********************/

/* .hero-min {
	background-image: url(../img/hero-Photoroom.png);
	height: 750px;
	background-position: right;
	width: 100%;
	background-repeat: no-repeat;

} */

/* .hero-img-item{
	position: relative;
}
.hero-img-item:before {
     
        content: "";
        background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgb(19 19 19 / 48%) 100%);
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;

    } */

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 8.25rem !important;
  left: 10% !important;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: left !important;
}

.hero-img {
  padding-top: 40px;
}

.hero-caption h1 {
  
  font-weight: 500;
  font-size: 60px;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.hero-caption p {
  font-size: 19px;
  text-wrap-style: pretty;
}

.hero-caption-area {
  position: absolute;
  top: 22%;
  z-index: 1;
  left: 0;
  right: 0;
  /* width: 60%; */
}

.products-hero {
  position: relative;
}

.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 7px !important;
  height: 7px !important;
  border-radius: 10px !important;
  border: none !important;
}

.carousel-indicators .active {
  width: 40px !important;
  height: 7px !important;
}

.hero-caption {
  font-family: 'Space Grotesk', sans-serif; font-weight: 400;
  color: #fff;
  font-size: 60px;

  /* position: absolute; */
}

/* #myVideo {
	right: 0;
	position: absolute;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
  } */

.img-fluid {
  max-width: 100% !important;
  height: auto;
}

.shapes {
  position: relative;
}

.shape1 {
  position: absolute;
  right: 0;
  z-index: -1;
}

.shape2 {
  position: absolute;
  left: 0;
  z-index: -1;
}

.holder {
  position: relative;
}

.object {
  animation-name: animation1;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes animation1 {
  0% {
    right: 0;
    top: 0;
  }

  50% {
    right: 0px;
    top: 100px;
  }

  75% {
    right: 0px;
    top: 50px;
  }

  100% {
    right: 0;
    top: 0;
  }
}

.object2 {
  animation-name: animation2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes animation2 {
  0% {
    left: 0;
    top: 0;
  }

  50% {
    left: 0px;
    top: 80px;
  }

  75% {
    left: 0px;
    top: 40px;
  }

  100% {
    left: 0;
    top: 20px;
  }
}

.video-play-button {
  position: relative;
  z-index: 10;

  box-sizing: content-box;

  width: 32px;
  height: 44px;

  border-radius: 50%;
}

.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  /* border: dashed 2px #fff; */
  background-color: #fff;
  border-radius: 50%;
  animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 50%;
  transition: all 200ms;
}

.video-play-button img {
  position: relative;
  z-index: 3;
  max-width: 100%;
  width: auto;
  height: auto;
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

.icon-move {
  position: absolute;
  left: 36%;
  top: 30%;
}

.anim-text {
  font-size: 60px;
  letter-spacing: -8px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 400;
  color: #fff;
}

.anim-text span {
  display: inline-block;
  animation: pop 0.4s ease-in-out;
}

.anim-text span:nth-child(1) {
  animation-delay: 0.4s;
}

.anim-text span:nth-child(2) {
  animation-delay: 0.5s;
}

.anim-text span:nth-child(3) {
  animation-delay: 0.6s;
}

.anim-text span:nth-child(4) {
  animation-delay: 0.7s;
}

.anim-text span:nth-child(5) {
  animation-delay: 0.8s;
}

.anim-text span:nth-child(6) {
  animation-delay: 0.9s;
}

.anim-text span:nth-child(7) {
  animation-delay: 1s;
}

.anim-text span:nth-child(8) {
  animation-delay: 1.2s;
}

.anim-text span:nth-child(9) {
  animation-delay: 1.3s;
}

.anim-text span:nth-child(10) {
  animation-delay: 1.4s;
}

.anim-text span:nth-child(11) {
  animation-delay: 1.5s;
}

.anim-text span:nth-child(12) {
  animation-delay: 1.6s;
}

.anim-text span:nth-child(13) {
  animation-delay: 1.7s;
}

.anim-text span:nth-child(14) {
  animation-delay: 1.8s;
}

.anim-text span:nth-child(15) {
  animation-delay: 1.9s;
}

.anim-text span:nth-child(16) {
  animation-delay: 2s;
}

.anim-text span:nth-child(17) {
  animation-delay: 2.1s;
}

.anim-text span:nth-child(18) {
  animation-delay: 2.2s;
}

.anim-text span:nth-child(19) {
  animation-delay: 2.3s;
}

.anim-text span:nth-child(20) {
  animation-delay: 2.3s;
}

.anim-text span:nth-child(21) {
  animation-delay: 2.4s;
}

.anim-text span:nth-child(22) {
  animation-delay: 2.5s;
}

.anim-text span:nth-child(23) {
  animation-delay: 2.6s;
}

.anim-text span:nth-child(24) {
  animation-delay: 2.7s;
}

.anim-text span:nth-child(25) {
  animation-delay: 2.8s;
}

@keyframes pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.box {
  animation: pop 0.9s ease-in-out 3s, rotateAnim 2s linear 3s infinite;
  font-size: 60px;
  display: inline-block;

  font-family: 'Space Grotesk', sans-serif; font-weight: 400;
}

@keyframes rotateAnim {
  0% {
    transform: rotateX(40deg);
  }

  50% {
    transform: rotateX(60deg);
  }

  80% {
    transform: rotateX(360deg);
  }

  100% {
    transform: rotateX(0deg);
  }
}

@media (max-width: 576px) {
  .shapes {
    display: none;
  }

  .hero-caption h1 {
    font-size: 45px;
  }
}

.contact-inof-desk-phone-data {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: end;
}

/*.feature-wrap{*/
/*        background-color: #e20612;*/
/*}*/

.hero-features-area {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: solid #ffffff5c 1px;
  /* background-color: #e20612; */
  z-index: 2;
}

.features-item h5 {
  color: #fff;
  padding-left: 6px;
}

.features-item img {
  padding-left: 6px;
}

.features-item p {
  color: #fff;
   font-weight: 300;
  font-size: 16px;
  padding-left: 6px;
}

.features-item h5 {
   font-weight: 500;
  letter-spacing: 0;
}

.features-data {
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 20% !important;
}

.features-item {
  border-left: 1px #ffffff5c solid;
  padding-top: 20px;
}

/********************* About Section ***********************/

.about .image {
  height: 100%;
  max-height: 500px;
  border-radius: 10px;
  overflow: hidden;
}
.about .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-quote h2 {
  color: #2f2f2f;
  font-size: 42px;
}

.sub-point h4 {
  font-size: 17px;
  text-transform: uppercase;
}

.about-page-quote p {
  font-size: 18px;
  border-bottom: solid 1px #c1c1c1;
  padding-bottom: 15px;
}

.about-page-quote p:nth-last-child(1) {
  border: none;
}

.about {
  background-color: #f6eeee9c;
  padding-top: 80px;
}

.prime-btn {
  background-color: #212121;
  color: #fff;
  position: relative;
  border: none;
  box-shadow: none;
  padding: 10px 45px 15px 20px;
}

.prime-btn::after {
  position: absolute;
  content: "";
  background-color: #ffffff9c;
  width: 1px;
  height: 20px;
  /* left: 0; */
  right: 30px;
}

button {
  border: none;
}

.pc-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #333;
  border-radius: .25rem;
  color: #fff;
  padding: 8px 14px;
  text-decoration: none;
  font-size: 17px;
  transition: 0.3s ease;
  font-family: 'Open Sans', sans-serif; font-weight: 500;
}

.pc-btn .divider {
  width: 1px;
  height: 24px;
  background: #fff;
}

.pc-btn .arrow {
  font-size: 26px;
}

.pc-btn:hover {
  background: #000;
  color: #fff;
  padding-left: 24px;
}

.light-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  color: #000;
  padding: 7px 18px;
  text-decoration: none;
  font-size: 17px;
  transition: 0.3s ease;
  font-family: 'Open Sans', sans-serif; font-weight: 500;
}

.light-btn .divider {
  width: 1px;
  height: 24px;
  background: #000;
}

.light-btn .arrow {
  font-size: 26px;
  color: #000;
}

.light-btn:hover {
  background: #000;
  padding-left: 32px;
  color: #fff;
}

.about-page-img img {
  border-radius: 10px;
}

.about-page-quote {
  width: 87%;
  /*margin-left: auto;*/
}

.pc-btn-light {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  color: #2f2f2f;
  padding: 7px 18px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  transition: 0.3s ease;
   font-weight: 400;
  letter-spacing: 0;
}

.pc-btn-light .divider {
  width: 1px;
  height: 24px;
  background: #2f2f2f;
}

.pc-btn-light .arrow {
  font-size: 26px;
  font-weight: 300;
}

.pc-btn-light:hover {
  opacity: 0.8;
  padding-left: 32px;
}

.main-title h2 {
  color: #2f2f2f;
  font-size: 42px;
}

.our-gallery .main-title p {
  width: 84%;
}

.justify-around-wrapper {
  justify-content: end;
  display: flex;
  align-items: end;
}

/********************* Products Section ***********************/

.products {
  background-color: #f6eeee9c;
  padding-bottom: 80px;
  padding-top: 60px;
}

.products a {
  color: #000;
}

.products a:hover {
  color: #000;
}

.product-item img {
  width: 100% !important;
  transition: transform 0.6s ease;
  overflow: hidden;
  height: 280px !important;
  object-fit: cover;
  border-radius: 10px;
}

.product-item {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}

.product-item::after {
  position: absolute;
  content: "";
  background-image: linear-gradient(
    to bottom,
    #ffffff00,
    #ffffff00,
    #ffffff00,
    #00000085
  );
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 10px;
}

.product-item:hover img {
  transform: scale(1.15);
}
.products-quote p{
    width: 57%;
}
.product-title h5 {
  font-weight: 700;
  color: #fff;
  position: absolute;
  bottom: 10px;
  padding-left: 15px;
}

/* .zoom-item  img {
  width: 100%;
  transition: all .3s ease-in-out;
}

.zoom-item:hover   {
  transform: scale(1.2);
} */

/* .inner-img {
  transition: 0.3s;
}

.inner-img:hover {
  transform: scale(1.1);
} */

/********************* Sale Section ***********************/

.gradivisgallery {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  gap: 20px;
}

.placeholder {
  width: 100%;
  background: none !important;
  opacity: 1 !important;
}

.placeholder img {
  border: 1px solid #d1d1d1 !important;
  border-radius: 14px;
  width: 100% ;
  object-fit: cover;
  height: 400px;
}

.placeholder img:hover {
  cursor: zoom-in;
}

.gallery-images {
  width: 100%;
  display: flex;
  gap: 16px;
}

.gradivisimage {
  width: 100%;
}

.gradivisimage img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #d1d1d1 !important;
  border-radius: 14px;
  transition: 0.3s;
}

.gradivisimage img:hover {
  opacity: 0.7;
}

.close-icon-tab {
  position: absolute;
  top: 0;
  right: 25px;
  color: #dfdfdf;
  font-size: 26px;
  cursor: pointer;
}

.close-icon-tab i:hover {
  color: #fff;
}

.sale-banner {
    position: relative;
    top: -30px;
    border-radius: 16px;
    overflow: hidden;
}

/* Mobile Styling for Gallery */
/*@media only screen and (max-width: 749px) {  .gradivisgallery {*/
/*	flex-direction:column !important; */
/*	margin-left: 0vw !important;*/
/* } */
/* .gradivisimage img {*/
/*	width: 80% !important;*/
/* }*/
/* .placeholder {*/
/*	width: 80% !important;*/
/* }*/
/* .gallery-images {*/
/*	width: 80% !important; */
/*  margin-left: 7vw !important;*/
/*  float: none !important;*/
/*  column-count: 2 !important;*/
/*	-webkit-column-count: 2 !important;*/
/*	-moz-column-count: 2 !important;*/
/*  column-gap: 20px;*/

/* }*/
/*}*/

/* Begin Additional CSS for Zoom */
/* The Modal (background) */
.modals {
  display: none;
  /* Hidden by default */
  position: fixed;
  padding-top: 20px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  background-color: rgb(0 0 0);
  z-index: 9999;
}

/* Modal Content (image) */
.modal-option {
  margin: auto;
  display: block;
  width: 65%;
}

/* Add Animation */
.modal-option,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

.out {
  animation-name: zoom-out;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1);
  }

  to {
    -webkit-transform: scale(2);
  }
}

@keyframes zoom {
  from {
    transform: scale(0.4);
  }

  to {
    transform: scale(1);
  }
}

@keyframes zoom-out {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0);
  }
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Heading Style */

.gradivislogo {
  font-family: 'Vibur', cursive !important;
  text-align: center;
  height: 150px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  user-select: none;
  margin-top: 10vh;
}

.gradivislogo b {
  font: 400 60px 'Vibur', cursive;
  color: #fee;
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #8013dd, 0 0 0.5em #8013dd,
    0 0 0.1em #8013dd, 0 10px 3px #000;
}

.sale-section {
  background-color: #000;
  position: relative;
}

.sale-bg img {
  position: absolute;
  height: 500px;
  z-index: 0;
}

.vertical-gallery-wrap {
  display: flex;
  gap: 20px;
}

.sliding-gallery-item {
  position: relative;
}

.sale-announce {
  position: absolute;
  position: absolute;
  bottom: 20px;
  color: #fff;
  text-align: center;
}

.vertical-gallery {
  height: 100vh;
  overflow: hidden;
  position: relative;
  flex: 1;
}

.gallery-track {
  display: flex;
  flex-direction: column;
}

.gallery-track img {
  width: 100%;
  margin-bottom: 20px;
}

/* Scroll UP */
.vertical-gallery.up .gallery-track {
  animation: scrollUp 20s linear infinite;
}

/* Scroll DOWN */
.vertical-gallery.down .gallery-track {
  animation: scrollDown 20s linear infinite;
}

/* Keyframes */
@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes scrollDown {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0);
  }
}

/********************* About Section ***********************/

.sale-title {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  height: 100%;
  padding-bottom: 50px;
  padding-top: 50px;
  position: relative;
}

.sale-title h2 {
  color: #fff;
  font-size: 60px;
  font-weight: 700;
}

.sale-title h3 {
  color: #fff;
  font-size: 19px;
  text-transform: uppercase;
}

.spn-sale {
  color: #d40801;
  letter-spacing: -1px;
}

.sale-title p {
  color: #fff;
  width: 75%;
  font-size: 17px;
}

.bg-zoom {
  background-size: 100%;
  background-position: center;
  animation: bgZoom 12s ease-in-out infinite;
}

@keyframes bgZoom {
  0% {
    background-size: 100%;
  }

  50% {
    background-size: 110%;
  }

  100% {
    background-size: 100%;
  }
}

.center-title p {
  margin-left: auto;
  margin-right: auto;
}

.gallery-area {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.gallery-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 10px;
  margin-top: 20px;
  cursor: pointer;
}

.gallery-box img {
  transition: transform 0.6s ease;
  overflow: hidden;
  object-fit: cover;
  height: 290px;
  width: 100%;
  border-radius: 10px;
}

.gallery-box i {
  color: #d40801;
}

.gallery-box .label {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top-right-radius: 20px;
  font-weight: 700;

  width: 200px;
  transition: width 0.5s ease, padding 0.4s ease;
}

.gallery-box:hover img {
  transform: scale(1.15);
}

.gallery-box:hover .label {
  width: 75%;
  padding-right: 28px;
}

.gallery-burg span {
  color: #000 !important;
}

.gallery-burg a {
  color: #c96161 !important;
}

.gallery-burg a {
  color: #707070 !important;
  text-decoration: underline !important;
}

.gallery-inner-caption h1 {
  color: #000 !important;
}

.gallery-inner-caption P {
  color: #000 !important;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  font-size: 30px;
  color: white;
  padding: 15px;
  cursor: pointer;
  user-select: none;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.demo {
  opacity: 0.6;
}

.demo.active {
  opacity: 1;
}

/* âœ… Grid Hover Zoom */
.gallery-img {
  transition: transform 0.4s ease;
}

/* âœ… Modal Image Zoom Animation */
.mySlides img {
  transition: transform 0.4s ease;
  cursor: zoom-in;
}

/* âœ… Click Zoom Active */
.mySlides img.zoomed {
  transform: scale(1.8);
  cursor: zoom-out;
}

/* âœ… Thumbnail Active */
.demo {
  opacity: 0.6;
  transition: 0.3s;
}

.demo.active {
  opacity: 1;
  border: 2px solid #fff;
}

.modal-content {
  user-select: none;
  touch-action: pan-y;
}

.modal-content {
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
}

.modal-open {
  overflow: hidden;
}

.fullscreen-btn {
  border: none !important;
  background-color: transparent !important;
  color: #fff;
  opacity: 0.4;
  font-size: 20px;
}

.download-btn {
  border: none !important;
  background-color: transparent !important;
  color: #fff;
  opacity: 0.4;
  font-size: 19px;
}

.modal-cls {
  padding-top: 10px !important;
}

.download-btn:hover {
  opacity: 1;
}

.modal-main-grid .modal-body {
  background-color: #181818;
}

#thumb-wrapper img {
  height: 60px;
  width: 100%;
  object-fit: cover;
}

.thumb-grid {
  position: fixed;
  bottom: 0px;
  width: 100%;
  left: 0;
  right: 0;
  background-color: #181818 !important;
}

.img-count {
  color: #fff;
  opacity: 0.4;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.modal-arrow {
  color: #fff;
  opacity: 0.4;
  font-size: 22px;
}

.modal-arrow:hover {
  opacity: 1;
}

.modal-nav {
  position: relative;
}

.modal-nav::after {
  position: absolute;
  content: "";
  background-color: #00000026;
  height: 60px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

.modal-close-area {
  z-index: 9;
}

/********************* Visit showroom Section ***********************/

.visit-our-showroom {
  background-image: url(../img/visit.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  padding: 80px 0;
}

.contact-box {
  background-color: #3c3c3c;
  color: #fff;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border: 2px solid #797979;
}
.contact-box img {
  height: 34px;
}

.map-w {
  height: 100%;
}
.map-w iframe {
  border-radius: 10px;
}

.visit-quote h2 {
   font-weight: 400;
  color: #fff;
  font-size: 50px;
  text-wrap-style: pretty;
}

.visit-spn {
  font-weight: 700;
}

.visit-quote p {
  color: #fff;
}




.contact-right-row h5 {
  color: #fff;
   font-weight: 400;
  display: flex;
  gap: 10px;
  font-size: 16px;
  margin: 10px 0;
}

.visit-spn {
}

.contact-inof-desk-phone-data:hover a {
  color: red !important;
}

/********************* Blog Section ***********************/
.blog-item span {
   font-weight: 400;
  color: gray;
}

.blog-item h5 {
  color: #2f2f2f;
  margin-top: 15px;
  font-size: 18px;
   font-weight: 500;
}

.blog-item a {
  overflow: hidden;
}

.blog-item {
  overflow: hidden !important;
  transition: 0.3s ease;
}

.blog-item img {
  width: 100% !important;
  transition: 0.3s ease;
  height: 240px;
  object-fit: cover;
  overflow: hidden;
}

/*.blog-item:hover img{*/
/*	transform: scale(1.15);*/
/*}*/

/*.blog-item:hover img{*/
/*	transform: scale(1.15);*/
/*}*/
.title-area {
  display: flex;

  justify-content: space-between;
}

.blog .main-title p {
  width: 80%;
}

/********************* Footer Section ***********************/

footer {
  position: relative;
  background-color: #000;
  padding-bottom: 30px;
}

.ft-shape img {
  position: absolute;
  right: 0;
  height: 400px;
  z-index: 0;
  bottom: 25px;
}

/* footer::after{
	content: '';
    background-color: #000;
    filter: blur(26px);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
} */

footer p {
  color: #fff;
  font-size: 14px;
  position:relative;
}

.quick-links ul {
  padding-left: 0 !important;
}

.quick-links li {
  color: #fff;
   font-weight: 400;
  font-size: 14px;
  padding-top: 10px;
}

.quick-links a {
  color: #fff;
}

.quick-links a:hover {
  color: #d40801;
}

.footer-grid {
  border-top: solid 1px #ffffff4b;
}

footer .quick-links h6 {
  color: #fff;
   font-weight: 400;
  font-size: 13px;
  margin-top: 10px;
}

.form-area {
  position: relative;
}

.arrow-right {
  position: absolute;
  color: #fff;
  right: 12px;
  bottom: 12px;
}

.quick-links span {
  color: #fff;
  font-size: 18px;
}

footer h5 {
  color: #9d9d9d;
  font-size: 16px;
   font-weight: 400;
}

.input-item {
  background: transparent;
  border: solid 1px #fff;
  color: #fff;
  padding-left: 10px;
  width: 100%;
  padding: 7px;
}

.copyright p {
  color: #ffffff78;
  font-size: 12px;
  position: relative;
}

.footer-bottom h5 {
  font-size: 14px;
}

.footer-row {
  border-bottom: solid 1px;
}

/************* About Page */
.inner-banner-wrapper {
  min-height: 50vh;
  position: relative;
  padding: 60px 0;
}

.inner-caption h1 {
  font-weight: 500;
  font-size: 48px;
  color: #fff;
  letter-spacing: 0px;
}

.inner-caption i {
  font-size: 13px;
}

.current-p {
  color: #d3d3d3 !important;
}

.inner-caption p {
  font-size: 17px;
  color: #fff;
}

.inner-caption-area {
  position: absolute;
  bottom: 50px;

  z-index: 1;
  left: 0;
  right: 0;
  /* width: 60%; */
}

.contact-inner-area {
  position: absolute;
  top: 21% !important;

  z-index: 1;
  left: 0;
  right: 0;
  /* width: 60%; */
}

@media screen and (max-width: 600px) {
  .timeline {
    margin: 50px auto;
  }

  .timeline::after {
    left: 31px;
  }

  .containr {
    width: 100%;
    padding-left: 80px;
    padding-right: 25px;
  }

  .right-container {
    left: 0;
  }

  .left-container img {
    left: 0px;
  }

  .right-container img {
    left: 3px;
  }
}

.fade-bg-dark {
  position: absolute;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

/**********************************Tile Product Page*******************************/

/* Section spacing */
.product-section {
  padding: 40px 0;
}

/* Grid */
/*.product-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));*/
/*  gap: 25px;*/
/*}*/

/* Card */
.product-card {
  background: #fff;

  padding: 18px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: 0.3s ease;
  border: 1px solid #eee;
}

.inner-caption a {
  color: #fff;
}

.inner-caption a:hover {
  color: #fff;
}

.swiper-button-next,
.swiper-button-prev {
  width: 45px !important;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
}

.product-card a {
  color: #212529 !important;
}

/* Badges */
.badges {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.badge {
  padding: 4px 10px;
  border-radius: 25px;
  font-size: 13px;
  color: #fff;
  font-weight: 600;
}

.badge.sale {
  background: #ff7171;
}

.badge.new {
  background: #47c085;
}

/* Image */
.product-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

/* Title */
.product-title {
  font-size: 17px;
  font-weight: 600;
  margin-top: 14px;
  width: 325px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Description */
.product-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin: 6px 0 10px;
}

/* Ratings */
.rating {
  color: #f6b100;
  font-size: 13px;
  margin-bottom: 10px;
}

.rating span {
  color: #000;
  font-weight: bold;
}

/* Dropdown */
.variant-select {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  margin-bottom: 12px;
  font-size: 15px;
}

/* Price */
.price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.price .current {
  font-size: 18px;
  font-weight: 700;
}

.price .old {
  color: #888;
  text-decoration: line-through;
  font-size: 14px;
}

/* Add to Cart Button */
.cart-btn {
  padding: 5px 15px;
  background: #c9a15b;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: 0.3s ease;
  font-family: 'Open Sans', sans-serif; font-weight: 500;
}

.cart-btn:hover {
  background: #333;
}

.product-grid h5 {
   font-weight: 400;
  font-size: 18px;
}

/************************** Product Details Page  **************************/

.swiper-container,
.swiper-container * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.swiper-container .swiper-no-swiping .swiper-button-prev,
.swiper-container .swiper-no-swiping .swiper-button-next {
  opacity: 0;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.1;
}

.product-gallery .product-photos-side,
.product-gallery .product-photo-main {
  position: relative;
}

.product-gallery .product-photo-main {
  margin-bottom: 30px;
}

.product-gallery .product-photos-side .swiper-container {
  height: 70px;
}

.product-gallery .product-photo-main .swiper-container {
  height: 450px;
}

.product-gallery .product-photos-side .swiper-slide {
  width: 150px;
  opacity: 0.4;
  transition: 225ms opacity ease-in-out;
}

.product-gallery .product-photos-side .swiper-slide.swiper-slide-active {
  opacity: 1;
}

.product-gallery .swiper-container {
  position: static;
}

.product-gallery .swiper-slide {
  cursor: pointer;
  text-align: left;
}

.product-gallery img {
  /*max-height: 100%;*/
  /*max-width: 100%;*/
  /*max-width: unset !important;*/
  max-height: unset !important;
}

/* full screen product gallery */

.product-gallery-full-screen {
  position: fixed;
  background: #000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  z-index: 999999;
  transition: 350ms opacity ease-in-out;
}

.product-gallery-full-screen.opened {
  opacity: 1;
  overflow-y: scroll;
  pointer-events: auto;
}

.product-gallery-full-screen .swiper-container {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.product-gallery-full-screen .swiper-slide {
  overflow: hidden;
}

.product-gallery-full-screen .swiper-slide img,
.product-photos-side .swiper-slide img {
  /*max-height: 100%;*/
  /*max-width: 100%;*/
}

.product-gallery-full-screen .swiper-slide img {
  cursor: zoom-in;
  transition: 350ms -webkit-transform ease-in-out, 350ms transform ease-in-out;
}

.product-gallery-full-screen .swiper-button-prev,
.product-gallery-full-screen .swiper-button-next {
  background: rgba(0, 0, 0, 0.4);
  color: #aaa;
  transition: 250ms opacity ease-in-out, 150ms color ease-in-out;
}

.main-product-details:not(:hover)
  .product-gallery-full-screen
  .swiper-button-prev,
.main-product-details:not(:hover)
  .product-gallery-full-screen
  .swiper-button-next {
  opacity: 0;
  transition-delay: 1000ms;
}

.main-product-details:hover .product-gallery-full-screen .swiper-button-prev,
.main-product-details:hover .product-gallery-full-screen .swiper-button-next {
  transition-delay: 0ms;
}

.product-gallery-full-screen .swiper-button-prev:hover,
.product-gallery-full-screen .swiper-button-next:hover {
  color: #fff;
}

.product-gallery-full-screen .swiper-button-prev svg,
.product-gallery-full-screen .swiper-button-next svg {
  position: absolute;
  fill: currentColor;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.gallery-nav {
  position: absolute;
  background: rgba(0, 0, 0, 1);
  color: #aaa;
  padding: 10px 15px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  transition: 250ms opacity ease-in-out;
}

.product-gallery-full-screen .gallery-nav .close {
  position: absolute;
  top: 50px;
  right: 20px;
  z-index: 10000;
  /* higher than fullscreen */
  cursor: pointer;
}

.product-gallery-full-screen .gallery-nav .close svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}

.main-product-details:not(:hover) .gallery-nav {
  opacity: 0;
  transition-delay: 1000ms;
}

.main-product-details:hover .gallery-nav {
  opacity: 0.65;
  transition-delay: 0ms;
}

.gallery-nav ul,
.gallery-nav li {
  list-style: none;
}

.gallery-nav ul {
  float: right;
}

.gallery-nav li {
  float: left;
  color: #aaa;
  cursor: pointer;
  margin-left: 15px;
  transition: 150ms color ease-in-out;
}

.gallery-nav li:hover {
  color: #fff;
}

.gallery-nav svg {
  display: block;
  fill: currentColor;
  height: 24px;
  width: 24px;
}

.gallery-nav .zoom.zoom-out svg.zoom-icon-zoom-in {
  display: none;
}

.gallery-nav .zoom svg.zoom-icon-zoom-out {
  display: none;
}

.gallery-nav .zoom.zoom-out svg.zoom-icon-zoom-out {
  display: block;
}

.gallery-nav .fullscreen.leavefs svg.fs-icon {
  display: none;
}

.gallery-nav .fullscreen svg.fs-icon-exit {
  display: none;
}

.gallery-nav .fullscreen.leavefs svg.fs-icon-exit {
  display: block;
}

.gallery-nav .swiper-pagination {
  position: static;
  float: left;
  width: auto;
  line-height: 24px;
}

@media (max-width: 1025px) {
  article {
    display: none;
  }

  /*.container {*/
  /*  padding: 0;*/
  /*}*/
}

.gallery-box-wrapper a {
  color: #000;
}

.gallery-box-wrapper a:hover {
  color: #000;
}

.cvd {
  border-left: 1px solid;
}

.dimension-box {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 18px 0;
  display: flex;
  gap: 40px;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon {
  font-size: 22px;
  opacity: 0.9;
}

.size-options {
  display: flex;
  gap: 12px;
}

.size-btn {
  padding: 7px 26px;
  border: 2px solid #bebebeb0;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
  color: #232323;
  transition: 0.2s ease;
  user-select: none !important;
}

.size-btn:hover {
  background: transparent;
  border: #e20612 2px solid;
}

.size-btn.active {
  color: #717171;
  border: #e20612 2px solid;
}

.left-details-product {
  width: 92%;
  margin-left: auto;
}

.in-stock {
  background: rgb(76 175 80 / 12%);
  color: #44a747;
  padding: 5px 14px 9px;
  border-radius: 50px;
  font-weight: 500;
}

.buy-btn {
  padding: 10px 15px;
  background: #c9a15b;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: 0.3s ease;
  width: 100%;
  border-radius: 5px;
  font-size: 19px;
}

.buy-btn-tw {
  padding: 10px 15px;
  background: transparent;
  color: #111;
  border: solid 1px #6b6b6b;
  cursor: pointer;
  transition: 0.3s ease;
  width: 100%;
  border-radius: 5px;
  font-size: 19px;
  margin-top: 7px;
}

.share-wrapper {
  position: relative;
  display: inline-block;
}

.share-toggle {
  display: none;
}

/* Share icon button */
.share-btn {
  cursor: pointer;
  padding: 4px;
}

/* Popup box */
.share-popup {
  position: absolute;
  right: 0;
  top: 32px;
  width: 55px;
  padding: 12px 0;
  background: #fff;
  border: 1px solid #d8d6d6;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;

  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: 0.25s ease;
}

/* Toggle ON */
.share-toggle:checked ~ .share-popup {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Icon styling */
.icon {
  width: 100%;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.icon:hover svg path,
.icon:hover svg rect {
  stroke: #d9a74c !important;
  fill: #d9a74c33 !important;
}

/* Price */
.buy-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.buy-price .current {
  font-size: 30px;
  font-weight: 700;
  color: #b68e49;
}

.buy-price .old {
  color: #888;
  text-decoration: line-through;
  font-size: 18px;
}

.card0 {
  width: 100%;
  background: rgb(212 187 187 / 37%);
  border: 1px solid #b7b7b7;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
  padding: 18px 18px;
}

.top-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 12px 4px;
}

.bottom-line {
  align-items: center;
  gap: 12px;
  padding: 0px 4px 12px 4px;
  border-top: 1px solid #b7b7b7;
  margin-top: 10px;
}

.check {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(244 67 54 / 19%);
  color: #d40801;
}

.headline {
  font-weight: 700;
  color: #111;
}

.sub {
  color: #6b6b6b;
  font-size: 14px;
}

.section-delivery {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 14px 4px;
}

.section-delivery .icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: -3px;
  display: inline-grid;
  place-items: center;
  color: #d40801;
}

.section-delivery .content {
  flex: 1;
}

.section-delivery .chev {
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  color: #6b6b6b;
}

.delivery-list {
  margin: 8px 0 0 0;
  padding: 0 0 0 0;
  list-style: none;
}

.delivery-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
}

.bullet {
  margin-top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d40801;
  opacity: 0.9;
  flex: 0 0 8px;
}

.delivery-text {
  font-weight: 600;
  color: #111;
}

.delivery-sub {
  color: #6b6b6b;
  font-size: 13px;
  margin-left: 2px;
}

@media (max-width: 640px) {
  .card {
    width: 100%;
  }

  .top-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

.contacts-data {
  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;
}

.contact-form-field {
  background: transparent !important;

  border: 1px #00000075 solid !important;

  padding: 10px;
  border: none;
  color: #000 !important;

  width: 100%;

  font-size: 15px;
}

.required-fm {
  color: #d40801;
}

input[type]:focus {
  border-bottom: 2px solid #d40801 !important;

  outline: 0px !important;
}

.form-select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none !important;
  border-bottom: 2px solid #d40801 !important;
}

select.custom-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 14px 46px 14px 14px;
  /* room for arrow */
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 16px;
  color: var(--muted);
  background: white;
  box-shadow: none;
  outline: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  pointer-events: none;
  background-image: radial-gradient(
      circle at 35% 40%,
      rgba(0, 0, 0, 0.15) 0 10%,
      transparent 11%
    ),
    linear-gradient(
      135deg,
      transparent 45%,
      #333 45%,
      #333 55%,
      transparent 55%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.55;
}

/* when select is open (FF uses :focus) */
select.custom-select:focus {
  border-color: #cfcfcf;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.select-wrap {
  width: 100%;
}

textarea:focus {
  border: 2px solid #d40801 !important;

  outline: 0px !important;
}

.form-select {
  border: 1px #00000075 solid !important;
  border-radius: 0px !important;
  color: #898989 !important;
}

.contact-form-field-area label {
  padding-top: 20px;
  font-size: 18px;
}

.contact-form-field-area {
  border: solid #8080807a 1px;
  background-color: #fff;
  padding: 20px 30px;
  padding-bottom: 40px;
}

.contact-form-field-area .form-select {
    border: 1px #00000075 solid !important;
    padding: 10px;
    border: none;
    color: #000 !important;
    width: 100%;
    font-size: 15px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 25px 0;
}

.icon0 {
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon0 i {
  font-size: 20px;
  color: #c5a47d;
  /* gold shade similar to UI */
}

.contact-item p {
  margin: 0;
  line-height: 1.5;
  max-width: 500px;
  color: #fff;
}

.line {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/************************** Gallery Image page  **************************/

.main-gallery .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
}

.main-gallery .card {
  border: none;
}

.main-gallery .card-image {
  background: #ffffff;
  display: block;
  padding-top: 70%;
  position: relative;
  width: 100%;
}

.main-gallery .card-image img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 600px) {
  .main-gallery .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
}



/************************** Blog Details Page  **************************/
.pro-row a {
  color: #000000 !important;
}

.blog-view-item {
  width: 70%;
  margin-right: auto;
  margin-left: auto;
}

.blog-view-item h5 {
  color: gray;
  font-size: 15px;
   font-weight: 300;
}

.blog-view-item span {
  font-size: 20px;
   font-weight: 400;
}

.blog-view-item img {
  margin-bottom: 10px;
}

.trade-registration {
  margin-left: auto;
  margin-right: auto;
}

/************************** By Category Page  **************************/

.category-item img {
  transition: transform 0.6s ease;
  overflow: hidden;
  height: 280px;
  object-fit: cover;
  width: 100%;
}

.category-item {
  overflow: hidden;
  position: relative;
}

.category-item:hover img {
  transform: scale(1.15);
}

.category-title h5 {
   font-weight: 400;
}

.category-title {
  position: absolute;
  bottom: 0;
  left: 20px;
  color: #fff;
  z-index: 1;
}

.category-item::after {
  content: "";
  position: absolute;

  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 0%) 0%,
    rgb(0 0 0 / 52%) 100%
  );
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.type-quote {
  background-color: #fff;

  padding: 10px;
  padding-bottom: 20px;
}

.shop-type-quote p {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

.by-title h5 {
  font-size: 27px;
  color: #212529;
}

.expert-team-quote {
  padding: 35px;
}

.expert-team-quote h2 {
  color: #fff;
  font-size: 50px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.expert-team-quote h5 {
  color: #fff;
  font-size: 28px;
}

.expert-team-quote {
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding-top: 35px;
  padding-bottom: 65px;
}

.expert-team-quote h1 {
  font-size: 55px;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
}

.expert-team-quote button {
  background-color: transparent !important;
  color: #fff;
  border: solid #fff 2px;
}

.expert-team-quote button:hover {
  background-color: #fff;
}

.quote-span {
  font-size: 35px;
}

.expert-team-quote a {
  font-weight: 500;
  color: #fff;
  width: fit-content;
}

.expert-team-quote a:hover {
  font-weight: 500;
  color: #fff;
}

.finance-available p {
  text-transform: uppercase;
  font-size: 18px;
}

.trade-caption-area {
  position: absolute;
  top: 12%;
  z-index: 1;
  left: 0;
  right: 0;
  /* width: 60%; */
}

.feature-by-area {
  background-color: #fff;
  padding: 20px;
}

.inner-galery-caption {
  position: inherit;
}

.features-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.features-box img {
  height: 56px;
}

.features-box h5 {
  margin: 0;
}

.logins-wrapper {
  width: 50% !important;
  margin-left: auto;
  margin-right: auto;
}

.feature-by-area-about {
}

.features-box-about {
  background-color: #fff;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  border: solid 1px #ffe4e4;
}

.sale-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
}

.sale-wrapper h2 {
  color: #fff;
  font-size: 40px;
}

.sale-wrapper p {
  color: #fff;
  padding-top: 10px;
  padding-bottom: 20px;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

.call-to {
  color: #fff;
  padding-top: 20px;
}

.call-to a {
  color: #fff;
}

.call-to a:hover {
  color: #fff;
}

/************************** other Mediaquey  **************************/

@media (max-device-width: 768px) {
    .tab-none{
        display: none!important;
    }
}


@media (max-width: 576px) {
    
    .products-quote p{
    width: 100%;
}
    
    
    .carousel-indicators{
        display: none;
    }
    
.placeholder img {
  max-width: 100% !important;
}
  .sale-banner {
    top: 0px !important;
  }

  .features-wrapper {
    width: 100%;
  }

  .col-mob {
    flex: 0 0 auto;
    width: auto;
  }

  .contact-hero-area {
    height: 210vh !important;
  }

  .trade-registration {
    width: 100%;
  }

  .hamburger-menu-area {
    display: none;
  }

  .main-title p {
    width: 100%;
  }

  .shop-type-quote p {
    width: 100%;
  }

  .left-details-product {
    width: 100%;
    margin-left: unset;
  }

  .sort-container {
    display: block;
  }

  .title-area {
    display: block;
  }

  .d-none-mob {
    display: none !important;
  }

  .project-name h4 {
    font-size: 14px;
  }

  .project-name span {
    font-size: 11px;
  }

  .testimonial-item p {
    font-size: 16px;
  }

  .testimonial-item span {
    font-size: 12px;
  }

  .header .menu > ul > li > a {
    color: #777777;
    text-align: left;
  }

  .team h2 {
    width: 100%;
  }

  .contact-info {
    width: 100% !important;
  }

  .about-caption h5 {
    font-size: 26px;
  }

  .about-caption {
    width: 100%;
  }

  .faq-content {
    width: 100%;
  }

  .lets-connect-area {
    width: 100%;
  }

  .set {
    display: block !important;
    width: 100%;
  }

  .join {
    display: block !important;
  }

  .quick-contact .area {
    margin-left: 0px !important;
  }

  .curve-bg {
    display: none !important;
  }

  .integrations-grid .caption {
    width: 100%;
  }

  .integrations-grid .caption h2 {
    font-size: 34px;
  }

  .hero-min {
    height: 350px;
  }

  .anim-text {
    font-size: 54px;
    line-height: 66px;
    margin-bottom: 15px;
  }

  .set img {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  .curve-shape {
    width: 100%;
  }

  .disposal h2 {
    font-size: 40px;
  }

  .projects .caption h2 {
    font-size: 40px;
  }

  .webflow-feature .caption h2 {
    font-size: 40px;
  }

  .webflow-services .caption h2 {
    font-size: 40px;
  }

  .challenges .challenges-grid h2 {
    font-size: 40px;
  }
}

@media (min-width: 1200px) {
  /* .container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl {
		max-width: 1400px !important;
	} */
  .d-none-desk {
    display: none !important;
  }
}


.btn-red {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #333;
  background: #e20612;
  color: #fff;
  padding: 8px 14px;
  text-decoration: none;
  font-size: 17px;
  transition: 0.3s ease;
  font-weight: 500;
  width: fit-content;
}
.btn-red .divider {
  width: 1px;
  height: 24px;
  background: #fff;
}
.btn-red .arrow {
  font-size: 26px;
}
.btn-red:hover {
  background: #000;
  color: #fff;
  padding-left: 24px;
}

.carousel-item {
  height: 100vh !important;
  max-height: 1000px !important;
  min-height: 740px !important;
}
.carousel-item .caro-bg {
  height: 105vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.carousel-item .caro-bg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.carousel-item .caro-bg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 5px;
  margin-bottom: 10px;
  color: #fff;
  background: #e206123b;
  backdrop-filter: blur(10px);
}

.breadcrumb a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.breadcrumb a:hover {
  color: #a4a4a4;
}

.breadcrumb .current-p {
  color: #ccc;
  font-weight: bold;
}

.breadcrumb i {
  font-size: 12px;
}
.trade-form {
  position: relative;
  z-index: 10;
}