/******************************************/
/* HEADER */
/******************************************/
.main-header {
  background-color: transparent;
  padding: 1.6rem 0;
  position: fixed;
  width: 100%;
  z-index: 999;
  transition: all 0.3s ease;
}

.main-header.scrolled {
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.scrolled .main-nav-link:link,
.scrolled .main-nav-link:visited {
  color: #102137;
}

.scrolled .main-nav-link:hover,
.scrolled .main-nav-link:active {
  color: #3b5bdb;
}

.scrolled .main-nav-link.nav-cta:link,
.scrolled .main-nav-link.nav-cta:visited {
  color: #fff;
  background-color: #3b5bdb;
}

.scrolled .main-nav-link.nav-cta:hover,
.scrolled .main-nav-link.nav-cta:active {
  background-color: #102137;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}
.logo {
  width: 12rem;
}
/******************************************/
/*NAVIGATION*/
/******************************************/
.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4.8rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #d8def8;
  font-weight: 700;
  font-size: 1.2rem;
  transition: all 0.3s;
  text-transform: uppercase;
}
.main-nav-link:hover,
.main-nav-link:active {
  color: #fff;
}
.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:visited {
  padding: 1.2rem 2.4rem;
  color: #fff;
  background-color: #102137;
}

.main-nav-link.nav-cta:active,
.main-nav-link.nav-cta:hover {
  background-color: #3b5bdb;
}
/* mobile nav  */

.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}
.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #ffffff;
}
/* selected icon via its name attribute */
.icon-mobile-nav[name="close-outline"] {
  display: none;
}

/******************************************/
/*SECTION-HERO*/
/******************************************/
.section-hero {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(
      to left bottom,
      rgba(52, 69, 143, 0.712),
      rgba(59, 91, 219, 0.561)
    ),
    url(../img/home-bg.webp);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center; /* horizontal center */
  text-align: center;
  width: 70%;
  height: 100%;
  margin: 0 auto;
  gap: 2.4rem;
  color: #fff;
}
/*****************************************
SECTION ABOUT US STARTED
/************************************/
.section-about {
  padding: 9.6rem 0;
}
.about-img {
  width: 100%;
  height: auto;
  max-height: 42rem;
  object-fit: cover;
  border-radius: 11px;
}
.text-box {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding-top: 3.2rem;
}
.section-about .primary-heading,
.section-about .paragraph-text {
  color: #102137;
}

/*****************************************
SECTION DEVISON STARTED
/************************************/

.section-devision {
  padding: 9.6rem 0;
  background-color: #fff;
}

.devision-card {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  border: 1px solid #d8def8;
  border-radius: 1.1rem;
  padding: 3.6rem;
  transition: all 0.3s ease;
}
.devision-card .devision-card-img-box {
  overflow: hidden;
  border-radius: 1.1rem;
  margin-bottom: 1.6rem;
  width: 100%;
}
.devision-card .devision-card-img-box img {
  width: 100%;
  height: auto;
  border-radius: 1.1rem;
  transition: transform 0.3s ease;
  display: block;
}
.devision-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 0.2rem 1.5rem rgba(0, 0, 0, 0.1);
}
.devision-card:hover .devision-card-img-box img {
  transform: scale(1.1);
}
.devision-card h3 {
  margin-top: 1.6rem;
}
/*****************************************
SECTION FUTURE OFFERINGS STARTED
/************************************/
.section-Future-offerings {
  padding: 9.6rem 0;
}
.Future-offering-text-box {
  display: flex;
  flex-direction: column;
}
.Future-offering-text-box p {
  align-self: center;
  width: 70%;
}
.future-offering-card {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  border: 1px solid #d8def8;
  border-radius: 1.1rem;
  padding: 3.6rem;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.future-offering-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 0.2rem 1.5rem rgba(0, 0, 0, 0.1);
}
.future-offering-card .devision-card-img-box {
  overflow: hidden;
  border-radius: 1.1rem;
  margin-bottom: 1.6rem;
  width: 100%;
}
.future-offering-card .devision-card-img-box img {
  width: 100%;
  border-radius: 1.1rem;
  transition: transform 0.3s ease;
}
.future-offering-card:hover .devision-card-img-box img {
  transform: scale(1.1);
}
.future-offering-card-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3.6rem;
}
.future-offering-card-box-2 {
  padding-top: 3.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8.6rem;
}

/*****************************************
SECTION why  STARTED
/************************************/
.section-why-choose-us {
  padding: 9.6rem 0;
}
.why-icon {
  padding: 2.4rem;
}
.feature-icon {
  height: 2.4rem;
  width: 2.4rem;
  color: #3b5bdb;
  padding: 1.8rem;
  border-radius: 50%;
  background-color: #7455f11a;
  transition: all 0.5s ease;
}
.icon-box {
  padding: 4.8rem 1.6rem 3.4rem 1.6rem;
  display: flex;
  background-color: #f3f5f9;
  border-radius: 11px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.icon-box:hover {
  background-color: #fff;
  border-color: #d8def8;
  transform: translateY(-5px);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}
.icon-box:hover .feature-icon {
  background-color: #3b5bdb;
  color: #fff;
  transform: rotate(360deg);
}
.why-text-box h2 {
  color: #102137;
  padding-bottom: 1.2rem;
}
/*****************************************
SECTION  INSIGHT STARTED
/************************************/
.section-insight {
  padding: 9.6rem 0;
  background-color: #fff;
  position: relative;
}
.insight-img-box {
  background-image: url(../img/insight-img.webp);
  background-size: cover;
  border-radius: 11px;
  background-position: center;
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: calc(100% - 6.4rem); /* 3.2rem left + 3.2rem right */
  max-width: 130rem;
  height: 50rem;
  content: attr("");
  box-sizing: border-box;
}

.insight-inner-section--1 p {
  padding-bottom: 40rem;
}
.insight-text-box {
  display: flex;
  flex-direction: column;
  width: 60%;
}
.insight-inner-section--2 {
  padding-top: 20rem;
  background-color: #1f2d67;
}
.insight-box {
  padding: 3.6rem 0;
}
.insight-box .insight-number {
  color: #fff;
  font-size: 3.2rem;
  font-weight: 700;
}
.insight-box .insight-text {
  color: #3b5bdb;
  font-size: 2rem;
  font-weight: 600;
}
/*****************************************
SECTION  TESTIMONIALS STARTED
/************************************/
.section-testimonials {
  padding: 9.6rem 0;
}
.testimonials-box {
  background-color: #fff;
  padding: 3.4rem;
  border-radius: 11px;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.05);
}
.testimonials-person {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}
.testimonial-img {
  width: 5.8rem;
  height: 5.8rem;
  border-radius: 50%;
}
.testimonial-position {
  font-size: 1.2rem;
  padding-top: 0.5rem;
}
/*****************************************
  FOOTER STARTED
/************************************/
.footer {
  padding: 9.6rem 0 1.6rem 0;
  background-color: #102137;
}
.contact-form-section {
  padding: 4.8rem 3.2rem !important;
  background-color: #3b5bdb;
  color: #fff;
  border-radius: 9px;
}

.contact-form {
  padding: 2.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.contact-form label {
  font-size: 1.2rem;
  display: block;
  font-weight: 500;
  margin-bottom: 0.8rem;
  width: 100%;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  display: block;
  width: 100%;
  padding: 0.4rem;
  border: 1px solid #d8def8;
  font-size: 1.6rem;
  font-family: inherit;
  box-sizing: border-box;
}
.contact-form .form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.form-massage-box {
  grid-column: 1/-1;
}
.submit-btn {
  font-weight: 600 !important;
  font-size: 1.4rem !important;
}

.footer-bottom {
  padding-top: 16rem !important;
  color: #fff;
}
.social-icon {
  font-size: 2.4rem;
  vertical-align: middle;
  margin-right: 1rem;
  min-width: 2.4rem;
  min-height: 2.4rem;
  display: inline-block;
  color: #fff;
  transition: all 0.3s;
}
.social-icon:hover {
  color: #3b5bdb;
}
.footer-box .footer-heading {
  padding-bottom: 2.4rem;
  font-size: 1.8rem;
}
.footer-text-box {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.footer-box p {
  display: flex;
  font-weight: 500;
  gap: 1rem;
}

.footer-box p a:link,
.footer-box p a:visited,
.footer-links:link,
.footer-links:visited {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 1.1;
  transition: all 0.3s;
}
.footer-box p a:hover,
.footer-box p a:active,
.footer-links:hover,
.footer-links:active {
  color: #3b5bdb;
}
.last-footer {
  display: flex;

  justify-content: space-between;
}
.copyright-text {
  color: #fff;
  font-size: 1.4rem;
}

/* Mobile Navigation */
.nav-open .icon-mobile-nav[name="close-outline"] {
  display: block;
}

.nav-open .icon-mobile-nav[name="menu-outline"] {
  display: none;
}

.nav-open .main-nav {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(0);
}

/* Dropdown Menu */
.main-nav-list li {
  position: relative;
}

.dropdown-menu {
  background-color: #102137;
  color: #fff;
  position: absolute;
  top: 200%;
  left: 0;
  min-width: 25rem;
  border-radius: 1.1rem;
  box-shadow: 0 0.2rem 1.5rem rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: all 0.3s ease;
  padding: 1.2rem 0;
  z-index: 1000;
  list-style: none;
}

.main-nav-list li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li {
  border-bottom: 1px dotted #2c3869;
  padding: 1rem 2.4rem;
}

.dropdown-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 500;
  transition: all 0.3s;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dropdown-menu a:hover {
  color: #3b5bdb;
  padding-left: 0.5rem;
}

/* Card Styles */
.devision-card,
.future-offering-card {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  border: 1px solid #d8def8;
  border-radius: 1.1rem;
  padding: 3.6rem;
  transition: all 0.3s ease;
}

.devision-card:hover,
.future-offering-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 0.2rem 1.5rem rgba(0, 0, 0, 0.1);
}

.devision-card-img-box,
.future-offering-card .devision-card-img-box {
  overflow: hidden;
  border-radius: 1.1rem;
  margin-bottom: 1.6rem;
  width: 100%;
}

.devision-card-img-box img,
.future-offering-card .devision-card-img-box img {
  width: 100%;
  height: auto;
  border-radius: 1.1rem;
  transition: transform 0.3s ease;
  display: block;
}

.devision-card:hover .devision-card-img-box img,
.future-offering-card:hover .devision-card-img-box img {
  transform: scale(1.1);
}

/* Insight Numbers */
.insight-number {
  position: relative;
  display: inline-block;
}

.insight-number.animate {
  animation: countUp 2s ease-out forwards;
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*************************************/
/* About Us Page Styling */
/*************************************/
.page-about-hero {
  background-image: linear-gradient(
      to left bottom,
      rgba(69, 89, 99, 0.678),
      rgba(69, 89, 99, 0.199)
    ),
    url(../img/mining.webp);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
.list-company {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1.6rem;
  column-gap: 1.2rem;
}
.list-company p {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.company-icon {
  width: 2.4rem;
  height: 2.4rem;
  color: #3b5bdb;
}
/*************************************/
/* joureny section Styling */
/*************************************/
.section-journey {
  padding: 9.6rem 0;
  background-color: #fff;
}
.section-journey .primary-heading {
  color: #102137;
}
/*************************************/
/* vision-mission section Styling */
/*************************************/
.vision-mission-section {
  padding: 9.6rem 0;
}
.vision-mission-container {
  background-color: #3b5bdb;
  border-radius: 9px;
  padding: 6.6rem 4.6rem 8.6rem 4.6rem !important;
}
.vision-mission-container .primary-heading {
  color: #fff;
}
/*************************************/
/* section-Values */
/*************************************/
.section-Values {
  padding: 9.6rem 0;
}
.section-Values h2 {
  padding-bottom: 1.6rem;
  color: #102137;
}
.value-section-box {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.section-Values h3 {
  color: #102137;
}
/*************************************/
/* why-choose-us */
/*************************************/

.p-a-why-choose-us {
  background-color: #102137;
}
.p-a-why-choose-us .primary-heading {
  color: #fff;
}
/*************************************/
/* Section-our-team */
/*************************************/
.section-our-team {
  padding: 9.6rem 0;
}
.our-team-card {
  text-align: center;
}

.our-team-img-box img {
  margin-bottom: 1.2rem;
  border-radius: 9px;
  width: 100%;
}
.our-team-card {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
/*************************************/
/* contact us Page Styling */
/*************************************/
.page-contact-hero {
  background-image: linear-gradient(
      to left bottom,
      rgba(36, 68, 211, 0.774),
      rgba(18, 44, 150, 0.664)
    ),
    url(../img/contact.webp);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
.section-companies-contact {
  padding: 9.6rem 0;
}
.companies-contact-box {
  color: #fff;
  background-color: #3b5bdb;
  padding: 4.8rem;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.116);
}
.contact-box-icon {
  height: 3.6rem;
  width: 3.6rem;
}
.contact-button-box {
  display: flex;
  gap: 1.4rem;
}
.contact-button-box a {
  display: flex !important;
  gap: 1.2rem;
}
.contact-btn:hover {
  background-color: #1f2d67 !important;
}
.contact-button-icon {
  width: 1.6rem;
  height: 1.6rem;
}

/*************************************/
/* contact us Page Styling */
/*************************************/

.section-contact {
  padding: 4.2rem 0 9.6rem 0;
}
.all-contact-box {
  background-color: #fff;
  padding: 4.8rem;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.062);
  transition: all 0.3s;
  border: 1px solid #2c386913;
}
.section-contact-icon {
  width: 3.2rem;
  height: 3.2rem;
  color: #3b5bdb;
}
.all-contact-box:hover {
  background-color: #3b5bdb;
  color: #fff;
}
.all-contact-box:hover .section-contact-icon {
  color: #fff;
}

/*************************************/
/* Centerprises Page Styling */
/*************************************/

.page-enterprises-hero {
  background-image: linear-gradient(
      to left bottom,
      rgba(36, 68, 211, 0.541),
      rgba(18, 44, 150, 0.555)
    ),
    url(../img/devision-section/enterprises.webp);
  width: 100%;
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
/*************************************/
/* constructions Page Styling */
/*************************************/
.page-constructions-hero {
  background-image: linear-gradient(
      to left bottom,
      rgba(36, 68, 211, 0.541),
      rgba(18, 44, 150, 0.555)
    ),
    url(../img/devision-section/construction.webp);
  width: 100%;
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
/*************************************/
/* sales Page Styling */
/*************************************/
.page-sales-hero {
  background-image: linear-gradient(
      to left bottom,
      rgba(53, 81, 206, 0.541),
      rgba(31, 56, 156, 0.555)
    ),
    url(../img/devision-section/sales.webp);
  width: 100%;
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

/*************************************/
/* mining Page Styling */
/*************************************/
.page-mining-hero {
  background-image: linear-gradient(
      to left bottom,
      rgba(53, 81, 206, 0.541),
      rgba(31, 56, 156, 0.555)
    ),
    url(../img/devision-section/mining.webp);
  width: 100%;
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

/* News Page Hero Section */
.page-news-hero {
  background-image: linear-gradient(
      rgba(16, 33, 55, 0.8),
      rgba(16, 33, 55, 0.8)
    ),
    url("../img/hero/news-hero.webp");
  background-size: cover;
  background-position: center;
  padding: 9.6rem 0;
}

/* Blog Section */
.section-blog {
  padding: 9.6rem 0;
}

.blog-grid {
  gap: 4.8rem;
}

.blog-card {
  background-color: #fff;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-1.2rem);
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.12);
}

.blog-img-box {
  position: relative;
  overflow: hidden;
}

.blog-img-box img {
  width: 100%;
  height: 24rem;
  object-fit: cover;
  transition: all 0.4s ease;
}

.blog-card:hover .blog-img-box img {
  transform: scale(1.1);
}

.blog-content {
  padding: 3.2rem;
}

.blog-date {
  font-size: 1.4rem;
  color: #666;
  margin-bottom: 1.2rem;
}

.blog-content .secondary-heading {
  font-size: 2.4rem;
  margin-bottom: 1.6rem;
  line-height: 1.4;
}

.blog-content .paragraph-text {
  margin-bottom: 2.4rem;
}

.blog-content .btn {
  width: 100%;
  text-align: center;
}

/*************************************/
/* Blog Post Page Styles */
/*************************************/
.section-blog-post {
  padding: 12.8rem 0 9.6rem 0;
}

.blog-post-container {
  max-width: 85rem;
  margin: 0 auto;
}

.blog-post-header {
  text-align: center;
  margin-bottom: 4.8rem;
}

.blog-meta {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin-top: 1.6rem;
}

.blog-category,
.blog-author {
  font-size: 1.4rem;
  color: #666;
}

.blog-post-image {
  margin-bottom: 4.8rem;
}

.blog-post-image img {
  width: 100%;
  height: auto;
  border-radius: 1.1rem;
}

.blog-post-content {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.blog-list {
  list-style: disc;
  margin-left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.blog-list li {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #333;
}

.blog-quote {
  background-color: #f8f9fa;
  padding: 3.2rem;
  border-left: 4px solid #3b5bdb;
  margin: 2.4rem 0;
  font-style: italic;
  color: #102137;
}

.blog-quote cite {
  display: block;
  margin-top: 1.6rem;
  font-weight: 600;
  font-style: normal;
}

.blog-cta {
  background-color: #f8f9fa;
  padding: 3.2rem;
  border-radius: 1.1rem;
  text-align: center;
  margin: 4.8rem 0;
}

.blog-cta .btn {
  margin-top: 2.4rem;
}

.blog-post-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4.8rem;
  border-top: 1px solid #eee;
  margin-top: 4.8rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: #102137;
  font-weight: 500;
  font-size: 1.6rem;
  transition: all 0.3s;
}

.nav-link:hover {
  color: #3b5bdb;
}

.all-posts {
  padding: 1.2rem 2.4rem;
  background-color: #3b5bdb;
  color: #fff !important;
  border-radius: 0.9rem;
}

.all-posts:hover {
  background-color: #102137;
  color: #fff !important;
}

.form-message {
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 5px;
  text-align: center;
  font-size: 1.6rem;
  display: none;
}

.form-message.success {
  display: block;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.form-message.error {
  display: block;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}