Adjust meow sound volume in cat-animation.js from 0.1 to 0.05 for improved audio balance.

components/ad-placements.html

@@ -0,0 +1 @@
+ 

components/ads.html

@@ -0,0 +1,37 @@
+<!-- Vertical Ad Banner -->
+<div class="vertical-ad-banner">
+  <div class="ad-content">
+    <div class="ad-icon">
+      <i class="bi bi-rocket-takeoff"></i>
+    </div>
+    <h4>Company</h4>
+    <p>Transform Your Business with Our Solutions</p>
+    <a href="#" class="ad-link">Explore Now <i class="bi bi-arrow-right"></i></a>
+  </div>
+</div>
+
+<!-- Horizontal Ad Banner -->
+<div class="horizontal-ad-banner">
+  <div class="ad-content">
+    <div class="ad-icon">
+      <i class="bi bi-graph-up-arrow"></i>
+    </div>
+    <div class="ad-text">
+      <h4>Boost Your Growth</h4>
+      <p>Partner with Company for Digital Excellence</p>
+    </div>
+    <a href="#" class="ad-link">Get Started <i class="bi bi-arrow-right"></i></a>
+  </div>
+</div>
+
+<!-- Feature Ad Banner -->
+<div class="feature-ad-banner">
+  <div class="ad-content">
+    <div class="ad-icon">
+      <i class="bi bi-shield-check"></i>
+    </div>
+    <h4>Secure Solutions</h4>
+    <p>Trusted by Industry Leaders</p>
+    <a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
+  </div>
+</div> 

components/contact.html

@@ -1,29 +1,141 @@
 <section class="contact section-padding" id="section_5">
   <div class="container">
-    <div class="row">
+    <div class="row justify-content-center">
-      <div class="col-12">
+      <div class="col-lg-8 col-md-10 col-12 text-center">
         <div class="section-title-wrap d-flex justify-content-center align-items-center mb-5">
-          <img src="images/happy-bearded-young-man.jpg" class="avatar-image img-fluid" alt="" />
+          <img src="images/white-desk-work-study-aesthetics.jpg" class="avatar-image img-fluid" alt="" />
-
+          <h2 class="text-white ms-4 mb-0">Get In Touch</h2>
-          <h2 class="text-white ms-4 mb-0">Contact Me</h2>
+        </div>
       </div>
     </div>
 
-      <div class="col-lg-8 col-12 mx-auto">
+    <div class="row justify-content-center">
-        <div class="custom-form contact-form" action="#" method="post" role="form">
+      <div class="col-lg-10 col-md-12 col-12">
+        <div class="contact-wrapper">
+          <div class="row">
+            <!-- Contact Info Cards -->
+            <div class="col-lg-4 col-md-12 col-12">
+              <div class="contact-info-cards">
+                <div class="contact-info-card">
+                  <div class="contact-info-icon">
+                    <i class="bi bi-geo-alt"></i>
+                  </div>
+                  <div class="contact-info-content">
+                    <h4>Location</h4>
+                    <p>Damascus, Syria</p>
+                  </div>
+                </div>
+
+                <div class="contact-info-card">
+                  <div class="contact-info-icon">
+                    <i class="bi bi-envelope"></i>
+                  </div>
+                  <div class="contact-info-content">
+                    <h4>Email</h4>
+                    <p><a href="mailto:hello@company.com">hello@company.com</a></p>
+                  </div>
+                </div>
+
+                <div class="contact-info-card">
+                  <div class="contact-info-icon">
+                    <i class="bi bi-telephone"></i>
+                  </div>
+                  <div class="contact-info-content">
+                    <h4>Phone</h4>
+                    <p><a href="tel:010-020-0340">010-020-0340</a></p>
+                  </div>
+                </div>
+
+                <div class="contact-info-card">
+                  <div class="contact-info-icon">
+                    <i class="bi bi-person"></i>
+                  </div>
+                  <div class="contact-info-content">
+                    <h4>Name</h4>
+                    <p>Mohammed</p>
+                  </div>
+                </div>
+
+                <!-- Company Ad -->
+                <div class="tech-masters-ad">
+                  <div class="ad-content">
+                    <div class="ad-icon">
+                      <i class="bi bi-cpu"></i>
+                    </div>
+                    <h4>Company</h4>
+                    <p>Your Trusted Partner in Digital Innovation</p>
+                    <a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
+                  </div>
+                </div>
+
+                <div class="contact-social">
+                  <h4>Follow Me</h4>
+                  <div class="social-icon">
+                    <ul class="list-inline">
+                      <li class="list-inline-item">
+                        <a href="#" class="social-icon-link">
+                          <i class="bi bi-linkedin"></i>
+                        </a>
+                      </li>
+                      <li class="list-inline-item">
+                        <a href="#" class="social-icon-link">
+                          <i class="bi bi-github"></i>
+                        </a>
+                      </li>
+                      <li class="list-inline-item">
+                        <a href="#" class="social-icon-link">
+                          <i class="bi bi-twitter"></i>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Contact Form -->
+            <div class="col-lg-8 col-md-12 col-12">
+              <div class="contact-form">
+                <h3 class="form-title">Send Me a Message</h3>
+                <form class="custom-form" action="#" method="post" role="form">
                   <div class="row">
                     <div class="col-lg-6 col-md-6 col-12">
-              <input type="text" name="name" id="name" class="form-control" placeholder="Name" required="" />
+                      <div class="form-floating">
+                        <input type="text" name="name" id="name" class="form-control" placeholder="Name" required />
+                        <label for="name">Name</label>
+                      </div>
                     </div>
 
                     <div class="col-lg-6 col-md-6 col-12">
-              <input type="email" name="email" id="email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Email" required="" />
+                      <div class="form-floating">
+                        <input type="email" name="email" id="email" class="form-control" placeholder="Email" required />
+                        <label for="email">Email</label>
+                      </div>
                     </div>
 
                     <div class="col-12">
-              <textarea name="message" rows="6" class="form-control" id="message" placeholder="Message"></textarea>
+                      <div class="form-floating">
+                        <input type="text" name="subject" id="subject" class="form-control" placeholder="Subject" required />
+                        <label for="subject">Subject</label>
+                      </div>
+                    </div>
 
-              <button type="submit" class="form-control">Send Message</button>
+                    <div class="col-12">
+                      <div class="form-floating">
+                        <textarea name="message" id="message" class="form-control" placeholder="Message" required></textarea>
+                        <label for="message">Message</label>
+                      </div>
+                    </div>
+
+                    <div class="col-12">
+                      <button type="submit" class="custom-btn custom-border-btn">
+                        <span>Send Message</span>
+                        <i class="bi bi-arrow-right"></i>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
             </div>
           </div>
         </div>

components/projects.html

@@ -2,21 +2,17 @@
   <div class="container">
     <div class="row">
       <div class="col-lg-8 col-md-8 col-12 ms-auto">
-          <div
+        <div class="section-title-wrap d-flex justify-content-center align-items-center mb-4">
-            class="section-title-wrap d-flex justify-content-center align-items-center mb-4"
+          <img src="images/white-desk-work-study-aesthetics.jpg" class="avatar-image img-fluid" alt="" />
-          >
-            <img
-              src="images/white-desk-work-study-aesthetics.jpg"
-              class="avatar-image img-fluid"
-              alt=""
-            />
-
           <h2 class="text-white ms-4 mb-0">Projects</h2>
         </div>
       </div>
+    </div>
 
     <div class="clearfix"></div>
 
+    <div class="row">
+      <!-- Law Office Login -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
@@ -34,6 +30,7 @@
         </div>
       </div>
 
+      <!-- Easy-pay Login -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
@@ -51,6 +48,7 @@
         </div>
       </div>
 
+      <!-- Cloths Ecommerce -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
@@ -68,116 +66,91 @@
         </div>
       </div>
 
+      <!-- Law Office -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">Law Office</h3>
           </div>
-            <a
+          <a href="images/projects/law-office-home.png" class="popup-image">
-              href="images/projects/law-office-home.png"
+            <img src="images/projects/law-office-home.png" class="projects-image img-fluid" alt="law office" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/law-office-home.png"
-                class="projects-image img-fluid"
-                alt="law office"
-              />
           </a>
         </div>
       </div>
 
+      <!-- SVU E-commerce -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">SVU E-commerce</h3>
           </div>
-            <a
+          <a href="images/projects/svu-hw.png" class="popup-image">
-              href="images/projects/svu-hw.png"
+            <img src="images/projects/svu-hw.png" class="projects-image img-fluid" alt="" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/svu-hw.png"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
 
+      <!-- NANS's CRM -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">NANS's CRM</h3>
           </div>
-            <a
+          <a href="images/projects/nanas-main-dashboard.png" class="popup-image">
-              href="images/projects/nanas-main-dashboard.png"
+            <img src="images/projects/nanas-main-dashboard.png" class="projects-image img-fluid" alt="" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/nanas-main-dashboard.png"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
 
+      <!-- Majsin's Restaurant -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">Majsin's Restaurant</h3>
           </div>
-            <a
+          <a href="images/projects/majsin-dashborad.png" class="popup-image">
-              href="images/projects/majsin-dashborad.png"
+            <img src="images/projects/majsin-dashborad.png" class="projects-image img-fluid" alt="" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/majsin-dashborad.png"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
 
+      <!-- BPro's ERP System -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">BPro's ERP System</h3>
           </div>
-            <a href="images/projects/bpro-erp.jpg" class="popup-image">
+          <a href="images/projects/bpro-erp.png" class="popup-image">
-              <img
+            <img src="images/projects/bpro-erp.png" class="projects-image img-fluid" alt="" />
-                src="images/projects/bpro-erp.jpg"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
 
+      <!-- Moneyout Bank -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">Moneyout Bank</h3>
           </div>
-            <a
+          <a href="images/projects/moneyout.png" class="popup-image">
-              href="images/projects/moneyout.png"
+            <img src="images/projects/moneyout.png" class="projects-image img-fluid" alt="" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/moneyout.png"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
     </div>
   </div>
-  </section>
+
+  <!-- Lightbox -->
+  <div class="lightbox">
+    <div class="lightbox-content">
+      <img src="" alt="" class="lightbox-image">
+      <span class="lightbox-close">&times;</span>
+    </div>
+  </div>
+</section>

css/templatemo-first-portfolio-style.css

@@ -519,8 +519,6 @@ strong {
   position: absolute;
   z-index: 22;
   top: -44px;
-  /* width: 100%; */
-  /* min-width: 550px; */
   width: 340px;
   height: 340px;
   right: 67px;
@@ -528,10 +526,14 @@ strong {
   border: 5px solid #FFF;
   animation: scaleIn 1s ease-out;
   transition: transform 0.3s ease;
+  filter: brightness(1.2) contrast(1.1) saturate(1.1);
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
 }
 
 .hero-image:hover {
   transform: scale(1.05);
+  filter: brightness(1.3) contrast(1.2) saturate(1.2);
+  box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
 }
 
 .hero svg {
@@ -692,10 +694,14 @@ strong {
   border-radius: var(--border-radius-medium);
   animation: slideInLeft 1s ease-out;
   transition: transform 0.3s ease;
+  filter: brightness(1.2) contrast(1.1) saturate(1.1);
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
 }
 
 .about-image:hover {
   transform: scale(1.05);
+  filter: brightness(1.3) contrast(1.2) saturate(1.2);
+  box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
 }
 
 .about-thumb {
@@ -995,115 +1001,275 @@ strong {
 -----------------------------------------*/
 .contact {
   background: var(--section-bg-color);
+  position: relative;
+  overflow: hidden;
+  padding: 100px 0;
 }
 
-.contact-info {
+.contact::before {
-  background: var(--white-color);
+  content: '';
-  border-top-right-radius: var(--border-radius-small);
+  position: absolute;
-  border-bottom-right-radius: var(--border-radius-small);
+  top: 0;
-  padding: 60px 30px 30px 30px;
+  left: 0;
+  width: 100%;
   height: 100%;
-  animation: fadeInUp 1s ease-out;
+  background: linear-gradient(135deg, rgba(83, 93, 161, 0.15), rgba(20, 183, 137, 0.15));
+  z-index: 1;
 }
 
-.contact-info-border-start {
+.contact .container {
-  border-right: 1px solid var(--border-color);
+  position: relative;
-  border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
+  z-index: 2;
+}
+
+.contact-wrapper {
+  background: var(--white-color);
+  border-radius: var(--border-radius-medium);
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.contact-info-cards {
+  background: var(--primary-color);
+  padding: 40px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.contact-info-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--border-radius-small);
+  transition: all 0.3s ease;
+}
+
+.contact-info-card:hover {
+  transform: translateX(10px);
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.contact-info-icon {
+  width: 50px;
+  height: 50px;
+  background: var(--white-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: var(--primary-color);
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.contact-info-card:hover .contact-info-icon {
+  background: var(--secondary-color);
+  color: var(--white-color);
+  transform: rotate(360deg);
+}
+
+.contact-info-content {
+  flex-grow: 1;
+}
+
+.contact-info-content h4 {
+  color: var(--white-color);
+  font-size: 18px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.contact-info-content p {
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0;
+  font-size: 16px;
+}
+
+.contact-info-content a {
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.contact-info-content a:hover {
+  color: var(--white-color);
+}
+
+.contact-social {
+  margin-top: auto;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--border-radius-small);
+}
+
+.contact-social h4 {
+  color: var(--white-color);
+  font-size: 18px;
+  margin-bottom: 15px;
+  font-weight: 600;
 }
 
 .contact-form {
-  margin-left: 10px;
+  padding: 50px;
+  background: var(--white-color);
 }
 
-/*---------------------------------------
+.form-title {
-  CUSTOM FORM               
+  color: var(--primary-color);
------------------------------------------*/
+  font-size: 28px;
-.custom-form .form-control {
+  margin-bottom: 30px;
-  background: var(--white-color);
+  font-weight: 600;
-  box-shadow: none;
+}
-  border: 2px solid var(--border-color);
+
-  color: var(--p-color);
+.form-floating {
-  margin-bottom: 24px;
+  margin-bottom: 25px;
-  padding-top: 13px;
+}
-  padding-bottom: 13px;
+
-  outline: none;
+.form-floating > .form-control {
-  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  height: calc(3.5rem + 2px);
+  padding: 1rem 1.25rem;
+  border: 2px solid rgba(83, 93, 161, 0.1);
+  border-radius: var(--border-radius-small);
+  transition: all 0.3s ease;
+  font-size: 16px;
+}
+
+.form-floating > textarea.form-control {
+  height: 180px;
+  resize: none;
 }
 
 .form-floating > label {
+  padding: 1rem 1.25rem;
   color: var(--p-color);
+  font-size: 16px;
 }
 
-.form-check-inline {
+.form-floating > .form-control:focus {
-  vertical-align: middle;
-  width: 100%;
-  position: relative;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 24px;
-  padding: 0;
-}
-
-.custom-form .form-check-label {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-}
-
-.form-check-label-text {
-  color: var(--p-color);
-  display: block;
-  font-size: copyright-font-size;
-  margin-top: 5px;
-}
-
-.form-check-input[type="checkbox"] {
-  background: var(--white-color);
-  border: 2px solid var(--border-color);
-  box-shadow: none;
-  outline: none;
-  width: 100%;
-  margin-top: 0;
-  margin-left: 0;
-  padding: 40px 50px;
-}
-
-.form-check-input:checked[type="checkbox"] {
-  background-image: none;
-}
-
-.form-check-input:hover,
-.form-check-input:checked {
-  background-color: transparent;
   border-color: var(--secondary-color);
+  box-shadow: 0 0 0 0.25rem rgba(20, 183, 137, 0.1);
+  background-color: rgba(20, 183, 137, 0.02);
 }
 
-.custom-form .form-control:hover,
+.form-floating > .form-control:focus + label,
-.custom-form .form-control:focus {
+.form-floating > .form-control:not(:placeholder-shown) + label {
+  color: var(--secondary-color);
+  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+}
+
+.custom-btn.custom-border-btn {
+  width: 100%;
+  padding: 18px 30px;
+  font-size: 16px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 600;
+  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+  border: 2px solid var(--secondary-color);
+  color: var(--secondary-color);
   background: transparent;
-  border-color: var(--secondary-color);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
 }
 
-.custom-form .form-floating textarea {
+.custom-btn.custom-border-btn i {
-  height: 150px;
+  transition: transform 0.3s ease;
 }
 
-.custom-form button[type="submit"] {
+.custom-btn.custom-border-btn:hover i {
+  transform: translateX(5px);
+}
+
+.custom-btn.custom-border-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
   background: var(--secondary-color);
-  border: none;
+  transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-  border-radius: var(--border-radius-large);
+  z-index: -1;
-  color: var(--white-color);
-  font-weight: var(--font-weight-bold);
-  transition: all 0.3s;
-  margin-bottom: 0;
 }
 
-.custom-form button[type="submit"]:hover,
+.custom-btn.custom-border-btn:hover {
-.custom-form button[type="submit"]:focus {
+  color: var(--white-color);
-  background: var(--primary-color);
+  transform: translateY(-3px);
-  border-color: transparent;
+  box-shadow: 0 10px 20px rgba(20, 183, 137, 0.2);
+}
+
+.custom-btn.custom-border-btn:hover::before {
+  width: 100%;
+}
+
+.social-icon {
+  display: flex;
+  gap: 10px;
+}
+
+.social-icon-link {
+  width: 45px;
+  height: 45px;
+  line-height: 45px;
+  font-size: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  color: var(--white-color);
+  transition: all 0.3s ease;
+}
+
+.social-icon-link:hover {
+  background: var(--white-color);
+  border-color: var(--white-color);
+  color: var(--primary-color);
+  transform: translateY(-5px) rotate(360deg);
+}
+
+@media (max-width: 991px) {
+  .contact-info-cards {
+    padding: 30px;
+  }
+  
+  .contact-form {
+    padding: 40px;
+  }
+  
+  .contact-info-card {
+    padding: 15px;
+  }
+}
+
+@media (max-width: 767px) {
+  .contact-info-cards,
+  .contact-form {
+    padding: 30px;
+  }
+  
+  .contact-info-card {
+    padding: 15px;
+  }
+  
+  .form-title {
+    font-size: 24px;
+  }
+  
+  .form-floating > .form-control {
+    font-size: 15px;
+  }
+  
+  .custom-btn.custom-border-btn {
+    padding: 15px 25px;
+    font-size: 15px;
+  }
 }
 
 /*---------------------------------------
@@ -1268,28 +1434,116 @@ strong {
   }
 
   .navbar {
-    background: var(--white-color);
+    background: rgba(83, 93, 161, 0.95);
     padding: 10px 0;
   }
 
   .navbar .container {
     background: transparent;
+    padding: 0 15px;
   }
 
   .navbar-brand {
-    color: var(--primary-color);
+    color: var(--white-color);
+    font-size: 24px;
   }
 
-  .navbar-nav .nav-link {
+  .navbar-toggler {
-    color: var(--primary-color);
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .navbar-toggler:focus {
+    box-shadow: none;
+  }
+
+  .navbar-toggler-icon {
+    background-image: none;
+    position: relative;
+    width: 30px;
+    height: 2px;
+    background-color: var(--white-color);
+    display: inline-block;
+    vertical-align: middle;
+    transition: all 0.3s ease;
+  }
+
+  .navbar-toggler-icon:before,
+  .navbar-toggler-icon:after {
+    content: '';
+    position: absolute;
+    width: 30px;
+    height: 2px;
+    background-color: var(--white-color);
+    left: 0;
+    transition: all 0.3s ease;
+  }
+
+  .navbar-toggler-icon:before {
+    top: -8px;
+  }
+
+  .navbar-toggler-icon:after {
+    bottom: -8px;
+  }
+
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
+    background-color: transparent;
+  }
+
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
+    transform: rotate(45deg);
+    top: 0;
+  }
+
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
+    transform: rotate(-45deg);
+    bottom: 0;
+  }
+
+  .navbar-collapse {
+    background: rgba(83, 93, 161, 0.98);
+    margin: 10px -15px -10px;
+    padding: 20px;
+    border-radius: 0 0 10px 10px;
+  }
+
+  .navbar-nav {
     padding: 10px 0;
   }
 
-  .navbar .custom-btn {
+  .navbar-nav .nav-link {
-    border-color: var(--secondary-color);
+    color: var(--white-color);
+    padding: 12px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .navbar-nav .nav-link:last-child {
+    border-bottom: none;
+  }
+
+  .navbar-nav .nav-link:hover {
     color: var(--secondary-color);
   }
 
+  .navbar-nav .nav-link::after {
+    display: none;
+  }
+
+  .navbar .custom-btn {
+    border-color: var(--white-color);
+    color: var(--white-color);
+    margin-top: 10px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .navbar .custom-btn:hover {
+    background: var(--white-color);
+    color: var(--primary-color);
+  }
+
   .hero {
     padding-top: 200px;
     padding-bottom: 400px;
@@ -1347,6 +1601,19 @@ strong {
 }
 
 @media screen and (max-width: 575px) {
+  .navbar-brand {
+    font-size: 20px;
+  }
+
+  .navbar .container {
+    padding: 0 10px;
+  }
+
+  .navbar-collapse {
+    margin: 10px -10px -10px;
+    padding: 15px;
+  }
+
   .navbar .container {
     margin-right: 12px;
     margin-left: 12px;
@@ -1569,3 +1836,370 @@ html {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 0.2rem rgba(83, 93, 161, 0.25);
 }
+
+img[src*="happy-bearded-young-man.jpg"] {
+  filter: brightness(1.2) contrast(1.1) saturate(1.1);
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+img[src*="happy-bearded-young-man.jpg"]:hover {
+  filter: brightness(1.3) contrast(1.2) saturate(1.2);
+  box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
+  transform: scale(1.05);
+}
+
+.tech-masters-ad {
+  background: linear-gradient(135deg, rgba(20, 183, 137, 0.2), rgba(83, 93, 161, 0.2));
+  border-radius: var(--border-radius-small);
+  padding: 25px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.tech-masters-ad::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(20, 183, 137, 0.1), rgba(83, 93, 161, 0.1));
+  z-index: 1;
+}
+
+.tech-masters-ad:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.ad-content {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+}
+
+.ad-icon {
+  width: 60px;
+  height: 60px;
+  background: var(--white-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 15px;
+  font-size: 28px;
+  color: var(--primary-color);
+  transition: all 0.3s ease;
+}
+
+.tech-masters-ad:hover .ad-icon {
+  background: var(--secondary-color);
+  color: var(--white-color);
+  transform: rotate(360deg);
+}
+
+.tech-masters-ad h4 {
+  color: var(--white-color);
+  font-size: 20px;
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+
+.tech-masters-ad p {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 15px;
+  margin-bottom: 15px;
+}
+
+.ad-link {
+  color: var(--white-color);
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  transition: all 0.3s ease;
+  padding: 8px 20px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: var(--border-radius-small);
+}
+
+.ad-link i {
+  transition: transform 0.3s ease;
+}
+
+.ad-link:hover {
+  background: var(--white-color);
+  color: var(--primary-color);
+  border-color: var(--white-color);
+}
+
+.ad-link:hover i {
+  transform: translateX(5px);
+}
+
+@media (max-width: 767px) {
+  .tech-masters-ad {
+    padding: 20px;
+  }
+  
+  .ad-icon {
+    width: 50px;
+    height: 50px;
+    font-size: 24px;
+  }
+  
+  .tech-masters-ad h4 {
+    font-size: 18px;
+  }
+  
+  .tech-masters-ad p {
+    font-size: 14px;
+  }
+}
+
+/* Ad Banners */
+.vertical-ad-banner {
+  background: linear-gradient(135deg, rgba(20, 183, 137, 0.1), rgba(83, 93, 161, 0.1));
+  border-radius: var(--border-radius-medium);
+  padding: 30px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(83, 93, 161, 0.1);
+}
+
+.vertical-ad-banner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(20, 183, 137, 0.05), rgba(83, 93, 161, 0.05));
+  z-index: 1;
+}
+
+.vertical-ad-banner:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  border-color: rgba(20, 183, 137, 0.2);
+}
+
+.horizontal-ad-banner {
+  background: linear-gradient(135deg, rgba(83, 93, 161, 0.1), rgba(20, 183, 137, 0.1));
+  border-radius: var(--border-radius-medium);
+  padding: 20px 30px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  border: 1px solid rgba(83, 93, 161, 0.1);
+}
+
+.horizontal-ad-banner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(83, 93, 161, 0.05), rgba(20, 183, 137, 0.05));
+  z-index: 1;
+}
+
+.horizontal-ad-banner:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+  border-color: rgba(20, 183, 137, 0.2);
+}
+
+.feature-ad-banner {
+  background: linear-gradient(135deg, rgba(20, 183, 137, 0.15), rgba(83, 93, 161, 0.15));
+  border-radius: var(--border-radius-medium);
+  padding: 25px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  text-align: center;
+  border: 1px solid rgba(83, 93, 161, 0.1);
+}
+
+.feature-ad-banner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(20, 183, 137, 0.1), rgba(83, 93, 161, 0.1));
+  z-index: 1;
+}
+
+.feature-ad-banner:hover {
+  transform: scale(1.02);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  border-color: rgba(20, 183, 137, 0.2);
+}
+
+.ad-content {
+  position: relative;
+  z-index: 2;
+}
+
+.horizontal-ad-banner .ad-content {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+}
+
+.ad-icon {
+  width: 50px;
+  height: 50px;
+  background: var(--white-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: var(--primary-color);
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.vertical-ad-banner:hover .ad-icon,
+.horizontal-ad-banner:hover .ad-icon,
+.feature-ad-banner:hover .ad-icon {
+  background: var(--secondary-color);
+  color: var(--white-color);
+  transform: rotate(360deg);
+}
+
+.ad-text {
+  flex-grow: 1;
+}
+
+.ad-content h4 {
+  color: var(--primary-color);
+  font-size: 18px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.ad-content p {
+  color: var(--p-color);
+  font-size: 14px;
+  margin-bottom: 15px;
+}
+
+.horizontal-ad-banner .ad-content p {
+  margin-bottom: 0;
+}
+
+.ad-link {
+  color: var(--secondary-color);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  transition: all 0.3s ease;
+  padding: 8px 20px;
+  border: 2px solid rgba(20, 183, 137, 0.2);
+  border-radius: var(--border-radius-small);
+}
+
+.ad-link i {
+  transition: transform 0.3s ease;
+}
+
+.ad-link:hover {
+  background: var(--secondary-color);
+  color: var(--white-color);
+  border-color: var(--secondary-color);
+}
+
+.ad-link:hover i {
+  transform: translateX(5px);
+}
+
+/* Ad Placement Styles */
+.hero .container {
+  position: relative;
+}
+
+.hero-ad {
+  position: absolute;
+  right: -200px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 180px;
+}
+
+.about-ad {
+  margin-top: 30px;
+}
+
+.services-ad {
+  margin: 30px 0;
+}
+
+.projects-ad {
+  margin: 30px 0;
+}
+
+@media (max-width: 1400px) {
+  .hero-ad {
+    display: none;
+  }
+}
+
+@media (max-width: 991px) {
+  .horizontal-ad-banner {
+    flex-direction: column;
+    text-align: center;
+    padding: 25px;
+  }
+  
+  .horizontal-ad-banner .ad-content {
+    flex-direction: column;
+  }
+  
+  .ad-text {
+    margin: 15px 0;
+  }
+}
+
+@media (max-width: 767px) {
+  .vertical-ad-banner,
+  .horizontal-ad-banner,
+  .feature-ad-banner {
+    padding: 20px;
+  }
+  
+  .ad-icon {
+    width: 45px;
+    height: 45px;
+    font-size: 20px;
+  }
+  
+  .ad-content h4 {
+    font-size: 16px;
+  }
+  
+  .ad-content p {
+    font-size: 13px;
+  }
+}
+

index.html

@@ -23,31 +23,91 @@
   </head>
 
   <body>
-    <!-- Include Header -->
+    <!-- Header -->
     <div id="header"></div>
 
     <main>
-      <!-- Include Hero Section -->
+      <!-- Hero Section -->
-      <div id="hero"></div>
+      <section id="hero"></section>
 
-      <!-- Include About Section -->
+      <!-- About Section -->
-      <div id="about"></div>
+      <section id="about"></section>
+      <aside class="about-ad">
+        <div class="horizontal-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-graph-up-arrow"></i>
+            </div>
+            <div class="ad-text">
+              <h4>Boost Your Growth</h4>
+              <p>Partner with Company for Digital Excellence</p>
+            </div>
+            <a href="#" class="ad-link"
+              >Get Started <i class="bi bi-arrow-right"></i
+            ></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include Featured Section -->
+      <!-- Featured Section -->
-      <div id="featured"></div>
+      <section id="featured"></section>
+      <aside class="featured-ad">
+        <div class="feature-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-shield-check"></i>
+            </div>
+            <h4>Secure Solutions</h4>
+            <p>Trusted by Industry Leaders</p>
+            <a href="#" class="ad-link"
+              >Learn More <i class="bi bi-arrow-right"></i
+            ></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include Projects Section -->
+      <!-- Projects Section -->
-      <div id="projects"></div>
+      <section id="projects"></section>
+      <aside class="projects-ad">
+        <div class="horizontal-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-lightning-charge"></i>
+            </div>
+            <div class="ad-text">
+              <h4>Fast Development</h4>
+              <p>Accelerate Your Project Timeline</p>
+            </div>
+            <a href="#" class="ad-link"
+              >Start Now <i class="bi bi-arrow-right"></i
+            ></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include Services Section -->
+      <!-- Services Section -->
-      <div id="services"></div>
+      <section id="services"></section>
+      <aside class="services-ad">
+        <div class="feature-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-gear"></i>
+            </div>
+            <h4>Premium Services</h4>
+            <p>Expert Solutions for Your Business</p>
+            <a href="#" class="ad-link"
+              >Discover More <i class="bi bi-arrow-right"></i
+            ></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include Contact Section -->
+      <!-- Contact Section -->
-      <div id="contact"></div>
+      <section id="contact"></section>
     </main>
 
-    <!-- Include Footer -->
+    <!-- Footer -->
-    <div id="footer"></div>
+    <footer id="footer"></footer>
 
     <!-- JAVASCRIPT FILES -->
     <script src="js/jquery.min.js"></script>
@@ -57,19 +117,26 @@
     <script src="js/jquery.magnific-popup.min.js"></script>
     <script src="js/magnific-popup-options.js"></script>
     <script src="js/custom.js"></script>
+    <script src="js/cat-animation.js"></script>
 
     <!-- Load Components -->
     <script>
       $(document).ready(function () {
-        // Load components
+        const components = {
-        $("#header").load("components/header.html");
+          header: "components/header.html",
-        $("#hero").load("components/hero.html");
+          hero: "components/hero.html",
-        $("#about").load("components/about.html");
+          about: "components/about.html",
-        $("#featured").load("components/featured.html");
+          featured: "components/featured.html",
-        $("#services").load("components/services.html");
+          services: "components/services.html",
-        $("#projects").load("components/projects.html");
+          projects: "components/projects.html",
-        $("#contact").load("components/contact.html");
+          contact: "components/contact.html",
-        $("#footer").load("components/footer.html");
+          footer: "components/footer.html",
+        };
+
+        // Load all components
+        Object.entries(components).forEach(([id, path]) => {
+          $(`#${id}`).load(path);
+        });
       });
     </script>
   </body>

js/cat-animation.js

@@ -0,0 +1,279 @@
+class Cat {
+  constructor(canvas, x, y, scale = 1, color = 'default') {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.x = x;
+    this.y = y;
+    this.scale = scale;
+    this.color = color;
+    this.direction = 1;
+    this.speed = 2;
+    this.frame = 0;
+    this.frameCount = 8;
+    this.frameWidth = 64;
+    this.frameHeight = 64;
+    this.isPaused = false;
+    this.pauseTimer = 0;
+    this.pauseDuration = 0;
+    this.pawPrints = [];
+    this.lastPawPrint = 0;
+    this.lastMeow = 0;
+    this.meowCooldown = 3000; // 3 seconds between meows
+    
+    // Initialize sounds with error handling
+    this.sounds = {
+      meow: null,
+      purr: null,
+      paw: null
+    };
+
+    // Create audio elements with error handling
+    try {
+      this.sounds.meow = new Audio('sounds/meow.wav');
+
+      // Set volume for each sound
+      this.sounds.meow.volume = 0.05;
+      this.sounds.paw.volume = 0;
+
+      // Add error handling for each sound
+      Object.entries(this.sounds).forEach(([key, sound]) => {
+        if (sound) {
+          sound.addEventListener('error', (e) => {
+            console.warn(`Error loading ${key} sound:`, e);
+          });
+        }
+      });
+    } catch (error) {
+      console.warn('Error initializing sounds:', error);
+    }
+  }
+
+  playSound(soundName) {
+    try {
+      const sound = this.sounds[soundName];
+      if (sound) {
+        sound.currentTime = 0;
+        sound.play().catch(error => {
+          console.warn(`Error playing ${soundName} sound:`, error);
+        });
+      }
+    } catch (error) {
+      console.warn(`Error playing ${soundName} sound:`, error);
+    }
+  }
+
+  update() {
+    if (this.isPaused) {
+      this.pauseTimer++;
+      if (this.pauseTimer >= this.pauseDuration) {
+        this.isPaused = false;
+        this.pauseTimer = 0;
+      }
+      return;
+    }
+
+    // Random pause and meow
+    if (Math.random() < 0.005) {
+      this.isPaused = true;
+      this.pauseDuration = Math.random() * 100 + 100;
+      
+      // Random meow during pause
+      if (Date.now() - this.lastMeow > this.meowCooldown) {
+        this.playSound('meow');
+        this.lastMeow = Date.now();
+      }
+    }
+
+    // Update position
+    this.x += this.speed * this.direction;
+    
+    // Change direction at edges
+    if (this.x >= this.canvas.width - this.frameWidth * this.scale) {
+      this.direction = -1;
+      this.playSound('paw');
+    } else if (this.x <= 0) {
+      this.direction = 1;
+      this.playSound('paw');
+    }
+
+    // Update animation frame
+    this.frame = (this.frame + 0.2) % this.frameCount;
+
+    // Add paw prints with sound
+    if (Date.now() - this.lastPawPrint > 200) {
+      this.addPawPrint();
+      this.lastPawPrint = Date.now();
+      // Play paw sound occasionally
+      if (Math.random() < 0.3) {
+        this.playSound('paw');
+      }
+    }
+
+    // Update paw prints
+    this.pawPrints = this.pawPrints.filter(print => {
+      print.opacity -= 0.02;
+      return print.opacity > 0;
+    });
+  }
+
+  draw() {
+    // Draw paw prints
+    this.pawPrints.forEach(print => {
+      this.ctx.globalAlpha = print.opacity;
+      this.ctx.fillStyle = '#000';
+      this.ctx.beginPath();
+      this.ctx.arc(print.x, print.y, 3, 0, Math.PI * 2);
+      this.ctx.fill();
+    });
+    this.ctx.globalAlpha = 1;
+
+    // Draw cat
+    this.ctx.save();
+    this.ctx.translate(this.x, this.y);
+    this.ctx.scale(this.direction * this.scale, this.scale);
+    
+    // Draw cat body
+    this.ctx.fillStyle = this.color === 'default' ? '#666' : 
+                        this.color === 'orange' ? '#FFA500' : '#000';
+    
+    // Body
+    this.ctx.beginPath();
+    this.ctx.ellipse(32, 40, 20, 15, 0, 0, Math.PI * 2);
+    this.ctx.fill();
+    
+    // Head
+    this.ctx.beginPath();
+    this.ctx.arc(15, 35, 12, 0, Math.PI * 2);
+    this.ctx.fill();
+    
+    // Ears
+    this.ctx.beginPath();
+    this.ctx.moveTo(8, 28);
+    this.ctx.lineTo(5, 20);
+    this.ctx.lineTo(12, 28);
+    this.ctx.fill();
+    
+    this.ctx.beginPath();
+    this.ctx.moveTo(22, 28);
+    this.ctx.lineTo(25, 20);
+    this.ctx.lineTo(18, 28);
+    this.ctx.fill();
+    
+    // Tail
+    this.ctx.beginPath();
+    this.ctx.moveTo(52, 40);
+    this.ctx.quadraticCurveTo(60, 30, 65, 40);
+    this.ctx.strokeStyle = this.ctx.fillStyle;
+    this.ctx.lineWidth = 4;
+    this.ctx.stroke();
+    
+    // Legs (animated)
+    const legOffset = Math.sin(this.frame * 0.5) * 5;
+    this.ctx.beginPath();
+    this.ctx.moveTo(25, 55);
+    this.ctx.lineTo(25, 55 + legOffset);
+    this.ctx.moveTo(35, 55);
+    this.ctx.lineTo(35, 55 - legOffset);
+    this.ctx.moveTo(45, 55);
+    this.ctx.lineTo(45, 55 + legOffset);
+    this.ctx.strokeStyle = this.ctx.fillStyle;
+    this.ctx.lineWidth = 3;
+    this.ctx.stroke();
+    
+    this.ctx.restore();
+  }
+
+  addPawPrint() {
+    const offset = this.direction === 1 ? 20 : -20;
+    this.pawPrints.push({
+      x: this.x + offset,
+      y: this.y + this.frameHeight * this.scale - 5,
+      opacity: 0.5
+    });
+  }
+
+  isPointInside(x, y) {
+    return x >= this.x && 
+           x <= this.x + this.frameWidth * this.scale &&
+           y >= this.y && 
+           y <= this.y + this.frameHeight * this.scale;
+  }
+
+  interact(x, y) {
+    if (this.isPointInside(x, y)) {
+      this.isPaused = true;
+      this.pauseDuration = 100;
+      
+      // Play purr sound when petted
+      this.playSound('purr');
+      
+      // Occasionally meow when petted
+      if (Math.random() < 0.3 && Date.now() - this.lastMeow > this.meowCooldown) {
+        this.playSound('meow');
+        this.lastMeow = Date.now();
+      }
+      
+      return true;
+    }
+    return false;
+  }
+}
+
+// Initialize cat animation
+document.addEventListener('DOMContentLoaded', function() {
+  const container = document.createElement('div');
+  container.id = 'cat-container';
+  container.style.cssText = `
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100px;
+    pointer-events: none;
+    z-index: 9999;
+  `;
+  document.body.appendChild(container);
+
+  const canvas = document.createElement('canvas');
+  canvas.width = window.innerWidth;
+  canvas.height = 100;
+  container.appendChild(canvas);
+
+  const ctx = canvas.getContext('2d');
+  const cats = [
+    new Cat(canvas, 0, 20, 1, 'default'),
+    new Cat(canvas, 200, 10, 0.8, 'orange'),
+    new Cat(canvas, 400, 30, 1.2, 'black')
+  ];
+
+  // Handle window resize
+  window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+  });
+
+  // Handle mouse interaction
+  canvas.style.pointerEvents = 'auto';
+  canvas.addEventListener('click', (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    cats.forEach(cat => {
+      cat.interact(x, y);
+    });
+  });
+
+  // Animation loop
+  function animate() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    cats.forEach(cat => {
+      cat.update();
+      cat.draw();
+    });
+    
+    requestAnimationFrame(animate);
+  }
+
+  animate();
+});

js/click-scroll.js

@@ -5,7 +5,9 @@ var sectionArray = [1, 2, 3, 4, 5];
 
 $.each(sectionArray, function (index, value) {
   $(document).scroll(function () {
-    var offsetSection = $("#" + "section_" + value).offset().top - 90;
+    var section = $("#" + "section_" + value);
+    if (section.length) {  // Check if section exists
+      var offsetSection = section.offset().top - 90;
       var docScroll = $(document).scrollTop();
       var docScroll1 = docScroll + 1;
 
@@ -15,12 +17,15 @@ $.each(sectionArray, function (index, value) {
         $(".navbar-nav .nav-item .nav-link").eq(index).addClass("active");
         $(".navbar-nav .nav-item .nav-link").eq(index).removeClass("inactive");
       }
+    }
   });
 
   $(".click-scroll")
     .eq(index)
     .click(function (e) {
-      var offsetClick = $("#" + "section_" + value).offset().top - 90;
+      var section = $("#" + "section_" + value);
+      if (section.length) {  // Check if section exists
+        var offsetClick = section.offset().top - 90;
         e.preventDefault();
         $("html, body").animate(
           {
@@ -28,6 +33,7 @@ $.each(sectionArray, function (index, value) {
           },
           300
         );
+      }
     });
 });
 

js/custom.js

@@ -77,6 +77,8 @@
   const lightboxClose = document.querySelector('.lightbox-close');
   const projectImages = document.querySelectorAll('.popup-image');
 
+  // Only initialize lightbox if elements exist
+  if (lightbox && lightboxImage && lightboxClose && projectImages.length > 0) {
     projectImages.forEach(image => {
       image.addEventListener('click', (e) => {
         e.preventDefault();
@@ -109,6 +111,7 @@
         document.body.style.overflow = '';
       }
     });
+  }
 
   // Sticky Navigation
   $(window).on('scroll', function() {

sounds/paw.mp3

@@ -0,0 +1 @@
+404: Not Found