.product-image {
    object-fit: cover;
    /* You can adjust this height as needed */
    transition: object-fit 3s ease-in-out;
    /* Smooth transition */
    margin-top: 5px;
}

.product-image:hover {
    object-fit: contain;
}

/* Hide all products initially */
.product-card {
    display: none;
}

/* Show products based on filter */
.product-card.show {
    display: block;
}


body{
	margin:0;
	color:#6a6f8c;
	background:#c8c8c8;
	font:600 16px/18px 'Open Sans',sans-serif;
}

.login-box{
	width:100%;
	margin:auto;
	max-width:400px;
	min-height:470px;
	position:relative;
	background:url(https://images.unsplash.com/photo-1507208773393-40d9fc670acf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80) no-repeat center;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-snip{
	width:100%;
	height:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	background:rgba(0, 77, 77,.9);
}
.login-snip .login,
.login-snip .sign-up-form{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	transform:rotateY(180deg);
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-snip .sign-in,
.login-snip .sign-up,
.login-space .group .check{
	display:none;
}
.login-snip .tab,
.login-space .group .label,
.login-space .group .button{
	text-transform:uppercase;
}
.login-snip .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-snip .sign-in:checked + .tab,
.login-snip .sign-up:checked + .tab{
	color:#fff;
	border-color:#1161ee;
}
.login-space{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-space .group{
	margin-bottom:15px;
}
.login-space .group .label,
.login-space .group .input,
.login-space .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-space .group .input,
.login-space .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	background:rgba(255,255,255,.1);
}
.login-space .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-space .group .label{
	color:#aaa;
	font-size:12px;
}
.login-space .group .button{
	background:#1161ee;
}
.login-space .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-space .group label .icon:before,
.login-space .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-space .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-space .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-space .group .check:checked + label{
	color:#fff;
}
.login-space .group .check:checked + label .icon{
	background:#1161ee;
}
.login-space .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-space .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-snip .sign-in:checked + .tab + .sign-up + .tab + .login-space .login{
	transform:rotate(0);
}
.login-snip .sign-up:checked + .tab + .login-space .sign-up-form{
	transform:rotate(0);
}

*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}


.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.2);
}
.foot{
	text-align:center;
}
.card{
	width: 400px;
}

::placeholder{
color: #b3b3b3;
} 

@font-face {
    font-family: 'Arkan_GE SS';
    src: url('/fonts/NRT-Reg.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.kurdish-font {
    font-family: 'Arkan_GE SS', sans-serif;
}


/* Suggested Custom CSS (add to your project's CSS file) */

/* General Card Enhancements */
.custom-card {
    border: 1px solid #e0e0e0; /* Lighter border */
    border-radius: 0.375rem; /* Bootstrap's default border-radius */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background-color: #fff;
}

.custom-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12) !important;
}

.card-img-top-custom {
    border-top-left-radius: calc(0.375rem - 1px); /* Adjust for border */
    border-top-right-radius: calc(0.375rem - 1px);
    object-fit: cover;
    aspect-ratio: 4/3; /* Maintain aspect ratio for images */
}

.product-card .card-img-top-custom {
    max-height: 180px; /* Specific for product cards on main page */
}

.modal-card .card-img-top-custom {
    max-height: 150px; /* Specific for cards within modals */
}


/* Modal Styling */
.modal-header-styled {
    background-color: #f8f9fa; /* Light grey header */
    border-bottom: 1px solid #dee2e6;
}

.modal-header-styled .modal-title {
    font-weight: 500;
}

.modal-footer-styled {
    background-color: #f8f9fa; /* Light grey footer */
    border-top: 1px solid #dee2e6;
}

/* Card Content Styling */
.card-title-enhanced {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.card-subtitle-muted {
    font-size: 0.85rem;
    color: #6c757d; /* Bootstrap muted color */
    margin-bottom: 0.75rem;
}

.card-details-list {
    font-size: 0.9rem;
    padding-left: 0; /* Remove default ul padding */
    list-style: none; /* Remove default list style */
}
.card-details-list li {
    padding: 0.3rem 0;
    border-bottom: 1px dashed #eee; /* Subtle separator for list items */
}
.card-details-list li:last-child {
    border-bottom: none;
}
.card-details-list .detail-label {
    font-weight: 500;
    color: #495057;
}

.price-highlight {
    font-size: 1.2rem;
    font-weight: bold;
    color: #007bff; /* Or your primary theme color */
}

/* Clickable card indication */
.card-clickable {
    cursor: pointer;
}

/* Icon styling (if you use an icon library) */
.icon-prepend {
    margin-right: 0.5em;
}

/* Ensure rows in modals have consistent spacing for cards */
.modal-body .row > [class^="col-"] {
    margin-bottom: 1.5rem; /* Default bottom margin for cards in modal rows */
}