/* ================= GLOBAL ================= */
/* ================= CATEGORY SECTION HEADER ================= */
.section-header-box {
    text-align: left;
    padding-left: 20px;
    border-left: 4px solid #D4A017; /* Logo Gold Accent */
    /* margin-bottom: 40px; */
    margin-left: 10px;
}

.section-subtitle {
    font-family: 'Montserrat', sans-serif;
    color: #D4A017; /* Mustard Gold from Logo */
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 12px;
    font-weight: 700;
    margin: 0;
}

.section-title-main {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(30px, 4vw, 50px);
    color: #1A2B3C; /* Navy Blue from Logo */
    font-weight: 700;
    line-height: 1.1;
}

.section-title-main span {
    color: #D4A017;
    font-style: italic;
    font-weight: 400;
}

/* ================= CATEGORY SECTION HEADER ================= */
.section-header-box {
    text-align: left;
    padding-left: 20px;
    border-left: 4px solid #D4A017; /* Logo Gold Accent */
    margin-bottom: 40px;
    margin-left: 10px;
}

.section-subtitle {
    font-family: 'Montserrat', sans-serif;
    color: #D4A017; /* Mustard Gold from Logo */
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 12px;
    font-weight: 700;
    margin: 0;
}

.section-title-main {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(30px, 4vw, 50px);
    color: #1A2B3C; /* Navy Blue from Logo */
    font-weight: 700;
    line-height: 1.1;
}

.section-title-main span {
    color: #D4A017;
    font-style: italic;
    font-weight: 400;
}

/* ================= ACCORDION LAYOUT (4+2) ================= */

/* Container ki height fixed rakhenge */
.category-accordion-wrapper {
    height: 650px; 
    width: 100%;
    display: flex;
    gap: 15px;
}

/* LEFT CHILD: Horizontal Group (4 items) */
.left-accordion-group {
    flex: 3.5; 
    display: flex;
    gap: 15px;
}

/* RIGHT CHILD: Vertical Group (2 items stacked) */
.right-accordion-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Aapka original cat-item CSS */
.cat-item {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: pointer;
    transition: .8s cubic-bezier(.2,1,.3,1);
}

/* Horizontal expansion logic (Left side) */
@media(min-width:992px){
    .left-accordion-group .cat-item:hover {
        flex: 2.5; 
    }
    
    /* Vertical expansion logic (Right side) */
    .right-accordion-group .cat-item:hover {
        flex: 2.2; /* Height mein expand hoga vertical group ke andar */
    }
}

/* Original Image styling */
.cat-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .8s ease;
}

.cat-item:hover img { 
    transform: scale(1.05); 
}

/* Overlay & Titles - Matched to Logo Navy */
.cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 43, 60, 0.9) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 40px;
}

.cat-title {
    color: #fff;
    font-family: 'Cinzel', serif;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Hover Content - Matched to Logo Gold */
.hover-content {
    max-height: 0;
    opacity: 0;
    color: #D4A017; 
    overflow: hidden;
    transition: .5s ease;
}

.cat-item:hover .hover-content {
    max-height: 200px;
    opacity: 1;
    margin-top: 15px;
}

/* Button Styling - Matched to Logo Theme */
.btn-cat {
    display: inline-block;
    border: 1px solid #D4A017;
    color: #fff;
    padding: 10px 25px;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: .3s;
}

.btn-cat:hover { 
    background: #D4A017; 
    color: #1A2B3C; 
}

/* ================= MOBILE RESPONSIVE ================= */
@media(max-width:991px){
    .category-accordion-wrapper { 
        height: auto; 
        flex-direction: column;
    }
    .left-accordion-group, .right-accordion-group { 
        flex-direction: column !important; 
        flex: none;
        width: 100%;
    }
    .cat-item { 
        height: 350px; 
    }
}
/* ================= NAVBAR ================= */
.navbar {
  padding: 0;
  background: #fff !important;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
}

.navbar-brand {
  font-size: 18px;
  letter-spacing: 2px;
  padding: 20px 40px;
  border-right: 1px solid #e0e0e0;
}

/* 👇 IMPORTANT CHANGE */
.navbar-nav {
  margin-left: auto;   /* push menu to right */
  margin-right: 0;
}

.navbar-nav .nav-item {
  border-left: 1px solid #e0e0e0;
}

.nav-link {
  font-size: 11px !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 28px 30px !important;
  color: #555 !important;
  transition: 0.3s;
}

.nav-link:hover {
  color: #e6a100 !important;
  background: #fafafa;
}

/* Social Icons Right Side */
.social-container {
  padding: 0 40px;
  display: flex;
  gap: 20px;
  border-left: 1px solid #e0e0e0;
  margin-left: 0;
}

.social-icon {
  font-size: 14px;
  color: #888;
  text-decoration: none;
  transition: .3s;
}

.social-icon:hover {
  color: #e6a100;
}

.dropdown-menu {
  border-radius: 0;
  border: 1px solid #e0e0e0;
  padding: 0;
  margin-top: 0;
  box-shadow: 0 5px 15px rgba(0,0,0,.05);
}

.dropdown-item {
  font-size: 11px;
  padding: 12px 25px;
  text-transform: uppercase;
  border-bottom: 1px solid #f2f2f2;
}

/* Desktop Hover Fix */
@media(min-width:992px){
  .dropdown:hover .dropdown-menu { 
    display: block; 
  }
}


/* ================= HERO ================= */
.hero {
  height: 85vh;
  position: relative;
  margin-top: 75px;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}

/* ================= CATEGORY ================= */
.category-section {
  padding: 10px 0;
  background:#fff;
}

.category-accordion {
  display: flex;
  gap: 15px;
  height: 600px;
}

.cat-item {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  transition: .8s cubic-bezier(.2,1,.3,1);
}

@media(min-width:992px){
  .cat-item:hover {
    flex: 2.8;
  }
}

.cat-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.8s ease;
}

.cat-item:hover img {
  transform:scale(1.05);
}

.cat-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 60%);
  display:flex;
  align-items:flex-end;
  padding:40px;
}

.cat-title {
  color:#fff;
  font-weight:300;
  letter-spacing:3px;
  text-transform:uppercase;
}

.hover-content {
  max-height:0;
  opacity:0;
  color: #999;
  overflow:hidden;
  transition:.5s ease;
}

.cat-item:hover .hover-content {
  max-height:200px;
  opacity:1;
  margin-top:15px;
}

.btn-cat {
  display:inline-block;
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
  padding:10px 25px;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:none;
  transition:.3s;
}

.btn-cat:hover {
  background:#fff;
  color:#000;
}
/* ================= BENTO GRID REFINED ================= */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 320px;
  gap: 15px;
}

.bento-item {
  position: relative;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.bento-item img {
  /* width: 100%; */
  /* height: 100%; */
  object-fit: cover; /* Image area cover karegi */
  transition: .8s cubic-bezier(0.2, 1, 0.3, 1);
}
/* Jo badi image (Luxury Estate) pehle wide thi, usse ab Right me shift karenge */
.wide-item-right { 
    grid-column: 2 / span 3; /* Ye 2nd column se shuru hokar end tak jayegi */
    grid-row: span 2; 
}

/* Choti images ko Left me lane ke liye */
.left-stacked-item {
    grid-column: 1; /* Ye pehle column me rahengi */
}

/* --- Camera Focus Lines (Top-Left & Bottom-Right) --- */
.bento-item::before,
.bento-item::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 70%;
  border: 2px solid #D4A017; /* Logo Gold Color */
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 2;
  pointer-events: none;
}

/* Top Left Corner */
.bento-item::before {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
  transform: translate(-10px, -10px);
}

/* Bottom Right Corner */
.bento-item::after {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
  transform: translate(10px, 10px);
}

/* --- Hover State --- */
.bento-item:hover img {
  transform: scale(1.08);
}

.bento-item:hover::before {
  opacity: 1;
  transform: translate(25px, 25px); /* Hover par andar snap hoga */
}

.bento-item:hover::after {
  opacity: 1;
  transform: translate(-25px, -25px); /* Hover par andar snap hoga */
}

/* Overlays aur text ko hide karne ke liye (agar HTML mein hain) */
.bento-overlay {
  display: none !important;
}

/* ================= MOBILE RESPONSIVE (2-Column Grid) ================= */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 Columns on Phone */
    grid-auto-rows: 200px !important; /* Compact height for mobile */
    gap: 8px !important;
  }

  /* Reset spans for mobile so they look uniform */
  .wide, .tall, .talltwo, .full-width-base {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  
 
  .bento-item::before, .bento-item::after {
    width: 50px;
    height: 50px;
  }
}

/* Grid Layout Helpers */
.tall { grid-row: span 2; }
.talltwo { grid-row: span 2; grid-column: span 2; }
.wide { grid-column: span 3; grid-row: span 2; }
.widetwo { grid-column: span 3; grid-row: span 2; }
.full-width-base { grid-column: span 4; grid-row: span 2; }

/* Container check */
.bento-img-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

/* Aapki request ke mutabik Image hamesha Cover rahegi */
.bento-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Image area cover karegi */
    display: block;
    transition: transform 0.8s ease;
}

/* --- Hover State --- */
.bento-item:hover .corner {
    opacity: 1;
    transform: translate(25px, 25px); /* Corners andar snap honge */
}

/* Adjusting each corner's snap direction */
.bento-item:hover .tl { transform: translate(25px, 25px); }
.bento-item:hover .tr { transform: translate(-25px, 25px); }
.bento-item:hover .bl { transform: translate(25px, -25px); }
.bento-item:hover .br { transform: translate(-25px, -25px); }

.bento-item:hover .focus-dot {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
}

/* Image slight zoom for luxury feel */
.bento-item:hover img {
    transform: scale(1.08);
}
.seo-card {
  background:#f9f9f9 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  text-align:center;
  border:1px solid #eee;
}




/* ================= RESPONSIVE ================= */
@media(max-width:991px){
  .category-accordion {
    flex-direction:column;
    height:auto;
  }

  .cat-item {
    height:400px;
  }

  .bento-grid {
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:250px;
  }

  .wide,
  .widetwo,
  .full-width-base {
    grid-column:span 2;
  }

  .tall {
    grid-row:span 1;
  }

  .bento-overlay {
    opacity:1;
    background:rgba(0,0,0,.4);
  }
}

@media(max-width:576px){
  .bento-grid {
    grid-template-columns:1fr;
  }
}

/* --- MOBILE SIDE SLIDE MENU --- */
.mobile-slide-nav {
    position: fixed;
    top: 0;
    left: -100%; /* Hidden off-screen to the left */
    width: 280px; /* Width of the drawer */
    height: 100vh;
    background: #fff;
    z-index: 1100;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth Slide */
    box-shadow: 10px 0 30px rgba(0,0,0,0.1);
}

.mobile-slide-nav.active {
    left: 0; /* Slide into view */
}

/* Overlay Background */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1900;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Slide Menu Styling */
.mobile-slide-nav {
    position: fixed;
    top: 0;
    left: -100%; /* Default hidden position */
    width: 300px;
    height: 100vh;
    background: #fff;
    z-index: 2000;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 10px 0 30px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.mobile-slide-nav.active {
    left: 0; /* Slide in to the screen */
}

/* Links Styling inside Mobile Menu */
.mobile-link {
    text-decoration: none;
    color: #1a1a1a !important;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 400;
}

.mobile-sub-link {
    text-decoration: none;
    color: #888 !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1.5px;
}

.mobile-menu-header {
    padding: 20px 25px;
    border-bottom: 1px solid #f0f0f0;
}

/* --- COMPACT & BALANCED FOOTER --- */
.main-footer {
    border-top: 1px solid #e0e0e0;
    margin-top: 50px;
    background: #fff;
    width: 100%;
}

.footer-col {
    border-right: 1px solid #e0e0e0;
    min-height: 240px;
}

/* Right side space manage karne ke liye padding kam ki hai */
.footer-inner {
    padding: 25px 20px;
}

/* Content ko thoda aur tight karne ke liye text limits */
.footer-text {
    font-size: 11px;
    color: #777;
    line-height: 1.7;
    max-width: 250px; /* Text ko bikharne se rokega */
}

.footer-heading {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 22px;
}

.footer-links a {
    font-size: 10.5px;
    letter-spacing: 1.2px;
    color: #666;
    margin-bottom: 7px;
    display: inline-block;
}

/* Social Icons tight gap */
.footer-social-box {
    display: flex;
    gap: 15px; /* Space tightened */
    margin-top: 12px;
}

.social-link {
    color: #222;
    font-size: 16px;
}

.footer-bottom {
    border-top: 1px solid #e0e0e0;
    padding: 15px 15px;
}

/* Mobile responsive fixes */
@media (max-width: 991px) {
    .footer-col {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        min-height: auto;
    }
    .footer-inner { padding: 30px 20px; }
    .footer-text { max-width: 100%; }
}/* Footer text ki width badha di taaki gap kam lage */
.footer-text {
    font-size: 11px;
    color: #777;
    line-height: 1.8;
    max-width: 350px; /* Text ko thoda phelne diya */
}

/* Footer Bottom ko center ya properly align karein */
.footer-bottom {
    border-top: 1px solid #e0e0e0;
    padding: 20px 35px;
    background: #fff;
}

/* Social icons gap adjustment */
.footer-social-box {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.footer-logo-text {
    letter-spacing: 2px;
    font-size: 16px;
}

.about-studio-section {
    background: #fafafa;
}

.about-studio-section h2 {
    font-size: 38px;
    line-height: 1.3;
}

.about-studio-section p {
    font-size: 15px;
    line-height: 1.9;
}

.about-image-wrapper {
    overflow: hidden;
}

.about-image-wrapper img {
    transition: 0.6s ease;
}

.about-image-wrapper img:hover {
    transform: scale(1.05);
}
/* Palette: Dark Blue (#000C18) & Gold (#FF9F1C) */

.luxury-nav-fixed {
    /* background-color: #000c18 !important; Ultra Dark Blue */
    border-bottom: 2px solid #FF9F1C; /* Gold Line at bottom */
    padding: 0 !important;
    height: 80px;
    display: flex;
    align-items: center;
}

/* Brand Name Styling */
.navbar-brand-container {
    padding: 0 40px;
}
/* Brand Name Styling - Re-engineered for Luxury Logo look */
.luxury-brand-text {
    text-decoration: none;
    color: #000c18 !important; /* Aapka dark color */
    
    /* Change here: Option 1 (Cinzel) is highly recommended for Architecture */
    font-family: 'Cinzel', serif; 
    
    font-size: 28px; /* Slightly bigger for brand presence */
    font-weight: 700;
    letter-spacing: 4px; /* Increased spacing for premium feel */
    line-height: 0.9;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}


.luxury-brand-text span {
    font-family: 'Poppins', sans-serif; /* Sub-text should be clean */
    font-size: 12px;
    font-weight: 600;
    color: #D4A017 ;
    letter-spacing: 8px; /* Very wide spacing for that "Designer" look */
    margin-top: 6px;
    text-transform: uppercase;
}

/* Rest of your nav styling stays same */
.luxury-nav-fixed {
    border-bottom: 2px solid #D4A017;
    padding: 0 !important;
    height: 90px; /* Thoda height badhaya hai elegance ke liye */
    display: flex;
    align-items: center;
}
/* Menu Items */
.luxury-menu-list {
    margin: 0;
}

.nav-item.border-left-gold {
    border-left: 1px solid rgba(255, 217, 28, 0.4);
}

.nav-item.border-right-gold {
    border-right: 1px solid rgba(255, 210, 28, 0.4);
}

.luxury-link {
    color: #000c18 !important;
    font-size: 12px !important;
    letter-spacing: 2px;
    font-weight: 500;
    padding: 30px 35px !important;
    transition: all 0.3s ease;
}

.luxury-link:hover, .luxury-link.active {
    color: #D4A017 !important;
    background-color: rgba(255, 159, 28, 0.05);
}

/* Dropdown Customization */
.luxury-dropdown-box {
    /* background-color: #000c18; */
    border: 1px solid #D4A017;
    border-top: none;
    border-radius: 0;
    padding: 0;
}

.luxury-dropdown-box .dropdown-item {
    color: #000c18;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 12px 25px;
    border-bottom: 1px solid rgba(255, 240, 28, 0.1);
    text-transform: uppercase;
}

.luxury-dropdown-box .dropdown-item:hover {
    background-color: #D4A017;
    color: #000c18;
}

/* Mobile Toggler */
.custom-gold-toggler {
    border: none;
    padding-right: 20px;
}

.toggler-bar {
    display: block;
    width: 25px;
    height: 2px;
    background-color: #D4A017;
    margin: 6px 0;
}

/* --- PROJECT HERO REFINEMENT (NO PARAGRAPH) --- */
.project-hero-simple {
    padding: 30px 0 20px; /* Compact height */
    margin-top: 90px;
    position: relative;
    background: #fff;
    overflow: hidden;
    /* border-bottom: 1px solid #f5f5f5; */
}

/* Subtle Right-Aligned Watermark */
.hero-watermark {
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 7vw; 
    font-weight: 900;
    color: rgba(0, 0, 0, 0.02); /* Very light */
    letter-spacing: 15px;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    text-transform: uppercase;
}

.hero-flex-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Aligned to bottom line */
    position: relative;
    z-index: 1;
}

/* Left: Title (Slightly Smaller & Elegant) */
.hero-left {
    flex: 1;
}

.main-title-refined {
    font-family: 'Cinzel', serif;
    font-size: clamp(15px, 2vw, 20px); /* Professional balanced size */
    color: #000c18; /* Navy Blue */
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0;
}

.main-title-refined span {
    color: #D4A017; /* Gold */
    font-weight: 400;
    font-style: italic;
}


/* Right: Portfolio Label (Bold & Large) */
.hero-right {
    text-align: right;
}
@media (max-width: 768px) {
    .project-hero-simple {
        margin-top: 80px;
        padding: 20px 20px !important;
        overflow: hidden;
    }
}
.category-label-lg {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px; /* Large professional font */
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #D4A017;
    font-weight: 700;
    position: relative;
}

/* Optional: Underline for the label */
.category-label-lg::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: #D4A017;
    margin-left: auto;
    margin-top: 8px;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .hero-flex-layout {
        flex-direction: column-reverse; /* Portfolio label upar aa jayega */
        align-items: flex-start;
        text-align: left;
    }

    .hero-right {
        text-align: left;
        margin-bottom: 15px;
    }

    .category-label-lg {
        font-size: 16px;
        letter-spacing: 5px;
    }

    .category-label-lg::after {
        margin-left: 0;
    }

    /* 2 Column Mobile Grid */
    .bento-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}/* ================= MOBILE VIEW REFINEMENT ================= */
@media (max-width: 768px) {
    /* Pure section se padding hatana taaki image edge-to-edge ho */
    .portfolio-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Grid ko force karna single column mein */
    .bento-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important; /* Images ke beech ka gap */
    }

    /* Har item ko full width aur fix height dena */
    .bento-item {
        width: 100% !important;
        height: 400px !important; /* Isse sare box ek barabar dikhenge */
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    /* Sabse important: Image ko stretch hone se rokna */
    .bento-img-container, 
    .bento-img-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Ye image ko crop karega par stretch nahi hone dega */
        display: block;
    }

    /* Camera focus frames ko mobile ke liye adjust karna */
    .camera-focus-frame .corner {
        width: 30px;
        height: 30px;
    }
}
/* ================= TABLET GRID (768px to 1024px) ================= */
@media (min-width: 769px) and (max-width: 1024px) {
    .bento-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 Columns for Tablet */
        grid-auto-rows: 350px !important; /* Tablet ke liye ideal height */
        gap: 15px !important;
        padding: 0 20px !important;
    }

    /* Tablet par desktop ki 'wide' aur 'tall' sizing ko reset kar rahe hain */
    .wide, .tall, .talltwo, .wide-item-right, 
    .left-stacked-item, .full-width-base, .widethree {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
    
    /* Full width wali images ko force kar sakte hain */
    .full-width-base {
        grid-column: span 2 !important;
    }
}

/* ================= MOBILE GRID (Up to 768px) ================= */
@media (max-width: 768px) {
    .portfolio-section {
        padding: 0 !important;
    }

    .bento-grid {
        display: flex !important;
        flex-direction: column !important; /* Single column stack */
        gap: 8px !important; /* Images ke beech ka gap */
        padding: 0 !important;
    }

    .bento-item {
        width: 100% !important;
        height: 320px !important; /* Proper vertical height */
        margin-bottom: 0px !important;
        border-radius: 0 !important; /* Sharp corners like your reference */
    }

    /* Resetting all spans to 100% width on phone */
    .wide, .tall, .talltwo, .wide-item-right, 
    .left-stacked-item, .full-width-base, .widethree {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        width: 100% !important;
    }

    .bento-img-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Black bars hatane ke liye sabse zaruri */
        object-position: center;
    }
}