body{
    margin: 0px;
    padding: 0px;
    background-color: rgb(230, 230, 230);
    height: auto;
}
.hemaHeading{
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
    box-shadow: 10px 10px 35px -8px rgba(180, 180, 180, 0.644);
  }
  #PLinesGIF{
    position: absolute;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height:100%;
    transition: .8s;
  }
  .hemaHeading p{
    font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
    position: absolute;
    bottom: 0;
    color: #FFFFFF;
    font-size: 30px;
    z-index: 2;
    text-shadow: 0px 2px 12px rgba(255, 255, 255, 0.842);
    left: 50%;
    transform: translate(-50%);
    margin: 0px;
    margin-bottom: 12px;
    pointer-events: none;
  }
  .FadeBlack{
    position: absolute;
    width: 100%;
    height: 65px;
    background-color: rgba(0, 0, 0, 0.534);
    bottom: 4px;
    right: 0;
    pointer-events: none;
  }
  /* End of Heading CSS */
svg{
  position: absolute;
  z-index: 2;
    margin: 10px;
    fill: rgb(133, 5, 45);
    transition: .3s;
    cursor: pointer;
}
svg:hover{
    fill: rgb(255, 0, 81);
}
/* Back Button here */

.Product{
  width: 100%;
  padding-left: 150px;
  /* border: 1px solid; */
  margin-top: 88px;
}


#exzh1{
  position: relative;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  color: rgb(2, 76, 145);
  margin: 0px;
  margin-left: 445px;
  font-size: 50px;
  vertical-align: top;
  z-index: 2;
  animation: 2.5s fadeInUp;
}
#dna{
  position: absolute;
    transform: rotate(30deg);
    margin-left: -296px;
    margin-top: -133px;
    opacity: .1;
}
#exzDetails{
  position: absolute;
  width: 450px;
  text-align: justify;
  margin-left: 446px;
  top: 275px;
  animation: 3.5s fadeInUp;
  color: rgb(0, 69, 133);;
}
#exzPro{
    width: 546px;
    height: 550px;
    object-fit: cover;
    filter: drop-shadow(9px 4px 5px #d3d3d3);
    margin-top: -83px;
    animation: 2.5s fadeInUp;
}

.ADV1{
  position: absolute;
  margin-top: 205px;
  margin-left: 50%;
  transform: translate(-50%);
}
#adv{
  padding-top: 17px;
  text-align: center;
  position: absolute;
  margin-left: 50%;
  transform: translate(-50%);
  margin-top: -20px;
  color: rgb(184, 28, 0);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  width: 100%;
  height: 90px;
  background-color: rgb(255, 255, 255);
}
.head{
  position: absolute;
  display: flex;
  align-items: center;
  left: 50%;
  transform: translate(-50%);
  top: 830px;
}

h5{
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  color: rgb(2, 76, 145);
  width: 306px;
  text-transform: uppercase;
}
.cont{
  display: grid;
  align-items: center;
  width: 340px;
  margin-top: 20px;
}
.cont p{
  margin-left: 20px;
  color: rgb(21, 68, 116);
  text-align: center;
}
#cont{ 
  border-radius: 100px;
  width: 100px;
  height: 100px;
  background-color: rgba(189, 189, 189, 0.411);
  box-shadow: 3px 3px 10px -3px rgba(0,0,0,0.75);
  margin-left: 53%;
  transform: translate(-50%);
}

.cont1-4{
  display: grid;
  grid-template-columns: auto auto auto auto;
  column-gap: 20px;
  row-gap: 40px;
}


.spec234{
  position: absolute;
  margin-top: 550px;
  margin-left: 50%;
  transform: translate(-50%);
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 50px;
}

.spec{
  width: 400px;
  height: 430px;
  box-shadow: 6px 7px 9px -4px rgba(0,0,0,0.75);
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,231,234,0.039653361344537785) 59%);
  border-radius: 20px;
  padding: 0px 20px 0px 20px;
}
#sp2{
  width: 370px;
  margin-left: 50%;
  transform: translate(-50%);
  margin-top: 10px;
  border-radius: 10px;
}
#p2{
  position: absolute;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bolder;
  text-transform: uppercase;
  text-align: center;
  font-size: 20px;
  margin-top: -10px;
  color: rgb(184, 28, 0);
  text-shadow: 3px 2px 3px rgb(255, 255, 255);
  width: 350px;
}
#p2p{
  text-align: center;
  font-size: 17px;
  margin-top: 60px;
  width: 350px;
  margin-left: 50%;
  transform: translate(-50%);
}


.effDet{
  position: relative;
  width: 100%;
  height: 300px;
  margin-top: 1100px;
}
.effDetCont img{
  position: absolute;
  z-index: 2;
  margin-left: -118px;
}
.imgRedbck{
  position: absolute;
  width: 100%;
  height: 300px;
  top: 10px;
  background: rgb(255,85,0);
  background: linear-gradient(90deg, rgba(255,85,0,1) 0%, rgba(255,42,0,1) 32%);
}
.imgRedbck h1{
  color: white;
  margin-left: 733px;
  margin-top: 53px;
  font-weight: bold;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.imgRedbck p{
  color: white;
  margin-left: 733px;
  margin-top: 10px;
  font-size: 20px;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
}
.MaxThroughPut{
  position: absolute;
  margin-top: 315px;
  width: 220px;
  height: 100px;
  margin-left: 733px;
}
.MaxThroughPut p{
  color: rgb(199, 66, 0);
  font-size: 20px;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
}
.imgRedbck ul{
  margin-left: 733px;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  margin-top: 0px;
}
.MaxCont{
  display: grid;
  width: 300px;
  grid-template-columns: auto auto;
}
@keyframes fadeInUp {
  0% {
    transform: translatex(100%);
    opacity: 0;
  }
  100% {
    transform: translatex(0%);
    opacity: 1;
  }
}

@media only screen and (min-width: 1400px){}

@media only screen and (max-width: 1280px){
  .cont1-4{
    grid-template-columns: auto auto auto;
  }
  #exzDetails {
   
    width: 399px;
   }
   .spec234{
    margin-top: 832px;
    grid-template-columns: auto auto;
    row-gap: 60px;
   }


   .imgRedbck {
    top: 856px;
  }
  .effDetCont img {
      position: absolute;
      z-index: 2;
      margin-left: -118px;
      top: 820px;}
    .MaxThroughPut {
        position: absolute;
        margin-top: 1173px;
        width: 220px;
        height: 100px;
        margin-left: 730px;
      }
}
@media only screen and (max-width: 1015px){
  .cont1-4{
    grid-template-columns: auto auto;
  }
  #exzh1 {
    margin-left: 410px;
    font-size: 30px;
}
#exzDetails {
  width: 366px;
  margin-left: 409px;
  top: 229px;
}
.Product {
  padding-left: 56px;
  
}


.imgRedbck {
  top: 1856px;
}
.effDetCont img {
  width: 730px;
    margin-left: -118px;
    top: 1820px;}
  .MaxThroughPut {
      position: absolute;
      margin-top: 2173px;
      width: 220px;
      height: 100px;
      margin-left: 382px;
    }
    .imgRedbck h1 {
      margin-left: 382px;
  }
  .imgRedbck p {
    margin-left: 382px;
}
.imgRedbck ul {
  margin-left: 382px;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  margin-top: 0px;
}
}
@media only screen and (max-width: 830px){
  .cont1-4{
    grid-template-columns: auto;
  }
  #exzPro {
    width: 240px;
    height: 291px;
}
.Product {
  padding-left: 20px;
}
#exzh1 {
  margin-left: 381px;
    margin-top: 20px;
  font-size: 25px;
}
#exzDetails {
  width: 366px;
  margin-left: 382px;
  top: 213px;
}
#exzPro {
  width: 475px;
  height: 511px;}
  .head {
    
    top: 750px;
}

.spec234{
  margin-top: 1385px;
  grid-template-columns: auto;
 }
 
.effDetCont img {
  width: 660px;
}
.imgRedbck h1 {
  margin-left: 320px;
  font-size: 25px;
  margin-top: 25px;
}
.imgRedbck p {
  margin-left: 337px;
}
.imgRedbck ul {
  margin-left: 311px;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  margin-top: -17px;
}
.MaxThroughPut {
  position: absolute;
  margin-top: 2173px;
  width: 220px;
  height: 100px;
  margin-left: 330px;
}
.MaxCont {
  width: 200px;
  grid-template-columns: auto;
  margin-top: -10px;
}
}
@media only screen and (max-width: 600px){
  .hemaHeading p {
    font-size: 20px;
    margin-bottom: 22px;
  }
  .cont1-4{
    grid-template-columns: auto;
  }
  #exzPro {
    width: 244px;
    height: 234px;
    margin-top: -40px;
}
.Product {
  padding-left: 20px;
}
#exzh1 {
  margin-left: 193px;
  margin-top: 49px;
  font-size: 29px;
}
#adv {
  margin-top: 375px;
}
.head {
  top: 910px;
}

.ADV1 {
  margin-top: 595px;}

  #dna{
    width: 755px;
    margin-left: -409px;
    margin-top: -301px;
  }
#exzDetails {
  width: 369px;
  margin-left: 47px;
  font-size: 16px;
  top: 412px;
}
.cont p {
    width: 310px;
}
.head h5 {
  width: 199px;
  font-size: 11px;
}





.spec{
  width: 345px;
  height: 360px;
}
#sp2{
  width: 315px;
}
#p2{
  font-size: 17px;
  margin-top: -10px;
  width: 295px;
}
#p2p{
  font-size: 15px;
  margin-top: 40px;
  width: 295px;
}


.effDetCont img {
  width: 660px;
}
.imgRedbck h1 {
  margin-left: 320px;
  font-size: 25px;
  margin-top: 25px;
}
.imgRedbck p {
  margin-left: 337px;
}
.imgRedbck ul {
  margin-left: 311px;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  margin-top: -17px;
}
.MaxThroughPut {
  position: absolute;
  margin-top: 2173px;
  width: 220px;
  height: 100px;
  margin-left: 330px;
}
.MaxCont {
  width: 200px;
  grid-template-columns: auto;
  margin-top: -10px;
}
}
@media only screen and (max-width: 415px){
  #exzPro {
    width: 211px;}
  #exzh1 {
    margin-left: 165px;
  }
  #exzDetails {
    margin-left: -2px;
    width: 331px;
  }
  #dna {
    width: 791px;
    margin-left: -547px;
}
.head {
  top: 920px;
}
.ADV1 {
  margin-top: 442px;
}
.cont1-4 {
  margin-top: 120px;
}
.spec234 {
  margin-top: 1619px;
}

.imgRedbck {
  height: 500px;
}
.effDetCont img {
  width: 476px;
}
.imgRedbck h1 {
  margin-left: 75px;
  font-size: 20px;
  margin-top: 245px;
}
.imgRedbck p {
  margin-left: 73px;
}
.imgRedbck ul {
  margin-left: 48px;
  font-size: 14px;
}
.MaxThroughPut {
  margin-top: 2364px;
  margin-left: 71px;
}
}