/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/

/* ============================================
   KOPANO KLATZER HOLDINGS - MODERN INDUSTRIAL STYLE
   Steel Fabrication & Engineering Company
   ============================================ */

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,600,700,900&display=swap');

*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/

/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(swiper.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
     box-sizing: border-box !important;
}

html {
     scroll-behavior: smooth;
}

body {
     color: #333333;
     background: #000000;
     font-size: 16px;
     font-family: 'Raleway', sans-serif;
     line-height: 1.6;
     font-weight: 400;
}

a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: 700;
     position: relative;
     padding: 0 0 15px 0;
     line-height: 1.2;
     color: #1a1a1a;
     margin: 0;
     text-transform: uppercase;
}

h1 {
     font-size: 3.5rem;
     line-height: 1.1;
     letter-spacing: -1px;
}

h2 {
     font-size: 2.5rem;
     letter-spacing: -0.5px;
}

h3 {
     font-size: 1.75rem;
     text-align: center;
}

h4 {
     font-size: 1.25rem
}

h5 {
     font-size: 1rem
}

h6 {
     font-size: 0.875rem
}

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

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none!important;
     opacity: 1
}

button:focus {
     outline: none;
}

ul,
li,
ol {
     margin: 0px;
     padding: 0px;
     list-style: none;
}

p {
     margin: 0px;
     font-weight: 500;
     font-size: 20px;
     line-height: 24px;
}

a {
     color: #000000;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

img {
     max-width: 100%;
     height: auto;
}

 :focus {
     outline: 0;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

.lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}

.form-control:focus {
     border-color: #0a0505 !important;
     box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input {
     border: none !important;
}

.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     float: left;
     width: 100%;
}

.layout_padding {
     padding-top: 90px;
     padding-bottom: 90px;
}

.layout_padding_2 {
     padding-top: 75px;
     padding-bottom: 75px;
}

.light_silver {
     background: #28a745;
}

.theme_bg {
     background: #28a745;
}

.margin_top_30 {
     margin-top: 30px !important;
}

.full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}


/** banner section **/
.banner_main {
     background: linear-gradient(135deg, #41515F 0%, #2d3b4a 100%);
     min-height: 700px;
     display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
     position: relative;
     overflow: hidden;
}

.banner_main::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.05"/></svg>');
     pointer-events: none;
}

.text-bg {
     text-align: left;
     padding-left: 50px;
     position: relative;
     z-index: 1;
}

.text-bg h1 {
     text-transform: uppercase;
     color: #ffffff;
     font-size: 4.5rem;
     line-height: 3.5rem;
     padding-bottom: 35px;
     font-weight: 800;
     text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.text-bg span {
     text-transform: uppercase;
     color: #ffffff;
     font-size: 2.5rem;
     line-height: 3rem;
     font-weight: 700;
     padding-bottom: 25px;
     display: block;
     letter-spacing: 1px;
}

.text-bg p {
     line-height: 28px;
     font-weight: 600;
     padding-bottom: 20px;
     display: block;
     color: #ffffff;
     font-size: 1.1rem;
     max-width: 600px;
     text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.text-bg figure img {
     width: 100%;
     padding-left: 40px;
     border-radius: 25%;
     box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.text_img figure {
     margin: 0;
     border-radius: 25%;
}

.text_img figure img {
     width: 100%;
     border-radius: 40%;
     box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.carousel-caption {
     position: inherit;
}

#banner1 .carousel-indicators {
     display: none;
}

#banner1 a.carousel-control-prev {
     left: 90px;
     position: absolute;
}

#banner1 a.carousel-control-next {
     left: 155px;
     position: absolute;
}

#banner1 a.carousel-control-prev,
#banner1 a.carousel-control-next {
     display: none;
}

/* Bottom carousel controls */
.carousel-controls-bottom {
     position: absolute;
     bottom: 20px;
     left: 0;
     right: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 15px;
     z-index: 10;
}

.carousel-controls-bottom .carousel-control-prev,
.carousel-controls-bottom .carousel-control-next {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: rgba(65, 81, 95, 0.8);
     opacity: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #51B647;
     border: 2px solid #51B647;
     transition: all 0.3s ease;
     text-decoration: none;
     cursor: pointer;
}

.carousel-controls-bottom .carousel-control-prev:hover,
.carousel-controls-bottom .carousel-control-next:hover,
.carousel-controls-bottom .carousel-control-prev:focus,
.carousel-controls-bottom .carousel-control-next:focus {
     background: #51B647;
     color: #41515F;
     transform: scale(1.1);
}

.carousel-controls-bottom .carousel-control-prev i,
.carousel-controls-bottom .carousel-control-next i {
     font-size: 18px;
}

/* Banner buttons - ensure text fits */
.text-bg a {
     text-transform: uppercase;
     font-size: 0.9rem;
     background-color: #51B647;
     color: #1a1a1a;
     font-weight: 700;
     padding: 12px 24px;
     width: 100%;
     max-width: 200px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     margin-right: 10px;
     border-radius: 8px;
     letter-spacing: 0.5px;
     box-shadow: 0 4px 15px rgba(81, 182, 71, 0.3);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

.text-bg a:hover {
     background-color: #1a1a1a;
     color: #51B647;
     transition: ease-in all 0.5s;
     transform: translateY(-2px);
}


/** end banner section **/

.titlepage {
     text-align: center;
     padding-bottom: 60px;
}

.titlepage h2 {
     font-size: 2.5rem;
     color: #1a1a1a;
     line-height: 1.2;
     font-weight: 800;
     padding: 0;
     border-bottom: #51B647 solid 4px;
     display: inline-block;
     padding-bottom: 15px;
     position: relative;
     letter-spacing: -0.5px;
}

.titlepage h2::before {
     position: absolute;
     content: "";
     border-bottom: #51B647 solid 8px;
     bottom: -4px;
     width: 151px;
     left: 5px;
}

 .titlepage p {
      font-size: 1.2rem;
      color: #41515F;
      padding-top: 30px;
      font-weight: 500;
 }

.d_flex {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}

.blu {
     color: #0808ff;
}

.read_more {
     font-size: 0.95rem;
     background-color: #51B647;
     color: #1a1a1a !important;
     padding: 12px 24px;
     width: 100%;
     max-width: 200px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     border-radius: 8px;
     font-weight: 700;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     border: 2px solid #51B647;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

.read_more:hover {
     background: linear-gradient(135deg, #41515F 0%, #2d3b4a 100%);
     color: #ffffff !important;
     transition: ease-in all 0.2s;
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(65, 81, 95, 0.3);
     border-color: #41515F;
}


/** services section **/
.services {
     padding-top: 90px;
     background-color:  #28a745;
     position: relative;
}

.services::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(180deg, #28a745 0%, #025916 100%);
     z-index: 0;
}

.services .container {
     position: relative;
     z-index: 1;
}

.services_box {
     background: #ffffff74;
     text-align: center;
     padding: 30px 25px 25px 25px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     border-radius: 12px;
     border-bottom: #51B647 solid 5px;
     transition: ease-in all 0.5s;
     margin-bottom: 30px;
     position: relative;
     overflow: hidden;
     min-height: 320px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}

.services_box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 5px;
     background: linear-gradient(90deg, #51B647, #41515F, #51B647);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.5s ease;
}

.services_box:hover::before {
     transform: scaleX(1);
}

.services_box h3 {
     color: #1a1a1a;
     font-size: 1.3rem;
     font-weight: 700;
     text-transform: uppercase;
     padding: 0;
     margin-top: 15px;
     letter-spacing: 0.5px;
     min-height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
}

.services_box p {
     font-size: 0.95rem;
     padding-top: 15px;
     line-height: 1.5;
     text-align: left;
     color: #555;
     flex-grow: 1;
     display: flex;
     align-items: flex-start;
}

.services_box i {
     display: inline-block;
     float: left;
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
}

.services_box i img {
     width: 50px;
     height: 50px;
     object-fit: contain;
}

#co_hocha:hover.services_box {
     border-bottom: #41515F solid 5px;
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.services .read_more {
     margin: 0 auto;
     display: block;
     margin-top: 20px !important;
     width: 100%;
     max-width: 180px;
}


/** end services section **/

/** about section **/
.about {
     background: linear-gradient(135deg, #41515F 0%, #2d3b4a 100%);
     padding: 100px 0;
     position: relative;
     overflow: hidden;
}

.about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.03"/></svg>');
     pointer-events: none;
}

.about .titlepage {
     text-align: left;
     padding-bottom: 40px;
     position: relative;
     z-index: 1;
}

.about .titlepage h2 {
     border-bottom: #ffffff solid 2px;
     color: #ffffff;
     font-size: 2.5rem;
}

.about .titlepage h2::before {
     border-bottom: #51B647 solid 8px;
}

.about .about_box p {
     color: #ffffff;
     font-size: 1.1rem;
     line-height: 1.8;
     font-weight: 500;
     margin-bottom: 45px;
     position: relative;
     z-index: 1;
}

.about_img {
     margin-right: -40px;
     border-radius: 14px;
     overflow: hidden;
     box-shadow: 0 15px 40px rgba(0,0,0,0.3);
     position: relative;
     z-index: 1;
}

.about_img figure {
     margin: 0;
     border-radius: 14px;
     overflow: hidden;
}

.about_img figure img {
     width: 100%;
     border-radius: 14px;
     transition: transform 0.5s ease;
}

.about_img:hover figure img {
     transform: scale(1.05);
}


/** end about section **/



.team::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
     z-index: 0;
}

.team .container {
     position: relative;
     z-index: 1;
}

.our_team {
     text-align: center;
     align-content: center;
     box-align: center;
}

.our_team figure {
     margin: 0;
     align-content: center;
     box-align: center;
     overflow: hidden;
     border-radius: 12px;
}

.our_team figure img {
     width: 100%;
     align-content: center;
     text-align: center;
     transition: transform 0.5s ease;
     border-radius: 12px;
}

.our_team:hover figure img {
     transform: scale(1.05);
}

.our_team h3 {
     color: #1a1a1a;
     font-size: 1.5rem;
     line-height: 1.3;
     font-weight: 700;
     padding-bottom: 5px;
     text-transform: uppercase;
     padding-top: 20px;
     margin-top: 15px;
     letter-spacing: 0.5px;
}

.our_team span {
     color: #51B647;
     font-size: 1rem;
     align-content: center;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}


/** end team section **/

/* ============================================
   REDESIGNED CONTACT US SECTION
   ============================================ */
.contact {
     padding: 100px 0 60px 0;
     background: linear-gradient(180deg, #28a745 0%, #025916 100%);
     position: relative;
}

.contact .section-header {
     text-align: center;
     margin-bottom: 60px;
}

 .contact .section-header .section-tag {
      display: block;
      font-size: 0.9rem;
      font-weight: 700;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 10px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }

 .contact .section-header .section-title {
      font-size: 2.8rem;
      font-weight: 800;
      color: #ffffff;
      text-transform: uppercase;
      margin: 0;
      line-height: 1.2;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .contact .section-header .section-title em {
      color: #ffffff;
      font-style: normal;
 }

.contact .section-header .title-line {
     width: 80px;
     height: 4px;
     background: #51B647;
     margin: 20px auto 0;
     border-radius: 2px;
}

.contact-grid {
     display: flex;
     gap: 40px;
     align-items: flex-start;
}

.contact-left {
     flex: 0 0 35%;
     padding-top: 10px;
}

.contact-left .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 30px;
}

.contact-left .contact-icon {
     width: 50px;
     height: 50px;
     background: #51B647;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 18px;
     flex-shrink: 0;
}

 .contact-left .contact-icon i {
      color: #ffffff;
      font-size: 1.1rem;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }

 .contact-left .contact-item h4 {
      font-size: 1.1rem;
      font-weight: 700;
      color: #ffffff;
      text-transform: uppercase;
      margin: 0 0 6px 0;
      padding: 0;
      letter-spacing: 0.5px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }

 .contact-left .contact-item p {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
      line-height: 1.6;
      font-weight: 500;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
 }

.contact-left .contact-item p a {
     color: #ffffff;
     text-decoration: none;
     transition: color 0.3s ease;
}

 .contact-left .contact-item p a:hover {
      color: #ffffff;
      text-decoration: underline;
 }

.contact-right {
     flex: 0 0 65%;
}

.contact-right .mail-form {
     background: #f8f9fa;
     padding: 40px;
     border-radius: 12px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     margin-bottom: 30px;
}

.contact-right .form-title {
     font-size: 1.6rem;
     font-weight: 800;
     color: #1a1a1a;
     text-transform: uppercase;
     margin: 0 0 30px 0;
     text-align: center;
}

.contact-right .form-title em {
     color: #51B647;
     font-style: normal;
}

.contact-right .form-row {
     display: flex;
     gap: 20px;
     margin-bottom: 20px;
}

.contact-right .form-group {
     flex: 1;
     margin-bottom: 20px;
}

.contact-right .form-group label {
     display: block;
     font-size: 0.85rem;
     font-weight: 700;
     color: #1a1a1a;
     text-transform: uppercase;
     margin-bottom: 8px;
     letter-spacing: 0.5px;
}

.contact-right .form-group input,
.contact-right .form-group select,
.contact-right .form-group textarea {
     width: 100%;
     padding: 14px 18px;
     border: 2px solid #e0e0e0;
     border-radius: 8px;
     font-size: 1rem;
     font-family: 'Raleway', sans-serif;
     color: #1a1a1a;
     background: #ffffff;
     transition: all 0.3s ease;
}

.contact-right .form-group input:focus,
.contact-right .form-group select:focus,
.contact-right .form-group textarea:focus {
     outline: none;
     border-color: #51B647;
     box-shadow: 0 0 0 3px rgba(81, 182, 71, 0.1);
}

.contact-right .form-group textarea {
     resize: vertical;
     min-height: 140px;
}

.contact-right .form-submit {
     width: 100%;
     padding: 16px;
     background: #51B647;
     color: #1a1a1a;
     font-size: 1rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(81, 182, 71, 0.3);
}

.contact-right .form-submit:hover {
     background: #41515F;
     color: #ffffff;
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(65, 81, 95, 0.4);
}

.contact-right .form-feedback {
     margin-top: 15px;
     padding: 12px;
     border-radius: 8px;
     text-align: center;
     font-weight: 600;
     display: none;
}

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

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

.contact-map {
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

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

/* Responsive Contact */
@media (max-width: 991px) {
     .contact-grid {
          flex-direction: column;
     }

     .contact-left,
     .contact-right {
          flex: 0 0 100%;
     }

     .contact-right .form-row {
          flex-direction: column;
          gap: 0;
     }
}

/* ============================================
   REDESIGNED FOOTER SECTION
   ============================================ */
.footer {
     background: #1a1a1a;
     padding: 80px 0 0 0;
     color: #ffffff;
     position: relative;
}

.footer-top {
     display: flex;
     justify-content: space-between;
     gap: 40px;
     padding-bottom: 60px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
     flex: 0 0 35%;
}

.footer-brand .logo-text {
     font-family: 'Rajdhani', sans-serif;
     font-size: 1.8rem;
     font-weight: 700;
     text-transform: uppercase;
     color: #ffffff;
     text-decoration: none;
     display: inline-block;
     margin-bottom: 15px;
     letter-spacing: 1px;
}

.footer-brand .logo-text em {
     color: #51B647;
     font-style: normal;
}

.footer-brand p {
     font-size: 0.95rem;
     color: rgba(255, 255, 255, 0.7);
     line-height: 1.7;
     margin: 0;
     font-weight: 500;
}

.footer-links {
     flex: 0 0 20%;
}

.footer-links h4,
.footer-contact h4 {
     font-size: 1.1rem;
     font-weight: 700;
     color: #ffffff;
     text-transform: uppercase;
     margin: 0 0 25px 0;
     padding: 0;
     letter-spacing: 0.5px;
}

.footer-links a {
     display: block;
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     font-size: 0.95rem;
     margin-bottom: 12px;
     transition: all 0.3s ease;
     font-weight: 500;
}

.footer-links a:hover {
     color: #51B647;
     transform: translateX(5px);
}

.footer-contact {
     flex: 0 0 30%;
}

.footer-contact p {
     font-size: 0.95rem;
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     font-weight: 500;
}

.footer-contact p i {
     color: #51B647;
     margin-right: 12px;
     font-size: 1rem;
     width: 16px;
     text-align: center;
}

.footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 25px 0;
     margin-top: 0;
}

.footer-bottom p {
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.6);
     margin: 0;
     font-weight: 500;
}

.footer-bottom a {
     color: #51B647;
     text-decoration: none;
     font-weight: 600;
     transition: color 0.3s ease;
}

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

/* Responsive Footer */
@media (max-width: 991px) {
     .footer-top {
          flex-direction: column;
     }

     .footer-brand,
     .footer-links,
     .footer-contact {
          flex: 0 0 100%;
     }

     .footer-bottom {
          flex-direction: column;
          gap: 10px;
          text-align: center;
     }
}

/* Navbar container - SOLID BLACK */
.navbar {
     background: #000000 !important;
     padding: 0.3rem 0.8rem;
     min-height: 56px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Desktop navigation links */
.navbar-nav .nav-link {
     color: #ffffff !important;
     font-family: 'Rajdhani', sans-serif;
     font-size: 0.9rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     padding: 0.3rem 0.8rem;
     margin: 0 0.15rem;
     border-radius: 6px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     line-height: 1.3;
}

.navbar-nav .nav-link:hover {
     color: #1a1a1a !important;
     background-color: #51B647;
     transform: translateY(-2px);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active .nav-link {
     color: #1a1a1a !important;
     background-color: #51B647;
     font-weight: 700;
}

/* Push navigation to the right */
.navbar-nav {
     justify-content: flex-end !important;
     padding-right: 2rem !important;
}

.navbar-expand-md .navbar-nav {
     justify-content: flex-end !important;
     padding-right: 2rem !important;
}

/* Desktop navigation adjustments */
@media (min-width: 992px) {
     .navbar-nav {
         justify-content: flex-end !important;
         padding-right: 3rem !important;
         margin-left: auto !important;
     }
     
     .navigation {
         margin-left: auto !important;
         display: flex !important;
         justify-content: flex-end !important;
     }
     
     .navbar-nav .nav-item {
         margin: 0 0.2rem;
     }
     
      /* Keep nav link padding reasonable */
      .navbar-nav .nav-link {
          padding: 0.4rem 1rem !important;
          font-size: 0.9rem !important;
      }
}

/* Header styles */
.header {
     width: 100%;
     padding: 0.3rem 2rem;
     background: #000000;
     position: sticky;
     top: 0;
     z-index: 1000;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     min-height: 56px;
     display: flex;
     align-items: center;
}

.logo a {
     font-family: 'Rajdhani', sans-serif;
     font-size: 1.3rem;
     font-weight: 700;
     text-transform: uppercase;
     color: #ffffff;
     line-height: 1;
     display: inline-block;
     text-decoration: none;
     letter-spacing: 1px;
}

.logo img {
     max-height: 38px;
     width: auto;
     display: block;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Navbar toggler - burger menu */
.navbar-toggle,
.navbar-toggler {
     border: 2px solid #51B647 !important;
     background: transparent !important;
     padding: 0.5rem 0.6rem;
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.3s ease;
}

.navbar-toggle:focus,
.navbar-toggler:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(81, 182, 71, 0.3);
}

.navbar-toggle:hover,
.navbar-toggler:hover {
     background-color: rgba(81, 182, 71, 0.1);
}

/* Custom hamburger icon using CSS */
.navbar-toggle .bar,
.navbar-toggler .navbar-toggler-icon {
     display: block;
     width: 22px;
     height: 2px;
     margin: 4px 0;
     background-color: #ffffff;
     transition: all 0.3s ease;
     position: relative;
}

/* Custom hamburger icon using CSS */
.navbar-toggle .bar:nth-child(1) { transform: translateY(0); }
.navbar-toggle .bar:nth-child(2) { transform: translateY(0); opacity: 1; }
.navbar-toggle .bar:nth-child(3) { transform: translateY(0); }

.navbar-toggle[aria-expanded="true"] .bar:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
}
.navbar-toggle[aria-expanded="true"] .bar:nth-child(2) {
     opacity: 0;
}
.navbar-toggle[aria-expanded="true"] .bar:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
}

/* Mobile navbar collapse */
.navbar-collapse {
     background: #000000;
     border: none;
     padding: 1rem;
     margin-top: 0.5rem;
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     display: none;
}

.navbar-collapse.show {
     display: block !important;
}

.navbar-collapse.collapsing {
     display: none;
}

.navbar-collapse.collapsing.show {
     display: block !important;
}

.navbar-collapse .nav-link {
     padding: 0.75rem 1rem;
     margin: 0.25rem 0;
     font-size: 1rem;
     border-radius: 8px;
     display: block;
     width: 100%;
     text-align: left;
}

.navbar-collapse .nav-link:hover {
     background-color: rgba(81, 182, 71, 0.15);
     color: #51B647 !important;
     transform: translateX(5px);
}

/* Header styles */
.header {
     width: 100%;
     padding: 0.75rem 2rem;
     background: #000000;
     position: sticky;
     top: 0;
     z-index: 1000;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     min-height: 60px;
     display: flex;
     align-items: center;
}

.logo a {
     font-family: 'Rajdhani', sans-serif;
     font-size: 1.5rem;
     font-weight: 700;
     text-transform: uppercase;
     color: #ffffff;
     line-height: 1;
     display: inline-block;
     text-decoration: none;
     letter-spacing: 1px;
}

.logo img {
     max-height: 45px;
     width: auto;
     display: block;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Container fluid adjustments */
.container-fluid {
     padding: 0 15px;
}

/* Ensure navbar content doesn't overflow */
.navbar .container-fluid {
     padding: 0 15px;
}

/* Fix for navbar-expand-md */
.navbar-expand-md .navbar-nav {
     padding-right: 10px;
}

/* Fix for navbar nav alignment */
.navbar-nav {
     align-items: center;
}

.navbar-nav .nav-item {
     margin: 0 5px;
}

/* Ensure proper spacing between logo and nav */
.header .row {
     margin: 0 -45px;
}

.header .col-xl-3,
.header .col-lg-3,
.header .col-md-3,
.header .col-sm-3 {
     padding: 0 15px;
}

.header .col-xl-9,
.header .col-lg-9,
.header .col-md-9,
.header .col-sm-9 {
     padding: 0 15px;
}

/* ============================================
   HEADER SPECIFIC STYLES - SEPARATE FROM BODY
   ============================================ */

/* Main header container - ONLY for navbar header */
.sticky-header {
     position: sticky;
     top: 0;
     z-index: 1000;
     background: #000000;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     margin: 0;
     padding: 0;
}

/* Header inner content */
.sticky-header .header {
     width: 100%;
     padding: 0.3rem 2rem;
     background: #000000;
     min-height: 56px;
     display: flex;
     align-items: center;
     margin: 0;
     border: none;
}

/* Logo in header */
.sticky-header .logo a {
     font-family: 'Rajdhani', sans-serif;
     font-size: 1.3rem;
     font-weight: 700;
     text-transform: uppercase;
     color: #ffffff;
     line-height: 1;
     display: inline-block;
     text-decoration: none;
     letter-spacing: 1px;
}

.sticky-header .logo img {
     max-height: 38px;
     width: auto;
     display: block;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Navbar in header */
.sticky-header .navbar {
     background: #000000 !important;
     padding: 0.3rem 0.8rem;
     min-height: 56px;
     margin: 0;
}

/* Desktop navigation links in header */
.sticky-header .navbar-nav .nav-link {
     color: #ffffff !important;
     font-family: 'Rajdhani', sans-serif;
     font-size: 0.9rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     padding: 0.4rem 0.9rem;
     margin: 0 0.2rem;
     border-radius: 6px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     line-height: 1.2;
}

.sticky-header .navbar-nav .nav-link:hover {
     color: #1a1a1a !important;
     background-color: #51B647;
     transform: translateY(-2px);
}

.sticky-header .navbar-nav .nav-link.active,
.sticky-header .navbar-nav .nav-item.active .nav-link {
     color: #1a1a1a !important;
     background-color: #51B647;
     font-weight: 700;
}

/* Push navigation to the right in header */
.sticky-header .navbar-nav {
     justify-content: flex-end !important;
     padding-right: 2rem !important;
}

.sticky-header .navbar-expand-md .navbar-nav {
     justify-content: flex-end !important;
     padding-right: 2rem !important;
}

/* Desktop navigation adjustments for header */
@media (min-width: 992px) {
     .sticky-header .navbar-nav {
         justify-content: flex-end !important;
         padding-right: 3rem !important;
         margin-left: auto !important;
     }
     
     .sticky-header .navigation {
         margin-left: auto !important;
         display: flex !important;
         justify-content: flex-end !important;
     }
     
     .sticky-header .navbar-nav .nav-item {
         margin: 0 0.2rem;
     }
     
     /* Keep nav link padding reasonable */
     .sticky-header .navbar-nav .nav-link {
         padding: 0.4rem 1rem !important;
         font-size: 0.9rem !important;
     }
}

/* Burger menu in header */
.sticky-header .navbar-toggle,
.sticky-header .navbar-toggler {
     border: 2px solid #51B647 !important;
     background: transparent !important;
     padding: 0.4rem 0.5rem;
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.3s ease;
}

.sticky-header .navbar-toggle:focus,
.sticky-header .navbar-toggler:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(81, 182, 71, 0.3);
}

.sticky-header .navbar-toggle:hover,
.sticky-header .navbar-toggler:hover {
     background-color: rgba(81, 182, 71, 0.1);
}

/* Custom hamburger icon */
.sticky-header .navbar-toggle .bar,
.sticky-header .navbar-toggle .navbar-toggle-icon,
.sticky-header .navbar-toggler-icon {
     display: block;
     width: 20px;
     height: 2px;
     margin: 3px 0;
     background-color: #ffffff;
     transition: all 0.3s ease;
     position: relative;
}

/* Mobile navbar collapse in header */
.sticky-header .navbar-collapse {
     background: #000000;
     border: none;
     padding: 0.8rem;
     margin-top: 0.3rem;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     display: none;
}

.sticky-header .navbar-collapse.show {
     display: block !important;
}

.sticky-header .navbar-collapse.collapsing {
     display: none;
}

.sticky-header .navbar-collapse.collapsing.show {
     display: block !important;
}

/* Mobile nav links in header */
.sticky-header .navbar-collapse .navbar-nav .nav-link {
     padding: 0.6rem 1rem;
     margin: 0.15rem 0;
     font-size: 0.95rem;
     border-radius: 6px;
     display: block;
     width: 100%;
     text-align: left;
}

.sticky-header .navbar-collapse .navbar-nav .nav-link:hover {
     background-color: rgba(81, 182, 71, 0.15);
     color: #51B647 !important;
     transform: translateX(5px);
}

/* ============================================
   HEADER SPECIFIC STYLES - SEPARATE FROM BODY
   ============================================ */

/* Main header container - ONLY for navbar header */
.sticky-header {
     position: sticky;
     top: 0;
     z-index: 1000;
     background: #000000;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Header inner content */
.sticky-header .header {
     width: 100%;
     padding: 0.3rem 2rem;
     background: #000000;
     min-height: 56px;
     display: flex;
     align-items: center;
     margin: 0;
     border: none;
}

/* Logo in header */
.sticky-header .logo a {
     font-family: 'Rajdhani', sans-serif;
     font-size: 1.3rem;
     font-weight: 700;
     text-transform: uppercase;
     color: #ffffff;
     line-height: 1;
     display: inline-block;
     text-decoration: none;
     letter-spacing: 1px;
}

.sticky-header .logo img {
     max-height: 38px;
     width: auto;
     display: block;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Navbar in header */
.sticky-header .navbar {
     background: #000000 !important;
     padding: 0.3rem 0.8rem;
     min-height: 56px;
     margin: 0;
}

/* Desktop navigation links in header */
.sticky-header .navbar-nav .nav-link {
     color: #ffffff !important;
     font-family: 'Rajdhani', sans-serif;
     font-size: 0.9rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     padding: 0.4rem 0.9rem;
     margin: 0 0.2rem;
     border-radius: 6px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     line-height: 1.2;
}

.sticky-header .navbar-nav .nav-link:hover {
     color: #1a1a1a !important;
     background-color: #51B647;
     transform: translateY(-2px);
}

.sticky-header .navbar-nav .nav-link.active,
.sticky-header .navbar-nav .nav-item.active .nav-link {
     color: #1a1a1a !important;
     background-color: #51B647;
     font-weight: 700;
}

/* Push navigation to the right in header */
.sticky-header .navbar-nav {
     justify-content: flex-end !important;
     padding-right: 2rem !important;
}

.sticky-header .navbar-expand-md .navbar-nav {
     justify-content: flex-end !important;
     padding-right: 2rem !important;
}

/* Desktop navigation adjustments for header */
@media (min-width: 992px) {
     .sticky-header .navbar-nav {
         justify-content: flex-end !important;
         padding-right: 3rem !important;
         margin-left: auto !important;
     }
     
     .sticky-header .navigation {
         margin-left: auto !important;
         display: flex !important;
         justify-content: flex-end !important;
     }
     
     .sticky-header .navbar-nav .nav-item {
         margin: 0 0.2rem;
     }
     
     /* Keep nav link padding reasonable */
     .sticky-header .navbar-nav .nav-link {
         padding: 0.4rem 1rem !important;
         font-size: 0.9rem !important;
     }
}

/* Burger menu in header */
.sticky-header .navbar-toggle,
.sticky-header .navbar-toggler {
     border: 2px solid #51B647 !important;
     background: transparent !important;
     padding: 0.4rem 0.5rem;
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.3s ease;
}

.sticky-header .navbar-toggle:focus,
.sticky-header .navbar-toggler:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(81, 182, 71, 0.3);
}

.sticky-header .navbar-toggle:hover,
.sticky-header .navbar-toggler:hover {
     background-color: rgba(81, 182, 71, 0.1);
}

/* Custom hamburger icon */
.sticky-header .navbar-toggle .bar,
.sticky-header .navbar-toggle .navbar-toggle-icon,
.sticky-header .navbar-toggler-icon {
     display: block;
     width: 20px;
     height: 2px;
     margin: 3px 0;
     background-color: #ffffff;
     transition: all 0.3s ease;
     position: relative;
}

/* Mobile navbar collapse in header */
.sticky-header .navbar-collapse {
     background: #000000;
     border: none;
     padding: 0.8rem;
     margin-top: 0.3rem;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     display: none;
}

.sticky-header .navbar-collapse.show {
     display: block !important;
}

.sticky-header .navbar-collapse.collapsing {
     display: none;
}

.sticky-header .navbar-collapse.collapsing.show {
     display: block !important;
}

/* Mobile nav links in header */
.sticky-header .navbar-collapse .navbar-nav .nav-link {
     padding: 0.6rem 1rem;
     margin: 0.15rem 0;
     font-size: 0.95rem;
     border-radius: 6px;
     display: block;
     width: 100%;
     text-align: left;
}

.sticky-header .navbar-collapse .navbar-nav .nav-link:hover {
     background-color: rgba(81, 182, 71, 0.15);
     color: #51B647 !important;
     transform: translateX(5px);
}

/* Additional fixes for navbar overlapping */
@media (min-width: 992px) {
     /* Ensure navbar items have enough space */
     .navbar-expand-md .navbar-nav {
         padding-right: 20px;
     }
     
     /* Prevent logo from overlapping with nav */
     .logo_section {
         flex: 0 0 auto;
         padding-right: 15px;
     }
     
     /* Ensure nav items don't wrap */
     .navbar-nav {
         flex-wrap: nowrap;
         justify-content: flex-end;
     }
     
     /* Add proper spacing for nav items */
     .nav-item {
         margin: 0 3px;
     }
     
     /* Fix for the navbar brand/logo area */
     .navbar-brand {
         padding: 0 15px;
         margin-right: 0;
     }
}

/* Fix for the main content area to prevent being covered by sticky header */
.main-layout {
     padding-top: 0;
}

/* Ensure sections have enough margin from header */
.banner_main {
     margin-top: 0;
}

.services, .about, .team, .contact {
     margin-top: 0;
}

/* Fix for the sticky header to not cover content */
.sticky-header {
     position: sticky;
     top: 0;
     z-index: 1000;
}

/* Adjust main content sections to account for header */
.container-fluid {
     max-width: 100%;
     margin: 0 auto;
}

/* ============================================
   HEADER INNER LAYOUT - LOGO + COMPANY NAME + BURGER MENU
   ============================================ */
.header-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     flex-wrap: nowrap;
}

.logo-section {
     display: flex;
     align-items: center;
     flex-shrink: 0;
}

.logo-link {
     display: inline-flex;
     align-items: center;
     text-decoration: none;
     gap: 10px;
}

.logo-link img {
     max-height: 48px;
     width: auto;
     display: block;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.company-name {
     font-family: 'Rajdhani', sans-serif;
     font-size: 1.6rem;
     font-weight: 700;
     text-transform: uppercase;
     color: #ffffff;
     letter-spacing: 1px;
     line-height: 1;
     white-space: nowrap;
}

.header-inner .navbar-toggler {
     margin-left: auto;
     flex-shrink: 0;
}

.header-inner .navigation {
     flex: 1 1 auto;
     display: block;
}

/* Ensure nav stays visible on desktop */
@media (min-width: 992px) {
     .header-inner .navigation {
          display: flex !important;
          justify-content: flex-end;
     }

     .header-inner .navbar-collapse {
          display: flex !important;
          justify-content: flex-end;
     }

     .header-inner .navbar-toggler {
          display: none;
     }
}

/* Mobile nav collapse */
@media (max-width: 991px) {
     .header-inner {
          flex-wrap: wrap;
     }

     .header-inner .navigation {
          width: 100%;
          justify-content: flex-end;
     }

     .header-inner .navbar-collapse {
          width: 100%;
          background: #000000;
          border-radius: 10px;
          margin-top: 10px;
          padding: 10px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     }
}

/* Compact mobile navbar */
@media (max-width: 767px) {
     .header {
          padding: 0.15rem 1rem !important;
          min-height: 44px !important;
     }

     .sticky-header .header {
          padding: 0.15rem 1rem !important;
          min-height: 44px !important;
     }

     .logo-link img {
          max-height: 36px;
     }

     .company-name {
          font-size: 1.2rem;
          letter-spacing: 0.5px;
     }

     .navbar-toggler {
          padding: 0.15rem 0.3rem !important;
          font-size: 0.85rem;
     }

     .navbar-toggler .bar {
          width: 16px;
          height: 2px;
          margin: 2.5px 0;
     }

     .navbar-nav .nav-link {
          padding: 0.35rem 0.5rem !important;
          font-size: 0.85rem !important;
     }
}