diff --git a/css/About-Us/objectives.css b/css/About-Us/objectives.css
new file mode 100644
index 00000000..1ac09d5d
--- /dev/null
+++ b/css/About-Us/objectives.css
@@ -0,0 +1,539 @@
+@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap")
+
+*{
+    
+    font-family: 'Roboto', sans-serif;
+    margin:0; padding:0;
+    box-sizing: border-box;
+    text-decoration: none;
+    outline: none; border:none;
+    text-transform: none;
+    transition:all .2s linear;
+}
+
+h1, h3{
+    font-family: 'Oswald', sans-serif;
+}
+
+*::selection{
+    background:var(--yellow);
+    
+}
+
+html{
+    font-size: 62.5%;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+}
+
+body{
+    background-size: 100%;
+    overflow-x: hidden;
+    transition: 0.2s linear;
+    /* height:200rem; */
+}
+
+html::-webkit-scrollbar{
+    width:1.4rem;
+}
+
+html::-webkit-scrollbar-track{
+    background:#333;
+}
+
+html::-webkit-scrollbar-thumb{
+    background:var(--yellow);
+}
+
+section{
+    min-height: 100vh;
+    padding:1rem 10%;
+    padding-top: 8.5rem;
+}
+
+.btn{
+    font-size: 1.7rem;
+    padding:.7rem 4rem;
+    border-radius: 5rem;
+    margin-top: 1rem;
+    background:none;
+    color:#333;
+    cursor: pointer;
+    border:.2rem solid var(--yellow);
+}
+
+.btn:hover{
+    background:var(--yellow);
+}
+
+.heading{
+    margin-top: 7vmin;
+    text-align: center;
+    font-size: 7rem;
+    padding:0 .5rem;
+    color:black;
+}
+
+
+header{
+    position: fixed;
+    top:0; left:0;
+    z-index: 1000;
+    width:100%;
+    height:10vmin;
+    background:#fff;
+    padding:1.5rem 10%;
+    box-shadow: 0 .3rem 2rem rgba(0,0,0,.1);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+header .logo img{
+    height:5rem;
+}
+
+header .navbar ul{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    list-style: none;
+}
+
+header .navbar ul li{
+    margin-left: 3rem;
+    text-decoration: none;
+}
+
+header .navbar ul li a{
+    font-size: 1.7rem;
+    color:#666;
+}
+
+header .navbar ul li a.active,
+header .navbar ul li a:hover{
+    color:var(--yellow);
+    text-decoration: none;
+}
+
+header #menu-bar{
+    font-size: 3rem;
+    color:#666;
+    cursor: pointer;
+    display: none;
+}
+
+
+
+.feed{
+    position: fixed; 
+    bottom: 60px; 
+    right: 12px; 
+    width: 20vmin; 
+    z-index: 99; 
+    opacity: 1;
+}
+
+
+
+.projects .row{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.projects .row .internimg{
+    
+    /* margin-left: 5vmin ; */
+    margin:2rem;
+    padding:2rem;
+    flex:1 1 40rem;
+    border-radius: 1rem;
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
+}
+
+.projects .row .video2{
+    height: 75vh;
+    margin:2rem;
+    padding:2rem;
+    flex:1 1 40rem;
+    border-radius: 1rem;
+    
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
+}
+
+
+.projects .row .videotext1{
+    
+    margin:2rem;
+    padding:2rem;
+    flex:1 1 40rem;
+    border-radius: 1rem;
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
+}
+
+
+.projects .row .videotext2{
+    margin:2rem;
+    padding:2rem;
+    flex:1 1 40rem;
+    border-radius: 1rem;
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
+}
+
+.projects .row .content{
+    flex:1 1 40rem;
+}
+
+.projects .row .content .info{
+    padding:1rem 0;
+}
+
+.projects .row .content .info h3{
+    display: flex;
+    align-items: center;
+    font-size: 2.4rem;
+    color:#333;
+}
+
+.projects .row .content .info h3 span{
+    padding-right: 1rem;
+    color:var(--yellow);
+}
+
+.projects .row .content .info p{
+    padding:1rem 0;
+    padding-left: 4.5rem;
+    font-size: 1.5rem;
+    color:#666;
+}
+
+.projects  .form{ 
+    
+    text-align: center;
+}
+
+.textp1{
+    
+    font-size: 2.5vmin;
+}
+
+.textp2{
+    
+    font-size: 3vmin;
+}
+
+.subheading{
+    font-size: 4vmin;
+    text-align: center;
+}
+
+/* Footer Section Starts */
+.footer{
+    background:#282727;
+    padding:1rem 7%;
+}
+
+.footer .box-container{
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.footer .box-container .box{
+    flex:1 1 25rem;
+    margin:2rem;
+}
+
+.footer .box-container .box h3{
+    font-size: 2.5rem;
+    color:#fff;
+    padding:1rem 0;
+    font-weight: normal;
+}
+
+.footer .box-container .box p{
+    font-size: 1.7rem;
+    color:#eee;
+    padding:1rem 0;
+}
+
+.footer .box-container .box a{
+    font-size: 1.7rem;
+    color:#eee;
+    padding:1rem 0;
+    display: block;
+}
+.footer .box-container .box .fa{
+    color:#eee;
+}
+
+.footer .box-container .box a:hover{
+    color:var(--yellow);
+}
+
+.footer .box-container .box p i{
+    padding-right: .5rem;
+    color:var(--yellow);
+}
+
+.footer .credit{
+    font-size: 2rem;
+    text-align: center;
+    border-top: .2rem solid rgba(255,255,255,.7);
+    padding:2rem 1rem;
+    font-weight: normal;
+    letter-spacing: .1rem;
+    color:#fff;
+}
+
+.footer .credit a{
+    color:var(--yellow);
+}
+
+/* Footer Section Ends */
+
+
+
+
+
+
+@media (max-width:991px){
+
+    html{
+        font-size: 55%;
+    }
+
+    .home::before,
+    .home::after{
+        display: none;
+    }
+
+}
+
+@media (max-width:768px){
+
+
+    header #menu-bar{
+        display: block;
+    }
+
+    header .navbar{
+        position: fixed;
+        top:8rem; left:0;
+        width:100%;
+        background:var(--yellow);
+        border-top: .2rem solid rgba(0,0,0,.1);
+        transform:scaleY(0);
+        transform-origin: top;
+        opacity: 0;
+    }
+
+    header .navbar ul{
+        flex-flow: column;
+        padding:2rem;
+    }
+
+    header .navbar ul li{
+        margin:1.5rem;
+        width: 100%;
+    }
+
+    header .navbar ul li a{
+        display: block;
+        color:#fff;
+        padding-left: 2rem;
+        border-left: .2rem solid #fff;
+        font-size: 2rem;
+    }
+
+    header .navbar ul li a:hover,
+    header .navbar ul li a.active{
+        color:#333;
+        border-color: #333;
+    }
+
+    .fa-times{
+        transform:rotate(180deg);
+    }
+
+    header .navbar.nav-toggle{
+        transform:scaleY(1);
+        opacity: 1;
+    }
+
+    .home .content{
+        text-align: center;
+    }
+
+    .home .content h3{
+        font-size: 4.5rem;
+    }
+
+    .talks .row .image{
+        display: none;
+    }
+
+}
+
+
+
+
+
+
+
+
+/*dark mode*/
+.dark-mode,
+.dark-mode nav,
+.dark-mode .btn:hover,
+.dark-mode header{
+  background-color: #121212;
+}
+
+.dark-mode .detail-name,
+.dark-mode .member-social-links a{
+    color: white;
+    font-size: 20px;
+}
+.dark-mode .team-heading,
+.dark-mode .home button,
+.dark-mode .home h3,
+.dark-mode .home p,
+.dark-mode .detail-box-text p,
+.dark-mode .heading,
+.dark-mode .about .content p,
+.dark-mode .about .content h3,
+.dark-mode .btn,
+.dark-mode .projects .row .content .info h3,
+.dark-mode .projects .row .content .info p,
+.dark-mode .counter,
+.dark-mode .navbar a{
+    color: white;
+}
+.dark-mode .logo{
+    border-radius: 100%;
+    background-color: white;
+   
+}
+.dark-mode .member-social-links a:hover{
+    color: black;
+    background-color: white;
+}
+
+
+
+ .counter{
+    position: fixed; 
+    bottom: 0px; 
+    right: 12px; 
+    width: 100px; 
+    z-index: 99; 
+    opacity: 1;
+    font-size:40px;
+    color: aliceblue;
+    border-right: 15px;
+    text-align: center;
+    margin-right: 40px;
+    background-image: linear-gradient(to right,#bdc3c7,#2c3e50);
+}
+
+
+
+
+header button .icon-box .fa{
+    font-size: 40px;
+    background-color: white;
+    color:black;
+}
+
+.dark-mode header button .icon-box .fa{
+    font-size: 40px;
+    background-color: black;
+    color:white;
+   
+}
+
+.dark-mode header .navbar ul li a.active,
+.dark-mode header .navbar ul li a:hover{
+    color:var(--yellow);
+    text-decoration: none;
+}
+
+.dark-mode .view-work-btn{
+    color: #202020;
+    background-color:#ffffff;
+}
+.dark-mode .view-work-btn:hover,
+.dark-mode .cancel:hover{
+    color:#0e0e0e ;
+    background-color: #fff;
+}
+
+.dark-mode .row .video1{
+    background-color: white;
+}
+
+.dark-mode .row .video2{
+    background-color: white;
+}
+
+.dark-mode .textp1 {
+    
+    color: white;
+    font-size: 2.5vmin;
+}
+
+.dark-mode .textp2 {
+    color: white;
+    font-size: 2.5vmin;
+}
+
+
+
+.dark-mode .subheading{
+    color: white;
+    text-align: center;
+}
+
+.spinner-wrapper {
+position: fixed;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+background-color: #222222;
+z-index: 999999;
+justify-content: center;
+-webkit-transition: all 1s ease;
+transition: all 1s ease;
+}
+.spinner-wrapper .pim{
+    align-content: center;
+   background-color: #333;
+    margin-left: 33%;
+    margin-top:50px;
+    
+}
+
+@media (max-width:500px){
+
+    html{
+        font-size: 50%;
+    }
+
+    section{
+        padding:1rem 5%;
+        padding-top: 8.5rem;
+    }
+}
+
+
+
+
+
+.modetoggle{
+
+    height: 5vmax;
+} 
diff --git a/index.html b/index.html
index 1ab3324c..c24f41fd 100644
--- a/index.html
+++ b/index.html
@@ -1,586 +1,586 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SFC FOUNDATIONS</title>
-
-    <!-- favicon -->
-    <link rel="icon" type="image/png" href="images/logo-img - Copy.png" />
-
-    <!-- aos css cdn link  -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
-    <!-- google fonts cdn link  -->
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link
-        href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;500&family=Roboto:wght@100;300;400;500&display=swap"
-        rel="stylesheet">
-    <link href="  https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-    <!-- font awesome cdn link  -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
-
-    <!-- custom css file link  -->
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="css/darkmode.css">
-</head>
-
-<body id="DarkModeTogglerId">
-    <div class="spinner-wrapper">
-        <img class="pim" src="images/home.png">
-    </div>
-    <!-- header section starts  -->
-    <header>
-        <a href="#" class="logo"><img src="images/logo-img.png" alt=""></a>
-        <div id="menu-bar" class="fas fa-hamburger"></div>
-        <nav class="navbar">
-            <ul>
-                <li><a class="active" href="#home">Home</a></li>
-                <li><a href="#about">About-Us</a></li>
-                <li><a href="#projects">Projects</a></li>
-                <li><a href="#joinus">Join Us</a></li>
-                <li><a href="#events">Events</a></li>
-                <li><a href="#news">News</a></li>
-                <li><a href="#contact">Contact us</a></li>
-                <li><a href="#">DONATE</a></li>
-                <li id="darkmodeli"><input type="checkbox" id="toggle" name="checkbox" class="switch" onclick="myfun()">
-                </li>
-            </ul>
-        </nav>
-    </header>
-    <!-- header section ends -->
-
-    <img class="feed" src="images/feed.png">
-    <div class="counter">
-        <p> 190</p>
-    </div>
-
-    <!-- home section starts  -->
-
-    <section class="home" id="home">
-        <div class="content" data-aos="fade-right">
-            <h3>SFC FOUNDATIONS</h3>
-            <p>SFC Foundations-CHD presenting Educate to ElevateTauhfa-e-Taleem. "If the darkness of ignorance is to be
-                dispelled then the sun of education has to rise."So many children are born talented, have immense
-                capacity for understanding...</p>
-            <a href="#"><button class="btn">Explore</button></a>
-        </div>
-        <div class="image" data-aos="fade-up">
-            <img src="images/home.png" alt="logo">
-        </div>
-    </section>
-
-    <!-- home section ends -->
-
-    <!-- about section starts  -->
-    <section class="about" id="about" data-aos="fade-right">
-        <div>
-            <h1 class="heading">About <span>Us</span></h1>
-            <a href="pages/About-Us/knowsfc.html"><button class="btn">Know SFC</button></a>
-            <a href="#"><button class="btn">Objectives</button></a>
-            <a href="#"><button class="btn">Founder's Profile</button></a>
-            <a href="#"><button class="btn">Core Team</button></a>
-            <a href="#"><button class="btn">Working Model</button></a>
-        </div>
-        <img class="banner" src="images/banner.png">
-    </section>
-    <!-- about section ends -->
-
-    <!-- Project section  -->
-
-    <section class="projects" id="projects">
-        <h1 class="heading"> Our Projects <span>List</span> </h1>
-        <ul class="list" data-aos="fade-down">
-            <li class="btn active" data-src="images/SAMPURAN.png">Sampuran</li>
-            <li class="btn" data-src="images/GYAN.png">Gyan</li>
-            <li class="btn" data-src="images/VATAVARAN.jpg">Vatavaran</li>
-        </ul>
-        <div class="row" data-aos="fade-right">
-            <div class="image" data-aos="fade-left">
-                <img src="images/SAMPURAN.png" id="menu-img" alt="">
-            </div>
-            <div class="content">
-                <div class="info">
-                    <h3> <span>01.</span>Sampuran</h3>
-                    <p>holistic project of SFC which focuses to revive the lives that are long lost and forgotten
-                        through numerous activities like Old Age Home Visits, Awareness Drives etc. …</p>
-                    <a href="pages/Projects/Sampuran.html"><button class="btn">Read</button></a>
-                </div>
-                <div class="info">
-                    <h3> <span>02.</span>Gyan</h3>
-                    <p>aims to impart education to the underprivileged Kids. To unveil the hidden talents of the youth
-                        via enhancing their Learning Curve is the true objective of Gyan. …</p>
-                    <a href="pages/Projects/gyan.html"><button class="btn">Read</button></a>
-                </div>
-                <div class="info">
-                    <h3> <span>03.</span>Vatavaran</h3>
-                    <p>is a campaigns focusing on the protection of our environment, animal protection and other
-                        creatures too. Currently, our ongoing campaign, under this project is #Feedingpaws </p>
-                    <a href="pages/Projects/vatavaran.html"><button class="btn">Read</button></a>
-                </div>
-            </div>
-        </div>
-    </section>
-
-
-    <!-- Join Us Section Starts-->
-    <section class="joinus" id="joinus">
-        <div>
-            <h1 class="heading">Join <span>Us</span></h1>
-            <a href="pages/Join-Us/joinus.html"><button class="btn Join">INTERN</button></a>
-            <a href="pages/Join-Us/joinus.html"><button class="btn Join">VOLUNTEER</button></a>
-        </div>
-        <img class="joinimg" src="images/joinusbanner.png">
-    </section>
-    <!-- Join Us Section Ends -->
-
-
-
-
-
-
-    <!-- EVENTS SECTION -->
-    <section class="events" id="events">
-        <h1 class="heading"> Upcoming <span>Events</span> </h1>
-        <div class="box-container">
-            <div class="box" data-aos="fade-up">
-                <img src="images/id.jpg" alt="">
-                <h3>Indradhanush</h3>
-            </div>
-            <div class="box" data-aos="fade-up">
-                <img src="images/reh.jpg" alt="">
-                <h3>Rehnuma</h3>
-            </div>
-        </div>
-    </section>
-
-    <!-- EVENT SECTION END -->
-
-    <!-- NEWS SECTION -->
-
-    <section class="news" id="news">
-        <h1 class="heading"> SFC <span>In News</span> </h1>
-
-
-        <div class="row" data-aos="fade-right">
-
-            <!-- news news item -->
-            <div class="news-item padd-15">
-                <div class="news-item-inner shadow-dark">
-                    <div class="news-img">
-                        <img src="images/n1.jpg" alt="news">
-                    </div>
-                    <div class="news-info">
-                        <h4 class="news-title">The Times Of India</h4>
-                        <p class="news-tags"> Inspired by the Army, Navy, and Air Force’s gesture of thanking corona
-                            warriors, local NGO SFC Foundation.. <a href="#"> Read more </a></p>
-                    </div>
-                </div>
-            </div>
-            <!-- news item end -->
-
-            <!-- news item -->
-            <div class="news-item padd-15">
-                <div class="news-item-inner shadow-dark">
-                    <div class="news-img">
-                        <img src="images/n2.jpeg" alt="news">
-                    </div>
-                    <div class="news-info">
-                        <h4 class="news-title">Fast Media</h4>
-                        <p class="news-tags">Fast Media, a renowned Punjabi newspaper honoured three-days training
-                            programme by.. <a href="#"> Read more</a></p>
-                    </div>
-                </div>
-            </div>
-            <!-- news item end -->
-        </div>
-
-    </section>
-
-    <!-- popular section ends -->
-
-    <!-- talks section starts  -->
-
-    <section class="talks" id="order">
-        <h1 class="heading"> What <span>People Say</span> </h1>
-        <div class="slideshow-container">
-
-            <div class="mySlides">
-                <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                    aliquip ex ea commodo consequat. </q>
-                <p class="author">- Lorem ipsum</p>
-            </div>
-
-            <div class="mySlides">
-                <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                    aliquip ex ea commodo consequat. </q>
-                <p class="author">- Lorem ipsum</p>
-            </div>
-
-            <div class="mySlides">
-                <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                    aliquip ex ea commodo consequat. </q>
-                <p class="author">- Lorem ipsum</p>
-            </div>
-
-            <a class="prev" onclick="plusSlides(-1)">❮</a>
-            <a class="next" onclick="plusSlides(1)">❯</a>
-
-        </div>
-
-        <div class="dot-container">
-            <span class="dot" onclick="currentSlide(1)"></span>
-            <span class="dot" onclick="currentSlide(2)"></span>
-            <span class="dot" onclick="currentSlide(3)"></span>
-        </div>
-
-    </section>
-
-    <hr>
-
-    <!-- talks section ends -->
-    <!--team------------------------>
-    <section id="team">
-        <!--heading---->
-        <strong class="team-heading">Our Team</strong>
-        <!--team-container---------->
-        <div class="team-box-container">
-            <!--member-box-1--->
-            <div class="member-box member-1">
-                <!--img---->
-                <div class="member-img">
-                    <!--front-img-->
-                    <img src="images/man2.png">
-                    <!--hover-img-->
-                    <img class="hover-img" src="images/man1.png">
-                </div>
-                <!--text----->
-                <div class="member-name">
-                    <h3>Person X</h3>
-                    <h5>Executive Director | Tech & Creative Lead</h5>
-                </div>
-            </div>
-            <!--member-box-2--->
-            <div class="member-box member-2">
-                <!--img---->
-                <div class="member-img">
-                    <!--front-img-->
-                    <img src="/images/man1.png">
-                    <!--hover-img-->
-                    <img class="hover-img" src="/images/man2.png">
-                </div>
-                <!--text----->
-                <div class="member-name">
-                    <h3>Person Y</h3>
-                    <h5>Executive Director | Tech & Creative Lead</h5>
-                </div>
-            </div>
-            <!--member-box-3--->
-            <div class="member-box member-3">
-                <!--img---->
-                <div class="member-img">
-                    <!--front-img-->
-                    <img src="/images/man1.png">
-                    <!--hover-img-->
-                    <img class="hover-img" src="/images/man2.png">
-                </div>
-                <!--text----->
-                <div class="member-name">
-                    <h3>Person Z</h3>
-                    <h5>Executive Director | Tech & Creative Lead</h5>
-                </div>
-            </div>
-            <!--detail-box-1----------------------------->
-            <div class="detail-box-2">
-                <div class="member-detail-box">
-                    <!--img---->
-                    <div class="detail-box-img">
-                        <img src="images/man1.png">
-                    </div>
-                    <!--text-->
-                    <div class="detail-box-text">
-                        <!--cancel-btn---->
-                        <a href="javascript:void(0);" class="cancel">
-                            <i class="fas fa-times"></i>
-                        </a>
-                        <!--name-->
-                        <a href="#" class="detail-name">Person X</a>
-                        <!--social-links-->
-                        <div class="member-social-links">
-                            <!--facebook-->
-                            <a href="#"><i class="fab fa-linkedin"></i></a>
-                            <!--instagram-->
-                            <a href="#"><i class="fab fa-instagram"></i></a>
-                            <a href="#"><i class="fab fa-twitter"></i></a>
-                            <a href="#"><i class="fab fa-facebook-f"></i></a>
-                        </div>
-                        <!--position---->
-                        <h5 class="position">Position: Executive Director</h5>
-                        <!--details--->
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                            laboris nisi ut aliquip ex ea commodo consequat. -btn---->
-                            <a href="#" class="view-work-btn">View Work</a>
-                    </div>
-                </div>
-            </div>
-            <!--detail-box-2---------------------------->
-            <div class="detail-box-1">
-                <div class="member-detail-box">
-                    <!--img---->
-                    <div class="detail-box-img">
-                        <img src="images/man1.png">
-                    </div>
-                    <!--text-->
-                    <div class="detail-box-text">
-                        <!--cancel-btn---->
-                        <a href="javascript:void(0);" class="cancel">
-                            <i class="fas fa-times"></i>
-                        </a>
-                        <!--name-->
-                        <a href="#" class="detail-name">Person X</a>
-                        <!--social-links-->
-                        <div class="member-social-links">
-                            <!--facebook-->
-                            <a href="#"><i class="fab fa-linkedin"></i></a>
-                            <!--instagram-->
-                            <a href="#"><i class="fab fa-instagram"></i></a>
-                            <a href="#"><i class="fab fa-twitter"></i></a>
-                            <a href="#"><i class="fab fa-facebook-f"></i></a>
-                        </div>
-                        <!--position---->
-                        <h5 class="position">Position: Executive Director</h5>
-                        <!--details--->
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                            laboris nisi ut aliquip ex ea commodo consequat. -btn---->
-                            <a href="#" class="view-work-btn">View Work</a>
-                    </div>
-                </div>
-            </div>
-            <!--detail-box-3----------------------------->
-            <div class="detail-box-3">
-                <div class="member-detail-box">
-                    <!--img---->
-                    <div class="detail-box-img">
-                        <img src="images/man1.png">
-                    </div>
-                    <!--text-->
-                    <div class="detail-box-text">
-                        <!--cancel-btn---->
-                        <a href="javascript:void(0);" class="cancel">
-                            <i class="fas fa-times"></i>
-                        </a>
-                        <!--name-->
-                        <a href="#" class="detail-name">Person X</a>
-                        <!--social-links-->
-                        <div class="member-social-links">
-                            <!--facebook-->
-                            <a href="#"><i class="fab fa-linkedin"></i></a>
-                            <!--instagram-->
-                            <a href="#"><i class="fab fa-instagram"></i></a>
-                            <a href="#"><i class="fab fa-twitter"></i></a>
-                            <a href="#"><i class="fab fa-facebook-f"></i></a>
-                        </div>
-                        <!--position---->
-                        <h5 class="position">Position: Executive Director</h5>
-                        <!--details--->
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                            laboris nisi ut aliquip ex ea commodo consequat. -btn---->
-                            <a href="#" class="view-work-btn">View Work</a>
-                    </div>
-                </div>
-            </div>
-            <!--detail-box-4----------------------------->
-            <div class="detail-box-4">
-                <div class="member-detail-box">
-                    <!--img---->
-                    <div class="detail-box-img">
-                        <img src="images/man1.png">
-                    </div>
-                    <!--text-->
-                    <div class="detail-box-text">
-                        <!--cancel-btn---->
-                        <a href="javascript:void(0);" class="cancel">
-                            <i class="fas fa-times"></i>
-                        </a>
-                        <!--name-->
-                        <a href="#" class="detail-name">Person X</a>
-                        <!--social-links-->
-                        <div class="member-social-links">
-                            <!--facebook-->
-                            <a href="#"><i class="fab fa-linkedin"></i></a>
-                            <!--instagram-->
-                            <a href="#"><i class="fab fa-instagram"></i></a>
-                            <a href="#"><i class="fab fa-twitter"></i></a>
-                            <a href="#"><i class="fab fa-facebook-f"></i></a>
-                        </div>
-                        <!--position---->
-                        <h5 class="position">Position: Executive Director</h5>
-                        <!--details--->
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                            laboris nisi ut aliquip ex ea commodo consequat. -btn---->
-                            <a href="#" class="view-work-btn">View Work</a>
-                    </div>
-                </div>
-            </div>
-            <!--detail-box-5----------------------------->
-            <div class="detail-box-5">
-                <div class="member-detail-box">
-                    <!--img---->
-                    <div class="detail-box-img">
-                        <img src="images/man1.png">
-                    </div>
-                    <!--text-->
-                    <div class="detail-box-text">
-                        <!--cancel-btn---->
-                        <a href="javascript:void(0);" class="cancel">
-                            <i class="fas fa-times"></i>
-                        </a>
-                        <!--name-->
-                        <a href="#" class="detail-name">Person X</a>
-                        <!--social-links-->
-                        <div class="member-social-links">
-                            <!--facebook-->
-                            <a href="#"><i class="fab fa-linkedin"></i></a>
-                            <!--instagram-->
-                            <a href="#"><i class="fab fa-instagram"></i></a>
-                            <a href="#"><i class="fab fa-twitter"></i></a>
-                            <a href="#"><i class="fab fa-facebook-f"></i></a>
-                        </div>
-                        <!--position---->
-                        <h5 class="position">Position: Executive Director</h5>
-                        <!--details--->
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                            laboris nisi ut aliquip ex ea commodo consequat. -btn---->
-                            <a href="#" class="view-work-btn">View Work</a>
-                    </div>
-                </div>
-            </div>
-            <!--detail-box-6----------------------------->
-            <div class="detail-box-6">
-                <div class="member-detail-box">
-                    <!--img---->
-                    <div class="detail-box-img">
-                        <img src="images/man1.png">
-                    </div>
-                    <!--text-->
-                    <div class="detail-box-text">
-                        <!--cancel-btn---->
-                        <a href="javascript:void(0);" class="cancel">
-                            <i class="fas fa-times"></i>
-                        </a>
-                        <!--name-->
-                        <a href="#" class="detail-name">Person X</a>
-                        <!--social-links-->
-                        <div class="member-social-links">
-                            <!--facebook-->
-                            <a href="#"><i class="fab fa-linkedin"></i></a>
-                            <!--instagram-->
-                            <a href="#"><i class="fab fa-instagram"></i></a>
-                            <a href="#"><i class="fab fa-twitter"></i></a>
-                            <a href="#"><i class="fab fa-facebook-f"></i></a>
-                        </div>
-                        <!--position---->
-                        <h5 class="position">Position: Executive Director</h5>
-                        <!--details--->
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                            laboris nisi ut aliquip ex ea commodo consequat. -btn---->
-                            <a href="#" class="view-work-btn">View Work</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-
-
-    <!-- footer section starts  -->
-
-    <div class="footer">
-
-        <div class="box-container">
-
-            <div class="box">
-                <h3>Contact information</h3>
-                <p>
-                <h3>OFFICE ADDRESS</h3>
-                <div class="map-responsive">
-                    <!-- this iframe contains a random address please update the address accoeding to your requirment -->
-                    <iframe
-                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3766.981047239018!2d72.97651361446418!3d19.23965775180843!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7bbc82e88d5f1%3A0x301dc7daa82d8040!2sAzad%20Nagar!5e0!3m2!1sen!2sin!4v1615011389811!5m2!1sen!2sin"
-                        width="100%" height="100%" style="border:0" allowfullscreen></iframe>
-                </div>
-                </p>
-                <p> <i class="fas fa-envelope"></i> XYZ@gmail.com </p>
-                <p> <i class="fas fa-phone"></i> +91 XXXX XXXXX </p>
-                <p> <i class="fas fa-phone"></i> [contact no]</p>
-            </div>
-
-            <div class="box">
-                <h3>Branch locations</h3>
-                <a href="#">Delhi</a>
-                <a href="#">Tricity</a>
-            </div>
-            <div class="box">
-                <h3>follow us</h3>
-                <a href="https://www.linkedin.com/company/sfc-foundations"><i class="fa fa-linkedin"></i> LinkedIn</a>
-                <a href="https://m.facebook.com/profile.php?id=1630269837076825&ref=content_filter"><i
-                        class="fa fa-facebook"></i> Facebook</a>
-                <a href="https://instagram.com/sfc_foundations?igshid=aydainwtfmeh"><i class="fa fa-instagram"></i>
-                    Instagram</a>
-                <a href="#"> <i class="fa fa-twitter"></i> Twitter</a>
-            </div>
-        </div>
-        <h1 class="credit">Copyright © All right reserved. SFC FOUNDATIONS </h1>
-    </div>
-
-    <!-- footer section ends -->
-
-    <!-- aos js cdn link  -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
-
-    <!-- jquery cdn link  -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-
-    <!-- custom js file link  -->
-    <script src="js/script.js"></script>
-
-    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
-
-
-    <!-- initializing aos  -->
-
-    <script>
-
-        AOS.init({
-            delay: 400,
-            duration: 1000
-        })
-
-    </script>
-    <script>
-        jQuery(document).ready(function ($) {
-            $('.counter').counterUp({
-                delay: 2,
-                time: 1000
-            });
-        });
-    </script>
-
-    <script src="js/jquery.counterup.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
-    <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
-    <script src="https://code.jquery.com/jquery-3.5.1.js"
-        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
-    <script src="js/darkmode.js"></script>
-</body>
-
-</html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SFC FOUNDATIONS</title>
+
+    <!-- favicon -->
+    <link rel="icon" type="image/png" href="images/logo-img - Copy.png" />
+
+    <!-- aos css cdn link  -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
+    <!-- google fonts cdn link  -->
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;500&family=Roboto:wght@100;300;400;500&display=swap"
+        rel="stylesheet">
+    <link href="  https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <!-- font awesome cdn link  -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
+
+    <!-- custom css file link  -->
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/darkmode.css">
+</head>
+
+<body id="DarkModeTogglerId">
+    <div class="spinner-wrapper">
+        <img class="pim" src="images/home.png">
+    </div>
+    <!-- header section starts  -->
+    <header>
+        <a href="#" class="logo"><img src="images/logo-img.png" alt=""></a>
+        <div id="menu-bar" class="fas fa-hamburger"></div>
+        <nav class="navbar">
+            <ul>
+                <li><a class="active" href="#home">Home</a></li>
+                <li><a href="#about">About-Us</a></li>
+                <li><a href="#projects">Projects</a></li>
+                <li><a href="#joinus">Join Us</a></li>
+                <li><a href="#events">Events</a></li>
+                <li><a href="#news">News</a></li>
+                <li><a href="#contact">Contact us</a></li>
+                <li><a href="#">DONATE</a></li>
+                <li id="darkmodeli"><input type="checkbox" id="toggle" name="checkbox" class="switch" onclick="myfun()">
+                </li>
+            </ul>
+        </nav>
+    </header>
+    <!-- header section ends -->
+
+    <img class="feed" src="images/feed.png">
+    <div class="counter">
+        <p> 190</p>
+    </div>
+
+    <!-- home section starts  -->
+
+    <section class="home" id="home">
+        <div class="content" data-aos="fade-right">
+            <h3>SFC FOUNDATIONS</h3>
+            <p>SFC Foundations-CHD presenting Educate to ElevateTauhfa-e-Taleem. "If the darkness of ignorance is to be
+                dispelled then the sun of education has to rise."So many children are born talented, have immense
+                capacity for understanding...</p>
+            <a href="#"><button class="btn">Explore</button></a>
+        </div>
+        <div class="image" data-aos="fade-up">
+            <img src="images/home.png" alt="logo">
+        </div>
+    </section>
+
+    <!-- home section ends -->
+
+    <!-- about section starts  -->
+
+    <div class="about" id="about" data-aos="fade-right">
+        <h1 class="heading">About <span>Us</span></h1>
+        <a href="pages/About-Us/knowsfc.html"><button class="btn">Know SFC</button></a>
+        <a href="pages/About-Us/objectives.html"><button class="btn">Objectives</button></a>
+        <a href="#"><button class="btn">Founder's Profile</button></a>
+        <a href="#"><button class="btn">Core Team</button></a>
+        <a href="#"><button class="btn">Working Model</button></a>
+    </div>
+
+
+    <!-- about section ends -->
+
+    <!-- Project section  -->
+
+    <section class="projects" id="projects">
+        <h1 class="heading"> Our Projects <span>List</span> </h1>
+        <ul class="list" data-aos="fade-down">
+            <li class="btn active" data-src="images/SAMPURAN.png">Sampuran</li>
+            <li class="btn" data-src="images/GYAN.png">Gyan</li>
+            <li class="btn" data-src="images/VATAVARAN.jpg">Vatavaran</li>
+        </ul>
+        <div class="row" data-aos="fade-right">
+            <div class="image" data-aos="fade-left">
+                <img src="images/SAMPURAN.png" id="menu-img" alt="">
+            </div>
+            <div class="content">
+                <div class="info">
+                    <h3> <span>01.</span>Sampuran</h3>
+                    <p>holistic project of SFC which focuses to revive the lives that are long lost and forgotten
+                        through numerous activities like Old Age Home Visits, Awareness Drives etc. …</p>
+                    <a href="pages/Projects/Sampuran.html"><button class="btn">Read</button></a>
+                </div>
+                <div class="info">
+                    <h3> <span>02.</span>Gyan</h3>
+                    <p>aims to impart education to the underprivileged Kids. To unveil the hidden talents of the youth
+                        via enhancing their Learning Curve is the true objective of Gyan. …</p>
+                    <a href="pages/Projects/gyan.html"><button class="btn">Read</button></a>
+                </div>
+                <div class="info">
+                    <h3> <span>03.</span>Vatavaran</h3>
+                    <p>is a campaigns focusing on the protection of our environment, animal protection and other
+                        creatures too. Currently, our ongoing campaign, under this project is #Feedingpaws </p>
+                    <a href="pages/Projects/vatavaran.html"><button class="btn">Read</button></a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+
+    <!-- Join Us Section Starts-->
+    <section class="joinus" id="joinus">
+        <div>
+            <h1 class="heading">Join <span>Us</span></h1>
+            <a href="pages/Join-Us/joinus.html"><button class="btn Join">INTERN</button></a>
+            <a href="pages/Join-Us/joinus.html"><button class="btn Join">VOLUNTEER</button></a>
+        </div>
+        <img class="joinimg" src="images/joinusbanner.png">
+    </section>
+    <!-- Join Us Section Ends -->
+
+
+
+
+
+
+    <!-- EVENTS SECTION -->
+    <section class="events" id="events">
+        <h1 class="heading"> Upcoming <span>Events</span> </h1>
+        <div class="box-container">
+            <div class="box" data-aos="fade-up">
+                <img src="images/id.jpg" alt="">
+                <h3>Indradhanush</h3>
+            </div>
+            <div class="box" data-aos="fade-up">
+                <img src="images/reh.jpg" alt="">
+                <h3>Rehnuma</h3>
+            </div>
+        </div>
+    </section>
+
+    <!-- EVENT SECTION END -->
+
+    <!-- NEWS SECTION -->
+
+    <section class="news" id="news">
+        <h1 class="heading"> SFC <span>In News</span> </h1>
+
+
+        <div class="row" data-aos="fade-right">
+
+            <!-- news news item -->
+            <div class="news-item padd-15">
+                <div class="news-item-inner shadow-dark">
+                    <div class="news-img">
+                        <img src="images/n1.jpg" alt="news">
+                    </div>
+                    <div class="news-info">
+                        <h4 class="news-title">The Times Of India</h4>
+                        <p class="news-tags"> Inspired by the Army, Navy, and Air Force’s gesture of thanking corona
+                            warriors, local NGO SFC Foundation.. <a href="#"> Read more </a></p>
+                    </div>
+                </div>
+            </div>
+            <!-- news item end -->
+
+            <!-- news item -->
+            <div class="news-item padd-15">
+                <div class="news-item-inner shadow-dark">
+                    <div class="news-img">
+                        <img src="images/n2.jpeg" alt="news">
+                    </div>
+                    <div class="news-info">
+                        <h4 class="news-title">Fast Media</h4>
+                        <p class="news-tags">Fast Media, a renowned Punjabi newspaper honoured three-days training
+                            programme by.. <a href="#"> Read more</a></p>
+                    </div>
+                </div>
+            </div>
+            <!-- news item end -->
+        </div>
+
+    </section>
+
+    <!-- popular section ends -->
+
+    <!-- talks section starts  -->
+
+    <section class="talks" id="order">
+        <h1 class="heading"> What <span>People Say</span> </h1>
+        <div class="slideshow-container">
+
+            <div class="mySlides">
+                <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                    aliquip ex ea commodo consequat. </q>
+                <p class="author">- Lorem ipsum</p>
+            </div>
+
+            <div class="mySlides">
+                <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                    aliquip ex ea commodo consequat. </q>
+                <p class="author">- Lorem ipsum</p>
+            </div>
+
+            <div class="mySlides">
+                <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                    aliquip ex ea commodo consequat. </q>
+                <p class="author">- Lorem ipsum</p>
+            </div>
+
+            <a class="prev" onclick="plusSlides(-1)">❮</a>
+            <a class="next" onclick="plusSlides(1)">❯</a>
+
+        </div>
+
+        <div class="dot-container">
+            <span class="dot" onclick="currentSlide(1)"></span>
+            <span class="dot" onclick="currentSlide(2)"></span>
+            <span class="dot" onclick="currentSlide(3)"></span>
+        </div>
+
+    </section>
+
+    <hr>
+
+    <!-- talks section ends -->
+    <!--team------------------------>
+    <section id="team">
+        <!--heading---->
+        <strong class="team-heading">Our Team</strong>
+        <!--team-container---------->
+        <div class="team-box-container">
+            <!--member-box-1--->
+            <div class="member-box member-1">
+                <!--img---->
+                <div class="member-img">
+                    <!--front-img-->
+                    <img src="images/man2.png">
+                    <!--hover-img-->
+                    <img class="hover-img" src="images/man1.png">
+                </div>
+                <!--text----->
+                <div class="member-name">
+                    <h3>Person X</h3>
+                    <h5>Executive Director | Tech & Creative Lead</h5>
+                </div>
+            </div>
+            <!--member-box-2--->
+            <div class="member-box member-2">
+                <!--img---->
+                <div class="member-img">
+                    <!--front-img-->
+                    <img src="/images/man1.png">
+                    <!--hover-img-->
+                    <img class="hover-img" src="/images/man2.png">
+                </div>
+                <!--text----->
+                <div class="member-name">
+                    <h3>Person Y</h3>
+                    <h5>Executive Director | Tech & Creative Lead</h5>
+                </div>
+            </div>
+            <!--member-box-3--->
+            <div class="member-box member-3">
+                <!--img---->
+                <div class="member-img">
+                    <!--front-img-->
+                    <img src="/images/man1.png">
+                    <!--hover-img-->
+                    <img class="hover-img" src="/images/man2.png">
+                </div>
+                <!--text----->
+                <div class="member-name">
+                    <h3>Person Z</h3>
+                    <h5>Executive Director | Tech & Creative Lead</h5>
+                </div>
+            </div>
+            <!--detail-box-1----------------------------->
+            <div class="detail-box-2">
+                <div class="member-detail-box">
+                    <!--img---->
+                    <div class="detail-box-img">
+                        <img src="images/man1.png">
+                    </div>
+                    <!--text-->
+                    <div class="detail-box-text">
+                        <!--cancel-btn---->
+                        <a href="javascript:void(0);" class="cancel">
+                            <i class="fas fa-times"></i>
+                        </a>
+                        <!--name-->
+                        <a href="#" class="detail-name">Person X</a>
+                        <!--social-links-->
+                        <div class="member-social-links">
+                            <!--facebook-->
+                            <a href="#"><i class="fab fa-linkedin"></i></a>
+                            <!--instagram-->
+                            <a href="#"><i class="fab fa-instagram"></i></a>
+                            <a href="#"><i class="fab fa-twitter"></i></a>
+                            <a href="#"><i class="fab fa-facebook-f"></i></a>
+                        </div>
+                        <!--position---->
+                        <h5 class="position">Position: Executive Director</h5>
+                        <!--details--->
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                            laboris nisi ut aliquip ex ea commodo consequat. -btn---->
+                            <a href="#" class="view-work-btn">View Work</a>
+                    </div>
+                </div>
+            </div>
+            <!--detail-box-2---------------------------->
+            <div class="detail-box-1">
+                <div class="member-detail-box">
+                    <!--img---->
+                    <div class="detail-box-img">
+                        <img src="images/man1.png">
+                    </div>
+                    <!--text-->
+                    <div class="detail-box-text">
+                        <!--cancel-btn---->
+                        <a href="javascript:void(0);" class="cancel">
+                            <i class="fas fa-times"></i>
+                        </a>
+                        <!--name-->
+                        <a href="#" class="detail-name">Person X</a>
+                        <!--social-links-->
+                        <div class="member-social-links">
+                            <!--facebook-->
+                            <a href="#"><i class="fab fa-linkedin"></i></a>
+                            <!--instagram-->
+                            <a href="#"><i class="fab fa-instagram"></i></a>
+                            <a href="#"><i class="fab fa-twitter"></i></a>
+                            <a href="#"><i class="fab fa-facebook-f"></i></a>
+                        </div>
+                        <!--position---->
+                        <h5 class="position">Position: Executive Director</h5>
+                        <!--details--->
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                            laboris nisi ut aliquip ex ea commodo consequat. -btn---->
+                            <a href="#" class="view-work-btn">View Work</a>
+                    </div>
+                </div>
+            </div>
+            <!--detail-box-3----------------------------->
+            <div class="detail-box-3">
+                <div class="member-detail-box">
+                    <!--img---->
+                    <div class="detail-box-img">
+                        <img src="images/man1.png">
+                    </div>
+                    <!--text-->
+                    <div class="detail-box-text">
+                        <!--cancel-btn---->
+                        <a href="javascript:void(0);" class="cancel">
+                            <i class="fas fa-times"></i>
+                        </a>
+                        <!--name-->
+                        <a href="#" class="detail-name">Person X</a>
+                        <!--social-links-->
+                        <div class="member-social-links">
+                            <!--facebook-->
+                            <a href="#"><i class="fab fa-linkedin"></i></a>
+                            <!--instagram-->
+                            <a href="#"><i class="fab fa-instagram"></i></a>
+                            <a href="#"><i class="fab fa-twitter"></i></a>
+                            <a href="#"><i class="fab fa-facebook-f"></i></a>
+                        </div>
+                        <!--position---->
+                        <h5 class="position">Position: Executive Director</h5>
+                        <!--details--->
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                            laboris nisi ut aliquip ex ea commodo consequat. -btn---->
+                            <a href="#" class="view-work-btn">View Work</a>
+                    </div>
+                </div>
+            </div>
+            <!--detail-box-4----------------------------->
+            <div class="detail-box-4">
+                <div class="member-detail-box">
+                    <!--img---->
+                    <div class="detail-box-img">
+                        <img src="images/man1.png">
+                    </div>
+                    <!--text-->
+                    <div class="detail-box-text">
+                        <!--cancel-btn---->
+                        <a href="javascript:void(0);" class="cancel">
+                            <i class="fas fa-times"></i>
+                        </a>
+                        <!--name-->
+                        <a href="#" class="detail-name">Person X</a>
+                        <!--social-links-->
+                        <div class="member-social-links">
+                            <!--facebook-->
+                            <a href="#"><i class="fab fa-linkedin"></i></a>
+                            <!--instagram-->
+                            <a href="#"><i class="fab fa-instagram"></i></a>
+                            <a href="#"><i class="fab fa-twitter"></i></a>
+                            <a href="#"><i class="fab fa-facebook-f"></i></a>
+                        </div>
+                        <!--position---->
+                        <h5 class="position">Position: Executive Director</h5>
+                        <!--details--->
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                            laboris nisi ut aliquip ex ea commodo consequat. -btn---->
+                            <a href="#" class="view-work-btn">View Work</a>
+                    </div>
+                </div>
+            </div>
+            <!--detail-box-5----------------------------->
+            <div class="detail-box-5">
+                <div class="member-detail-box">
+                    <!--img---->
+                    <div class="detail-box-img">
+                        <img src="images/man1.png">
+                    </div>
+                    <!--text-->
+                    <div class="detail-box-text">
+                        <!--cancel-btn---->
+                        <a href="javascript:void(0);" class="cancel">
+                            <i class="fas fa-times"></i>
+                        </a>
+                        <!--name-->
+                        <a href="#" class="detail-name">Person X</a>
+                        <!--social-links-->
+                        <div class="member-social-links">
+                            <!--facebook-->
+                            <a href="#"><i class="fab fa-linkedin"></i></a>
+                            <!--instagram-->
+                            <a href="#"><i class="fab fa-instagram"></i></a>
+                            <a href="#"><i class="fab fa-twitter"></i></a>
+                            <a href="#"><i class="fab fa-facebook-f"></i></a>
+                        </div>
+                        <!--position---->
+                        <h5 class="position">Position: Executive Director</h5>
+                        <!--details--->
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                            laboris nisi ut aliquip ex ea commodo consequat. -btn---->
+                            <a href="#" class="view-work-btn">View Work</a>
+                    </div>
+                </div>
+            </div>
+            <!--detail-box-6----------------------------->
+            <div class="detail-box-6">
+                <div class="member-detail-box">
+                    <!--img---->
+                    <div class="detail-box-img">
+                        <img src="images/man1.png">
+                    </div>
+                    <!--text-->
+                    <div class="detail-box-text">
+                        <!--cancel-btn---->
+                        <a href="javascript:void(0);" class="cancel">
+                            <i class="fas fa-times"></i>
+                        </a>
+                        <!--name-->
+                        <a href="#" class="detail-name">Person X</a>
+                        <!--social-links-->
+                        <div class="member-social-links">
+                            <!--facebook-->
+                            <a href="#"><i class="fab fa-linkedin"></i></a>
+                            <!--instagram-->
+                            <a href="#"><i class="fab fa-instagram"></i></a>
+                            <a href="#"><i class="fab fa-twitter"></i></a>
+                            <a href="#"><i class="fab fa-facebook-f"></i></a>
+                        </div>
+                        <!--position---->
+                        <h5 class="position">Position: Executive Director</h5>
+                        <!--details--->
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                            laboris nisi ut aliquip ex ea commodo consequat. -btn---->
+                            <a href="#" class="view-work-btn">View Work</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+
+
+    <!-- footer section starts  -->
+
+    <div class="footer">
+
+        <div class="box-container">
+
+            <div class="box">
+                <h3>Contact information</h3>
+                <p>
+                <h3>OFFICE ADDRESS</h3>
+                <div class="map-responsive">
+                    <!-- this iframe contains a random address please update the address accoeding to your requirment -->
+                    <iframe
+                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3766.981047239018!2d72.97651361446418!3d19.23965775180843!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7bbc82e88d5f1%3A0x301dc7daa82d8040!2sAzad%20Nagar!5e0!3m2!1sen!2sin!4v1615011389811!5m2!1sen!2sin"
+                        width="100%" height="100%" style="border:0" allowfullscreen></iframe>
+                </div>
+                </p>
+                <p> <i class="fas fa-envelope"></i> XYZ@gmail.com </p>
+                <p> <i class="fas fa-phone"></i> +91 XXXX XXXXX </p>
+                <p> <i class="fas fa-phone"></i> [contact no]</p>
+            </div>
+
+            <div class="box">
+                <h3>Branch locations</h3>
+                <a href="#">Delhi</a>
+                <a href="#">Tricity</a>
+            </div>
+            <div class="box">
+                <h3>follow us</h3>
+                <a href="https://www.linkedin.com/company/sfc-foundations"><i class="fa fa-linkedin"></i> LinkedIn</a>
+                <a href="https://m.facebook.com/profile.php?id=1630269837076825&ref=content_filter"><i
+                        class="fa fa-facebook"></i> Facebook</a>
+                <a href="https://instagram.com/sfc_foundations?igshid=aydainwtfmeh"><i class="fa fa-instagram"></i>
+                    Instagram</a>
+                <a href="#"> <i class="fa fa-twitter"></i> Twitter</a>
+            </div>
+        </div>
+        <h1 class="credit">Copyright © All right reserved. SFC FOUNDATIONS </h1>
+    </div>
+
+    <!-- footer section ends -->
+
+    <!-- aos js cdn link  -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
+
+    <!-- jquery cdn link  -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+    <!-- custom js file link  -->
+    <script src="js/script.js"></script>
+
+    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+
+
+    <!-- initializing aos  -->
+
+    <script>
+
+        AOS.init({
+            delay: 400,
+            duration: 1000
+        })
+
+    </script>
+    <script>
+        jQuery(document).ready(function ($) {
+            $('.counter').counterUp({
+                delay: 2,
+                time: 1000
+            });
+        });
+    </script>
+
+    <script src="js/jquery.counterup.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
+    <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.js"
+        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
+    <script src="js/darkmode.js"></script>
+</body>
+
+</html>
diff --git a/js/About-Us/objectives.js b/js/About-Us/objectives.js
new file mode 100644
index 00000000..2616afb5
--- /dev/null
+++ b/js/About-Us/objectives.js
@@ -0,0 +1,156 @@
+$(document).ready(function () {
+
+    $('#menu-bar').click(function () {
+        $(this).toggleClass('fa-times');
+        $('.navbar').toggleClass('nav-toggle');
+    });
+
+    $(window).on('load scroll', function () {
+
+        $('#menu-bar').removeClass('fa-times');
+        $('.navbar').removeClass('nav-toggle');
+
+        $('section').each(function () {
+
+            let top = $(window).scrollTop();
+            let height = $(this).height();
+            let id = $(this).attr('id');
+            let offset = $(this).offset().top - 200;
+
+            if (top > offset && top < offset + height) {
+                $('.navbar ul li a').removeClass('active');
+                $('.navbar').find(`[href="#${id}"]`).addClass('active');
+            }
+
+        });
+
+    });
+
+    $('.list .btn').click(function () {
+        $(this).addClass('active').siblings().removeClass('active');
+        let src = $(this).attr('data-src');
+        $('.projects .row .image img').attr('src', src);
+    });
+
+});
+var isLight = true;
+function darkMode() {
+
+    if (isLight) {
+        document
+            .getElementById("DarkModeTogglerId")
+            .setAttribute("class", "dark-mode");
+        isLight = false;
+    } else {
+        document
+            .getElementById("DarkModeTogglerId")
+            .setAttribute("class", "");
+        isLight = true;
+    }
+}
+
+
+$(document).on('click', '.member-1', function () {
+    $('.detail-box-1').toggleClass('show-details-1')
+    $('.detail-box-2').removeClass('show-details-2')
+    $('.detail-box-3').removeClass('show-details-3')
+    $('.detail-box-4').removeClass('show-details-4')
+    $('.detail-box-5').removeClass('show-details-5')
+    $('.detail-box-6').removeClass('show-details-6')
+});
+/*-2-----------------------------------*/
+$(document).on('click', '.member-2', function () {
+    $('.detail-box-2').toggleClass('show-details-2')
+    $('.detail-box-1').removeClass('show-details-1')
+    $('.detail-box-3').removeClass('show-details-3')
+    $('.detail-box-4').removeClass('show-details-4')
+    $('.detail-box-5').removeClass('show-details-5')
+    $('.detail-box-6').removeClass('show-details-6')
+});
+/*-3-----------------------------------*/
+$(document).on('click', '.member-3', function () {
+    $('.detail-box-3').toggleClass('show-details-3')
+    $('.detail-box-2').removeClass('show-details-2')
+    $('.detail-box-1').removeClass('show-details-1')
+    $('.detail-box-4').removeClass('show-details-4')
+    $('.detail-box-5').removeClass('show-details-5')
+    $('.detail-box-6').removeClass('show-details-6')
+});
+/*-4-----------------------------------*/
+$(document).on('click', '.member-4', function () {
+    $('.detail-box-4').toggleClass('show-details-4')
+    $('.detail-box-2').removeClass('show-details-2')
+    $('.detail-box-3').removeClass('show-details-3')
+    $('.detail-box-1').removeClass('show-details-1')
+    $('.detail-box-5').removeClass('show-details-5')
+    $('.detail-box-6').removeClass('show-details-6')
+});
+/*-5-----------------------------------*/
+$(document).on('click', '.member-5', function () {
+    $('.detail-box-5').toggleClass('show-details-5')
+    $('.detail-box-2').removeClass('show-details-2')
+    $('.detail-box-3').removeClass('show-details-3')
+    $('.detail-box-4').removeClass('show-details-4')
+    $('.detail-box-1').removeClass('show-details-1')
+    $('.detail-box-6').removeClass('show-details-6')
+});
+/*-6-----------------------------------*/
+$(document).on('click', '.member-6', function () {
+    $('.detail-box-6').toggleClass('show-details-6')
+    $('.detail-box-2').removeClass('show-details-2')
+    $('.detail-box-3').removeClass('show-details-3')
+    $('.detail-box-4').removeClass('show-details-4')
+    $('.detail-box-5').removeClass('show-details-5')
+    $('.detail-box-1').removeClass('show-details-1')
+});
+
+/*-cancel------------------*/
+$(document).on('click', '.cancel', function () {
+    $('.detail-box-1').removeClass('show-details-1')
+    $('.detail-box-2').removeClass('show-details-2')
+    $('.detail-box-3').removeClass('show-details-3')
+    $('.detail-box-4').removeClass('show-details-4')
+    $('.detail-box-5').removeClass('show-details-5')
+    $('.detail-box-6').removeClass('show-details-6')
+});
+
+
+var slideIndex = 1;
+showSlides(slideIndex);
+
+function plusSlides(n) {
+    showSlides(slideIndex += n);
+}
+
+function currentSlide(n) {
+    showSlides(slideIndex = n);
+}
+
+function showSlides(n) {
+    var i;
+    var slides = document.getElementsByClassName("mySlides");
+    var dots = document.getElementsByClassName("dot");
+    if (n > slides.length) { slideIndex = 1 }
+    if (n < 1) { slideIndex = slides.length }
+    for (i = 0; i < slides.length; i++) {
+        slides[i].style.display = "none";
+    }
+    for (i = 0; i < dots.length; i++) {
+        dots[i].className = dots[i].className.replace(" active", "");
+    }
+    slides[slideIndex - 1].style.display = "block";
+    dots[slideIndex - 1].className += " active";
+}
+
+
+$(document).ready(function () {
+    //Preloader
+    preloaderFadeOutTime = 600;
+    function hidePreloader() {
+        var preloader = $('.spinner-wrapper');
+        preloader.fadeOut(preloaderFadeOutTime);
+    }
+    hidePreloader();
+});
+
+
diff --git a/pages/About-Us/knowsfc.html b/pages/About-Us/knowsfc.html
index e55fd81b..f3535bdb 100644
--- a/pages/About-Us/knowsfc.html
+++ b/pages/About-Us/knowsfc.html
@@ -61,7 +61,7 @@
 
     <!-- KNOW SFC Starts   -->
 
-    <section class="projects" id="#about">
+    <section class="projects" id="about">
         <h1 class="heading">KNOW SFC</h1>
         <div class="row" id="knowsfc" data-aos="fade-right">
 
diff --git a/pages/About-Us/objectives.html b/pages/About-Us/objectives.html
new file mode 100644
index 00000000..a4a666c8
--- /dev/null
+++ b/pages/About-Us/objectives.html
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SFC FOUNDATIONS | ABOUT-US | OBJECTIVES</title>
+
+    <!-- favicon -->
+    <link rel="icon" type="image/png" href="../../images/logo-img - Copy.png" />
+
+    <!-- aos css cdn link  -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
+    <!-- google fonts cdn link  -->
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;500&family=Roboto:wght@100;300;400;500&display=swap"
+        rel="stylesheet">
+    <link href="  https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <!-- font awesome cdn link  -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
+
+    <!-- custom css file link  -->
+    <link rel="stylesheet" href="../../css/About-Us/objectives.css">
+    <link rel="stylesheet" href="../../css/darkmode.css">
+
+
+
+
+<body id="DarkModeTogglerId">
+    <!-- header section start-->
+
+    <header>
+        <a href="#" class="logo"><img src="../../images/logo-img.png" alt=""></a>
+        <div id="menu-bar" class="fas fa-hamburger"></div>
+        <nav class="navbar">
+            <ul>
+                <li><a href="../../index.html">Home</a></li>
+                <li><a class="active" href="#about">About</a></li>
+                <li><a href="#projects">Projects</a></li>
+                <li><a href="../../pages/Join-Us/joinus.html">Join Us</a></li>
+                <li><a href="#events">Events</a></li>
+                <li><a href="#news">News</a></li>
+                <li><a href="#contact">Contact us</a></li>
+                <li><a href="#">DONATE</a></li>
+                <li id="darkmodeli"><input type="checkbox" id="toggle" name="checkbox" class="switch" onclick="myfun()">
+                </li>
+            </ul>
+        </nav>
+    </header>
+    <!-- header section ends -->
+
+    <img class="feed" src="../../images/feed.png">
+    <div class="counter">
+        <p> 190</p>
+    </div>
+
+
+
+
+    <!-- Objectives Starts   -->
+
+    <section class="projects" id="about">
+        <h1 class="heading">About-US</h1>
+
+
+
+        <div class="row" id="objectives" data-aos="fade-right">
+            <div class="videotext1">
+                <p class="subheading">Objectives</p>
+
+                <p class="textp1">
+                    ⦁ The prime objective is to elevate the society by Focusing on the education of not only slum
+                    children but also Women or Senior Citizens.<br>
+                    ⦁ To levy the foundation for Women Empowerment, Healthcare Development and Human Rights etc.<br>
+                    ⦁ To contribute towards eradication of illiteracy and beacon the youth in the dark through
+                    education.<br>
+                    ⦁ To help the socially isolated senior citizens and disabled persons by encouraging social
+                    interactions with them for their welfare.<br>
+                    ⦁ To inculcate the ethics into the people to make the world a better place to live in.<br>
+                    ⦁ To work for the social upliftment of underpriviledged individual or groups.<br>
+                    ⦁ To organize campaigns and drives to create awareness among the people towards environment, social
+                    evils, poverty, etc.<br>
+                </p>
+            </div>
+        </div>
+
+        <div class="row" id="vision" data-aos="fade-right">
+
+
+
+            <div class="videotext1">
+                <p class="subheading">Vision & Mission</p>
+
+                <p class="textp1">
+                    ⦁ To enlighten children of slum areas with basic education.<br>
+                    ⦁ To encourage and popularize the voluntary work.<br>
+                    ⦁ To engage the youth in productive tasks for the welfare of the society.<br>
+                    ⦁ Upliftment of underprivileged children and weaker sections of the society.<br>
+                    ⦁ Empowerment of the women in all aspects.<br>
+                </p>
+            </div>
+        </div>
+
+    </section>
+
+    <!-- Objectives Ends   -->
+
+
+
+
+
+    <!-- footer section starts  -->
+
+    <div class="footer">
+
+        <div class="box-container">
+
+            <div class="box">
+                <h3>Contact information</h3>
+                <p>
+                <h3>OFFICE ADDRESS</h3>
+                <div class="map-responsive">
+                    <!-- this iframe contains a random address please update the address accoeding to your requirment -->
+                    <iframe
+                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3766.981047239018!2d72.97651361446418!3d19.23965775180843!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7bbc82e88d5f1%3A0x301dc7daa82d8040!2sAzad%20Nagar!5e0!3m2!1sen!2sin!4v1615011389811!5m2!1sen!2sin"
+                        width="100%" height="100%" style="border:0" allowfullscreen></iframe>
+                </div>
+                </p>
+                <p> <i class="fas fa-envelope"></i> XYZ@gmail.com </p>
+                <p> <i class="fas fa-phone"></i> +91 XXXX XXXXX </p>
+                <p> <i class="fas fa-phone"></i> [contact no]</p>
+            </div>
+
+            <div class="box">
+                <h3>Branch locations</h3>
+                <a href="#">Delhi</a>
+                <a href="#">Tricity</a>
+            </div>
+            <div class="box">
+                <h3>follow us</h3>
+                <a href="https://www.linkedin.com/company/sfc-foundations"><i class="fa fa-linkedin"></i>
+                    LinkedIn</a>
+                <a href="https://m.facebook.com/profile.php?id=1630269837076825&ref=content_filter"><i
+                        class="fa fa-facebook"></i> Facebook</a>
+                <a href="https://instagram.com/sfc_foundations?igshid=aydainwtfmeh"><i class="fa fa-instagram"></i>
+                    Instagram</a>
+                <a href="#"> <i class="fa fa-twitter"></i> Twitter</a>
+            </div>
+        </div>
+        <h1 class="credit">Copyright © All right reserved. SFC FOUNDATIONS </h1>
+    </div>
+
+    <!-- footer section ends -->
+
+    <!-- aos js cdn link  -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
+
+    <!-- jquery cdn link  -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+    <!-- custom js file link  -->
+    <script src="../../js/About-Us/objectives.js"></script>
+
+    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+
+
+    <!-- initializing aos  -->
+
+    <script>
+
+        AOS.init({
+            delay: 400,
+            duration: 1000
+        })
+
+    </script>
+    <script>
+        jQuery(document).ready(function ($) {
+            $('.counter').counterUp({
+                delay: 2,
+                time: 1000
+            });
+        });
+    </script>
+    <script src="../../js/About-Us/objectives.js"></script>
+    <script src="js/jquery.counterup.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
+    <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.js"
+        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
+    <script src="../../js/darkmode.js"></script>
+</body>
+
+</html>
\ No newline at end of file