.pp-portfolio-items{display:flex;flex-wrap:wrap;gap:15px;margin-top: 60px;}
.pp-item{width:32.3%;cursor:pointer}
.pp-item img{width:100%;aspect-ratio: 1 / 0.7;background:#fff;object-fit:cover;}
.pp-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#F4F3EE;z-index:9999}
.pp-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%}
.pp-modal-container{position:relative;width:80%;height:80%;margin:auto;top:10%;background:#fff;display:flex;overflow:hidden}
.pp-modal-inner{display:flex;width:100%;height:100%;}
.pp-modal-left{flex:1;position:relative;background:#eee;background-color:#eee;display: flex;justify-content: center;}
.pp-modal-left img{max-width:100%;max-height:100%;margin: auto;}
.pp-modal-nav{position:absolute;bottom:20px;display:flex;align-items:center;gap:20px;font-weight:400; border-radius: 18px; background-color: #999;padding: 3px 10px;color:#fff;font-size:12px;margin: auto;left:auto;right:auto;}
.pp-modal-nav button{background:none;border:none;padding:0 10px;;cursor:pointer;background-color:transparent !important;color:#fff !important;border:none !important;}
.pp-modal-right{flex:1;padding:30px 50px 30px 30px;overflow-y:auto}
.pp-modal-close{position:absolute;top:5px;right:20px;font-size:40px;border:none;background:none;background-color:#000 !important;cursor:pointer;z-index:999;color:#fff !important;padding:0 8px !important;line-height:35px!important;border-color:#fff!important}
.pp-filter {
	background-color: transparent !important;
    color: var(--e-global-color-3e5a851) !important;
    color: rgb(119, 119, 119) !important;
    border: none !important;
	padding:0 !important;
	line-height:16px !important;
	font-size:14px!important;
	border-radius:0 !important;
}
.pp-filter.active {
	border-bottom: 1px solid #272223 !important;
}
.pp-portfolio-filter {
	text-align:right;
	margin:0 0 20px 0;
	display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 15px;
}
#pp-modal-title {
	font-family: "Juana Regular", Sans-serif;
    font-size: 44px;
    font-weight: 400;
    line-height: 1.1em;
    color: var(--e-global-color-text);
}
#pp-modal-desc {
	font-family: "Poppins", Sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--e-global-color-text);
}
.pp-item {
   cursor: pointer;
    overflow: hidden;
    position: relative;
}

.pp-item img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* Zoom effect */
.pp-item:hover img {
    transform: scale(1.15);
}

/* Optional: slight dark overlay effect */
.pp-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    transition: background 0.3s ease;
}

.pp-item:hover::after {
    background: rgba(0,0,0,0.2);
}
#pp-load-more {
	margin: 30px auto 0 auto;
    display: block;
}
@media (min-width: 768px) {
	.pp-portfolio-filter {
	margin:-55px 0 20px 0;
}
	#pp-load-more {
	margin: 50px auto 0 auto;
}
	.pp-modal-inner{background: linear-gradient(to right, #eee 47%, white 47%);}
}
.pp-modal-container {
        box-shadow: 0 8px 25px rgba(0,0,0,0.4); /* shadow effect */
        border-radius: 12px; 
}
@media (max-width: 992px) {
	.pp-item{width:47.7%;}
}
@media (max-width: 767px) {
	.pp-portfolio-items{margin-top: 20px;}
	.pp-portfolio-filter {
	text-align:center;
	    flex-wrap: wrap;
    justify-content: center;
   margin-bottom:10px;
	}
	.pp-item{width:100%;}
	.pp-modal-inner {
		flex-direction:column;
	}
	.pp-modal-container {
        box-shadow: 0 8px 25px rgba(0,0,0,0.4); /* shadow effect */
        border-radius: 12px;                     /* optional rounded corners */
        margin: 10px;                             /* smaller margin on mobile */
        width: auto;                              /* allow responsive width */
        height: auto;                             /* auto height */
		top:3% !important;
    }
	.pp-modal {
		overflow-y: scroll !important;
	}
	.pp-modal-left{
		    /*flex-direction: column;
    align-content: center;
    align-items: center;*/
	}
}

::-webkit-scrollbar-track {
  background: rgba(0,0,0,1);
  backdrop-filter: blur(5px);
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.4);
}
* {
  scrollbar-width: 10px;
  scrollbar-color: rgba(0,0,0,1) rgba(255,255,255,0.2);
}
::-webkit-scrollbar {
  width: 10px;
}
html {
  scroll-behavior: smooth;
}

.pp-modal-inner::-webkit-scrollbar {
  width: 8px;
}
.pp-modal-inner {
	scrollbar-width: 8px !important;
}