/* @import 'https://mxdhardware.com/wp-content/themes/MxDHardware/assets/css/services/categories/products-worlds/owl.carousel.min.css'; */

/* General */
html{overflow-x: hidden !important;}

body{
  --principal-font: 'Poppins';
  --secondary-font: 'Gilroy ExtraBold';
  --principal-color: white;
  font-family: var(--primary-font);
}

h1, h2, h3, h4, h5, h6{text-shadow: 1px 1px 2px black;}
.release-date {top: 8.9em !important;}

/* Section One */
.principal-features{padding: 11em 4em 1em;}

.container {
  gap: 0;
  display: grid;
  height: 850px;
  margin: 0 auto;
  text-align: center;
  align-items: center;
  max-width: 2000px;
  grid-auto-flow: row;
  justify-items: center;
  grid-auto-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 0.5fr 1fr .5fr; 
  grid-template-areas:
    "a Feature-Image d"
    "b Feature-Image e"
    "c Feature-Image f";
}

.Feature-Image {
  height: 65%;
  width: 100%;
  grid-area: Feature-Image;
}

.a { grid-area: a; } .b { grid-area: b; } .c { grid-area: c; } .d { grid-area: d; } .e { grid-area: e; } .f { grid-area: f; }

.image-wraper {
  left: 2em;
  width: 100%;
  position: relative;
  transition: .4s ease-in-out;
}

.image-wraper:hover {left: 0;}

.image-wraper img {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  transform-origin: left;
}

.image-1,.image-2,.image-3,.image-4{transition:transform .3s}
.image-1{-webkit-clip-path:polygon(0 0,0 32%,28% 0);clip-path:polygon(0 0,0 32%,28% 0);transform:translate(-10px,-10px);transform-origin:top}
.image-2{-webkit-clip-path:polygon(28% 0,0 32%,0 100%,17% 100%,90% 0);clip-path:polygon(28% 0,0 32%,0 100%,17% 100%,90% 0);transform:translate(-30px,5px)}
.image-3{-webkit-clip-path:polygon(100% 0,100% 65%,74% 100%,17% 100%,90% 0);clip-path:polygon(100% 0,100% 65%,74% 100%,17% 100%,90% 0);transform:translate(-15px,-10px)}
.image-4{-webkit-clip-path:polygon(100% 65%,74% 100%,100% 100%);clip-path:polygon(100% 65%,74% 100%,100% 100%);transform:translate(-32px,5px);transform-origin:top}
.image-wraper:hover .image-1,.image-wraper:hover .image-2,.image-wraper:hover .image-3, .image-wraper:hover .image-4 {transform:translate(0,0)}

.feature{
  margin: auto;
  display: flex;
  padding: 2em;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

.principal-features h4{line-height: 1;}
.product-actions{display: none;}

/*Sides*/
.slide-one{height: 70em;}
.slide-one .inside{height: 75%;}
.slide-three{margin: 18em 0;}
.slide-four{margin-bottom: 12em;}
/*End Sides*/

/*General Slides*/
.slide-one .property-description, .slide-two{margin: 0;}
.slide-four .property-description{margin-bottom: 0px;}

.inside {
  width: 100%;
  display: block;
  margin: 6em 0;
  text-align: center;
}

.inside h2{
  font-size: 60px;
  -webkit-animation: colorchange 15s infinite alternate;
}

.inside .feature-info {
  display: block;
	padding: 0 10px;
  line-height: 1.15;
	max-width: 1340px;
  margin: 15px auto 0;
}
/* End General */

.slide-one .property-description{
  font-size: 19px;
  max-width: 100%;
  line-height: 1.20;
}

.general-container{
  display: flex;
  margin: 0 auto;
  padding: 0 10px;
  flex-direction: row;
  max-width: 1600px;
  justify-content: center;
  justify-content: space-around;
}

.card-container {margin: 60px 20px 50px;}

.card-container img{
  width: 100%;
  height: 390px;
  object-fit: cover;
  border-radius: 20px;
}

.feature-one{
  z-index: 10;
  display: flex;
  position: relative;
  max-width: 1300px;
  margin: -20px auto 0;
  justify-content: space-around;
}

.property-title{
  margin: -40px auto 0;
  color: var(--details-bg-up);
  text-shadow: 2px 3px 20px black;
  font-size: clamp(1.1em, 2.1vw, 2.5em);
}

.property-description {
  font-size: 16px;
  line-height: 1.20;
  max-width: 700px;
  margin: 10px auto 0;
}

.image-responsive{
  width: 100%;
  display: none;
  margin: 50px auto;
}

.feature-two img{
  margin-top: 50px;
  max-width: 100px;
  max-height: 84px;
}

.feature-two h4{
	margin: 0;
	color: yellow;
	font-size: 54px;
}

.slide-four h2{
  top: -1em;
  position: relative;
}

.custom-sub-values{
  top: 2em;
  position: relative;
}

/* Separators */
.separator {
  display: flex;
  height: 15em;
  flex-direction: column;
  justify-content: center;
}

div#support, div#buy {margin: 0 auto;}
/* End */

@media (max-width: 1920px) {
  .container {
    max-width: 1600px;
    height: 650px;
    margin: 0 auto 4em;
  }
}

@media (max-width: 1600px) {
  .banner p {
    bottom: 8em;
    font-size: 18px;
    max-width: 1024px;
  }

  .principal-features {
    margin: 0 auto;
    max-width: 1450px;
    width: 100%;
    padding: 7em 4em 1em;
  }

  .property-description {font-size: 13px;}
}

@media (max-width: 1340px) {
  .image-wraper {width: 100%;}
}

@media (max-width: 1280px) {
  .feature-img {width: 80%;}
}

@media (max-width: 1200px) {
  .banner p {
    bottom: 8em;
    font-size: 16px;
    max-width: 920px;
  }
}

@media (max-width: 1070px) {
  main h2 {margin-bottom: 3rem;}
  .image-responsive{display: block;}

  .container{
    height: auto;
    align-items: start;
    grid-template-rows: repeat(2, .4fr);
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
    "Feature-Image Feature-Image Feature-Image"
    "a b c"
    "d e f";
  }

  .principal-features {
    max-width: 1450px;
    padding: 5em 3em 1em;
  }

  .principal-features .property-title {z-index: 1;}
  .feature {padding: 2em 1em;}

  .Feature-Image {
    width: 60%;
    height: 65%;
  }

  .image-wraper {height: 350px;}
}

@media (max-width: 1024px) {
  .banner p {
    bottom: 8em;
    font-size: 14px;
    max-width: 720px;
  }

  .slide-one {height: 60em;}
  .slide-one .inside {height: 64%;}
  .slide-four .property-description {margin-bottom: 2em;}
  .feature-one {justify-content: space-between;}
}

@media (max-width: 1000px) {
  .slide-one .property-description {font-size: 13px;}
  .inside h2 {font-size: 4.9vw;}
}

@media (max-width: 700px) {
  .mouse {bottom: 54vh !important;}
  p, .property-description{font-size: 13px;}
  .image-wraper {height: 330px;}

  .feature {
    padding: 4em 10px 1em;
    justify-content: flex-start;
  }

  .property-title {
    margin-bottom: 10px;
  }

  .slide-one .property-description {font-size: 14px;}

  .feature-one{
    margin: -45px auto 0;
    flex-direction: column;
  }

  .feature-one div{margin: 30px 0 0;}
  .inside {margin: 1em 0 4em;}

  .inside h2 {
    font-size: 35px;
    margin-top: 60px;
    padding: 0 10px;
  }

  .image-responsive {margin: 20px auto;}
  .general-container {flex-direction: column;}
  .card-container {margin: 30px 0 0;}
  .card-container img {height: 200px;}
  
  /* #support.gradient-border {width: 80% !important;} */

  #buy.gradient-border {
    width: 80% !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 600px) {
  p, .property-description {font-size: 11px;}

  .banner-responsive h1{
    left: 0;
    right: 0;
    height: 0;
    top: 18vh;
    bottom: 0;
    z-index: 10;
    display: block;
    font-size: 8vw;
    position: absolute;
    text-align: center;
  }

  .principal-features {padding: 3em 15px 1em;}

  .container {
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "Feature-Image Feature-Image"
      "a b"
      "c d"
      "e f";
  }

  .feature {padding: 4em 0 0;}
  .image-wraper {height: 6em;}
  .slide-one {height: auto;}
  .slide-one .inside {height: auto;}
  .slide-one .property-description{margin-top: 0;}
  .slide-three {margin: 0;}
  .property-description-top{margin-bottom: 0;}
  .property-description{margin-top: 0;}

  /* div#support.gradient-border {margin: 4em auto 9em !important;} */
  /* div#buy.gradient-border {margin: 10em auto 13em !important;} */
}

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

@media (max-width: 330px) {
  .inside h2 {font-size: 32px;}
}