/*==================================================
TOP BAR
==================================================*/

.top-bar {
  background: var(--dark);
  color: #fff;
  font-size: 0.875rem;
  padding: 0.65rem 0;
}

.topbar-info,
.social-icons {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar-info li {
  display: flex;
  align-items: center;
}

.topbar-info a,
.topbar-info span {
  color: #fff;
  text-decoration: none;
  transition: var(--transition);
}

.topbar-info a:hover {
  color: var(--primary);
}

.topbar-info i {
  color: var(--primary);
  margin-right: 0.5rem;
}

.working-hours {
  color: #cbd5e1;
  font-size: 0.875rem;
}

.social-icons a {
  color: #fff;
  font-size: 1rem;
  transition: var(--transition);
}

.social-icons a:hover {
  color: var(--primary);
  transform: translateY(-2px);
}

/*==================================================
HEADER
==================================================*/

#site-header {
  position: sticky;
  top: 0;
  z-index: 1050;
}

.navbar {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-height: 90px;
  transition: var(--transition);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.navbar.scrolled {
  min-height: 78px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
}

.navbar-brand img {
  height: 60px;
  width: auto;
  transition: var(--transition);
}

.navbar.scrolled .navbar-brand img {
  height: 54px;
}

.navbar-nav {
  gap: 0.35rem;
}

.nav-link {
  position: relative;
  color: var(--dark);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 1rem 0.9rem !important;
  transition: var(--transition);
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary) !important;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  bottom: 0.55rem;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: 0.3s;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: calc(100% - 1.8rem);
}

/*==================================================
Dropdown
==================================================*/

.dropdown-menu {
  border: 0;
  top: 100%;
  border-radius: 14px;
  padding: 0.75rem;
  margin-top:0;
left:0;
top:calc(100% - 2px);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
  animation: dropdownFade 0.25s ease;
}

.dropdown-item {
  padding: 0.75rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.92rem;
  transition: var(--transition);
}

.dropdown-item:hover {
  background: #fff7ed;
  color: var(--primary);
  transform: translateX(4px);
}

/*==================================================
Buttons
==================================================*/

.btn-warning {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  border-radius: 0.7rem;
  padding: 0.8rem 1.6rem;
  font-weight: 600;
  transition: var(--transition);
}

.btn-warning:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
}

.btn-search {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.btn-search:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/*==================================================
Navbar Toggle
==================================================*/

.navbar-toggler {
  border: 0;
  box-shadow: none !important;
  padding: 0.4rem;
}

/*==================================================
Animation
==================================================*/
a/*
===========================================================
Shrikishan & Company Pvt. Ltd.
Main Stylesheet
Part 01
===========================================================
*/

/*==========================================================
RESET
==========================================================*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);

  font-size: var(--font-md);

  font-weight: 400;

  color: var(--body);

  background: var(--white);

  line-height: 1.7;

  overflow-x: hidden;

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;

  height: auto;

  display: block;
}

a {
  color: inherit;

  text-decoration: none;

  transition: var(--transition);
}

ul {
  margin: 0;

  padding: 0;

  list-style: none;
}

section {
  padding: var(--section-space) 0;

  position: relative;
}

::selection {
  background: var(--primary);

  color: #fff;
}

/*==========================================================
TYPOGRAPHY
==========================================================*/

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-weight: 700;

  color: var(--secondary);

  line-height: 1.2;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;

  color: var(--secondary);

  line-height: 1.3;
}

p {
  color: var(--body);

  margin-bottom: 1rem;
}

.lead {
  color: var(--muted);
}

.text-primary {
  color: var(--primary) !important;
}

.bg-section {
  background: var(--section);
}

/*==========================================================
SECTION TITLE
==========================================================*/

.section-header {
  max-width: 720px;

  margin: auto;

  margin-bottom: 3rem;
}

.section-subtitle {
  color: var(--primary);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;

  font-size: 0.9rem;
}

.section-title {
  margin: 0.8rem 0 1rem;
}

.section-description {
  color: var(--muted);
}

/*==========================================================
BUTTONS
==========================================================*/

.btn {
  border-radius: 50rem;

  font-weight: 600;

  transition: var(--transition);

  padding: 0.85rem 1.8rem;
}

.btn-warning {
  background: var(--primary);

  border-color: var(--primary);

  color: #fff;
}

.btn-warning:hover {
  background: var(--primary-dark);

  border-color: var(--primary-dark);

  color: #fff;

  transform: translateY(-2px);
}

.btn-outline-light:hover {
  color: var(--secondary);
}

.btn-outline-dark:hover {
  color: #fff;
}

.btn-icon {
  width: 48px;

  height: 48px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 50%;

  padding: 0;
}

@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
===========================================================
PART 02
Topbar | Header | Navigation | Mobile Menu
===========================================================
*/

/*==========================================================
TOP BAR
==========================================================*/

.top-bar {
  background: var(--secondary);

  color: #fff;

  font-size: 0.875rem;
}

.top-bar a {
  color: #fff;
}

.top-bar a:hover {
  color: var(--primary);
}

.top-bar .btn {
  padding: 0.35rem 0.9rem;

  font-size: 0.8rem;
}

.top-bar .bi {
  color: var(--primary);
}

/*==========================================================
HEADER
==========================================================*/

#site-header {
  position: sticky;

  top: 0;

  z-index: 1030;
}

.navbar {
  min-height: var(--header-height);

  background: #fff;

  border-bottom: 1px solid var(--border);

  transition: var(--transition);
}

.navbar.scrolled {
  min-height: 78px;

  box-shadow: var(--shadow);
}

.navbar-brand img {
  height: 60px;

  width: auto;

  transition: var(--transition);
}

.navbar.scrolled .navbar-brand img {
  height: 52px;
}

/*==========================================================
NAVIGATION
==========================================================*/

.navbar-nav {
  gap: 0.25rem;
}

.nav-link {
  position: relative;

  color: var(--secondary);

  font-weight: 600;

  padding: 1rem 0.95rem !important;

  transition: var(--transition);
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary) !important;
}

/* underline */

.nav-link::after {
  content: "";

  position: absolute;

  left: 1rem;

  bottom: 0.55rem;

  width: 0;

  height: 2px;

  background: var(--primary);

  transition: 0.3s;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: calc(100% - 2rem);
}

/*==========================================================
DROPDOWN
==========================================================*/

.dropdown-menu {
  border: 0;

  border-radius: var(--radius);

  padding: 0.75rem;

  margin-top: 1rem;

  box-shadow: var(--shadow-lg);

  animation: dropdownFade 0.25s ease;
}

.dropdown-item {
  border-radius: 0.65rem;

  padding: 0.75rem 1rem;

  transition: var(--transition);
}

.dropdown-item:hover {
  background: var(--primary-light);

  color: var(--primary);

  transform: translateX(4px);
}

/* Desktop Hover */

@media (min-width: 1200px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
  }
}

/*==========================================================
HEADER ACTION
==========================================================*/

.header-action {
  gap: 0.75rem;
}

.btn-search {
  width: 46px;

  height: 46px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--border);

  background: #fff;
}

.btn-search:hover {
  background: var(--primary);

  color: #fff;

  border-color: var(--primary);
}

/*==========================================================
NAVBAR TOGGLER
==========================================================*/

.navbar-toggler {
  border: 0;

  padding: 0.4rem;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/*==========================================================
OFFCANVAS
==========================================================*/

.offcanvas {
  border-left: 0;
}

.offcanvas-header {
  min-height: 80px;
}

.offcanvas-body {
  padding: 1.5rem;
}

/*==========================================================
MOBILE MENU
==========================================================*/

.list-group-item {
  border: 0 !important;

  padding: 1rem 0;

  font-weight: 500;
}

.list-group-item.active {
  color: var(--primary);

  background: none;
}

.accordion-button {
  padding: 1rem 0;

  font-weight: 600;

  background: none;
}

.accordion-button:not(.collapsed) {
  color: var(--primary);

  background: none;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-body {
  padding-top: 0;

  padding-left: 1rem;
}

.accordion-body .list-group-item {
  padding: 0.6rem 0;

  font-size: 0.95rem;
}

/*==========================================================
SEARCH MODAL
==========================================================*/

.modal-content {
  border-radius: var(--radius-lg);
}

.modal-header {
  padding: 1.5rem 1.5rem 0;
}

.modal-body {
  padding: 1.5rem;
}

.modal .form-control {
  border-left: 0;
}

.modal .input-group-text {
  background: #fff;
}

.modal .form-control:focus {
  box-shadow: none;

  border-color: #dee2e6;
}

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

@keyframes dropdownFade {
  from {
    opacity: 0;

    transform: translateY(10px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/*=========================================================
HERO SECTION
=========================================================*/

:root{
    --header-height:92px;
    --hero-height:calc(100vh - var(--header-height));
    --hero-overlay:linear-gradient(
        90deg,
        rgba(15,23,42,.85) 0%,
        rgba(15,23,42,.65) 45%,
        rgba(15,23,42,.35) 100%
    );
}

/*=========================================================
LAYOUT
=========================================================*/

.hero{
    position: relative;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
    background: #0F172A;
    padding: 0;
}

.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide{
    width:100%;
    height:var(--hero-height);
}

.hero-slide{
    position:relative;
    display:flex;
    align-items:center;
    height:100%;
}

.hero .container{
    position:relative;
    z-index:5;
    height:100%;
}

.hero .row{
    min-height:var(--hero-height);
    align-items:center;
}

/*=========================================================
BACKGROUND
=========================================================*/

.hero-bg,
.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
   object-position:center 25%;
    z-index:1;
    transform:scale(1);
    transition:transform 8s ease;
    will-change:transform;
}

.swiper-slide-active .hero-bg{
    transform:scale(1.03);
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(8,15,32,.82) 0%,
        rgba(8,15,32,.68) 35%,
        rgba(8,15,32,.38) 65%,
        rgba(8,15,32,.18) 100%
    );
}

/*=========================================================
CONTENT
=========================================================*/

.hero-content{
    position:relative;
    z-index:5;
    max-width:700px;
    color:#FFF;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.7rem 1.25rem;
    margin-bottom:1.75rem;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18);
    font-size:.95rem;
    font-weight:500;
}

.hero-title{
    color:var(--white);
     font-size:clamp(3rem,5vw,5.5rem);
    line-height:1.08;
    font-weight:800;
    letter-spacing:-2px;
}

.hero-title span{
    color:var(--primary);
}

.hero-description{
     max-width:560px;
    font-size:20px;
    line-height:1.8;
    color:rgba(255,255,255,.92);
}

/*=========================================================
BUTTONS
=========================================================*/

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:2.5rem;
}

.hero-buttons .btn{
    min-width:190px;
    height:56px;
    border-radius:50px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.hero-buttons .btn-outline-light{
    border-width:2px;
}

.hero-buttons .btn-outline-light:hover{
    color:#0F172A;
    background:#FFF;
}

/*=========================================================
FEATURES
=========================================================*/

.hero-features{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
}

.hero-feature{
    display:flex;
    align-items:center;
    gap:.8rem;
    color:#FFF;
    font-weight:500;
}

.hero-feature i{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    color:var(--primary);
    font-size:1rem;
}

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

.hero-content > *{
    opacity:0;
    transform:translateY(24px);
}

.swiper-slide-active .hero-content > *{
    animation:heroFade .7s ease both;
}

.swiper-slide-active .hero-content > *:nth-child(2){animation-delay:.12s;}
.swiper-slide-active .hero-content > *:nth-child(3){animation-delay:.24s;}
.swiper-slide-active .hero-content > *:nth-child(4){animation-delay:.36s;}
.swiper-slide-active .hero-content > *:nth-child(5){animation-delay:.48s;}

@keyframes heroFade{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

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

@media (max-width:991.98px){

    :root{
        --header-height:80px;
    }

    .heroSwiper,
    .heroSwiper .swiper-wrapper,
    .heroSwiper .swiper-slide{
        min-height:720px;
    }

    .hero-title{
        font-size:2.6rem;
    }

    .hero-description{
        font-size:1rem;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .hero-buttons .btn{
        width:100%;
    }

    .hero-features{
        gap:1rem;
    }

}



@media (max-width:575.98px){

    .hero-title{
        font-size:2.1rem;
    }

    .hero-description{
        line-height:1.8;
    }

    .hero-badge{
        font-size:.85rem;
    }

}

/*==========================================================
FLOATING STATS
==========================================================*/

.hero-stats {
  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  flex-direction: column;

  gap: 1rem;

  z-index: 6;
}

.hero-stat {
  width: 220px;

  padding: 1.4rem;

  border-radius: var(--radius);

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

  backdrop-filter: blur(12px);

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

  color: #fff;
}

.hero-stat-number {
  font-size: 2rem;

  font-weight: 800;

  color: var(--primary);

  line-height: 1;
}

.hero-stat-title {
  margin-top: 0.4rem;

  color: #fff;

  font-weight: 600;
}

/*==========================================================
SCROLL INDICATOR
==========================================================*/

.hero-scroll {
  position: absolute;

  left: 50%;

  bottom: 30px;

  transform: translateX(-50%);

  z-index: 8;
}

.hero-scroll a {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.5rem;

  color: #fff;

  font-size: 0.8rem;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.hero-scroll i {
  font-size: 1.4rem;

  animation: scrollDown 1.6s infinite;
}

/*==========================================================
SWIPER
==========================================================*/

.heroSwiper {
  width: 100%;

  height: 100%;
}

.heroSwiper .swiper-pagination {
  bottom: 40px;
}

.heroSwiper .swiper-pagination-bullet {
  width: 12px;

  height: 12px;

  background: #fff;

  opacity: 0.45;
}

.heroSwiper .swiper-pagination-bullet-active {
  background: var(--primary);

  opacity: 1;
}

.heroSwiper .swiper-button-next,
.heroSwiper .swiper-button-prev {
  width: 55px;

  height: 55px;

  border-radius: 50%;

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

  backdrop-filter: blur(10px);

  color: #fff;
}

.heroSwiper .swiper-button-next::after,
.heroSwiper .swiper-button-prev::after {
  font-size: 18px;

  font-weight: 700;
}

.heroSwiper .swiper-button-next:hover,
.heroSwiper .swiper-button-prev:hover {
  background: var(--primary);
}

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

@keyframes scrollDown {
  0% {
    transform: translateY(0);

    opacity: 1;
  }

  50% {
    transform: translateY(8px);

    opacity: 0.6;
  }

  100% {
    transform: translateY(0);

    opacity: 1;
  }
}

/*
===========================================================
PART 04
Home Sections
===========================================================
*/

/*==========================================================
COMMON SECTION
==========================================================*/

.section-light {
  background: var(--white);
}

.section-gray {
  background: var(--section);
}

.section-dark {
  background: var(--secondary);

  color: #fff;
}

.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark p {
  color: #fff;
}

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

.about-image-card,
.about-content-card{
    height:100%;
}

.about-image-card{
    overflow:hidden;
    border-radius:24px;
}

.about-image-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.about-content-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:20px;
}

.about-image {
  position: relative;
}

.about-image img {
  border-radius: var(--radius-lg);
}

.about-experience {
  position: absolute;

  bottom: 30px;

  right: -20px;

  background: #fff;

  padding: 1.5rem;

  border-radius: var(--radius);

  box-shadow: var(--shadow-lg);

  text-align: center;

  min-width: 170px;
}

.about-experience h2 {
  color: var(--primary);

  margin: 0;

  font-weight: 800;
}

.about-experience span {
  display: block;

  color: var(--muted);

  font-size: 0.9rem;
}

.about-list {
  margin-top: 2rem;
}

.about-list li {
  display: flex;

  align-items: center;

  margin-bottom: 1rem;
}

.about-list i {
  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: var(--primary-light);

  color: var(--primary);

  display: flex;

  justify-content: center;

  align-items: center;

  margin-right: 1rem;
}

/*==========================================================
COMMON CARD
==========================================================*/

.info-card {
  height: 100%;

  background: #fff;

  border-radius: var(--radius);

  padding: 2rem;

  box-shadow: var(--shadow-sm);

  transition: var(--transition);
}

.info-card:hover {
  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);
}

.info-card-icon {
  width: 70px;

  height: 70px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: var(--primary-light);

  color: var(--primary);

  font-size: 2rem;

  margin-bottom: 1.5rem;
}

.info-card h4 {
  margin-bottom: 1rem;
}

.info-card p {
  color: var(--muted);
}

/*==========================================================
EXPERTISE
==========================================================*/

.expertise-card {
  border-radius: var(--radius);

  overflow: hidden;

  background: #fff;

  box-shadow: var(--shadow-sm);

  transition: var(--transition);

  height: 100%;
}

.expertise-card:hover {
  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);
}

.expertise-card img {
  width: 100%;

  height: 240px;

  object-fit: cover;
}

.expertise-body {
  padding: 1.75rem;
}

.expertise-body h4 {
  margin-bottom: 1rem;
}

.expertise-link {
  color: var(--primary);

  font-weight: 600;
}

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

.choose-box {
  display: flex;

  gap: 1.25rem;

  margin-bottom: 2rem;
}

.choose-icon {
  width: 70px;

  height: 70px;

  border-radius: 50%;

  background: var(--primary-light);

  color: var(--primary);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 2rem;

  flex-shrink: 0;
}

.choose-content h5 {
  margin-bottom: 0.5rem;
}

/*==========================================================
IMAGE CARD
==========================================================*/

.image-card {
  overflow: hidden;

  border-radius: var(--radius-lg);
}

.image-card img {
  transition: 0.6s;
}

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

/*==========================================================
HIGHLIGHTS
==========================================================*/

.highlight-card {
  padding: 2rem;

  border-radius: var(--radius);

  background: #fff;

  box-shadow: var(--shadow-sm);

  text-align: center;

  transition: var(--transition);

  height: 100%;
}

.highlight-card:hover {
  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);
}

.highlight-card i {
  font-size: 3rem;

  color: var(--primary);

  margin-bottom: 1.25rem;
}

/*==========================================================
COUNTER
==========================================================*/

.counter-section {
  background: var(--secondary);

  color: #fff;
}

.counter-card {
  text-align: center;

  padding: 2rem;
}

.counter-card h2 {
  color: var(--primary);

  font-size: 3rem;

  font-weight: 800;

  margin-bottom: 0.5rem;
}

.counter-card p {
  color: rgba(255, 255, 255, 0.75);

  margin: 0;
}

/*==========================================================
IMAGE OVERLAY
==========================================================*/

.overlay-card {
  position: relative;

  overflow: hidden;

  border-radius: var(--radius-lg);
}

.overlay-card img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

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

  position: absolute;

  inset: 0;

  background: linear-gradient(transparent, rgba(15, 23, 42, 0.85));
}

.overlay-content {
  position: absolute;

  left: 2rem;

  right: 2rem;

  bottom: 2rem;

  color: #fff;

  z-index: 2;
}

.overlay-content h3,
.overlay-content h4,
.overlay-content p {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce){
    .hero-bg,
    .swiper-slide-active .hero-content > *{
        animation:none;
        transition:none;
        transform:none;
        opacity:1;
    }
}

.overlay-content p {
  color: rgba(255, 255, 255, 0.9);
}

.expertise-body p,
.highlight-card p,
.quality-box p,
.choose-content p {
  color: var(--muted);
}

/*
===========================================================
PART 05
Projects | Machinery | Gallery | Quality
===========================================================
*/

/*==========================================================
PROJECTS
==========================================================*/

.project-card {
  background: #fff;

  border-radius: var(--radius);

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  transition: var(--transition);

  height: 100%;
}

.project-card:hover {
  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);
}

.project-image {
  position: relative;

  overflow: hidden;
}

.project-image img {
  width: 100%;

  height: 280px;

  object-fit: cover;

  transition: 0.6s;
}

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

.project-tag {
  position: absolute;

  top: 20px;

  left: 20px;
}

.project-body {
  padding: 2rem;
}

.project-category {
  color: var(--primary);

  font-weight: 600;

  text-transform: uppercase;

  font-size: 0.85rem;

  margin-bottom: 0.5rem;
}

.project-title {
  margin-bottom: 1rem;
}

.project-location {
  display: flex;

  align-items: center;

  gap: 0.5rem;

  color: var(--muted);

  margin-bottom: 1rem;
}

.project-features {
  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

  margin-top: 1.5rem;
}

.project-features span {
  background: var(--primary-light);

  color: var(--primary);

  padding: 0.45rem 0.9rem;

  border-radius: 50rem;

  font-size: 0.82rem;
}

/*==========================================================
PROJECT DETAILS
==========================================================*/

.project-gallery img {
  border-radius: var(--radius);
}

.project-sidebar {
  background: #fff;

  padding: 2rem;

  border-radius: var(--radius);

  box-shadow: var(--shadow-sm);
}

.project-sidebar ul {
  display: flex;

  flex-direction: column;

  gap: 1rem;
}

.project-sidebar li {
  display: flex;

  justify-content: space-between;

  border-bottom: 1px solid var(--border);

  padding-bottom: 0.75rem;
}

/*==========================================================
MACHINERY
==========================================================*/

.machine-card {
  background: #fff;

  border-radius: var(--radius);

  overflow: hidden;

  text-align: center;

  transition: var(--transition);

  box-shadow: var(--shadow-sm);
}

.machine-card:hover {
  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);
}

.machine-card img {
  width: 100%;

  height: 220px;

  object-fit: cover;
}

.machine-body {
  padding: 1.5rem;
}

.machine-body h5 {
  margin-bottom: 0.75rem;
}

.machine-body p {
  color: var(--muted);

  margin: 0;
}

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

.quality-box {
  background: #fff;

  padding: 2rem;

  border-radius: var(--radius);

  box-shadow: var(--shadow-sm);

  height: 100%;
}

.quality-box i {
  width: 70px;

  height: 70px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 50%;

  background: var(--primary-light);

  color: var(--primary);

  font-size: 2rem;

  margin-bottom: 1.5rem;
}

/*==========================================================
CERTIFICATES
==========================================================*/

.certificate-card {
  background: #fff;

  border-radius: var(--radius);

  overflow: hidden;

  text-align: center;

  transition: var(--transition);

  box-shadow: var(--shadow-sm);
}

.certificate-card:hover {
  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);
}

.certificate-card img {
  height: 320px;

  width: 100%;

  object-fit: cover;
}

.certificate-body {
  padding: 1.5rem;
}

/*==========================================================
GALLERY
==========================================================*/

.gallery-item {
  position: relative;

  overflow: hidden;

  border-radius: var(--radius);
}

.gallery-item img {
  width: 100%;

  height: 300px;

  object-fit: cover;

  transition: 0.6s;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-overlay {
  position: absolute;

  inset: 0;

  background: rgba(15, 23, 42, 0.75);

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transition: 0.4s;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay i {
  width: 70px;

  height: 70px;

  border-radius: 50%;

  background: #fff;

  color: var(--primary);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;
}

/*==========================================================
COMMON IMAGE EFFECT
==========================================================*/

.zoom-image {
  overflow: hidden;
}

.zoom-image img {
  transition: 0.6s;
}

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

/*==========================================================
HOVER EFFECT
==========================================================*/

.hover-up {
  transition: var(--transition);
}

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

.shadow-hover:hover {
  box-shadow: var(--shadow-lg);
}

/*
===========================================================
PART 06
Footer | CTA | Contact | Utilities
===========================================================
*/

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

.page-banner {
  position: relative;

  min-height: 420px;

  display: flex;

  align-items: center;

  color: #fff;

  overflow: hidden;
}

.page-banner-image {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;
}

.page-banner-overlay {
  z-index: 0;
  background: linear-gradient(90deg, rgba(8, 15, 32, 0.88) 0%, rgba(8, 15, 32, 0.68) 55%, rgba(8, 15, 32, 0.5) 100%);
}

.page-banner .container {
  position: relative;

  z-index: 2;
}

.page-banner-content {
  padding: 1rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.page-banner-content h1,
.page-banner-content p,
.page-banner-content .breadcrumb-item,
.page-banner-content .breadcrumb-item a {
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

.page-banner-content h1 {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.page-banner-content .badge {
  padding: 0.55rem 1rem;
  color: var(--secondary) !important;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
}

.page-banner-content p {
  max-width: 650px;
  margin-right: auto;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.92);
}

.page-banner-content .breadcrumb {
  justify-content: center;
}

.page-banner-content .breadcrumb .active {
  color: #ffd166 !important;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.page-banner-content .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.78);
}

.page-banner-content .breadcrumb i {
  color: #ffd166;
}

/*==========================================================
BREADCRUMB
==========================================================*/

.breadcrumb {
  margin-bottom: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #ffffff;
}

.breadcrumb a {
  color: #ffffff;
}

.breadcrumb .active {
  color: var(--primary);
}

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

.cta-section {
  background: linear-gradient(135deg, #0f172a, #1e293b);

  color: #fff;
}

.cta-section h2 {
  color: #fff;
}

.cta-section p {
  color: rgba(255, 255, 255, 0.75);
}

/*==========================================================
CONTACT
==========================================================*/

.contact-card {
  background: #fff;

  border-radius: var(--radius);

  padding: 2rem;

  box-shadow: var(--shadow-sm);

  height: 100%;
}

.contact-card i {
  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: var(--primary-light);

  color: var(--primary);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1.5rem;

  margin-bottom: 1rem;
}

.contact-card a {
  color: var(--body);
}

/*==========================================================
CONTACT FORM
==========================================================*/

.form-control,
.form-select {
  min-height: 54px;

  border-radius: var(--radius-sm);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);

  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
}

textarea.form-control {
  min-height: 180px;

  resize: none;
}

/*==========================================================
MAP
==========================================================*/

.map-wrapper {
  overflow: hidden;

  border-radius: var(--radius);
}

.map-wrapper iframe {
  width: 100%;

  height: 450px;

  border: 0;
}

/*==========================================================
FOOTER
==========================================================*/

footer {
  background: #0f172a;
}

footer h5 {
  color: #fff;
}

footer p,
footer li,
footer small {
  color: rgba(255, 255, 255, 0.75);
}

footer a {
  color: rgba(255, 255, 255, 0.75);
}

footer a:hover {
  color: var(--primary);
}

footer .btn {
  width: 42px;

  height: 42px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;
}

/*==========================================================
BACK TO TOP
==========================================================*/

.back-to-top {
  position: fixed;

  right: 25px;

  bottom: 25px;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  background: var(--primary);

  color: #fff;

  z-index: 1000;

  opacity: 0;

  visibility: hidden;

  transition: var(--transition);
}

.back-to-top.show {
  opacity: 1;

  visibility: visible;
}

.back-to-top:hover {
  background: var(--primary-dark);

  color: #fff;
}

/*==========================================================
PRELOADER
==========================================================*/

.preloader {
  position: fixed;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #fff;

  z-index: 99999;
}

.preloader.hide {
  opacity: 0;

  visibility: hidden;

  transition: 0.4s;
}

.loader {
  width: 60px;

  height: 60px;

  border: 5px solid #eee;

  border-top-color: var(--primary);

  border-radius: 50%;

  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/*==========================================================
UTILITY
==========================================================*/

.object-cover {
  object-fit: cover;
}

.rounded-xl {
  border-radius: var(--radius-lg);
}

.shadow-custom {
  box-shadow: var(--shadow-lg);
}

.transition {
  transition: var(--transition);
}

.text-muted {
  color: var(--muted) !important;
}

.bg-light-section {
  background: var(--section);
}

/*==========================================================
PRINT
==========================================================*/

@media print {
  .navbar,
  .top-bar,
  footer,
  .btn,
  .back-to-top {
    display: none !important;
  }

  body {
    background: #fff;
  }
}

/*
==========================================================
PART XX
MEGA MENU
==========================================================
*/

/*=========================================
Navbar
=========================================*/

.navbar {
  padding: 0.85rem 0;

  transition: 0.35s ease;

  z-index: 1050;
}

.navbar-brand {
  margin-right: 2rem;
}

.navbar-logo {
  height: 68px;
  width: auto;
  transition: 0.35s;
}

.navbar-nav {
  gap: 0.35rem;
}

.navbar-nav > .nav-item {
  position: relative;
}

@media (max-width: 767.98px) {
  .page-banner {
    min-height: 320px;
  }

  .page-banner-image {
    object-position: center;
  }

  .page-banner-content {
    padding: 1rem 0;
  }

  .page-banner-content .lead {
    font-size: 1rem;
  }
}

.navbar-nav > .nav-item.dropdown {
  display: flex;
  align-items: center;
}

.nav-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 42px;
  margin-left: -0.7rem;
  padding: 0;
  color: #1e293b;
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.nav-menu-toggle:hover,
.nav-menu-toggle:focus-visible {
  color: var(--primary);
  background: var(--primary-light);
  outline: 0;
}

.nav-menu-toggle i {
  font-size: 0.72rem;
  transition: transform 0.2s ease;
}

.nav-menu-toggle[aria-expanded="true"] i,
.mega-dropdown:hover > .nav-menu-toggle i,
.project-mega-dropdown:hover > .nav-menu-toggle i {
  transform: rotate(180deg);
}

/* Compact dropdown navigation: used for the primary desktop menu. */
.simple-nav-menu {
  min-width: 245px;
  margin-top: -20px;
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
  animation: none;
}

.simple-nav-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.68rem 0.8rem;
  color: var(--secondary);
  font-size: 0.92rem;
  border-radius: 9px;
}

.simple-nav-menu .dropdown-item i {
  width: 1.1rem;
  color: var(--primary);
  font-size: 1rem;
  text-align: center;
}

.simple-nav-menu .dropdown-item:hover,
.simple-nav-menu .dropdown-item:focus {
  padding-left: 0.8rem;
  color: var(--secondary);
  background: var(--primary-light);
  transform: none;
}

.navbar-nav > .nav-item > .nav-link {
  font-size: 0.96rem;

  font-weight: 600;

  color: #1e293b;

  padding: 1rem 1rem;

  transition: 0.3s;

  border-radius: 12px;
}

.navbar-nav > .nav-item > .nav-link:hover,
.navbar-nav > .nav-item > .nav-link.active {
  color: var(--primary);
}

@media (min-width:992px){

.navbar .dropdown{

position:relative;
padding-bottom:18px;

margin-bottom:-18px;

}

.navbar .dropdown-menu{

display:block;

opacity:0;

visibility:hidden;

pointer-events:none;

transform:translateY(12px);

transition:.25s ease;

}

.navbar .dropdown:hover>.dropdown-menu{

opacity:1;

visibility:visible;

pointer-events:auto;

transform:translateY(0);

}

}

/*==========================================================
NAVBAR ACTIONS
==========================================================*/

.navbar-actions {
  display: flex;

  align-items: center;

  gap: 12px;
}

.navbar-actions .btn {
  transition: 0.3s;
}

.navbar-actions .btn:hover {
  transform: translateY(-2px);
}

/*==========================================================
SEARCH BUTTON
==========================================================*/

.btn-search {
  width: 46px;

  height: 46px;

  border-radius: 50%;

  border: none;

  background: #f8fafc;

  color: #0f172a;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;
}

.btn-search:hover {
  background: var(--primary);

  color: #fff;
}

/*==========================================================
WHATSAPP BUTTON
==========================================================*/

.navbar-actions .btn-success {
  padding: 12px 24px;

  font-weight: 600;

  border-radius: 50px;
}

/*==========================================================
GET QUOTE BUTTON
==========================================================*/

.navbar-actions .btn-warning {
  padding: 12px 26px;

  font-weight: 700;

  border-radius: 50px;

  color: #000;

  box-shadow: 0 12px 30px rgba(255, 193, 7, 0.25);
}

.navbar-actions .btn-warning:hover {
  transform: translateY(-3px);

  box-shadow: 0 20px 45px rgba(255, 193, 7, 0.35);
}

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

.mega-menu .border-top {
  border-color: #e5e7eb !important;
}

.mega-menu .border-top .btn {
  border-radius: 50px;

  padding: 12px 28px;

  font-weight: 700;
}

/*
==========================================================
PART XX
MEGA MENU RESPONSIVE & ANIMATION
==========================================================
*/

/*=========================================
Desktop (1200px+)
=========================================*/

@media (min-width: 1200px) {
  .mega-dropdown {
    position: static;
  }

  /* Invisible bridge between navbar and mega menu */

  .mega-dropdown::after {
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: 100%;

    height: 22px;
  }

  /* Mega Menu */

  .mega-dropdown > .mega-menu {
    position: absolute;

    left: 50%;

    top: 100%;

    transform: translateX(-50%);

    width: min(1320px, 96vw);

    max-width: 1320px;

    margin-top: 0;

    padding: 0;

    border: 0;

    border-radius: 24px;

    overflow: hidden;

    background: #fff;

    box-shadow: 0 25px 80px rgba(15, 23, 42, 0.15);

    display: block;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
      opacity 0.25s ease,
      visibility 0.25s ease,
      transform 0.25s ease;

    z-index: 1090;
  }

  /* Show */

  .mega-dropdown:hover > .mega-menu,
  .mega-dropdown:focus-within > .mega-menu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateX(-50%);
  }

  /* Keep menu visible while hovering menu */

  .mega-menu:hover {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
  }

  /* Nav link */

  .navbar-nav > .mega-dropdown > .nav-link {
    height: 100%;

    display: flex;

    align-items: center;

    padding: 30px 18px;
  }

  /* Better hover */

  .mega-menu {
    animation: megaFade 0.25s ease;
  }

  @keyframes megaFade {
    from {
      opacity: 0;

      transform: translateX(-50%) translateY(8px);
    }

    to {
      opacity: 1;

      transform: translateX(-50%) translateY(0);
    }
  }
}

/*=========================================
Navbar Hover
=========================================*/

.navbar-nav > .nav-item > .nav-link {
  position: relative;
}

.navbar-nav > .nav-item > .nav-link::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: 8px;

  width: 0;

  height: 2px;

  background: var(--primary);

  transition: 0.3s;

  transform: translateX(-50%);
}

.navbar-nav > .nav-item > .nav-link:hover::after,
.navbar-nav > .nav-item > .nav-link.active::after {
  width: 65%;
}

/*=========================================
Dropdown Arrow
=========================================*/

.dropdown-toggle::after {
  margin-left: 0.45rem;

  transition: 0.3s;

  vertical-align: 0.15em;
}

.mega-dropdown:hover > .dropdown-toggle::after {
  transform: rotate(180deg);
}

/*=========================================
Projects Dropdown
=========================================*/

.dropdown-menu {
  border: none;

  border-radius: 18px;

  padding: 0.75rem 0;

  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.1);
}

.dropdown-item {
  padding: 0.8rem 1.25rem;

  font-weight: 500;

  transition: 0.25s;
}

.dropdown-item:hover {
  background: #f8fafc;

  color: var(--primary);

  padding-left: 1.6rem;
}

/*=========================================
Sticky Header
=========================================*/

#site-header {
  position: sticky;

  top: 0;

  z-index: 1080;
}

.navbar {
  backdrop-filter: blur(14px);
}

/*=========================================
Logo
=========================================*/

.navbar-logo {
  max-height: 64px;

  width: auto;
}

/*=========================================
Tablet
=========================================*/

@media (max-width: 1199px) {
  .mega-menu {
    display: none !important;
  }

  .navbar-collapse {
    display: none !important;
  }

  .navbar-actions {
    display: none !important;
  }
}

/*=========================================
Large Desktop
=========================================*/

@media (min-width: 1600px) {
  .mega-menu {
    max-width: 1380px;
  }
}

/*=========================================
Accessibility
=========================================*/

.nav-link:focus,
.dropdown-item:focus,
.btn:focus {
  outline: none;

  box-shadow: 0 0 0 0.25rem rgba(245, 158, 11, 0.25);
}

/*=========================================
Reduced Motion
=========================================*/

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;

    animation: none !important;

    scroll-behavior: auto !important;
  }
}

/*=========================================
Print
=========================================*/

@media print {
  #site-header {
    display: none;
  }
}

/*=========================================================
FOOTER
=========================================================*/

.footer {
  background: #0f172a;
  color: #cbd5e1;
  font-size: 0.95rem;
}

.footer-top {
  padding: 80px 0 55px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-logo img {
  height: 70px;
}

.footer-about {
  line-height: 1.9;
  margin-bottom: 35px;
  color: #94a3b8;
}

.company-highlight {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.highlight-item {
  flex: 1;
  min-width: 90px;
}

.highlight-number {
  font-size: 32px;
  font-weight: 700;
  color: #fdb913;
  line-height: 1;
  margin-bottom: 8px;
}

.highlight-text {
  font-size: 13px;
  color: #cbd5e1;
}

.footer-title {
  color: #fff;
  font-weight: 700;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 12px;
}

.footer-title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: #fdb913;
  border-radius: 10px;
}

.footer-links,
.footer-contact,
.footer-bottom-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #cbd5e1;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #fdb913;
  padding-left: 6px;
}

.footer-contact li {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  align-items: flex-start;
}

.footer-contact-icon {
  width: 38px;
  height: 38px;
  background: rgba(253, 185, 19, 0.15);
  color: #fdb913;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}

.footer-contact a {
  color: #cbd5e1;
  text-decoration: none;
}

.footer-contact a:hover {
  color: #fdb913;
}

.footer-bottom {
  padding: 22px 0;
}

.footer-bottom-links {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.footer-bottom-links a {
  color: #cbd5e1;
  text-decoration: none;
  transition: 0.3s;
}

.footer-bottom-links a:hover {
  color: #fdb913;
}

.copyright,
.developer-text {
  color: #94a3b8;
  font-size: 0.9rem;
}

.back-to-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fdb913;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: 0.3s;
  z-index: 999;
}

.back-to-top:hover {
  background: #fff;
  color: #000;
  transform: translateY(-5px);
}

@media (max-width: 991px) {
  .footer-top {
    padding: 60px 0 40px;
  }

  .footer-bottom {
    text-align: center;
  }

  .footer-bottom-links {
    margin: 18px 0;
  }

  .company-highlight {
    justify-content: center;
  }
}
/* ==========================================
   Contact Section
========================================== */

.map-container{
    height:100%;
    min-height:650px;
}

.map-container iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}

@media (max-width:991.98px){

    .map-container{
        min-height:400px;
    }

}

/* Contact Map Section */
#contact-section .row.shadow-lg {
  border-radius: 24px;
}
#contact-section iframe {
  display: block;
}
#contact-section .form-control {
  border-radius: 12px;
  padding: 0.85rem 1rem;
  border: 1px solid #dee2e6;
}
#contact-section .form-control:focus {
  border-color: #fdb913;
  box-shadow: 0 0 0 0.2rem rgba(253, 185, 19, 0.15);
}
#contact-section .btn-warning {
  font-weight: 600;
  padding: 0.85rem 1.25rem;
}
@media (max-width: 991px) {
  #contact-section iframe,
  #contact-section div[style*="min-height:720px"] {
    min-height: 420px !important;
    height: 420px !important;
  }
  #contact-section .p-5 {
    padding: 2rem !important;
  }
}

/*=========================================================
CAREER HERO
=========================================================*/

.career-image{
    height:100%;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(15,23,42,.12);
}

.career-image img{
    width:100%;
    height:100%;
    min-height:520px;
    object-fit:cover;
    display:block;
}

.career-highlights{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.career-highlight{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:500;
}

.career-highlight i{
    color:#FDB913;
    font-size:1.1rem;
}

@media(max-width:991px){

.career-image img{
    min-height:380px;
}

}

/*=========================================================
CAREER LIFE
=========================================================*/

.career-life-image{

    height:100%;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(15,23,42,.10);

}

.career-life-image img{

    width:100%;

    height:100%;

    min-height:580px;

    object-fit:cover;

    transition:.5s;

}

.career-life-image:hover img{

    transform:scale(1.04);

}

.career-life-stats{

    display:flex;

    flex-direction:column;

    gap:20px;

    height:100%;

}

.career-stat{

    flex:1;

    background:#0F172A;

    color:#fff;

    border-radius:20px;

    padding:35px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.career-stat h2{

    color:#FDB913;

    font-size:42px;

    font-weight:800;

    margin-bottom:8px;

}

.career-stat span{

    color:#CBD5E1;

}

.career-life-features{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.career-life-features div{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:18px;

    padding:22px;

    font-weight:600;

    text-align:center;

}

.career-life-features i{

    color:#FDB913;

    display:block;

    font-size:28px;

    margin-bottom:12px;

}

@media(max-width:991px){

.career-life-features{

grid-template-columns:repeat(2,1fr);

}

.career-life-image img{

min-height:380px;

}

}

@media(max-width:575px){

.career-life-features{

grid-template-columns:1fr;

}

}

/*=========================================================
CURRENT OPENINGS
=========================================================*/

.career-job-card{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:22px;

    padding:30px;

    height:100%;

    transition:.35s;

}

.career-job-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(15,23,42,.08);

}

.career-job-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

}

.career-job-header h4{

    font-weight:700;

    margin-bottom:8px;

}

.career-job-info{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

}

.career-job-info div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#64748B;

    font-weight:500;

}

.career-job-info i{

    color:#FDB913;

    font-size:18px;

}

@media(max-width:767px){

.career-job-header{

    flex-direction:column;

}

}

/*=========================================================
HIRING PROCESS
=========================================================*/

.process-card{

    position:relative;

    background:#fff;

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

    height:100%;

    border:1px solid #ECECEC;

    transition:.35s;

}

.process-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(15,23,42,.08);

}

.process-icon{

    width:75px;

    height:75px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#FFF8E6;

    display:flex;

    align-items:center;

    justify-content:center;

}

.process-icon i{

    font-size:32px;

    color:#FDB913;

}

.process-number{

    font-size:13px;

    font-weight:700;

    color:#94A3B8;

    letter-spacing:2px;

    margin-bottom:10px;

}

.process-card h5{

    font-weight:700;

    margin-bottom:12px;

}

.process-card p{

    margin:0;

    color:#64748B;

    line-height:1.7;

}

/*=========================================================
CAREER APPLICATION
=========================================================*/

.career-apply-info{

    display:flex;
    flex-direction:column;
    justify-content:center;

}

.career-contact-list{

    display:flex;
    flex-direction:column;
    gap:22px;

}

.career-contact-item{

    display:flex;
    align-items:center;
    gap:18px;

}

.career-contact-item i{

    width:58px;
    height:58px;
    border-radius:50%;
    background:#FFF8E6;
    color:#FDB913;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;

}

.career-contact-item small{

    color:#94A3B8;

}

.career-contact-item h6{

    margin:4px 0 0;
    font-weight:600;

}

.career-form-card{

    background:#fff;
    border:1px solid #ECECEC;
    border-radius:24px;
    padding:40px;
    box-shadow:0 20px 45px rgba(15,23,42,.05);

}

.career-form-card .form-control,
.career-form-card .form-select{

    min-height:54px;
    border-radius:12px;

}

.career-form-card textarea{

    min-height:150px;
    resize:none;

}

/*=========================================================
SAFETY MANAGEMENT
=========================================================*/

.safety-image{

    height:100%;

    overflow:hidden;

    border-radius:24px;

    box-shadow:0 20px 60px rgba(15,23,42,.08);

}

.safety-image img{

    width:100%;

    height:100%;

    min-height:620px;

    object-fit:cover;

    transition:.5s;

}

.safety-image:hover img{

    transform:scale(1.05);

}

.safety-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    height:100%;

}

.safety-feature{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding-bottom:22px;

    margin-bottom:22px;

    border-bottom:1px solid #ECECEC;

}

.safety-feature:last-child{

    border-bottom:none;

}

.safety-feature .icon{

    width:62px;

    height:62px;

    background:#FFF8E6;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.safety-feature .icon i{

    font-size:28px;

    color:#FDB913;

}

.safety-feature h5{

    margin-bottom:8px;

    font-weight:700;

}

.safety-feature p{

    margin:0;

    color:#64748B;

}

@media(max-width:991px){

.safety-image img{

min-height:380px;

}

}

/*=========================================================
SAFETY STATS
=========================================================*/

.safety-stat-card{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

    height:100%;

    transition:.35s;

}

.safety-stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(15,23,42,.08);

}

.safety-stat-card .stat-icon{

    width:75px;

    height:75px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#FFF8E6;

    display:flex;

    align-items:center;

    justify-content:center;

}

.safety-stat-card .stat-icon i{

    font-size:30px;

    color:#FDB913;

}

.safety-stat-card h3{

    font-size:38px;

    font-weight:800;

    color:#0F172A;

    margin-bottom:10px;

}

.safety-stat-card p{

    margin:0;

    color:#64748B;

    font-weight:500;

}

/*=========================================================
SAFETY OBJECTIVES
=========================================================*/

.safety-objectives{

    background:#F8FAFC;

    border-radius:28px;

    padding:60px;

}

.objective-item{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:16px;

    padding:18px 20px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:12px;

    transition:.3s;

}

.objective-item:hover{

    background:#FFF8E6;

    border-color:#FDB913;

}

.objective-item i{

    color:#FDB913;

    font-size:18px;

}

@media(max-width:991px){

.safety-objectives{

padding:35px;

}

}

/*=========================================================
QUALITY COMMITMENT
=========================================================*/

.quality-image{

    overflow:hidden;

    border-radius:24px;

    box-shadow:0 20px 60px rgba(15,23,42,.08);

}

.quality-image img{

    width:100%;

    height:620px;

    object-fit:cover;

    transition:.5s;

}

.quality-image:hover img{

    transform:scale(1.05);

}

.quality-mini-card{

    height:100%;

    padding:28px;

    border:1px solid #ECECEC;

    border-radius:18px;

    background:#fff;

    text-align:center;

    transition:.35s;

}

.quality-mini-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(15,23,42,.08);

}

.quality-mini-card i{

    font-size:34px;

    color:#FDB913;

    margin-bottom:18px;

    display:block;

}

.quality-mini-card h6{

    margin:0;

    font-weight:600;

}

@media(max-width:991px){

.quality-image img{

height:380px;

}

}
/*=========================================================
QUALITY PILLARS
=========================================================*/

.quality-pillars{

    background:#F8FAFC;

}

.pillar-card{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    height:100%;

    transition:.35s;

}

.pillar-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(15,23,42,.08);

}

.pillar-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    background:#FFF8E6;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}

.pillar-icon i{

    font-size:34px;

    color:#FDB913;

}

.pillar-card h5{

    font-weight:700;

    margin-bottom:15px;

}

.pillar-card p{

    margin:0;

    color:#64748B;

    line-height:1.8;

}


/*=========================================================
FEATURED MACHINERY
=========================================================*/

.machinery-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #ECECEC;

    height:100%;

    transition:all .35s ease;

}

.machinery-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 55px rgba(15,23,42,.08);

}

.machinery-image{

    overflow:hidden;

}

.machinery-image img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:transform .6s ease;

}

.machinery-card:hover .machinery-image img{

    transform:scale(1.08);

}

.machinery-content{

    padding:2rem;

}

.machinery-content h3{

    font-size:1.6rem;

    font-weight:700;

    color:#0F172A;

    margin-bottom:1rem;

}

.machinery-content p{

    margin:0;

    color:#64748B;

    line-height:1.9;

}

/*=========================================================
MODERN FLEET
=========================================================*/

.fleet-highlight{

    background:#fff;

    border-radius:28px;

    padding:4rem;

    border:1px solid #ECECEC;

    box-shadow:0 20px 50px rgba(15,23,42,.05);

}

.fleet-highlight h3{

    font-size:2.2rem;

    font-weight:700;

    color:#0F172A;

}

.fleet-highlight p{

    color:#64748B;

    line-height:1.9;

}

/*=========================================================
BRAND GRID
=========================================================*/

.brand-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}

.brand-grid span{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:16px;

    padding:18px;

    text-align:center;

    font-weight:600;

    color:#334155;

    transition:.3s;

}

.brand-grid span:hover{

    background:#FDB913;

    color:#0F172A;

    border-color:#FDB913;

    transform:translateY(-4px);

}

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

@media (max-width:991px){

    .machinery-image img{

        height:260px;

    }

    .fleet-highlight{

        padding:2.5rem;

    }

    .fleet-highlight h3{

        font-size:1.8rem;

    }

    .brand-grid{

        grid-template-columns:repeat(2,1fr);

        margin-top:2rem;

    }

}

@media (max-width:767px){

    .machinery-content{

        padding:1.5rem;

    }

    .machinery-content h3{

        font-size:1.35rem;

    }

    .machinery-image img{

        height:220px;

    }

    .brand-grid{

        grid-template-columns:1fr;

    }

    .fleet-highlight{

        padding:2rem;

        text-align:center;

    }

}

@media (max-width:575px){

    .machinery-image img{

        height:200px;

    }

}
/*=========================================================
VISION MISSION
=========================================================*/

/*=========================================================
FOUNDATION
=========================================================*/

.foundation-vision{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    box-shadow:0 30px 70px rgba(15,23,42,.10);

}

.foundation-vision img{

    width:100%;

    height:600px;

    object-fit:cover;

    object-position:center;

}

.foundation-vision::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(15,23,42,.88) 0%,
        rgba(15,23,42,.72) 38%,
        rgba(15,23,42,.35) 70%,
        rgba(15,23,42,.08) 100%
    );

    z-index:1;

}

.vision-content{

    position:absolute;

    z-index:2;

    left:70px;

    top:50%;

    transform:translateY(-50%);

    max-width:560px;

}

.vision-content span{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.7rem 1.5rem;

    border-radius:999px;

    background:#FDB913;

    color:#0F172A;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.vision-content h3{

    color:#fff;

    font-size:clamp(2.6rem,5vw,4.4rem);

    font-weight:800;

    line-height:1.08;

    margin:22px 0;

    letter-spacing:-1px;

}

.vision-content p{

    color:rgba(255,255,255,.92);

    font-size:1.1rem;

    line-height:1.9;

    max-width:520px;

}

.foundation-card{

    height:100%;

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:24px;

    padding:40px;

    transition:.35s;

}

.foundation-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(15,23,42,.08);

    border-color:#FDB913;

}

.foundation-card h4{

    font-size:1.6rem;

    font-weight:700;

    margin-bottom:20px;

}

.foundation-card p{

    margin:0;

    color:#64748B;

    line-height:1.9;

}
@media (max-width:991px){

.foundation-vision img{

height:420px;

}

.vision-content{

left:35px;

right:35px;

top:auto;

bottom:35px;

transform:none;

}

.vision-content h3{

font-size:2.4rem;

}

}

@media (max-width:576px){

.foundation-vision img{

height:340px;

}

.vision-content{

left:25px;

right:25px;

bottom:25px;

}

.vision-content h3{

font-size:1.8rem;

}

.vision-content p{

font-size:.95rem;

}

}

.project-mega-menu {
  min-width: 620px;
  color: var(--body);
}

.project-menu-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: 100%;
  padding: 0.85rem 1rem;
  color: var(--secondary);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: var(--transition);
}

.project-menu-link i {
  color: var(--primary);
}

.project-menu-link:hover,
.project-menu-link:focus-visible {
  color: var(--secondary);
  background: var(--primary-light);
  border-color: var(--primary);
  outline: 0;
}

.project-menu-feature {
  height: 100%;
  padding: 1.75rem;
  color: #fff;
  background: linear-gradient(135deg, var(--secondary), #263b62);
  border-radius: 16px;
}

.project-menu-feature i {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--primary);
  font-size: 2rem;
}

.project-menu-feature h4,
.project-menu-feature p {
  color: #fff;
}

.project-menu-feature p {
  color: rgba(255, 255, 255, 0.82);
}

.service-detail-hero {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  color: #fff;
  background: var(--secondary);
}

.service-detail-hero > img,
.service-detail-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.service-detail-hero > img {
  object-fit: cover;
}

.service-detail-overlay {
  background: linear-gradient(90deg, rgba(8, 15, 32, 0.9), rgba(8, 15, 32, 0.45));
}

.min-vh-50 {
  min-height: 480px;
}

.service-detail-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  margin-bottom: 1.25rem;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.service-detail-hero h1,
.service-detail-hero p {
  color: #fff;
}

.service-detail-hero h1 {
  max-width: 780px;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
}

.service-detail-hero p {
  max-width: 650px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.15rem;
}

.service-detail-card {
  height: 100%;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.service-detail-card i {
  color: var(--primary);
  font-size: 1.75rem;
}

.service-detail-card h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.1rem;
}

.service-detail-card p {
  margin: 0;
  color: var(--muted);
}

/* Road construction service overview */
.road-intro-image {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.road-intro-image img {
  display: block;
  width: 100%;
  min-height: 340px;
  object-fit: cover;
}

.road-check-list {
  display: grid;
  gap: 0.9rem;
  color: var(--body);
  font-weight: 600;
}

.road-check-list i {
  margin-right: 0.55rem;
  color: var(--primary);
}

.road-scope-card {
  height: 100%;
  padding: 1.75rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.road-scope-card > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  color: var(--primary);
  font-size: 1.35rem;
  background: var(--primary-light);
  border-radius: 12px;
}

.road-scope-card h3 {
  margin-bottom: 0.55rem;
  font-size: 1.2rem;
}

.road-scope-card p {
  margin: 0;
  color: var(--muted);
}

/* Concise Road Construction page */
.road-page-intro {
  background: #fff;
}

.road-page-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.road-page-image img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.road-page-image figcaption {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.85);
  border-radius: 999px;
}

.road-page-image figcaption i,
.road-page-list i {
  color: var(--primary);
}

.road-page-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.road-page-list span {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  color: var(--body);
  font-weight: 600;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.road-page-approach {
  background: var(--section);
}

.road-page-card {
  height: 100%;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.road-page-card > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 1rem;
  color: var(--primary);
  font-size: 1.4rem;
  background: var(--primary-light);
  border-radius: 12px;
}

.road-page-card h3 {
  margin-bottom: 0.55rem;
  font-size: 1.2rem;
}

.road-page-card p {
  margin: 0;
  color: var(--muted);
}

/* Existing Road Construction page: shared visual treatment */
.road-construction-page .py-6 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.road-construction-page .about-image > img,
.road-construction-page .road-services img,
.road-construction-page .engineering-standards img {
  width: 100%;
  object-fit: cover;
}

.road-construction-page .about-image > img {
  min-height: 430px;
}

.road-construction-page .floating-badge {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: 0.7rem 1rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--secondary);
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.road-construction-page .service-highlight {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
  padding: 1rem;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.road-construction-page .service-highlight > i,
.road-construction-page .service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: var(--primary);
  font-size: 1.2rem;
  background: var(--primary-light);
  border-radius: 10px;
}

.road-construction-page .service-highlight h6 {
  margin: 0 0 0.2rem;
  color: var(--secondary);
}

.road-construction-page .service-highlight span {
  color: var(--muted);
  font-size: 0.85rem;
}

.road-construction-page .service-card,
.road-construction-page .process-card,
.road-construction-page .equipment-card {
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.road-construction-page .service-card .card-body,
.road-construction-page .equipment-content {
  padding: 1.5rem;
}

.road-construction-page .service-card p,
.road-construction-page .process-card p,
.road-construction-page .equipment-content p {
  margin-bottom: 0;
  color: var(--muted);
}

.road-construction-page .service-number,
.road-construction-page .process-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  color: var(--primary);
  font-weight: 800;
  background: var(--primary-light);
  border-radius: 50%;
}

.road-construction-page .process-card {
  position: relative;
  padding: 1.5rem;
}

.road-construction-page .process-icon {
  margin-bottom: 1rem;
  color: var(--primary);
  font-size: 1.5rem;
}

.road-construction-page .machinery-image {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.road-construction-page .equipment-note {
  padding: 1.5rem 2rem;
  text-align: center;
  background: #fff;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* Road process flow */
.road-construction-page .road-process {
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.road-construction-page .process-wrapper {
  position: relative;
  padding-top: 0.5rem;
}

.road-construction-page .process-line {
  position: absolute;
  top: 58px;
  right: 8.33%;
  left: 8.33%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary) 10%, var(--primary) 90%, transparent);
  opacity: 0.55;
}

.road-construction-page .process-item {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 210px;
  padding: 1.5rem 1rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.road-construction-page .process-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 1.25rem;
  left: 1.25rem;
  height: 3px;
  background: var(--primary);
  border-radius: 0 0 999px 999px;
}

.road-construction-page .process-item .process-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 0 1rem;
  color: var(--primary);
  font-size: 1.45rem;
  background: #fff;
  border: 2px solid var(--primary);
  border-radius: 50%;
}

.road-construction-page .process-item .process-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  min-width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  background: transparent;
  border-radius: 0;
}

.road-construction-page .process-item h6 {
  margin-bottom: 0.5rem;
  color: var(--secondary);
  font-size: 1rem;
  font-weight: 700;
}

.road-construction-page .process-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Shared presentation for service detail pages */
.service-page .py-6 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.service-page .about-image > img,
.service-page section[class$="-services"] img,
.service-page .engineering-standards img {
  width: 100%;
  object-fit: cover;
}

.service-page .about-image > img {
  min-height: 430px;
}

.service-page .floating-badge {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: 0.7rem 1rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--secondary);
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.service-page .service-highlight {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
  padding: 1rem;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.service-page .service-highlight > i,
.service-page .service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: var(--primary);
  font-size: 1.2rem;
  background: var(--primary-light);
  border-radius: 10px;
}

.service-page .service-highlight h6 {
  margin: 0 0 0.2rem;
  color: var(--secondary);
}

.service-page .service-highlight span,
.service-page .service-number + h3 + p {
  color: var(--muted);
}

.service-page .service-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  color: var(--primary);
  font-weight: 800;
  background: var(--primary-light);
  border-radius: 50%;
}

.service-page .process-wrapper {
  position: relative;
  padding-top: 0.5rem;
}

.service-page .process-line {
  position: absolute;
  top: 58px;
  right: 8.33%;
  left: 8.33%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary) 10%, var(--primary) 90%, transparent);
  opacity: 0.55;
}

.service-page .process-item {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 210px;
  padding: 1.5rem 1rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.service-page .process-item .process-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 0 1rem;
  color: var(--primary);
  font-size: 1.45rem;
  background: #fff;
  border: 2px solid var(--primary);
  border-radius: 50%;
}

.service-page .process-item .process-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.service-page .process-item h6 {
  margin-bottom: 0.5rem;
  color: var(--secondary);
  font-size: 1rem;
}

.service-page .process-item p,
.service-page .component-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.service-page .component-card {
  height: 100%;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.service-page .component-card > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  color: var(--primary);
  font-size: 1.3rem;
  background: var(--primary-light);
  border-radius: 12px;
}

.service-page .component-card h5 {
  margin-bottom: 0.55rem;
}

/* Railway Infrastructure refinements */
.railway-page .railway-services {
  background: linear-gradient(180deg, var(--section) 0%, #fff 100%) !important;
}

.railway-page .railway-services img {
  display: block;
  height: 340px;
  object-position: center;
}

.railway-page .railway-services .row.align-items-center {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.railway-page .engineering-standards {
  border-top: 1px solid var(--border);
}

.railway-page .quality-item {
  transition: none;
}

.railway-page .quality-item:hover {
  background: #f8fafc;
  border-color: var(--border);
  transform: none;
}

/* Bridge Construction refinements */
.bridge-page .bridge-services {
  background: #fff !important;
}

.bridge-page .bridge-services img {
  display: block;
  height: 340px;
  object-position: center;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.bridge-page .bridge-services .row.align-items-center {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bridge-page .bridge-services .row.align-items-center > div:last-child {
  padding: 2rem;
  background: var(--secondary);
}

.bridge-page .bridge-services .row.align-items-center h3,
.bridge-page .bridge-services .row.align-items-center p {
  color: #fff;
}

.bridge-page .bridge-services .row.align-items-center p {
  color: rgba(255, 255, 255, 0.8);
}

.bridge-page .bridge-services .service-number {
  width: auto;
  height: auto;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.65rem;
  color: #ffd166;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.bridge-page .bridge-process {
  background: var(--secondary);
}

.bridge-page .bridge-process .section-title,
.bridge-page .bridge-process .section-description {
  color: #fff;
}

.bridge-page .bridge-process .section-description {
  color: rgba(255, 255, 255, 0.78);
}

.bridge-page .bridge-process .process-line {
  background: linear-gradient(90deg, transparent, #ffd166 10%, #ffd166 90%, transparent);
}

.bridge-page .bridge-process .process-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

.bridge-page .bridge-process .process-item .process-icon {
  color: #ffd166;
  background: var(--secondary);
  border-color: #ffd166;
}

.bridge-page .bridge-process .process-item h6 {
  color: #fff;
}

.bridge-page .bridge-process .process-item p,
.bridge-page .bridge-process .process-item .process-number {
  color: rgba(255, 255, 255, 0.72);
}

.bridge-page .bridge-components {
  background: #f1f5f9 !important;
}

.bridge-page .component-card {
  background: var(--secondary);
  border-color: var(--secondary);
  box-shadow: none;
}

.bridge-page .component-card > i {
  color: #ffd166;
  background: rgba(255, 255, 255, 0.09);
}

.bridge-page .component-card h5 {
  color: #fff;
}

.bridge-page .component-card p {
  color: rgba(255, 255, 255, 0.76);
}

.bridge-page .quality-item {
  transition: none;
}

.bridge-page .quality-item:hover {
  background: #f8fafc;
  border-color: var(--border);
  transform: none;
}

@media (max-width: 767.98px) {
  .bridge-page .bridge-services img {
    height: 260px;
  }

  .bridge-page .bridge-services .row.align-items-center {
    padding: 0;
  }

  .bridge-page .bridge-services .row.align-items-center > div:last-child {
    padding: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .railway-page .railway-services img {
    height: 260px;
  }

  .railway-page .railway-services .row.align-items-center {
    padding: 1rem;
  }
}

@media (max-width: 767.98px) {
  .service-page .py-6 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .service-page .about-image > img {
    min-height: 300px;
  }

  .service-page .process-line {
    display: none;
  }

  .service-page .process-item {
    min-height: 190px;
  }
}

@media (max-width: 767.98px) {
  .road-construction-page .py-6 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .road-construction-page .about-image > img {
    min-height: 300px;
  }

  .road-construction-page .process-line {
    display: none;
  }

  .road-construction-page .process-item {
    min-height: 190px;
  }
}

@media (max-width: 767.98px) {
  .road-page-image img {
    height: 300px;
  }

  .road-page-card {
    padding: 1.4rem;
  }
}

@media (min-width: 1200px) {
  .project-mega-dropdown > .project-mega-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .project-mega-dropdown:hover > .project-mega-menu,
  .project-mega-dropdown:focus-within > .project-mega-menu,
  .project-mega-dropdown > .project-mega-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 1199.98px) {
  .nav-menu-toggle,
  .project-mega-menu {
    display: none !important;
  }
}


/*=========================================================
ENGINEERING STANDARDS
=========================================================*/

.engineering-standards{

    background:#fff;

}

.quality-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.quality-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 22px;

    background:#F8FAFC;

    border-radius:18px;

    border:1px solid #E2E8F0;

    transition:.3s;

}

.quality-item:hover{

    background:#FFF8E6;

    border-color:#FDB913;

    transform:translateX(6px);

}

.quality-item i{

    font-size:1.2rem;

    color:#FDB913;

    flex-shrink:0;

}

.quality-item span{

    font-weight:500;

    color:#334155;

}

.engineering-standards img{

    width:100%;

    height:560px;

    object-fit:cover;

    border-radius:30px;

}

@media(max-width:991px){

.engineering-standards img{

height:420px;

margin-top:30px;

}

}

@media(max-width:576px){

.engineering-standards img{

height:300px;

}

}


/*=========================================================
Projects Intro
=========================================================*/

.project-image-card{

    position:relative;

    width:100%;

    min-height:620px;

    height:100%;

    overflow:hidden;

    border-radius:24px;

}

.project-main-image{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:24px;

    transition:.45s ease;

}

.project-image-card:hover .project-main-image{

    transform:scale(1.05);

}

.project-floating-card{

    position:absolute;

    left:30px;

    right:30px;

    bottom:30px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(12px);

    border-radius:18px;

    padding:24px;

    box-shadow:0 20px 45px rgba(15,23,42,.18);

}

.project-floating-card h3{

    color:var(--primary);

    font-size:2rem;

    font-weight:700;

    margin-bottom:4px;

}

.project-floating-card span{

    color:#64748B;

    font-size:.9rem;

    font-weight:600;

}

@media(max-width:991px){

.project-image-card{

min-height:420px;

margin-top:20px;

}

.project-floating-card{

left:20px;

right:20px;

bottom:20px;

padding:18px;

}

.project-floating-card h3{

font-size:1.5rem;

}

}

@media(max-width:576px){

.project-image-card{

min-height:320px;

}

.project-floating-card{

position:relative;

left:auto;

right:auto;

bottom:auto;

margin:20px;

}

}