/* Mobile Responsive Styles */
/* INDEX.HTML MODERN MOBILE STYLES */
@media (max-width: 768px) {
body{overflow-x:hidden;padding-top:60px;}
/* Perfect Modern Header */
.header{position:fixed;width:100%;top:0;left:0;z-index:1000;background:#fff;box-shadow:0 2px 15px rgba(0,0,0,0.1);}
.nav{flex-direction:row;justify-content:space-between;align-items:center;padding:10px 5%;height:60px;}
.logo{flex-shrink:0;}
.logo img{height:42px;width:auto;}
nav{display:none;}
.nav-btns{display:flex;gap:6px;flex-shrink:0;}
.nav-btns button{font-size:11px;padding:8px 14px;border-radius:20px;white-space:nowrap;}
.btn-outline{border-width:1.5px;}
.btn-primary{box-shadow:0 2px 8px rgba(169,31,78,0.25);}
/* Modern Hero Section */
.hero{padding:60px 0 40px;min-height:auto;}
.hero-grid{grid-template-columns:1fr;gap:40px;}
.hero-content{max-width:100%;text-align:center;padding:0 20px;}
.happy-customers{margin:0 auto 24px;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);}
.avatars img{width:36px;height:36px;}
.hero-title{font-size:32px;line-height:1.2;margin-bottom:20px;animation:fadeInUp 0.8s ease;}
.hero p{font-size:16px;margin-bottom:28px;opacity:0.95;animation:fadeInUp 1s ease;}
.hero-stats{flex-direction:row;gap:24px;justify-content:center;margin-bottom:28px;animation:fadeInUp 1.2s ease;}
.stat{flex-direction:column;align-items:center;text-align:center;}
.stat .icon{font-size:24px;margin-bottom:8px;}
.stat strong{font-size:22px;}
.stat span{font-size:12px;}
.hero-actions{flex-direction:column;gap:12px;max-width:300px;margin:0 auto;animation:fadeInUp 1.4s ease;}
.hero-actions button{width:100%;padding:14px;font-size:15px;border-radius:25px;transition:all 0.3s ease;}
.hero-images{height:200px;gap:8px;margin-top:30px;justify-content:center;}
.marquee-up,.marquee-down{gap:8px;}
.marquee-up img,.marquee-down img{width:100px;height:150px;border-radius:12px;}
@keyframes scrollUp{0%{transform:translateY(0)}100%{transform:translateY(-400px)}}
@keyframes scrollDown{0%{transform:translateY(-400px)}100%{transform:translateY(0)}}
/* Modern Trust Section */
.trust{padding:50px 0;background:linear-gradient(180deg,#fff 0%,#fdf2f5 100%);}
.trust-grid{grid-template-columns:1fr;gap:40px;padding:0 20px;}
.trust-bg{width:120%;height:400px;opacity:0.6;}
.trust-title{font-size:28px;text-align:center;line-height:1.4;margin-bottom:20px;}
.trust-content p{text-align:center;font-size:15px;line-height:1.7;margin:0 auto 35px;max-width:90%;}
.trust-stats{flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:center;}
.trust-stat{padding:20px;background:rgba(255,255,255,0.8);border-radius:16px;box-shadow:0 4px 15px rgba(0,0,0,0.06);min-width:140px;text-align:center;}
.trust-stat:not(:last-child)::after{display:none;}
.trust-stat strong{font-size:28px;display:block;margin-bottom:8px;}
.trust-stat span{font-size:13px;}
.trust-image{order:-1;}
.trust-image img{border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,0.12);}
/* Modern Why Us Section */
.why-us{padding:50px 20px;border-radius:0;margin:0;width:100%;}
.why-header{margin-bottom:40px;}
.why-header h2{font-size:28px;margin-bottom:12px;}
.why-header p{font-size:15px;max-width:90%;}
.why-grid{grid-template-columns:1fr;gap:20px;max-width:100%;}
.why-card{max-width:100%;padding:30px 24px;border-radius:16px;background:rgba(255,255,255,0.12);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.15);transition:all 0.3s ease;}
.why-card:active{transform:scale(0.98);}
.why-icon{font-size:48px;margin-bottom:20px;}
/* Modern Process Section */
.process{padding:50px 20px;}
.process-header h2{font-size:28px;margin-bottom:12px;}
.process-header p{font-size:15px;max-width:90%;}
.process-grid{grid-template-columns:1fr;gap:20px;max-width:100%;}
.process-card{padding:35px 24px;border-radius:20px;box-shadow:0 8px 25px rgba(0,0,0,0.08);transition:all 0.3s ease;}
.process-card:active{transform:scale(0.98);}
.process-icon{font-size:40px;margin-bottom:16px;}
.step-number{font-size:12px;padding:6px 14px;}
.process-card h3{font-size:20px;margin-bottom:12px;}
.process-card p{font-size:14px;line-height:1.6;}
/* Perfect Arc Section - Mobile Marquee */
.arc-section{padding:50px 0 60px;background:#fff;overflow:hidden;}
.arc-container{width:100%;max-width:100%;height:auto;position:relative;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.arc-rotation{display:none;}
.arc-rotation::before{content:'';display:block;width:100%;height:200px;overflow:hidden;margin-bottom:30px;}
/* Mobile Marquee */
.arc-section::before{content:'';display:block;width:100%;height:180px;overflow:hidden;margin-bottom:30px;background:linear-gradient(90deg,transparent 0%,#fff 10%,#fff 90%,transparent 100%);}
.arc-mobile-marquee{display:flex;gap:15px;width:100%;overflow:hidden;margin-bottom:30px;position:relative;height:180px;}
.arc-mobile-marquee::before,.arc-mobile-marquee::after{content:'';position:absolute;top:0;width:60px;height:100%;z-index:2;pointer-events:none;}
.arc-mobile-marquee::before{left:0;background:linear-gradient(90deg,#fff,transparent);}
.arc-mobile-marquee::after{right:0;background:linear-gradient(90deg,transparent,#fff);}
.arc-marquee-track{display:flex;gap:15px;animation:marqueeScroll 20s linear infinite;}
.arc-marquee-track img{width:140px;height:180px;border-radius:16px;object-fit:cover;box-shadow:0 8px 20px rgba(0,0,0,0.15);flex-shrink:0;}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.center-content{position:static;transform:none;margin:0;padding:0 20px;text-align:center;}
.center-content h2{font-size:22px;line-height:1.5;padding:0;max-width:100%;margin-bottom:20px;}
.center-content h2 span{display:block;margin-top:10px;}
.center-content button{padding:14px 36px;font-size:15px;margin-top:0;border-radius:25px;box-shadow:0 4px 15px rgba(166,28,77,0.3);border:none;cursor:pointer;transition:all 0.3s ease;}
.center-content button:active{transform:scale(0.95);}
/* Modern Testimonial Section */
.testimonial-section{padding:50px 20px;}
.testimonial-wrapper h2{font-size:28px;margin-bottom:12px;}
.testimonial-sub{font-size:14px;max-width:90%;margin:0 auto 35px;}
.testimonial-card{padding:30px 20px;border-radius:20px;min-height:auto;}
.testimonial-content{grid-template-columns:1fr;gap:25px;padding:25px 20px;border-radius:18px;}
.testimonial-img{width:100%;height:220px;order:-1;}
.testimonial-img img{width:100%;height:100%;object-fit:cover;border-radius:14px;}
.testimonial-text{padding:0;}
.testimonial-text h3{font-size:22px;margin-bottom:16px;}
.testimonial-text p{font-size:14px;line-height:1.7;}
.testimonial-nav{margin-top:24px;gap:12px;}
.nav-btn{width:40px;height:40px;font-size:16px;}
/* App Download Section Mobile */
.app-download-section{padding:50px 20px;}
.app-download-container{grid-template-columns:1fr;gap:40px;text-align:center;}
.app-content{order:2;}
.app-content h2{font-size:28px;margin-bottom:16px;}
.app-content p{font-size:15px;margin:0 auto 30px;}
.download-options{flex-direction:column;gap:25px;align-items:center;}
.store-buttons{flex-direction:row;gap:12px;}
.store-btn img{height:45px;}
.qr-code{padding:20px;gap:10px;}
.qr-code img{width:130px;height:130px;}
.app-mockup{order:1;}
.app-mockup img{max-width:280px;margin:0 auto;}
/* Modern Blog Section */
.blog-section{padding:50px 20px;}
.blog-wrapper{max-width:100%;}
.blog-header{flex-direction:column;gap:20px;align-items:center;text-align:center;margin-bottom:30px;}
.blog-header h2{font-size:28px;}
.blog-header p{font-size:14px;}
.blog-view{padding:10px 24px;font-size:14px;border-radius:20px;}
.blog-tabs{display:flex;gap:8px;overflow-x:auto;padding:0 0 12px;margin-bottom:30px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.blog-tabs::-webkit-scrollbar{display:none;}
.blog-tabs button{font-size:13px;padding:8px 18px;border-radius:20px;white-space:nowrap;}
.blog-grid{grid-template-columns:1fr;gap:24px;}
.blog-card{border-radius:16px;padding:14px;transition:all 0.3s ease;}
.blog-card:active{transform:scale(0.98);}
.blog-img img{border-radius:12px;}
.blog-card h3{font-size:16px;margin:14px 0 8px;line-height:1.4;}
.blog-card p{font-size:14px;line-height:1.5;}
/* Modern FAQ Section */
.faq-section{padding:50px 20px;}
.faq-wrapper{max-width:100%;}
.faq-wrapper h2{font-size:28px;margin-bottom:12px;}
.faq-wrapper p{font-size:14px;margin-bottom:30px;}
.faq-item{border-radius:12px;margin-bottom:12px;box-shadow:0 4px 12px rgba(0,0,0,0.06);}
.faq-question{padding:16px 20px;font-size:15px;}
.faq-answer{padding:0 20px;font-size:14px;}
.faq-item.active .faq-answer{padding:14px 20px 16px;}
/* Modern Footer */
.footer{padding:40px 20px 20px;}
.footer-top{grid-template-columns:1fr;gap:30px;text-align:center;}
.footer-col{padding-right:0;}
.footer-col:not(:last-child)::after{display:none;}
.footer-col h4{font-size:16px;margin-bottom:16px;}
.footer-col a{font-size:14px;margin-bottom:12px;}
.footer-divider{margin:30px auto;}
.footer-bottom{flex-direction:column;gap:24px;align-items:center;}
.footer-left{flex-direction:column;gap:16px;align-items:center;}
.footer-logo{height:40px;}
.store-badge{height:36px;}
.footer-right{flex-direction:column;gap:20px;text-align:center;}
/* Container */
.container{width:100%;padding:0 20px;}
}
@media (max-width: 480px) {
body{padding-top:55px;}
.nav{height:55px;padding:8px 4%;}
.logo img{height:38px;}
.nav-btns button{font-size:10px;padding:7px 12px;}
.hero{padding:50px 0 40px;}
.hero-title{font-size:26px;}
.hero p{font-size:15px;}
.hero-images{height:180px;gap:6px;margin-top:20px;justify-content:center;}
.marquee-up,.marquee-down{gap:6px;}
.marquee-up img,.marquee-down img{width:90px;height:130px;border-radius:10px;}
@keyframes scrollUp{0%{transform:translateY(0)}100%{transform:translateY(-350px)}}
@keyframes scrollDown{0%{transform:translateY(-350px)}100%{transform:translateY(0)}}
.trust-title{font-size:24px;}
.why-header h2,.process-header h2,.testimonial-wrapper h2,.blog-header h2,.faq-wrapper h2{font-size:24px;}
.arc-rotation{width:260px;height:260px;}
.arc-rotation img{width:60px;height:60px;}
.center-content h2{font-size:20px;}
.center-content button{padding:12px 32px;font-size:14px;}
.testimonial-text h3{font-size:20px;}
.trust-stat{min-width:120px;padding:16px;}
.trust-stat strong{font-size:24px;}
.app-download-section{padding:40px 15px;}
.app-content h2{font-size:24px;}
.app-content p{font-size:14px;}
.store-btn img{height:40px;}
.qr-code{padding:16px;gap:8px;}
.qr-code img{width:110px;height:110px;}
.qr-code span{font-size:12px;}
.app-mockup img{max-width:240px;}
}
/* Login Overlay Mobile */
@media (max-width: 768px) {
#loginOverlay{padding:20px;}
#loginOverlay iframe{width:100%;height:85vh;max-width:450px;border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,0.3);}
}
/* Smooth Animations */
@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
/* Mobile First Responsive Design */
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
width: 100%;
}
/* Mobile Navigation - Base Styles */
@media (max-width: 768px) {
/*
Sticky Footer and Full-Bleed Section Fixes.
This ensures the footer stays at the bottom of the screen on pages with short content,
and that the footer's background color extends to the full screen width.
*/
body {
min-height: 100vh; /* Make body at least as tall as the viewport */
display: flex;
flex-direction: column;
}
main {
flex-grow: 1; /* Allow the main content to grow and push the footer down */
}
.footer {
width: 100%; /* Ensure footer spans the full width */
box-sizing: border-box; /* Include padding in the width calculation */
}
/* Standard Navigation */
.navbar, .header-container {
position: static;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
/* Hide nav links specifically on index.html for mobile view */
.header-container nav {
display: none;
}
.header-container { flex-wrap: nowrap; }
/* Logo Section */
.logo-section {
display: flex;
align-items: center;
flex: 1;
}
.logo-image, .logo {
width: 35px;
height: 35px;
margin-right: 10px;
}
.logo-text, .site-name {
font-size: 16px;
font-weight: bold;
}
/* Navigation Links */
.nav-links {
display: flex;
justify-content: center;
width: 100%;
padding: 0;
margin: 10px 0 0 0;
list-style: none;
flex-wrap: wrap;
gap: 8px;
order: 3;
}
.nav-item {
font-size: 12px;
padding: 8px 12px;
border-radius: 15px;
background: rgba(183, 28, 80, 0.1);
text-decoration: none;
color: #333;
white-space: nowrap;
text-align: center;
min-width: 70px;
}
.nav-item.active {
background: #b71c50;
color: white;
}
/* User Profile */
.user-profile {
display: flex;
align-items: center;
gap: 8px;
order: 2;
}
.profile-image {
width: 30px;
height: 30px;
}
.profile-name {
font-size: 12px;
}
.status-text {
font-size: 10px;
}
.upgrade-btn {
font-size: 9px;
padding: 4px 8px;
border-radius: 10px;
}
.logout-btn {
font-size: 9px;
padding: 3px 8px;
border-radius: 8px;
}
/* Body Padding Reset */
body {
padding-top: 0 !important;
}
/* Home Page Hero Section Mobile Styles */
.hero-section {
flex-direction: column; /* Stack image and content vertically */
padding: 30px 0 0 !important; /* Add top padding, remove others */
height: auto; /* Let height be determined by content */
margin-top: 0 !important;
min-height: auto;
justify-content: flex-start; /* Align content to the top */
background: linear-gradient(135deg, #f9dce5, #fce4ec); /* Add a background for mobile */
}
.hero-banner-image {
position: static !important; /* Make image part of the document flow */
height: auto;
max-height: 250px; /* Control the banner height on mobile */
object-fit: cover; /* Ensure image covers the area nicely */
}
/* Hide desktop-specific hero elements */
.hero-image-container,
.hero-overlay {
display: none;
}
.hero-content {
padding: 20px 15px; /* Add padding around the content */
width: 100%;
position: static; /* Remove absolute positioning */
text-align: center; /* Center text for mobile */
color: #333; /* Change text color for light background */
max-width: 500px; /* Add max-width for better text flow on tablets */
margin: 0 auto; /* Center the content block */
}
.hero-content h1 {
font-size: 1.8rem !important; /* Adjusted font size for balance */
color: #8C2224 !important;
line-height: 1.3 !important; /* Improved line spacing */
}
/* Allow heading spans to wrap on mobile to prevent overflow */
.hero-content h1 span {
white-space: normal !important;
}
.hero-content p {
font-size: 0.95rem !important; /* Slightly refined font size */
line-height: 1.5 !important; /* Improved readability */
}
/* Add margin to the hero button on mobile */
.hero-content .btn-primary {
margin-top: 20px;
}
/* Stats Section Mobile Styles */
.stats-container {
grid-template-columns: 1fr;
gap: 20px;
max-width: 100%;
padding: 0 10px;
}
.stat-card {
padding: 20px;
}
/* Registration Card Mobile Styles */
.registration-card {
position: static; /* Remove absolute positioning */
flex-direction: column;
width: 90%;
max-width: 400px;
margin: 40px auto 60px; /* Adjust top/bottom margin for better spacing */
right: auto;
bottom: auto;
transform: none; /* Reset transform */
height: auto; /* Auto height based on content */
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
background: rgba(255, 255, 255, 0.95);
}
/* Footer Mobile Styles */
.footer {
padding: 20px 15px;
height: auto;
background-color: #9f1e58;
}
.footer .container {
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: 0;
}
.footer-column {
text-align: center;
width: 100%;
margin-bottom: 20px;
padding-right: 0;
}
.footer-column h3 {
margin-top: 0;
margin-right: 0;
font-size: 16px;
}
.brand-column .footer-logo {
margin: 0 auto 15px; /* Center the logo */
}
.footer-tagline {
text-align: center;
max-width: 300px; /* Prevent text from being too wide */
margin: 0 auto;
}
.footer-column ul {
text-align: center;
margin: 0;
margin-right: 0;
}
.footer-column li {
margin-bottom: 10px;
}
.contact-item {
justify-content: center;
flex-direction: column;
text-align: center;
}
.contact-item i {
margin-right: 0;
margin-bottom: 5px;
}
.footer-update, .social-icons {
width: 100%;
justify-content: center;
}
.social-icons {
justify-content: center;
margin-top: 0;
}
/* Why Choose Section Mobile Styles */
.why-choose-section {
padding: 20px 10px;
overflow-x: visible;
}
.section-title {
font-size: 28px;
margin-bottom: 30px;
}
.features-container {
flex-wrap: wrap;
gap: 20px;
justify-content: space-around;
overflow-x: visible;
}
.feature-card {
width: calc(50% - 10px);
padding: 20px 10px;
max-width: none;
}
/* App Download Section Mobile Styles */
.app-download-section {
flex-direction: column;
align-items: center;
gap: 20px;
padding: 20px 10px;
}
.app-store-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.app-store-buttons img {
max-width: 140px;
height: auto;
max-height: 50px;
}
/* Membership Page Banner Image Adjustment */
.membership-image {
margin-top: -5px;
}
/* Added styles for matches grid on mobile */
.matches-grid {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.match-card {
width: 100% !important;
max-width: none !important;
min-width: auto !important;
}
/* Styles for matches count on mobile */
.matches-count {
font-size: 1.5rem;
margin: 20px 0;
font-weight: bold;
text-align: center;
color: #b71c50;
}
/* Ensure matches list section is visible below filters in mobile */
.matches-list-section {
margin-top: 0 !important;
margin-bottom: 20px;
}
/* Login page mobile styles are handled in login.css - no overrides needed */
}
/* Extra small screens for real phones */
@media (max-width: 480px) {
/* Navigation adjustments */
.logo-image, .logo {
width: 30px;
height: 30px;
margin-right: 8px;
}
.logo-text, .site-name {
font-size: 14px;
}
.nav-item {
font-size: 11px;
padding: 6px 10px;
min-width: 60px;
}
.profile-image {
width: 25px;
height: 25px;
}
.profile-name {
font-size: 11px;
}
.status-text {
font-size: 9px;
}
.upgrade-btn {
font-size: 8px;
padding: 3px 6px;
}
.logout-btn {
font-size: 8px;
padding: 2px 6px;
}
/* Stats Section */
.stats-container {
padding: 0 5px;
gap: 15px;
}
.stat-card {
padding: 15px;
}
/* Footer */
.footer {
padding: 15px 10px;
}
.footer-column h3 {
font-size: 14px;
}
.footer-column li {
margin-bottom: 8px;
}
/* Why Choose Section */
.why-choose-section {
padding: 15px 5px;
}
.section-title {
font-size: 24px;
margin-bottom: 20px;
}
.features-container {
gap: 15px;
}
.feature-card {
width: 100%;
padding: 15px 5px;
}
/* App Download */
.app-download-section {
padding: 15px 5px;
gap: 15px;
}
.app-store-buttons img {
max-width: 120px;
max-height: 40px;
}
/* Matches */
.matches-count {
font-size: 1.2rem;
margin: 15px 0;
}
/* Search Container Extra Small */
.search-input {
max-width: 250px;
font-size: 14px;
padding: 10px 12px;
}
.search-btn {
width: 40px;
height: 40px;
font-size: 16px;
}
/* Search Container Mobile */
.search-and-count {
flex-direction: column;
gap: 15px;
align-items: stretch;
}
.search-container {
width: 100%;
justify-content: center;
}
.search-input {
width: 100%;
max-width: 280px;
font-size: 16px;
padding: 12px 15px;
}
.search-btn {
width: 45px;
height: 45px;
font-size: 18px;
}
.matches-count {
text-align: center;
order: -1;
}
.card-form {
padding: 15px;
}
.card-title {
font-size: 1.5rem;
text-align: center; /* Center the card title */
}
.card-subtitle {
font-size: 0.8rem;
text-align: center; /* Center the card subtitle */
}
.btn-otp {
border-radius: 5px !important; /* Match the style of other buttons */
}
/* Home page sliders */
.profile-card {
min-width: 200px; /* Adjust card width for better viewing on mobile */
}
.interest-card {
min-width: 280px; /* Make interest cards wider */
flex-shrink: 0;
}
}
/* Contact Page Mobile */
@media (max-width: 768px) {
.banner {
height: 200px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.banner-content {
text-align: center;
color: white;
z-index: 2;
}
.banner-content h1 {
font-size: 28px;
margin: 0;
font-weight: 700;
}
.banner-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #b71c50, #8b1538);
z-index: 1;
}
.main-content {
flex-direction: column;
padding: 10px;
gap: 20px;
margin-top: 0;
}
.contact-info-section {
order: 2;
margin: 20px 0;
padding: 0;
}
.contact-cards {
display: flex;
flex-direction: column;
gap: 15px;
padding: 0;
margin: 0;
}
.contact-card {
padding: 20px 15px;
text-align: center;
width: 100%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
background: white;
margin: 0;
}
.contact-card h3 {
font-size: 18px;
margin-bottom: 10px;
color: #b71c50;
}
.contact-card p {
font-size: 14px;
line-height: 1.5;
margin: 0;
}
.contact-icon {
margin-bottom: 15px;
}
.contact-form-section {
order: 1;
padding: 20px 0;
margin: 0;
width: 100%;
max-width: 100%;
}
.form-container {
margin: 0;
padding: 0;
}
.form-container h2 {
font-size: 22px;
margin-bottom: 15px;
text-align: center;
}
.form-container p {
font-size: 14px;
margin-bottom: 20px;
text-align: center;
}
.contact-form {
max-width: 100%;
margin: 0;
padding: 0 10px;
}
.form-row {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 0;
}
.form-group {
margin-bottom: 15px;
width: 100%;
}
.form-group label {
font-size: 14px;
margin-bottom: 8px;
display: block;
font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
.submit-btn {
width: 100%;
padding: 15px;
font-size: 16px;
margin-top: 20px;
border-radius: 8px;
background: #b71c50;
color: white;
border: none;
cursor: pointer;
min-height: 50px;
}
}
/* Styles for extra small screens (e.g., iPhone SE, screens < 375px) */
@media (max-width: 375px) {
/* Home Page Specifics */
.hero-heading {
font-size: 1.8rem; /* Smaller heading for very small screens */
}
.hero-subtext {
font-size: 0.9rem; /* Smaller subtext */
}
.hero-button {
font-size: 0.9rem;
padding: 10px 18px;
}
.stat-number {
font-size: 1.8rem; /* Reduce size of stat numbers */
}
.recently-viewed-title,
.daily-recommendation-title,
.recent-interest-title {
font-size: 1.2rem; /* Adjust section titles */
}
}
/* Registration Success Popup */
.success-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
}
.success-popup-content {
background: white;
padding: 30px 40px;
border-radius: 12px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transform: scale(0.9);
transition: transform 0.3s ease;
}
.success-popup-content .success-icon {
font-size: 48px;
color: #28a745;
margin-bottom: 15px;
}
.success-popup-content h3 {
font-size: 24px;
color: #333;
margin: 0 0 10px;
}
.success-popup-content p {
font-size: 16px;
color: #666;
margin: 0;
}
/* Styles for Inter-Caste Buttons (similar to Dosham buttons) */
.inter-caste-options {
display: flex;
gap: 10px;
}
.inter-caste-btn {
padding: 10px 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
border-radius: 5px;
cursor: pointer;
}
.inter-caste-btn.active {
background-color: #b71c50;
color: white;
border-color: #b71c50;
}
/* Interest Sent Popup */
.interest-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
opacity: 0;
transition: opacity 0.3s ease;
}
.interest-popup-content {
background: white;
padding: 30px 40px;
border-radius: 20px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
transform: scale(0.7);
opacity: 0;
animation: popup-swoop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.interest-popup-icon {
font-size: 48px;
animation: popup-heart-beat 1.5s infinite;
}
.interest-popup-content h3 {
font-size: 24px;
color: #d81b60;
margin: 10px 0;
}
@keyframes popup-swoop-in {
to { transform: scale(1); opacity: 1; }
}
@keyframes popup-heart-beat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* Interest Already Sent Popup */
.already-sent-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
opacity: 0;
transition: opacity 0.3s ease;
}
.already-sent-popup-content {
background: white;
padding: 30px 40px;
border-radius: 20px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
transform: scale(0.7);
opacity: 0;
animation: popup-swoop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.already-sent-popup-icon {
font-size: 48px;
color: #ffc107; /* A warm, friendly yellow */
}
.already-sent-popup-content h3 {
font-size: 22px;
color: #333;
margin: 15px 0 10px;
}
.already-sent-popup-content p {
font-size: 16px;
color: #666;
margin: 0;
}
/* Premium Required Modal for Chat */
.premium-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 3000; /* Higher than other popups */
opacity: 0;
transition: opacity 0.3s ease;
}
.premium-modal-content {
background: white;
padding: 30px;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
max-width: 450px;
width: 90%;
transform: scale(0.8);
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 0;
}
.premium-modal-overlay.show {
opacity: 1;
}
.premium-modal-overlay.show .premium-modal-content {
opacity: 1;
transform: scale(1);
}
.premium-modal-icon {
font-size: 60px;
color: #d81b60; /* Pink/red for premium */
margin-bottom: 20px;
line-height: 1;
}
.premium-modal-content h2 {
font-size: 26px;
color: #333;
margin-bottom: 15px;
}
.premium-modal-content p {
font-size: 16px;
color: #555;
margin-bottom: 10px;
line-height: 1.5;
}
.premium-modal-benefits {
text-align: left;
margin: 20px 0;
padding: 0 20px;
}
.premium-modal-benefits .benefit {
font-size: 15px;
color: #444;
margin-bottom: 8px;
display: flex;
align-items: center;
}
.premium-modal-benefits .benefit::before {
content: '✓';
color: #28a745; /* Green checkmark */
font-weight: bold;
margin-right: 10px;
font-size: 18px;
}
.premium-modal-actions {
margin-top: 30px;
display: flex;
flex-direction: column;
gap: 15px;
}
.premium-modal-actions .upgrade-btn {
background-color: #b71c50;
color: white;
padding: 12px 25px;
border: none;
border-radius: 8px;
font-size: 17px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.premium-modal-actions .upgrade-btn:hover {
background-color: #9f1e58;
}
.premium-modal-actions .back-btn {
background-color: transparent;
color: #b71c50;
padding: 10px 20px;
border: 1px solid #b71c50;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.premium-modal-actions .back-btn:hover {
background-color: #f0f0f0;
}
@media (max-width: 480px) {
.premium-modal-content {
padding: 20px;
}
.premium-modal-icon {
font-size: 50px;
}
.premium-modal-content h2 {
font-size: 22px;
}
.premium-modal-content p {
font-size: 14px;
}
.premium-modal-benefits {
padding: 0 10px;
}
.premium-modal-actions .upgrade-btn,
.premium-modal-actions .back-btn {
font-size: 15px;
padding: 10px 20px;
}
}
/* ===== PAYMENT PAGE MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
body {
padding-top: 80px;
}
.u-wrapper {
padding: 10px !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.top-content-wrapper {
flex-direction: column !important;
gap: 20px !important;
margin: 0 !important;
width: 100% !important;
}
.plan-selection-card {
width: 100% !important;
margin: 0 !important;
padding: 20px 15px !important;
box-sizing: border-box;
}
.summary-and-promo-container {
width: 100% !important;
margin: 0 !important;
}
.billing-summary-container {
width: 100% !important;
padding: 15px !important;
box-sizing: border-box;
}
.promo-container {
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
padding: 15px !important;
}
.promo-input {
width: 100% !important;
flex-basis: auto !important;
margin-bottom: 10px;
box-sizing: border-box;
}
.apply-button {
width: 100% !important;
flex-basis: auto !important;
padding: 12px !important;
}
.payment-method-container {
width: 100% !important;
margin: 0 !important;
padding: 15px !important;
box-sizing: border-box;
}
.payment-tabs {
flex-wrap: wrap;
gap: 5px;
}
.payment-tab {
flex: 1;
min-width: 80px;
padding: 12px 8px;
font-size: 14px;
text-align: center;
}
.payment-section {
padding: 15px 0;
}
.payment-section input,
.payment-section select {
width: 100% !important;
padding: 12px;
font-size: 16px;
margin-bottom: 15px;
box-sizing: border-box;
}
.upi-apps {
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.app-item {
flex: 1;
min-width: 80px;
padding: 10px;
text-align: center;
}
.pay-now-button {
width: 100% !important;
padding: 15px;
font-size: 16px;
margin-top: 20px;
box-sizing: border-box;
}
.payment-popup-overlay {
padding: 20px;
}
.payment-popup {
width: 90% !important;
max-width: 400px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
}
@media (max-width: 480px) {
.plan-selection-card {
padding: 15px 10px !important;
}
.plan-price {
font-size: 1.8rem !important;
}
.payment-tab {
font-size: 12px;
padding: 10px 6px;
}
.app-item {
min-width: 70px;
padding: 8px;
font-size: 12px;
}
.payment-popup {
width: 95% !important;
padding: 15px;
}
.billing-summary-container,
.promo-container,
.payment-method-container {
padding: 10px !important;
}
/* Details page small screens */
.photo-slider {
height: 250px !important;
}
.main-photo {
height: 250px !important;
}
.profile-info h1 {
font-size: 1.5rem !important;
}
.about-section,
.details-section {
padding: 15px 10px !important;
}
.about-section h2,
.details-section h2 {
font-size: 1.1rem !important;
}
.detail-row .value {
font-size: 13px !important;
}
.send-interest-btn,
.start-chat-btn {
padding: 10px 15px !important;
font-size: 13px !important;
}
.slider-nav {
width: 30px !important;
height: 30px !important;
font-size: 14px !important;
}
.overlay-image {
width: 95vw !important;
height: 50vh !important;
}
.tab {
padding: 8px 12px;
font-size: 12px;
}
.contact-info {
padding: 10px !important;
}
.phone-number {
font-size: 14px !important;
}
.email-address {
font-size: 12px !important;
}
}
/* ===== DETAILS PAGE MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
.matrimony-profile {
padding: 10px !important;
}
.profile-header {
flex-direction: column !important;
align-items: center !important;
gap: 20px !important;
padding: 20px 15px !important;
text-align: center;
}
.profile-photo {
width: 100% !important;
max-width: 280px !important;
flex-shrink: 0;
}
.photo-slider {
width: 100% !important;
max-width: 280px !important;
height: 300px !important;
}
.main-photo {
width: 100% !important;
max-width: 280px !important;
height: 300px !important;
}
.profile-info {
width: 100% !important;
text-align: center !important;
min-height: auto !important;
}
.profile-info h1 {
font-size: 1.8rem !important;
margin-bottom: 10px;
}
.basic-info {
font-size: 16px !important;
}
.education-work {
font-size: 14px !important;
}
.action-buttons {
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
align-items: center;
}
.send-interest-btn,
.start-chat-btn {
width: 100% !important;
max-width: 280px;
padding: 12px 20px !important;
font-size: 14px !important;
text-align: center;
}
.about-section,
.details-section {
padding: 20px 15px !important;
margin: 10px 0;
}
.about-section h2,
.details-section h2 {
font-size: 1.3rem !important;
}
.detail-row {
grid-template-columns: 1fr !important;
gap: 10px !important;
padding: 10px 0;
}
.detail-row .label {
font-weight: 600;
color: #b71c50;
margin-bottom: 5px;
}
.detail-row .value {
color: #333;
font-size: 14px;
}
.family-row,
.career-row,
.pref-row {
flex-direction: column !important;
gap: 5px !important;
align-items: flex-start;
}
.family-row .value,
.career-row .value,
.pref-row .value {
text-align: left !important;
font-size: 14px;
}
.contact-info {
padding: 15px !important;
margin-top: 20px;
}
.contact-actions {
justify-content: center;
flex-wrap: wrap;
}
.phone-number {
font-size: 16px !important;
}
.email-address {
font-size: 14px !important;
}
.slider-nav {
width: 35px !important;
height: 35px !important;
font-size: 16px !important;
}
.slider-prev {
left: 5px !important;
}
.slider-next {
right: 5px !important;
}
.overlay-image {
width: 90vw !important;
height: 60vh !important;
}
.close-overlay {
top: 10px !important;
right: 20px !important;
font-size: 30px !important;
}
.tabs {
flex-wrap: wrap;
gap: 10px;
margin-left: 0 !important;
justify-content: center;
}
.tab {
padding: 10px 15px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.photo-slider {
height: 250px !important;
}
.profile-name {
font-size: 1.3rem;
}
.detail-card {
padding: 12px;
}
.detail-card h3 {
font-size: 1rem;
}
.detail-value {
font-size: 13px;
}
.action-btn {
padding: 10px;
font-size: 13px;
}
.slider-nav {
width: 30px;
height: 30px;
font-size: 14px;
}
.overlay-image {
width: 95vw;
height: 50vh;
}
.tab {
padding: 8px 12px;
font-size: 12px;
}
}
/* ===== REGISTRATION PAGES MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
/* Basic Details, Religious Details, Education Details, About Yourself Pages */
.basic-container {
padding: 0;
min-height: 100vh;
}
/* Header Mobile for Registration Pages */
.otp-header {
padding: 10px 15px;
flex-wrap: wrap;
}
.otp-logo {
height: 35px;
margin-right: 8px;
}
.otp-header-title {
font-size: 16px;
}
/* Form Header Mobile */
.form-header {
padding: 20px 15px;
flex-direction: column;
gap: 15px;
text-align: center;
}
.header-text {
text-align: center;
}
.header-text h2 {
font-size: 1.3rem;
margin-bottom: 5px;
}
.header-text p {
font-size: 0.9rem;
}
.progress {
width: 50px;
height: 50px;
margin: 0;
font-size: 12px;
}
.progress::before {
width: 38px;
height: 38px;
}
/* Main Content Mobile */
.main-content {
padding: 10px;
align-items: stretch;
}
.form-wrapper {
grid-template-columns: 1fr;
max-width: 100%;
margin: 0;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.image-section {
order: 1;
max-height: 200px;
overflow: hidden;
}
.image-section img {
width: 100%;
height: 200px;
object-fit: cover;
}
.form-section {
order: 2;
padding: 20px 15px;
}
/* Form Elements Mobile */
.dob-age-group {
flex-direction: column;
gap: 15px;
}
.form-group {
margin-bottom: 15px;
}
label {
font-size: 14px;
margin-bottom: 6px;
}
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
padding: 12px;
font-size: 16px; /* Prevents zoom on iOS */
border-radius: 6px;
}
.gender-options,
.dosham-options,
.inter-caste-options {
flex-direction: column;
gap: 8px;
}
.gender-btn,
.dosham-btn,
.inter-caste-btn {
padding: 12px;
font-size: 14px;
text-align: center;
}
.continue-btn {
padding: 15px;
font-size: 16px;
margin-top: 25px;
border-radius: 8px;
}
/* Upload Area Mobile */
.upload-area {
padding: 20px 15px;
border-radius: 6px;
}
.upload-area svg {
width: 24px;
height: 24px;
}
.upload-area span {
font-size: 14px;
margin-top: 8px;
}
.preview-container {
gap: 8px;
justify-content: center;
}
.preview-container img {
width: 70px;
height: 70px;
border-radius: 6px;
}
/* About Yourself Textarea */
#about-yourself {
height: 120px;
font-size: 14px;
padding: 12px;
}
/* Password Requirements Mobile */
.password-input-wrapper input {
padding: 12px 40px 12px 12px;
font-size: 16px;
}
.password-toggle {
right: 10px;
font-size: 16px;
}
.password-requirements {
padding: 8px;
margin-top: 6px;
}
.requirement {
font-size: 11px;
}
/* Footer Mobile */
.copyright {
padding: 15px 10px;
font-size: 0.8rem;
}
/* OTP Page Enhanced Mobile */
.otp-main-container {
padding: 15px 10px;
min-height: calc(100vh - 70px);
justify-content: center;
}
.otp-card-container {
flex-direction: column;
max-width: 100%;
margin: 0;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.otp-image-section {
width: 100%;
padding: 20px;
order: 1;
background: linear-gradient(135deg, #f9dce5, #fce4ec);
min-height: 150px;
}
.otp-illustration {
max-width: 200px;
height: auto;
}
.otp-form-section {
width: 100%;
padding: 25px 20px;
order: 2;
background-color: #fff;
}
.otp-title {
font-size: 18px;
margin-bottom: 12px;
text-align: center;
color: #333;
}
.otp-info {
font-size: 13px;
margin-bottom: 25px;
text-align: center;
color: #666;
line-height: 1.4;
}
.otp-input-group {
justify-content: center;
gap: 8px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.otp-prefix {
font-size: 16px;
margin-right: 8px;
margin-bottom: 5px;
}
.otp-input {
width: 45px;
height: 45px;
font-size: 18px;
border: 2px solid #ddd;
border-radius: 8px;
background-color: #fff;
transition: border-color 0.3s ease;
}
.otp-input:focus {
outline: none;
border-color: #9f1e58;
box-shadow: 0 0 0 3px rgba(159, 30, 88, 0.1);
}
.otp-verify-btn {
width: 100%;
padding: 15px;
font-size: 16px;
border-radius: 8px;
margin-bottom: 15px;
transition: background-color 0.3s ease;
}
.otp-resend {
font-size: 14px;
margin-top: 15px;
padding: 10px;
text-decoration: underline;
}
.otp-footer-text {
margin-top: 20px;
font-size: 11px;
padding: 0 10px;
}
}
/* Registration Pages Extra Small Screens */
@media (max-width: 480px) {
.otp-header {
padding: 8px 10px;
}
.otp-logo {
height: 30px;
margin-right: 6px;
}
.otp-header-title {
font-size: 14px;
}
.form-header {
padding: 15px 10px;
}
.header-text h2 {
font-size: 1.1rem;
}
.header-text p {
font-size: 0.8rem;
}
.progress {
width: 45px;
height: 45px;
font-size: 11px;
}
.progress::before {
width: 33px;
height: 33px;
}
.form-section {
padding: 15px 10px;
}
.form-group {
margin-bottom: 12px;
}
label {
font-size: 13px;
}
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
padding: 10px;
font-size: 16px;
}
.gender-btn,
.dosham-btn,
.inter-caste-btn {
padding: 10px;
font-size: 13px;
}
.continue-btn {
padding: 12px;
font-size: 15px;
margin-top: 20px;
}
.upload-area {
padding: 15px 10px;
}
.upload-area svg {
width: 20px;
height: 20px;
}
.upload-area span {
font-size: 13px;
}
.preview-container img {
width: 60px;
height: 60px;
}
#about-yourself {
height: 100px;
font-size: 13px;
}
/* Height input fields on mobile */
.height-input-fields {
display: flex;
gap: 10px;
width: 100%;
}
/* Matches grid: 1 column for very small screens */
.matches-grid {
grid-template-columns: 1fr;
}
.pagination a {
padding: 6px 12px;
margin: 0 4px;
}
.copyright {
padding: 10px;
font-size: 0.75rem;
}
/* OTP Extra Small */
.otp-main-container {
padding: 10px 5px;
}
.otp-form-section {
padding: 20px 15px;
}
.otp-title {
font-size: 16px;
}
.otp-info {
font-size: 12px;
}
.otp-input-group {
gap: 6px;
}
.otp-prefix {
font-size: 14px;
}
.otp-input {
width: 40px;
height: 40px;
font-size: 16px;
}
.otp-verify-btn {
padding: 12px;
font-size: 15px;
}
.otp-resend {
font-size: 13px;
}
.otp-footer-text {
font-size: 10px;
}
}
/* Profile Page Mobile Responsive Styles */
@media (max-width: 768px) {
.profile-actions {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
margin-top: 15px !important;
padding: 0 10px !important;
}
.profile-actions .edit-btn,
.profile-actions .save-btn,
.profile-actions .cancel-btn,
.profile-actions .deactivate-btn,
.profile-actions .activate-btn {
width: 100% !important;
padding: 12px 8px !important;
font-size: 12px !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
border-radius: 6px !important;
margin: 0 !important;
}
/* Make single button span full width */
.profile-actions:has(> .edit-btn:only-child) .edit-btn,
.profile-actions:has(> .save-btn:only-child) .save-btn {
grid-column: 1 / -1 !important;
}
}
@media (max-width: 480px) {
.profile-actions {
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 0 5px !important;
}
.profile-actions .edit-btn,
.profile-actions .save-btn,
.profile-actions .cancel-btn,
.profile-actions .deactivate-btn,
.profile-actions .activate-btn {
padding: 10px 6px !important;
font-size: 11px !important;
}
}
/* Registration Pages Landscape Orientation */
@media (max-width: 768px) and (orientation: landscape) {
.image-section {
display: none;
}
.form-header {
padding: 10px 15px;
}
.main-content {
padding: 5px;
}
.form-section {
padding: 15px;
}
.form-group {
margin-bottom: 10px;
}
#about-yourself {
height: 80px;
}
.otp-image-section {
display: none;
}
.otp-main-container {
padding: 10px;
}
.otp-form-section {
padding: 20px;
}
.otp-input-group {
margin-bottom: 20px;
}
}