@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



 body {

   font-family: "Poppins", sans-serif;

   background-image: url("../img/10373107 1.png");

   background-repeat: repeat-x;

 }



 .top-info-bar {

   background-color: #9C0D0D;

   color: white;

   font-size: 14px;

 }



 .divider {

   margin: 0 8px;

 }



 a.contact-css {

   color: inherit;

   text-decoration: none;

 }



 a.contact-css:hover {

   color: rgb(238, 231, 231);

 }



 a.text-white.text-decoration-none.d-block.mb-1:hover {

   font-weight: bold;

 }



 .nav-link.active {

   color: #9C0D0D !important;

   font-weight: 700;

   /* border-bottom: 2px solid #9C0D0D; */

 }





 .navbar-nav .nav-link:hover {

   color: #9C0D0D !important;

 }



 .dropdown-menu {

   color: #9C0D0D !important;

 }



 .icon-circle {

   transition: all 0.3s ease;

 }



 .icon-circle:hover {

   background-color: #ff0000;

   /* Red background on hover */

   color: white;

   /* White icon on hover */

   transform: scale(1.1);

   /* Slight zoom */

   box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);

   /* Optional shadow */

 }



 .d-flex.align-items-center.bg-dark.text-white.px-5.py-2 {

   border-radius: 8px;

 }



 /* error in css */

 .error {

   color: #9C0D0D;

   position: relative;

   top: -15px;

   /* font-size: 14px; */

 }



 /* end error in css */



 /* a.contact-css:hover  {

    color: #a40e0e;

} */



 a.line-remove {

   text-decoration: none;

 }



 .hero {

   background: url('../img/bbbbbb.jpg') no-repeat center center/cover;

   height: 50vh;

   position: relative;

   color: white;

   display: flex;

   align-items: center;

   /* width: 100%; */

 }



 .hero::before {

   /* content: ''; */

   position: absolute;

   top: 0;

   left: 0;

   bottom: 0;

   right: 0;

   background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

   z-index: 1;

 }



 /* .hero1 {

      background: url('../img/10373107 1.png') no-repeat center center/cover;

      height: 130vh;

      position: relative;

      color: white;

      display: flex;

      align-items: center;

  } */



 .hero1 {

   background: url('../img/10373107 1.png') no-repeat center center/cover;

   height: auto;

   position: relative;

   color: white;

   padding: 60px 0;

 }



 .hero1::before {

   position: absolute;

   top: 0;

   left: 0;

   bottom: 0;

   right: 0;

   z-index: 1;

 }



 .stat-row {

   position: relative;

   z-index: 2;

 }



 .stat-box {

   border: 2px solid #9C0D0D;

   border-radius: 15px;

   overflow: hidden;

   transition: transform 0.3s ease;

   height: 100%;

   color: #fff;

   /* background-color: rgba(0, 0, 0, 0.4); */

 }



 .stat-icon {

   padding: 20px;

   border-bottom: 5px solid rgba(255, 255, 255, 0.2);

 }



 .stat-icon img {

   height: 100px;

   width: auto;

   object-fit: contain;

   /* filter: brightness(0) saturate(100%) invert(18%) sepia(91%) saturate(5775%) hue-rotate(356deg) brightness(92%) contrast(108%); */

 }



 .stat-info {

   background-color: #9C0D0D;

   padding: 20px 10px;

 }



 .stat-info h2 {

   font-size: 1.8rem;

   font-weight: bold;

   margin: 0;

 }



 .stat-info p {

   margin-top: 10px;

   font-weight: 500;

   font-size: 1rem;

   text-transform: uppercase;

 }



 .services-section {

   background: #f3f3f3 url('../img/bg-texture.png') repeat;

   padding: 60px 0;

 }



 .section-title {

   color: #9C0D0D;

   font-weight: bold;

   border-bottom: 4px solid #9C0D0D;

   display: inline-block;

   padding-bottom: 5px;

   margin-bottom: 20px;

 }



 .service-box {

   background-color: #9C0D0D;

   color: white;

   padding: 30px 20px;

   border-radius: 10px;

   transition: transform 0.3s ease;

   height: 300px;

   display: flex;

   flex-direction: column;

   align-items: center;



 }



 .service-box:hover {

   transform: translateY(-8px);

 }



 .service-icon {

   width: 100px;

   height: auto;

   margin-bottom: 15px;



 }



 .service-box h4 {

   font-weight: bold;

   margin-bottom: 10px;

   font-size: 1.2rem;

 }



 .service-box p {

   font-size: 1rem;

   line-height: 1.5;

   flex-grow: 1;

   text-align: center;

 }



 p.font-size {

   font-size: 17px;

 }



 .service-box {

   opacity: 0;

   transform: translateY(50px);

   transition: opacity 0.6s ease-out, transform 0.6s ease-out;

 }



 .service-box.animate {

   opacity: 1;

   transform: translateY(0);

 }



 /* service page */

 .hero3 {

   background: url('../img/banner_service.jpg') no-repeat center center/cover;

   height: 50vh;

   position: relative;

   color: white;

   display: flex;

   align-items: center;

   /* width: 100%; */

 }



 .hero3::before {

   /* content: ''; */

   position: absolute;

   top: 0;

   left: 0;

   bottom: 0;

   right: 0;

   background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

   z-index: 1;

 }



 /* end service page */



 /* careers section styles */

 /* .hero2 {

    background: url('../img/123.png') no-repeat center center/cover ;

    height: 30vh;

    position: relative;

    color: white;

    display: flex;

    align-items: center;

    

  } */



 /* .hero2::before {

    

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

    z-index: 1;

  } */



 .about-banner {

   background-image: url('../img/124.jpeg');

   /* Replace with correct path */

   background-size: cover;

   background-position: center;

   background-repeat: no-repeat;

   height: 250px;

   display: flex;

   align-items: center;

   justify-content: center;

   text-align: center;

   color: #fff;

   position: relative;

 }



 .about-banner::after {

   content: "";

   position: absolute;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   background-color: rgba(0, 0, 0, 0.5);

   /* dark overlay */

   z-index: 1;

 }



 .about-banner .content {

   position: relative;

   z-index: 2;

 }



 .about-banner h1 {

   font-size: 2.5rem;

   font-weight: 700;

 }



 .about-banner p {

   margin-top: 5px;

   font-size: 1rem;

 }



 .about-banner a {

   text-decoration: none;

   color: #fff;

 }





 .product-banner {

   background-image: url('../img/44.jpg');

   /* Replace with correct path */

   background-size: cover;

   background-position: center;

   background-repeat: no-repeat;

   height: 250px;

   display: flex;

   align-items: center;

   justify-content: center;

   text-align: center;

   color: #fff;

   position: relative;

 }



 .product-banner::after {

   content: "";

   position: absolute;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   background-color: rgba(0, 0, 0, 0.5);

   /* dark overlay */

   z-index: 1;

 }



 .product-banner .content {

   position: relative;

   z-index: 2;

 }



 .product-banner h1 {

   font-size: 2.5rem;

   font-weight: 700;

 }



 .product-banner p {

   margin-top: 5px;

   font-size: 1rem;

 }



 .product-banner a {

   text-decoration: none;

   color: #fff;

 }













 .careers-banner {

   background-image: url('../img/teem.jpeg');

   /* Replace with correct path */

   background-size: cover;

   background-position: center;

   background-repeat: no-repeat;

   height: 250px;

   display: flex;

   align-items: center;

   justify-content: center;

   text-align: center;

   color: #fff;

   position: relative;

 }



 .careers-banner::after {

   content: "";

   position: absolute;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   background-color: rgba(0, 0, 0, 0.5);

   /* dark overlay */

   z-index: 1;

 }



 .careers-banner .content {

   position: relative;

   z-index: 2;

 }



 .careers-banner h1 {

   font-size: 2.5rem;

   font-weight: 700;

 }



 .careers-banner p {

   margin-top: 5px;

   font-size: 1rem;

 }



 .careers-banner a {

   text-decoration: none;

   color: #fff;

 }















 .service1-banner {

   background-image: url('../img/banner_service.jpg');

   /* Replace with correct path */

   background-size: cover;

   background-position: center;

   background-repeat: no-repeat;

   height: 250px;

   display: flex;

   align-items: center;

   justify-content: center;

   text-align: center;

   color: #fff;

   position: relative;

 }



 .service1-banner::after {

   content: "";

   position: absolute;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   background-color: rgba(0, 0, 0, 0.5);

   /* dark overlay */

   z-index: 1;

 }



 .service1-banner .content {

   position: relative;

   z-index: 2;

 }



 .service1-banner h1 {

   font-size: 2.5rem;

   font-weight: 700;

 }



 .service1-banner p {

   margin-top: 5px;

   font-size: 1rem;

 }



 .service1-banner a {

   text-decoration: none;

   color: #fff;

 }









 .service2-banner {

   background-image: url('../img/22.jpg');

   /* Replace with correct path */

   background-size: cover;

   background-position: center;

   background-repeat: no-repeat;

   height: 250px;

   display: flex;

   align-items: center;

   justify-content: center;

   text-align: center;

   color: #fff;

   position: relative;

 }



 .service2-banner::after {

   content: "";

   position: absolute;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   background-color: rgba(0, 0, 0, 0.5);

   /* dark overlay */

   z-index: 1;

 }



 .service2-banner .content {

   position: relative;

   z-index: 2;

 }



 .service2-banner h1 {

   font-size: 2.5rem;

   font-weight: 700;

 }



 .service2-banner p {

   margin-top: 5px;

   font-size: 1rem;

 }



 .service2-banner a {

   text-decoration: none;

   color: #fff;

 }













 .service3-banner {

   background-image: url('../img/teem.jpeg');

   /* Replace with correct path */

   background-size: cover;

   background-position: center;

   background-repeat: no-repeat;

   height: 250px;

   display: flex;

   align-items: center;

   justify-content: center;

   text-align: center;

   color: #fff;

   position: relative;

 }



 .service3-banner::after {

   content: "";

   position: absolute;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   background-color: rgba(0, 0, 0, 0.5);

   /* dark overlay */

   z-index: 1;

 }



 .service3-banner .content {

   position: relative;

   z-index: 2;

 }



 .service3-banner h1 {

   font-size: 2.5rem;

   font-weight: 700;

 }



 .service3-banner p {

   margin-top: 5px;

   font-size: 1rem;

 }



 .service3-banner a {

   text-decoration: none;

   color: #fff;

 }













 .service4-banner {

   background-image: url('../img/44.jpg');

   /* Replace with correct path */

   background-size: cover;

   background-position: center;

   background-repeat: no-repeat;

   height: 250px;

   display: flex;

   align-items: center;

   justify-content: center;

   text-align: center;

   color: #fff;

   position: relative;

 }



 .service4-banner::after {

   content: "";

   position: absolute;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   background-color: rgba(0, 0, 0, 0.5);

   /* dark overlay */

   z-index: 1;

 }



 .service4-banner .content {

   position: relative;

   z-index: 2;

 }



 .service4-banner h1 {

   font-size: 2.5rem;

   font-weight: 700;

 }



 .service4-banner p {

   margin-top: 5px;

   font-size: 1rem;

 }



 .service4-banner a {

   text-decoration: none;

   color: #fff;

 }















 .service5-banner {

   background-image: url('../img/55.png');

   /* Replace with correct path */

   background-size: cover;

   background-position: center;

   background-repeat: no-repeat;

   height: 250px;

   display: flex;

   align-items: center;

   justify-content: center;

   text-align: center;

   color: #fff;

   position: relative;

 }



 .service5-banner::after {

   content: "";

   position: absolute;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   background-color: rgba(0, 0, 0, 0.5);

   /* dark overlay */

   z-index: 1;

 }



 .service5-banner .content {

   position: relative;

   z-index: 2;

 }



 .service5-banner h1 {

   font-size: 2.5rem;

   font-weight: 700;

 }



 .service5-banner p {

   margin-top: 5px;

   font-size: 1rem;

 }



 .service5-banner a {

   text-decoration: none;

   color: #fff;

 }

























 .herosupply {

   background: url('../img/44.jpg') no-repeat center center/cover;

   height: 50vh;

   position: relative;

   color: white;

   display: flex;

   align-items: center;

   /* width: 100%; */

 }



 .herosupply::before {

   /* content: ''; */

   position: absolute;

   top: 0;

   left: 0;

   bottom: 0;

   right: 0;

   background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

   z-index: 1;

 }



 .herosaftey {

   background: url('../img/55.png') no-repeat center center/cover;

   height: 50vh;

   position: relative;

   color: white;

   display: flex;

   align-items: center;

   /* width: 100%; */

 }



 .herosaftey::before {

   /* content: ''; */

   position: absolute;

   top: 0;

   left: 0;

   bottom: 0;

   right: 0;

   background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

   z-index: 1;

 }





 .career-container {

   display: flex;

   justify-content: space-between;

   align-items: stretch;

   width: 90%;

   max-width: 1200px;

   background: white;

   color: #000;

   z-index: 2;

   position: relative;

   border-radius: 10px;

   overflow: hidden;

   margin: auto;



 }



 /* Left Text Block */

 .career-left {

   flex: 1;

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

   color: white;

   padding: 30px;

   display: flex;

   flex-direction: column;

   justify-content: center;



 }



 /* Right Form Block */

 .career-form {

   flex: 1;

   padding: 30px;

   background: #fff;

   border: solid 1px #9C0D0D;

   border-top-left-radius: 0px;

   border-top-right-radius: 10px;

   border-bottom-right-radius: 10px;



 }



 .career-form h3 {

   color: #9C0D0D;

   margin-bottom: 20px;

 }



 .career-form span {

   font-weight: bold;

   display: block;

 }



 .career-form form {

   display: flex;

   flex-direction: column;

   gap: 15px;

 }



 .career-form input[type="text"],

 .career-form input[type="email"],

 .career-form input[type="tel"],

 .career-form input[type="file"] {

   padding: 10px;

   border: 2px solid #9C0D0D;

   border-radius: 5px;

 }



 .career-form button {

   padding: 12px;

   background: #9C0D0D;

   color: white;

   border: none;

   border-radius: 5px;

   font-size: 1.1rem;

   cursor: pointer;

   transition: background 0.3s ease;

 }



 .career-form button:hover {

   background: #a30000;

 }



 /* end of section styles */





 /* section abount  */

 .about-container {

   display: flex;

   justify-content: space-between;

   align-items: center;

   gap: 40px;

   padding: 50px 30px;

   max-width: 1300px;

   margin: auto;

   /* background: #fff; */

   border-radius: 12px;

   overflow: hidden;

   flex-wrap: wrap;

 }



 .about-left {

   flex: 1;

 }



 .about-left h2 {

   color: #9C0D0D;

   font-weight: bold;

   margin-bottom: 10px;

 }



 .about-left p {

   color: #333;

   font-size: 1rem;

 }



 .about-service {

   display: flex;

   align-items: flex-start;

   gap: 15px;

   margin-bottom: 20px;

 }



 .icon-box {

   width: 50px;

   height: 50px;

   background: #9C0D0D;

   color: white;

   font-size: 1.4rem;

   display: flex;

   align-items: center;

   justify-content: center;

   border-radius: 6px;

 }



 .about-service h4 {

   margin: 0;

   color: #9C0D0D;

   font-weight: bold;

 }



 .about-service p {

   margin: 5px 0 0;

   color: #444;

   font-size: 0.95rem;

 }



 .about-right {

   flex: 1;

   text-align: center;

 }



 .about-right img {

   max-width: 100%;

   height: auto;

   border-radius: 10px;

 }



 .parallax-section {

   background: url('../img/parelex.jpg') no-repeat center center fixed;

   background-size: cover;

   height: 30vh;

   position: relative;

   display: flex;

   align-items: center;

   justify-content: center;

   padding: 40px 20px;

   color: #fff;

 }



 .parallax-overlay {

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

   padding: 40px;

   max-width: 900px;

   text-align: center;

   border-radius: 12px;

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

 }



 .parallax-overlay p {

   font-size: 1rem;

   line-height: 1.7;

   margin-bottom: 25px;

 }



 .parallax-overlay h3 {

   font-size: 1.5rem;

   color: #fff;

   font-weight: bold;

 }



 /* ✅ Responsive */





 /* ✅ Responsive */



 .mission-vision-section {

   background: url('../img/10373107 1.png') no-repeat center center/cover;

   padding: 60px 20px;

   color: #000;

   font-family: 'Segoe UI', sans-serif;

 }



 .mission h2,

 .vision h2,

 .serve-section h2 {

   color: #9C0D0D;

   font-weight: bold;

   margin-bottom: 20px;

   font-size: 28px;

 }



 .mission ul,

 .serve-section ul {

   padding-left: 0;

   list-style: none;

 }



 .mission li,

 .serve-section li {

   margin-bottom: 15px;

   font-size: 16px;

   display: flex;

   align-items: flex-start;

 }



 .mission li i,

 .serve-section li i {

   color: #9C0D0D;

   margin-right: 10px;

   font-size: 18px;

   margin-top: 4px;

 }



 .vision-box {

   border: 2px solid #9C0D0D;

   border-radius: 12px;

   padding: 25px;

   background-color: rgba(255, 255, 255, 0.85);

 }



 .vision-box p {

   font-size: 16px;

   line-height: 1.6;

   color: #333;

 }



 .serve-section {

   margin-top: 50px;

 }



 .serve-section p {

   /* max-width: 900px; */

   margin-bottom: 25px;

   font-size: 16px;

   color: #333;

 }



 /* Responsive */

 @media (max-width: 768px) {

   .row {

     flex-direction: column;

   }



   .mission,

   .vision {

     width: 100%;

     margin-bottom: 30px;

   }



   .vision-box {

     padding: 20px;

   }



   a.text-white.bg-dark.p-2.rounded-circle.d-flex.align-items-center.justify-content-center.text-decoration-none {

     margin: auto;

   }

 }







 /* end section  */





 /* contact section */



 .contact-section {

   background: url('../img/10373107 1.png') no-repeat center center/cover;

   font-family: 'Segoe UI', sans-serif;

   color: #000;

 }



 .section-title {

   font-weight: bold;

   color: #9C0D0D;

   margin-bottom: 20px;

   border-bottom: 3px solid #9C0D0D;

   display: inline-block;

   padding-bottom: 5px;

 }



 .contact-form input,

 .contact-form textarea {

   width: 100%;

   padding: 12px 15px;

   margin-bottom: 15px;

   border: 2px solid #9C0D0D;

   border-radius: 6px;

   font-size: 14px;

 }



 .contact-form button {

   background-color: #9C0D0D;

   color: #fff;

   border: none;

   padding: 12px 30px;

   font-size: 16px;

   border-radius: 6px;

   cursor: pointer;

   transition: 0.3s ease;

   width: 100%;

 }



 .contact-form button:hover {

   background-color: #7a0a0a;

 }



 .contact-info p {

   padding: 2px 50px;

   font-size: 19px;

   margin-bottom: 20px;

   display: flex;

   align-items: flex-start;

   gap: 12px;

   color: #9C0D0D;

   font-weight: 600;

   line-height: 1.4;

 }



 .contact-info i {

   font-size: 18px;

   color: #9C0D0D;

   margin-top: 4px;

 }



 /* Responsive */





 /* end section contact */

 /*product end css*/



 /* img.imgset {

    height: 100px;

    width: 100%;

} */







 .enquiry-tab {

   position: absolute;

   top: 50%;

   right: 0;

   transform: translateY(-50%);

   background-color: #9C0D0D;

   color: white;

   writing-mode: vertical-rl;

   padding: 10px 8px;

   font-weight: bold;

   cursor: pointer;

   z-index: 3;

 }





 .custom-navbar {

   border-top: 3px solid #9C0D0D;

 }



 .navbar-nav .nav-link {

   padding: 0.5rem 1rem;

   font-size: 18px;

 }



 .navbar-nav .nav-link:hover {

   color: #9C0D0D;

 }



 .navbar-nav .nav-link.active {

   color: #9C0D0D;

 }



 .btn-danger {

   background-color: #9C0D0D;

   border: none;

   font-size: 16px;

   padding: 8px 30px !important;

   border-radius: 6px;

 }



 .btn-danger:hover {

   background-color: #9C0D0D;

 }







 .service,

 .product {

   border-radius: 10px;

 }



 .service {

   background-color: #9C0D0D;

   color: white;

 }















 /* .icon-circle {

      background-color: white;

      color: #a40e0e;

      border-radius: 50%;

      width: 30px;

      height: 30px;

      display: inline-flex;

      justify-content: center;

      align-items: center;

      font-size: 14px;

  } */



 .divider {

   color: white;

   padding: 0 10px;

   font-weight: bold;

 }



 .text-white {

   font-size: 17px;

 }



 .emergency-box {

   background-color: #231f20;

   /* dark background */

   border-radius: 0;

   /* remove rounded corners */

   min-height: 80px;

   min-width: 300px;

 }



 .icon-circle {

   width: 40px;

   height: 40px;

   border-radius: 50%;

   font-size: 20px;

 }







 @media (max-width: 768px) {

   .hero {

     height: 60vh;

   }



   .career-container {

     flex-direction: column;

     border-radius: 10px;

   }



   .career-left,

   .career-form {

     flex: unset;

     width: 100%;

     border-radius: 0;

   }



   .career-left {

     border-top-left-radius: 10px;

     border-top-right-radius: 10px;

   }



   .career-form {

     border-top-right-radius: 0;

     border-bottom-left-radius: 10px;

     border-bottom-right-radius: 10px;

   }



   .contact-form button {

     width: 100%;

   }



   .contact-info p {

     flex-direction: column;

     gap: 4px;

   }



   .footer {

     text-align: center;

   }

.d-flex.gap-2 {
    justify-content: center;
}

   .footer .row>div {

     text-align: center;

   }



   .footer a,

   .footer p {

     font-size: 14px;

   }



   .footer .mt-3.d-flex {

     justify-content: center;

     gap: 10px;

   }



   .footer .contact-css span {

     display: block;

     margin-top: 5px;

   }



   .section-title {

     width: 100%;

     font-size: 1.5rem;

   }



   .stat-icon img {

     height: 60px;

   }



   .stat-info h2 {

     font-size: 1.5rem;

   }



 }



 @media (max-width: 576px) {

   .hero {

     height: 23vh;

   }



   .hero2 {

     height: 23vh;

   }



   .footer img {

     height: 50px;

   }



   .footer h5 {

     font-size: 20px;

   }



   .footer p,

   .footer a {

     font-size: 13px;

   }



   .d-flex.align-items-center.bg-dark.text-white.px-5.py-2 {

     /* align-items: center; */

     margin: auto;

   }

 }



 /* Base Footer Styling */

 .footer {

   font-size: 16px;

   line-height: 1.6;

 }



 .footer h5 {

   font-size: 25px;

   font-weight: 700;

 }



 /* Responsive Adjustments */

 @media (max-width: 991.98px) {



   .footer .col-md-6,

   .footer .col-md-12 {

     padding-left: 15px;

     padding-right: 15px;

   }



   .footer h5 {

     font-size: 22px;

   }



   .footer p,

   .footer a {

     font-size: 15px;

   }



   .footer .contact-css span {

     display: inline-block;

     max-width: 100%;
    text-align: center;

   }



   .footer .mt-3.d-flex {

     flex-wrap: wrap;

   }



   .parallax-section {

     height: auto;

     background-attachment: scroll;

   }



   .parallax-overlay {

     padding: 20px;

   }



   .parallax-overlay h3 {

     font-size: 1.2rem;

   }



   .parallax-overlay p {

     font-size: 0.95rem;

   }



   .about-container {

     flex-direction: column;

     text-align: center;

   }



   .about-left,

   .about-right {

     width: 100%;

   }



   .about-left {

     text-align: left;

   }



   .about-service {

     flex-direction: row;

   }

 }



 /* Enquiry Tab */

 .enquiry-tab {

   background-color: #9C0D0D;

   color: white;

   padding: 20px 10px;

   padding: 9px;

   cursor: pointer;

   width: fit-content;

   border-radius: 5px;

   font-weight: bold;

 }



 /* Modal Style */

 .modal {

   display: none;

   position: fixed;

   z-index: 999;

   left: 0;

   top: 0;

   width: 100%;

   height: 100%;

   background-color: rgba(0, 0, 0, 0.6);

   justify-content: center;

   align-items: center;

 }



 .modal-content {

   /* height: 556px; */

   background: #e5e5e5;

   padding: 65px;

   border-radius: 12px;

   width: 97%;

   max-width: 650px;

   /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */

   position: relative;

 }



 .modal-content h4 {

   color: #9C0D0D;

   text-align: center;

   font-weight: 800;

   padding-bottom: 4px;

   border-bottom: 2px solid #9C0D0D;

   width: 29%;

   margin: auto;

 }



 /* Form styling */

 .modal-content input,

 .modal-content textarea {

   width: 100%;

   padding: 10px;

   border: 2px solid #9C0D0D;

   border-radius: 10px;

   margin-bottom: 15px;

   font-size: 14px;

 }



 .form-row {

   display: flex;

   gap: 10px;

 }



 .form-row input {

   flex: 1;

 }



 .modal-content button {

   background-color: #9C0D0D;

   color: white;

   width: 100%;

   padding: 12px;

   font-weight: bold;

   border: none;

   border-radius: 10px;

   cursor: pointer;

 }



 /* Close button */

 .close {

   position: absolute;

   right: 20px;

   top: 15px;

   font-size: 24px;

   cursor: pointer;

 }



 .audit-card {

   transition: all 0.3s ease;

 }



 .audit-card:hover {

   transform: translateY(-8px);

   box-shadow: 0 10px 20px rgba(220, 53, 69, 0.2);

   /* Bootstrap's text-danger RGBA */

   border-left: 5px solid #9C0D0D !important;

 }



 .audit-icon {

   transition: color 0.3s ease;

 }



 .audit-card:hover .audit-icon {

   color: #9C0D0D;

   /* Darker red on hover */

 }







 /*End Img Hover In All*/

 



 .top-info-bar {

   background-color: #9C0D0D;

   font-size: 14px;

 }



 .top-info-bar a.line-remove {

   text-decoration: none;

 }



 .top-info-bar .icon-circle {

   width: 30px;

   height: 30px;

   border-radius: 50%;

 }



 .top-info-bar .contact-css {

   font-weight: 500;

 }



 @media (max-width: 768px) {

   .top-info-bar .container {

     flex-direction: column;

     align-items: flex-start !important;

     gap: 10px;

   }



   .top-info-bar .d-flex.gap-2 {

     flex-wrap: wrap;

     gap: 8px !important;

   }



   .top-info-bar .d-flex.gap-4 {

     margin-left: 0 !important;

     /* flex-direction: column; */

     align-items: flex-start !important;

     gap: 10px !important;

   }



   .top-info-bar span.fw-bold {

     display: block;

     margin-bottom: 5px;

   }

 }



 @media (max-width: 480px) {

   .top-info-bar {

     font-size: 13px;

   }



   .top-info-bar .icon-circle,

   .top-info-bar .bg-white {

     width: 26px !important;

     height: 26px !important;

   }

 }





 .coming-soon-section {

   background-color: #f8f9fa;

   color: #212529;

 }



 .coming-soon-section ul li {

   padding: 8px 0;

   font-weight: 500;

 }



 .coming-soon-section img {

   animation: spotlight-pulse 2s ease-in-out infinite;

 }



 @keyframes spotlight-pulse {



   0%,

   100% {

     opacity: 0.7;

     transform: scale(1);

   }



   50% {

     opacity: 1;

     transform: scale(1.1);

   }

 }









 /* home page for revolution numbering */



 .stat-info h1 {

   font-weight: 700;

 }





 /* Service Box Animation */

 .service-box {

   transition:

     background 0.3s,

     color 0.3s,

     box-shadow 0.3s;

   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);

   border-radius: 16px;

   background: #fff;

   cursor: pointer;

   position: relative;

   z-index: 1;

   color: #222;

 }



 .service-box .service-icon {

   transition: filter 0.3s;



 }



 .service-box:hover,

 .service-box:focus-visible {

   background: #9C0D0D;

   color: #fff;

   box-shadow: 0 8px 32px rgba(156, 13, 13, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);

 }



 .service-box:hover .service-icon,

 .service-box:focus-visible .service-icon {

   /* Make icon white on red box */

   filter: brightness(0) invert(1);

 }



 .service-box h3,

 .service-box p {

   transition: color 0.3s;

 }



 .service-box:hover h3,

 .service-box:hover p,

 .service-box:focus-visible h3,

 .service-box:focus-visible p {

   color: #fff;

 }









 /* why choose section */







 /* footer */



 .socialmedia h5 {

   font-weight: 600;

   font-size: 20px;

 }



 .contact h5 {

   font-weight: 600;

   font-size: 20px;

 }



 .quicklinks h5 {

   font-weight: 600;

   font-size: 20px;

 }















 .dropdown-item.active,

 .dropdown-item:active {

   color: #ffffff;

   background-color: #9C0D0D;

 }









 .whychoose h2 {

   display: flex;

   justify-content: center;

   margin-bottom: 30px;

   color: #9C0D0D;

   font-weight: 700;

   border-bottom: 3px solid #9C0D0D;

   padding-bottom: 10px;

   width: 46%;

   margin: auto;

 }



 .carousel-container {

   position: relative;

   max-width: 1200px;

   margin: auto;

   overflow: hidden;

 }



 .carousel-track {

   display: flex;

   transition: transform 0.5s ease-in-out;

 }



 .carousel-slide {

   flex: 0 0 50%;

   box-sizing: border-box;

   padding: 15px;

 }



 .card {

   background-color: #fff;

   /* padding: 25px; */

   border-radius: 10px;

   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

   text-align: center;

   height: 180px;

 }



 .card h3 {

   margin-top: 10px;

   font-size: 18px;

   font-weight: 600;

 }



 .card p {

   font-size: 14px;

   color: #555;

   margin-top: 8px;

 }



 .arrow {

   position: absolute;

   top: 50%;

   transform: translateY(-50%);

   background-color: #9C0D0D;

   color: white;

   border: none;

   padding: 10px;

   border-radius: 50%;

   cursor: pointer;

   z-index: 10;

 }



 .arrow.left {

   left: px;

 }



 .arrow.right {

   right: 1px;

 }



 @media (max-width: 768px) {

   .carousel-slide {

     flex: 0 0 100%;

   }
   .serve-section {

   margin-top: 10px;

 }

 }

















 /* end home page */













 /* product page */



 .comingsoon ul li {

   font-size: 22px;

   font-weight: 600;

 }







.carousel img {

  width: 70px;

  max-height: 70px;

  border-radius: 50%;

  margin-right: 1rem;

  overflow: hidden;

}

.carousel-inner {

  padding: 1em;

}



@media screen and (min-width: 576px) {

  .carousel-inner {

    display: flex;

    width: 90%;

    margin-inline: auto;

    padding: 1em 0;

    overflow: hidden;

  }

  .carousel-item {

    display: block;

    margin-right: 0;

    flex: 0 0 calc(100% / 2);

  }

}

@media screen and (min-width: 768px) {

  .carousel-item {

    display: block;

    margin-right: 0;

    flex: 0 0 calc(100% / 3);

  }

}

.carousel .card {

  margin: 0 0.5em;

  border: 0;

}



.carousel-control-prev,

.carousel-control-next {

  width: 3rem;

  height: 3rem;

  background-color: grey;

  border-radius: 50%;

  top: 50%;

  transform: translateY(-50%);

}









































 /* amc page */





 .amc h2 {

   color: #9C0D0D;

   margin-bottom: 20px;

   border-bottom: 3px solid #9C0D0D;

   display: inline-block;

   padding-bottom: 5px;



 }







 .amc ul li {

   font-size: 20px;

   margin-bottom: 10px;

   color: #000000;

 }



 .fsi h2 {

   color: #9C0D0D;

   margin-bottom: 20px;

   border-bottom: 3px solid #9C0D0D;

   display: inline-block;

   padding-bottom: 5px;



 }





 .fsi p {

   font-size: 20px;

   margin-bottom: 10px;

   color: #000000;

 }



 .fsi ul li {

   font-size: 20px;

   margin-bottom: 4px;

   color: #000000;

 }









 .components h2 {

   text-align: center;

   color: #9C0D0D;

   border-bottom: 3px solid #b30000;

   padding-bottom: 8px;

   margin-bottom: 20px;

   margin: auto;

   width: 27%;

 }



 .subtitle {

   text-align: center;

   color: #555;

   margin-bottom: 40px;

 }



 /* Card container */

 .box-container {

   display: flex;

   flex-wrap: wrap;

   gap: 20px;

   justify-content: center;

 }



 /* Card style */

 .box {

   background: #ffffff;

   border-radius: 8px;

   padding: 25px;

   width: 650px;

   box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);

   transition: background-color 0.4s ease, color 0.4s ease;

 }



 /* Card text default */

 .box h3 {

   margin-top: 0;

   color: #9C0D0D;

   transition: color 0.4s ease;

 }



 .box p {

   color: #333;

   transition: color 0.4s ease;

 }



 /* Hover effect: background to red, text to white */

 .box:hover {

   background: #9C0D0D;

 }



 .box:hover h3,

 .box:hover p {

   color: #fff;

 }





















 .training h2 {

   color: #9C0D0D;

   margin-bottom: 20px;

   border-bottom: 3px solid #9C0D0D;

   display: inline-block;

   padding-bottom: 5px;

   display: flex;

   justify-content: center;

   width: 29%;

   margin: auto;



 }



 .training p {

   font-size: 20px;

   margin-bottom: 10px;

   color: #000000;

 }



 .training ul li {

   font-size: 20px;

   margin-bottom: 6px;

   color: #000000;

 }











 .includes h2 {

   color: #9C0D0D;

   margin-bottom: 20px;

   border-bottom: 3px solid #9C0D0D;

   display: inline-block;

   padding-bottom: 5px;

   display: flex;

   justify-content: center;

   width: 35%;

   margin: auto;



 }













 .training-section {

   display: flex;

   justify-content: center;

   gap: 20px;

   flex-wrap: wrap;

   padding: 20px;

 }



 .training-box {

   background: #fff;

   border-radius: 8px;

   padding: 30px 20px;

   width: 400px;

   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

   text-align: center;

   transition: background-color 0.4s ease, color 0.4s ease;

 }



 .training-box h3 {

   margin-top: 0;

   margin-bottom: 15px;

   color: #9C0D0D;

   transition: color 0.4s ease;

 }



 .training-box p {

   margin: 0;

   color: #333;

   transition: color 0.4s ease;

 }



 .training-box:hover {

   background-color: #9C0D0D;

 }



 .training-box:hover h3,

 .training-box:hover p {

   color: #fff;

 }















 .supply h2 {

   color: #9C0D0D;

   margin-bottom: 20px;

   border-bottom: 3px solid #9C0D0D;

   display: inline-block;

   padding-bottom: 5px;

   display: flex;

   justify-content: center;

   width: 33%;

   margin: auto;

 }





  .supply p {

    font-size: 20px;

    margin-bottom: 10px;

    color: #000000;

  }



  .supply ul li {

    font-size: 20px;

    margin-bottom: 6px;

    color: #000000;

  }







   .audit h2 {

   color: #9C0D0D;

   margin-bottom: 20px;

   border-bottom: 3px solid #9C0D0D;

   display: inline-block;

   padding-bottom: 5px;

   display: flex;

   justify-content: center;

   width: 27%;

   margin: auto;

 }























 /* up scroll animation */

html{

  scroll-behavior: smooth;

}





.top{

    position: fixed;

    right: 10px;

    bottom: 10px;

    background-color: #ffffff;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 25px;

    z-index: 1000;

    border: 2px solid #9C0D0D;

}



.top a i {

    font-size: 18px;

}