.mmain {
      margin-top: -19px;
    }

    .hh {
      font-size: 28px;
      text-align: center;
      margin-bottom: 10px;
    }

    .subtitle {
      text-align: center;
      color: #9a5ee4;
      font-weight: bold;
      letter-spacing: 2px;
    }

    /* Outer scroller frame */
    .scroller {
      position: relative;   /* anchors buttons */
      display: flex;
      overflow: hidden;
      width: 100%;
      white-space: nowrap;
    }

    .scroller-inner {
      display: flex;
      gap: 30px;
      will-change: transform;
    }

    .track {
      display: flex !important;
      flex-direction: row !important;
      gap: 30px;
      will-change: transform;
    }

    .photo-card {
      position: relative;
      flex: 0 0 auto;
      width: 320px;
      height: 420px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      background: #fff;
      transition: transform 0.3s ease;
    }
    .photo-card:hover { transform: scale(1.05); }
    .photo-card img {
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:top;
      display:block;
    }
    .photo-name {
      position: absolute;
      bottom:0;
      width:100%;
      padding:15px;
      text-align:center;
      background: rgba(0,0,0,0.6);
      color:#fff;
      font-size:18px;
      font-weight:bold;
      text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    }

    /* Arrow buttons */
    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      color: #fff;
      border: none;
      font-size: 30px;
      padding: 10px;
      cursor: pointer;
      border-radius: 50%;
      z-index: 10;
      user-select: none;
    }
    .nav-btn:hover { background: rgba(0,0,0,0.8); }
    .prev { left: 10px; }
    .next { right: 10px; }

    /* ===================== MEDIA QUERIES ===================== */
    @media (max-width: 992px) {
      .hh { font-size: 24px; }
      .photo-card { width: 250px; height: 340px; }
      .photo-name { font-size: 16px; padding: 12px; }
    }
    @media (max-width: 768px) {
      .hh { font-size: 22px; }
      .photo-card { width: 200px; height: 280px; }
      .photo-name { font-size: 15px; padding: 10px; }
      .track { gap: 20px; }
    }
    @media (max-width: 480px) {
      .hh { font-size: 20px; }
      .subtitle { font-size: 12px; letter-spacing: 1px; }
      .photo-card { width: 90%; max-width: 300px; height: 260px; margin: 0 auto; }
      .photo-name { font-size: 14px; padding: 8px; }
      .track { gap: 15px; }
    }
    
    
    
    
.heading {
	margin-top: 20px;
	font-size: 22px;
	font-weight: 600;
	color: #000;
}

.carousel {
	margin-top: 3%;
}

.carousel-cell {
	width: 60%;
	height: 450px;
	margin-right: 10px;
	border-radius: 10px;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
	transition: all 0.3s ease-in-out;
	filter: blur(4px) brightness(0.7);
}

.carousel-cell.is-selected {
	filter: blur(0px) brightness(1);
	transform: scale(1.05);
	z-index: 2;
}