:root {
    --primary-color: #EF0000;
    --orange: #ED6C31;
    --Green: #65BC7A;
    --black: #484848;
    --bg1: #F5F7F9;
    --bg2: #F5F5F5;
    --bg3: #EFEFEF;
    --bg4: #FDFDFD;
    --bg5: #F7F7F7;
    --bg6: #F3F3F3;
    --title: #333333;
    --blue: #F5FCFF;
    --Light_green: #E6F4F4;
  }
h3:hover{
    color: green;
}
p{
    font-size: 18px;
}

/* For the hero image */

.background-image {
    position: relative;
    background: url('images/solutions/mould_fabrication.jpg') no-repeat center center;
    background-size: cover;
    height: 50vh;
    width: 98vw;
    color: white;
    margin-left: -12px;
}

.background-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.text-overlay {
    position: relative;
    z-index: 2;
    text-align: top;
    transform: translateY(-50%);
}

.text-overlay h3 {
    opacity: 0;
    transform: translateX(-100%); /* Slide in from the left */
    transition: opacity 1s ease, transform 2s ease;
    margin-left: 50px;
    margin-top: -150px;
}

.text-overlay p {
    opacity: 0;
    transform: translateY(50px); /* Slide in from the bottom */
    transition: opacity 1s ease, transform 1s ease;
    margin-left: 100px;
    margin-top: 30px;
}

/* Trigger transition on page load */
.background-image:hover .text-overlay h3 {
    opacity: 1;
    transform: translateX(0); /* Reset to normal position */
}

.background-image:hover .text-overlay p {
    opacity: 1;
    transform: translateY(0); /* Reset to normal position */
}

/* End of the hero image */

/* Content starts */

.img1{
    height: 340px;
}
.points{
    margin-left: 1px !important;
}

/* End of the content */

/* Table starts */
  
  table {  
    th, td {
      padding:.19em .5em;
      text-align:center;
      white-space: nowrap; /* Keep text in a single line */
      &:nth-child(2) {
        text-align:center;
        background-color: lightgray;
      }
      &:nth-child(4) {
        background-color: lightgray;
    }
    &:nth-child(6) {
        background-color: lightgray;
    }
}
    td {
      background-color:gainsboro;    
    }
    thead th {
      background-color:darkblue !important;
      color:#fff;
    }
  }
  
  .zigzag {
    border-collapse:separate;
    border-spacing:.20em 1em;
    /* tbody tr:nth-child(odd) {
      transform:rotate(1deg);
    }
    thead tr,
    tbody tr:nth-child(even) {
      transform:rotate(-0.5deg);
    } */
  }
/* Add horizontal scroll on mobile */
.table-container {
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
  }
  
  @media (min-width:320px) and (max-width: 480px) {
    .table-container {
        overflow-x: scroll; 
        scrollbar-width: thin; 
        scrollbar-color: var(--Light-blue) #f1f1f1; 
    }
    .table-container .zigzag{
        margin-left: 0px !important;
    }
}
    .table-container .zigzag{
        margin-left: 200px;
    }



    /* .zigzag tbody tr {
        transition: transform 0.6s ease-in-out;
        transform-origin: center;
      }
      
      .zigzag tbody tr:nth-child(even) {
        animation: seeSawEven 3s infinite ease-in-out;
      }
      
      .zigzag tbody tr:nth-child(odd) {
        animation: seeSawOdd 3s infinite ease-in-out;
      }
      
      @keyframes seeSawEven {
        0%, 100% {
          transform: rotate(-1.5deg);
        }
        50% {
          transform: rotate(1.5deg);
        }
      }
      
      @keyframes seeSawOdd {
        0%, 100% {
          transform: rotate(1deg);
        }
        50% {
          transform: rotate(-1deg);
        }
      }
       */


/* End of the table */

/* General table styling */
.table-container1  {
    width: 60%;
    margin-left:160px;
}

.table-container1 table {
    width: 100%;
    border-collapse:separate;
    border-spacing: .2em .5em;
    text-align: left;
}

/* Header row styling */
thead tr {
    background-color: #333; /* Dark color for header */
    color: #fff;
}

th, td {
    padding: 10px;
    border: 1px solid #ccc;
}

/* Alternate row colors */
tbody tr:nth-child(odd) {
    background-color: #f2f2f2; /* Light gray for odd rows */
}

tbody tr:nth-child(even) {
    background-color: #e0e0e0; /* Slightly darker gray for even rows */
}

.table-container2  {
    width: 60%;
    margin-left:160px;
}

.table-container2 table {
    width: 100%;
    border-collapse:separate;
    border-spacing: .2em .5em;
    text-align: left;
}
.table3 table {
    width: 100%;
    margin-left: 100px;
    margin-top: 85px;
}
.table3 table th, td {
    padding: 0px 80px;
    /* transition: background-color 0.3s ease, transform 0.3s ease; */
}

.img2{
    height: 350px;
    margin-top: 90px;
    border-radius: 20px;
    box-shadow: 5px 6px 3px grey;

}

 /* animation starts */

 @keyframes appear {
    from {
      opacity: 0;
      transform: scale(0.5);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .zoom {
    animation: appear 5s linear;
    animation-timeline: view();
    animation-range: entry 0% cover 33%;
  }
  /* animation end */

/* Mobile view responsive starts */

@media (min-width:320px) and (max-width:480px){
    p{
        text-align: justify;
        font-size: 16px !important;
      }
      h2{
        font-size: 22px !important;
      }
      td, th{
        font-size: 16px !important;
       }
    .background-image{
        height:23%;
        width: 110%;
        margin-left: -15px;
    }
    .background-image img{
        height: 227px !important;
    }
    .text-overlay h3{
        font-size: 18px;
        margin-top: -105px;
        margin-bottom: 25px !important;
    }
    .text-overlay p {
        margin-top: 10px;
        font-size: 16px;
    }
    .table-container1 {
        margin-left: 90px !important;
    }
    .table-container2 {
        margin-left: 0px;
    }
    .table3 table{
        margin-top: 25px;
        margin-left: 80px;
    }
    .svg1{
        margin-left: 70px !important;
    }
    .img1{
        height: 260px;
    }
    .tables{
        margin-top: -80px;
    }
    .table1{
        margin-left: -40px;
    }
    .circle{
        margin-left: 0 !important;
    }
    .img2{
        height: 280px;
        margin-bottom: 20px;
    }
    .tons, .parts{
        margin-left: 32px;
    }
}
/* End of the Mobile view responsive */

/* Tablet view responsive starts */

@media (min-width:500px) and (max-width:1000px){
    .background-image{
        height: 30%;
        width: 100%;
    }
    .background-image img{
        height: 340px !important;
    }
    .svg1{
        margin-left: 200px;
    }
    .svg2{
        margin-left: 120px;
    }
    .table-container{
        margin-left: -223px;
    }
    .table3 {
        margin-left: -100px;
    }
}
/* End of the Tablet view responsive */

/* Laptop view responsive start */

@media (min-width:1000px){
    .social p{
        margin-top: 20px !important;
      }
    
  }
  
  /* Laptop view responsive end */