html {
    scroll-behavior: smooth;
    background-color: var(--bg-light) !important;
}
body{
    background-color: var(--bg-light) !important;
}

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box !important;
    font-family: 'Baloo 2', cursive; 
}
.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ff-poppins{
font-family: 'Poppins', sans-serif !important;
}
.ff-baloo{
    font-family: 'Baloo 2', cursive !important;
}
.my-btn-white{
    color: white !important;
    /* border-color: white !important; */
    /* border-radius: 999px; */

}
/* to remove btn,input outline */
/* .no-focus-style,
.no-focus-style:focus,
.no-focus-style:active,
.no-focus-style:focus-visible,
.no-focus-style.show {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;  
    background-color: inherit !important; 
    color: inherit !important;
} */

.no-focus-style,
.no-focus-style:focus,
.no-focus-style:active,
.no-focus-style:focus-visible,
.no-focus-style:hover,
.no-focus-style.show {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border-color: transparent !important;
}


/* home page css start */

/* about section */

/* image stairs */
.about-staircase-wrapper {
    /* height: 450px; */
    border-radius: 2px;
    overflow: hidden;
    /* box-shadow: 0 20px 40px rgba(0,0,0,0.1); */
    position: relative;
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
}

/* Staircase container */
.staircase-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Individual stair-step images */
.stair-img {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 16px;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.9);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Position each image in stair-step pattern */
.stair-1 {
    bottom: 10%;
    left: 8%;
    transform: rotate(-2deg);
}

.stair-2 {
    bottom: 25%;
    left: 25%;
    transform: rotate(2deg);
}

.stair-3 {
    bottom: 11%;
    left: 45%;
    transform: rotate(-2deg);
}

.stair-4 {
    bottom: 25%;
    right: 8%;
    transform: rotate(2deg);
}

/* Hover effect: 20% lift + scale */
.stair-img:hover {
    transform: translateY(-20%) scale(1.60) rotate(0deg) !important;
    box-shadow: 0 20px 45px rgba(0,0,0,0.4);
    z-index: 10;
    border-color: rgba(255,255,255,1);
}

/* CTA overlay same as before */
.cta-overlay {
    position: relative;
    z-index: 2;
    /* height: 100%; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: linear-gradient(135deg, rgba(2,79,253,0.9), rgba(0,110,253,0.9)); */
}

.cta-btn {
    color: #fff;
    background: var(--primary-color) !important;
    font-weight: 700;
    font-size: 1rem;
    border: none !important;
    /* box-shadow: 0 10px 30px rgba(255,255,255,0.3); */
    box-shadow: 1px 3px 0px var(--secondary-color);
    transition: all 0.3s ease;
    border-radius: 50px !important;
}

.cta-btn:hover {
    transform: translateY(-3px);
    /* box-shadow: 0 15px 40px rgba(255,255,255,0.4); */
    box-shadow: 1px 3px 0px var(--secondary-color);

}
.cta-btn2{
    color: #fff !important;
    background: var(--primary-color) !important;
    transition: all 0.3s ease;
}
.cta-btn2:hover,.cta-btn2:focus{
    background: var(--secondary-color) !important;
}
.shad-1-4{
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    /* box-shadow:0 1px 4px rgb(51 51 51 / 54%); */
}

/* card ke image ratio ke fix krne ke liye */
.card-cover{
  height: 180px;          /* fixed height: sab cards uniform */
  overflow: hidden;       /* crop */
  background: #f1f3f5;
}

.card-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crop + fill */
  object-position: center;
  display: block;
}

/* Mobile adjustments */
@media (max-width: 968px) {
    .about-staircase-wrapper {
        height: 250px;
        margin-top: 2rem;
    }
    
    .stair-img {
        width: clamp(130px,31vw,166px);
        height: clamp(130px,31vw,166px);
    }
}

/* home page css end */


.masonry-gallery {
    column-count: 4;
    column-gap: 1.25rem;
}

@media (max-width: 1200px) {
    .masonry-gallery { column-count: 3; }
}
@media (max-width: 768px) {
    .masonry-gallery { column-count: 2; }
}
@media (max-width: 576px) {
    .masonry-gallery { column-count: 1; }
}