.pad-tb {
  padding-top: 100px;
  padding-bottom: 100px;
}
.theme_btn,
.butn {
  border: 1px solid #f7941d;
  font-size: 16px;
  color: #fff;
  padding: 10px 30px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  z-index: 1;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  font-weight: 600;
  background: #f7941d;
  text-decoration: none !important;
  display: inline-block;
  white-space: nowrap;
  border-radius: 5px;
  height: fit-content;
}

.theme_btn:hover,
.butn:hover {
  color: #f7941d;
  background-color: #f7941d;
}

.theme_btn::before,
.butn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: #fff;
  z-index: -1;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.theme_btn:hover::before,
.butn:hover::before {
  width: 100%;
}

.brands_swiper {
  width: 100% !important;
  height: 150px !important;
  display: flex !important;
  align-items: center !important;
}

.brand-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.brand-item img {
  object-fit: contain;
  aspect-ratio: 2/1;
}
.purecounter {
  font-weight: 700;
}
/* Service Css */
.service-area {
  background: url(../images/odoo/home-1.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.single--box {
  text-align: center;
  padding: 16px 19px 19px;
  border: none;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: #1689fc1a;
  height: 100%;
  border: 1px solid #fff;
  border-radius: 10px;
}
.single--box:hover {
  border: 1px solid #1689fc;
}
.single--box:hover::before {
  opacity: 1;
  bottom: 0;
}
.single--box.upper {
  background: #5a49f80d;
  clip-path: inherit;
  &:hover {
    border: 1px solid #e83d62;
  }
}
.single--box.last {
  background: #ffb0000f;
  &:hover {
    border: 1px solid #ffae00;
  }
}
.single--box.four {
  background: #737ee624;
  &:hover {
    border: 1px solid #737fe6;
  }
}
.single--box.five {
  background: #23a8171f;
  &:hover {
    border: 1px solid #23a817;
  }
}
.single--box.six {
  background: #4ec9ff1c;
  &:hover {
    border: 1px solid rgb(0, 255, 255);
  }
}

.service-icon {
  max-height: 120px;
}
.service-icon i {
  position: relative;
  top: 25px;
  color: #fff;
  display: inline-block;
  font-size: 37px;
  z-index: 1;
}
.single---box {
  text-align: center;
  padding: 0 19px 57px;
  border: none;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: transparent;
  margin-bottom: 30px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 94%);
}
.service-shape {
  position: relative;
  top: -5px;
  img{
    max-width: 80px;
  }
}
.service-button a {
  border-radius: 30px;
  color: #1689fc;
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  position: relative;
  letter-spacing: 0;
  transition: 0.5s;
}
.service-button a:hover {
  letter-spacing: 2px;
}
.service-button a i {
  display: inline-block;
  margin-left: 5px;
}

.single--box.upper .service-button a {
  color: #e83d62;
}
.single--box.last .service-button a {
  color: #ffb000;
}
.single--box.four .service-button a {
  color: #737ee6;
}
.single--box.five .service-button a {
  color: #23a817;
}
.single--box.six .service-button a {
  color: #4ec9ff;
}

.service-title h2 {
  margin: 0 0 17px 0;
  font-size: 22px;
  padding: 0;
  text-transform: capitalize;
  font-weight: 600;
  color: #1d2124;
}

.sub-title h5 {
  color: #f7941d;
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 15px 0px;
}
/* CTA Container */
.cta-container {
  background-color: #bb65a4;
}
.cta-container figure {
  margin-left: -120px;
}
/* Why choose */
.card-custom {
  border: none !important;
  padding: 15px;
  transition: all 0.3s ease-in-out;
}
.card-custom .card-body h2 {
  margin: 0 0 17px 0;
  font-size: 22px;
  padding: 0;
  text-transform: capitalize;
  font-weight: 600;
  color: #1d2124;
}
.card-custom i {
  font-size: 24px;
  padding: 10px;
  margin: 0 1px 3px 12px;
}
.card-custom .card-body .icon {
  height: 50px;
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: start;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.card-custom .card-body p {
  margin-bottom: 0;
}
.bg-support {
  background-color: #fef3e4;
}
.card-custom:hover {
  margin: -10px 0px 10px 0px;
  transition: all 0.3s ease-in-out;
}
.card-custom:hover .card-body .icon i {
  z-index: 1;
}
.card-custom:hover .card-body .icon::after {
  transition: all 0.3s ease-in-out;
  opacity: 1;
}
.bg-secure {
  background-color: #fae6e7;
}
.bg-updates {
  background-color: #eaf3ef;
}
.bg-research {
  background-color: #e0e9fa;
}

.ready-to-transform {
background:linear-gradient(145deg, #9bbdfd, #43008d);
  background-position: right center;
  padding: 30px 0;
}

.process__card {
  background: rgb(244, 241, 255) !important;
  border-radius: 10px;
}
.process__card:hover {
  font-size: 60px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.205);
}

.card.card-hover-shadow {
  transition: all 0.3s ease-in-out;
}
.card.card-hover-shadow:hover {
  transition: all 0.3s ease-in-out;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px #1d3a5326;
}

.details {
  text-align: center;
  color: #131313;
}

.details p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #676767;
}

.indus_card {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 1rem;
  width: 100%;
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: whitesmoke;
  height: 100%;
  min-height: 330px;
  transition: all 0.3s;
  border-radius: 10px;
    }

:root {
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
}
.indus_card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position: 0 0;
  transition: transform calc(var(--d) * 1.5) var(--e);
  pointer-events: none;
  transition: all 0.3s;
}
.indus_card.one:before {
  background-image: url(../images/odoo/healthcare.png);
}
.indus_card.two:before {
  background-image: url(../images/odoo/manufacturing.png);
}
.indus_card.three:before {
  background-image: url(../images/odoo/entertainment.png);
}
.indus_card.four:before {
  background-image: url(../images/odoo/logistics.png);
}
.indus_card.five:before {
  background-image: url(../images/odoo/ecommerce.png);
}
.indus_card.six:before {
  background-image: url(../images/odoo/real-estate.png);
}
.indus_card.seven:before {
  background-image: url(../images/odoo/retail.png);
}
.indus_card.eight:before {
  background-image: url(../images/odoo/financial-services.png);
}
.content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px;
  transition: transform var(--d) var(--e);
  z-index: 1;
  border-radius: 10px;
  max-height: 42px;
}
.content > * + * {
  margin-top: 0rem;
}
.indus_card .title {
  font-size: 18px;
  font-weight:500;
}

.indus_card .copy{
  color: grey;
}

@media (hover: hover) and (min-width: 200px) {
  .indus_card:after {
    transform: translateY(0);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }
  .content {
    transform: translateY(calc(100% - 2.5rem));
    background-color: white;
    height: 100%;
    color: black;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }
  .content > *:not(.title) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }
  .indus_card:hover:before,
  .indus_card:focus-within:before {
    transform: translateY(-4%);
  }
  .indus_card:hover{
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.151);
    .content{
      max-height:none;
      height: 100%;
      color: black;
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 15px;
      transition: transform var(--d) var(--e), opacity var(--d) var(--e);
    }
  }

  .indus_card:hover .content,
  .indus_card:focus-within .content {
    transform: translateY(0);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }
  .indus_card:hover .content > *:not(.title),
  .indus_card:focus-within .content > *:not(.title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--d) / 4);
  }
}