section::before {
  display: block;
  content: "";
  height: 60px;
}

section::after {
  display: block;
  content: "";
  height: 20px;
}

.hero-row::before {
  display: block;
  content: "";
  height: 60px;
}

html::-webkit-scrollbar {
  width: 0.8rem;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

i {
  color: #b01920;
}
.active {
  border-bottom: 2px solid #b01920 !important;
}

/* Navbar CSS */
nav {
  /* height: 8vh; */
  overflow: hidden;
  background-color: white;
}

nav .navbar-brand {
  overflow: hidden;
  margin-left: 6rem;
}

nav a img {
  max-width: 200px;
  max-height: 100px;
  margin-left: 3rem;
}

nav button {
  border-color: white;
  color: #092230;
}
#a {
  color: black !important;
}

#a:hover {
  border-bottom: 1px solid #b01920;
  color: #092230 !important;
  transform: scale(1.1);
}

#navbarSupportedContent {
  margin-left: 39rem;
}

/* Navbar hover CSS End */

/* Modal CSS */
#freeConsultation button {
  /* rotate: 90deg; */
  margin-left: 120vh;
  /* padding-bottom: 2rem; */
  background-color: #b01920;
  border: 2px solid #092230;
}

#freeConsultation {
  margin-top: 20vh;
  margin-left: 20rem;
  position: fixed;
  z-index: 9998; /* Highest layering */
}

#freeConsultationModal {
  z-index: 9999; /* Highest layering */
}

#freeConsultationModal h1 {
  text-transform: capitalize;
  font-size: 1.5rem !important;
  color: #092230;
}

#freeConsultationModal p {
  text-transform: uppercase;
  font-size: 1.2rem;
  color: black;
}

#freeConsultationModal label {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
}

#freeConsultationModal .btn {
  background-color: #092230;
  color: white;
}

#freeConsultationModal span {
  color: #b01920;
  font-weight: bold;
}

/* Modal CSS End */

/* Hero Section CSS */
#hero h1 {
  border-bottom: 3px solid #b01920;
}

#hero,
#hero1,
#hero2,
#hero3 {
  background-image: url("./assets/hero.png");
  background-repeat: no-repeat;
  background-attachment: fixed !important;
  background-size: cover;
  background-position: center;
  min-width: 100%;
  max-height: 100%;
  height: 80vh;
  color: #092230;
}

#hero2 {
  background-image: url("./assets/hero2.png") !important;
}

#hero3 {
  background-image: url("./assets/hero3.png") !important;
}

#hero1 a,
#hero2 a,
#hero3 a {
  background-color: #092230;
  color: white;
}

#hero1 a:hover,
#hero2 a:hover,
#hero3 a:hover {
  background-color: white;
  color: #092230;
  transform: scale(1.1);
}

#hero1 h1,
#hero2 h1,
#hero3 h1 {
  font-size: 3rem;
  font-weight: bold;
  color: #092230 !important;
  border-bottom: 3px solid #b01920;
  padding-top: 20vh;
}

#cover {
  background-color: rgba(255, 255, 255, 0.8);
  height: 100%;
}

/* About Us Section */
#about {
  background-image: url("./assets/products/clamps.png");
  background-repeat: no-repeat;
  background-attachment: fixed !important;
  background-size: cover;
  background-position: bottom;
  max-width: 100%;
  max-height: 100%;
  /* height: 80vh; */

  position: relative;
}

#about h2 {
  font-size: 2.5rem;
}

#about h3 {
  font-size: 1.5rem;
}

#about p {
  font-size: 1.2rem;
}

#about h5 {
  text-align: left;
  color: #092230 !important;
  border-left: 3px solid #b01920;
}

p {
  font-size: 1.2rem;
}

#about_years {
  background-color: whitesmoke;
}

#about_years .img {
  overflow: hidden;
  border-radius: 10px;
}

#about_years img {
  margin: -10vh;
  height: 15vh;
}

#about_years .container {
  overflow: hidden !important;
  height: 30vh;
}

#about_years h3 {
  font-family: "Times New Roman", Times, serif;
  font-size: 2rem;
  font-weight: bold;
  color: #092230 !important;
}

#about_years p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
}

#y2024 {
  background-image: url(./assets/aboutUs/paper.png);
}

/* About Section */

#about h1 {
  font-size: 2.5rem;
}

#cover2 {
  background-color: rgba(19, 84, 117, 0.6);
  height: 100%;
}

#about img {
  height: 50vh;
}

.about-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: left;
  color: #2b2b2b;
  margin-bottom: 20px;
  border-bottom: 2px solid #b01920;
  display: inline-block;
}

.text-content h3 {
  font-size: 18px;
  color: white;
  margin-bottom: 10px;
}

.text-content p {
  font-size: 14px;
  color: whitesmoke;
  line-height: 1.5;
}
/* Products Section */
.heading h2 {
  text-align: center;
  font-size: 2.5rem !important;
}

.heading {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 3rem;
}

#product .product-row {
  margin-bottom: 4rem;
  display: flex;
  align-items: center;
}

.product .product-row .box {
  display: flex;
  flex-direction: column;
  background-color: white;
  align-items: center;
  text-align: center;
  padding: 1rem;
  gap: 1.5rem;
  width: 50%;
  border-radius: 10px;
  height: 45rem;
  cursor: pointer;
  border: none;
  overflow: hidden;
}

.product .product-row img {
  height: 250px;
  width: 100%;
  transform: scale(1.2);
}
.product .product-row .box:hover {
  background-color: whitesmoke;
}

.product .product-row h5 {
  font-size: 1.5rem !important;
  color: black;
  text-transform: uppercase;
  border-bottom: 2px solid #b01920;
  padding: 0.5rem;
}

.product .product-row p {
  font-size: 1rem !important;
  color: black;
  text-align: left;
}

.product .product-row span {
  font-size: 1rem !important;
  color: black;
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
}

.product .product-row a {
  color: #092230;
  font-size: 1.2rem;
  text-decoration: none;
  text-align: left;
  font-weight: bold;
}

.product .product-row a:hover {
  color: #b01920;
  font-size: 1.2rem;
}

.product .product-row a:hover i {
  color: #092230;
}

.product .heading h5 span {
  color: #b01920;
  border-bottom: 1px solid #092230;
  text-transform: uppercase;
  cursor: pointer;
}
/* Company Info Section */

#companyInfo {
  background-image: url("./assets/companyInfoBg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  max-width: 100%;
  max-height: 100%;
  /* height: 80vh; */

  position: relative;
}

#companyInfo .layer {
  background-color: rgba(19, 84, 117, 0.7);
}

#companyInfo span {
  font-size: 2.5rem;
}
#companyInfo h2 {
  font-size: 1.5rem;
  padding: 10px;
}

#companyInfo h5 {
  font-size: 1.2rem;
}
#companyInfo p {
  font-size: 1.2rem;
}

#companyInfo h3 {
  font-size: 1.5rem;
}

#companyInfo2:hover h2 {
  color: black;
  cursor: pointer;
}

#companyInfo img {
  width: fit-content;
  margin-top: -15vh;
  margin-bottom: -15vh;
  cursor: pointer;
}
#transparent {
  overflow: hidden;
}

#companyInfo #companyInfo3:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

#companyInfo #companyInfo3:hover h2 {
  color: #092230;
}

#companyInfo #companyInfo3:hover p {
  color: #092230;
  cursor: pointer;
}

#companyInfo #youtubeVideo iframe{
  height: 250px;
  width: 100%;
}

/* Our Reach */
#ourReach {
  background-color: #fff;
  color: #092230;
  cursor: pointer;
}

#ourReach .heading h2 {
  font-size: 2.5rem !important;
}

#ourReach .heading P {
  font-size: 1.5rem !important;
}

#ourReach .country-row img {
  width: 10vh;
  height: 6vh;
}

#ourReach .client-row img {
  width: 20vh;
  height: 12vh;
}

/* Footer */
#footer {
  background: url(./assets/akcm.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
}

#footer .box-container {
  background-color: rgba(9, 34, 48, 0.8);
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically (optional if full-page height) */
  min-height: 100vh;
}

#footer h1 {
  font-size: 2.5rem !important;
  color: white;
  border-bottom: 3px solid #b01920;
}

#footer form {
  max-width: 45rem;
  text-align: center;
  max-width: 500px;
  width: 100%;
  background-color: #2c2c2c;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

#footer form .box {
  width: 100%;
  margin: 0.3rem 0;
  padding: 0.5rem 0.5rem;
  color: var(--black);
  border-radius: 0.5rem;
}

#footer form .box2 {
  width: 30%;
  color: #092230;
  background-color: white;
  border-radius: 3rem;
  margin: 2rem;
  cursor: pointer;
}

#footer form .box2:hover {
  background: black;
  color: white;
}

#footer .list-group a:hover {
  color: whitesmoke;
  cursor: pointer;
  margin-left: 0.5rem;
}

#footer_logo {
  margin-top: -25vh;
  margin-bottom: -25vh;
}


/* BreadCrumbs */
#breadCrumb {
  height: 5vh;
}

#breadCrumb li a {
  text-decoration: underline;
  font-size: 1.2rem;
  color: #092230;
}
#breadCrumb li a:hover {
  text-decoration: underline;
  font-size: 1.2rem;
  color: #b01920;
}

/* About Us HTML */
#aboutUsSection1 {
  background-color: whitesmoke;
  cursor: pointer;
}

#aboutUsSection h3 {
  font-size: 1.75rem;
}

#aboutUsSection p {
  font-size: 1.5rem;
}

.aboutUsImage img {
  width: 100%;
}

#companyInfo {
  background-attachment: fixed !important;
}

#AboutUsSection3 {
  background-color: whitesmoke;
  cursor: pointer;
}

#AboutUsSection3 img {
  width: 500px;
  height: 300px;
}

#whoWeServe {
  background-color: #092230;
}

#whoWeServe .card {
  overflow: hidden;
}

#whoWeServe .card:hover img {
  transform: scale(1.3);
}

#whoWeServe .card-body {
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  height: 100%;
  width: 100%;
  background: rgba(9, 34, 48, 0.9);
  display: none;
  cursor: pointer;
}

#whoWeServe h5 {
  text-align: center;
  font-size: 3rem;
  background: rgba(9, 34, 48, 0.9);
  color: white;
  border-bottom: 2px solid #b01920;
}

#whoWeServe .card:hover .card-body {
  display: flex;
}

#aboutUsSection4 {
  background-color: white;
}

#aboutUsSection4 h5 {
  font-size: 1.5rem;
  border-bottom: 2px solid #b01920;
}

/* Contact Us HTML */
#contactUs {
  background-image: url("./assets/akcm.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: bottom;
  max-width: 100%;
  max-height: 100%;
  /* height: 80vh; */

  position: relative;
  


}

#contactUs h1 {
  font-size: 2.5rem;
  font-weight: 400;
  color: #092230;
}

#contactUs h2 {
  font-size: 1.5rem !important;
  border-bottom: none !important;
  color: #092230;
  text-align: center;
}

#contactUs p {
  font-size: 1rem !important;
  color: black;
}

#contactUs h5 {
  font-size: 1.2rem;
  color: #092230;
}

#contactUs a {
  font-size: 1rem;
  color: black;
}

#submit {
  background-color: #b01920;
  color: white;
}
#submit:hover {
  background-color: white !important;
  color: #b01920 !important;
}

#ourMetalFamily h2 {
  font-size: 1.2rem;
  border-bottom: 2px solid whitesmoke !important;
}

#ourMetalFamily h3 {
  font-size: 2rem;
}

#ourMetalFamily .card:hover {
  background-color: #092230 !important;
}

#ourMetalFamily .card:hover a {
  color: white;
}

/* Products.html */
#productsPage {
  background-image: url("./assets/building.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: bottom;
  max-width: 100%;
  max-height: 100%;
}

#productsPage h1 {
  color: #b01920;
  border-bottom: 1px solid #092230;
}

#productsPage .col-md-3 h5 {
  font-size: 1.5rem;
  background-color: #092230;
  color: white;
  text-align: left;
}

#productsPage .col-md-3 a {
  font-size: 1.2rem;
  background-color: white;
  color: #092230;
  text-align: left;
}

#productsPage .col-md-3 a:hover {
  font-size: 1.2rem;
  background-color: #092230;
  color: white;
  text-align: left;
}

#productsPage .col-md-3 i {
  text-align: right !important;
  color: #b01920;
}

#productsPage .card {
  overflow: hidden;
  cursor: pointer;
  height: 100% !important;
}

#productsPage img {
  height: 40vh;
}

#productsPage h5 {
  text-transform: uppercase;
  border-bottom: 2px solid #b01920;
  text-align: left;
}

#productsPage p {
  text-align: left;
  font-size: 1rem;
}

#productsPage p span {
  text-transform: uppercase;
  font-weight: bold;
}

#productsPage .card a {
  background-color: white;
  color: #b01920;
}

#productsPage .card a:hover {
  background-color: #b01920;
  color: white;
}

#pagination a {
  font-size: 1rem;
  border: 1px solid black;
  background-color: white;
}

#pagination a:hover {
  background-color: #092230;
  color: white;
}

#productsContent p {
  font-size: 1.2rem;
  font-weight: 600;
}

/* Device responsive */

@media (max-width: 576px) {
  /* Navbar */
  nav {
    /* height: 12vh; */
    height: auto;
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  nav .navbar-brand {
    margin-left: 0rem;
  }

  nav .navbar-toggler {
    margin-left: 8rem;
  }

  nav a img {
    width: 9vh;
    max-height: 100px;
    margin-left: 7rem;
  }

  #navbarSupportedContent {
    margin-left: 0rem;
    margin-right: 0rem;
    margin-top: 0;
    margin-bottom: 0;
  }

  #about_years img {
    width: 125%;
  }

  /* Modal */
  #freeConsultation button {
    rotate: 270deg;
    margin-left: 15px;
    padding-bottom: 2rem;
    background-color: #b01920;
    border: 2px solid #092230;
    font-size: 1.1rem;
  }

  #hero1,
  #hero2,
  #hero3 {
    height: 100vh;
  }

  #about .text-content p {
    font-size: 1.2rem;
  }

  #about_years {
    text-align: center !important;
  }

  #companyInfo h2 {
    font-size: 1.5rem;
  }

   #companyInfo p {
    font-size: 1.2rem;
  }
  #companyInfo iframe {
    width: 450;
    height: 300;
  }

  #companyInfo2 img {
    transform: scale(0.9);
    margin-left: -2rem;
  }

  .aboutUsImage img {
    width: 100%;
  }

  #AboutUsSection3 img {
    width: 100%;
  }

  #productsPage .card {
    height: 450px;
  }

  #hero1 h1,
  #hero2 h1,
  #hero3 h1 {
    padding-top: 10vh;
  }

  #productsPage .col-md-9 {
    padding-top: 40px;
  }

  #footer_logo {
    max-width: 400px;
    margin-bottom: -22vh;
    margin-left: -2vh;
  }
}
/* Animations */
.hidden {
  opacity: 0;
  scale: 0;
  transition: all 2s;
}
.hiddenLeft {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 2s;
}

.hiddenRight {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(100%);
  transition: all 2s;
}

.hiddenTop {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(-100%);
  transition: all 2s;
}

.hiddenBottom {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(100%);
  transition: all 1s;
}

.show {
  opacity: 1;
  scale: 1;
  filter: blur(0);
  transform: translateX(0);
  transform: translateY(0);
}

/* Transition animation using CSS*/
.col-md-4:nth-child(3) {
  transition-delay: 500ms;
}

.col-md-4:nth-child(4) {
  transition-delay: 600ms;
}

.col-md-4:nth-child(5) {
  transition-delay: 700ms;
}

.col-md-4:nth-child(6) {
  transition-delay: 800ms;
}

.col-md-4:nth-child(7) {
  transition-delay: 900ms;
}

.col-md-4:nth-child(8) {
  transition-delay: 1000ms;
}

.col-md-4:nth-child(9) {
  transition-delay: 1100ms;
}

.col-md-4:nth-child(10) {
  transition-delay: 1200ms;
}

/* 
.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 1s;
} */

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}


.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.comparison-table th,
.comparison-table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}

.comparison-table thead {
  background-color: #f2f2f2;
}