@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.page-header.is-sticky {
  /* position: fixed; */
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  animation: slideDown 0.35s ease-out;
}

.home-banner-video-container {
  position: relative;
  width: 100%;
  height: 88dvh;
  overflow: hidden;
}
.home-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 88dvh;
  background: rgba(23, 29, 60, 0.5);
  z-index: 1;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 89%, 0 100%);
}
.home-banner-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 88dvh;
  background: rgba(23, 29, 60, 0.5);
  clip-path: polygon(0 0, 100% 0, 100% 89%, 0 100%);
  z-index: 2;
}
.overlay-text {
  position: absolute;
  top: 35%;
  z-index: 2;
  color: #fff;
}

/* hero section */
.carousel-item {
  position: relative;
}
.carousel-item img {
  width: 100%;
  height: 89vh;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 89%, 0 100%);
}
.carousel-indicators {
  bottom: 3% !important;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(23, 29, 60, 0.5);
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% 89%, 0 100%);
}
.custom-caption-wrap {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  z-index: 2;
}
.custom-caption {
  color: #fff;
  text-align: left;
}

.custom-caption h1 {
  font-family: var(--title-font);
  font-size: var(--font-size-40);
  font-weight: normal;
  text-shadow: 2px 2px #ff4824;
}
.custom-caption h1.industry-heading {
  font-family: var(--title-font);
  font-size: var(--main-title-font-size);
  font-weight: var(--font-weight-600) !important;
  text-transform: uppercase;
}
.custom-caption p {
  font-size: 24px;
}

/* .home-carousel-ban{
    background-repeat: no-repeat;
    height: 80.5vh;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0% 100%);
}
.carousel-indicators.home-car-ind {
    bottom: 8%;
}
.carousel-indicators.home-car-ind [data-bs-target] {
    border-radius: 50%;
    width: 12px;
    height: 12px;
} */

.paragraph {
  font-size: 30px;
}
.projects-card {
  text-align: center;
  background: rgba(255, 255, 255, 0.3);
  padding: 20px 20px;
  border-radius: 20px;
  height: vh;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(30, 38, 78, 1);
  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.projects-heading {
  font-size: 20px;
  margin-bottom: 5px;
  font-weight: var(--font-weight-500);
  margin-top: 25px;
}
.project-text {
  font-size: 16px;
  text-align: center;
}

/* products section */

.products-navbar {
  clip-path: polygon(0 9%, 100% 0, 100% 100%, 0% 100%);
  background-color: var(--theme-color4);
}
.card.home-products-card {
  background-color: transparent;
}
.card-img-top.home-products-imgs {
  padding: 40px 40px;
  /* background: rgba(203, 213, 225, 1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(72, 84, 105, 0.5);
  border-radius: 20px 20px 0px 0px; */
}
.card-body.home-products-cardbody {
  background: rgba(72, 84, 105, 0.5);
  border: 1px solid rgba(203, 213, 225, 0.5);
  color: #fff;
  margin-top: 10px;
  border-radius: 0px 0px 20px 20px;
  text-align: center;
  padding: 20px;
}
.product-img-div1, .product-img-div2, .product-img-div3{
  background-color: rgba(203, 213, 225, 1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(72, 84, 105, 0.5);
  border-radius: 20px 20px 0px 0px;
}
/* .product-img-div1 img {
  transition: all 0.3s ease;
} */
/* .product-img-div1:hover img {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6));
} */
.card-img-top.home-products-imgs {
  padding: 40px 30px;
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 1.5));
}
/* card-1 */

.home-products-card:hover .product-img-div1, .home-products-card:focus .product-img-div1 {
  background: rgba(179, 197, 223, 1);
      border-radius: 20px 20px 0px 0px;
}

.home-products-card:hover .home-cardbody-1 {
  background: rgba(66, 88, 119, 1);

}
.card-body.home-products-cardbody.home-cardbody-1 p.card-text, .card-body.home-products-cardbody.home-cardbody-2 p.card-text, .card-body.home-products-cardbody.home-cardbody-3 p.card-text{
    font-size: 22px;
}
/* card-2 */
.home-products-card:hover .product-img-div2,.home-products-card:focus .product-img-div2 {
  background: rgba(206, 174, 174, 0.85);
      border-radius: 20px 20px 0px 0px;
}

.home-products-card:hover .home-cardbody-2 {
  background: rgba(162, 69, 69, 0.95);

}

/* card-3 */
.home-products-card:hover .product-img-div3, .home-products-card:focus .product-img-div3 {
  background: rgba(245, 203, 148, 1);
      border-radius: 20px 20px 0px 0px;
}

.home-products-card:hover .home-cardbody-3 {
  background: rgba(191, 125, 45, 0.9);
}

.home-products-imgs,
.home-products-cardbody {
  transition: background 0.3s ease, color 0.3s ease;
}

/* sofwares section */

.home-softwares-section {
  position: relative;
  overflow: hidden;
  background-color: var(--theme-color4);
  margin-top: -1px;
}
.home-softwares-bg {
  background-color: #fff;
  clip-path: polygon(0 67%, 100% 58%, 100% 100%, 0% 100%);
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home-softwares-content {
  /* position: relative;
  z-index: 1;
  margin-bottom: 150px; */
}
.card.home-softwares-card {
  border: none;
  background: transparent;
  height: 100%;
}
img.card-img-top.home-softwares-imgs {
  padding: 40px 50px;
  border-radius: 20px 20px 0 0;
  background: #fff;
}
.card-body.home-softwares-cardbody {
  background: rgba(66, 88, 119, 1);
  color: var(--theme-color1);
  /* padding: 25px 25px 50px 25px; */
  border-radius: 0 0 20px 20px;
}
.home-softwares-card:hover .home-softwares-cardbody {
  background: #c36969;
}
.home-softwares-card:hover .home-softwares-cardbody {
  background: #6c6a6a;
}
.home-softwares-cardbody {
  transition: background 0.3s ease, color 0.3s ease;
}
.softwares-card-heading {
  font-weight: var(--font-weight-600);
}

/* Products Page */

.products-banner img {
  width: 100%;
  height: 89vh;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 89%, 0 100%);
}

/* Product Category1 */

.product-cat1-bg-card1 {
  background: var(--theme-color2);
  text-align: center;
  padding: 45px 20px 45px 50px;
  color: white;
  position: relative;
}
.product-cat1-bg-card1-product-image {
  object-fit: contain;
}
.product-cat1-bg-card1-product-weight {
  position: absolute;
  right: 30px;
  top: 43%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-weight: bold;
  font-size: clamp(14px, 4vw, 24px);
  color: rgba(255, 255, 255, 0.5);
}
.product-cat1-bg-card1-product-name {
  font-size: clamp(16px, 4vw, 30px);
  font-weight: var(--font-weight-500);
  color: var(--theme-color1);
}
.product-cat1-bg-card2 {
  background: var(--theme-color-gray);
  text-align: center;
  padding: 45px 20px 45px 50px;
  color: white;
  position: relative;
  text-align: center;
}
.product-cat1-bg-card2-product-image {
  object-fit: contain;
}
.product-cat1-bg-card2-product-weight {
  position: absolute;
  right: 30px;
  top: 43%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-weight: bold;
  font-size: clamp(14px, 4vw, 24px);
  color: rgba(23, 29, 60, 1);
}
.product-cat1-bg-card2-product-name {
  font-size: clamp(16px, 4vw, 30px);
  font-weight: var(--font-weight-500);
  color: var(--theme-color2);
}

/* Product Category2 */

.product-cat2-bg-card1 {
  background: var(--bg-medium-pink);
  text-align: center;
  padding: 45px 20px 45px 50px;
  color: white;
  position: relative;
}
.product-cat2-bg-card1-product-image {
  object-fit: contain;
}
.product-cat2-bg-card1-product-weight {
  position: absolute;
  right: 30px;
  top: 43%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-weight: bold;
  font-size: clamp(14px, 4vw, 24px);
  color: rgba(255, 255, 255, 0.5);
}
.product-cat2-bg-card1-product-name {
  font-size: clamp(16px, 4vw, 30px);
  font-weight: var(--font-weight-500);
  color: var(--theme-color1);
}
.product-cat2-bg-card2 {
  background: var(--bg-light-pink);
  text-align: center;
  padding: 45px 20px 45px 50px;
  color: white;
  position: relative;
  text-align: center;
}
.product-cat2-bg-card2-product-image {
  object-fit: contain;
}
.product-cat2-bg-card2-product-weight {
  position: absolute;
  right: 30px;
  top: 43%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-weight: bold;
  font-size: clamp(14px, 4vw, 24px);
  color: rgba(23, 29, 60, 1);
}
.product-cat2-bg-card2-product-name {
  font-size: clamp(16px, 4vw, 30px);
  font-weight: var(--font-weight-500);
  color: rgba(23, 29, 60, 1);
}

/* Product Category3 */

.product-cat3-bg-card1 {
  background: var(--bg-dark-yellow);
  text-align: center;
  padding: 45px 20px 45px 50px;
  color: white;
  position: relative;
}
.product-cat3-bg-card1-product-image {
  object-fit: contain;
}
.product-cat3-bg-card1-product-weight {
  position: absolute;
  right: 30px;
  top: 43%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-weight: bold;
  font-size: clamp(14px, 4vw, 24px);
  color: rgba(255, 255, 255, 0.5);
}
.product-cat3-bg-card1-product-name {
  font-size: clamp(16px, 4vw, 30px);
  font-weight: var(--font-weight-500);
  color: var(--theme-color1);
}
.product-cat3-bg-card2 {
  background: var(--bg-light-yellow);
  text-align: center;
  padding: 45px 20px 45px 50px;
  color: white;
  position: relative;
  text-align: center;
}
.product-cat3-bg-card2-product-image {
  object-fit: contain;
}
.product-cat3-bg-card2-product-weight {
  position: absolute;
  right: 30px;
  top: 43%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-weight: bold;
  font-size: clamp(14px, 4vw, 24px);
  color: rgba(23, 29, 60, 1);
}
.product-cat3-bg-card2-product-name {
  font-size: clamp(16px, 4vw, 30px);
  font-weight: var(--font-weight-500);
  color: rgba(23, 29, 60, 1);
}

/* Products Info Page */

/* Lidar css */

.lidar-series,
.guided-series,
.autonomous-forklift-series {
  scroll-margin-top: 70px;
  scroll-behavior: smooth;
}
.lidar-bg1 {
  background: var(--theme-color2);
  /* margin-bottom: 2px; */
}
.lidar-bg1-image,
.lidar-bg2-image,
.guided-bg1-image,
.guided-bg2-image,
.autonomous-forklift-bg1-image,
.autonomous-forklift-bg2-image {
  position: relative;
}
.lidar-bg1-info-image {
  text-align: center;
  padding: 45px 20px 45px 50px;
  color: white;
  position: relative;
}
.lidar-bg1-product-image {
  object-fit: contain;
}
.lidar-bg1-product-name {
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-weight: bold;
  font-size: var(--font-size-20);
  color: #fff;
}
.lidar-bg1-download-specifications-btn {
  background-color: #fff;
  color: var(--theme-color2);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-transition: background-color 0.7s ease-out;
  -moz-transition: background-color 0.7s ease-out;
  -o-transition: background-color 0.7s ease-out;
  transition: background-color 0.7s ease-out;
}
.lidar-bg1-download-specifications-btn:hover,
.lidar-bg1-download-specifications-btn:focus,
.lidar-bg1-download-specifications-btn:active{
  background-color: transparent !important;
  color: rgb(255 255 255) !important;
  width: 100%;
  border: 1px solid #fff !important;
}

/*.lidar-bg1-download-specifications-btn:focus-visible{*/
/*  background-color: rgb(255 255 255) !important;*/
/*}*/
.lidar-bg1-download-specifications-btn i {
  background: var(--theme-color2);
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin-left: 50px;
  font-size: 12px;
  color: #fff;
}
.lidar-bg1-download-specifications-btn:hover.lidar-bg1-download-specifications-btn i,
.lidar-bg1-download-specifications-btn:active.lidar-bg1-download-specifications-btn i{
  background: #fff;
  color: rgba(109, 118, 135, 1) !important;
}
/*.lidar-bg1-download-specifications-btn:focus-visible.lidar-bg1-download-specifications-btn i {*/
/*  background: rgba(109, 118, 135, 1);*/
/*  color:  #fff !important;*/
/*}*/
.lidar-bg2 {
  background: var(--theme-color-gray);
  margin-bottom: 2px;
}
.lidar-bg2-info-image {
  text-align: center;
  padding: 45px 20px 45px 50px;
  color: white;
  position: relative;
}
.lidar-bg2-product-image {
  object-fit: contain;
}
.lidar-bg2-product-name {
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-weight: bold;
  font-size: var(--font-size-20);
  color: var(--theme-color2);
}
.lidar-bg2-download-specifications-btn {
  background: var(--theme-color2);
  color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-transition: background-color 0.7s ease-out;
  -moz-transition: background-color 0.7s ease-out;
  -o-transition: background-color 0.7s ease-out;
  transition: background-color 0.7s ease-out;
}
.lidar-bg2-download-specifications-btn:hover,
.lidar-bg2-download-specifications-btn:active{
  background-color: var(--theme-color-gray) !important;
  color: var(--theme-color2) !important;
  width: 100%;
  border: 1px solid var(--theme-color2) !important;
}
/*.lidar-bg2-download-specifications-btn:focus-visible{*/
/*  background-color: var(--theme-color2) !important;*/
/*  color: #fff;*/
/*}*/
.lidar-bg2-download-specifications-btn i {
  background: #fff;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin-left: 50px;
  font-size: 12px;
  color: rgba(89, 102, 120, 1);
}
.lidar-bg2-download-specifications-btn:hover.lidar-bg2-download-specifications-btn i,
.lidar-bg2-download-specifications-btn:active.lidar-bg2-download-specifications-btn i{
  background: var(--theme-color2) !important;
  color: #fff !important;
}

/*.lidar-bg1-download-specifications-btn:focus-visible.lidar-bg1-download-specifications-btn i {*/
/*  background: #fff !important;*/
/*  color:  var(--theme-color2) !important;*/
/*}*/

/* Guided Css */

.guided-bg1 {
  background: var(--bg-medium-pink);
  margin-bottom: 2px;
}
.guided-bg1-info-image {
  text-align: center;
  padding: 45px 20px 45px 50px;
  color: white;
  position: relative;
}
.guided-bg1-product-image {
  object-fit: contain;
}
.guided-bg1-product-name {
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-weight: bold;
  font-size: var(--font-size-20);
  color: #fff;
}
.guided-bg1-download-specifications-btn {
  background-color: #fff;
  color: var(--bg-medium-pink);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-transition: background-color 0.7s ease-out;
  -moz-transition: background-color 0.7s ease-out;
  -o-transition: background-color 0.7s ease-out;
  transition: background-color 0.7s ease-out;
}
.guided-bg1-download-specifications-btn:hover,
.guided-bg1-download-specifications-btn:active{
  background-color: transparent !important;
  color: rgb(255 255 255) !important;
  width: 100%;
  border: 1px solid #fff !important;
}
/*.guided-bg1-download-specifications-btn:focus-visible{*/
/*  background-color: rgb(255 255 255) !important;*/
/*  color: var(--theme-color2) !important;*/
/*  width: 100%;*/
/*  border: 1px solid var(--theme-color2) !important;*/
/*}*/
.guided-bg1-download-specifications-btn i {
  background: var(--bg-medium-pink);
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin-left: 50px;
  font-size: 12px;
  color: #fff;
}
.guided-bg1-download-specifications-btn:hover.guided-bg1-download-specifications-btn i,
.guided-bg1-download-specifications-btn:active.guided-bg1-download-specifications-btn i{
  background: #fff;
  color: var(--bg-medium-pink) !important;
}

/*.guided-bg1-download-specifications-btn:focus-visible.guided-bg1-download-specifications-btn i{*/
/*  background: var(--bg-medium-pink);*/
/*  color: #fff !important;*/
/*}*/
.guided-bg2 {
  background: var(--bg-light-pink);
  margin-bottom: 2px;
}
.guided-bg2-info-image {
  text-align: center;
  padding: 45px 20px 45px 50px;
  color: white;
  position: relative;
}
.guided-bg2-product-image {
  object-fit: contain;
}
.guided-bg2-product-name {
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-weight: bold;
  font-size: var(--font-size-20);
  color: rgba(30, 38, 78, 1);
}
.guided-bg2-download-specifications-btn {
  background: var(--bg-medium-pink);
  color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-transition: background-color 0.7s ease-out;
  -moz-transition: background-color 0.7s ease-out;
  -o-transition: background-color 0.7s ease-out;
  transition: background-color 0.7s ease-out;
}
.guided-bg2-download-specifications-btn:hover,
.guided-bg2-download-specifications-btn:active{
  background-color: transparent !important;
  color: var(--bg-medium-pink);
  width: 100%;
  border: 1px solid var(--bg-medium-pink) !important;
}
/*.guided-bg2-download-specifications-btn:focus-visible{*/
/*  background-color: var(--bg-medium-pink) !important;*/
/*  color: #fff;*/
/*  width: 100%;*/
/*  border: 1px solid #fff !important;*/
/*}*/
.guided-bg2-download-specifications-btn i {
  background: #fff;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin-left: 50px;
  font-size: 12px;
  color: var(--bg-medium-pink);
}
.guided-bg2-download-specifications-btn:hover.guided-bg2-download-specifications-btn i,
.guided-bg2-download-specifications-btn:active.guided-bg2-download-specifications-btn i{
  background: var(--bg-medium-pink) !important;
  color: #fff !important;
}
/*.guided-bg2-download-specifications-btn:focus-visible.guided-bg2-download-specifications-btn i{*/
/*  background: #fff !important;*/
/*  color: var(--bg-medium-pink) !important;*/
/*}*/

/* Autonomous Forklift CSS */

.autonomous-forklift-bg1 {
  background: var(--bg-dark-yellow);
  margin-bottom: 2px;
}
.autonomous-forklift-bg1-info-image {
  text-align: center;
  padding: 45px 20px 45px 50px;
  color: white;
  position: relative;
}
.autonomous-forklift-bg1-product-image {
  object-fit: contain;
}
.autonomous-forklift-bg1-product-name {
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-weight: bold;
  font-size: var(--font-size-20);
  color: #fff;
}
.autonomous-forklift-bg1-download-specifications-btn {
  background-color: #fff;
  color: var(--theme-color2);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-transition: background-color 0.7s ease-out;
  -moz-transition: background-color 0.7s ease-out;
  -o-transition: background-color 0.7s ease-out;
  transition: background-color 0.7s ease-out;
}
.autonomous-forklift-bg1-download-specifications-btn:hover,
.autonomous-forklift-bg1-download-specifications-btn:active{
  background-color: transparent !important;
  color: rgb(255 255 255) !important;
  width: 100%;
  border: 1px solid #fff !important;
}
/*.autonomous-forklift-bg1-download-specifications-btn:focus-visible{*/
/*  background-color: rgb(255 255 255) !important;*/
/*  color: var(--theme-color2) !important;*/
/*  width: 100%;*/
/*  border: 1px solid var(--theme-color2) !important;*/
/*}*/
.autonomous-forklift-bg1-download-specifications-btn i {
  background: var(--theme-color2);
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin-left: 50px;
  font-size: 12px;
  color: #fff;
}
.autonomous-forklift-bg1-download-specifications-btn:hover.autonomous-forklift-bg1-download-specifications-btn i,
.autonomous-forklift-bg1-download-specifications-btn:active.autonomous-forklift-bg1-download-specifications-btn i {
  background: #fff !important;
  color: var(--theme-color2) !important;
}

/*.autonomous-forklift-bg1-download-specifications-btn:focus-visible.autonomous-forklift-bg1-download-specifications-btn i {*/
/*  background: var(--theme-color2) !important;*/
/*  color: #fff !important;*/
/*}*/
.autonomous-forklift-bg2 {
  background: var(--bg-light-yellow);
  margin-bottom: 2px;
}
.autonomous-forklift-bg2-info-image {
  text-align: center;
  padding: 45px 20px 45px 50px;
  color: white;
  position: relative;
}
.autonomous-forklift-bg2-product-image {
  object-fit: contain;
}
.autonomous-forklift-bg2-product-name {
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-weight: bold;
  font-size: var(--font-size-20);
  color: rgba(30, 38, 78, 1);
}
.autonomous-forklift-bg2-download-specifications-btn {
  background: var(--bg-dark-yellow);
  color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-transition: background-color 0.7s ease-out;
  -moz-transition: background-color 0.7s ease-out;
  -o-transition: background-color 0.7s ease-out;
  transition: background-color 0.7s ease-out;
}
.autonomous-forklift-bg2-download-specifications-btn:hover,
.autonomous-forklift-bg2-download-specifications-btn:active{
  background-color: transparent !important;
  color: var(--bg-dark-yellow) !important;
  width: 100%;
  border: 1px solid var(--bg-dark-yellow) !important  ;
}

/*.autonomous-forklift-bg2-download-specifications-btn:focus-visible{*/
/*  background-color: var(--bg-dark-yellow) !important;*/
/*  color: #fff !important;*/
/*  width: 100%;*/
/*  border: 1px solid #fff !important  ;*/
/*}*/
.autonomous-forklift-bg2-download-specifications-btn i {
  background: #fff;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin-left: 50px;
  font-size: 12px;
  color: var(--bg-dark-yellow);
}
.autonomous-forklift-bg2-download-specifications-btn:hover.autonomous-forklift-bg2-download-specifications-btn i,
.autonomous-forklift-bg2-download-specifications-btn:active.autonomous-forklift-bg2-download-specifications-btn i {
  background: var(--bg-dark-yellow) !important;
  color: #fff !important;
}

/*.autonomous-forklift-bg2-download-specifications-btn:focus-visible.autonomous-forklift-bg2-download-specifications-btn i {*/
/*  background: #fff !important;*/
/*  color: var(--bg-dark-yellow) !important;*/
/*}*/

.video-btn {
  background-color: rgb(23 29 60 / 1);
  color: #fff;
  border: 2px solid rgb(23 29 60 / 1);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-transition: background-color 0.7s ease-out;
  -moz-transition: background-color 0.7s ease-out;
  -o-transition: background-color 0.7s ease-out;
  transition: background-color 0.7s ease-out;
}
.video-btn i {
  background: #fff;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin-left: 50px;
  font-size: 12px;
  color: rgb(23 29 60 / 1);
}

.video-btn:hover,
.video-btn:active,
.video-btn:focus {
  background-color: rgb(23 29 60 / 1);
  color: rgb(255, 255, 255);
  border: 2px solid #ff0000;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-transition: background-color 0.7s ease-out;
  -moz-transition: background-color 0.7s ease-out;
  -o-transition: background-color 0.7s ease-out;
  transition: background-color 0.7s ease-out;
}
.video-btn:hover.video-btn i,
.video-btn:active.video-btn i,
.video-btn:focus.video-btn i {
  background: rgb(255, 255, 255);
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin-left: 50px;
  font-size: 12px;
  color: rgb(23 29 60 / 1);
}
.a-link{
  color: #fff;
  text-decoration: none;
}

.a-link:hover, .a-link:focus, .a-link:active{
  color: #ff0000;
}

@media (max-width: 576px) {
  .sub-heading {
    font-size: 20px;
  }
  .lidar-bg1-image,
  .lidar-bg2-image {
    text-align: center;
    padding: 45px 30px 45px 30px;
  }
  .lidar-bg1-product-name,
  .lidar-bg2-product-name {
    position: absolute;
    right: 8%;
  }
  .product-cat1-bg-card1-product-weight, .product-cat1-bg-card2-product-weight, 
  .product-cat2-bg-card1-product-weight, .product-cat2-bg-card2-product-weight, 
  .product-cat3-bg-card1-product-weight, .product-cat3-bg-card2-product-weight {
    right: 16px;
    top: 35%;
  }
  .product-img{
    width: 85%;
  }
}

/* @media (min-width:1420px) and (max-width: 2220px) {
    .projects-card {
        height: 30vh;
    }
} */

/* Blogs page css */

.table-of-content-bg {
    background-color: #f7f4f5;
    padding: 15px;
}
.table-of-contents-heading {
    font-family: var(--title-font);
    font-size: 17px;
    font-weight: 500;
    line-height: 21px;
    color: #050817;
}
.table-of-contents {
    color: #ff0000;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    text-decoration: none;
}
.product-icon{
  width: 75px;
}
/*.table-of-contents:hover, .table-of-contents:focus {*/
/*    color: #171D3C;*/
/*}*/

/*.table-of-contents:hover li.tc-no::marker,*/
/*.table-of-contents:focus li.tc-no::marker {*/
/*    color: #171D3C;*/
/*}*/
/*ol hover*/
  ol .tc-no {
      color: #ff0000;
      cursor: pointer;
      padding: 8px 0;
      transition: color 0.3s ease;
    }

    /* Style for markers */
    ol .tc-no::marker {
      color: #ff0000;
      transition: color 0.3s ease;
    }

    /* Change marker color and link color on hover */
    ol .tc-no:hover::marker {
      color: #171d3c;
    }

    ol .tc-no a {
      text-decoration: none;
      color: #ff0000;
      transition: color 0.3s ease;
    }

    ol .tc-no:hover a {
      color: #171d3c;
    }
/*ol hover*/

/*li.tc-no::marker {*/
/*    color: #ff0000 !important;*/
/*}*/
.blog-heading {
    font-family: var(--title-font);
    font-size: 42px;
    font-weight: 500;
    line-height: 46px;
    letter-spacing: 0.02em;
}
.blogs-content-scrollbar {
    overflow-y: auto;
    height: 89vh;
    margin-bottom: 20px;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    overflow-x: hidden;
}
.arcs-register-email-bg {
    background-color: #181e3d;
    text-align: center;
}
.blogs-content {
    color: rgb(112, 112, 112);
}
.blogs-contents-headings {
    font-family: var(--title-font);
    font-weight: 500;
    line-height: 34px;
    letter-spacing: 0em;
    text-align: left;
    color: #ff0000;
    padding-bottom: 10px;
    padding-top: 18px;
    margin-bottom: 0px;
    text-transform: math-auto;
    font-size: 28px;
}
.arcs-rgb-icons-div {
    border: 1px solid rgba(24, 30, 61, 0.35);
    border-radius: 10px;
    align-items: center !important;
    justify-content: space-between !important;
    display: flex !important;
}
.rgb-linkedin-icon {
    color: rgb(10, 102, 194);
    font-size: 30px;
}
.rgb-twitter-icon {
    color: rgb(29, 161, 242);
    font-size: 30px;
}
.rgb-fb-icon {
    color: rgb(24, 119, 242);
    font-size: 30px;
}

.product-card {
  position: relative;
  padding: 20px;
  text-align: center;
  /* height: 300px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.product-card>img{
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 1.5));
}
.product-card .guided-img{
     max-width: 100%;
  height: auto;
  /* max-height: 160px; */
  margin: 0 74px 10px !important;
}

.vertical-text-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: var(--font-size-26);
  font-weight: var(--font-weight-500);
  white-space: nowrap;
}

.vertical-text-right {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
  font-size: clamp(14px, 4vw, 24px);
  font-weight: bold;
  white-space: nowrap;
}
.bg-lidar-1{
  background: var(--theme-color2);
}
.text-lidar-1-l{
    color: var(--theme-color1);
}
.text-lidar-1-r{
    color: rgba(255, 255, 255, 0.5);
}
.bg-lidar-2{
        background: var(--theme-color-gray);
}
.text-lidar-2-l{
        color: var(--theme-color2);
}
.text-lidar-2-r{
        color: rgba(23, 29, 60, 0.5);
}

.bg-guided-1{
    background: var(--bg-medium-pink);
}
.bg-guided-2{
    background: var(--bg-light-pink);
}

.text-guided-1-l{
               color: var(--theme-color1);
}
.text-guided-1-r{
      color: rgba(255, 255, 255, 0.5);
}

.text-guided-2-l{
           color: rgba(23, 29, 60, 1);
}
.text-guided-2-r{
       color: rgba(23, 29, 60, 0.5);
}

.bg-forklift-1{
    background: var(--bg-dark-yellow);
}
.bg-forklift-2{
       background: var(--bg-light-yellow);
}

.text-forklift-1-l{
    color: var(--theme-color1);
}
.text-forklift-1-r{
    color: rgba(255, 255, 255, 0.5);
}
.text-forklift-2-l{
       color: rgba(23, 29, 60, 1);
}
.text-forklift-2-r{
       color: rgba(23, 29, 60, 0.5);
}


.img-h{
    height: 321px !important;
    object-fit: scale-down;
   width: -webkit-fill-available;
}

.img-h-all{
    height: 349px !important;
    object-fit: scale-down;
    width: -webkit-fill-available;
}

.bg-light-gray{
    background-color: #B3C5DF;
}

.main-title {
    font-family: var(--title-font);
    font-size: clamp(var(--font-size-24), 5vw, var(--font-size-60));
    font-weight: normal;
    /* text-shadow: 2px 2px #ff4824; */
}
.sub-title {
    font-size: clamp(20px, 4vw, 36px);
    font-family: var(--title-font);
    font-weight: 500;
}
.product-description {
    font-size: clamp(var(--font-size-16), 3vw, var(--font-size-18));
}

.sub-heading {
    font-size: clamp(var(--font-size-18), 3.5vw, var(--font-size-24));
    font-family: var(--text-font);
}

.blog-titles {
    font-size: clamp(20px, 4vw, 30px);
}

ul,
ol {
    font-size: clamp(var(--font-size-14), 3vw, var(--font-size-16));
}
p {
    font-size: clamp(var(--font-size-14), 3vw, var(--font-size-16));
}

.product-description {
    font-size: clamp(var(--font-size-16), 3vw, var(--font-size-18));
    margin-bottom: 0px;
}
.card-text {
    font-size: 13px !important; /* default for mobile */
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
    .card-text {
        font-size: 13px !important;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .card-text {
        font-size: 22px !important;
    }
}

.footer-fig {
    font-size: clamp(var(--font-size-14), 3vw, var(--font-size-16));
}
.request-a-quote-text {
    font-size: clamp(var(--font-size-24), 5vw, var(--font-size-40));
}

.display-title {
    font-size: clamp(32px, 7vw, 56px);
    font-family: var(--title-font);
}

.title {
    font-size: clamp(var(--font-size-24), 5vw, var(--font-size-40));
    font-family: var(--title-font);
    font-weight: 500;
}

.product-card img {
    max-width: clamp(70%, 50vw, 70%);

    height: auto;
    /* max-height: 160px; */
    margin: 0 45px 10px;
}

/* custom */
.projects-heading {
    font-size: clamp(16px, 3vw, 20px);
    margin-bottom: 5px;
    font-weight: var(--font-weight-500);
    margin-top: 25px;
}
.project-text {
    font-size: clamp(10px, 2.5vw, 16px);
    text-align: center;
}

.curve_iconss {
    left: 47%;
}
/* 16/07/2025 mobile responsive code  */
@media (max-width: 768px) {
    .responsive-img {
        height: 70px;
        width: 70px;
        object-fit: contain; /* Or cover, if needed */
    }
    .projects-card {
        padding: 3px 3px;
    }
    .projects-heading {
        margin-top: 10px;
    }
    .card-end .sub-heading {
        font-size: 12px !important;
    }
    .top-badge {
        top: 5px;
        right: 5px;
        padding: 7px 7px;
        width: 76px;
        font-size: 13px;
    }
    .img-sz {
        height: 100%;
    }

    .top-h {
        height: 90px !important;
    }
    .main__imgs {
        left: 0 !important;
        width: -webkit-fill-available;
    }
    .main__imgs > .curve__iconss {
        left: 0%;
    }
    .main__imgs .curve__iconss {
        height: 169px !important;
        object-fit: scale-down;
        object-position: 101px 27px;
        width: -webkit-fill-available;
    }
    .second__img {
        height: 400px;
    }

    .second__img,
    .curve__icons {
        height: 390px !important;
        object-fit: scale-down;
        object-position: 0px 43px;
    }
}

.navbar-toggler:focus,
.btn-close:focus {
    box-shadow: none !important;
}

@media (max-width: 990px) {
    /* drop down */
    .dropdown-menu a.dropdown-item.h-menu-dropdown-item {
        padding-top: 0px;
        padding: 5px;
        border-left: none;
        margin: 0;
        width: auto;
        font-size: 14px;
    }
    .dropdown-item.h-menu-dropdown-item:focus,
    .dropdown-item.h-menu-dropdown-item:hover {
        color: #ff0000;
        background-color: transparent;
        border-left: none !important;
    }
    .dropdown-divider {
        border-top: 1px solid #a2a6b7;
        margin: 0px;
    }
    .dropdown-menu::before {
        content: " ";
        position: absolute;
        display: none;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 0 solid transparent;
        border-right: 0 solid transparent;
        border-bottom: 0 solid #fff;
        z-index: 1001;
        opacity: 1;
        top: -8px;
        left: 0%;
    }
    .dropdown-menu[data-bs-popper] {
        margin-top: 0%;
        left: -0%;
        width: 100%;
        border: 0;
        background-color: inherit;
        padding: 3px;
    }

    .navbar-expand-lg .navbar-nav .nav-item .nav-link {
        border-bottom: 1px solid #a2a6b7;
        font-size: 16px;
    }
    .mobile-ul > .nav-items,
    .dropdown {
        gap: 10px;
    }
    #navbarSupportedContent {
        margin-top: 12px;
    }
    .dropdown-toggle {
        padding-left: 10px;
    }
    .border-top-mobile {
        border-top: 1px solid #a2a6b7;
    }
    .ps-11 {
        padding-left: 11px;
    }
}
/* 16/07/2025 */
.h-lg-100 {
    height: auto;
}
@media (min-width: 992px) {
    .h-lg-100 {
        height: 100%;
    }
    .equal-col {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}
@media (min-width: 768px) {
    .h-md-100 {
        height: 100%;
    }
}


/*Robotics Css*/


.img-overly-cls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(23, 29, 60, 0.5);
  z-index: 1;
}
.about-imgs {
  width: 100%;
  height: calc(300px + 10vw); /* Base height 400px + 10% of viewport width */
  object-fit: contain;
  object-position: center;
}



/* blog section */
.about-img-blog{
   width: 100%;
  height: calc(200px + 10vw); /* Base height 400px + 10% of viewport width */
  object-fit: contain;
  object-position: center;
}
/* blog section */

/* Adjust object-position slightly on very small screens */
@media (max-width: 575.98px) {
  .about-imgs {
    height: calc(250px + 5vw);
    object-position: center;
  }
}

.text-orange {
  color: rgba(243, 9, 9, 1);
}

.box-sd {
  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

/* .video_outer{
    height: calc(380px + 10vw);
    object-fit: cover;
    object-position: center;
   
} */

.bg-overly-v {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(23, 29, 60, 0.5);
  z-index: 0;
}
.home-softwares-bgs {
  clip-path: polygon(0 69%, 100% 69%, 100% 100%, 0% 100%);
  position: absolute;
  inset: 0;
  z-index: 0;
}

.inp-fild {
  padding: 11px 5px;
  border-radius: 10px;
}

.inp-fild:focus {
  box-shadow: none !important;
  border-color: var(--bg-theme-color4);
}
.iti__search-input:focus-visible {
  box-shadow: none !important;
  border-color: var(--bg-theme-color4);
}
.iti {
  display: block !important;
}

.bg-gary{
  background-color: var(--theme-color-light-grey) !important;
}
.bg-orange {
  background-color: var(--bg-theme-color3);
}
.bg-orange:hover {
  background-color: var(--bg-theme-color3);
}
.bg-orange:active {
  background-color: var(--bg-theme-color3) !important;
}
.rc-anchor-light.rc-anchor-normal,
.rc-anchor-light.rc-anchor-compact {
  border-radius: 10px !important;
}

.bg-clip-white {
  background-color: var(--text-color-bg-theme-color2);
  clip-path: polygon(0 48%, 100% 37%, 100% 100%, 0% 100%);
  position: absolute;
  inset: 0;
  z-index: 0;
}

.img-sz {
  height: 360px;
  width: 100%;
  object-fit: contain;
}

.home-softwares-contents {
  position: relative;
  z-index: 1;
  margin-bottom: 40px;
}
/* Adjust object-position slightly on very small screens */
@media (max-width: 575.98px) {
  .home-softwares-contents {
    position: relative;
    z-index: 1;
    margin-bottom: 5px;
  }
}

.img-overly-cl {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(23, 29, 60, 0.5);
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
.about-img {
  width: 100%;
  height: calc(365px + 10vw); /* Base height 400px + 10% of viewport width */
  object-fit: cover;
  object-position: 10% 44%;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
.video-main-vd{
   width: 100%;
  height: calc(400px + 10vw); /* Base height 400px + 10% of viewport width */
  object-fit: cover;
  object-position: 10% 44%;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

@media (max-width: 480px) {
  .video-main-vd,.vd-img {
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%) !important;
  }
}

/* Tablet and down */
@media (max-width: 768px) {
  .products-navbar,.outer-clip {
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 100%);
  }
}

.outer-clip{
   clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
}
/* Mobile screens */
@media (max-width: 480px) {
  .products-navbar,.outer-clip {
    clip-path: polygon(0 3%, 100% 0, 100% 100%, 0% 100%);
  }
}

.clip-paths-starts {
  position: relative;
  background-color: #f1f1f1;
  clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
}

.clip-paths-starts-blue {
  position: relative;
  background-color: var(--bg-theme-color4);
  clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
}

/* Adjust object-position slightly on very small screens */
@media (max-width: 575.98px) {
  .about-img {
    height: calc(250px + 5vw);
    object-position: 50% 50%;
  }
  .home-softwares-content {
    position: relative;
    z-index: 1;
    margin-bottom: 60px;
  }
}

.texts-shadow {
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.8);
}

.icon-outer {
  background-color: #ff0000;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-card {
  height: 370px;
  width: 100%;
  object-fit: cover;
}

.text-red {
  color: #ff0000;
}

.owl-dots {
  text-align: center;
  padding-top: 15px;
}
.owl-dots button.owl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: #ccc;
  margin: 0 3px;
}
.owl-dots button.owl-dot.active {
  background-color: #171d3c !important;
}
.owl-dots button.owl-dot {
  background-color: #171d3c80 !important;
}
.owl-dots button.owl-dot:focus {
  outline: none;
}

.text-gray {
  color: #cbd5e1;
}

/* toggle btn */
.toggle-switch {
      display: inline-flex;
    align-items: center;
    background: #A24545;
    border-radius: 50px;
    font-size: 21px !important;
    padding: 5px 10px;
    cursor: pointer;
    user-select: none;
    position: relative;
    width: 250px;
    height: 65px;
    transition: background 0.4s ease;
    outline: none;
}

.toggle-ball {
  background: #fff;
    border-radius: 50%;
    width: 53px;
    height: 53px;
    position: absolute;
    /* top: 5px; */
    left: 78%;
    color: #171d3c;
    transition: left 0.4s ease;
}

.toggle-switch:not(.active) {
  background: rgba(0, 123, 255, 1);
}

.toggle-switch:not(.active) .toggle-ball {
  left: -2px;
}

.toggle-label {
  flex: 1;
  margin: 0 10px;
  font-size: 24px;
  position: absolute;
  width: 100%;
  color: #fff;
  pointer-events: none;
}

.toggle-switch.active .toggle-label {
  text-align: start;
}

.toggle-switch:not(.active) .toggle-label {
  text-align: center;
}

.content-box {
  margin-top: 20px;
  transition: all 0.3s ease;
}

.top-badge {
  top: 16px;
  right: 16px;
  color: #cbd5e1;
  padding: 7px 20px;
  border-radius: 10px;
  width: 120px;
  text-align: center;
}

.border-white {
  border-left: 3px solid #f1f1f1;
  border-right: 3px solid #f1f1f1;
  border-bottom: 3px solid #f1f1f1;
}

.circle-box {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
}

.top-right {
  right: 12px;
  bottom: 14px;
  margin-left: 16px;
  margin-top: 10px;
}

.blog-img {
  height: 187px;
  width: 100%;
  object-position: center;
}

.home-softwares-bgss {
  background-color: var(--text-color-bg-theme-color4);
  clip-path: polygon(0 50%, 100% 40%, 100% 100%, 0% 100%);
  position: absolute;
  inset: 0;
  z-index: 0;
}

.curve__icon{
  height: 366px;
  object-fit: scale-down;
  object-position: -15px 55px;
}

.curve__iconss{
   height: 366px;
  object-fit: scale-down;
  object-position: 9px 55px;
}
.curve__icons{
   height: 500px;
  object-fit: scale-down;
  object-position: 1px -16px;
}
.curve__iconsb{
   height: 500px;
  object-fit: scale-down;
  object-position: 1px -7px;
}

.border-blue{
  border: 2px solid #171d3c;
}


.card-header-cl{
  background-color: #0090d2;
}
.card-bodys{
      background: #ffffff;
    color: var(--theme-color4);
}

.fs-30{
  font-size: 30px;
}

.projects-card:hover{
  background: #c369696b;
}
.projects-card{
transition: background 0.4s ease;
}

.test-h{
  height: clamp(0px, 40vw, 460px);

}
/* cat back */

.vertical-headings {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-weight: 500;
}

/* Mobile screens */
@media (max-width: 990px) {
  .vertical-headings {
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
    margin: 20px 0px;
    text-align: center;
  }
}



  .vertical-headings {
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
    margin: 20px 0px;
    text-align: center;
  }/* default for mobile */


/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
 .vertical-headings {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-weight: 500;
}

}

/* Desktop */
@media (min-width: 992px) {
  .vertical-headings {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-weight: 500;
}

}


/* ripple */



.ripple {
  box-sizing:border-box;
  position:relative;
}

.ripple:before {
  animation:ripple 2s ease-out infinite;
  border:solid 2px #ffffff;
  border-radius:50%;
  bottom:0;
  box-sizing:border-box;
  content:"";
  left:0;
  position:absolute;
  right:0;
  top:0;
}

.ripple:after {
  animation:ripple 2s 1s ease-out infinite;
  border:solid 2px #ffffff;
  border-radius:50%;
  bottom:0;
  box-sizing:border-box;
  content:"";
  left:0;
  position:absolute;
  right:0;
  top:0;
}

@keyframes ripple {
  0% {
    opacity:1;
  }
  100% {
    border-radius:50%;
    opacity:0;
    transform:scale(1.7);
  }
}
.sf-logo{
      height: 178px;
       width: 100%;
  max-width: 346px;

}