/*==================================
PAGE BANNER
==================================*/

.page-banner {
  position: relative;

  padding: 180px 0 120px;

  background: url("../images/3.jpeg") center center/cover no-repeat;

  overflow: hidden;
}

.banner-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
rgba(5,35,95,.88),
rgba(0,87,217,.72)
);
}

.banner-content {
  position: relative;

  z-index: 2;

  text-align: center;

  color: #fff;
}

.banner-content span {
  display: block;

  margin-bottom: 18px;

  color: #d4af37;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: 2px;
}

.banner-content h1 {
  font-size: 64px;

  font-weight: 800;

  margin-bottom: 20px;
}

.banner-content p {
  max-width: 700px;

  margin: auto;

  font-size: 18px;

  line-height: 1.9;

  margin-bottom: 30px;
}

.breadcrumb {
  justify-content: center;

  background: transparent;

  margin: 0;

  padding: 0;
}

.breadcrumb-item,
.breadcrumb-item a {
  color: #fff;
}

/*==================================
SERVICES
==================================*/

.services-page {
  padding: 120px 0;

  background: #f8f9fb;
}

.services-page .section-title {
  margin-bottom: 60px;
}

.service-card {
  background: #fff;

  border-radius: 22px;

  overflow: hidden;

  transition: 0.4s;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);

  height: 100%;
}

.service-card:hover {
  transform: translateY(-10px);

  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.12);
}

.service-image {
  overflow: hidden;

  height: 260px;
}

.service-image img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.6s;
}

.service-card:hover .service-image img {
  transform: scale(1.08);
}

.service-content {
  padding: 35px;
}

.service-content h3 {
  font-size: 28px;

  font-weight: 700;

  margin-bottom: 15px;
}

.service-content p {
  color: #666;

  line-height: 1.8;

  margin-bottom: 25px;
}

.service-content a {
  display: inline-block;

  color: #0057D9;

  font-weight: 600;
}

.service-content a:hover {
  color: #111;
}

/*==================================
WHY SERVICE
==================================*/

.service-why {
  padding: 120px 0;

  background: #fff;
}

.service-why-image {
  overflow: hidden;

  border-radius: 22px;
}

.service-why-image img {
  width: 100%;

  transition: 0.6s;
}

.service-why-image:hover img {
  transform: scale(1.05);
}

.service-why-content {
  padding-left: 40px;
}

.service-why-content span {
  display: block;

  color: #0057D9;

  font-weight: 700;

  letter-spacing: 2px;

  margin-bottom: 15px;
}

.service-why-content h2 {
  font-size: 48px;

  font-weight: 800;

  margin-bottom: 25px;

  line-height: 1.2;
}

.service-why-content p {
  color: #666;

  line-height: 1.9;

  margin-bottom: 30px;
}

.service-why-content ul {
  margin-bottom: 35px;
}

.service-why-content ul li {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 16px;

  font-weight: 600;
}

.service-why-content ul li i {
  width: 34px;

  height: 34px;

  border-radius: 50%;

  background: #0057D9;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 14px;
}
/*==================================
WORKING PROCESS
==================================*/

.working-process {
  padding: 120px 0;

  background: #ffffff;
}

.process-box {
  position: relative;

  background: #fff;

  border-radius: 20px;

  padding: 45px 30px;

  text-align: center;

  transition: 0.4s;

  height: 100%;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.process-box:hover {
  transform: translateY(-10px);

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

.process-number {
  position: absolute;

  top: 20px;

  right: 20px;

  font-size: 70px;

  font-weight: 800;

  color: rgba(142, 16, 37, 0.08);

  line-height: 1;
}

.process-icon {
  width: 90px;

  height: 90px;

  margin: auto auto 25px;

  border-radius: 50%;

  background: #0057D9;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.4s;
}

.process-box:hover .process-icon {
  background: #d4af37;

  transform: rotate(8deg);
}

.process-icon img {
  width: 42px;
}

.process-box h4 {
  font-size: 24px;

  font-weight: 700;

  margin-bottom: 15px;
}

.process-box p {
  color: #666;

  line-height: 1.8;

  margin: 0;
}

/*==================================
INDUSTRIES
==================================*/

.service-industries {
  padding: 120px 0;

  background: #f8f9fb;
}

.industry-box {
  background: #fff;

  border-radius: 20px;

  padding: 35px 20px;

  text-align: center;

  transition: 0.35s;

  height: 100%;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.industry-box:hover {
  transform: translateY(-8px);

  background: #0057D9;
}

.industry-box img {
  width: 70px;

  height: 70px;

  margin-bottom: 20px;

  transition: 0.4s;
}

.industry-box:hover img {
  filter: brightness(0) invert(1);
}

.industry-box h5 {
  font-size: 18px;

  font-weight: 600;

  color: #222;

  transition: 0.3s;

  margin: 0;
}

.industry-box:hover h5 {
  color: #fff;
}

/*==================================
CTA
==================================*/

.service-cta {
  position: relative;

  padding: 120px 0;

  background: url("../images/3.jpeg") center center/cover
    no-repeat;

  overflow: hidden;
}

.service-cta .cta-overlay {
  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.7);
}

.cta-content {
  position: relative;

  z-index: 2;

  color: #fff;
}

.cta-content h2 {
  font-size: 54px;

  font-weight: 800;

  margin-bottom: 20px;
}

.cta-content p {
  max-width: 650px;

  line-height: 1.9;

  font-size: 18px;

  margin: 0;
}

.service-cta .theme-btn {
  position: relative;

  z-index: 2;
}

/*==================================
RESPONSIVE
==================================*/

@media (max-width: 1199px) {
  .service-why-content {
    padding-left: 20px;
  }

  .banner-content h1 {
    font-size: 56px;
  }
}

@media (max-width: 991px) {
  .page-banner {
    padding: 160px 0 100px;
  }

  .banner-content h1 {
    font-size: 46px;
  }

  .service-why-content {
    padding-left: 0;

    margin-top: 50px;
  }

  .service-why {
    text-align: center;
  }

  .cta-content {
    text-align: center;

    margin-bottom: 35px;
  }

  .cta-content h2 {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .page-banner {
    padding: 140px 0 80px;
  }

  .banner-content h1 {
    font-size: 36px;
  }

  .banner-content p {
    font-size: 16px;
  }

  .service-content {
    padding: 25px;
  }

  .service-content h3 {
    font-size: 22px;
  }

  .process-box {
    margin-bottom: 30px;
  }

  .process-number {
    font-size: 50px;
  }

  .cta-content h2 {
    font-size: 32px;

    line-height: 1.3;
  }

  .cta-content p {
    font-size: 16px;
  }

  .service-cta .theme-btn {
    width: 100%;

    justify-content: center;
  }
}

@media (max-width: 576px) {
  .banner-content h1 {
    font-size: 30px;
  }

  .service-image {
    height: 220px;
  }

  .process-icon {
    width: 75px;

    height: 75px;
  }

  .process-icon img {
    width: 34px;
  }
}