Fixed heading styling conflict

404.html

@@ -96,7 +96,7 @@
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading">Beautiify</h1>
+                <h1 class="heading"><img src="./assets/images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>

assets/css_files/commonstyle.css

@@ -43,17 +43,17 @@ body {
 }
 
 body.dark-mode .SearchDarkMode {
-    color: #FFFFFF;
+    color: white;
 }
 
 section {
     z-index: 100;
 }
 
-.heading {
+section .heading {
     font-size: 4em;
     font-weight: bolder;
-    color: white;
+    color: cornsilk;
     text-align: center;
     margin: 75px 0 80px;
     text-shadow: 2px 2px 2px black, 1px 1px 1px white;
@@ -67,7 +67,7 @@ section {
 }
 
 .box {
-    border: 3px solid #ffffff;
+    border: 3px solid white;
     border-radius: 14px;
     box-shadow: 3px 3px 6px 1px white;
     margin: 20px 40px;

assets/css_files/contributor.css

@@ -23,6 +23,7 @@ body {
     padding: 30px 70px;
     text-align: center;
     position: relative;
+    margin-bottom: 25px;
 }
 
 .contributors .heading-box:after {
@@ -41,6 +42,8 @@ body {
 
 .contributors .heading {
     font-size: 4.5rem;
+    margin-bottom: 30px;
+    color: rgb(50, 50, 12);
     transition: color 0.3s ease-in-out;
 }
 
@@ -193,4 +196,10 @@ body {
     font-size: 19px;
     font-weight: 600;
     text-align: center;
+}
+
+@media (max-width: 768px) {
+    .contributors .heading {
+        font-size: 3.5rem;
+    }
 }

assets/html_files/about.html

@@ -131,7 +131,7 @@ <h3 align="center" style="color: #ffecd1;">Thank You for Visiting Beautiify!</h3
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading"><img src="../images/logo.png">Beautiify</h1>
+                <h1 class="heading"><img src="../images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>

assets/html_files/contact.html

@@ -145,7 +145,7 @@ <h2 class="form-title">Send us a message :)</h2>
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading"><img src="../images/logo.png">Beautiify</h1>
+                <h1 class="heading"><img src="../images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>

assets/html_files/contributor.html

@@ -108,7 +108,7 @@ <h1 class="heading">Our Valuable Contributors</h1>
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading"><img src="../images/logo.png">Beautiify</h1>
+                <h1 class="heading"><img src="../images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>

assets/html_files/faq.html

@@ -99,7 +99,7 @@
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading"><img src="../images/logo.png">Beautiify</h1>
+                <h1 class="heading"><img src="../images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>

index.html

@@ -97,7 +97,7 @@
             <div class="logo">
                 <img src="./assets/images/logo.png" alt="Logo">
             </div>
-            <h1 class="heading">Beautiify</h1>
+            <h1>Beautiify</h1>
             <h3 class="sub-head">Every component, in one place!!</h3>
             <p class="paragraph">
                 Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience.
@@ -130,7 +130,7 @@ <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another searc
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading"><img src="./assets/images/logo.png">Beautiify</h1>
+                <h1 class="heading"><img src="./assets/images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>

style.css

@@ -138,27 +138,23 @@
     transition: all 0.3s ease-out;
 }
 
-@-webkit-keyframes spin {
+@keyframes spin {
     0% {
-        -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
 
     100% {
-        -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }
 
-@keyframes spin {
+@-webkit-keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
     }
 
     100% {
         -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
     }
 }
 
@@ -452,9 +448,12 @@ section {
 }
 
 .comp-section .compcontainer h1 {
-    margin-top: -25px;
+    margin: -25px 0 20px;
     font-size: clamp(4rem, 4vw, 7rem);
-    text-shadow: 2px 2px 3px black, 1px 1px 2px white;
+    background: linear-gradient(to right, #f70479, #cccccc);
+    background: -webkit-linear-gradient(to right, #f70479, #cccccc);
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
     animation: lights 5s 750ms linear infinite;
 }
 
@@ -670,18 +669,23 @@ footer {
     padding: 0 20px;
 }
 
+.footer-container .heading {
+    font-size: 25px;
+    text-align: center;
+    margin-bottom: 20px;
+    background: linear-gradient(to right, #f70479, #cccccc);
+    background: -webkit-linear-gradient(to right, #f70479, #cccccc);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
 .company-info {
     font-weight: 600;
     flex: 1 1 30%;
 }
 
-.company-name {
-    font-size: 24px;
-    margin-bottom: 10px;
-    align-items: center;
-}
-
-.company-name img {
+.company-info img {
     width: 36px;
     width: 36px;
     vertical-align: middle;
@@ -697,17 +701,6 @@ footer {
     flex: 1 1 30%;
 }
 
-.heading {
-    font-size: 24px;
-    margin-bottom: 20px;
-    background: #00F260;
-    background: -webkit-linear-gradient(to right, #f70479, #cccccc);
-    background: linear-gradient(to right, #f70479, #cccccc);
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    text-align: center;
-}
-
 .footer-ul {
     justify-items: center;
     align-items: center;