/* Product Cards Container */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 35px;
  padding: 40px;
  box-sizing: border-box;
  justify-items: center; /* centers items in their grid cells */
}


/* Individual Product Card */
.product-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    overflow: visible;
    transition: transform 0.3s, box-shadow 0.3s;
    max-width: 60vw;
    min-width: 300px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.product-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* Product Image */
.product-image {
    flex: 1.2;
    height: 78%;
    overflow:visible
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s, filter 0.4s;
}

.product-card:hover .product-image img {
    transform: scale(1.08);
}

/* Product Info */
.product-info {
    flex: 2;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-info h2 {
    margin: 0 0 10px 0;
    color: #0b2f4a;
}

.product-info p {
    margin: 0 0 15px 0;
    color: #333;
}

.product-info .button-primary {
    width: fit-content;
}

/* Responsive widths */
@media (max-width: 1200px) {
    .product-image {
        flex: 1;
    }
    .product-info {
        flex: 2;
    }
}

@media (max-width: 992px) {
    .product-image {
        flex: 1;
    }
    .product-info {
        flex: 1;
    }
}

@media (max-width: 868px) {
    .products {
        gap: 55px;
        padding: 0
    }
    .product-card {
        flex-direction: column;
        height: 60vh;
        max-width: 90%;
    }

    .product-image {
        height: 10vh;
        
    }
 
    .product-info {
        flex: 2;
        align-items: center;
        justify-content: flex-start;
    }
    .product-image {
        height: 35vh;
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .product-card {
        height: 68vh;
    }
    .products {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 350px) {
    .product-card {
        height: 72vh;
    }
    .products {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}