×
Title:
Category:
Dimensions:
Size:
Download
Explore Top Regional Images
Explore Top Cities of Mumbai Region
Mumbai
Thane
Kalyan
Don’t have an account?
Sign up
Account Created
/* ================= CTA ================= */
.ss-cta{
text-align:center;
padding:90px 20px;
}
.ss-cta a{
display:inline-block;
margin-top:16px;
padding:14px 30px;
background:#db3232;
color:#fff;
border-radius:999px;
text-decoration:none;
font-weight:600;
}
/* 🔥 REUSE HOME CTA BUTTON STYLE EXACTLY */
.ss-cta-btn{
display:inline-block;
padding:14px 30px;
background:#db3232;
color:#fff;
border-radius:999px;
text-decoration:none;
font-weight:600;
font-size:15px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
cursor:pointer;
}
/* SAME CLICK ANIMATION AS EXPLORE CATEGORIES / CITIES */
#exploreGalleryBtn:active{
transform: scale(0.96);
transition: transform 0.15s ease;
}
/* ================= RESPONSIVE ================= */
@media (max-width:768px){
.ss-hero h1{ font-size:36px; }
.ss-search{ flex-direction:column; }
.ss-search button{ width:100%; }
}
/* ================= PAGE LEAVE TRANSITION ================= */
.ss-home{
transition: opacity 0.45s ease, transform 0.45s ease;
}
.ss-home.ss-leave{
opacity: 0;
transform: translateY(-10px);
}
/* ================= EXPLORE MORE BUTTON ================= */
.explore-more-wrap{
width:100%;
display:flex;
justify-content:center;
margin:40px 0 0;
}
.explore-btn:active{
transform:scale(0.96);
}
a.explore-btn{
background:#db3232 !important;
color:#ffffff !important;
text-decoration:none !important;
border:none !important;
transition: transform 0.15s ease;
}
a.explore-btn:hover,
a.explore-btn:focus,
a.explore-btn:visited{
background:#db3232 !important;
color:#ffffff !important;
}
a.explore-btn:active{
transform: scale(0.96);
}
/* ================= LOGIN BUTTON ================= */
#loginBtn{
padding:10px 18px;
border-radius:999px;
border:none;
background:#db3232;
color:#fff;
font-weight:600;
cursor:pointer;
transition:opacity .25s ease, transform .15s ease;
}
#loginBtn:hover{
opacity:.9;
}
#loginBtn:active{
transform:scale(.96);
}
/* ================= PROFILE BUTTON ================= */
#profileBtn{
width:42px;
height:42px;
border-radius:50%;
border:none;
background:#db3232;
color:#fff;
cursor:pointer;
display:none;
position:relative;
transition:transform .15s ease, box-shadow .25s ease;
}
#profileBtn:hover{
box-shadow:0 8px 18px rgba(219,50,50,.35);
}
#profileBtn:active{
transform:scale(.9);
}
#profileBtn .profile-letter{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -46%);
font-size:16px;
font-weight:700;
pointer-events:none;
}
/* ================= LOGIN MODAL ================= */
#loginModal input{
border:1px solid #ddd;
border-radius:8px;
font-size:14px;
}
#loginModal button{
cursor:pointer;
}
/* ================= DASHBOARD ================= */
.dashBtn{
width:100%;
padding:10px 14px;
border:none;
border-radius:999px;
background:#e5e5e5;
color:#333;
text-align:left;
font-size:14px;
font-weight:500;
cursor:pointer;
transition:background .25s ease, color .25s ease, transform .15s ease;
}
.dashBtn:not(.active){
background:#e5e5e5 !important;
color:#333 !important;
}
.dashBtn:hover{
background:#dcdcdc;
}
.dashBtn.active{
background:#db3232 !important;
color:#fff !important;
}
.dashBtn:active{
transform:scale(.97);
}
/* LOGOUT / CLOSE */
.dashBtn.danger,
#closeDashboard{
background:#fff !important;
color:#333 !important;
border:2px solid #db3232;
}
/* ================= DASHBOARD RESPONSIVE ================= */
@media (max-width:768px){
#profileDashboard > div > div{
width:95% !important;
height:90% !important;
flex-direction:column;
}
}
/* ================= LIGHTBOX ================= */
.lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
display:none;
align-items:center;
justify-content:center;
z-index:100001;
}
.lightbox-box{
background:#fff;
border-radius:16px;
max-width:900px;
width:92%;
padding:22px;
display:grid;
grid-template-columns:1.2fr 1fr;
gap:22px;
position:relative;
}
.lightbox-box img{
width:100%;
border-radius:12px;
}
.lb-close{
position:absolute;
top:14px;
right:18px;
font-size:28px;
cursor:pointer;
}
.lb-actions{
display:flex;
gap:12px;
margin-top:14px;
}
.lb-download{
background:#db3232;
color:#fff;
padding:10px 18px;
border-radius:999px;
text-decoration:none;
font-weight:600;
}
.lb-fav{
width:44px;
height:44px;
border-radius:50%;
border:2px solid #db3232;
background:#fff;
cursor:pointer;
}
.lb-fav::before{
content:”♡”;
font-size:20px;
color:#db3232;
}
.lb-fav.active::before{
content:”♥”;
}
/* animation */
.lightbox{
opacity:0;
pointer-events:none;
transition:opacity .35s ease;
}
.lightbox.show{
opacity:1;
pointer-events:auto;
}
/* ===============================
GALLERY-STYLE LIKE BUTTON
=============================== */
.lb-actions{
display:flex;
gap:14px;
align-items:center;
}
/* HEART BUTTON BASE */
.lb-fav{
width:46px;
height:46px;
min-width:46px;
border-radius:50%;
border:2px solid #db3232;
background:#ffffff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:
transform 0.15s ease,
box-shadow 0.25s ease;
}
/* OUTLINE HEART */
.lb-fav::before{
content:”♡”;
font-size:22px;
color:#db3232;
line-height:1;
}
/* FILLED HEART */
.lb-fav.active::before{
content:”♥”;
color:#db3232;
}
/* HOVER */
.lb-fav:hover{
box-shadow:0 6px 14px rgba(219,50,50,0.35);
}
/* CLICK PRESS */
.lb-fav:active{
transform:scale(0.92);
}
/* 🚫 FORCE WHITE BACKGROUND (NO RED FILL EVER) */
.lb-fav,
.lb-fav:hover,
.lb-fav:active,
.lb-fav.active{
background:#ffffff !important;
}
/* ===============================
DASHBOARD FAVORITE REMOVE BUTTON
=============================== */
.favorite-card{
position:relative;
}
/* ===============================
DASHBOARD FAVORITE REMOVE BUTTON (FIXED CIRCLE)
=============================== */
.favorite-card{
position:relative;
}
.favorite-card .fav-remove-btn{
position:absolute;
top:8px;
right:8px;
width:32px;
height:32px;
min-width:32px;
min-height:32px;
border:none;
border-radius:50%;
background:#db3232;
color:#fff;
font-size:18px;
font-weight:700;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
padding:0; /* 🔥 IMPORTANT */
cursor:pointer;
opacity:0;
transform:scale(0.85);
pointer-events:none;
box-shadow:0 6px 14px rgba(219,50,50,0.35);
transition:
opacity 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
/* show on hover */
.favorite-card:hover .fav-remove-btn{
opacity:1;
transform:scale(1);
pointer-events:auto;
}
/* hover */
.favorite-card .fav-remove-btn:hover{
box-shadow:0 10px 22px rgba(219,50,50,0.45);
}
/* click */
.favorite-card .fav-remove-btn:active{
transform:scale(0.9);
}
/* remove animation */
.favorite-card.removing{
opacity:0;
transform:scale(0.92) translateY(8px);
transition:0.35s ease;
}
CITY SECTION – FULL TYPOGRAPHY & POSITION CONTROL
====================================================== */
/* ===== MAIN TITLE ===== */
.city-title{
/* text alignment */
text-align: center; /* left | center | right */
/* sizing */
font-size: 50px; /* ⬅ change title size */
line-height: -5; /* ⬅ line spacing */
/* spacing */
margin-top: 100px;
margin-bottom: 120px;
/* width & positioning */
max-width: 1200px; /* ⬅ control line width */
margin-left: auto;
margin-right: auto;
/* typography */
font-weight: 5;
letter-spacing: -2px; /* ⬅ letter spacing */
color: #111;
/* padding control */
padding-left: 20px;
padding-right: 20px;
}
/* ===== SUBTITLE ===== */
.city-subtitle{
/* alignment */
text-align: center; /* left | center | right */
/* sizing */
font-size: 50px; /* ⬅ subtitle size */
line-height: ; /* ⬅ line spacing */
/* spacing */
margin-top: 100px;
margin-bottom: 40pxpx;
/* width & positioning */
max-width: 900px;
margin-left: auto;
margin-right: auto;
/* typography */
font-weight: 100vw;
letter-spacing: -4px; /* ⬅ letter spacing */
color: #111;
/* padding */
padding-left: 20px;
padding-right: 20px;
}
.search-subtext{
text-align:center;
font-size:50px;
margin-top:50px;
margin-bottom:50;
color: #111;
font-weight:400;
letter-spacing:-3px;
}
/* ===== CTA MAIN TITLE – SAME CONTROLS AS CITY TITLE ===== */
.cta-title{
text-align:center;
font-size:50px;
line-height:1.1;
margin-top:50px;
margin-bottom:0px;
max-width:1200px;
margin-left:auto;
margin-right:auto;
font-weight:400;
letter-spacing:-4px;
color:#111;
padding-left:20px;
padding-right:20px;
}
/* ============================================================
UNIVERSAL CARD SYSTEM – Categories + Cities (ONE STYLE)
============================================================ */
/* UNIVERSAL GRID (3 cards per row) */
.ss-card-grid{
width:100%;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
padding:30px;
margin:0;
}
/* Mobile */
@media (max-width:900px){
.ss-card-grid{
grid-template-columns:1fr;
}
}
/* UNIVERSAL CARD (same for all cards) */
.ss-card{
position:relative;
width:100%;
aspect-ratio:16 / 9;
border-radius:10px; /* 🔥 NEW ROUNDED CORNERS */
overflow:hidden;
cursor:pointer;
background-size:cover;
background-position:center;
display:flex;
align-items:flex-end;
padding:24px;
transition:transform .35s ease, box-shadow .35s ease;
}
/* Hover effect */
/* CARD stays fixed — NO SCALE */
.ss-card{
transform: none !important;
transition: none !important;
}
/* IMAGE ZOOM ONLY */
.ss-card::after{
transform: scale(1);
transition: transform .35s ease-out;
}
.ss-card:hover::after{
transform: scale(1.06); /* subtle zoom in */
}
/* SOFT GRADIENT STAYS */
.ss-card::before{
/* keep your existing gradient */
}
/* TEXT stays perfectly fixed */
.ss-card span{
position:relative;
z-index:2;
}
/* Image zoom layer */
.ss-card::after{
content:””;
position:absolute;
inset:0;
background-image:inherit;
background-size:cover;
background-position:center;
z-index:0;
transform:scale(1);
transition:transform .35s ease;
}
.ss-card:hover::after{
transform:scale(1.08);
}
/* Gradient overlay */
.ss-card::before{
content:””;
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,0.55) 0%,
rgba(0,0,0,0.25) 20%,
rgba(0,0,0,0) 40%
);
z-index:1;
}
/* Text */
.ss-card span{
position:relative;
z-index:2;
font-size:30px;
font-weight:30px;
letter-spacing:-2px;
color:#fff;
text-transform:capitalize;
font-family:’Inter’, sans-serif;
line-height:;
}
.hero-banner{
width:100vw;
height:40vh;
background-image:url(‘https://countproo.com/wp-content/uploads/2026/06/be88d-dsc01877-m.jpg’); /* put one image */
background-size:cover;
background-position:center;
position:relative;
}
/* LOGIN BUTTON (same as before) */
#loginBtn{
padding:10px 18px;
border-radius:999px;
border:none;
background:#db3232;
color:#fff;
font-weight:600;
cursor:pointer;
}
/* PROFILE BUTTON (same as before) */
#profileBtn{
width:42px;
height:42px;
border-radius:50%;
border:none;
background:#db3232;
color:#fff;
cursor:pointer;
position:relative;
}
/* =====================================================
HERO — TAGLINE + SEARCH BAR (ONE COMPLETE CONTROL BLOCK)
===================================================== */
.hero-banner{
width:100vw;
height:40vh;
background-image:url(‘https://countproo.com/wp-content/uploads/2026/06/be88d-dsc01877-m.jpg’);
background-size:cover;
background-position:center;
position:relative;
}
/* WRAPPER */
.hero-search-box{
position:absolute;
top:45%; /* adjust vertical position */
left:50%;
transform:translate(-50%, -50%);
width:100%;
max-width:900px; /* controls total width */
padding:0 20px; /* side padding */
text-align:center;
}
/* TAGLINE ABOVE SEARCH */
.hero-tagline{
font-size:40px; /* SAME TYPO CONTROL */
font-weight:600;
line-height:2;
letter-spacing:-2px;
margin:0 0 28px 0; /* gap above search bar */
color:#fff;
text-shadow:0 6px 20px rgba(0,0,0,0.55);
font-family:’Inter’, sans-serif;
}
/* ROW LAYOUT */
.hero-search{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
}
/* === SEARCH INPUT (PERFECT REPLICA) === */
.hero-search input{
width:100%;
max-width:1000px;
padding:16px 28px; /* EXACT SAME PADDING */
background:#ffffff !important;
color:#111 !important;
border-radius:999px !important; /* FULL PILL */
border:2px solid #db3232 !important; /* RED STROKE */
font-size:16px !important;
font-weight:400;
outline:none !important;
box-shadow:none !important;
}
.hero-search input::placeholder{
color:#888 !important;
}
/* === BUTTONS (UNCHANGED ORIGINAL STYLE) === */
#loginBtn,
#profileBtn{
border-radius:999px !important;
background:#db3232 !important;
color:#fff !important;
font-weight:600 !important;
border:none !important;
cursor:pointer;
font-size:15px;
}
/* SECOND HERO IMAGE */
.second-hero{
width:100vw;
height:40vh;
margin-top:60px;
/* CHANGE IMAGE HERE */
background-image:url(‘https://countproo.com/wp-content/uploads/2026/06/431ac-dsc08550-1-1.jpg.jpeg’);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
×
Title:
Category:
Dimensions:
Size:
Download