From 760e0394467f0e3ff2b4a41ad497913dd16362cb Mon Sep 17 00:00:00 2001
From: Deepankar Garg <122424189+Deepankar1484@users.noreply.github.com>
Date: Sat, 19 Oct 2024 20:50:03 +0530
Subject: [PATCH] Made a responsive and dashing contact us page  (#163)

* Made the Contact Us Page

* made the responsive contact us page

* A little more modification

* Changes made in back button

* little more changes
---
 .DS_Store                     |  Bin 0 -> 8196 bytes
 assets/css/contact.css        |  188 ++++++
 assets/css/responsiveness.css |  673 ++++++++++----------
 assets/css/style.css          | 1116 +++++++++++++++++----------------
 contact.html                  |  164 +++++
 index.html                    |  719 +++++++++++----------
 6 files changed, 1643 insertions(+), 1217 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 assets/css/contact.css
 create mode 100644 contact.html

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..ac1cc28f5a176c787ece7ca5e9eb51c34d969f58
GIT binary patch
literal 8196
zcmeHM!EO^V5PhbBgjS*zTnZA>enCZlfG%kQiUdUv%83I_(l(W{-H4`$<Eq#G1L6-j
z_sXH1IPxEeJAya1X}p`=h!dh>CbFMn&v^WvtaZErV4BB+bzl`hgGF#<iB*ZoxRe>Y
z;(Klr4dXG|U+?zQWIW@k9jbsTpbDr0s(>o+uPDGXTdYxW?z>T~RRLAtzf?e;4-t!C
z>@jm_A04dh6@XY{w>7p`q(O{4#vU_=9HAK(N_3&dUongeXMg1VVvm_a7Y^euAI4`k
z{)S>~cFrGJcbM3r)~bLiFsp#v-D_CGJ`OMm@9(vV`4NsKX{*&6r9JjF9-g0l+1@#S
zkRKn+9Ul*;?*^_e+gAkj-+3{_F?wNkVBrI2FL;D&c(rl=(=)e*8L#O|s=dPX_-EE4
zcF;r0wM@9OA?pOA&M57B-tuS>&TBudu?1XX%n?7k^gb&1ew^o<W4m|nb8)Va>(`SD
zuDN_kI%QhrljFJfP1d}OO+3XGUf?-8XkweK4!=Jl>jZ;53v;)?VhL@$CEr6~T&0sa
zEkxZ4qFz$t5mlBMcKLZzHH%gIeW3Otcj+MpjCofXBdUinbv!1!P3GT17wr;uq4#xa
z(q`Tko)F9Q5N2USohtOn;Q-^3J;429ZUhVp-nm_Xn|C;O!6V!U-_JItdp?&n+zHiQ
zxxIjh$>y5jXv88Id(0e4m-OrTFG8rP0+&#M1-Ir^x&ODT-~V4iX1ZimKo$5?1x&5g
zZ8hm_PxX>0Iprgk*DPY<mpQZ{ta3jD`2FG!L$)KjN=)oAbI2Z=z6h`~Xr&7LRRw+l
D-b@S_

literal 0
HcmV?d00001

diff --git a/assets/css/contact.css b/assets/css/contact.css
new file mode 100644
index 0000000..926032a
--- /dev/null
+++ b/assets/css/contact.css
@@ -0,0 +1,188 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f4f4f4;
+    color: #333;
+}
+.getback {
+    top: 20px;
+    left: 20px;
+    position: absolute;
+    background-color: #28a745;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 8px;
+    text-align: center;
+    text-decoration: none;
+    font-family: "Arial", sans-serif;
+    font-weight: bold;
+    font-size: 16px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.getback:hover {
+    background-color: #218838;
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+.container2 {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 20px;
+}
+
+.header {
+    text-align: center;
+    padding: 30px 20px;
+}
+
+.header h1 {
+    font-size: 36px;
+    color: green;
+    margin-bottom: 10px;
+}
+
+.header p {
+    font-size: 18px;
+    color: #666;
+}
+
+.contact-wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 40px;
+}
+
+.contact-form {
+    flex: 1 1 500px;
+    background-color: #fff;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+    margin-bottom: 20px;
+}
+
+.contact-form h2 {
+    font-size: 28px;
+    color: #333;
+    margin-bottom: 20px;
+}
+
+.contact-form label {
+    font-size: 16px;
+    color: #666;
+    margin-bottom: 10px;
+    display: block;
+}
+
+.contact-form input,
+.contact-form textarea {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+}
+
+.contact-form textarea {
+    resize: vertical;
+    min-height: 150px;
+}
+
+.contact-form .submit-btn {
+    background-color: green;
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 4px;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.contact-form .submit-btn:hover {
+    background-color: rgb(35, 144, 35);
+}
+
+/* Contact Information Styling */
+.contact-info {
+    flex: 1 1 400px;
+    background-color: #282c34;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    color: white;
+    margin-bottom: 20px;
+}
+
+.contact-info h2 {
+    font-size: 28px;
+    color: green;
+    margin-bottom: 20px;
+    text-align: center;
+    border-bottom: 2px solid green;
+    padding-bottom: 10px;
+}
+
+.contact-info .info {
+    margin-bottom: 30px;
+    display: flex;
+    align-items: center;
+}
+
+.contact-info .info-icon {
+    font-size: 30px;
+    margin-right: 15px;
+    color: green;
+}
+
+.contact-info .info h3 {
+    font-size: 20px;
+    color: #fff;
+    margin-bottom: 5px;
+}
+
+.contact-info .info p {
+    font-size: 16px;
+    color: #ccc;
+    margin-top: 0;
+}
+
+.info-icon svg {
+    width: 30px;
+    height: 30px;
+}
+
+/* Map Section */
+.map {
+    margin-top: 30px;
+    width: 100%;
+    height: 400px;
+    background-color: #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+/* Media queries for responsive design */
+@media (max-width: 768px) {
+    .contact-wrapper {
+        flex-direction: column;
+    }
+
+    .contact-info,
+    .contact-form {
+        flex: 1 1 100%;
+    }
+
+    .contact-info {
+        margin-top: 20px;
+    }
+}
diff --git a/assets/css/responsiveness.css b/assets/css/responsiveness.css
index ce050e9..f49c4d8 100644
--- a/assets/css/responsiveness.css
+++ b/assets/css/responsiveness.css
@@ -1,373 +1,388 @@
 @media only screen and (min-width: 650px) and (max-width: 900px) {
-  .upper_part .links a {
-    text-decoration: none;
-    letter-spacing: 0.5px;
-    font-family: "Poppins", sans-serif;
-    color: rgb(160, 160, 160);
-    font-size: 1.2rem;
-    position: relative;
-    transition: 0.2s;
-  }
-
-  .upper_part .links a:hover {
-    color: white;
-  }
-
-  .upper_part {
-    padding-bottom: 1rem;
-  }
-
-  .links {
-    display: flex;
-    gap: 2rem;
-  }
+    .upper_part .links a {
+        text-decoration: none;
+        letter-spacing: 0.5px;
+        font-family: "Poppins", sans-serif;
+        color: rgb(160, 160, 160);
+        font-size: 1.2rem;
+        position: relative;
+        transition: 0.2s;
+    }
+
+    .upper_part .links a:hover {
+        color: white;
+    }
+
+    .upper_part {
+        padding-bottom: 1rem;
+    }
+
+    .links {
+        display: flex;
+        gap: 2rem;
+    }
 }
 
 @media only screen and (min-width: 600px) and (max-width: 650px) {
-  .upper_part .links a {
-    text-decoration: none;
-    letter-spacing: 0.5px;
-    font-family: "Poppins", sans-serif;
-    color: rgb(160, 160, 160);
-    font-size: 0.8rem;
-    position: relative;
-    transition: 0.2s;
-  }
-
-  .upper_part .links a:hover {
-    color: white;
-  }
-
-  .socialmediaName {
-    font-size: 8px;
-  }
+    .upper_part .links a {
+        text-decoration: none;
+        letter-spacing: 0.5px;
+        font-family: "Poppins", sans-serif;
+        color: rgb(160, 160, 160);
+        font-size: 0.8rem;
+        position: relative;
+        transition: 0.2s;
+    }
+
+    .upper_part .links a:hover {
+        color: white;
+    }
+
+    .socialmediaName {
+        font-size: 8px;
+    }
 }
 
 @media only screen and (min-width: 500px) and (max-width: 600px) {
-  .upper_part .links a {
-    text-decoration: none;
-    letter-spacing: 0.5px;
-    font-family: "Poppins", sans-serif;
-    color: rgb(160, 160, 160);
-    font-size: 0.8rem;
-    position: relative;
-    transition: 0.2s;
-  }
-
-  .upper_part .links a:hover {
-    color: white;
-  }
-
-  .socialmediaName {
-    font-size: 0.8rem;
-  }
-
-  .imgWrapper a span{
-    display: none;
-  }
-  
-  .banner::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    height: 160vh;
-    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
-      url("../images/child-hands-holding-caring-young-green-plant.webp");
-    background-size: cover;
-    background-repeat: repeat;
-    background-attachment: fixed;
-    z-index: -1;
-  }
+    .upper_part .links a {
+        text-decoration: none;
+        letter-spacing: 0.5px;
+        font-family: "Poppins", sans-serif;
+        color: rgb(160, 160, 160);
+        font-size: 0.8rem;
+        position: relative;
+        transition: 0.2s;
+    }
+
+    .upper_part .links a:hover {
+        color: white;
+    }
+
+    .socialmediaName {
+        font-size: 0.8rem;
+    }
+
+    .imgWrapper a span {
+        display: none;
+    }
+
+    .banner::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        height: 160vh;
+        background-image: linear-gradient(
+                rgba(0, 0, 0, 0.6),
+                rgba(29, 29, 29, 0.6)
+            ),
+            url("../images/child-hands-holding-caring-young-green-plant.webp");
+        background-size: cover;
+        background-repeat: repeat;
+        background-attachment: fixed;
+        z-index: -1;
+    }
 }
 
 @media only screen and (min-width: 400px) and (max-width: 500px) {
-  .upper_part .links a {
-    text-decoration: none;
-    letter-spacing: 0.5px;
-    font-family: "Poppins", sans-serif;
-    color: rgb(160, 160, 160);
-    font-size: 1rem;
-    position: relative;
-    transition: 0.2s;
-  }
-
-  .upper_part {
-    height: auto;
-  }
-
-  .links {
-    display: flex;
-    flex-wrap: wrap;
-    height: auto;
-    gap: 1.25rem;
-  }
-
-  .upper_part .links a:hover {
-    color: white;
-  }
-
-  .socialmediaTextWrapper {
-    display: none;
-  }
-
-  .links .column {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 7px;
-    width: 140px;
-  }
-
-  .footer {
-    background-color: #141414;
-    box-sizing: border-box;
-    border-top: 1px solid black;
-    color: rgb(160, 160, 160);
-    font-family: "Poppins", sans-serif;
-    width: 100%;
-    padding: 0.5rem 2rem;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  .quickLinkTextWrapper {
-    display: flex;
-    /* justify-content: center; */
-    /* padding-left: 10rem; */
-    align-items: center;
-    /* gap: 3rem; */
-    width: 100%;
-  }
-
-  .upper_part {
-    padding-bottom: 12px;
-  }
-
-  .social_medias {
-    padding-top: 20px;
-    gap: 20px;
-  }
-
-  .imgWrapper a span{
-    display: none;
-  }
+    .upper_part .links a {
+        text-decoration: none;
+        letter-spacing: 0.5px;
+        font-family: "Poppins", sans-serif;
+        color: rgb(160, 160, 160);
+        font-size: 1rem;
+        position: relative;
+        transition: 0.2s;
+    }
+
+    .upper_part {
+        height: auto;
+    }
+
+    .links {
+        display: flex;
+        flex-wrap: wrap;
+        height: auto;
+        gap: 1.25rem;
+    }
+
+    .upper_part .links a:hover {
+        color: white;
+    }
+
+    .socialmediaTextWrapper {
+        display: none;
+    }
+
+    .links .column {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 7px;
+        width: 140px;
+    }
+
+    .footer {
+        background-color: #141414;
+        box-sizing: border-box;
+        border-top: 1px solid black;
+        color: rgb(160, 160, 160);
+        font-family: "Poppins", sans-serif;
+        width: 100%;
+        padding: 0.5rem 2rem;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .quickLinkTextWrapper {
+        display: flex;
+        /* justify-content: center; */
+        /* padding-left: 10rem; */
+        align-items: center;
+        /* gap: 3rem; */
+        width: 100%;
+    }
+
+    .upper_part {
+        padding-bottom: 12px;
+    }
+
+    .social_medias {
+        padding-top: 20px;
+        gap: 20px;
+    }
+
+    .imgWrapper a span {
+        display: none;
+    }
 }
 
 @media only screen and (min-width: 400px) and (max-width: 440px) {
-  .socialmediaName {
-    font-size: 1rem;
-  }
-  .social_medias {
-    gap: 20px;
-  }
+    .socialmediaName {
+        font-size: 1rem;
+    }
+    .social_medias {
+        gap: 20px;
+    }
 }
 
 @media only screen and (min-width: 300px) and (max-width: 399px) {
-  .upper_part .links a {
-    text-decoration: none;
-    letter-spacing: 0.5px;
-    font-family: "Poppins", sans-serif;
-    color: rgb(160, 160, 160);
-    font-size: 15px;
-    position: relative;
-    transition: 0.2s;
-  }
-
-  .upper_part {
-    height: auto;
-  }
-
-  .links {
-    display: flex;
-    flex-wrap: wrap;
-    height: auto;
-    gap: 1.25rem;
-  }
-
-  .upper_part .links a:hover {
-    color: white;
-  }
-
-  .socialmediaTextWrapper {
-    display: none;
-  }
-
-  .links .column {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 7px;
-    width: 200px;
-  }
-
-  .footer {
-    background-color: #141414;
-    box-sizing: border-box;
-    border-top: 1px solid black;
-    color: rgb(160, 160, 160);
-    font-family: "Poppins", sans-serif;
-    width: 100%;
-    padding: 0.5rem 2rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  .quickLinkTextWrapper {
-    display: flex;
-    /* justify-content: center; */
-    /* padding-left: 10rem; */
-    align-items: center;
-    /* gap: 3rem; */
-    width: 100%;
-  }
-
-  .socialmediaName {
-    font-size: 10px;
-  }
-
-  .social_medias {
-    padding-top: 20px;
-    gap: 15px;
-  }
-
-  .imgWrapper a span{
-    display: none;
-  }
+    .upper_part .links a {
+        text-decoration: none;
+        letter-spacing: 0.5px;
+        font-family: "Poppins", sans-serif;
+        color: rgb(160, 160, 160);
+        font-size: 15px;
+        position: relative;
+        transition: 0.2s;
+    }
+
+    .upper_part {
+        height: auto;
+    }
+
+    .links {
+        display: flex;
+        flex-wrap: wrap;
+        height: auto;
+        gap: 1.25rem;
+    }
+
+    .upper_part .links a:hover {
+        color: white;
+    }
+
+    .socialmediaTextWrapper {
+        display: none;
+    }
+
+    .links .column {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 7px;
+        width: 200px;
+    }
+
+    .footer {
+        background-color: #141414;
+        box-sizing: border-box;
+        border-top: 1px solid black;
+        color: rgb(160, 160, 160);
+        font-family: "Poppins", sans-serif;
+        width: 100%;
+        padding: 0.5rem 2rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .quickLinkTextWrapper {
+        display: flex;
+        /* justify-content: center; */
+        /* padding-left: 10rem; */
+        align-items: center;
+        /* gap: 3rem; */
+        width: 100%;
+    }
+
+    .socialmediaName {
+        font-size: 10px;
+    }
+
+    .social_medias {
+        padding-top: 20px;
+        gap: 15px;
+    }
+
+    .imgWrapper a span {
+        display: none;
+    }
 }
 
 @media only screen and (min-width: 250px) and (max-width: 299px) {
-  .upper_part .links a {
-    text-decoration: none;
-    letter-spacing: 0.5px;
-    font-family: "Poppins", sans-serif;
-    color: rgb(160, 160, 160);
-    font-size: 15px;
-    position: relative;
-    transition: 0.2s;
-  }
-
-  .upper_part {
-    height: auto;
-  }
-
-  .links {
-    display: flex;
-    flex-wrap: wrap;
-    height: auto;
-    gap: 1.25rem;
-  }
-
-  .upper_part .links a:hover {
-    color: white;
-  }
-
-  .upper_part {
-    padding-bottom: 12px;
-  }
-
-  .socialmediaTextWrapper {
-    display: none;
-  }
-
-  .links .column {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 7px;
-    width: 200px;
-  }
-
-  .footer {
-    background-color: #141414;
-    box-sizing: border-box;
-    border-top: 1px solid black;
-    color: rgb(160, 160, 160);
-    font-family: "Poppins", sans-serif;
-    width: 100%;
-    padding: 0.5rem 2rem;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  .quickLinkTextWrapper {
-    display: flex;
-    /* justify-content: center; */
-    /* padding-left: 10rem; */
-    align-items: center;
-    /* gap: 3rem; */
-    width: 100%;
-  }
+    .upper_part .links a {
+        text-decoration: none;
+        letter-spacing: 0.5px;
+        font-family: "Poppins", sans-serif;
+        color: rgb(160, 160, 160);
+        font-size: 15px;
+        position: relative;
+        transition: 0.2s;
+    }
+
+    .upper_part {
+        height: auto;
+    }
+
+    .links {
+        display: flex;
+        flex-wrap: wrap;
+        height: auto;
+        gap: 1.25rem;
+    }
+
+    .upper_part .links a:hover {
+        color: white;
+    }
+
+    .upper_part {
+        padding-bottom: 12px;
+    }
+
+    .socialmediaTextWrapper {
+        display: none;
+    }
+
+    .links .column {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 7px;
+        width: 200px;
+    }
+
+    .footer {
+        background-color: #141414;
+        box-sizing: border-box;
+        border-top: 1px solid black;
+        color: rgb(160, 160, 160);
+        font-family: "Poppins", sans-serif;
+        width: 100%;
+        padding: 0.5rem 2rem;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .quickLinkTextWrapper {
+        display: flex;
+        /* justify-content: center; */
+        /* padding-left: 10rem; */
+        align-items: center;
+        /* gap: 3rem; */
+        width: 100%;
+    }
 }
 
 .MenuBar {
-  display: none;
+    display: none;
 }
 
 @media (max-width: 1272px) {
-  nav .nav_buttons {
-    width: 45%;
-  }
+    nav .nav_buttons {
+        width: 45%;
+    }
 }
 
 @media (max-width: 995px) {
-  #nav-text {
-    display: none;
-  }
-
-  .MenuBar {
-    display: contents;
-  }
+    #nav-text {
+        display: none;
+    }
+
+    .MenuBar {
+        display: contents;
+    }
+    .contact {
+        flex-direction: column;
+    }
+    .contact-container {
+        max-width: 350px;
+    }
+    .map-section iframe {
+        border: none;
+        width: 350px;
+        height: 300px;
+        border-radius: 0.75rem;
+    }
 }
 
 @media (max-width: 412px) {
-  .Video {
-    margin: 2em auto;
-    width: 100%;
-    height: 40vh;
-  }
-  .glass {
-    padding: 1rem; /* Less padding around About block content */
-  }
+    .Video {
+        margin: 2em auto;
+        width: 100%;
+        height: 40vh;
+    }
+    .glass {
+        padding: 1rem; /* Less padding around About block content */
+    }
 }
 
 @media (max-width: 395px) {
-  .image_container {
-    padding: 0;
-  }
+    .image_container {
+        padding: 0;
+    }
 }
 
 @media (max-width: 377px) {
-  .image_container {
-    padding: 0;
-  }
+    .image_container {
+        padding: 0;
+    }
 }
 
 @media (max-width: 285px) {
-  .image_container {
-    padding: 0;
-  }
-
-  .locations {
-    margin: 0;
-  }
-
-  .locations .country_images {
-    background-position: center;
-    background-size: cover;
-    width: 72%;
-  }
+    .image_container {
+        padding: 0;
+    }
+
+    .locations {
+        margin: 0;
+    }
+
+    .locations .country_images {
+        background-position: center;
+        background-size: cover;
+        width: 72%;
+    }
 }
 
 @media (max-width: 375px) {
-  .logo img {
-    width: 130px;
-  }
+    .logo img {
+        width: 130px;
+    }
 }
diff --git a/assets/css/style.css b/assets/css/style.css
index d9031b4..c701ada 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -5,921 +5,927 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
 
 * {
-  scroll-behavior: smooth;
+    scroll-behavior: smooth;
 }
 
 /*scroll to top button*/
 #scrollToTopBtn {
-  display: none;
-  position: fixed;
-  bottom: 20px;
-  right: 30px;
-  z-index: 99;
-  border: none;
-  outline: none;
-  background-color: #555;
-  color: white;
-  cursor: pointer;
-  padding: 10px;
-  border-radius: 5px;
-  font-size: 12px;
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 30px;
+    z-index: 99;
+    border: none;
+    outline: none;
+    background-color: #555;
+    color: white;
+    cursor: pointer;
+    padding: 10px;
+    border-radius: 5px;
+    font-size: 12px;
 }
 
 #scrollToTopBtn:hover {
-  background-color: #333;
+    background-color: #333;
 }
 /* Menu Bar */
 
 .menu-container {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-  z-index: 2;
-  align-items: center;
-  justify-content: center;
-  display: none;
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+    z-index: 2;
+    align-items: center;
+    justify-content: center;
+    display: none;
 }
 
 .menu {
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-  background: rgba(30, 23, 20, 0.575);
-  width: 100%;
-  height: 100vh;
-  text-align: center;
-  position: relative;
-  color: #000;
-  z-index: 3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+    background: rgba(30, 23, 20, 0.575);
+    width: 100%;
+    height: 100vh;
+    text-align: center;
+    position: relative;
+    color: #000;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .close-button {
-  position: absolute;
-  top: 10px;
-  right: 28px;
-  font-size: 3.2rem;
-  cursor: pointer;
-  color: #fff;
-  text-shadow: 2x solid black;
+    position: absolute;
+    top: 10px;
+    right: 28px;
+    font-size: 3.2rem;
+    cursor: pointer;
+    color: #fff;
+    text-shadow: 2x solid black;
 }
 
 .close-button:hover {
-  color: green;
-  outline: rgb(74, 18, 18);
+    color: green;
+    outline: rgb(74, 18, 18);
 }
 
 .menu ul {
-  list-style: none;
-  padding: 0;
+    list-style: none;
+    padding: 0;
 }
 
 .menu ul li {
-  margin: 20px 0;
-  text-align: center;
+    margin: 20px 0;
+    text-align: center;
 }
 
 .menu ul li a {
-  text-decoration: none;
-  color: #fff;
-  font-size: 24px;
-  display: block;
+    text-decoration: none;
+    color: #fff;
+    font-size: 24px;
+    display: block;
 }
 
 .menu ul li a:hover {
-  color: green;
+    color: green;
 }
 
 .menu-button {
-  cursor: pointer;
-  background: transparent;
-  color: #03a254;
-  /* text-align:; */
-  display: block;
-  justify-content: end;
-  align-items: end;
-  font-size: 2.2rem;
-  padding: 15px 20px 0px;
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  z-index: 1;
+    cursor: pointer;
+    background: transparent;
+    color: #03a254;
+    /* text-align:; */
+    display: block;
+    justify-content: end;
+    align-items: end;
+    font-size: 2.2rem;
+    padding: 15px 20px 0px;
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    z-index: 1;
 }
 
 .menu-button:hover {
-  color: green;
+    color: green;
 }
 
 /*  */
 .quickLinkTextWrapper {
-  padding-top: 1rem;
-  display: flex;
-  justify-content: center;
-  /* padding-left: 10rem; */
-  align-items: center;
-  gap: 3rem;
-  width: 70%;
+    padding-top: 1rem;
+    display: flex;
+    justify-content: center;
+    /* padding-left: 10rem; */
+    align-items: center;
+    gap: 3rem;
+    width: 70%;
 }
 
 .socialmediaTextWrapper {
-  display: flex;
-  justify-content: center;
-  width: 10%;
+    display: flex;
+    justify-content: center;
+    width: 10%;
 }
 
 /* things to do/ */
 /* transistion part left of social media  */
 
 body {
-  margin: 0px;
-  padding: 0px;
-  font-family: sans-serif;
-  /* height: 600vh; */
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  flex-wrap: nowrap;
-  position: relative;
+    margin: 0px;
+    padding: 0px;
+    font-family: sans-serif;
+    /* height: 600vh; */
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    position: relative;
 }
 
 html {
-  scroll-behavior: smooth;
+    scroll-behavior: smooth;
 }
 
 .section {
-  margin-bottom: 5rem;
+    margin-bottom: 5rem;
 }
 
 .banner {
-  height: 100vh;
-  display: grid;
-  grid-template-rows: 10% 1fr;
-  margin-bottom: 0;
+    height: 100vh;
+    display: grid;
+    grid-template-rows: 10% 1fr;
+    margin-bottom: 0;
 }
 
 .banner::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  height: 100vh;
-  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
-    url("../images/child-hands-holding-caring-young-green-plant.webp");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  z-index: -1;
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 100vh;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
+        url("../images/child-hands-holding-caring-young-green-plant.webp");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    z-index: -1;
 }
 
 nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0px 8%;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  background-color: transparent; /* Start as transparent */
-  z-index: 10;
-  height: 90px;
-  transition: background-color 0.3s ease; 
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 8%;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background-color: transparent; /* Start as transparent */
+    z-index: 10;
+    height: 90px;
+    transition: background-color 0.3s ease;
 }
 
 /* Class to apply dark background */
 nav.dark {
-  background-color: rgba(0, 0, 0, 0.829); 
+    background-color: rgba(0, 0, 0, 0.829);
 }
 
-
 nav .logo img {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 nav .nav_buttons {
-  display: flex;
-  justify-content: space-between;
-  padding: 0px;
-  margin: 0px;
-  height: 100%;
-  width: 35%;
-  position: relative;
+    display: flex;
+    justify-content: space-between;
+    padding: 0px;
+    margin: 0px;
+    height: 100%;
+    width: 35%;
+    position: relative;
 }
 
 .nav_buttons .nav_button {
-  text-decoration: none;
-  color: #bbbbbb;
-  font-family: "Poppins", sans-serif;
-  font-weight: bolder;
-  letter-spacing: 0.5px;
+    text-decoration: none;
+    color: #bbbbbb;
+    font-family: "Poppins", sans-serif;
+    font-weight: bolder;
+    letter-spacing: 0.5px;
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-  font-size: 14px;
-  cursor: pointer;
+    font-size: 14px;
+    cursor: pointer;
 
-  transition-duration: 0.3s;
-  position: relative;
-  text-wrap: nowrap;
+    transition-duration: 0.3s;
+    position: relative;
+    text-wrap: nowrap;
 }
 
 .nav_buttons .nav_button::after {
-  content: "";
-  position: absolute;
-  bottom: 30%;
-  left: 15%;
+    content: "";
+    position: absolute;
+    bottom: 30%;
+    left: 15%;
 
-  height: 2px;
-  width: 0;
+    height: 2px;
+    width: 0;
 
-  background-color: rgb(51, 175, 20);
-  border-radius: 20px;
-  transition: 0.3s;
+    background-color: rgb(51, 175, 20);
+    border-radius: 20px;
+    transition: 0.3s;
 }
 
 .nav_buttons .nav_button:hover::after {
-  width: 70%;
+    width: 70%;
 }
 
 .nav_buttons .nav_button:hover {
-  color: rgb(255, 255, 255);
-  transform: scale(1.1);
+    color: rgb(255, 255, 255);
+    transform: scale(1.1);
 }
 
 .banner .body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-  flex-direction: column;
-  gap: 2%;
+    flex-direction: column;
+    gap: 2%;
 }
 
 .body .text {
-  padding-top: 900px;
-  color: white;
-  font-size: 18px;
+    padding-top: 900px;
+    color: white;
+    font-size: 18px;
 
-  text-align: center;
+    text-align: center;
 }
 
 .text .Big_Text {
-  font-size: 50px;
-  font-weight: bold;
-  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.514);
+    font-size: 50px;
+    font-weight: bold;
+    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.514);
 }
 
 .body .page_buttons {
-  padding-top: 15px;
-  display: flex;
-  justify-content: space-between;
+    padding-top: 15px;
+    display: flex;
+    justify-content: space-between;
 }
 
 .page_buttons button {
-  --color_1: #ffffff;
-  color: #ffffff;
-  background: none;
-  font-family: "Poppins", sans-serif;
-  font-size: 14px;
+    --color_1: #ffffff;
+    color: #ffffff;
+    background: none;
+    font-family: "Poppins", sans-serif;
+    font-size: 14px;
 
-  letter-spacing: 1px;
-  cursor: pointer;
+    letter-spacing: 1px;
+    cursor: pointer;
 
-  padding: 15px 25px;
-  margin: 10px;
+    padding: 15px 25px;
+    margin: 10px;
 
-  border: 1px solid var(--color_1);
+    border: 1px solid var(--color_1);
 
-  transition: 0.5s;
-  position: relative;
-  overflow: hidden;
+    transition: 0.5s;
+    position: relative;
+    overflow: hidden;
 }
 
 .page_buttons .two {
-  color: #000000;
+    color: #000000;
 }
 
 .page_buttons .one:hover {
-  color: #000000;
+    color: #000000;
 }
 
 .page_buttons .two:hover {
-  color: #ffffff;
+    color: #ffffff;
 }
 
 .page_buttons button::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  height: 0;
-  width: 100%;
-  background: var(--color_1);
-  transition: 0.5s;
-  z-index: -1;
+    content: "";
+    position: absolute;
+    left: 0;
+    height: 0;
+    width: 100%;
+    background: var(--color_1);
+    transition: 0.5s;
+    z-index: -1;
 }
 
 .one::before {
-  top: 0;
-  border-radius: 0 0 50% 50%;
+    top: 0;
+    border-radius: 0 0 50% 50%;
 }
 
 .two::before {
-  bottom: 0;
-  border-radius: 50% 50% 0 0;
+    bottom: 0;
+    border-radius: 50% 50% 0 0;
 }
 
 .page_buttons .two::before {
-  height: 180%;
+    height: 180%;
 }
 
 .page_buttons .one:hover::before {
-  height: 180%;
+    height: 180%;
 }
 
 .page_buttons .two:hover::before {
-  height: 0;
+    height: 0;
 }
 
 .locations {
-  margin: 0px auto;
-  height: fit-content;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  /* display: grid;
+    margin: 0px auto;
+    height: fit-content;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    /* display: grid;
     grid-template-rows: repeat(4, 1fr);
     grid-template-columns: repeat(3, 1fr); */
-  /* justify-items: center; */
-  align-items: center;
+    /* justify-items: center; */
+    align-items: center;
 }
 
 .locations .heading {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  font-size: 35px;
-  width: 100%;
-  text-align: center;
+    grid-column-start: 1;
+    grid-column-end: 4;
+    font-size: 35px;
+    width: 100%;
+    text-align: center;
 }
 
 .locations .line {
-  height: 1px;
-  width: 60%;
-  background-color: #000000;
-  margin: 20px auto;
+    height: 1px;
+    width: 60%;
+    background-color: #000000;
+    margin: 20px auto;
 }
 
 .image_container {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
-  row-gap: 10px;
-  column-gap: 10px;
-  padding: 20px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+    row-gap: 10px;
+    column-gap: 10px;
+    padding: 20px;
 }
 
 .locations img {
-  width: 100%;
-  border-radius: 10px;
+    width: 100%;
+    border-radius: 10px;
 
-  transition: 2sec;
-  background-image: red;
+    transition: 2sec;
+    background-image: red;
 }
 
 .locations .country_images {
-  position: relative;
-  transition: 0.5s;
-  cursor: pointer;
-  margin: 5px 10px;
-  display: flex;
+    position: relative;
+    transition: 0.5s;
+    cursor: pointer;
+    margin: 5px 10px;
+    display: flex;
 }
 
 .locations .country_images:hover {
-  transform: scale(1.05);
+    transform: scale(1.05);
 }
 
 .country_images span {
-  color: white;
-  font-size: 18px;
-  font-family: "Oswald", sans-serif;
-  position: absolute;
-  bottom: 0;
-  top: 80%;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.562);
-  border-radius: 0px 0px 10px 10px;
-  transition: 0.5s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    color: white;
+    font-size: 18px;
+    font-family: "Oswald", sans-serif;
+    position: absolute;
+    bottom: 0;
+    top: 80%;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.562);
+    border-radius: 0px 0px 10px 10px;
+    transition: 0.5s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .locations .country_images:hover span {
-  background-color: #ffffff;
-  color: #000000;
-  outline: 1px solid rgba(0, 0, 0, 0.248);
+    background-color: #ffffff;
+    color: #000000;
+    outline: 1px solid rgba(0, 0, 0, 0.248);
 }
 
 .events {
-  height: 60vh;
+    height: 60vh;
 
-  background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
-    url(../images/Event.webp);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
+        url(../images/Event.webp);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
 
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 .plant_with_us {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  color: white;
-  font-family: "Oswald", sans-serif;
-  font-size: 50px;
-  letter-spacing: 0.5px;
-  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.514);
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    color: white;
+    font-family: "Oswald", sans-serif;
+    font-size: 50px;
+    letter-spacing: 0.5px;
+    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.514);
 }
 
 .join_us {
-  font-family: Arial, Helvetica, sans-serif;
-  color: white;
-  font-size: 18px;
-  text-shadow: none;
+    font-family: Arial, Helvetica, sans-serif;
+    color: white;
+    font-size: 18px;
+    text-shadow: none;
 }
 
 .events button {
-  color: #ffffff;
-  background: none;
-  font-family: "Poppins", sans-serif;
-  font-size: 15px;
-  letter-spacing: 0.5px;
+    color: #ffffff;
+    background: none;
+    font-family: "Poppins", sans-serif;
+    font-size: 15px;
+    letter-spacing: 0.5px;
 
-  padding: 15px 25px;
-  margin: 40px;
-  border: 1px solid #ffffff;
-  cursor: pointer;
+    padding: 15px 25px;
+    margin: 40px;
+    border: 1px solid #ffffff;
+    cursor: pointer;
 
-  transition: 0.5s;
+    transition: 0.5s;
 }
 
 .events button:hover {
-  transform: scale(1.05);
-  color: #000000;
-  background-color: #ffffff;
+    transform: scale(1.05);
+    color: #000000;
+    background-color: #ffffff;
 }
 
 .Video {
-  margin: 2em auto;
-  width: 70vw;
-  height: 80vh;
+    margin: 2em auto;
+    width: 70vw;
+    height: 80vh;
 }
 
 .Goals {
-  width: 80vw;
-  margin: 0px auto;
-  margin-bottom: 2em;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  /* display: grid;
+    width: 80vw;
+    margin: 0px auto;
+    margin-bottom: 2em;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    /* display: grid;
     grid-template-rows: 0.3fr 1fr;
     grid-template-columns: repeat(3, 1fr); */
-  column-gap: 15vh;
-  text-align: center;
+    column-gap: 15vh;
+    text-align: center;
 }
 
 .Goals .heading {
-  width: 100%;
-  text-align: center;
-  font-size: 35px;
-  grid-column-start: 1;
-  grid-column-end: 4;
+    width: 100%;
+    text-align: center;
+    font-size: 35px;
+    grid-column-start: 1;
+    grid-column-end: 4;
 }
 
 .Goals .line {
-  height: 1px;
-  width: 60%;
-  margin: 20px auto;
-  background-color: #000000;
+    height: 1px;
+    width: 60%;
+    margin: 20px auto;
+    background-color: #000000;
 }
 
 .Goals .images {
-  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.377);
-  border-radius: 20px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  max-width: 300px;
-  margin: 5px 10px;
-  padding: 10px 5px;
-  gap: 4%;
-  font-size: 14px;
+    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.377);
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width: 300px;
+    margin: 5px 10px;
+    padding: 10px 5px;
+    gap: 4%;
+    font-size: 14px;
 }
 
 .Goals .images img {
-  margin: 5% auto;
+    margin: 5% auto;
 }
 
 .Goals .images span {
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 24px;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 24px;
 }
 
 .Goals .images .text {
-  flex: 1;
-  padding: 2%;
+    flex: 1;
+    padding: 2%;
 }
 
 .get_involved {
-  margin: 0px auto;
-  width: 80vw;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
+    margin: 0px auto;
+    width: 80vw;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
 }
 
 .get_involved .Option {
-  height: 400px;
-  width: 340px;
-  margin: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: white;
-  font-family: "Poppins", sans-serif;
-  letter-spacing: 2px;
-  font-size: 25px;
-  cursor: pointer;
-  border-radius: 15px;
-  transition: background-color 0.5s ease, transform 0.5s ease-in-out,
-    color 0.5s ease-in-out;
+    height: 400px;
+    width: 340px;
+    margin: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-family: "Poppins", sans-serif;
+    letter-spacing: 2px;
+    font-size: 25px;
+    cursor: pointer;
+    border-radius: 15px;
+    transition: background-color 0.5s ease, transform 0.5s ease-in-out,
+        color 0.5s ease-in-out;
 }
 
 .get_involved .Option:hover {
-  background-color: rgba(149, 165, 166, 0.1);
-  transform: scale(1.02);
-  color: lightgreen;
+    background-color: rgba(149, 165, 166, 0.1);
+    transform: scale(1.02);
+    color: lightgreen;
 }
 
 .get_involved #_1 {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-    url("../images/Individual.webp");
-  background-size: cover;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
+        url("../images/Individual.webp");
+    background-size: cover;
 }
 
 .get_involved #_2 {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-    url("../images/Businesses.webp");
-  background-size: cover;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
+        url("../images/Businesses.webp");
+    background-size: cover;
 }
 
 .get_involved #_3 {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-    url("../images/School.webp");
-  background-size: cover;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
+        url("../images/School.webp");
+    background-size: cover;
 }
 
 .Donate {
-  /* height: 60vh; */
-  padding: 10vh 0px;
-  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
-    url("../images/donation.webp");
-  background-size: cover;
-  background-attachment: fixed;
+    /* height: 60vh; */
+    padding: 10vh 0px;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+        url("../images/donation.webp");
+    background-size: cover;
+    background-attachment: fixed;
 
-  color: rgb(255, 255, 255);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+    color: rgb(255, 255, 255);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 .Donate .text {
-  position: relative;
+    position: relative;
 
-  text-align: center;
-  font-size: 25px;
-  font-family: "Ysabeau", sans-serif;
+    text-align: center;
+    font-size: 25px;
+    font-family: "Ysabeau", sans-serif;
 }
 
 .Donate span {
-  font-size: 20px;
+    font-size: 20px;
 }
 
 .Donate button {
-  color: #000000;
-  background: white;
-  font-family: "Poppins", sans-serif;
-  font-size: 15px;
-  letter-spacing: 0.5px;
+    color: #000000;
+    background: white;
+    font-family: "Poppins", sans-serif;
+    font-size: 15px;
+    letter-spacing: 0.5px;
 
-  padding: 15px;
-  border: 1px solid #ffffff;
-  cursor: pointer;
+    padding: 15px;
+    border: 1px solid #ffffff;
+    cursor: pointer;
 
-  transition: 0.5s;
+    transition: 0.5s;
 }
 
 .Donate button:hover {
-  transform: scale(1.05);
-  color: #ffffff;
-  background-color: rgba(0, 0, 0, 0);
+    transform: scale(1.05);
+    color: #ffffff;
+    background-color: rgba(0, 0, 0, 0);
 }
 
+/* footer */
+
 .footer {
-  margin-top: 4.5rem;
-  background-color: #141414;
-  box-sizing: border-box;
-  border-top: 1px solid black;
-  color: rgb(160, 160, 160);
-  font-family: "Poppins", sans-serif;
-  width: 100%;
-  padding: 0.5rem 2rem;
+    margin-top: 4.5rem;
+    background-color: #141414;
+    box-sizing: border-box;
+    border-top: 1px solid black;
+    color: rgb(160, 160, 160);
+    font-family: "Poppins", sans-serif;
+    width: 100%;
+    padding: 0.5rem 2rem;
 
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
 .upperHeading {
-  display: flex;
-  width: 100%;
-  justify-content: center;
+    display: flex;
+    width: 100%;
+    justify-content: center;
 }
 
 .qLine {
-  background-color: grey;
-  width: 200px;
-  height: 1px;
+    background-color: grey;
+    width: 200px;
+    height: 1px;
 }
 
 .upper_part {
-  justify-content: space-between;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  /* background-color: red; */
+    justify-content: space-between;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    /* background-color: red; */
 }
 
 .links {
-  flex: 1.5;
-  display: flex;
-  justify-content: space-evenly;
-  margin: 1.5rem 10%;
-  height: auto;
+    flex: 1.5;
+    display: flex;
+    justify-content: space-evenly;
+    margin: 1.5rem 10%;
+    height: auto;
 }
 
 .quick-links,
 .socialmediaTxt {
-  font-family: "Poppins", sans-serif;
-  color: green;
-  letter-spacing: 1px;
-  font-weight: 600;
+    font-family: "Poppins", sans-serif;
+    color: green;
+    letter-spacing: 1px;
+    font-weight: 600;
 }
 
 .upper_part .links a {
-  text-decoration: none;
-  letter-spacing: 0.5px;
-  font-family: "Poppins", sans-serif;
-  color: rgb(160, 160, 160);
-  font-size: 15px;
-  position: relative;
-  transition: 0.2s;
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    font-family: "Poppins", sans-serif;
+    color: rgb(160, 160, 160);
+    font-size: 15px;
+    position: relative;
+    transition: 0.2s;
 }
 
 .links a:hover {
-  color: rgb(255, 255, 255);
+    color: rgb(255, 255, 255);
 }
 
 .links .column {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 20px;
 }
 
 .upper_part .container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 15px;
 }
 
 .container input {
-  height: 30px;
-  width: 250px;
+    height: 30px;
+    width: 250px;
 
-  border: 1px solid rgb(255, 255, 255);
-  border-radius: 5px;
-  color: rgb(0, 0, 0);
-  padding-left: 10px;
-  margin: 5px;
-  background-color: white;
+    border: 1px solid rgb(255, 255, 255);
+    border-radius: 5px;
+    color: rgb(0, 0, 0);
+    padding-left: 10px;
+    margin: 5px;
+    background-color: white;
 }
 
 .container input::placeholder {
-  font-size: 12px;
+    font-size: 12px;
 }
 
 .container button {
-  font-family: "Poppins", sans-serif;
-  font-size: 13px;
-  letter-spacing: 0.5px;
-  background-color: rgba(255, 255, 255, 0);
-  color: white;
-  border: 1px solid white;
+    font-family: "Poppins", sans-serif;
+    font-size: 13px;
+    letter-spacing: 0.5px;
+    background-color: rgba(255, 255, 255, 0);
+    color: white;
+    border: 1px solid white;
 
-  padding: 8px 15px;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: 0.5s;
+    padding: 8px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.5s;
 }
 
 .container .Login a {
-  color: white;
+    color: white;
 }
 
 .copyright-disclaimer {
-  font-size: 14px;
-  color: white;
-  padding-top: 1rem;
-  text-align: center;
-  margin: auto;
+    font-size: 14px;
+    color: white;
+    padding-top: 1rem;
+    text-align: center;
+    margin: auto;
 }
 
 .footer .lower_part {
-  flex: 0.3;
-  display: flex;
+    flex: 0.3;
+    display: flex;
 }
 
 .footer-line {
-  width: 100%;
-  height: 1px;
-  background-color: grey;
-  text-align: center;
+    width: 100%;
+    height: 1px;
+    background-color: grey;
+    text-align: center;
 }
 
 .lower_part {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: 2rem;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: 2rem;
 }
 
 .social_medias {
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  gap: 20px;
-  margin: auto;
-  padding-top: 0.5rem;
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    gap: 20px;
+    margin: auto;
+    padding-top: 0.5rem;
 }
 
 .lower_part .rights_reserved {
-  position: absolute;
-  bottom: 60%;
-  right: 35%;
+    position: absolute;
+    bottom: 60%;
+    right: 35%;
 }
 
 .imgWrapper a {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  transition: transform 0.75s ease-in-out;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    transition: transform 0.75s ease-in-out;
 }
 
 .imgWrapper i {
-  font-size: 20px;
-  margin-right: 10px;
+    font-size: 20px;
+    margin-right: 10px;
 }
 
 .lower_part {
-  gap: 10px;
+    gap: 10px;
 }
 
 .socialmediaName {
-  text-decoration: none;
-  color: rgb(160, 160, 160);
-  font-size: 12px;
-  font-family: "Poppins", sans-serif;
-  transition: 0.2s;
-  letter-spacing: 0.5px;
+    text-decoration: none;
+    color: rgb(160, 160, 160);
+    font-size: 12px;
+    font-family: "Poppins", sans-serif;
+    transition: 0.2s;
+    letter-spacing: 0.5px;
 }
 
 .socialmediaName:hover {
-  color: #ffffff;
+    color: #ffffff;
 }
 
 .hidden {
-  display: none;
+    display: none;
 }
 
 #overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); /* Adjust the alpha value as needed */
-  z-index: 1;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Adjust the alpha value as needed */
+    z-index: 1;
 }
 
 .popup {
-  position: fixed;
-  z-index: 2;
-  top: 50%;
-  left: 50%;
-  height: 192px;
-  width: 350px;
-  transform: translate(-50%, -50%);
-  background-color: #fffd;
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  padding: 20px;
-  font-family: "Poppins", sans-serif;
-  transition: 0.2s;
-
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+    position: fixed;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    height: 192px;
+    width: 350px;
+    transform: translate(-50%, -50%);
+    background-color: #fffd;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 20px;
+    font-family: "Poppins", sans-serif;
+    transition: 0.2s;
+
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
 }
 .popup p {
-  margin: 20px auto;
-  text-align: center;
+    margin: 20px auto;
+    text-align: center;
 }
 .popup button {
-  --color_2: #111111;
-  color: #111111;
-  background: none;
-  font-family: "Poppins", sans-serif;
-  font-size: 16px;
-  width: 150px;
-  letter-spacing: 1px;
-  cursor: pointer;
-  padding: 15px 25px;
-
-  margin: auto;
-  margin-top: 40px;
-  border: 1px solid var(--color_2);
-  transition: 0.5s;
-  position: relative;
-  overflow: hidden;
+    --color_2: #111111;
+    color: #111111;
+    background: none;
+    font-family: "Poppins", sans-serif;
+    font-size: 16px;
+    width: 150px;
+    letter-spacing: 1px;
+    cursor: pointer;
+    padding: 15px 25px;
+
+    margin: auto;
+    margin-top: 40px;
+    border: 1px solid var(--color_2);
+    transition: 0.5s;
+    position: relative;
+    overflow: hidden;
 }
 .popup button:hover {
-  transform: scale(1.1);
-  color: white;
-  background: black;
+    transform: scale(1.1);
+    color: white;
+    background: black;
 }
 .closePopupButton {
-  display: block;
-  margin-top: 10px;
+    display: block;
+    margin-top: 10px;
 }
 .row {
-  color: white;
-  /* background-color: #f5f5dc; Beige color */
-  padding: 1em;
-  border-radius: 1px;
-  font-weight: 700;
+    color: white;
+    /* background-color: #f5f5dc; Beige color */
+    padding: 1em;
+    border-radius: 1px;
+    font-weight: 700;
 }
 
 /* You can further style the .content-box class as needed */
 
 .glass {
-  background: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */
-  border-radius: 15px; /* Rounded corners */
-  padding: 2rem; /* Padding around content */
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Shadow for depth */
-  backdrop-filter: blur(10px); /* Blur effect */
-  /* border: 1px solid rgba(255, 255, 255, 0.2); Border with semi-transparent white */
-  text-align: center; /* Center align text */
-  color: #000; /* Text color */
+    background: rgba(
+        255,
+        255,
+        255,
+        0.1
+    ); /* Semi-transparent white background */
+    border-radius: 15px; /* Rounded corners */
+    padding: 2rem; /* Padding around content */
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Shadow for depth */
+    backdrop-filter: blur(10px); /* Blur effect */
+    /* border: 1px solid rgba(255, 255, 255, 0.2); Border with semi-transparent white */
+    text-align: center; /* Center align text */
+    color: #000; /* Text color */
 }
 
 .glass div {
-  text-align: left;
-  color: rgb(187, 187, 187);
-  font-weight: 300;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+    text-align: left;
+    color: rgb(187, 187, 187);
+    font-weight: 300;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
 }
 
 .glass h2 {
-  font-family: "Poppins", sans-serif;
+    font-family: "Poppins", sans-serif;
 }
diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000..21888ca
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Contact Us</title>
+        <link rel="stylesheet" href="assets/css/contact.css" />
+    </head>
+    <body>
+        <a href="index.html" class="getback"> ← Back </a>
+        <div class="container2">
+            <!-- Header Section -->
+            <div class="header">
+                <h1>Contact Us</h1>
+                <p>
+                    We're here to help! Get in touch with us through the form or
+                    details below.
+                </p>
+            </div>
+
+            <!-- Contact Form and Info Section -->
+            <div class="contact-wrapper">
+                <!-- Contact Form -->
+                <div class="contact-form">
+                    <h2 style="color: green">Send Us a Message</h2>
+                    <form action="#" method="POST">
+                        <label for="name">Full Name</label>
+                        <input
+                            type="text"
+                            id="name"
+                            name="name"
+                            placeholder="Your full name..."
+                            required
+                        />
+
+                        <label for="email">Email Address</label>
+                        <input
+                            type="email"
+                            id="email"
+                            name="email"
+                            placeholder="Your email..."
+                            required
+                        />
+
+                        <label for="message">Your Message</label>
+                        <textarea
+                            id="message"
+                            name="message"
+                            placeholder="Write your message here..."
+                            required
+                        ></textarea>
+
+                        <button type="submit" class="submit-btn">
+                            Send Message
+                        </button>
+                    </form>
+                </div>
+
+                <!-- info section -->
+                <div class="contact-info">
+                    <h2>Our Contact Information</h2>
+                    <div class="info">
+                        <span class="info-icon">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M3 10l4.621 4.62a2 2 0 010 2.829l-1.42 1.42a12 12 0 007.621 7.621l1.42-1.42a2 2 0 012.829 0L21 21"
+                                />
+                            </svg>
+                        </span>
+                        <div>
+                            <h3>Phone</h3>
+                            <p>+1 234 567 890</p>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <span class="info-icon">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M16 12l-4 4m0 0l-4-4m4 4V8"
+                                />
+                            </svg>
+                        </span>
+                        <div>
+                            <h3>Email</h3>
+                            <p>support@yourcompany.com</p>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <span class="info-icon">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M12 11.8l8 8m0 0L12 11.8m0 0l-8 8M12 11.8L8 16.4"
+                                />
+                            </svg>
+                        </span>
+                        <div>
+                            <h3>Office Address</h3>
+                            <p>1234 Example St, City, Country</p>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <span class="info-icon">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M12 8v4l2 2m8 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                            </svg>
+                        </span>
+                        <div>
+                            <h3>Business Hours</h3>
+                            <p>Mon - Fri, 9:00 AM - 6:00 PM</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Map Section -->
+            <div class="map">
+                <iframe
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509363!2d144.95373531532174!3d-37.81627977975178!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577f564f693dd7a!2sVictoria%20Market!5e0!3m2!1sen!2sin!4v1603119239336!5m2!1sen!2sin"
+                    width="100%"
+                    height="100%"
+                    frameborder="0"
+                    style="border: 0"
+                    allowfullscreen=""
+                    aria-hidden="false"
+                    tabindex="0"
+                ></iframe>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/index.html b/index.html
index 92cecad..d2309a4 100644
--- a/index.html
+++ b/index.html
@@ -1,362 +1,415 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
-      rel="stylesheet"
-    />
-    <title>Tree2Hope</title>
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link
+            href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
+            rel="stylesheet"
+        />
+        <title>Tree2Hope</title>
 
-    <!-- font awesome cdn -->
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
-      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
+        <!-- font awesome cdn -->
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+            integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        />
 
-    <link rel="icon" type="image/x-icon" href="./assets/images/4x/logo.webp" />
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
-      crossorigin="anonymous"
-    />
-    <link rel="stylesheet" href="./assets/css/style.css" />
-    <link rel="stylesheet" href="./assets/css/responsiveness.css" />
-  </head>
+        <link
+            rel="icon"
+            type="image/x-icon"
+            href="./assets/images/4x/logo.webp"
+        />
+        <link
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+            crossorigin="anonymous"
+        />
+        <link rel="stylesheet" href="./assets/css/style.css" />
+        <link rel="stylesheet" href="./assets/css/responsiveness.css" />
+    </head>
 
-  <body>
+    <body>
+        <button id="scrollToTopBtn" title="Go to top">
+            <i class="fa fa-arrow-up"></i>
+        </button>
 
-    <button id="scrollToTopBtn" title="Go to top">
-      <i class="fa fa-arrow-up"></i>
-    </button>
+        <div class="banner section">
+            <nav>
+                <div class="logo">
+                    <a href="#">
+                        <img
+                            src="./assets/images/4x/typography_logo.webp"
+                            alt="Logo"
+                            width="160px"
+                        />
+                    </a>
+                </div>
+                <div id="nav-text" class="nav_buttons">
+                    <a href="#" class="nav_button">HOME</a>
+                    <a href="#donates" class="nav_button showPopupButton"
+                        >DONATE</a
+                    >
+                    <a href="./about.html" class="nav_button">ABOUT US</a>
+                    <a href="contact.html" class="nav_button">CONTACT US</a>
+                    <a href="#events" class="nav_button">EVENTS</a>
+                </div>
+            </nav>
+            <!-- Menu Bar -->
+            <div class="MenuBar">
+                <i id="openMenu" class="bx bx-menu menu-button"></i>
 
-
-    <div class="banner section">
-      <nav>
-        <div class="logo">
-          <a href="#">
-            <img
-              src="./assets/images/4x/typography_logo.webp"
-              alt="Logo"
-              width="160px"
-            />
-          </a>
-        </div>
-        <div id="nav-text" class="nav_buttons">
-          <a href="#" class="nav_button">HOME</a>
-          <a href="#donates" class="nav_button showPopupButton">DONATE</a>
-          <a href="./about.html" class="nav_button">ABOUT US</a>
-          <a href="#footer" class="nav_button">CONTACT US</a>
-          <a href="#events" class="nav_button">EVENTS</a>
+                <div class="menu-container" id="menuContainer">
+                    <div class="menu">
+                        <span class="close-button" id="closeMenu">&times;</span>
+                        <ul>
+                            <li>
+                                <a href="#" onclick="handleClose()">HOME</a>
+                            </li>
+                            <li>
+                                <a href="#donates" onclick="handleClose()"
+                                    >DONATE</a
+                                >
+                            </li>
+                            <li>
+                                <a href="./about.html" class="nav_button"
+                                    >ABOUT US</a
+                                >
+                            </li>
+                            <li>
+                                <a href="contact.html" onclick="handleClose()"
+                                    >CONTACT US</a
+                                >
+                            </li>
+                            <li>
+                                <a href="#events" onclick="handleClose()"
+                                    >EVENTS</a
+                                >
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <!--  -->
+            <div class="body">
+                <div class="text">
+                    <span class="Big_Text">PLANTING TREES BUILDING HOPE</span
+                    ><br /><br />
+                    Help us grow a greener tomorrow<br />Join us in our quest to
+                    heal the earth and create a sustainable future
+                </div>
+                <div class="page_buttons">
+                    <button class="one">VIEW PROGRESS</button>
+                    <button
+                        class="two showPopupButton"
+                        data-popup-trigger="cover-page"
+                    >
+                        PLANT A TREE
+                    </button>
+                </div>
+            </div>
         </div>
-      </nav>
-      <!-- Menu Bar -->
-      <div class="MenuBar">
-        <i id="openMenu" class="bx bx-menu menu-button"></i>
 
-        <div class="menu-container" id="menuContainer">
-          <div class="menu">
-            <span class="close-button" id="closeMenu">&times;</span>
-            <ul>
-              <li><a href="#" onclick="handleClose()">HOME</a></li>
-              <li><a href="#donates" onclick="handleClose()">DONATE</a></li>
-              <li><a href="./about.html" class="nav_button">ABOUT US</a></li>
-              <li><a href="#footer" onclick="handleClose()">CONTACT US</a></li>
-              <li><a href="#events" onclick="handleClose()">EVENTS</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <!--  -->
-      <div class="body">
-        <div class="text">
-          <span class="Big_Text">PLANTING TREES BUILDING HOPE</span><br /><br />
-          Help us grow a greener tomorrow<br />Join us in our quest to heal the
-          earth and create a sustainable future
-        </div>
-        <div class="page_buttons">
-          <button class="one">VIEW PROGRESS</button>
-          <button class="two showPopupButton" data-popup-trigger="cover-page">
-            PLANT A TREE
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- <div class="trees_planted">
+        <!-- <div class="trees_planted">
         <div class="number"><span>40535</span><br>TREES PLANTED<br><br></div>
         <div class="text"><br>We plant trees on your behalf. $1 = 1 Tree Planted.<br>Plant a Tree, Restore Biodiversity, and Transform Our Planet.</div>
     </div> -->
 
-    <div class="locations section mt-5">
-      <div class="heading">
-        <b>WHERE WE PLANT</b><br />
-        <div class="line"></div>
-      </div>
-      <div class="image_container">
-        <div class="country_images">
-          <a href="https://en.wikipedia.org/wiki/Nepal" target="_blank"
-            ><img src="./assets/images/Countries/Nepal.webp" alt="Nepal" /><span
-              >Nepal</span
-            ></a
-          >
-        </div>
-        <div class="country_images">
-          <a href="https://en.wikipedia.org/wiki/Thailand" target="_blank"
-            ><img
-              src="./assets/images/Countries/Thailand.webp"
-              alt="Thailand"
-            /><span>Thailand</span></a
-          >
-        </div>
-        <div class="country_images">
-          <a href="https://en.wikipedia.org/wiki/India" target="_blank"
-            ><img src="./assets/images/Countries/India.webp" alt="India" /><span
-              >India</span
-            ></a
-          >
-        </div>
-        <div class="country_images">
-          <a href="https://en.wikipedia.org/wiki/Maldives" target="_blank"
-            ><img
-              src="./assets/images/Countries/Maldives.webp"
-              alt="Maldives"
-            /><span>Maldives</span></a
-          >
+        <div class="locations section mt-5">
+            <div class="heading">
+                <b>WHERE WE PLANT</b><br />
+                <div class="line"></div>
+            </div>
+            <div class="image_container">
+                <div class="country_images">
+                    <a
+                        href="https://en.wikipedia.org/wiki/Nepal"
+                        target="_blank"
+                        ><img
+                            src="./assets/images/Countries/Nepal.webp"
+                            alt="Nepal"
+                        /><span>Nepal</span></a
+                    >
+                </div>
+                <div class="country_images">
+                    <a
+                        href="https://en.wikipedia.org/wiki/Thailand"
+                        target="_blank"
+                        ><img
+                            src="./assets/images/Countries/Thailand.webp"
+                            alt="Thailand"
+                        /><span>Thailand</span></a
+                    >
+                </div>
+                <div class="country_images">
+                    <a
+                        href="https://en.wikipedia.org/wiki/India"
+                        target="_blank"
+                        ><img
+                            src="./assets/images/Countries/India.webp"
+                            alt="India"
+                        /><span>India</span></a
+                    >
+                </div>
+                <div class="country_images">
+                    <a
+                        href="https://en.wikipedia.org/wiki/Maldives"
+                        target="_blank"
+                        ><img
+                            src="./assets/images/Countries/Maldives.webp"
+                            alt="Maldives"
+                        /><span>Maldives</span></a
+                    >
+                </div>
+                <div class="country_images">
+                    <a
+                        href="https://en.wikipedia.org/wiki/Bhutan"
+                        target="_blank"
+                        ><img
+                            src="./assets/images/Countries/Bhutan.webp"
+                            alt="Bhutan"
+                        /><span>Bhutan</span></a
+                    >
+                </div>
+                <div class="country_images">
+                    <a
+                        href="https://en.wikipedia.org/wiki/Sri_Lanka"
+                        target="_blank"
+                        ><img
+                            src="./assets/images/Countries/Sri_Lanka.webp"
+                            alt="Sri Lanka"
+                        /><span>Sri Lanka</span></a
+                    >
+                </div>
+                <div class="country_images">
+                    <a
+                        href="https://en.wikipedia.org/wiki/Malaysia"
+                        target="_blank"
+                        ><img
+                            src="./assets/images/Countries/Malaysia.webp"
+                            alt="Malaysia"
+                        /><span>Malaysia</span></a
+                    >
+                </div>
+                <div class="country_images">
+                    <a
+                        href="https://en.wikipedia.org/wiki/Indonesia"
+                        target="_blank"
+                        ><img
+                            src="./assets/images/Countries/Indonesia.webp"
+                            alt="Indonesia"
+                        /><span>Indonesia</span></a
+                    >
+                </div>
+                <div class="country_images">
+                    <a
+                        href="https://en.wikipedia.org/wiki/Hong_Kong"
+                        target="_blank"
+                        ><img
+                            src="./assets/images/Countries/Hong_Kong.webp"
+                            alt="Hong_Kong"
+                        /><span>Hong Kong</span></a
+                    >
+                </div>
+            </div>
         </div>
-        <div class="country_images">
-          <a href="https://en.wikipedia.org/wiki/Bhutan" target="_blank"
-            ><img
-              src="./assets/images/Countries/Bhutan.webp"
-              alt="Bhutan"
-            /><span>Bhutan</span></a
-          >
-        </div>
-        <div class="country_images">
-          <a href="https://en.wikipedia.org/wiki/Sri_Lanka" target="_blank"
-            ><img
-              src="./assets/images/Countries/Sri_Lanka.webp"
-              alt="Sri Lanka"
-            /><span>Sri Lanka</span></a
-          >
-        </div>
-        <div class="country_images">
-          <a href="https://en.wikipedia.org/wiki/Malaysia" target="_blank"
-            ><img
-              src="./assets/images/Countries/Malaysia.webp"
-              alt="Malaysia"
-            /><span>Malaysia</span></a
-          >
-        </div>
-        <div class="country_images">
-          <a href="https://en.wikipedia.org/wiki/Indonesia" target="_blank"
-            ><img
-              src="./assets/images/Countries/Indonesia.webp"
-              alt="Indonesia"
-            /><span>Indonesia</span></a
-          >
-        </div>
-        <div class="country_images">
-          <a href="https://en.wikipedia.org/wiki/Hong_Kong" target="_blank"
-            ><img
-              src="./assets/images/Countries/Hong_Kong.webp"
-              alt="Hong_Kong"
-            /><span>Hong Kong</span></a
-          >
-        </div>
-      </div>
-    </div>
-
-    <div class="Video section">
-      <iframe
-        width="100%"
-        height="100%"
-        src="https://www.youtube.com/embed/ibPe7iuTFZw"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-      ></iframe>
-    </div>
 
-    <div id="donates" class="Donate section">
-      <div class="text">
-        Trees are nature's superheroes, fighting climate change, supporting
-        livelihoods, and nurturing life.<br />
-        Together, we can make a difference, one tree at a time.<br /><br /><span
-          >~ Founder</span
-        ><br /><br />
-      </div>
-      <button class="showPopupButton" data-popup-trigger="donate">
-        JUST $1 PLANTS A TREE
-      </button>
-    </div>
+        <div class="Video section">
+            <iframe
+                width="100%"
+                height="100%"
+                src="https://www.youtube.com/embed/ibPe7iuTFZw"
+                title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen
+            ></iframe>
+        </div>
 
-    <!--Added margin to bottom-->
-    <div class="get_involved section mb-5">
-      <div class="Option" id="_1">INDIVIDUALS</div>
-      <div class="Option" id="_2">BUSINESSES</div>
-      <div class="Option" id="_3">SCHOOLS</div>
-    </div>
-    <div id="events" class="events section">
-      <div class="plant_with_us">
-        PLANT WITH US<span class="join_us"
-          >Join our local events and make a positive impact with your own
-          hands</span
-        >
-      </div>
-      <button class="btn btn-secondary" onclick="location.href='Events.html';">VIEW EVENTS</button>
-    </div>
+        <div id="donates" class="Donate section">
+            <div class="text">
+                Trees are nature's superheroes, fighting climate change,
+                supporting livelihoods, and nurturing life.<br />
+                Together, we can make a difference, one tree at a time.<br /><br /><span
+                    >~ Founder</span
+                ><br /><br />
+            </div>
+            <button class="showPopupButton" data-popup-trigger="donate">
+                JUST $1 PLANTS A TREE
+            </button>
+        </div>
 
-    <div id="goal" class="Goals section">
-      <div class="heading">
-        OUR GOALS<br />
-        <div class="line"></div>
-      </div>
-      <div class="images">
-        <img src="./assets/images/Target.png" width="200px" />
-        <div class="text">
-          <span>TARGET<br /><br /></span>Planting 1 million trees worldwide
-          within the next 3 years.
+        <!--Added margin to bottom-->
+        <div class="get_involved section mb-5">
+            <div class="Option" id="_1">INDIVIDUALS</div>
+            <div class="Option" id="_2">BUSINESSES</div>
+            <div class="Option" id="_3">SCHOOLS</div>
         </div>
-      </div>
-      <div class="images">
-        <img src="./assets/images/Reach.png" width="200px" />
-        <div class="text">
-          <span>REACH<br /><br /></span>Expanding tree planting efforts to 30+
-          countries across the world.
+        <div id="events" class="events section">
+            <div class="plant_with_us">
+                PLANT WITH US<span class="join_us"
+                    >Join our local events and make a positive impact with your
+                    own hands</span
+                >
+            </div>
+            <button
+                class="btn btn-secondary"
+                onclick="location.href='Events.html';"
+            >
+                VIEW EVENTS
+            </button>
         </div>
-      </div>
-      <div class="images">
-        <img src="./assets/images/Awareness.png" width="200px" />
-        <div class="text">
-          <span>EDUCATION AND AWARENESS<br /><br /></span>Raising awareness
-          about the importance of tree planting through educational programs,
-          workshops, and campaigns.
+
+        <div id="goal" class="Goals section">
+            <div class="heading">
+                OUR GOALS<br />
+                <div class="line"></div>
+            </div>
+            <div class="images">
+                <img src="./assets/images/Target.png" width="200px" />
+                <div class="text">
+                    <span>TARGET<br /><br /></span>Planting 1 million trees
+                    worldwide within the next 3 years.
+                </div>
+            </div>
+            <div class="images">
+                <img src="./assets/images/Reach.png" width="200px" />
+                <div class="text">
+                    <span>REACH<br /><br /></span>Expanding tree planting
+                    efforts to 30+ countries across the world.
+                </div>
+            </div>
+            <div class="images">
+                <img src="./assets/images/Awareness.png" width="200px" />
+                <div class="text">
+                    <span>EDUCATION AND AWARENESS<br /><br /></span>Raising
+                    awareness about the importance of tree planting through
+                    educational programs, workshops, and campaigns.
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <div class="why_plant_trees?">
-      <div class="heading"></div>
-      <div class="line"></div>
-      <div class="answers"></div>
-    </div>
+        <div class="why_plant_trees?">
+            <div class="heading"></div>
+            <div class="line"></div>
+            <div class="answers"></div>
+        </div>
 
-    <div class="footer" id="footer">
-      <div class="upper_part">
-        <div class="upperHeading">
-          <div class="quickLinkTextWrapper">
-            <!-- <div class="qLine"></div> -->
+        <div class="footer" id="footer">
+            <div class="upper_part">
+                <div class="upperHeading">
+                    <div class="quickLinkTextWrapper">
+                        <!-- <div class="qLine"></div> -->
 
-            <h2 class="quick-links">Quick Links</h2>
-            <!-- <div class="qLine"></div> -->
-          </div>
-        </div>
+                        <h2 class="quick-links">Quick Links</h2>
+                        <!-- <div class="qLine"></div> -->
+                    </div>
+                </div>
 
-        <div class="links">
-          <div class="column">
-            <a class="footerLinks" href="#">HOW TO DONATE</a>
-            <a class="footerLinks" href="#">PRIVACY POLICY</a>
-            <a class="footerLinks" href="#">REFUND POLICY</a>
-            <a class="footerLinks" href="#">TERMS OF SERVICES</a>
-          </div>
+                <div class="links">
+                    <div class="column">
+                        <a class="footerLinks" href="#">HOW TO DONATE</a>
+                        <a class="footerLinks" href="#">PRIVACY POLICY</a>
+                        <a class="footerLinks" href="#">REFUND POLICY</a>
+                        <a class="footerLinks" href="#">TERMS OF SERVICES</a>
+                    </div>
 
-          <div class="column">
-            <a class="footerLinks" href="#">OUR PARTNERS</a>
-            <a class="footerLinks" href="#">BECOME AN AFFILIATE</a>
-            <a class="footerLinks" href="#">SPONSOR US</a>
-            <a class="footerLinks" href="#">REPORT A PROBLEM</a>
-          </div>
+                    <div class="column">
+                        <a class="footerLinks" href="#">OUR PARTNERS</a>
+                        <a class="footerLinks" href="#">BECOME AN AFFILIATE</a>
+                        <a class="footerLinks" href="#">SPONSOR US</a>
+                        <a class="footerLinks" href="#">REPORT A PROBLEM</a>
+                    </div>
 
-          <div class="column">
-            <a class="footerLinks" href="./about.html">ABOUT US</a>
-            <a class="footerLinks" href="#">FAQS</a>
-            <a class="footerLinks" href="#">CONTACT US</a>
-            <a class="footerLinks" href="#">CAREERS</a>
-          </div>
-        </div>
-      </div>
-      <div class="footer-line"></div>
-      <div class="social_medias">
-        <div class="imgWrapper">
-          <a href="https://twitter.com" class="socialmediaName" target="_blank"
-            ><i class="fa-brands fa-x-twitter"></i>
-            <span>TWITTER</span></a
-          >
-        </div>
-        <div class="imgWrapper">
-          <a
-            href="https://www.facebook.com"
-            class="socialmediaName"
-            target="_blank"
-          >
-            <i class="fa-brands fa-facebook"></i>
-            <span>FACEBOOK</span></a
-          >
-        </div>
-        <div class="imgWrapper">
-          
-          <a
-            href="https://www.instagram.com"
-            class="socialmediaName"
-            target="_blank"
-            >
-            <i class="fa-brands fa-instagram"></i>
-            <span>INSTAGRAM</span></a
-          >
+                    <div class="column">
+                        <a class="footerLinks" href="./about.html">ABOUT US</a>
+                        <a class="footerLinks" href="#">FAQS</a>
+                        <a class="footerLinks" href="#">CONTACT US</a>
+                        <a class="footerLinks" href="#">CAREERS</a>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-line"></div>
+            <div class="social_medias">
+                <div class="imgWrapper">
+                    <a
+                        href="https://twitter.com"
+                        class="socialmediaName"
+                        target="_blank"
+                        ><i class="fa-brands fa-x-twitter"></i>
+                        <span>TWITTER</span></a
+                    >
+                </div>
+                <div class="imgWrapper">
+                    <a
+                        href="https://www.facebook.com"
+                        class="socialmediaName"
+                        target="_blank"
+                    >
+                        <i class="fa-brands fa-facebook"></i>
+                        <span>FACEBOOK</span></a
+                    >
+                </div>
+                <div class="imgWrapper">
+                    <a
+                        href="https://www.instagram.com"
+                        class="socialmediaName"
+                        target="_blank"
+                    >
+                        <i class="fa-brands fa-instagram"></i>
+                        <span>INSTAGRAM</span></a
+                    >
+                </div>
+                <div class="imgWrapper">
+                    <a
+                        href="https://www.youtube.com"
+                        class="socialmediaName"
+                        target="_blank"
+                    >
+                        <i class="fa-brands fa-youtube"></i>
+                        <span>YOUTUBE</span></a
+                    >
+                </div>
+                <div class="imgWrapper">
+                    <a
+                        href="https://www.linkedin.com"
+                        class="socialmediaName"
+                        target="_blank"
+                    >
+                        <i class="fa-brands fa-linkedin"></i>
+                        <span>LINKEDIN</span></a
+                    >
+                </div>
+                <div class="imgWrapper">
+                    <a
+                        href="https://github.com/Virtual4087/Tree2Hope"
+                        class="socialmediaName"
+                        target="_blank"
+                    >
+                        <i class="fa-brands fa-github"></i>
+                        <span>GITHUB</span></a
+                    >
+                </div>
+            </div>
+            <div class="lower_part">
+                <div class="copyright-disclaimer">
+                    ©2024 - Tree2Hope All rights reserved
+                </div>
+            </div>
         </div>
-        <div class="imgWrapper">
-          <a
-            href="https://www.youtube.com"
-            class="socialmediaName"
-            target="_blank"
-            >
-            <i class="fa-brands fa-youtube"></i>
-            <span>YOUTUBE</span></a
-          >
-        </div>
-        <div class="imgWrapper">
-          <a
-            href="https://www.linkedin.com"
-            class="socialmediaName"
-            target="_blank"
-            >
-            <i class="fa-brands fa-linkedin"></i>
-            <span>LINKEDIN</span></a
-          >
-        </div>
-        <div class="imgWrapper">
-          <a
-            href="https://github.com/Virtual4087/Tree2Hope"
-            class="socialmediaName"
-            target="_blank"
-            >
-            <i class="fa-brands fa-github"></i>
-            <span>GITHUB</span></a
-          >
-        </div>
-      </div>
-      <div class="lower_part">
-        <div class="copyright-disclaimer">
-          ©2024 - Tree2Hope All rights reserved
-        </div>
-      </div>
-    </div>
-    <div id="overlay" class="hidden"></div>
+        <div id="overlay" class="hidden"></div>
 
-    <div class="hidden popup">
-      <div class="popup-content">
-        <p>We haven't added this feature yet.</p>
-        <button class="closePopupButton">Close</button>
-      </div>
-    </div>
-    <script src="./scripts/index.js"></script>
-  </body>
+        <div class="hidden popup">
+            <div class="popup-content">
+                <p>We haven't added this feature yet.</p>
+                <button class="closePopupButton">Close</button>
+            </div>
+        </div>
+        <script src="./scripts/index.js"></script>
+    </body>
 </html>