@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

:root {
  --robotoFont: "Roboto", sans-serif;
  --goldYellow: #c7a345;
  --redColor: #dc3545;
}

/* body{
  background-image: url(../images/landing_page/liftpad/bdy-bg.jpg);
} */

.lift-pad-title {
  color: #133863;
  /* background-color: var(--redColor); */
  font-weight: 900;
  font-family: var(--robotoFont);
  font-size: 45px;
  /* border-bottom: 1px solid #f1e7e7; */
  margin: 28px 0px;
  padding: 0px 15px;
  /* background-image: url(../images/landing_page/liftpad/page-bar.webp); */
}

.lift-pad-title-sub {
  color: #04243e;
  /* background-color: var(--redColor); */
  font-weight: 700;
  font-family: var(--robotoFont);
  font-size: 36px;
  /* border-bottom: 1px solid #f1e7e7; */
  margin: 24px -14px 9px 0px;
}

.lift-pad-details {
  display: block;
}

.lift-pad-details {
  display: block;
}

.lift-pad-details h3 {
  background-color: var(--goldYellow);
  font-family: var(--robotoFont);
  font-size: 18px;
  text-align: center;
  padding: 40px 0px;
  font-weight: 700;
  color: #000000;
}

.lift-pad-details h3:hover {
  background-color: #ab000d;
  font-family: var(--robotoFont);
  font-size: 18px;
  text-align: center;
  padding: 40px 0px;
  /* font-weight: 700; */
  color: #ffffff;
}

.lift-para {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  font-family: var(--robotoFont);
  text-align: center;
}

.contact-details {
  background-color: #fffff1;
  padding: 30px;
}

.contact-details .lift-description {
  font-family: var(--robotoFont);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  padding: 9px 0px;
  text-align: left;
}

.lift-description i {
  padding: 0px 9px 0px 0px;
  font-size: 18px;
  line-height: 30px;
}

.pre-project-details .lift-description {
  padding: 10px 0px 10px 11px;
  background-color: var(--goldYellow);
  color: #000000;
  margin: 10px 0px;
  font-size: 19px;
  font-weight: 600;
}

lift-description svg {
  color: #dc3545;
}

.item-code {

  font-family: var(--robotoFont);
  font-size: 15px;
  font-weight: bold;
  padding-top: 12px;
  text-align: center;
  color: #212529;
}



.material-sample-img {
  max-width: 280px;
  max-height: 280px;
}

.sub-bg {

  background-color: #ffffff;
  background-image: url('../images/landing_page/liftpad/sub-background.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 660px;
  padding: 10px;
}

.sub-bg .row .col-md-6 {
  padding-top: 50px;
}

.sub-bg .row .col-md-6 h1 {

  color: #04243e;
  /* color: #ffffff; */
  font-family: var(--robotoFont);
  font-weight: bold;

}

.sub-bg .row .col-md-6 .d-flex .flex-fill {

  background-color: #04243e;
  color: #ffffff;
}

.lift-main-img {

  width: 1366px;
  height: auto;

}

.lift-description-n {
  color: #04243e;
  padding: 12px 18px;
  border: 2px solid #04243e;
  margin: 3px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: bold;
  background: #ffffff;
}

/* media queries start here */


/* HOVER EFFECT START HERE */
/* .material-sample {
  padding: 10px;
  box-shadow: 0px 0px 3px 0px #888888;
  margin: 10px;
} */

.material-sample {
  padding: 10px;
  box-shadow: 0px 0px 3px 0px #888888;
  margin: 10px;
  background: white;
  align-items: center;
  justify-content: center;
  position: relative;


  /* display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 20px auto;
  width: 250px;
  height: 250px;
  background: white;
  border-radius: 75px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: lighter;
  letter-spacing: 2px; */
  transition: 1s box-shadow;
}

.material-sample:hover {
  box-shadow: 0 5px 35px 0px rgba(0, 0, 0, .1);
}

.material-sample:hover::before,
.material-sample:hover::after {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #FDA8CF;
  /* border-radius: 75px; */
  z-index: -1;
  animation: 1s clockwise infinite;
}

.material-sample:hover:after {
  background: #F3CE5E;
  animation: 2s counterclockwise infinite;
}

@keyframes clockwise {
  0% {
    top: -5px;
    left: 0;
  }

  12% {
    top: -2px;
    left: 2px;
  }

  25% {
    top: 0;
    left: 5px;
  }

  37% {
    top: 2px;
    left: 2px;
  }

  50% {
    top: 5px;
    left: 0;
  }

  62% {
    top: 2px;
    left: -2px;
  }

  75% {
    top: 0;
    left: -5px;
  }

  87% {
    top: -2px;
    left: -2px;
  }

  100% {
    top: -5px;
    left: 0;
  }
}

@keyframes counterclockwise {
  0% {
    top: -5px;
    right: 0;
  }

  12% {
    top: -2px;
    right: 2px;
  }

  25% {
    top: 0;
    right: 5px;
  }

  37% {
    top: 2px;
    right: 2px;
  }

  50% {
    top: 5px;
    right: 0;
  }

  62% {
    top: 2px;
    right: -2px;
  }

  75% {
    top: 0;
    right: -5px;
  }

  87% {
    top: -2px;
    right: -2px;
  }

  100% {
    top: -5px;
    right: 0;
  }
}


/* HOVER EFFECT END HERE */


@media only screen and (max-width: 768px) {

  #sub-bg {
    background-image: none;

  }

  .lift-main-img {

    width: 100%;

  }
}