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

:root {
  --font_family_roboto: "Roboto", sans-serif;
  --theme_green: #347861;
  --theme_red: #aa313a;
  --text_white: #ffffff;
  --theme_body_p: #605c5c;
  --theme_body_h: #19232b;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--font_family_roboto);
  overflow-x: hidden !important;
}

.truncate-text-blog-heading {
  overflow: hidden;
  text-overflow: ellipsis; /* Adds "..." at the end of truncated text */
  display: -webkit-box; /* Required for -webkit-line-clamp */
  -webkit-line-clamp: 2; /* Specifies the maximum number of lines */
  -webkit-box-orient: vertical; /* Required for -webkit-line-clamp */
  line-clamp: 2; /* Standard property, but still needs prefixes for wider support */
}
.truncate-text-blog-content {
  overflow: hidden;
  text-overflow: ellipsis; /* Adds "..." at the end of truncated text */
  display: -webkit-box; /* Required for -webkit-line-clamp */
  -webkit-line-clamp: 4; /* Specifies the maximum number of lines */
  -webkit-box-orient: vertical; /* Required for -webkit-line-clamp */
  line-clamp: 4; /* Standard property, but still needs prefixes for wider support */
}
.body_p {
  color: var(--theme_body_p);
}
.body_h {
  color: var(--theme_body_h);
}
.body_p.text-sm.leading-6.space-y-1 ul li {
    list-style: disc;
    margin-left: 12px;
}
.top_head li a {
  background: var(--theme_red);
  display: block;
  border-radius: 100%;
  color: var(--text_white);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
}
.prod h2 {
    font-size: 22px;
    font-weight: 600;
}
.prod h3 {
    font-size: 22px;
    font-weight: 600;
}
.prod h4 {
    font-size: 22px;
    font-weight: 600;
}
.grid.grid-cols-1.lg\:grid-cols-12.gap-5.lg\:gap-10.relative h2 {
    font-size: 22px;
    font-weight: 600;
}
.grid.grid-cols-1.lg\:grid-cols-12.gap-5.lg\:gap-10.relative h3 {
    font-size: 22px;
    font-weight: 600;
}
.grid.grid-cols-1.lg\:grid-cols-12.gap-5.lg\:gap-10.relative h4 {
    font-size: 22px;
    font-weight: 600;
}
.font_family_roboto {
  font-family: var(--font_family_roboto);
}
.top_head li a:hover {
  color: var(--theme_red);
  background: var(--text_white);
}

.top_contact li a i {
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--text_white);
  color: var(--theme_red);
}

.product_box_hover {
  transition: ease-in-out 0.3s;
}
.product_box_hover:hover {
  background: var(--theme_red);
}
.product_box_hover:hover .product_head,
.product_box_hover:hover .product_content {
  color: var(--text_white);
}
.product_box_hover:hover .product_cta_btn a {
  background: var(--text_white);
  color: var(--theme_red);
}

.test-gallery a {
  position: relative;
}
.test-gallery a:hover::before {
  border-radius: 24px 24px 24px 0;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.61);
  width: 100%;
  display: block;
  height: 100%;
}

.shadow-custom {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.bg-size-100 {background-size: 100%;}
.ourproduct-range .swiper-slide-shadow-coverflow {
    display: none;
}
.product-cta {
  color: var(--theme_red);
  font-weight: 500;
  visibility: hidden;
}

.ourproduct-range .swiper-slide-visible.swiper-slide-fully-visible.swiper-slide-active .product-cta {
  visibility: visible;  
  transition: ease-in-out .3s;
}
.btn-gradient-1 {
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, var(--theme_red), var(--theme_green)) 1;
}
.blog-box::before {
  content: '';
  position: absolute;
  background: #19232b94;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}
.blog-box img {
  transition: ease-in-out .8s;
}
.blog-box:hover img {
  transform: scale(1.2);
}
@media (width <= 490px) {
.top_contact span {
    font-size: 12px;
}
}

@media (width >= 1024px) {
    /*Whatsapp-popup*/
.whatapp_cta .wtsapp:focus {
  border: none;
  outline: none;
}
.whatapp_cta .wtsapp {
  transition: all 0.5s ease;
}
.whatapp_cta .wtsapp:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 60px;
  height: 60px;
  background: #347861;
  border-radius: 50%;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  animation: pulse-border 1500ms ease-out infinite;
}
@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

/*Call Me*/
.phone_lefts-side {
  position: relative;
}
.phone_lefts-side a {
  color: white;
  animation: topBottom 4s infinite;
  background: #002f40;
  animation: bounce 4s infinite alternate;
}
.glow {
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #f3fffd, 0 0 20px #f3fffd, 0 0 30px #f3fffd,
      0 0 40px #f3fffd, 0 0 50px #f3fffd, 0 0 60px #f3fffd, 0 0 70px #f3fffd;
  }
  to {
    text-shadow: 0 0 20px #f3fffd, 0 0 30px #f3fffd, 0 0 40px #f3fffd,
      0 0 50px #016098, 0 0 60px #f3fffd, 0 0 70px #f3fffd, 0 0 80px #f3fffd;
  }
}
@keyframes glow {
  from {
    text-shadow: 0 0 10px #f3fffd, 0 0 20px #f3fffd, 0 0 30px #f3fffd,
      0 0 40px #f3fffd, 0 0 50px #f3fffd, 0 0 60px #f3fffd, 0 0 70px #f3fffd;
  }
  to {
    text-shadow: 0 0 20px #f3fffd, 0 0 30px #f3fffd, 0 0 40px #f3fffd,
      0 0 50px #016098, 0 0 60px #f3fffd, 0 0 70px #f3fffd, 0 0 80px #f3fffd;
  }
}
.bounce {
  animation: bounce 965 1.6s ease infinite;
  transform-origin: 50% 50%;
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  12.5% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  62.5% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
}

.swiper-pagination-bullet {
  position: relative;
}

.swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  width: 40px;   /* touch area */
  height: 40px;
}