feat: Google logo Adjustment

Image-Gallery/style.css

@@ -32,7 +32,7 @@ body {
 
 .dark-theme {
   --secondary-color: #0e1525;
-  --text-dark: #ffffff;
+  --text-dark: #8c0ffa;
   --arr-light: white;
   --body-light: #0e1525;
   --img-color:red;
@@ -177,4 +177,11 @@ body {
 #next {
   left: 100%;
 }
-
+.goog-te-gadget img {
+  vertical-align: middle;
+  border: none;
+  width: 110px; /* Ensure the width is set to auto */
+  height: auto; /* Ensure the height is set to auto */
+  max-width: 100%; /* Adjust this value if needed */
+  max-height: 100%; /* Adjust this value if needed */
+}

styles.css

@@ -2318,20 +2318,26 @@ body {
 
 /* ///////////////////// */
 
-/* ******* */
+/* Sub-header Hover Effect */
 .sub__header:hover {
   background-color: transparent;
   color: var(--primary-color);
+  transition: color 0.3s ease; /* Smooth transition for color change */
 }
 
-/* Light mode  And Dark mode of AboutUs*/
-
+/* Light Mode and Dark Mode of AboutUs */
 .headingofAbout {
-  font-weight: bolder;
-  /* Set font weight to bolder */
+  font-weight: bold; /* Make the heading bold */
   text-align: center;
-  color: var(--text-dark);
-  /* Use the text-dark custom property for color */
+  color: yellow; /* Set heading color to yellow */
+  font-size: 2.5rem; /* Increase font size */
+  margin: 20px 0; /* Add margin for spacing */
+  text-shadow: 
+      -1px -1px 0 #000,  
+      1px -1px 0 #000,
+      -1px 1px 0 #000,
+       1px 1px 0 #000; /* Dark black outline around each letter */
+  font-family: 'Roboto', sans-serif; /* Use Roboto font family */
 }
 
 /* Styling for elements with .aboutcon class */
@@ -2340,18 +2346,49 @@ body {
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
-  background-color: var(--body-light);
-  /* Use the text-dark custom property for color */
+  background: linear-gradient(135deg, #7b4397, #dc2430); /* Gradient background */
+  padding: 40px 20px; /* Add padding for spacing */
+  border-radius: 10px; /* Rounded corners */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
+  transition: background-color 0.3s ease; /* Smooth transition for background color */
 }
 
 /* Styling for elements with .aboutcontent class */
 .aboutcontent {
   text-align: center;
   color: var(--text-dark);
-  /* Use the text-dark custom property for color */
   margin-bottom: 20px;
+  flex: 1 1 300px; /* Make flex items responsive */
+  padding: 20px;
+  background-color: rgba(255, 255, 255, 0.8); /* Background color for content */
+  border-radius: 10px; /* Rounded corners */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition for transform and background color */
 }
 
+/* Hover Effect for aboutcontent */
+.aboutcontent:hover {
+  transform: scale(1); /* Slightly enlarge on hover */
+  background-color: rgba(255, 255, 255, 1); /* Change background color on hover */
+}
+
+/* Media Queries for Responsiveness */
+@media (max-width: 768px) {
+  .aboutcon {
+      flex-direction: column; /* Stack items vertically on small screens */
+  }
+
+  .headingofAbout {
+      font-size: 2rem; /* Adjust font size for smaller screens */
+  }
+}
+/* Adjust hover effect for touch devices */
+@media (hover: none) {
+  .aboutcontent:hover {
+      transform: none; /* Remove scaling on touch devices */
+  }
+}
+
+
 /* Styling for SVG elements inside .iconss class */
 .iconss svg {
   width: 100px;