/*====================================================

ABOUT.CSS
PART-1
AMROS PROJECTS LLP

Sections Covered

1. Page Banner
2. Breadcrumb
3. About Company
4. Vision & Mission

======================================================*/

/* Page banner & Breadcrumbs moved to style.css */

/*=========================================
ABOUT COMPANY
=========================================*/

.about-company {
  background: #fff;

  padding: 60px 0;
}

.about-image {
  position: relative;

  padding-right: 70px;
}

.about-image img {
  width: 100%;

  border-radius: 30px;

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

.about-image::before {
  content: "";

  position: absolute;

  left: -25px;

  top: -25px;

  width: 180px;

  height: 180px;

  border-radius: 30px;

  background: #edf6ff;

  z-index: -1;
}

.about-image::after {
  content: "";

  position: absolute;

  right: 25px;

  bottom: -25px;

  width: 220px;

  height: 220px;

  border-radius: 30px;

  background: #f6fafd;

  z-index: -1;
}

.experience-badge {
  position: absolute;

  right: 0;

  bottom: 45px;

  width: 220px;

  padding: 30px;

  background: #fff;

  border-radius: 28px;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);

  text-align: center;
}

.experience-badge h2 {
  font-size: 60px;

  font-weight: 800;

  color: #005baa;

  margin-bottom: 6px;
}

.experience-badge span {
  display: block;

  font-size: 16px;

  font-weight: 600;

  color: #667085;
}

.about-company .section-heading {
  margin-bottom: 25px;
}

.about-company .section-heading h2 {
  font-size: 30px;

  margin-bottom: 20px;
}

.about-company .section-heading p {
  font-size: 17px;

  margin-bottom: 18px;

  max-width: 100%;
}

/*=========================================
FEATURE BOX
=========================================*/

.feature-box {
  display: flex;

  align-items: flex-start;

  gap: 18px;

  padding: 25px;

  background: #fff;

  border-radius: 22px;

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

  transition: 0.35s;

  height: 100%;
}

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

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

.feature-icon {
  width: 65px;

  height: 65px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 18px;

  background: linear-gradient(135deg, #005baa, #0a84ff);

  flex-shrink: 0;
}

.feature-icon i {
  font-size: 28px;

  color: #fff;
}

.feature-box h5 {
  font-size: 21px;

  margin-bottom: 8px;
}

.feature-box p {
  font-size: 15px;

  margin: 0;

  color: #667085;
}

/*=========================================
VISION & MISSION
=========================================*/

.vision-mission {
  background: #f8fbfd;

  padding: 60px 0;
}

.vision-card {
  background: #fff;

  padding: 30px;

  border-radius: 28px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);

  transition: 0.4s;

  height: 100%;

  position: relative;

  overflow: hidden;
}

.vision-card::before {
  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 5px;

  height: 100%;

  background: linear-gradient(#005baa, #0a84ff);
}

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

  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
}

.vision-icon {
  width: 85px;

  height: 85px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, #005baa, #0a84ff);

  border-radius: 24px;

  margin-bottom: 28px;
}

.vision-icon i {
  font-size: 36px;

  color: #fff;
}

.vision-card h3 {
  font-size: 34px;

  margin-bottom: 18px;
}

.vision-card p {
  font-size: 16px;

  line-height: 1.9;

  margin: 0;

  color: #667085;
}

/*=========================================
SECTION SPACING
=========================================*/

.about-company .row {
  align-items: center;
}

.vision-mission .section-heading {
  margin-bottom: 20px;
}

.vision-mission .section-heading p {
  max-width: 720px;

  margin: auto;
}

/*====================================================

ABOUT.CSS
PART-2

Sections

1. Core Values
2. Chairman Section
3. Timeline
4. Statistics

======================================================*/

/*=========================================
CORE VALUES
=========================================*/

.core-values {
  padding: 60px 0;

  background: #ffffff;

  position: relative;

  overflow: hidden;
}

.core-values::before {
  content: "";

  position: absolute;

  top: -220px;

  right: -220px;

  width: 450px;

  height: 450px;

  border-radius: 50%;

  background: #f4f8fc;
}

.core-values::after {
  content: "";

  position: absolute;

  bottom: -180px;

  left: -180px;

  width: 380px;

  height: 380px;

  border-radius: 50%;

  background: #edf5fc;
}

.value-card {
  position: relative;

  background: #fff;

  padding:20px;

  border-radius: 28px;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.05);

  transition: 0.4s;

  text-align: center;

  overflow: hidden;

  height: 100%;

  z-index: 2;
}

.value-card::before {
  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 0;

  background: linear-gradient(135deg, #005baa, #0a84ff);

  transition: 0.45s;

  z-index: -1;
}

.value-card:hover::before {
  height: 100%;
}

.value-card i {
  font-size: 58px;

  color: #005baa;

  margin-bottom: 25px;

  transition: 0.4s;

  display: block;
}

.value-card h4 {
  font-size: 26px;

  margin-bottom: 18px;

  transition: 0.4s;
}

.value-card p {
  font-size: 15px;

  line-height: 1.9;

  margin: 0;

  transition: 0.4s;
}

.value-card:hover i,
.value-card:hover h4,
.value-card:hover p {
  color: #fff;

  transform: translateY(-3px);
}

/*=========================================
CHAIRMAN
=========================================*/

.chairman-section {
  padding: 60px 0;

  background: #f8fbfd;
}

.chairman-image {
  position: relative;

  padding-right: 40px;
}

.chairman-image img {
  width: 100%;

  border-radius: 30px;

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

.chairman-image::after {
  content: "";

  position: absolute;

  right: 0;

  bottom: -20px;

  width: 170px;

  height: 170px;

  background: #eaf4ff;

  border-radius: 30px;

  z-index: -1;
}

.chairman-section .section-heading {
  margin-bottom: 20px;
}

.chairman-section p {
  font-size: 17px;

  line-height: 1.9;

  margin-bottom: 20px;

  color: #667085;
}

.chairman-section h4 {
  font-size: 26px;

  margin-top: 35px;

  color: #005baa;
}

.chairman-section h4::after {
  content: "";

  display: block;

  margin-top: 12px;

  width: 90px;

  height: 4px;

  background: #005baa;

  border-radius: 50px;
}

/*=========================================
TIMELINE
=========================================*/

.timeline-section {
  padding: 60px 0;

  background: #ffffff;
}

.timeline {
  position: relative;

  max-width: 900px;

  margin: 80px auto 0;

  padding-left: 40px;
}

.timeline::before {
  content: "";

  position: absolute;

  left: 65px;

  top: 0;

  width: 4px;

  height: 100%;

  background: #d8e7f5;
}

.timeline-item {
  position: relative;

  display: flex;

  gap: 40px;

  margin-bottom: 70px;

  align-items: flex-start;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-year {
  min-width: 90px;

  height: 90px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, #005baa, #0a84ff);

  border-radius: 50%;

  font-size: 22px;

  font-weight: 700;

  color: #fff;

  box-shadow: 0 15px 35px rgba(0, 91, 170, 0.35);

  position: relative;

  z-index: 5;
}

.timeline-content {
  background: #fff;

  padding: 20px;

  border-radius: 25px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);

  flex: 1;

  transition: 0.35s;
}

.timeline-content:hover {
  transform: translateY(-8px);
}

.timeline-content h4 {
  font-size: 28px;

  margin-bottom: 12px;
}

.timeline-content p {
  margin: 0;

  font-size: 16px;

  line-height: 1.8;

  color: #667085;
}

/*=========================================
STATISTICS
=========================================*/

.statistics-section {
  padding: 60px 0;

  background: linear-gradient(135deg, #005baa, #0a84ff);
}

.statistics-section .counter-box {
  background: rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  padding: 45px 25px;

  border-radius: 28px;

  text-align: center;

  transition: 0.35s;

  height: 100%;
}

.statistics-section .counter-box:hover {
  transform: translateY(-10px);

  background: rgba(255, 255, 255, 0.18);
}

.statistics-section .counter-box h2 {
  font-size: 60px;

  font-weight: 800;

  color: #fff;

  margin-bottom: 10px;
}

.statistics-section .counter-box span {
  display: block;

  font-size: 16px;

  font-weight: 600;

  color: #fff;

  letter-spacing: 0.5px;
}

/*=========================================
SECTION TITLES
=========================================*/

.core-values .section-heading,
.timeline-section .section-heading,
.statistics-section .section-heading {
  margin-bottom: 20px;
}

.statistics-section .section-heading h2,
.statistics-section .section-heading p,
.statistics-section .section-heading span {
  color: #fff;
}

.statistics-section .section-heading span {
  background: rgba(255, 255, 255, 0.15);
}
/*====================================================

ABOUT.CSS
PART-3 (FINAL)

Sections

1. Manufacturing Excellence
2. Quality Policy
3. Global Presence
4. Why Choose AMROS
5. CTA
6. Responsive
7. Utility

======================================================*/

/*=========================================
MANUFACTURING
=========================================*/

.manufacturing-section {
  padding: 60px 0;

  background: #f8fbfd;

  position: relative;

  overflow: hidden;
}

.manufacturing-section::before {
  content: "";

  position: absolute;

  top: -180px;

  right: -180px;

  width: 420px;

  height: 420px;

  border-radius: 50%;

  background: #edf5fc;
}

.manufacturing-gallery {
  position: relative;

  z-index: 2;
}

.manufacturing-gallery img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 28px;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.1);

  transition: 0.45s;
}

.manufacturing-gallery img:hover {
  transform: scale(1.04);
}

.manufacturing-section .section-heading {
  margin-bottom: 20px;
}

.manufacturing-section p {
  font-size: 17px;

  line-height: 1.5;

  margin-bottom: 16px;
}

.manufacturing-section .group-list {
  margin: 0;

  padding: 0;

  list-style: none;
}

.manufacturing-section .group-list li {
  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 4px;

  font-size: 16px;

  font-weight: 600;

  color: #344054;
}

.manufacturing-section .group-list i {
  font-size: 20px;

  color: #005baa;
}

/*=========================================
QUALITY POLICY
=========================================*/

.quality-section {
  padding: 60px 0;

  background: #fff;
}

.quality-card {
  background: #fff;

  padding: 45px 30px;

  border-radius: 28px;

  text-align: center;

  height: 100%;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.05);

  transition: 0.35s;

  position: relative;

  overflow: hidden;
}

.quality-card::before {
  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 0;

  background: linear-gradient(135deg, #005baa, #0a84ff);

  transition: 0.45s;

  z-index: 0;
}

.quality-card > * {
  position: relative;

  z-index: 2;
}

.quality-card:hover::before {
  height: 100%;
}

.quality-card i {
  font-size: 58px;

  color: #005baa;

  margin-bottom: 25px;

  transition: 0.35s;

  display: block;
}

.quality-card h4 {
  font-size: 24px;

  transition: 0.35s;

  margin: 0;
}

.quality-card:hover i,
.quality-card:hover h4 {
  color: #fff;
}

/*=========================================
GLOBAL PRESENCE
=========================================*/

.global-section {
  padding: 60px 0;

  background: #f8fbfd;
}

.global-section img {
  width: 100%;

  border-radius: 30px;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.1);
}

.country-list {
  display: flex;

  flex-wrap: wrap;

  gap: 16px;

  margin-top: 35px;
}

.country-list span {
  padding: 14px 24px;

  background: #fff;

  border-radius: 50px;

  font-weight: 600;

  border: 1px solid #e6edf5;

  transition: 0.35s;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.country-list span:hover {
  background: #005baa;

  color: #fff;

  transform: translateY(-5px);
}

/*=========================================
WHY CHOOSE
=========================================*/

.why-amros {
  padding: 60px 0;

  background: #fff;
}

.why-amros .value-card {
  text-align: center;

  padding: 50px 35px;
}

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

.cta-section {
  /* padding: 0 0 120px; */

  background: #fff;
}

.cta-box {
  padding: 70px;

  border-radius: 35px;

  background: linear-gradient(135deg, #005baa, #0a84ff);

  position: relative;

  overflow: hidden;

  box-shadow: 0 35px 80px rgba(0, 91, 170, 0.22);
}

.cta-box::before {
  content: "";

  position: absolute;

  width: 340px;

  height: 340px;

  background: rgba(255, 255, 255, 0.08);

  border-radius: 50%;

  right: -120px;

  top: -120px;
}

.cta-box::after {
  content: "";

  position: absolute;

  width: 240px;

  height: 240px;

  background: rgba(255, 255, 255, 0.06);

  left: -80px;

  bottom: -80px;

  border-radius: 50%;
}

.cta-box > * {
  position: relative;

  z-index: 2;
}

.cta-box h2 {
  font-size: 48px;

  color: #fff;

  margin-bottom: 18px;
}

.cta-box p {
  font-size: 18px;

  color: #e8f4ff;

  margin: 0;
}

.cta-box .btn-primary-custom {
  background: #fff;

  color: #005baa;

  box-shadow: none;
}

.cta-box .btn-primary-custom:hover {
  background: #eef7ff;
}

/*=========================================
ABOUT PAGE RESPONSIVE
=========================================*/

@media (max-width: 991px) {

  .about-image {
    padding-right: 0;

    margin-bottom: 60px;
  }

  .experience-badge {
    position: relative;

    right: auto;

    bottom: auto;

    margin: 30px auto 0;
  }

  .timeline {
    padding-left: 0;
  }

  .timeline::before {
    display: none;
  }

  .timeline-item {
    flex-direction: column;

    text-align: center;
  }

  .timeline-year {
    margin: auto;
  }

  .timeline-content {
    width: 100%;
  }

  .manufacturing-gallery {
    margin-bottom: 50px;
  }

  .cta-box {
    text-align: center;

    padding: 50px 30px;
  }
}

@media (max-width: 768px) {

  .about-company,
  .vision-mission,
  .core-values,
  .chairman-section,
  .timeline-section,
  .statistics-section,
  .manufacturing-section,
  .quality-section,
  .global-section,
  .why-amros {
    padding: 90px 0;
  }

  .vision-card,
  .value-card,
  .quality-card {
    padding: 35px 25px;
  }

  .statistics-section .counter-box {
    margin-bottom: 20px;
  }

  .country-list {
    justify-content: center;
  }

  .cta-box h2 {
    font-size: 34px;
  }

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

@media (max-width: 576px) {

  .section-heading h2 {
    font-size: 28px;
  }

  .experience-badge {
    width: 180px;

    padding: 22px;
  }

  .experience-badge h2 {
    font-size: 46px;
  }

  .vision-card h3 {
    font-size: 26px;
  }

  .timeline-content {
    padding: 25px;
  }

  .timeline-content h4 {
    font-size: 22px;
  }

  .statistics-section .counter-box h2 {
    font-size: 44px;
  }

  .country-list span {
    width: 100%;

    text-align: center;
  }

  .cta-box {
    padding: 35px 20px;
  }

  .cta-box h2 {
    font-size: 28px;
  }

  .cta-box .btn-primary-custom {
    width: 100%;
  }
}

/*=========================================
ANIMATION
=========================================*/

.about-image img,
.manufacturing-gallery img {
  transition: 0.5s;
}

.about-image:hover img,
.manufacturing-gallery img:hover {
  transform: scale(1.05);
}

.vision-card,
.value-card,
.timeline-content,
.quality-card,
.country-list span {
  will-change: transform;
}