Fix .slicknav_menu position to resolve navbar obscuring issue

- Changed .slicknav_menu from position: absolute to position: relative - Added z-index: 1000 for proper layering - This prevents the mobile menu from covering the main navbar
Reduce hero::before overlay opacity from 60% to 30% for better background visibility
2026-03-17 14:32:36 -05:00 · 2026-03-17 14:28:15 -05:00 · 2026-03-17 14:25:43 -05:00 · 2026-03-17 14:23:08 -05:00 · 2026-03-17 14:20:52 -05:00 · 2026-03-17 14:18:31 -05:00
3 changed files with 323 additions and 145 deletions
--- a/about.html
+++ b/about.html
@@ -146,14 +146,14 @@
              </div>

              <div class="about-img-2">
-                <figure class="image-anime reveal">
-                  <img
-                    src="images/match.png"
-                    alt=""
-                    style="width: 348px; height: auto"
-                  />
-                </figure>
-              </div>
+                 <figure class="image-anime reveal">
+                   <img
+                     src="images/match.png"
+                     alt=""
+                     class="team-responsive-img"
+                   />
+                 </figure>
+               </div>
            </div>
            <!-- About Image End -->
          </div>
@@ -369,7 +369,7 @@
                    <img
                      src="images/saim.png"
                      alt=""
-                      style="width: 348px; height: 454px"
+                      class="vision-responsive-img"
                    />
                  </figure>
                </div>
--- a/css/custom.css
+++ b/css/custom.css
@@ -58,6 +58,39 @@
 	--dark-divider-color	: #e9e9e9;
 	--error-color			: rgb(230, 87, 87);
 	--default-font			: "Fira Sans Condensed", sans-serif;
+
+	/* Typography scale using clamp() */
+	--font-size-xs: clamp(0.75rem, 0.7vw + 0.6rem, 0.875rem);
+	--font-size-sm: clamp(0.875rem, 0.8vw + 0.75rem, 1rem);
+	--font-size-base: clamp(1rem, 1vw + 0.75rem, 1.25rem);
+	--font-size-lg: clamp(1.125rem, 1.1vw + 0.875rem, 1.5rem);
+	--font-size-xl: clamp(1.25rem, 1.2vw + 1rem, 1.875rem);
+	--font-size-2xl: clamp(1.5rem, 1.5vw + 1.125rem, 2.25rem);
+	--font-size-3xl: clamp(1.875rem, 1.8vw + 1.25rem, 2.75rem);
+	--font-size-4xl: clamp(2.25rem, 2.2vw + 1.5rem, 3.5rem);
+	--font-size-5xl: clamp(2.75rem, 2.7vw + 1.75rem, 4.5rem);
+
+	/* Spacing scale */
+	--space-1: 0.25rem;
+	--space-2: 0.5rem;
+	--space-3: 0.75rem;
+	--space-4: 1rem;
+	--space-5: 1.25rem;
+	--space-6: 1.5rem;
+	--space-8: 2rem;
+	--space-10: 2.5rem;
+	--space-12: 3rem;
+	--space-16: 4rem;
+	--space-20: 5rem;
+	--space-24: 6rem;
+	--space-32: 8rem;
+
+	/* Container max widths */
+	--container-sm: 540px;
+	--container-md: 720px;
+	--container-lg: 960px;
+	--container-xl: 1140px;
+	--container-fluid: 100%;
 }

 /************************************/
@@ -66,7 +99,7 @@

 body{
 	font-family: var(--default-font);
-	font-size: 16px;
+	font-size: var(--font-size-base);
 	font-weight: 400;
 	line-height: 1.6em;
 	background-color: var(--white-color);
@@ -96,6 +129,158 @@ figure{

 img{
 	max-width: 100%;
+	height: auto;
+	display: block;
+}
+
+/* Ensure all images are responsive */
+img, picture, video, canvas, svg{
+	display: block;
+	height: auto;
+}
+
+/* =========================================
+   SPONSOR SECTION - CRITICAL FIXES
+   ========================================= */
+
+/* Responsive sponsor images */
+.responsive-sponsor-img {
+    width: 100%;
+    height: auto;
+    max-width: 400px;
+    aspect-ratio: 1 / 1;
+    object-fit: contain;
+    display: block;
+}
+
+/* Sponsor logo grid - replaces slider with responsive grid */
+.sponsor-logo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: clamp(16px, 4vw, 24px);
+    padding: var(--space-8) 0;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.sponsor-logo-item {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--white-color);
+    border-radius: 8px;
+    padding: var(--space-4);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.sponsor-logo-item:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+}
+
+.sponsor-logo-item img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    filter: grayscale(100%);
+    opacity: 0.7;
+    transition: all 0.3s ease;
+}
+
+.sponsor-logo-item img:hover {
+    filter: grayscale(0%);
+    opacity: 1;
+}
+
+/* Mobile sponsorship fixes */
+@media (max-width: 768px) {
+    .sponsor-logo-grid {
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+        gap: clamp(12px, 3vw, 16px);
+    }
+    
+    .sponsor-logo-item {
+        aspect-ratio: 4 / 3;
+    }
+}
+
+/* Small mobile */
+@media (max-width: 480px) {
+    .sponsor-logo-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .sponsor-logo-item {
+        aspect-ratio: 1 / 1;
+        padding: var(--space-2);
+    }
+}
+
+/* Mission Image Responsive Styles */
+.mission-responsive-img {
+    width: 100%;
+    height: auto;
+    max-width: 600px;
+    object-fit: cover;
+    border-radius: 8px;
+}
+
+.mission-circle-img {
+    width: 100%;
+    height: auto;
+    max-width: 200px;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    border-radius: 50%;
+    display: block;
+    margin: 0 auto;
+}
+
+/* Mobile optimization */
+@media (max-width: 768px) {
+    .mission-responsive-img {
+        max-width: 100%;
+    }
+    
+    .mission-circle-img {
+        max-width: 150px;
+    }
+}
+
+/* Vision Image Responsive Styles */
+.vision-responsive-img {
+    width: 100%;
+    height: auto;
+    max-width: 500px;
+    object-fit: cover;
+    border-radius: 8px;
+    display: block;
+}
+
+/* Mobile optimization */
+@media (max-width: 768px) {
+    .vision-responsive-img {
+        max-width: 100%;
+    }
+}
+
+/* Team Image Responsive Styles */
+.team-responsive-img {
+    width: 100%;
+    height: auto;
+    max-width: 500px;
+    border-radius: 8px;
+    display: block;
+}
+
+/* Mobile optimization */
+@media (max-width: 768px) {
+    .team-responsive-img {
+        max-width: 100%;
+    }
 }

 a{
@@ -118,11 +303,15 @@ body{
 	overflow-x: clip;
 }

-.container{
-	max-width: 1300px;
+.container {
+	width: 100%;
+	max-width: min(90%, var(--container-xl));
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: var(--space-4);
+	padding-right: var(--space-4);
 }

-.container,
 .container-fluid,
 .container-lg,
 .container-md,
@@ -415,16 +604,17 @@ body{
 }

 .section-title h1{
-	font-size: 80px;
+	font-size: var(--font-size-5xl);
 	font-weight: 700;
-	line-height: 1.3em;
+	line-height: 1.1;
 	text-transform: uppercase;
 	margin-bottom: 0;
 }

 .section-title h2{
-	font-size: 44px;
+	font-size: var(--font-size-3xl);
 	font-weight: 700;
+	line-height: 1.2;
 	text-transform: uppercase;
 	margin-bottom: 0;
 }
@@ -479,14 +669,20 @@ header.main-header .header-sticky.active{
 	right: 0;
 	border-radius: 0;
    transform: translateY(0);
-	background: var(--primary-color);
+	background: transparent;
 	border-bottom: 1px solid var(--divider-color);
 	backdrop-filter: blur(30px);
 }

 .navbar{
-	padding: 30px 0;
+	padding: clamp(15px, 3vh, 25px) 0;
 	align-items: center;
+	transition: all 0.3s ease;
+	background: transparent;
+}
+
+.navbar.scrolled{
+	padding: clamp(10px, 2vh, 15px) 0;
 }

 .navbar-brand{
@@ -647,7 +843,8 @@ header.main-header .header-sticky.active{
 }

 .slicknav_menu{
-	position: absolute;
+    position: relative;
+    z-index: 1000;
    width: 100%;
 	padding: 0;
 	background: var(--accent-color);
@@ -720,8 +917,9 @@ header.main-header .header-sticky.active{
 	background-size: cover;
 	min-height: 100vh;
 	overflow: hidden;
-	padding: 250px 0;
-	margin-top: -118px;
+	padding: clamp(100px, 20vh, 200px) 0;
+	margin-top: 0;
+	z-index: 1;
 }

 .hero::before{
@@ -732,7 +930,7 @@ header.main-header .header-sticky.active{
 	bottom: 0;
 	left: 0;
 	background-color: var(--primary-color);
-	opacity: 60%;
+	opacity: 30%;
 	width: 100%;
 	height: 100%;
 	z-index: 0;
@@ -776,7 +974,7 @@ header.main-header .header-sticky.active{
 .hero-slider-layout .hero-slide{
 	position: relative;
 	min-height: 100vh;
-    padding: 250px 0;
+    padding: clamp(100px, 20vh, 200px) 0;
 }

 .hero.hero-slider:before{
@@ -844,10 +1042,11 @@ header.main-header .header-sticky.active{
    background-color: var(--accent-color);
 }

+/* Responsive hero content */
 .hero-content{
 	position: relative;
 	width: 100%;
-	max-width: 1100px;
+	max-width: min(90%, 1100px);
 	margin: 0 auto;
 	text-align: center;
 	z-index: 2;
@@ -859,7 +1058,7 @@ header.main-header .header-sticky.active{

 .hero-content .section-title p{
 	width: 100%;
-	max-width: 640px;
+	max-width: min(90%, 640px);
 	margin: 0 auto;
 	margin-top: 20px;
 	color: var(--white-color);
@@ -969,7 +1168,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .about-us{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .about-image{
@@ -1086,7 +1285,7 @@ header.main-header .header-sticky.active{

 .join-worship{
 	background-color: var(--secondary-color);
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .join-worship .section-title{
@@ -1242,7 +1441,7 @@ header.main-header .header-sticky.active{
 }

 .counter-title h2{
-	font-size: 56px;
+	font-size: var(--font-size-4xl);
 	color: var(--white-color);
 }

@@ -1264,7 +1463,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .our-mission{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .mission-content-body{
@@ -1331,7 +1530,7 @@ header.main-header .header-sticky.active{

 .our-services{
 	background-color: var(--secondary-color);
-	padding: 100px 0 70px;
+	padding: clamp(60px, 10vh, 80px) 0 clamp(40px, 6vh, 70px);
 }

 .service-item{
@@ -1501,7 +1700,7 @@ header.main-header .header-sticky.active{
 	display: inline-flex;
 	align-items: center;
 	text-transform: uppercase;
-	font-size: 100px;
+	font-size: clamp(40px, 8vw, 100px);
 	line-height: 1em;
 	font-weight: 700;
 	color: transparent;
@@ -1512,6 +1711,13 @@ header.main-header .header-sticky.active{
 	opacity: 50%;
 }

+/* Mobile optimization */
+@media (max-width: 768px) {
+	.service-ticker .scrolling-content span {
+		font-size: clamp(30px, 10vw, 60px);
+	}
+}
+
 .service-ticker .scrolling-content span img{
 	width: 100%;
 	max-width: 45px;
@@ -1534,7 +1740,7 @@ header.main-header .header-sticky.active{

 .our-ministries{
 	background: linear-gradient(180deg, var(--accent-color) 68%, var(--white-color) 32%);
-	padding: 100px 0 50px;
+	padding: clamp(60px, 10vh, 100px) 0 clamp(30px, 5vh, 50px);
 }

 .our-ministries .section-title h2 span,
@@ -1643,7 +1849,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .our-sermons{
-	padding: 50px 0 70px;
+	padding: clamp(40px, 8vh, 70px) 0;
 }

 .sermons-item{
@@ -1774,7 +1980,7 @@ header.main-header .header-sticky.active{
 	background: var(--secondary-color) url('../images/verse-church-bg.png') no-repeat;
 	background-position: right center;
 	background-size: contain;
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .verse-church-btn{
@@ -1815,7 +2021,7 @@ header.main-header .header-sticky.active{

 .cta-box{
 	background-color: var(--accent-color);
-	padding: 50px 0;
+	padding: clamp(40px, 8vh, 60px) 0;
 }

 .cta-box-content{
@@ -1862,7 +2068,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .our-event{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .event-image figure{
@@ -1962,7 +2168,7 @@ header.main-header .header-sticky.active{
 	background: url('../images/donate-now-bg.jpg') no-repeat;
 	background-position: center center;
 	background-size: cover;
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .video-play-button{
@@ -2093,7 +2299,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .our-blog{
-	padding: 100px 0 70px;
+	padding: clamp(60px, 10vh, 80px) 0;
 }

 .blog-item{
@@ -2203,7 +2409,7 @@ header.main-header .header-sticky.active{
 	background: url('../images/subscribe-newsletter-bg.jpg') no-repeat;
 	background-position: center center;
 	background-size: cover;
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .subscribe-newsletter::before{
@@ -2284,7 +2490,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .main-footer{
-	padding: 100px 0 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 	background: var(--primary-color);
 }

@@ -2442,8 +2648,8 @@ header.main-header .header-sticky.active{
 	background: url('../images/page-header-bg.jpg') no-repeat;
 	background-position: center center;
 	background-size: cover;
-	padding: 190px 0 100px;
-	margin-top: -118px;
+	padding: clamp(120px, 15vh, 150px) 0 clamp(60px, 10vh, 80px);
+	margin-top: -50px;
 }

 .page-header::before{
@@ -2466,7 +2672,7 @@ header.main-header .header-sticky.active{
 }

 .page-header-box h1{
-	font-size: 80px;
+	font-size: var(--font-size-5xl);
    font-weight: 700;
 	text-transform: uppercase;
 	text-align: center;
@@ -2474,6 +2680,12 @@ header.main-header .header-sticky.active{
 	margin-bottom: 25px;
 }

+@media (max-width: 768px) {
+	.page-header-box h1 {
+		font-size: var(--font-size-4xl);
+	}
+}
+
 .page-header-box h1 span{
 	color: var(--white-color);
 }
@@ -2512,7 +2724,7 @@ header.main-header .header-sticky.active{

 .vision-mission{
 	background-color: var(--secondary-color);
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .vision-mission .section-row .section-title{
@@ -2599,7 +2811,7 @@ header.main-header .header-sticky.active{
 }

 .what-we-do{
-	padding: 100px 0 70px;
+	padding: clamp(60px, 10vh, 80px) 0;
 }

 .what-we-item{
@@ -2646,7 +2858,7 @@ header.main-header .header-sticky.active{

 .our-team{
 	background: linear-gradient(180deg, var(--accent-color) 68%, var(--white-color) 32%);
-	padding: 100px 0 20px;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .our-team .section-row .section-title h3::before{
@@ -2757,7 +2969,7 @@ header.main-header .header-sticky.active{
 }

 .pastors-message{
-	padding: 50px 0 100px;
+	padding: clamp(40px, 8vh, 80px) 0;
 }

 .pastors-image{
@@ -2809,7 +3021,7 @@ header.main-header .header-sticky.active{

 .core-value{
 	background-color: var(--secondary-color);
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .core-value-faqs-accordion .accordion-item{
@@ -2941,7 +3153,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .page-services{
-	padding: 100px 0 70px;
+	padding: clamp(60px, 10vh, 80px) 0;
 }

 .page-services .service-item{
@@ -2953,7 +3165,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .page-service-single{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .service-single-content{
@@ -3039,13 +3251,13 @@ header.main-header .header-sticky.active{
 }

 .service-entry h2{
-	font-size: 44px;
+	font-size: var(--font-size-3xl);
 	text-transform: uppercase;
 	margin-bottom: 20px;
 }

 .service-entry h3{
-	font-size: 20px;
+	font-size: var(--font-size-base);
 	text-transform: capitalize;
 	margin-bottom: 20px;
 }
@@ -3232,7 +3444,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .page-blog{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .page-blog .blog-item{
@@ -3245,7 +3457,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .page-single-post{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .post-single-meta ol li.breadcrumb-item{
@@ -3305,54 +3517,34 @@ header.main-header .header-sticky.active{
 	margin: 0 0 0.6em;
 }

-.post-entry h1{
-	font-size: 54px;
-}
+.post-entry h1 { font-size: var(--font-size-4xl); }

-.post-entry h2{
-	font-size: 44px;
-}
+.post-entry h2 { font-size: var(--font-size-3xl); }

-.post-entry h3{
-	font-size: 40px;
-}
+.post-entry h3 { font-size: var(--font-size-2xl); }

-.post-entry h4{
-	font-size: 30px;
-}
+.post-entry h4 { font-size: var(--font-size-xl); }

-.post-entry h5{
-	font-size: 24px;
-}
+.post-entry h5 { font-size: var(--font-size-lg); }

-.post-entry h6{
-	font-size: 18px;
-}
+.post-entry h6 { font-size: var(--font-size-base); }

-.post-entry p{
+.post-entry p {
 	margin-bottom: 20px;
+	font-size: var(--font-size-base);
 }

 .post-entry p:last-child{
 	margin-bottom: 0;
 }

-.post-entry p strong{
-	color: var(--primary-color);
-	font-size: 18px;
-	font-weight: 600;
-}
+.post-entry p strong { font-size: var(--font-size-lg); }

 .post-entry ol{
    margin: 0 0 30px;
 }

-.post-entry ol li{
-    margin-bottom: 20px;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--text-color);
-}
+.post-entry ol li { font-size: var(--font-size-base); }

 .post-entry ul{
 	padding: 0;
@@ -3360,13 +3552,7 @@ header.main-header .header-sticky.active{
 	padding-left: 20px;
 }

-.post-entry ul li{
-	font-size: 18px;
-    font-weight: 500;
-    color: var(--primary-color);
-    position: relative;
-    margin-bottom: 18px;
-}
+.post-entry ul li { font-size: var(--font-size-base); }

 .post-entry ul li:last-child{
 	margin-bottom: 0;
@@ -3395,12 +3581,7 @@ header.main-header .header-sticky.active{
    margin-bottom: 30px;
 }

-.post-entry blockquote p{
-	color: var(--primary-color);
-	font-size: 20px;
-	font-weight: 600;
-	line-height: 1.4em;
-}
+.post-entry blockquote p { font-size: var(--font-size-lg); }

 .post-entry blockquote p:last-child{
 	margin-bottom: 0;
@@ -3482,7 +3663,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .page-sermons{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .page-pagination{
@@ -3524,7 +3705,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .page-sermons-single{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .sermons-single-content{
@@ -3737,7 +3918,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .page-campaign{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .campaign-item{
@@ -3876,7 +4057,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .page-campaign-single{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .campaign-single-content{
@@ -3924,7 +4105,7 @@ header.main-header .header-sticky.active{
 }

 .campaign-donate-item h3{
-	font-size: 34px;
+	font-size: var(--font-size-2xl);
 	font-weight: 500;
 	color: var(--white-color);
 	margin-bottom: 10px;
@@ -3944,13 +4125,13 @@ header.main-header .header-sticky.active{
 }

 .campaign-entry h2{
-	font-size: 44px;
+	font-size: var(--font-size-3xl);
 	text-transform: uppercase;
 	margin-bottom: 20px;
 }

 .campaign-entry h3{
-	font-size: 20px;
+	font-size: var(--font-size-base);
 	text-transform: capitalize;
 	margin-bottom: 20px;
 }
@@ -4176,7 +4357,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .page-ministries{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 /**************************************/
@@ -4184,7 +4365,7 @@ header.main-header .header-sticky.active{
 /**************************************/

 .page-ministry-single{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .ministry-single-content{
@@ -4235,13 +4416,13 @@ header.main-header .header-sticky.active{
 }

 .ministry-entry h2{
-	font-size: 44px;
+	font-size: var(--font-size-3xl);
 	text-transform: uppercase;
 	margin-bottom: 20px;
 }

 .ministry-entry h3{
-	font-size: 20px;
+	font-size: var(--font-size-base);
 	text-transform: capitalize;
 	margin-bottom: 20px;
 }
@@ -4363,7 +4544,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .page-team{
-	padding: 100px 0 70px;
+	padding: clamp(60px, 10vh, 80px) 0;
 }

 /************************************/
@@ -4371,7 +4552,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .page-gallery{
-	padding: 100px 0 70px;
+	padding: clamp(60px, 10vh, 80px) 0;
 }

 .page-gallery-box .photo-gallery{
@@ -4398,7 +4579,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .page-contact-us{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .contact-information{
@@ -4467,9 +4648,10 @@ header.main-header .header-sticky.active{
 	padding: 0;
 }

-.google-map-iframe{
+.google-map-iframe {
 	width: 100%;
-	height: 700px;
+	height: clamp(400px, 60vh, 700px);
+	border: 0;
 }

 .google-map-iframe iframe{
@@ -4488,7 +4670,7 @@ header.main-header .header-sticky.active{
 /************************************/

 .error-page{
-	padding: 100px 0;
+	padding: clamp(60px, 10vh, 100px) 0;
 }

 .error-page-image{
@@ -4527,7 +4709,7 @@ header.main-header .header-sticky.active{
 	}
 }

-@media only screen and (max-width: 991px){
+@media only screen and (max-width: 768px){

 	.slicknav_nav li,
 	.slicknav_nav ul{
@@ -5084,7 +5266,7 @@ header.main-header .header-sticky.active{
 	}

 	.service-entry h2{
-		font-size: 36px;
+		font-size: var(--font-size-3xl);
 	}

 	.service-catagery-list{
@@ -5138,17 +5320,11 @@ header.main-header .header-sticky.active{
        margin-bottom: 20px;
 	}

-	.post-entry blockquote p{
-		font-size: 18px;
-	}
+	.post-entry blockquote p { font-size: var(--font-size-lg); }

-	.post-entry h2{
-		font-size: 36px;
-	}
+	.post-entry h2 { font-size: var(--font-size-3xl); }

-	.post-entry ul li{
-		font-size: 16px;
-	}
+	.post-entry ul li { font-size: var(--font-size-base); }

 	.post-tag-links{
 		padding: 0 0px;
@@ -5263,7 +5439,7 @@ header.main-header .header-sticky.active{
 	}

 	.campaign-donate-item h3{
-		font-size: 30px;
+		font-size: var(--font-size-2xl);
 		margin-bottom: 5px;
 	}

@@ -5276,7 +5452,7 @@ header.main-header .header-sticky.active{
 	}

 	.campaign-entry h2{
-		font-size: 36px;
+		font-size: var(--font-size-3xl);
 	}

 	.campaign-gallery img{
@@ -5327,7 +5503,7 @@ header.main-header .header-sticky.active{
 	}

 	.ministry-entry h2{
-		font-size: 36px;
+		font-size: var(--font-size-3xl);
 	}

 	.ministry-entry ul li{
@@ -5754,11 +5930,11 @@ header.main-header .header-sticky.active{
 	}

 	.service-entry h2{
-        font-size: 28px;
+        font-size: var(--font-size-3xl);
    }

 	.service-entry h3{
-        font-size: 18px;
+        font-size: var(--font-size-base);
    }

 	.service-entry ul{
@@ -5804,9 +5980,7 @@ header.main-header .header-sticky.active{
        padding: 55px 20px 20px 20px;
 	}

-	.post-entry h2{
-		font-size: 28px;
-	}
+	.post-entry h2 { font-size: var(--font-size-3xl); }

 	.tag-links{
 		font-size: 20px;
@@ -5891,17 +6065,21 @@ header.main-header .header-sticky.active{
 		width: calc(33.33% - 13.33px);
 	}

-	.campaign-donate-item h3{
-        font-size: 26px;
+.campaign-donate-item h3{
+        font-size: var(--font-size-2xl);
+    }
+
+	.campaign-entry h2{
+        font-size: var(--font-size-3xl);
    }

 	.campaign-donate-item p{
        font-size: 16px;
    }

-	.campaign-entry h2{
-        font-size: 28px;
-    }
+.campaign-entry h2{
+         font-size: var(--font-size-3xl);
+     }

 	.campaign-entry ul{
        display: block;
@@ -5943,7 +6121,7 @@ header.main-header .header-sticky.active{
 	}

 	.ministry-entry h2{
-        font-size: 28px;
+        font-size: var(--font-size-3xl);
    }

 	.ministry-entry ul li{
--- a/index.html
+++ b/index.html
@@ -132,7 +132,7 @@
            <div class="row align-items-center">


-                <div class="col-lg-15">
+                <div class="col-lg-6">
                    <!-- About Content Start -->
                    <div class="about-content">
                        <!-- Section Title Start -->
@@ -337,14 +337,14 @@
                        <!-- Mission Image Start -->
                        <div class="mission-img">
                            <figure class="image-anime reveal">
-                                <img src="images/about.gif" style="width: 450px; height: 750px;" alt="">
+                                <img src="images/about.gif" alt="" class="mission-responsive-img">
                            </figure>
                        </div>
                        <!-- Mission Image End -->

                        <!-- Mission Life Circle Start -->
                        <div class="mission-life-circle">
-                            <img src="images/hero-bg.jpg" alt="" style="width: 160px; height: auto;">
+                            <img src="images/hero-bg.jpg" alt="" class="mission-circle-img">
                        </div>
                        <!-- Mission Life Circle End -->
                    </div>
@@ -369,7 +369,7 @@
            </div>

            <div class="row">
-                <div class="col-lg-18 col-md-6">
+                <div class="col-lg-6 col-md-6">
                    <!-- Service Item Start -->
                    <div class="service-item wow fadeInUp">
                        <!-- Icon Box Start -->
@@ -401,7 +401,7 @@



-                <div class="col-lg-18 col-md-6">
+                <div class="col-lg-6 col-md-6">
                    <!-- Service Item Start -->
                    <div class="service-item wow fadeInUp" data-wow-delay="0.75s">
                        <!-- Icon Box Start -->
@@ -493,7 +493,7 @@
                            <div class="swiper-slide">
                                <div class="service-slider-image">
                                    <figure>
-                                        <img src="images/srisports.png" style="width: 1200px; height: 1200px;" alt="">
+                                        <img src="images/srisports.png" alt="" class="responsive-sponsor-img">
                                    </figure>
                                </div>
                            </div>
Author	SHA1	Message	Date
Krishna Ayyalasomayajula	d12f39b151	Fix .slicknav_menu position to resolve navbar obscuring issue - Changed .slicknav_menu from position: absolute to position: relative - Added z-index: 1000 for proper layering - This prevents the mobile menu from covering the main navbar	2026-03-17 14:32:36 -05:00
Krishna Ayyalasomayajula	dae335b1ff	Reduce hero::before overlay opacity from 60% to 30% for better background visibility	2026-03-17 14:28:15 -05:00
Krishna Ayyalasomayajula	7ac7e472a5	Fix navbar sticky background to remain transparent When the page is scrolled and .header-sticky.active is applied, change background from var(--primary-color) to transparent so the hero background image remains visible.	2026-03-17 14:25:43 -05:00
Krishna Ayyalasomayajula	f0e275a24f	Fix navbar transparent background - Added 'background: transparent;' to .navbar selector - Restores transparent navbar background that may have been removed in Phase 4.2	2026-03-17 14:23:08 -05:00
Krishna Ayyalasomayajula	8d0face1ad	Fix slicknav responsive breakpoint from 991px to 768px	2026-03-17 14:20:52 -05:00
Krishna Ayyalasomayajula	2bec588f07	Restore slicknav_menu to working state - position: absolute, no z-index	2026-03-17 14:18:31 -05:00
Krishna Ayyalasomayajula	04c1db49bc	Restore slicknav_menu z-index to 1000 to fix navbar visibility	2026-03-17 14:17:09 -05:00
Krishna Ayyalasomayajula	8f445ace51	Fix slicknav_menu positioning and z-index to prevent header overlay	2026-03-17 14:13:05 -05:00
Krishna Ayyalasomayajula	b20e5ab276	Add explicit z-index to hero and slicknav for better stacking	2026-03-17 14:06:13 -05:00
Krishna Ayyalasomayajula	db28aa077a	Fix hero section negative margin overlapping navbar	2026-03-17 14:05:39 -05:00
Krishna Ayyalasomayajula	3b952a64d2	Fix all section padding to use responsive clamp() values	2026-03-17 13:54:13 -05:00
Krishna Ayyalasomayajula	9327b2dc29	Fix navbar padding to use responsive clamp() values	2026-03-17 13:49:23 -05:00
Krishna Ayyalasomayajula	2fd186833c	Fix container padding cascade conflict by removing .container from grouped selector	2026-03-17 13:48:02 -05:00
Krishna Ayyalasomayajula	bf9c1997ae	Fix container max width to use responsive min() and CSS custom properties	2026-03-17 13:46:55 -05:00
Krishna Ayyalasomayajula	eb61d3279f	Fix campaign, ministry, and service entry typography to use responsive CSS variables	2026-03-17 13:45:31 -05:00
Krishna Ayyalasomayajula	e6ef8a35d3	Fix page header h1 typography to use responsive CSS variables	2026-03-17 13:42:42 -05:00
Krishna Ayyalasomayajula	98f37fa94d	typo	2026-03-17 13:40:38 -05:00
Krishna Ayyalasomayajula	edece9106f	typo	2026-03-17 13:38:44 -05:00
Krishna Ayyalasomayajula	fb7ede6f9c	typo	2026-03-17 13:37:22 -05:00
Krishna Ayyalasomayajula	38af2d580c	typo	2026-03-17 13:36:08 -05:00
Krishna Ayyalasomayajula	c6ffbfa5bd	typo	2026-03-17 13:34:35 -05:00
Krishna Ayyalasomayajula	5462e41264	typo	2026-03-17 13:33:22 -05:00
Krishna Ayyalasomayajula	ee98b76896	typo	2026-03-17 13:32:15 -05:00
Krishna Ayyalasomayajula	b8d60dbc24	typo	2026-03-17 13:30:46 -05:00
Krishna Ayyalasomayajula	f1b0a840a5	typo	2026-03-17 13:29:15 -05:00
Krishna Ayyalasomayajula	e78e3a980a	typo	2026-03-17 13:28:21 -05:00
Krishna Ayyalasomayajula	3db7c385bd	typo	2026-03-17 13:27:08 -05:00
Krishna Ayyalasomayajula	576b2c98f3	typo	2026-03-17 13:25:36 -05:00