:root {
  --clr-black: #192020;
  --clr-white: #ffffff;
  --clr-light-green: #b5f1cc;
  --clr-light-pink: #ffc0d9;
  --clr-light-purple: #d0bfff;
  --clr-off-white: #f0f0f0;
  --clr-light-orenge: #ffd8c0;
  --clr-light-grey-2: #f7f7f7;
  --clr-dark-black: #3b4040;
  --clr-light-grey: #252b2b;
  --clr-off-grey: #f7f7f7;
  --clr-dark-grey: #e8e8e8;
  --clr-light-blue: #9fe9f6;
  --clr-blue: #ed184f;
  --clr-ppc-black: #111;
  --heading-custom-color: #ececec;
  --custom-color: #aaaaaa;
  --clr-light-brown: #ffd8c0;

  --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.746 3.329a1 1 0 0 0-1.415 0l-7.294 7.294-7.294-7.294a1 1 0 1 0-1.414 1.414l7.294 7.294-7.294 7.294a1 1 0 0 0 1.414 1.415l7.294-7.295 7.294 7.295a1 1 0 0 0 1.415-1.415l-7.295-7.294 7.295-7.294a1 1 0 0 0 0-1.414Z' fill='%230F0F0F'/%3E%3C/svg%3E");
}
 

.icon {
  display: block;
  position: relative;
}

.icon::before {
  content: "";
  background-color: #192020;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}
 

/* Chrome, Safari, Edge, Opera */
 

/*--- font-family start ---*/
@font-face {
  font-family: "Poppins";
  src: url("./../web-fonts/Poppins-Bold.woff2") format("woff2"), url("./../web-fonts/Poppins-Bold.woff") format("woff"),
    url("./../web-fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./../web-fonts/Poppins-Medium.woff2") format("woff2"),
    url("./../web-fonts/Poppins-Medium.woff") format("woff"),
    url("./../web-fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./../web-fonts/Poppins-Light.woff2") format("woff2"),
    url("./../web-fonts/Poppins-Light.woff") format("woff"), url("./../web-fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./../web-fonts/Poppins-SemiBold.woff2") format("woff2"),
    url("./../web-fonts/Poppins-SemiBold.woff") format("woff"),
    url("./../web-fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./../web-fonts/Poppins-Thin.woff2") format("woff2"), url("./../web-fonts/Poppins-Thin.woff") format("woff"),
    url("./../web-fonts/Poppins-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./../web-fonts/Poppins-Regular.woff2") format("woff2"),
    url("./../web-fonts/Poppins-Regular.woff") format("woff"),
    url("./../web-fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.br-24 {
  border-radius: 24px;
}

@media screen and (max-width: 1023px) {
  .br-24 {
    border-radius: 16px;
  }
}

.font-24 {
  font-size: 24px;
  line-height: 2rem;
}

@media screen and (max-width: 1365px) {
  .font-24 {
    font-size: 22px;
    line-height: 1.9rem;
  }
}

@media screen and (max-width: 1199px) {
  .font-24 {
    font-size: 18px;
    line-height: 2rem;
  }
}

@media screen and (max-width: 1023px) {
  .font-24 {
    font-size: 18px;
    line-height: 1.8rem;
  }
}

.font-26 {
  font-size: 26px;
  line-height: 2rem;
}

@media screen and (max-width: 1365px) {
  .font-26 {
    font-size: 22px;
    line-height: 1.8rem;
  }
}

@media screen and (max-width: 991px) {
  .font-26 {
    font-size: 21px;
    line-height: 1.7rem;
  }
}

@media screen and (max-width: 575px) {
  .font-26 {
    font-size: 20px;
    line-height: 1.5rem;
  }
}
@media screen and (max-width: 340px) {
  .font-26 {
    font-size: 19px;
    line-height: 1.5rem;
  }
}

.poppins-medium {
  font-weight: 500;
}

.material-symbols-rounded {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.material-symbols-rounded img{
  height: 35px;
}

.link {
  color: #ed184f;
  text-decoration: underline;
}

.link:hover {
  color: #ed184f;
  text-decoration: underline;
}


.link-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


.link-white .icon::before {
  background-color: #192020;
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

@media screen and (max-width: 767px) {
  
  .link-white .icon::before {
    transform: rotate(45deg);
  }
}


.link-white:hover .icon::before,
.link-white:focus .icon::before {
  opacity: 1;
  transform: rotate(45deg) scale(1.05);
}

/*--- var css start ---*/
  
/*--- section life culture css  Start ---*/

@-webkit-keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@media only screen and (max-width: 1024px) {
  @-webkit-keyframes marquee {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-125%);
    }
  }

  @keyframes marquee {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-125%);
    }
  }
}

@media only screen and (max-width: 768px) {
  @-webkit-keyframes marquee {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-166.65%);
    }
  }

  @keyframes marquee {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-166.65%);
    }
  }
}

@-webkit-keyframes marqueereverse {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes marqueereverse {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@media only screen and (max-width: 1024px) {
  @-webkit-keyframes marqueereverse {
    0% {
      transform: translateX(-125%);
    }

    100% {
      transform: translateX(0);
    }
  }

  @keyframes marqueereverse {
    0% {
      transform: translateX(-125%);
    }

    100% {
      transform: translateX(0);
    }
  }
}

@media only screen and (max-width: 768px) {
  @-webkit-keyframes marqueereverse {
    0% {
      transform: translateX(-166.65%);
    }

    100% {
      transform: translateX(0);
    }
  }

  @keyframes marqueereverse {
    0% {
      transform: translateX(-166.65%);
    }

    100% {
      transform: translateX(0);
    }
  }
}

.we-serve {
  color: var(--clr-white);
}

.we-serve .swiper-slide {
  width: 500px;
}

@media only screen and (max-width: 1599px) {
  .we-serve .swiper-slide {
    width: 450px;
  }
}

@media only screen and (max-width: 767px) {
  .we-serve .swiper-slide {
    width: 90%;
  }
}

@media only screen and (min-width: 1500px) {
  .custom-ind-slider {
    width: calc((100vw + 1455px) / 2);
    margin-left: auto;
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  /* Ensure the case-collpase div is closed by default */

  /* Rotate the down arrow by default */
  .more img {
    transition: transform 0.3s ease;
  }
}


/* new section */

.category-main {
  width: 100%;
}

.category {
  display: flex;
  justify-content: center; /* Center buttons */
  flex-wrap: nowrap;
  overflow-x: auto;
}

.category-btn {
  margin: 2px;
  padding: 10px 0;
  border-radius: 5px;
  width: 138px;
  flex-shrink: 0;
  background-color: #3b4141;
  color: #fff; /* Default text color */
  cursor: pointer;
}

.category-btn:hover{
  background-color: #3B4141;
}

.category-btn.active {
  background-color: #2d3030; /* Active button background */
  color: #fff; /* Active button text color */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth transition for showing/hiding portfolio items */
.portfolio {
  opacity: 1;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: none; /* Initially hidden */
}

/* When portfolio item is visible */
.portfolio.visible {
  opacity: 1;
  z-index: 1111;
  transform: translateY(0);
  display: block; /* Make it visible when the class is added */
}

.portfolio-card .portfolio-card-body img{
  border-radius: 25px;
  height: 400px;
  object-fit: cover;
}

.portfolio-content{
  background-color: #3b4141;
  padding: 15px;
  border-radius: 25px;
  height: 400px;
  overflow-x: auto;
  scrollbar-width: none;
}

.btn-white {
  text-transform: uppercase;
  color: #192020;
  padding: 15px 25px 12px 25px;
  justify-content: center;
  border-radius: 30px;
  background: #fff;
  display: inline-flex;
  position: relative;
  gap: 10px;
  align-items: center;
  overflow: hidden;
  -webkit-clip-path: inset(0 round 10px);
  clip-path: inset(0 round 10px);
  border: 1px solid #fff;
  transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, background-color 0.3s ease,
    outline 0.3s ease;
}

@media screen and (max-width: 1599px) {
  .btn-white {
    padding: 12px 22px 8px 22px;
  }
}

@media screen and (max-width: 1199px) {
  .btn-white {
    transition: none;
  }
}

@media screen and (max-width: 767px) {
  .btn-white {
    padding: 10px 20px 7px 20px;
    gap: 6px;
  }
}
@media screen and (max-width: 640px) {
  .btn-white {
    padding: 10px 16px 7px 16px;
    gap: 6px;
  }
}
@media screen and (max-width: 575px) {
  .btn-white {
    gap: 3px;
  }
}

.btn-white--black-border {
  border: 1px solid #192020;
  transition: color 0.3s ease, box-shadow 0.6s ease;
}

.btn-white::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #192020;
  top: 0;
  left: 0;
  border-radius: 30px;
  pointer-events: none;
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s;
}

.btn-white span {
  position: relative;
}

.btn-white .icon {
  transition: transform 0.3s ease;
}

@media screen and (max-width: 1199px) {
  .btn-white .icon {
    transition: none;
    transform: rotate(45deg);
  }
}

.btn-white:focus .icon::before,
.btn-white:hover .icon::before {
  background-color: #fff;
}
@media only screen and (max-width: 1199px) {
  .btn-white:focus .icon::before,
  .btn-white:hover .icon::before {
    background-color: #192020;
    transition: none;
  }
}

.btn-white:focus,
.btn-white:hover {
  color: #fff;
  box-shadow: inset 0 0 0 2px #192020;
}

@media only screen and (max-width: 1199px) {
  .btn-white:focus,
  .btn-white:hover {
    color: #192020;
    box-shadow: none;
  }
}

.btn-white:focus::before,
.btn-white:hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
}

@media only screen and (max-width: 1199px) {
  .btn-white:focus::before,
  .btn-white:hover::before {
    display: none;
  }
}

.btn-white:focus .icon,
.btn-white:hover .icon {
  transform: rotate(45deg);
}

.icon-arrow {
  width: 24px;
  height: 24px;
}

.icon-arrow::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cmask id='mask0_1012_4796' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='25'%3E%3Crect y='0.5' width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1012_4796)'%3E%3Cpath d='M16.9989 8.5538L6.07972 19.473C5.94125 19.6115 5.76722 19.6823 5.55762 19.6855C5.348 19.6887 5.17076 19.6179 5.02589 19.473C4.88103 19.3282 4.80859 19.1525 4.80859 18.9461C4.80859 18.7397 4.88103 18.5641 5.02589 18.4192L15.9451 7.49998H9.74892C9.53644 7.49998 9.35832 7.42807 9.21457 7.28425C9.07082 7.14045 8.99894 6.96225 8.99894 6.74965C8.99894 6.53707 9.07082 6.35898 9.21457 6.2154C9.35832 6.0718 9.53644 6 9.74892 6H17.5951C17.8512 6 18.0658 6.08663 18.239 6.25988C18.4123 6.43311 18.4989 6.64777 18.4989 6.90385V14.75C18.4989 14.9625 18.427 15.1406 18.2832 15.2844C18.1394 15.4281 17.9612 15.5 17.7486 15.5C17.536 15.5 17.3579 15.4281 17.2143 15.2844C17.0707 15.1406 16.9989 14.9625 16.9989 14.75V8.5538Z' fill='%23192020'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cmask id='mask0_1012_4796' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='25'%3E%3Crect y='0.5' width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1012_4796)'%3E%3Cpath d='M16.9989 8.5538L6.07972 19.473C5.94125 19.6115 5.76722 19.6823 5.55762 19.6855C5.348 19.6887 5.17076 19.6179 5.02589 19.473C4.88103 19.3282 4.80859 19.1525 4.80859 18.9461C4.80859 18.7397 4.88103 18.5641 5.02589 18.4192L15.9451 7.49998H9.74892C9.53644 7.49998 9.35832 7.42807 9.21457 7.28425C9.07082 7.14045 8.99894 6.96225 8.99894 6.74965C8.99894 6.53707 9.07082 6.35898 9.21457 6.2154C9.35832 6.0718 9.53644 6 9.74892 6H17.5951C17.8512 6 18.0658 6.08663 18.239 6.25988C18.4123 6.43311 18.4989 6.64777 18.4989 6.90385V14.75C18.4989 14.9625 18.427 15.1406 18.2832 15.2844C18.1394 15.4281 17.9612 15.5 17.7486 15.5C17.536 15.5 17.3579 15.4281 17.2143 15.2844C17.0707 15.1406 16.9989 14.9625 16.9989 14.75V8.5538Z' fill='%23192020'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}