* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto Slab";
}

html, body {
  scroll-behavior: smooth;
}

body {
  position: relative;
  font-family: "Roboto Slab";
  min-width: 400px;
  overflow-x: hidden;
  opacity: 1;
  transition: all 0.2s;
  min-height: 100vh;
  flex-direction: column;
  font-size: 0.8rem;
}

#body-background-image{
  position:sticky;
  bottom:0;
  left:0;
  height:100vh;
  width:100vw;
  background-image: url("construction crane.png");
  background-repeat: no-repeat;
  background-size: contain;
  opacity:0.2;
  z-index: -1;
}

::selection {
  background-color: orange;
  color: white;
}

body h1 {
  padding: 20px;
  font-size: 2em;
}

body h2, p {
  padding: 20px;
}

/* -------- NavBar --------- */
.main {
  font-family: "Roboto Slab";
  list-style-type: none;
  position: relative;
  width: 100%;
  min-width: 600px;
}

.main li {
  float: left;
  display: inline;
}

.main li a {
  text-align: center;
  display: block;
  padding: 20px;
  color: black;
  text-decoration: none;
}

.side {
  background-color: rgba(255, 255, 255, 0.8);
  font-family: "Roboto Slab";
  display: none;
  list-style-type: none;
  height: 100vh;
  overflow: auto;
  width: 250px;
}

#dropdown, #dropdown-main {
  transition: all 0.8s;
}

.side li a {
  text-align: center;
  display: block;
  padding: 20px;
  color: black;
  text-decoration: none;
}

.active {
  background-color: #ffcc66;
}

.color1 {
  background-color: rgba(255, 0, 0, 0.4);
}

.color2 {
  background-color: rgba(30, 144, 255, 0.4);
}

.color3 {
  background-color: rgba(255, 165, 0, 0.4);
}

.color4 {
  background-color: rgba(0, 128, 0, 0.4);
}

.color5 {
  background-color: rgba(255, 215, 0, 0.4);
}

.modal {
  z-index: 5;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.hide {
  display: none;
}

.show {
  display: flex;
}

.modal-content {
  display: flex;
  justify-content: center;
  position: relative;
  height: 100vh;
  width: 80vw;
  background-color: white;
}

.modal-content:hover {
  cursor: auto;
}

.modal-content img {
  height: 100%;
}

.close-modal {
  color: #555;
  font-size: 4em;
  position: absolute;
  right: 20px;
  top: 0;
}

.close-modal:hover {
  cursor: pointer;
  color: #333;
}

.close-modal:active {
  color: #111;
}

.main li a:hover:not(.active) {
  cursor: pointer;
  background-color: #72b5fd;
}

#products-list {
  display: none;
}



#toggle {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 20px;
  left: 20px;
  transition: all 0.3s;
  padding: 10px;
  font-size: 1.6em;
}

#toggle:hover {
  cursor: pointer;
  background-color: white;
  transition: all 0.3s ease-out;
}


/* Navbar */

.navbar {
  background-color: #0056b3; /* Dark Blue */
}
.navbar-brand, .nav-link {
  color: white !important;
}
.nav-link:hover {
  color: #cce5ff !important; /* Lighter Blue on Hover */
}
.dropdown-menu {
  min-width: 150px;
}






.welcome-text {
  font-size: 3em;
  margin: 65px 0;
}

/* ------ Slideshow --------*/
.cover-slide {
  flex: 1;
  animation-name: slide-up;
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes slide-up {
  from {
    background-position: 100% 0%;
  }
  to {
    background-position: 100% 80%;
  }
}
.hide-slide {
  flex: 0;
  background-position: 100% 80%;
}

/* View products template */
.product-cta {
  height: 300px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s;
}

.product-cta:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

#view-products{
  margin-bottom:150px;
}

.product-img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

@media (max-width: 768px) {
  .product-cta {
    height: auto;
  }

  .product-text {
    padding: 2rem 1rem;
    text-align: center;
  }
}

.slideshow {
  display: none;
  position: relative;
  top:150px;
  height: auto;
  width: 100vw;
  justify-content: center;
  align-items: center;
  margin: 40px auto;
}

.caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  opacity: 1;
  font-family: "Roboto Slab";
  backdrop-filter: blur(3px);
  text-align: left;
  color: black;
  transition: all 1s;
  padding: 0 20px 0;
  width: 40%;
  height: auto;
  transition:all 0.7s ease-in-out;
}

.slide {
  height: 70vh;
  width: 70%;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 2s;
  border-radius: 12px;
  margin:5px;
  transition:all 0.7s ease-in-out;
}

.slide:hover{
  cursor:pointer;
  transform: scale(1.05);
  transition:all 0.1s ease-in-out linear;
}



.slideshow > div:nth-of-type(1) {
  background-image: url("Rod_Cutting.webp");
}

.slideshow > div:nth-of-type(2) {
  background-image: url("weber-adhesives.jpeg");
}

.slideshow > div:nth-of-type(3) {
  background-image: url("green-shade-nets.jpg");
}

.slideshow > div:nth-of-type(4) {
  background-image: url("wire-mesh.jpg");
}

.slideshow > div:nth-of-type(5) {
  background-image: url("waterproofing.jpg");
}

#caption-p, #caption-heading {
  position: relative;
  left: -15px;
  transition: all 0.8s;
  width: 100%;
  transition:all 0.7s ease-in-out;
}

#caption-heading {
  min-height: 100px;
  font-size: 2.4em;
  border-bottom: 1px solid #aaa;
  transition:all 0.7s ease-in-out;
}

#caption-p {
  display: flex;
  min-height: 200px;
  margin-top: 15px;
  font-size: 1.4em;
  overflow-y: hidden;
}

#caption-heading {
  width: 100%;
  font-weight: 500;
  font-size: 2.4em;
  transition:all 0.7s ease-in-out;
}

.caption-heading-appear, .caption-para-appear {
  opacity: 1;
  transform: translateX(0);
  transition:all 0.7s ease-in-out;
}

.caption-heading-disappear {
  opacity: 0;
  transform: translateX(2%);
  transition:all 0.7s ease-in-out;
}

.caption-para-disappear {
  opacity: 0;
  transform: translateX(-2%);
  transition:all 0.7s ease-in-out;
}

/* Main body */
.description:nth-of-type(odd) {
  position: relative;
  right: 0px;
  width: 50%;
  left: 45vw;
  background-color: #eee;
  padding: 20px;
  margin: 10px 40px;
}

.fade-in {
  transform: translateY(-5%);
  opacity: 1;
  transition: all 0.8s;
}

.fade-out {
  transform: translateY(5%);
  opacity: 0;
  transition: all 0.8s;
}

.description:nth-of-type(even) {
  right: 45vw;
}

/* Products Table */
table {
  width: 90%;
  margin: auto;
}

table, th, td {
  border: 2px solid black;
  border-collapse: collapse;
  padding: 20px;
}

.products-range {
  flex-wrap: wrap;
  position: relative;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 500px;
  overflow-y: auto;
  margin-bottom: 200px;
  transition: all 0.3s;
}

.products-range div > p {
  backdrop-filter: blur(1px);
  padding: 20px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  transition: all 0.3s;
  transform-origin: bottom;
}

.products-range > div {
  position: relative;
  padding-bottom: 40px;
  margin: 20px;
  width: 300px;
  height: 300px;
  background-color: white;
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.3s;
  overflow: hidden;
}

.products-range > div:hover {
  cursor: pointer;
  transition: all 0.3s;
}

.products-range > div p {
  background-color: rgba(255, 215, 135, 0.5);
}

.products-range > div:hover p {
  font-size: 1.32em;
  font-weight: 400;
  background-color: rgba(255, 215, 135, 0.8);
}

#default-search {
  font-size: 1.4em;
  width: 100vw;
  text-align: center;
  padding: 20px;
}

#default-search a {
  text-decoration: none;
}

#default-search a:visited {
  text-decoration: none;
}

#products-catalogue {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  background-color: white;
  position: relative;
  overflow: auto;
}

#products-catalogue > div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 40px 0;
}

.search-field {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 75%;
}

.product-tile-description p {
  background-color: rgba(255, 224, 163, 0.2);
}

.product-tile:nth-of-type(1) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Weber\ tools.jpg);
}

.product-tile:nth-of-type(2) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/heavy-duty-concrete-block-cutting-machine-.jpeg);
}

.product-tile:nth-of-type(3) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Expansion\ joint\ sheets.jpg);
}

.product-tile:nth-of-type(4) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/green\ shade\ net.jpg);
}

.product-tile:nth-of-type(5) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/orange\ blue\ tarpaulin\ sheets\ 180gsm.jpg);
}

.product-tile:nth-of-type(6) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/black\ ldpe\ sheet\ 3.jpg);
}

.product-tile:nth-of-type(7) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/champion\ water\ curing\ pipes.webp);
}

.product-tile:nth-of-type(8) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/NETS\ -Braided\ Safety\ Net.jpg);
}

.product-tile:nth-of-type(9) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/scaffolding\ materials.webp);
}

.product-tile:nth-of-type(10) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/scaffolding-caster-wheel.jpg);
}

.product-tile:nth-of-type(11) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/polycab\ conduits.jpg);
}

.product-tile:nth-of-type(12) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/hdpe\ pipes.jpeg);
}

.product-tile:nth-of-type(13) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/jute-hessian-500x500.webp);
}

.product-tile:nth-of-type(14) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/glass\ fiber\ mesh.jpg);
}

.product-tile:nth-of-type(15) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Arpita\ GI\ Plaster\ Mesh.jpg);
}

.product-tile:nth-of-type(16) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/pvc\ conduit\ pipes.jpg);
}

.product-tile:nth-of-type(17) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/reliance\ recron\ fiber.jpeg);
}

.product-tile:nth-of-type(18) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/dr\ fixit\ urp\ 301\ 50kg.webp);
}

.product-tile:nth-of-type(19) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Fosroc\ lokfix\ chemical.jpeg);
}

.product-tile:nth-of-type(20) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/fevicol-ac-duct-king-high-coverage-adhesive.jpg);
}

.product-tile:nth-of-type(21) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/ALUMINIUM\ ALDROP\ 300\ X16MM\ ISI.jpg);
}

.product-tile:nth-of-type(22) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/commercial-plywood.jpg);
}

.product-tile:nth-of-type(23) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/xtra\ power\ tools.jpg);
}

.product-tile:nth-of-type(24) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Xtra\ Cup\ Wheel.jpg);
}

.product-tile:nth-of-type(25) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/concrete\ tape.png);
}

.product-tile:nth-of-type(26) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/concrete\ bucket\ 2.png);
}

.product-tile:nth-of-type(27) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/cement\ feeding\ hose.jpg);
}

.product-tile:nth-of-type(28) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/aristo\ trolley\ waste\ bins.webp);
}

.product-tile:nth-of-type(29) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/HDHMR\ Boards.webp);
}

.product-tile:nth-of-type(30) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/zoloto\ ball\ valve.webp);
}

.product-tile:nth-of-type(31) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Swellable-Water-Bars.png);
}

.product-tile:nth-of-type(32) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Floor\ Protection\ Sheet.jpg);
}

.product-tile:nth-of-type(33) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Foam\ Sheet.webp);
}

.product-tile:nth-of-type(34) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/tuff\ pp\ ropes.jpg);
}

.product-tile:nth-of-type(35) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/alko-plus-safety-shoes.jpg);
}

.product-tile:nth-of-type(36) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/PVC\ Rungs.webp);
}

.product-tile:nth-of-type(37) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Udyogi\ cut-resistant\ hand\ gloves.png);
}

.product-tile:nth-of-type(38) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Udyogi\ Dotted\ Cotton\ Hand\ Gloves.jpg);
}

.product-tile:nth-of-type(39) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/cut-off-saw\ 14\ INCH.jpg);
}

.product-tile:nth-of-type(40) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/thermocole\ sheets.webp);
}

.product-tile:nth-of-type(41) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/brass-bolts.jpg);
}

.product-tile:nth-of-type(42) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Wire\ Nails\ 3\ inch\ 10g.jpg);
}

.product-tile:nth-of-type(43) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/safety\ harness\ belt.webp);
}

.product-tile:nth-of-type(44) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/coconut\ coir\ rope.jpg);
}

.product-tile:nth-of-type(45) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/concrete\ vibrator\ needle.webp);
}

.product-tile:nth-of-type(46) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/shock\ proof\ rubber\ mat.jpg);
}

.product-tile:nth-of-type(47) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/gi\ chicken\ mesh.jpeg);
}

.product-tile:nth-of-type(48) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/HELMETS\ -safety\ helmet\ PN\ 501.jpg);
}

.product-tile:nth-of-type(49) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Lifting\ Equipment.jpg);
}

.product-tile:nth-of-type(50) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Screws.jpg);
}

.product-tile:nth-of-type(51) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Water\ storage\ tank.jpg);
}

.product-tile:nth-of-type(52) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/xtra\ power\ tools.jpg);
}

.product-tile:nth-of-type(53) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/tata\ agrico\ shovel\ with\ steel\ handle.jpg);
}

.product-tile:nth-of-type(54) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/AUTOMATIC\ SHOE\ SHINE\ MACHINE\ 1.jpg);
}

.product-tile:nth-of-type(55) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/construction-shuttering-oil.jpg);
}

.product-tile:nth-of-type(56) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/mccoy-soudal-acryrub-pro-plus.jpg);
}

.product-tile:nth-of-type(57) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/TATA\ Binding\ wire.jpg);
}

.product-tile:nth-of-type(58) {
  border-radius: 15px;
  background-position: center;
  background-image: url(./homepage_products/Shuttering\ Consumables.jpg);
}

#go-to-search {
  position: fixed;
  z-index: 3;
  bottom: 20px;
  right: 20px;
  width: auto;
  height: 50px;
  background-color: rgba(255, 224, 163, 0.7);
  color: #454545;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  opacity: 0;
}

#go-to-search:hover {
  background-color: #ffe0a3;
  color: black;
  cursor: pointer;
}

#go-to-search a:hover {
  color: black;
}

#go-to-search a {
  text-decoration: none;
  color: #454545;
}

#products-catalogue > div {
  width: 50%;
}

#products-catalogue select {
  font-size: 1.4em;
}

.search-box input[type=text] {
  position: relative;
  font-family: "Roboto Slab";
  outline: none;
  border: none;
  background-color: #72b5fd;
  border-radius: 50px;
  font-size: 1.4em;
  padding: 10px 30px;
  width: 100%;
  transition: all 0.2s;
}

#search-icon {
  position: absolute;
}

.search-box input[type=text]:focus-visible {
  outline: 2px solid rgb(201, 213, 224);
  background-color: rgba(255, 224, 163, 0.7);
  color: black;
}

.search-box .fa {
  position: absolute;
  top: 5px;
  right: 10px;
  padding: 10px;
  border-radius: 50%;
  color: #454545;
  background-color: white;
  transition: all 0.2s;
}

.search-box .fa:hover {
  background-color: rgba(255, 224, 163, 0.7);
  color: black;
  cursor: pointer;
}

.home-description-container {
  display: flex;
  justify-content: center;
  width: 100vw;
  margin: 50px 0;
}

.home-description {
  margin: auto;
  display: flex;
  flex-direction: row;
  width: 90vw;
  height: auto;
  margin-bottom: 30px;
}

.certified .home-description {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-description-image {
  height: inherit;
  width: 40%;
  background-position: center;
  background-size: cover;
}

.home-description-text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 20px;
  width: 60%;
  background-color: #72b5fd;
  font-size: 20px;
  min-height: 250px;
  line-height: 0.8cm;
}

/* Stats box */

.counter-card {
  transition: transform 0.3s ease-in-out;
}
.counter-card:hover {
  transform: scale(1.05);
}
.counter-icon {
  font-size: 3rem;
  color: #007bff;
}
.counter-number {
  font-size: 2.5rem;
  font-weight: bold;
}
.counter-label {
  font-size: 1rem;
  color: #6c757d;
}
.counter-container {
  margin-top: 50px;
}

#stats {
  width: 100vw;
  height: 300px;
  padding: 20px;
  margin: auto;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

#stats div {
  margin: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 80%;
  background-color: #72b5fd;
  width: 33.33%;
}

.count {
  /* font-size: 3em; */
}

.count-container {
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
}

.count-container p {
  /* font-size: 1.4em; */
}

#brands {
  margin: auto;
  width: 100vw;
  background-color: #72b5fd;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#brands div {
  display: flex;
  margin: 40px;
  margin: 20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid black;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: white;
  background-position: 30%;
}

#brands div:nth-of-type(1) {
  background-image: url(./client_images/Aavasa\ constructions.jpg);
}

#brands div:nth-of-type(2) {
  background-image: url(./client_images/atluri\ ascend.jpg);
}

#brands div:nth-of-type(3) {
  background-image: url(./client_images/JMC_Logo.svg.png);
}

#brands div:nth-of-type(4) {
  background-image: url(./client_images/kalpa\ taru\ logo.png);
}

#brands div:nth-of-type(5) {
  background-image: url(./client_images/NCCCL\ logo.jpeg);
}

#brands div:nth-of-type(6) {
  background-image: url(./client_images/pulse_pharmaceuticals_cover\ logo.jpg);
  background-size: 170%;
  background-position: 50%;
}

#brands div:nth-of-type(7) {
  background-image: url(./client_images/slipform_limited_logo.jpg);
  background-position: 50%;
}

#brands div:nth-of-type(8) {
  background-image: url(./client_images/src_infra_pvt_ltd_logo.jpg);
  background-position: 50%;
}

#brands div:nth-of-type(9) {
  background-image: url(./client_images/ssi\ contractors.jpg);
  background-size: 170%;
  background-position: 58%;
}

.data {
  margin: auto;
  width: 100vw;
}

#product-specifications {
  width: 90vw;
  max-width: 570px;
  border-collapse: collapse;
}

#product-specifications > tr > * {
  width: 50%;
}

#product-specifications, #product-specifications td, #product-specifications th {
  border: 2px solid black;
  padding: 15px;
}

#product-specifications > tr:nth-of-type(even) {
  background-color: white;
}

/* Product catalogue slideshow */

.card {
  max-height: 100%; /* Ensures all cards are the same height */
}

.card-img-top {
  height: 200px; /* Set a fixed height for all images */
  object-fit: cover; /* Crop and fit images properly */
}

.carousel-inner {
  display: flex;
  align-items: center; /* Aligns cards properly */
}
/* Lozad */

.lazyload {
  opacity: 1;
  /* visibility: hidden; Fully hide until loaded */
  transition: opacity 0.5s ease-in-out;
}

.lazyloaded {
  opacity: 1;
  visibility: visible;
}



/* Cart.php */

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

th,td{
  font-size:1.3em;
}


.image-container {
  display:flex;
  height:100%;
  width:100%;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.image-container img {
height:100%;
  width:100%;
  background: url('loading-spinner.gif') center center no-repeat;
  background-size: contain;
  opacity: 1; /* Initially hidden */
  transition: all 0.5s ease-in-out;
}

.image-container img:hover{
  cursor: pointer;
}

.image-container img:not(.product-img):hover{
  cursor:pointer;
  transform: scale(1.1);
  transition: all 0.3s ease-in-out;
}

.image-container img.loaded {
  opacity: 1; /* Fade in smoothly */
}

/* Product.php image styling */

.image-container-product {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.image-container-product img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain; /* Ensures the image maintains its aspect ratio */
  background: url('loading-spinner.gif') center center no-repeat;
  background-size: contain;
  opacity: 1; /* Initially hidden */
  transition: all 0.5s ease-in-out;
}

.image-container-product img:hover {
  cursor: pointer;
}

.image-container-product img:not(.product-img):hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: all 0.3s ease-in-out;
}

.image-container-product img.loaded {
  opacity: 1; /* Fade in smoothly */
}



/* Cart Table */

.cart-table td div{

}


/* Product.php */



.product-add-to-cart{
  margin-left: 20px;
}

.added-to-cart-toast{
  width:100%;
}

.product-image-container{
  height:100%;
}

/* Zoom image css */

.zoom-image-container {
  position: relative;
  display: inline-block;
}

#main-image {
  width: 400px; /* Adjust as needed */
  display: block;
}

#lens {
  position: absolute;
  width: 100px; /* Size of the zoom lens */
  height: 100px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid #aaa;
  cursor: crosshair;
  display: none; /* Hidden until hover */
}

#zoom-result {
  width: 300px; /* Zoomed image container */
  height: 300px;
  overflow: hidden;
  border: 1px solid #ddd;
  position: absolute;
  top: 0;
  left: 420px; /* Adjust to position the zoomed view */
  display: none; /* Hidden until hover */
}



/* Products.php */

.card-title{
  white-space: nowrap;      /* Prevents text from wrapping to a second line */
  overflow: hidden;         /* Hides overflow text */
  text-overflow: ellipsis;  /* Adds '...' at the end */
  max-width: 100%;          /* Ensures it doesn’t break layout */
  display: block;           /* Ensures it behaves as a block element */
}

.products-image-container{  
  width:100%;
  height:200px;
}

.footer{
  position: relative;
  left:0;
  bottom:0;
  width:100vw;
  margin-top:120px;
  background-origin: #0056B3;
}


@media (min-width: 992px) { /* Adjust layout for large screens */
  .carousel-inner .carousel-item {
      display: flex;
      justify-content: center;
  }

  #body-background-image{
    position:sticky;
    bottom:0;
    left:0;
    height:100vh;
    width:100vw;
    background-image: url("construction crane.png");
    background-repeat: no-repeat;
    background-size: contain;
    opacity:0.2;
    z-index: -1;
  }
}

/*  -------- Footer --------- */
.footer{
  position: relative;
  bottom:0;
  width:100vw;
  margin-top:120px;
  background-origin: #0056B3;
}

/* Products-description.html */
.product-description {
  margin: auto;
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: auto;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}


.specs-table {
  font-size: 1.6em;
  width: 60%;
}

.specs-table table {
  height: 300px;
}

/*----------- Mobile View -------*/
@media screen and (max-width: 600px) {
  body {
    width: 100vw;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 0.7rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  body::-webkit-scrollbar {
    display: hidden;
  }



  #body-background-image{
    position:sticky;
    bottom:0;
    left:0;
    height:100vh;
    width:100vw;
    background-image: url("construction crane.png");
    background-repeat: no-repeat;
    background-size: contain;
    opacity:0.2;
    z-index: -1;
  }

  .products-range div {
    overflow: hidden;
  }
  #toggle {
    display: flex;
  }
  .side {
    height: 100vh;
  }
  .main {
    display: none;
    background-color: red;
  }
  #vertical-navbar li a:hover:not(.active) {
    background-color: #72b5fd;
  }
  .slideshow {
    position: relative;
    display: flex;
    width: 100vw;
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 40px auto;
    margin-bottom: 70px;
  }
  .slide {
    width: inherit;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 2s;
  }
  .cover-slide {
    min-height: 400px;
    flex: 1;
    animation-name: slide-up;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
  .caption {
    font-size: 0.9em;
    position: absolute;
    top: 5%;
    left: 2%;
    color: white;
    height: auto;
    min-height: 200px;
    width: 60vw;
    margin: auto;
    min-width: 40vw;
    transition: all 0.7s ease-in-out;
  }

  .search-box {
    font-size: 0.8em;
  }
  .count {
    font-size: 2em;
  }
  .count-container p {
    font-size: 0.93em;
  }
  #stats {
    font-size: 1em;
  }
  #caption-heading {
    font-size: 1.6em;
    transition:all 0.7s ease-in-out;
  }
  #caption-p {
    min-height: 50px;
    font-size: 1.4em;
    transition:all 0.7s ease-in-out;
  }
  #table-container #enquiry-table {
    margin-bottom: 80px;
  }
  #table-container > #add-item-enquiry {
    bottom: 10px;
    left: 110px;
  }
  #table-container > #delete-item-enquiry {
    bottom: 10px;
    left: 180px;
  }
  #footer-blocks {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #footer-blocks div {
    width: 80%;
  }
  .home-description-container {
    margin: 50px auto;
  }
  .home-description {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .home-description-image {
    min-height: 250px;
    width: 100vw;
  }
  .home-description-text {
    display: flex;
    font-size: 20px;
    min-height: 250px;
    line-height: 0.8cm;
    padding: 20px 20px;
    width: 100vw;
  }
}
/* Contact.html */
#enquiry-form {
  font-family: "Roboto Slab";
  display: flex;
  background-color: #72b5fd;
  padding: 20px;
  align-content: center;
  font-size: 1.4em;
}

#enquiry-form label {
  margin-left: 20px;
}

#enquiry-form input, #enquiry-form select, #enquiry-form textarea {
  border: none;
  font-family: "Roboto Slab";
  font-size: 1em;
  display: block;
  width: 60%;
  outline: none;
  padding: 10px;
  margin: 20px;
}

#textarea {
  outline: 5px solid #ffe0a3;
}

#table-container {
  display: flex;
  flex: 1;
  position: relative;
  width: 90%;
  background-color: white;
}

#table-container #enquiry-table {
  height: auto;
  margin-left: -20px;
}

table, th, td {
  border: none;
}

#enquiry-table {
  position: relative;
  margin: 0;
  width: 90%;
  max-width: 90%;
  text-align: center;
}

#enquiry-form input:focus-visible, #enquiry-form select:focus-visible {
  outline: 5px solid #ffe0a3;
}

#textarea:focus {
  border: 5px solid #ffe0a3;
}

#enquiry-form table td input, #enquiry-form table td select {
  margin: 20px;
  width: 100%;
  height: 100%;
  margin: auto;
}

#add-item-enquiry, #delete-item-enquiry {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background-color: greenyellow;
  position: absolute;
  bottom: 20px;
  right: 25px;
}

#delete-item-enquiry {
  background-color: #ddd;
  color: #454545;
  opacity: 0.5;
}

#delete-item-enquiry:focus {
  outline: none;
}

#delete-item-enquiry {
  right: -50px;
}

#add-item-enquiry:hover {
  background-color: green;
  color: white;
  cursor: pointer;
}

#delete-item-enquiry:hover {
  cursor: pointer;
}

#add-item-enquiry:active {
  background-color: orange;
  color: white;
}

#delete-item-enquiry:active {
  background-color: orange;
  color: white;
}

#add-item-enquiry:focus, #delete-item-enquiry:focus:not(.inactive) {
  outline: none;
  border: 5px solid black;
}

.inactive {
  background-color: #bbb;
  color: #454545;
}

input[type=submit]:hover {
  background-color: #ffe0a3;
  cursor: pointer;
}

#purpose-of-enquiry {
  padding: 20px;
  background-color: #72b5fd;
}

#enquiry-form h3 {
  margin-left: 20px;
}

#purpose-of-enquiry h3, #purpose-of-enquiry select {
  margin-left: -3px;
}

#purpose-of-enquiry input, #purpose-of-enquiry label {
  padding: 20px;
  background-color: white;
}

.button {
  background-color: rgba(255, 224, 163, 0.7);
}

#textarea {
  width: 80vw;
}

input[type=text], input[type=number], input[type=email] {
  width: 100%;
}

/* Products.css */
.products-page-search {
  z-index: 2;
  position: sticky;
  top: 20px;
  font-size: 1.4em;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 20px;
  width: 100vw;
  height: auto;
  background-color: white;
}

.products-page-search .categories {
  width: 100%;
}

.custom-search {
  width: 100%;
}

.products-page-search div select {
  width: 90%;
}

.all-products-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100vw;
  height: auto;
  margin-top: 50px;
  background-color: dodgerblue;
  padding: 20px;
}

.product-container {
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  margin: 40px;
  height: 300px;
  width: 300px;
}

.title {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  background-color: white;
  backdrop-filter: blur(1px);
  transition: all 0.2s;
}

.title p {
  font-size: 1.2em;
  background-color: rgba(255, 224, 163, 0.2);
}

.product-container:hover {
  cursor: pointer;
}

.product-container:hover .title {
  background-color: rgb(221, 221, 221);
  backdrop-filter: blur(3px);
  font-weight: 400;
  font-size: 1.4em;
}

.products-page-search input[type=submit] {
  border: none;
  background-color: rgba(255, 224, 163, 0.7);
  font-size: 1em;
  padding: 15px;
  height: 10vh;
  width: 40%;
}

.products-page-search input[type=submit]:hover {
  cursor: pointer;
  background-color: #ffe0a3;
}

.test-beat-container {
  z-index: 10;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50vh;
  padding: 20px;
  background-color: white;
  overflow-y: auto;
  padding-bottom: 80px;
}

.test-beat {
  display: flex;
  align-items: center;
  margin: 5px;
  position: relative;
  height: auto;
  width: 200px;
  height: 100px;
  background-color: white;
  border-radius: 0;
  border-bottom: 2px solid #ffe0a3;
}

.test-beat:hover {
  background-color: green;
  transition: all 0.3s;
}

.test-beat p {
  text-align: center;
  width: 100%;
}

#all_products {
  background-color: rgb(255, 186, 57);
  color: white;
}

#all_products:hover {
  background-color: orange;
}

.divmenu {
  z-index: 7;
  position: absolute;
  width: 100%;
  height: 0px;
  background-color: #ccc;
  overflow-y: auto;
  transition: all 0.3s;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background-color: none;
}

::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 15px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #333;
}

.divmenu h2:hover {
  cursor: pointer;
  background-color: white;
  color: black;
  transition: all 0.2s;
}

.test-beat:hover {
  background-color: #72b5fd;
  cursor: pointer;
  transition: all 0.1s;
}

.test-beat:hover > p {
  font-size: 1.2em;
  transition: all 0.1s;
}

/* allProducts.html */
.categoryHeading {
  width: 100vw;
  padding: 30px;
  background-color: white;
}

.expand:hover {
  cursor: pointer;
}

/* ProductDescription.html */
.product-description {
  margin: auto;
  display: flex;
  width: 100vw;
  justify-content: center;
  flex-direction: column;
  margin-top: 50px;
}



.specs-table {
  font-size: 1.6em;
  width: 100vw;
}

/*# sourceMappingURL=styles.css.map */



/* Wrapper to maintain consistent dimensions */
.image-wrapper {
  position: relative;
  width: 100%;
  height: 200px; /* Ensures uniform height */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f8f8f8; /* Placeholder background */
  border-radius: 5px;
}

/* Placeholder Spinner (if needed) */
.image-wrapper::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border: 4px solid #ccc;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Hide spinner when image is loaded */
.lozad.loaded + .image-wrapper::before {
  display: none;
}

/* Image Styling */
.image-wrapper img {
  width: 100%;
  height: 200px; /* Maintain fixed height */
  object-fit: cover; /* Crops image while maintaining aspect ratio */
  opacity: 1; /* Start hidden */
  transition: opacity 1s ease-in-out;
}

/* Fade-in effect when Lozad loads image */
.lozad.loaded {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

/* Loader Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* Register Page  */

.registration-form{
  background-color: #f8f9fa;

}
.register-container {
  max-width: 550px; /* Increased width */
  margin: 50px auto;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.form-control {
  font-size: 1rem; /* Increased font size */
  padding: 10px; /* Better spacing */
}
.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.mb-3 input{
  width:100%;
}

.register-submit{
  width:30%;
}

/* Login Page */

.login-form{
  background-color: f8f9fa;
}

.login-container {
  max-width: 450px; /* Match register page */
  margin: 60px auto;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.form-control {
  font-size: 1rem;
  padding: 10px;
}
.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


/* Products page */

.product-card {
  height: 480px; /* Ensures uniform card height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  background: white;
  overflow: hidden; /* Prevents content from spilling out */
}

/* Clearfix */
.product-card::after {
  content: "";
  display: table;
  clear: both;
}

.product-image {
  height: 200px; /* Ensures uniform height */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f8f8f8;
  border-radius: 5px;
}

/* Set a placeholder size before Lozad loads the image */
.product-image img {
  width: 100%;
  height: 200px; /* Fix height to prevent shifts */
  object-fit: cover; /* Ensures images don’t stretch */
  opacity: 1; /* Hide unloaded images */
  transition: opacity 0.3s ease-in-out;
}

/* Show the image once Lozad loads it */
.product-image img.loaded {
  opacity: 1;
}

.placeholder {
  background: 'loading-spinner.gif';
  background-size: contain;
  min-width: 100px; /* Adjust according to your layout */
  min-height: 100px;
}

img {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

img.loaded {
  opacity: 1;
}


/* Product details */
.product-details {
  flex-grow: 1;
  text-align: center;
  padding: 10px;
  overflow: hidden;
}

/* Fix button alignment inside the card */
.product-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto; /* Pushes buttons to the bottom */
}

/* Ensure buttons fit inside the card */
.product-buttons .btn {
  flex: 1;
  white-space: nowrap;
  padding: 10px 5px;
  font-size: 14px;
}