/* public_html/assets/css/style.css */
body { font-family: sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; }
.container { max-width: 1200px; margin: auto; }
h1 { text-align: center; color: #333; }

/* ট্যাব ডিজাইন */
.filter-tabs { text-align: center; margin-bottom: 30px; }
.tab-btn { background: #fff; border: 1px solid #ddd; padding: 10px 20px; margin: 5px; cursor: pointer; border-radius: 5px; font-size: 16px; }
.tab-btn.active { background-color: #007bff; color: white; border-color: #007bff; }

/* গ্রিড ডিজাইন */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.portfolio-item { aspect-ratio: 1 / 1; /* 1:1 রেশিও */ overflow: hidden; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); cursor: pointer; position: relative; }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.portfolio-item:hover img { transform: scale(1.05); }
.portfolio-item .overlay { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); color: white; padding: 10px; text-align: center; opacity: 0; transition: opacity 0.3s ease; }
.portfolio-item:hover .overlay { opacity: 1; }

/* মডাল (লাইবক্স) ডিজাইন */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); }
.modal-content { margin: auto; display: block; max-width: 80%; max-height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.close-btn { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; }