/*

Theme Name:Mytheme2
Description:modren theme
Author:Tanveer Hussain
Version: 1.1.2
Author URI: touchtoshop.com

*/



.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: .75rem;
}

.icon-square {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
}

.text-shadow-1 {
    text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
}

.text-shadow-2 {
    text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25);
}

.text-shadow-3 {
    text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}

.card-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.feature-icon-small {
    width: 3rem;
    height: 3rem;
}

.card {
    position: relative;
    /* Ensure the card is the reference for absolute positioning */
}

.card-img-top {
    display: block;
    /* Ensures the image is treated as a block-level element */
    width: 100%;
}

.hide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    position: absolute;
    bottom: 10px;
    /* Position it 10px from the bottom of the image */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    width: 90%;
    /* Adjust width as needed */
    text-align: center;
    z-index: 10;
    /* Ensure it appears above other elements */
}

.heart-btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    position: absolute;
    top: 10px;
    /* Position it 10px from the top */
    right: 10px;
    /* Position it 10px from the right */
    z-index: 10;
    /* Ensure it appears above other elements */
}
.img1{
    opacity: 1;
    visibility: visible;
    display: block;
}
.img2{
    opacity: 0;
    visibility: hidden;
    display: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
body{
    font-family: "Inter",sans-serif;
}
.form-control {
    background-color: #e8e9e9;
}
.product:hover .hide,
.product:hover .heart-btn{
    opacity: 1;
    visibility: visible;
    display: block;
}
.product:hover .img2 {
    opacity: 1;
    visibility: visible;
    display: block;
}
.product:hover .img1 {
    display: none;
}
.product:hover .carthover{
    color: white;
}
.product:hover .form-control {
    background-color: #0d6efd;
}
.product:hover .bg-body-tertiary {
    background-color: #0d6efd;
    border: 1px solid black;
    color: white;
}
.btn-outline-primary {
    border: var(--bs-border-width) solid var(--bs-border-color);
}
.product:hover .btn-outline-primary {
    background-color: #0d6efd;
    color: white;
}
.product:hover .link-body-emphasis {
    /* background-color: #0d6efd; */
    color: white;
}
.card-body {
    padding-top: 10px;
    position: relative;
    /* Ensure there's enough space for the content below the image */
}