body {
  font-family: 'Outfit-Regular', sans-serif;
  color: #000;

}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: 'Aspekta-500', sans-serif; */
  font-family: 'Urbanist', sans-serif;
  margin-top: 0px;

}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 70px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

nav .navbar {
  height: 100%;
  max-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  /* background: red; */
  padding: 0 100px;
}

.navbar .logo a {
  font-size: 30px;
  color: #000;
  text-decoration: none;
  font-weight: 600;
}

.logo img {
  width: 150px;
}

nav .navbar .nav-links {
  line-height: 70px;
  height: 100%;
}

nav .navbar .links {
  display: flex;
}

nav .navbar .links li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
}

nav .navbar .links li a {
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  color: #000;
  font-size: 15px;
  font-weight: 500;
}

.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow {
  transform: rotate(180deg);
}

nav .navbar .links li .arrow {
  /* background: red; */
  height: 100%;
  width: 22px;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  color: #fff;
  transition: all 0.3s ease;
}

nav .navbar .links li .sub-menu {
  position: absolute;
  top: 70px;
  left: 0;
  line-height: 40px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
  padding-left: 0px;
}

nav .navbar .links li:hover .htmlCss-sub-menu,
nav .navbar .links li:hover .js-sub-menu {
  display: block;
}

.navbar .links li .sub-menu li {
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar .links li .sub-menu a {
  color: #000;
  font-size: 15px;
  font-weight: 500;
}

.navbar .links li .sub-menu .more-arrow {
  line-height: 40px;
}

.navbar .links li .htmlCss-more-sub-menu {
  /* line-height: 40px; */
}

.navbar .links li .sub-menu .more-sub-menu {
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}

.links li .sub-menu .more:hover .more-sub-menu {
  display: block;
}

.navbar .search-box {
  position: relative;
  height: 40px;
  width: 40px;
}

.navbar .search-box i {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.navbar .search-box .input-box {
  position: absolute;
  right: calc(100% - 40px);
  top: 80px;
  height: 60px;
  width: 300px;
  background: #3E8DA8;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}

.navbar.showInput .search-box .input-box {
  top: 65px;
  opacity: 1;
  pointer-events: auto;
  background: #3E8DA8;
}

.search-box .input-box::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  background: #3E8DA8;
  right: 10px;
  top: -6px;
  transform: rotate(45deg);
}

.search-box .input-box input {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  height: 35px;
  width: 280px;
  outline: none;
  padding: 0 15px;
  font-size: 16px;
  border: none;
}

.navbar .nav-links .sidebar-logo {
  display: none;
}

.navbar .bx-menu {
  display: none;
}

@media (max-width:920px) {
  nav .navbar {
    max-width: 100%;
    padding: 0 25px;
  }

  nav .navbar .logo a {
    font-size: 27px;
  }

  nav .navbar .links li {
    padding: 0 10px;
    white-space: nowrap;
  }

  nav .navbar .links li a {
    font-size: 15px;
  }
}

@media (max-width:800px) {
  nav {
    /* position: relative; */
  }

  .navbar .bx-menu {
    display: block;
  }

  nav .navbar .nav-links {
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    max-width: 270px;
    width: 100%;
    background: #3E8DA8;
    line-height: 40px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    z-index: 1000;
  }

  .navbar .nav-links .sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sidebar-logo .logo-name {
    font-size: 25px;
    color: #fff;
  }

  .sidebar-logo i,
  .navbar .bx-menu {
    font-size: 25px;
    color: #fff;
  }

  nav .navbar .links {
    display: block;
    margin-top: 20px;
  }

  nav .navbar .links li .arrow {
    line-height: 40px;
  }

  nav .navbar .links li {
    display: block;
  }

  nav .navbar .links li .sub-menu {
    position: relative;
    top: 0;
    box-shadow: none;
    display: none;
  }

  nav .navbar .links li .sub-menu li {
    border-bottom: none;

  }

  .navbar .links li .sub-menu .more-sub-menu {
    display: none;
    position: relative;
    left: 0;
  }

  .navbar .links li .sub-menu .more-sub-menu li {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .links li:hover .htmlcss-arrow,
  .links li:hover .js-arrow {
    transform: rotate(0deg);
  }

  .navbar .links li .sub-menu .more-sub-menu {
    display: none;
  }

  .navbar .links li .sub-menu .more span {
    /* background: red; */
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }

  .links li .sub-menu .more:hover .more-sub-menu {
    display: none;
  }

  nav .navbar .links li:hover .htmlCss-sub-menu,
  nav .navbar .links li:hover .js-sub-menu {
    display: none;
  }

  .navbar .nav-links.show1 .links .htmlCss-sub-menu,
  .navbar .nav-links.show3 .links .js-sub-menu,
  .navbar .nav-links.show2 .links .more .more-sub-menu {
    display: block;
  }

  .navbar .nav-links.show1 .links .htmlcss-arrow,
  .navbar .nav-links.show3 .links .js-arrow {
    transform: rotate(180deg);
  }

  .navbar .nav-links.show2 .links .more-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width:370px) {
  nav .navbar .nav-links {
    max-width: 100%;
  }
}


.container {
  width: 1200px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.section-add {
  padding: 100px 60px;
}

body {
  margin: 0;
  font-family: 'Urbanist', sans-serif;
  color: #000;
}

h2 {
  /* line-height: 1.1; */
  font-size: 42px !important;
  padding-bottom: 25px;
  font-weight: 600 !important;
}

h3 {
  font-weight: 500;
  font-size: 25px;
  font-family: 'Urbanist', sans-serif !important;

}

.text-3 {
  font-size: 17px;
  text-align: center;
}

h4 {
  font-weight: 400;
  font-size: 20px;
  font-family: 'Urbanist', sans-serif;

}

h5 {
  font-family: 'Urbanist', sans-serif !important;
  color: #000;

}

p {
  font-family: poppins;
  font-size: 17px;
  font-weight: 300;
  font-family: 'Outfit-Regular', sans-serif;
}

span {

  font-family: 'Outfit-Regular', sans-serif;
}

a {
  color: #000;
  font-family: 'Outfit-Regular', sans-serif;
}

li {

  font-family: 'Outfit-Regular', sans-serif;
}

.hero-slider {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 0;
}

@media (max-width: 991px) {
  .hero-slider {
    height: 600px;
  }
}

@media (max-width: 767px) {
  .hero-slider {
    height: 500px;
  }
}

.hero-slider .swiper-slide {
  overflow: hidden;
  color: #fff;
}

.hero-slider .swiper-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.hero-slider .slide-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
}

.slide-bg-image {
  /* background: linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)); */
}

.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
  background: transparent;
  width: 55px;
  height: 55px;
  line-height: 53px;
  margin-top: -30px;
  text-align: center;
  border: 2px solid #d4d3d3;
  border-radius: 55px;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}

.hero-slider:hover .swiper-button-prev,
.hero-slider:hover .swiper-button-next {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {

  .hero-slider .swiper-button-prev,
  .hero-slider .swiper-button-next {
    display: none;
  }
}

.hero-slider .swiper-button-prev {
  left: 25px;
  transform: translateX(50px);
}

.hero-slider .swiper-button-prev:before {
  font-family: "Font Awesome 5 Free";
  content: "\f060";
  font-size: 15px;
  color: #d4d3d3;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  font-weight: 900;
}

.hero-slider .swiper-button-next {
  right: 25px;
  transform: translateX(-50px);
}

.hero-slider .swiper-button-next:before {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  font-size: 15px;
  color: #d4d3d3;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  font-weight: 900;
}

.hero-slider .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  text-align: left;
  line-height: 12px;
  font-size: 12px;
  color: #000;
  opacity: 0.3;
  background: #fff;
  transition: all .2s ease;
}

.hero-slider .swiper-pagination-bullet-active {
  opacity: 1;
}

.hero-slider .swiper-container-horizontal>.swiper-pagination-bullets,
.hero-slider .swiper-pagination-custom,
.hero-slider .swiper-pagination-fraction {
  bottom: 30px;
}

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

  .hero-slider .swiper-container-horizontal>.swiper-pagination-bullets,
  .hero-slider .swiper-pagination-custom,
  .hero-slider .swiper-pagination-fraction {
    /*     display: none; */
  }
}

.swiper-pagination {
  text-align: left;
}

.hero-slider .swiper-container-horizontal>.swiper-pagination-bullets {
  bottom: 50px;
  max-width: 1200px;
  padding: 0 15px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 767px) {
  .hero-slider .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 30px;

  }
}

/*--------------------------------------------------------------
	#hero-style
--------------------------------------------------------------*/
.hero-style {
  height: 100vh;
  transition: all .4s ease;
}

@media (max-width: 991px) {
  .hero-style {
    height: 600px;
  }
}

@media (max-width: 767px) {
  .hero-style {
    height: 500px;
  }
}

@media screen and (min-width: 992px) {
  .hero-style .container {
    padding-top: 95px;
  }
}

.hero-style .slide-title,
.hero-style .slide-text,
.hero-style .slide-btns {
  max-width: 690px;
}

.hero-style .slide-title h2 {
  font-size: 100px !important;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  margin: 0 0 40px;
  text-transform: capitalize;
  transition: all .4s ease;
}

@media (max-width: 1199px) {
  .hero-style .slide-title h2 {
    font-size: 75px;
  }
}

@media (max-width: 991px) {
  .hero-style .slide-title h2 {
    font-size: 50px;
    margin: 0 0 35px;
  }
}

@media (max-width: 767px) {
  .hero-style .slide-title h2 {
    font-size: 35px;
    margin: 0 0 30px;
  }
}

.hero-style .slide-text p {
  opacity: 0.8;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
  color: #ffffff;
  margin: 0 0 40px;
  transition: all .4s ease;
}

@media (max-width: 767px) {
  .hero-style .slide-text p {
    font-size: 16px;
    font-size: 1rem;
    font-weight: normal;
    margin: 0 0 30px;
  }
}

.hero-style .slide-btns>a:first-child {
  margin-right: 10px;
}


/*--------------------------------------------------------------
	#button-style
--------------------------------------------------------------*/
.theme-btn,
.theme-btn-s2 {
  background-color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: #2b3b95;
  padding: 9px 32px;
  border: 0;
  border-radius: 3px;
  text-transform: uppercase;
  display: inline-block;
  line-height: initial;
  transition: all .4s ease;
}

a {
  text-decoration: none;
  transition: all 0.2s ease;
}

.theme-btn-s2 {
  background-color: rgba(255, 255, 255, 0.9);
  color: #131e4a;
}

.theme-btn:hover,
.theme-btn-s2:hover,
.theme-btn:focus,
.theme-btn-s2:focus,
.theme-btn:active,
.theme-btn-s2:active {
  background-color: #2b3b95;
  color: #fff;
}

.theme-btn-s3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  text-transform: uppercase;
}

i.fa-chevron-circle-right {
  height: 22px;
  width: 22px;
}

a:hover {
  text-decoration: none;
}

@media (max-width: 991px) {

  .theme-btn,
  .theme-btn-s2,
  .theme-btn-s3 {
    font-size: 13px;
    padding: 15px 25px;
  }
}

@media (max-width: 767px) {

  .theme-btn,
  .theme-btn-s2 {
    padding: 13px 20px;
    font-size: 13px;
  }
}




.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}

.collection-grid-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  background: #8b8b8b29;
  /* padding: 20px; */
  border-radius: 20px;


}

.collection-grid-1 img {
  border-radius: 20px;
}

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

.coll-data {
  padding: 0px 50px;

}

.coll-data h2 {
  /* font-size: 52px; */
  margin-bottom: 10px;
  font-weight: 500;
  padding-bottom: 0px;
  font-family: 'Urbanist', sans-serif;

}

.stock h2 {
  font-family: 'Urbanist', sans-serif;

}

.coll-data h3 {
  margin-top: 0px;
  margin-bottom: 10px;

}

.animated-button {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid #000;
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 400;
  color: #000;
  box-shadow: 0 0 0 2px #ffffff20;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  width: fit-content;
}

.animated-button span:last-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
}

.animated-button span:first-child {
  position: relative;
  z-index: 1;
  color: #fff;
}

.animated-button:hover {
  box-shadow: 0 0 0 5px #00000020;
  color: #ffffff;
}

.animated-button:active {
  scale: 0.95;
}

.animated-button:hover span:last-child {
  width: 200px;
  height: 150px;
  opacity: 1;
}

.collection- {
  padding: 100px 60px;
  background-color: #000;
  color: #fff;
}

.coll-2 {
  font-size: 42px;
  font-weight: 500;
  margin: 0 0 50px;
  text-align: center;
}


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

.about-img-1-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}

.about-img-1 img {
  width: 100%;
}

.about-img-1-grid img {
  width: 100%;
}


.border-box {
  border: 1px solid #f5f5f5;
  height: -webkit-fill-available;
  padding: 33px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.border-box-rev {
  border: 1px solid #f5f5f5;
  height: -webkit-fill-available;
  padding: 33px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.stock {
  padding: 50px 0;
}

.why-choose {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-top: 30px;
  gap: 20px;
}

.why-choose-sec {
  border: 1px solid #f9f9f9;
  padding: 15px;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  /* Dark overlay; adjust opacity as needed */
  /* z-index: 1; */
}




.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex__item {
  padding: 10px;
}

.flex--2 {

  flex-grow: 1;
  flex-basis: 50%;
  max-width: 50%;
  height: 60vh;
}

.flex--3 {
  flex-grow: 1;
  flex-basis: 33.33%;
  max-width: 33.33%;
}

.flex--4 {
  flex-grow: 1;
  flex-basis: 25%;
  max-width: 25%;
}

.flex--5 {
  flex-grow: 1;
  flex-basis: 20%;
  max-width: 20%;
}

.flex--6 {
  flex-grow: 1;
  flex-basis: 16.67%;
  max-width: 16.67%;
}

.card-1 {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  min-height: 200px;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease-in-out;
  border: none;
}

.card--vcenter {
  justify-content: center;
}

.card-1 .card__hover {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.card-1 .card__hoverItem {
  position: absolute;
  background-color: #000;
  border-radius: 15px;
  color: #fff;
  display: inline-block;
  word-break: break-word;
  line-height: 1;
  font-size: 20px;
  font-weight: var(--fontWeightBold);
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 9px;
  padding-right: 9px;
  min-width: 25px;
  opacity: 1;
  transition: transform 100ms ease, opacity 100ms ease;
}

.card-1 .card__hoverItem--icon {
  padding: 7px 6px 4px 6px;
  min-height: 30px;
  min-width: 30px;
  border-radius: 50%;
}

.card-1 .card__hoverItem--top {
  top: 0;
  right: 10px;
}

.card-1 .card__hoverItem--bottom {
  bottom: 10px;
  left: 10px;
}

.card-1 .card__hoverItem--video {
  opacity: 1;
  bottom: 10px;
  right: 10px;
}

.card-1:hover {
  box-shadow: 0 4px 20px rgba(34, 34, 34, 0.15);
}

.card-1:hover .card__hover .card__hoverItem {
  opacity: 1;
}

.card-1:hover .card__hover .card__hoverItem--top {
  transform: translateY(10px);
}

.card-1:hover .card__hover .card__hoverItem--bottom {
  transform: translateY(-10px);
}

.card--noShadow,
.card--noShadow:hover {
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  background: #161616;
  border-radius: 20px;
  padding: 50px;
}

.videoPlayOnHover {
  z-index: -1;
}

.videoPlayOnHover.playing {
  z-index: 1;
}

.icon-video--play {
  display: block;
}

.icon-video--play.playing {
  display: none;
}

.icon-video--stop {
  display: none;
}

.icon-video--stop.playing {
  display: block;
}

.heading__caption {
  color: var(--textColorGray);
  font-size: 13px;
  letter-spacing: 0.25px;
  font-weight: 300;
}

.heading__title {
  font-weight: var(--fontWeightBold);
  font-size: 28px;
  line-height: 36px;
  padding-bottom: 24px;
  margin-top: 6px;
}

.heading__description {
  color: var(--textColorGray);
}

.heading__cta {
  font-weight: var(--fontWeightBold);
}

.arrow {
  font-weight: var(--fontWeightBold);
  cursor: pointer;
}

.arrow:after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 12 24%22%3E%3Cpath fill%3D%22%23222222%22 d%3D%22M11.3,12.7L12,12l-0.7-0.7l-4-4c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L8.2,11H1c-0.6,0-1,0.4-1,1s0.4,1,1,1h7.2l-2.3,2.3 c-0.2,0.2-0.3,0.4-0.3,0.7c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3C7.3,16.7,11.3,12.7,11.3,12.7z%22%2F%3E%3C%2Fsvg%3E");
  margin-left: 6px;
  width: 12px;
  height: 24px;
  position: relative;
  top: 7px;
  margin-top: -8px;
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
  transition: transform 100ms ease-out;
}

.arrow:hover:after {
  transform: translateX(4px);
}

.noPadding {
  padding: 0;
}

.placeholder1 {
  background: #ebebe6;
  position: relative;
  height: 100%;
  cursor: pointer;
}

.placeholder1:before {
  content: "";
  display: block;
  /* padding: 0 0 80.412% 0; */
}

.placeholder__inner {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

.placeholder1 .height-placeholder {
  /* padding: 0 0 80.412% 0; */
}

.placeholder1 .fit-to-parent {
  object-fit: cover;
  max-width: 100%;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}

@media only screen and (max-width: 700px) {
  .flex--1xs {
    flex-grow: 1;
    flex-basis: 100%;
    max-width: 100%;
  }

  .flex--3xs {
    flex-grow: 1;
    flex-basis: 33.33%;
    max-width: 33.33%;
  }

  .flex--hideOnSmall {
    display: none;
  }
}






: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;
}




#accordion {
  /* margin: 20px 0px; */
  /* width: 600px; */
  padding-left: 0px;
}

#accordion li {
  list-style: none;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  background: #fff;
  /* border-radius: 4px; */
  border-bottom: 1px solid #e1e1e1;
  transition: all .5s ease-in-out;
}

#accordion li label {

  padding: 10px;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  color: #000000;
  gap: 25px;
  transition: all .5s ease-in-out;

}

#accordion label span {
  transform: rotate(90deg);
  font-size: 22px;
  color: #333;
  transition: all .5s ease-in-out;

}

#accordion label+input[type="radio"] {
  display: none;
  transition: all .5s ease-in-out;

}

#accordion .content {
  padding: 0 10px;
  line-height: 26px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s linear;
  transition: all .5s ease-in-out;
  font-weight: 300;

}

#accordion label+input[type="radio"]:checked+.content {
  max-height: 400px;
  transition: all .5s ease-in-out;

}

label img {
  width: 50px;
}

.cole-gr {
  background-color: #000;
}

.cole-gr h2 {
  color: #fff;
  font-family: 'Urbanist', sans-serif;

}

.para {
  color: #fff;
}

.counter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 20px 0 30px;
}

.numbers {
  padding: 20px 10px;
  border: 1px solid #f5f5f540;
  text-align: center;
  border-radius: 20px;
}

.numbers h4 {
  font-size: 35px;
}

.collection-grid img {
  border-radius: 20px;
}


.section2 {
  position: relative;
  margin: 0;
  background: transparent;
  width: 100%;
  /* height: 100vh; */
  display: grid;
  place-self: center;
  place-content: center;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "headert headert"
    "textitem fancygrid";
  gap: 50px;
  perspective: 550px;
}

.headert {
  grid-area: headert;
  height: auto;
  text-align: center;
}

.headert h1 {
  font-family: 'Titillium Web', sans-serif;
  font-size: 42px;
  font-weight: 900;
  color: #fff;
  text-shadow: 3px 3px rgba(156, 97, 156, 0.5);
  text-transform: uppercase;
}

.textitem {
  position: relative;
  grid-area: textitem;
  width: auto;
  height: 300px;
  background: transparent;
  display: block;
  /* font-size: 72px; */
  overflow: visible;
}

.far {
  font-size: 24px;
  padding-right: 5px;
}

.textitem::before {
  content: '';
  width: 230px;
  height: 230px;
  border-radius: 50%;
  position: absolute;
  top: -60px;
  left: -60px;
  background: rgba(255, 248, 220, 0.05);
}

.textitem::after {
  content: '';
  width: 130px;
  height: 130px;
  border-radius: 50%;
  position: absolute;
  bottom: -30px;
  right: 30px;
  background: rgba(255, 248, 220, 0.05);
}

/* .textitem h1 {
    font-family: 'Titillium Web', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    text-shadow: 2px 2px rgba(156, 97, 156, 0.5);
    text-transform: uppercase;
}
.textitem p {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
} */

/*fancy grid section -------------------------------------------------- */
.img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: bottom;
  opacity: 0.7;
}

.fa-pen {
  position: absolute;
  font-size: 48px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
}

.fa-canadian-maple-leaf {
  position: absolute;
  font-size: 48px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
}

.fa-mountain {
  position: absolute;
  font-size: 48px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
}

.fancygrid {
  grid-area: fancygrid;
  position: relative;
  display: grid;
  place-content: center;
  /* grid-template-columns: 32% 32% 32%; */
  grid-template-areas: "pr1 pr2 pr3"
    "pr1 pr4 pr3"
    "pr5 pr4 pr6 ";
  background: transparent;
  width: 80%;
  height: 45vh;
  margin: 0;
  transform: rotateY(-11deg);
  gap: 9px;
}

.pr1 {
  position: relative;
  grid-area: pr1;
  background: rgba(0, 0, 0, 0.2);
  width: auto;
  height: auto;
  margin: 0;
  transition: 0.5s;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 9;
}

.pr1:hover {
  transform: scale(1.1);
}

.pr1::before {
  content: '';
  width: 130px;
  height: 130px;
  border-radius: 50%;
  position: absolute;
  top: -30px;
  left: -30px;
  background: rgba(255, 248, 220, 0.05);
}

.pr1::after {
  content: '';
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  bottom: -30px;
  right: -30px;
  background: rgba(255, 248, 220, 0.05);
}

.pr1:hover .pr1-content {
  visibility: visible;
  transform: translateY(0px);
  opacity: 1;
}

.pr1-content {
  cursor: default;
  width: 100%;
  height: 100%;
  visibility: visible;
  opacity: 1;
  background: black;
  transform: translateY(0px);
  transition: 0.5s;
  display: grid;
  place-content: center;
}

.pr2 {
  position: relative;
  grid-area: pr2;
  background: rgba(0, 0, 0, 0.2);
  width: auto;
  height: 150px;
  margin: 0;
  transition: 0.5s;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 8;
}

.pr2:hover {
  transform: scale(1.1);
  z-index: 10;
}

.pr2::before {
  content: '';
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -30px;
  right: -30px;
  background: rgba(255, 248, 220, 0.05);
}

.pr2:hover .pr2-content {
  visibility: visible;
  transform: translateY(0px);
  opacity: 1;
}

.pr2-content {
  cursor: default;
  width: 100%;
  height: 100%;
  visibility: visible;
  opacity: 1;
  background: black;
  transform: translateY(0px);
  transition: 0.5s;
  display: grid;
  place-content: center;
}

.pr3 {
  position: relative;
  grid-area: pr3;
  background: black;
  width: auto;
  height: auto;
  margin: 0;
  transition: 0.2s;
  border-radius: 6px;
  overflow: hidden;
  /* border: 1px solid rgba(255, 255, 255, 0.2); */
}

.pr4 {
  position: relative;
  grid-area: pr4;
  background: black;
  width: auto;
  height: 35vh;
  margin: 0;
  transition: 0.2s;
  border-radius: 6px;
  overflow: hidden;
  /* border: 1px solid rgba(255, 255, 255, 0.2); */
}

.pr5 {
  position: relative;
  grid-area: pr5;
  background: black;
  width: auto;
  height: auto;
  margin: 0;
  transition: 0.2s;
  border-radius: 6px;
  overflow: hidden;
  /* border: 1px solid rgba(255, 255, 255, 0.2); */
}

.pr6 {
  position: relative;
  /* grid-area: pr6; */
  background: rgba(0, 0, 0, 0.2);
  width: auto;
  height: 150px;
  margin: 0;
  transition: 0.5s;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pr6:hover .pr6-content {
  visibility: visible;
  transform: translateY(0px);
  opacity: 1;
}

.pr6-content {
  cursor: default;
  width: 100%;
  height: 100%;
  visibility: visible;
  opacity: 1;
  background: black;
  transform: translateY(0px);
  transition: 0.5s;
  display: grid;
  place-content: center;
}

.pr6:hover {
  transform: scale(1.1);
}

.pr6::before {
  content: '';
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  bottom: -30px;
  right: -30px;
  background: rgba(255, 248, 220, 0.05);
}


.section2 h2 {
  font-size: 16px !important;
  color: #fff;
  /* padding-top: 15px; */
  text-align: center;
  padding: 15px;
}

.section2 .imgs {
  width: 60px;
  margin: auto;
  margin-top: 15px;
}

.why-c h2 {
  text-align: center;
  font-family: 'Urbanist', sans-serif;
}


.why-choose- p {
  color: #000;
}

.footer {
  padding-bottom: 20px;
  border: 2px solid #f5f5f5;
  padding: 100px 60px 20px;
}

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

.footer-sec img {
  width: 200px;
  padding-bottom: 20px;
}

.footer-sec h3 {
  padding-bottom: 20px;
  margin-top: 0px;
  font-weight: 600;
  font-size: 25px
}

.pl-100 {
  padding-left: 100px;
}

.footer-sec a {
  color: #000;
}

.footer-sec ul {
  list-style: none;
  padding-left: 0;
  color: #000;
  font-weight: 300;

}

.footer-sec li {
  padding-bottom: 5px;
  font-size: 17px;
}

.copy {
  padding-top: 20px;
}

.background-section {
  background-color: #171717;
}

.grid-stock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  text-transform: uppercase;
  color: #fff;
}

.grid-stock .item {
  padding: 30px;
  border-radius: 20px;
}

.grid-stock .item h3 {
  font-weight: 400;
  /* letter-spacing: 3px; */
  color: #fff;
  padding-top: 10px;
  /* padding-bottom: 20px; */
}

.grid-stock a {
  color: #f5f5f5;
}

.live-btn {
  background-color: #000;
  color: #000;
}

.live-btn {
  background: #000;
  padding: 5px 10px;
  border-radius: 20px;
  color: #ffff;
}

.pad-l {
  padding-left: 0;
}

.items-center1 {
  background: #ffffff;
  padding: 10px;
  color: #000 !important;
  text-align: center;
  font-size: 12px;
  border-radius: 30px;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.comany-get {
  /* padding-left: 2rem;
  padding-right: 2rem; */
  padding-bottom: 2rem;
}

.padding-all {
  padding: 25px;
}

.grid-cols-1 p {
  margin-bottom: 0px !important;
}

.text-lg {
  font-size: 30px;
}

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

.stock-img {
  width: 100% !important;
}

.stock-data {
  border-bottom: 1px dashed rgba(0, 0, 0, .1);
  padding: 8px 0px;
  color: var(--primary-txt-color);

}

.product {
  margin-bottom: 30px;
  color: #000;
}

.product-inner {
  box-shadow: 0 0 4px rgb(0 0 0 / 20%);
  /* padding: 10px; */
  color: #000 !important;
  border-radius: 10px;
}

.stock-c {
  padding: 50px;
}

.stock-section {
  padding: 150px 50px 50px 50px;
}

.search-grid {
  /* display: grid;
 grid-template-columns: repeat(2,1fr);
 gap:20px; */
  gap: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.search-flex {
  display: flex;
  justify-content: end;
  position: relative;
}


.glide__slide img {
  height: auto;
  object-fit: contain;
  width: 100%;
}

.product-inner img {
  height: 20vh;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.comany-get a:hover {
  background-color: #000;
  border: 2px solid #fff;
  color: #fff !important;
}

.glide--ltr {
  /* border: 1px solid #e9e9e9; */
  padding: 10px;
}
.product-info1{
  display: flex;
  gap: 50px;
  text-align: center;
  justify-content: center;

}
.product-info h2{
  padding-bottom: 10px;
}
.thum-jus {
  display: flex;
  gap: .5rem !important;
  justify-content: center;
  overflow: hidden;
}

.glide__bullet--active {
  border: 1px solid #494949 !important;
}

.thum_image {
  max-width: 100px;
  height: 10vh;
  object-fit: cover;
  margin: 5px;
}

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

.footer-beside {
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 50px;
}

.footer-beside img {

  border-radius: 20px;

}

.fancygrid h5 {
  color: #fff;
  text-align: center;
  font-size: 18px;
}

.why-choose- h5 {
  font-size: 25px;
  color: #000;
  margin: 0;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  display: none;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  display: none;
}



.footer-sec h4 {
  font-family: 'Urbanist', sans-serif;
  font-size: 20px;
  font-weight: 500
}

.con-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.con-details a {
  color: #000;
  font-size: 19px;
}

.cont-soc {
  display: flex;
  gap: 15px;
}

.cont-soc a {
  font-size: 30px;
}

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

.counter-d {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
  padding-top: 50px;
}

.counter-box {
  padding: 20px;
  background: #0000007a;
  border-radius: 10px;
}

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

.about-why-sec img {
  border-radius: 20px;
}


.faq_container {
  border-bottom: 2px solid #ddd;
}

.faq_question {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #000;
  color: #fff;

}

.answercont {
  max-height: 0;
  overflow: hidden;
  transition: 0.3s;
  color: #fff;
}

.answer {
  padding: 0 10px 20px;
  line-height: 1.5rem;
}

.fqa_headline_container h2 span {
  font-weight: 700;
}

.faq_question-text h3 {
  font-size: 22px;
}

.icon.active {
  background: transparent;
  border: 2px solid #fff;
}

.icon:hover {
  cursor: pointer;
}

.icon-shape {
  position: relative;
  width: 50px;
  height: 50px;
}

.icon .icon-shape::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 4px;
  background: #fff;
  border-radius: 3px;
  transition: all 0.5s ease;
}

.icon .icon-shape::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 30px;
  background: #fff;
  border-radius: 3px;
  transition: all 0.5s ease;
}

.icon .icon-shape.active::before {
  transform: translate(-50%, -50%) rotate(180deg);
  transition: all 0.5s ease;
}

.icon .icon-shape.active::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: all 0.5s ease;
}



.product-pad {
  padding: 50px 100px 0px;
}

.space-p {
  padding: 10px 15px 15px;
  text-align: left;
}

.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: .125rem;
  font-family: 'Outfit-Regular';
}


element.style {
  transition-duration: 0ms;
  transform: translate3d(-1905px, 0px, 0px);
  transition-delay: 0ms;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100vh !important;
  z-index: 1;
}

.modal-content {
  width: 600px !important;
}

.flex-tit {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  padding-top: 10px;
}

.copy a {
  color: #000;
  font-weight: 600
}

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

.enviromet img {
  width: 80%;
  margin: auto;
}

.flex-tit h5 {
  margin: 0;
  font-weight: 600;
}

.grid-tech {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 25px;
  align-items: center;
}

.grid-tech img {
  width: 200px;
}

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

.spc-grid .bg-white {
  padding: 10px;
}

#product-list img {
  width: 100%;
  object-fit: contain;
}

#product-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

#product-details img {
  width: 50%;
  transform: rotateY(45deg);
  margin: auto;

}

#product-list h2 {
  font-size: 25px !important;
  text-align: center;
  /* padding-top: 15px; */
  padding: 10px 0 0;
}

.spc-details {
  background-color: #000;
  padding: 6px 12px;
  border-radius: 20px;
  color: #fff;

  text-align: center;
}

.pro-flex {
  display: flex;
  /* justify-content: space-between;
  align-items: baseline; */
  flex-direction: column;
  gap: 15px;
}

#product-details h2 {
  color: #fff;
  border-bottom: 1px solid #f5f5f542;
}

#product-details p {
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f542;

}

.data-s {
  font-size: 22px;
  font-weight: 700;
  padding-right: 10px;
}
.data-s span{
  font-weight: 400;
}
/* spc page */

.thumbnails img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.thumbnails img.active {
  opacity: 1;
  border: 2px solid black;
}

.slider-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
}

.slider-main {
  display: flex;
  transition: transform 0.4s ease-in-out;
}

.slider-main img {
  width: 100% !important;
  border-radius: 10px;
}

.thumbnails {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.silder-main-image{
  object-fit: cover;
  width: 100%;
  height: auto;
  max-height: 500px;
  display: block;
  margin: 0 auto;
}


.hieght-s{
  height: 50vh;
  /* transform: rotateY(45deg); */
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.grid-stock{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 50px;
}
.quartz-grid-new{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 50px;
}
.pro-flex h3{
  font-size: 17px;
  text-align: center;
  color: #000;
  padding-top: 15px;
}
.box-sd{
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  height: auto;
  /* padding: 10px; */

}
.parallax-height1{
  margin-top: 100px;
  max-height: 10px !important;
}
.colection-grid{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
}
.sub-flex-g{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}
.flex__item p{
  color: #fff;
}

.tab {
  overflow: hidden;
  padding-bottom: 50px;
      display: flex;
    gap: 15px;
}
.tab button {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 25px;
  font-size: 16px;
  background-color: #fff;
  border: 1px solid #000;
}
.tab button:hover {
  background-color: #bbb;
}
.tab button.active {
  background-color: #000;
  color: #fff;
}
.tabcontent {
    display: none;
    border-top: none;
}