:root{--primary-color: #0d1b2a;--secondary-color: #fca311;--accent-color: #0096c7;--light-blue: #48cae4;--background-light: #f1f1f1;--text-dark: #333;--text-light: #666;--white: #fff;--border-color: #e0e0e0;--shadow-light: rgba(0, 0, 0, .1);--shadow-medium: rgba(0, 0, 0, .15);--shadow-dark: rgba(0, 0, 0, .2);--border-radius: 12px;--transition: all .3s ease}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;margin:0;display:flex;flex-direction:column;font-family:Arial,sans-serif;line-height:1.6;color:var(--text-dark)}main{flex:1}.navbar{position:fixed;top:0;left:0;width:100%;height:60px;background:var(--primary-color);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;z-index:1000}.navbar a{color:var(--white);margin:0 1rem;text-decoration:none;font-size:1.1rem;font-weight:700;transition:color .3s}.navbar a:hover{color:var(--secondary-color)}.navbar .logo{color:var(--white);font-size:1.5rem;font-weight:700}.navbar .nav-links{list-style:none;display:flex;gap:1.5rem}.navbar .nav-links a{color:var(--white);text-decoration:none;font-weight:500}.menu-toggle{display:none;font-size:1.8rem;color:var(--white);cursor:pointer;padding:.5rem}.hero{background:url(https://storage.googleapis.com/olfatimachurch-b8123.firebasestorage.app/images/hero.webp) no-repeat center center/cover;height:100vh;top:60px;display:flex;align-items:center;justify-content:center;color:var(--white);text-align:center;position:relative;background-attachment:fixed;overflow:hidden}.hero:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#0d1b2aa6;z-index:0}.hero-content{position:relative;z-index:1}.hero-content h1{font-size:3rem}.hero-content p{font-size:1.5rem}.hero-buttons{margin-top:2rem}.btn{display:inline-block;padding:1rem 2.5rem;margin:.5rem 2rem;border-radius:10px;text-decoration:none;font-size:1.2rem;font-weight:700;transition:var(--transition)}.btn-light{background:var(--light-blue);color:#000}.btn-dark{background:var(--primary-color);color:var(--white);border:none}section{padding:4rem 10%;text-align:center}h2{font-size:2rem;margin-bottom:1.5rem;position:relative}h2:after{content:"";display:block;width:60px;height:3px;background:var(--accent-color);margin:.5rem auto}.events,.whatsapp{background:var(--background-light)}.card{background:var(--white);border-radius:15px;width:300px;height:auto;margin:0;padding:0;box-shadow:0 4px 12px var(--shadow-light);overflow:hidden;transition:var(--transition);cursor:pointer;display:flex;flex-direction:column;align-items:center}.card:hover{transform:scale(1.05);box-shadow:0 8px 20px #ffffff40}.card-content{flex:1;padding:1rem;text-align:center}.area-card-content{flex:1;padding:1rem;text-align:start}.card-content h3{font-size:1.3rem;margin-bottom:.5rem;color:var(--primary-color)}.card-content p{font-size:1rem;color:var(--text-dark)}.event-cards,.team-cards,.community-cards{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;margin-top:20px;padding:0 10px}.sisters-section{margin-top:40px;padding-top:30px;border-top:2px solid var(--primary-color)}.sisters-section h2{color:var(--primary-color);text-align:center;margin-bottom:20px}.community-cards{max-width:100%;overflow-x:hidden;width:100%}.event-card-clickable{cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}.event-card-clickable:hover{transform:translateY(-5px);box-shadow:0 10px 25px var(--shadow-medium)}.event-card,.team-card{display:block;width:100%;height:200px;object-fit:cover;border:none;margin:0;padding:0;line-height:0}.community_card{position:relative;background:var(--white);border-radius:10px;box-shadow:0 2px 10px var(--shadow-light);padding:20px;margin:0;cursor:pointer;transition:var(--transition);overflow:hidden;border:1px solid var(--border-color);height:fit-content;flex:0 0 auto;min-width:250px;max-width:300px;width:calc(50% - 10px)}.community_card:hover{transform:translateY(-2px);box-shadow:0 4px 20px var(--shadow-medium)}.area-card-content h3{color:#000;margin-bottom:10px;font-size:1.2em;font-weight:700}.area-card-content p{margin:5px 0;color:var(--text-dark)}.society-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#fffffff7;border-radius:var(--border-radius);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:10;text-align:center;padding:1.2rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#111 #fff}.community_card.show-overlay .society-overlay{opacity:1;pointer-events:all}.society-overlay h4{margin-bottom:.8rem;font-size:1.3rem;font-weight:600;border-bottom:1px solid #fff;padding-bottom:.4rem;letter-spacing:.5px}.society-overlay p{font-size:.95rem!important}.close-overlay{position:absolute;top:12px;right:16px;font-size:28px;font-weight:700;color:var(--secondary-color);cursor:pointer;transition:color .3s ease,transform .2s ease}.close-overlay:hover{color:#ffba43;transform:scale(1.2)}.gallery-wrapper{position:relative;display:flex;align-items:center}.gallery-row{display:flex;gap:1rem;overflow-x:auto;scroll-behavior:smooth;padding:10px}.gallery-card{width:240px;height:160px;flex-shrink:0;overflow:hidden;border-radius:var(--border-radius)}.gallery-card img{width:100%;height:100%;object-fit:cover;border-radius:var(--border-radius);cursor:pointer;transition:transform .2s ease}.gallery-card img:hover{transform:scale(1.05)}.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);background:#00000080;color:var(--white);border:none;font-size:24px;cursor:pointer;padding:10px;border-radius:100%;z-index:10}.scroll-btn.left{left:0}.scroll-btn.right{right:0}.scroll-btn:hover{background:#000000b3}.lightbox{display:none;position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;background:#000000e6;justify-content:center;align-items:center}.lightbox-content{position:relative;max-width:80%;max-height:80%}#lightbox-img{width:100%;height:auto;border-radius:10px}.close{position:absolute;top:20px;right:40px;font-size:40px;color:var(--white);cursor:pointer;z-index:1002}.prev,.next{position:fixed;top:50%;transform:translateY(-50%);font-size:40px;color:var(--white);cursor:pointer;-webkit-user-select:none;user-select:none;padding:10px;background:#0006;border-radius:100%;transition:background .3s ease;z-index:1001}.prev{left:20px}.next{right:20px}.prev:hover,.next:hover{background:#ffffff4d}.contact{text-align:center;padding:4rem 2rem}.find{align-items:center;padding:4rem 2rem}.contact h2{font-size:2.2rem;margin-bottom:2rem;color:var(--primary-color)}.contact-container{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}.contact-card{background:var(--white);border-radius:var(--border-radius);box-shadow:0 6px 16px #0000001f;padding:2rem;flex:1;min-width:300px;max-width:450px;transition:var(--transition)}.contact-card:hover{transform:translateY(-6px);box-shadow:0 10px 24px #0000002e}.contact-form{display:flex;flex-direction:column;gap:1rem}.contact-form input,.contact-form textarea{padding:.9rem 1rem;border:1px solid #ddd;border-radius:8px;font-size:1rem;outline:none;transition:border .2s ease,box-shadow .2s ease}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #0d1b2a1a}.contact-form textarea{resize:none;min-height:120px}.contact-form button{padding:.9rem;border:none;border-radius:8px;background:var(--primary-color);color:var(--white);font-size:1rem;cursor:pointer;transition:background .3s ease}.contact-form button:hover{background:#1b2d45}.contact-info{text-align:left;line-height:1.6}.contact-info h3{margin-bottom:1rem;color:var(--primary-color)}.whatsapp-qr{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:20px}.whatsapp-qr img{border-radius:var(--border-radius);border:4px solid #25D366;background:var(--white);object-fit:contain}.whatsapp-qr .btn{background-color:#25d366;border:none;padding:12px 24px;font-size:1rem;border-radius:8px;color:var(--white);text-decoration:none;transition:background .3s}.whatsapp-qr .btn:hover{background-color:#1ebe5d}.about-container{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;margin:100px 10px 10px;gap:20px}.tab-menu{width:330px;flex-shrink:0;display:flex;flex-direction:column;gap:20px;background:linear-gradient(135deg,#e3f0ff,#b6d0f7);border-radius:var(--border-radius);padding:10px 40px;box-shadow:0 4px 12px #0d1b2a1a}.tab-menu button{background:transparent;border:none;font-size:16px;font-weight:600;color:var(--primary-color);padding:10px 16px;border-radius:8px;cursor:pointer;transition:var(--transition)}.tab-link{background:transparent;border:none;font-size:16px;font-weight:600;color:var(--primary-color);padding:15px 20px;border-radius:8px;cursor:pointer;transition:var(--transition);min-height:60px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.3;white-space:normal;word-wrap:break-word}.tab-menu button.active,.tab-link.active{background:var(--primary-color);color:var(--white)}.tab-content{display:none;height:auto;background:var(--white);padding:24px;border-radius:var(--border-radius);box-shadow:0 4px 16px #0d1b2a1a;flex:1;min-width:0}.tab-content.active{display:flex;flex-direction:column;align-items:center;width:100%;padding:40px}.tab-content.active p{font-size:1.15rem;margin-bottom:1.5rem;color:#222}.articles-feed{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}.article-card{background:var(--white);border-radius:var(--border-radius);box-shadow:0 4px 12px var(--shadow-light);padding:1.5rem;display:flex;flex-direction:column;gap:1rem;width:100%;box-sizing:border-box}.article-description{overflow:hidden}.article-description.expanded{overflow:visible}.article-header h3{margin:0;font-size:1.5rem;color:var(--primary-color)}.article-header .meta{font-size:.9rem;color:var(--text-light)}.article-gallery{position:relative;width:100%;aspect-ratio:16/9;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:10px}.article-gallery img{display:none;width:100%;height:100%;object-fit:cover}.article-gallery img.active{display:block}.article-gallery .gallery-prev,.article-gallery .gallery-next{position:absolute;top:50%;transform:translateY(-50%);font-size:2rem;color:var(--white);border-radius:50%;padding:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .3s ease}.article-gallery .gallery-prev{left:15px}.article-gallery .gallery-next{right:15px}.article-description p{font-size:1rem;color:var(--text-dark);margin-bottom:.5rem}.article-description .full.hidden{display:none}.article-description .read-more{color:var(--primary-color);font-weight:700;text-decoration:none;transition:color .3s ease}.article-description .read-more:hover{color:var(--secondary-color)}.filter-container{display:flex;flex-wrap:wrap;gap:15px;margin:20px 0;width:100%;align-items:center;justify-content:center}.filter-container select,.filter-container input[type=text]{padding:10px 15px;border:2px solid var(--border-color);border-radius:25px;font-size:14px;outline:none;transition:border-color .3s ease;background:var(--white);cursor:pointer}.filter-container select{min-width:150px}.filter-container input[type=text]{min-width:300px;width:100%;max-width:500px}.filter-container select:focus,.filter-container input[type=text]:focus{border-color:#3498db}#articleFilter{flex:0 0 20%;min-width:180px}#searchInput{flex:0 0 60%}#locationFilter{flex:0 0 20%;min-width:180px}.mass-schedule-table{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:1.5rem;background:var(--primary-color);border-radius:var(--border-radius);overflow:hidden;box-shadow:0 2px 8px #1e3a8a0f}.mass-schedule-table th,.mass-schedule-table td{padding:14px 18px;text-align:left}.mass-schedule-table th{background:#e3f0ff;color:var(--primary-color);font-size:1.08rem;font-weight:700;border-bottom:2px solid #4fc3f7}.mass-schedule-table tr:nth-child(2n){background:#e0e1dd}.mass-schedule-table tr:nth-child(odd){background:var(--white)}.mass-schedule-table td{color:#222;font-size:1.04rem}.mass-schedule{display:grid;gap:1rem;margin-top:1rem}.mass-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f8f9fa;border-radius:5px}.mass-day{font-weight:700}.mass-time{color:var(--text-light)}.team-member img{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:1rem;flex-shrink:0}.team-member h3,.team-member p,.community_card h3,.community_card p{text-align:center;margin:0}.team-member h3,.community_card h3{font-size:1.1rem;font-weight:700;margin-bottom:.5rem;color:var(--text-dark)}.team-member p,.community_card p{font-size:.9rem;color:var(--text-light)}.events-grid,.team-grid,.communities-grid,.associations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:1rem}.event-card,.team-member,.community-card,.association-card{background:var(--white);padding:1.5rem;border-radius:8px;box-shadow:0 2px 10px var(--shadow-light);transition:transform .3s ease}.event-card:hover,.team-member:hover,.community-card:hover,.association-card:hover{transform:translateY(-5px)}.loading-spinner{display:flex;justify-content:center;align-items:center;padding:2rem;min-height:100px}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.page-loading{position:fixed;top:0;left:0;width:100%;height:100%;background:#fffffff2;display:flex;align-items:center;justify-content:center;z-index:9999}.page-loading .loading-spinner{background:#fff;padding:3rem;border-radius:10px;box-shadow:0 4px 20px #0000001a;flex-direction:column;text-align:center}footer{background:var(--primary-color);color:var(--white);text-align:center;padding:1rem;margin-bottom:0}.map-container-home{flex:1;margin:auto;width:80vw}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (min-width: 1200px){.team-cards,.community-cards{flex-wrap:wrap;justify-content:center}.community_card{min-width:280px;max-width:300px;width:calc(33.333% - 15px)}}@media (min-width: 769px) and (max-width: 1199px){.team-cards,.community-cards{flex-wrap:wrap;justify-content:center}.community_card{min-width:280px;max-width:300px;width:calc(33.333% - 15px)}}@media (max-width: 1024px){.team-cards,.community-cards{flex-wrap:wrap;justify-content:center;gap:15px}.community_card{min-width:280px;max-width:300px;width:calc(33.333% - 15px)}}@media (max-width: 1200px){.event-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media (max-width: 900px){.menu-toggle{display:block}.navbar .logo{color:var(--white);font-size:1rem;font-weight:700}.navbar .nav-links{flex-direction:column;align-items:center;background:var(--primary-color);position:absolute;top:60px;right:0;width:100vw;border-radius:0 0 var(--border-radius) var(--border-radius);box-shadow:0 6px 16px var(--shadow-dark);display:none;padding:1rem}.navbar.active .nav-links{display:flex}.event-cards{width:100%;flex-direction:column;align-items:center}.with-sidebar{flex-direction:column;margin:20px}.tab-menu{flex-direction:row;justify-content:flex-start;align-items:center;margin:0 40px 40px;width:95%;overflow-x:auto;scrollbar-width:none}.tab-menu h3{display:none}.tab-link{flex:auto;min-height:80px;text-align:center;padding:10px 15px;line-height:1.3;white-space:normal;word-wrap:break-word}.tab-link.active{min-height:80px}.tab-content.active{display:flex;flex-direction:column;align-items:center;margin:auto;width:95%;padding:20px}.about-container{display:flex;flex-direction:column;align-items:center;margin:100px 10px 10px}#searchInput,#locationFilter{flex:0 0 90%;min-width:unset}}@media (max-width: 768px){.hero{height:100vh;background-attachment:scroll;background-size:cover;background-position:center center}.team-cards,.community-cards{flex-wrap:wrap;justify-content:center;gap:15px}.community_card{min-width:280px;max-width:300px;width:calc(33.333% - 15px)}.event-cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px}}@media (max-width: 480px){.hero{height:100vh;background-size:cover;background-position:center center;background-attachment:scroll}.hero-content h1{font-size:1.8rem}.hero-content p{font-size:.9rem}.team-cards,.community-cards{flex-direction:column;align-items:center}.community_card{min-width:280px;max-width:300px;width:calc(33.333% - 15px)}.event-cards{grid-template-columns:1fr;gap:10px}.filter-container input[type=text]{min-width:200px;font-size:12px}}
