/* Prithvi Foundation - Simple Old-School Website */ /* Google Fonts loaded asynchronously in HTML — do not @import here */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #333; background-color: #f9f5f0; line-height: 1.6; } a { color: #946f60; text-decoration: underline; } a:hover { color: #7a5a4c; } /* Header */ .site-header { background-color: #f0e8de; border-bottom: 2px solid #946f60; padding: 5px 0; } .header-inner { max-width: 960px; width: 100%; margin: 0 auto; display: table; } .logo-area { display: table-cell; vertical-align: middle; width: 300px; } .logo-area img { height: 70px; width: auto; max-width: 100%; vertical-align: middle; display: block; } .nav-area { display: table-cell; vertical-align: middle; text-align: right; } .nav-area ul { list-style: none; margin: 0; padding: 0; } .nav-area ul li { display: inline-block; margin-left: 25px; position: relative; } .nav-area ul li a { text-decoration: none; color: #946f60; font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: bold; padding: 5px 0; } .nav-area ul li a:hover, .nav-area ul li a.active { color: #7a5a4c; border-bottom: 2px solid #946f60; } /* About Dropdown in Navbar */ .nav-dropdown { position: relative; display: inline-block; } .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #f9f5f0; border: 1px solid #c4a68a; border-top: 3px solid #946f60; min-width: 240px; z-index: 100; padding: 10px 0; border-radius: 0 0 6px 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); } .nav-dropdown:hover .nav-dropdown-menu { display: block; } .nav-dropdown-menu a { display: block; padding: 9px 20px; color: #7a5a4c; text-decoration: none; font-size: 13.5px; font-weight: 600; font-family: 'Cormorant Garamond', serif; text-align: center; letter-spacing: 0.3px; border-bottom: 1px solid #ede6dc; transition: background 0.2s, color 0.2s; } .nav-dropdown-menu a:last-child { border-bottom: none; } .nav-dropdown-menu a:hover { background: #946f60; color: #f9f5f0; } /* Hero Slider */ .hero-slider { width: 960px; margin: 20px auto; position: relative; border: 1px solid #946f60; background: #000; overflow: hidden; height: 400px; } .hero-slider .slide { display: none; width: 100%; height: 100%; position: relative; } .hero-slider .slide.active { display: block; } .hero-slider .slide img { width: 100%; height: 400px; object-fit: cover; } .hero-slider .slide-text { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.55); color: #fff; padding: 15px 20px; font-size: 20px; font-family: Georgia, 'Times New Roman', serif; } .slider-btn { position: absolute; top: 50%; margin-top: -20px; background: rgba(148, 111, 96, 0.7); color: #fff; border: none; padding: 10px 15px; font-size: 20px; cursor: pointer; z-index: 10; } .slider-btn:hover { background: #946f60; } .slider-btn.prev { left: 5px; } .slider-btn.next { right: 5px; } /* Quote Section */ .quote-section { width: 960px; margin: 25px auto; text-align: center; padding: 25px 40px; background: #946f60; border-top: 2px solid #7a5a4c; border-bottom: 2px solid #7a5a4c; } .quote-section p { font-family: Georgia, 'Times New Roman', serif; font-size: 18px; color: #f9f5f0; margin: 8px 0; font-style: italic; } /* Section Headings */ .section-heading { width: 960px; margin: 30px auto 15px auto; padding-bottom: 8px; border-bottom: 2px solid #946f60; font-size: 22px; color: #946f60; font-family: Georgia, 'Times New Roman', serif; } /* Activities Grid */ .activities-grid { width: 960px; margin: 0 auto 30px auto; overflow: hidden; } .activity-item { width: 220px; float: left; margin: 10px 10px; border: 1px solid #ddd; background: #fff; text-align: center; padding-bottom: 10px; } .activity-item img { width: 220px; height: 160px; object-fit: cover; display: block; } .activity-item h3 { font-size: 14px; color: #946f60; margin: 8px 5px; font-family: Calibri, Arial, sans-serif; } /* About Section (on Home) */ .about-brief { width: 960px; margin: 20px auto; padding: 20px; background: #fff; border: 1px solid #ddd; overflow: hidden; } .about-brief img { float: left; width: 250px; height: 180px; object-fit: cover; border: 2px solid #946f60; margin: 0 20px 10px 0; } .about-brief h2 { color: #946f60; font-family: Georgia, 'Times New Roman', serif; font-size: 20px; margin-bottom: 10px; } .about-brief p { font-size: 15px; line-height: 1.7; margin-bottom: 10px; color: #333; } .about-brief a { color: #946f60; font-weight: bold; } /* Contact Section */ .contact-section { width: 960px; margin: 20px auto 40px auto; overflow: hidden; } .contact-form { width: 560px; float: left; } .contact-info { width: 360px; float: right; padding-left: 30px; } .contact-info h3 { color: #946f60; font-size: 18px; margin-bottom: 10px; } .contact-info p { font-size: 14px; margin-bottom: 8px; line-height: 1.6; } .contact-form label { display: block; margin-bottom: 3px; font-weight: bold; font-size: 14px; color: #333; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; padding: 8px; margin-bottom: 12px; border: 1px solid #ccc; font-family: Calibri, Arial, sans-serif; font-size: 14px; background: #fff; color: #333; } .contact-form textarea { height: 100px; resize: vertical; } .contact-form button { background: #946f60; color: #f9f5f0; border: 1px solid #7a5a4c; padding: 8px 25px; font-size: 14px; cursor: pointer; font-family: Calibri, Arial, sans-serif; } .contact-form button:hover { background: #7a5a4c; } /* Footer */ .site-footer { background: #f0e8de; color: #946f60; text-align: center; padding: 15px 0; font-size: 13px; border-top: 2px solid #946f60; } .site-footer a { color: #946f60; } /* About Page */ .about-page { width: 960px; margin: 20px auto 40px auto; } .about-page h1 { color: #946f60; font-family: Georgia, 'Times New Roman', serif; font-size: 24px; margin-bottom: 20px; border-bottom: 2px solid #946f60; padding-bottom: 8px; } .dropdown-section { margin-bottom: 15px; border: 1px solid #ddd; } .dropdown-header { background: #946f60; padding: 12px 15px; cursor: pointer; font-size: 17px; font-weight: bold; color: #f9f5f0; border-bottom: 1px solid #7a5a4c; user-select: none; } .dropdown-header:hover { background: #7a5a4c; } .dropdown-header .arrow { float: right; font-size: 14px; } .dropdown-content { display: none; padding: 15px 20px; background: #fff; line-height: 1.8; font-size: 15px; color: #333; } .dropdown-content.open { display: block; } .dropdown-content p { margin-bottom: 12px; } /* Horizontal Rule */ hr.divider { width: 960px; margin: 20px auto; border: none; border-top: 1px solid #ddd; } /* Kothali Spiritual Centre Section */ .kothali-section { width: 960px; margin: 20px auto; background: #fff; border: 1px solid #ddd; padding: 20px; overflow: hidden; } .kothali-section h2 { color: #946f60; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; margin-bottom: 15px; border-bottom: 2px solid #946f60; padding-bottom: 8px; } .kothali-section p { font-size: 15px; line-height: 1.7; margin-bottom: 10px; color: #333; } .kothali-images { overflow: hidden; margin-bottom: 15px; } .kothali-images img { width: 293px; height: 200px; object-fit: cover; display: inline-block; vertical-align: top; margin: 0 5px 10px 0; border: 2px solid #946f60; } .kothali-images img:last-child { margin-right: 0; } /* About page images */ .about-images { overflow: hidden; margin: 15px 0; } .about-images img { width: 280px; height: 190px; object-fit: cover; float: left; margin: 0 10px 10px 0; border: 2px solid #946f60; } /* Hamburger Button (hidden on desktop) */ .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } .hamburger span { display: block; width: 26px; height: 3px; background: #946f60; margin: 5px 0; border-radius: 2px; transition: 0.3s; } /* ===== Mobile Responsive Styles ===== */ @media screen and (max-width: 768px) { .header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 5px 10px; position: relative; } .hamburger { display: block; position: static; transform: none; } .logo-area { display: block; width: auto; } .logo-area img { height: 56px; width: auto; } .nav-area { display: none; width: 100%; text-align: center; margin-top: 5px; background: #f0e8de; border-top: 1px solid #946f60; padding: 10px 0; } .nav-area.nav-open { display: block; } .nav-area ul li { display: block; margin: 0; } .nav-area ul li a { display: block; padding: 10px 15px; font-size: 17px; border-bottom: none; } .nav-area ul li a:hover, .nav-area ul li a.active { background: #946f60; color: #f9f5f0; border-bottom: none; } .nav-dropdown-menu { position: static; border: none; min-width: 0; padding: 0; } .nav-dropdown-menu a { padding-left: 30px; } .hero-slider { width: 100%; height: auto; margin: 10px 0; } .hero-slider .slide img { width: 100%; height: auto; object-fit: contain; } .quote-section, .about-brief, .kothali-section, .activities-grid, .contact-section, .about-page, .section-heading, hr.divider { width: 100%; padding-left: 10px; padding-right: 10px; box-sizing: border-box; } .activity-item { width: 48%; margin: 1%; } .activity-item img { width: 100%; height: auto; } .kothali-images img { width: 100%; height: auto; margin: 0 0 10px 0; } .contact-form, .contact-info { width: 100%; float: none; padding-left: 0; } .contact-info { margin-top: 20px; } .about-images img { width: 100%; height: auto; float: none; margin: 0 0 10px 0; } } /* Service Page Gallery */ .service-gallery { overflow: hidden; margin: 20px 0 10px 0; } .service-gallery img { width: 280px; height: 190px; object-fit: cover; float: left; margin: 0 10px 10px 0; border: 2px solid #946f60; } .back-link { margin: 15px 0 0 0; } .back-link a { color: #946f60; font-weight: bold; font-size: 14px; } .activity-item a { text-decoration: none; color: inherit; display: block; } @media screen and (max-width: 480px) { .activity-item { width: 100%; margin: 5px 0; } .hero-slider .slide-text { font-size: 14px; padding: 8px 10px; } .quote-section p { font-size: 15px; } } @media screen and (max-width: 768px) { .service-gallery img { width: 100%; height: auto; float: none; margin: 0 0 10px 0; } .gallery-masonry { grid-template-columns: repeat(2, 1fr) !important; padding: 0 10px !important; width: 100% !important; } .gallery-card { height: 200px !important; } } @media screen and (max-width: 480px) { .gallery-masonry { grid-template-columns: 1fr !important; } .gallery-card { height: 220px !important; } } /* Gallery Grid */ .gallery-masonry { max-width: 980px; width: 100%; margin: 0 auto 40px auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; box-sizing: border-box; padding: 0 15px; } .gallery-card { position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 3px 12px rgba(0,0,0,0.12); cursor: pointer; height: 240px; transition: transform 0.3s, box-shadow 0.3s; } .gallery-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(148,111,96,0.28); } .gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; } .gallery-card:hover img { transform: scale(1.07); } .gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.65)); padding: 30px 12px 12px 12px; opacity: 0; transition: opacity 0.3s; } .gallery-card:hover .gallery-overlay { opacity: 1; } .gallery-overlay span { color: #fff; font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 600; letter-spacing: 0.5px; }