img {
    pointer-events: none;
}

@media (hover: hover) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
    }
}

@media (min-width: 992px) {
    .widget-area {
        margin-top: -110px; /* Shifting the About Us section up */
        margin-left: 30px
    }
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: white;
    transition: opacity 0.3s ease;
}

.social-icons a:hover {
    background: #ffc107;
}

.facebook-bg { background-color: #3b5998; }
.twitter-bg { background-color: #000000; }
.linkedin-bg { background-color: #0077b5; }
.youtube-bg { background-color: #ff0000; }



/* footer product list */
.product-list li {
    position: relative;
    margin-bottom: 10px; /* Gap between the product list items */
}

/* Add some spacing for better readability */
.product-list li a {
    font-size: 16px;
    line-height: 2;
}



/* product card hover*/

/* Hover Effect for Card */
.product-card {
    transition: background-color 0.3s, color 0.3s;
}

.product-card:hover {
    background-color: #161942;
    color: #fff;
}

.product-card .card-title {
    background-color: #fff;
    color: #161942;
    font-size: 16px;
    text-align: center;
    padding: 12px;
    border-radius: 0;
    transition: background-color 0.3s, color 0.3s;
}

.product-card:hover .card-title {
    background-color: #161942;
    color: #fff;
}

.card-img-top {
    height: 300px; /* Adjust this value to your desired height */
    object-fit: cover; /* Ensures the image maintains aspect ratio without stretching */
    border-radius: 0;
}

.card {
    border: none; /* Removes the card border */
    border-radius: 0; /* Removes the rounded corners */
}


.cool-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #161942;
    position: relative;
    overflow: hidden;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
  }
  
  /* overlay layer */
  .cool-heading::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    color: #ffc107;
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.5s ease;
  }
  
  .cool-heading:hover::before {
    width: 100%;
  }