body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     background-color: #f5f5f5;
     color: #333;
 }

 header {
     background: #0d6efd;
     color: #fff;
     padding: 20px 0;
     text-align: center;
 }

 header h1 {
     margin: 0;
     font-size: 2.5rem;
 }

 nav {
     display: flex;
     justify-content: center;
     background: #0056b3;
     padding: 10px 0;
 }

 nav a {
     color: #fff;
     text-decoration: none;
     margin: 0 15px;
     font-size: 1.1rem;
 }

 nav a:hover {
     text-decoration: underline;
 }

 .hero {
     text-align: center;
     height: 400px;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;


     animation: slideImages 15s infinite;
 }

 @keyframes slideImages {
     0% {
         background: url('image/hero-image.jpg') no-repeat center center/cover;
     }

     20% {
         background: url('image/hero-image.jpg') no-repeat center center/cover;
     }

     40% {
         background: url('image/privacy-screen-fence.jpg') no-repeat center center/cover;
     }

     60% {
         background: url('image/curved-shade.jpg') no-repeat center center/cover;
     }

     80% {
         background: url('image/sail-shades.jpeg') no-repeat center center/cover;
     }

     100% {
         background: url('image/hero-image1.jpg') no-repeat center center/cover;
     }
 }




 .hero h2 {
     font-size: 2.5rem;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
     animation: fadeIn 2s ease-in-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 header {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     /* Aligns content to the left */
 }


 h1 {
     margin: 0;
     font-size: 24px;
     /* Adjust the title size */
 }

 .scroll-down {
     position: absolute;
     bottom: 20px;
     font-size: 1.5rem;
     color: #fff;
     animation: bounce 2s infinite;
 }

 @keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0);
     }

     40% {
         transform: translateY(-10px);
     }

     60% {
         transform: translateY(-5px);
     }
 }

 /* About Section Styles */
 .about-us {
     padding: 50px 20px;
     text-align: center;
     background-color: #fff;
     perspective: 1200px;
 }

 .about-us h2 {
     font-size: 3rem;
     margin-bottom: 20px;
     color: #333;
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 2px;
     position: relative;
     overflow: hidden;
     /* Ensures that the text typing effect is contained */
     display: inline-block;
     white-space: nowrap;
 }

 /* Typing effect for "About Us" heading */
 .typing-effect::after {
     content: '|';
     position: absolute;
     right: 0;
     top: 0;
     animation: blink 0.75s step-end infinite;
 }

 /* Typing animation */
 .typing-effect {
     display: inline-block;
     overflow: hidden;
     white-space: nowrap;
     width: 0;
     /* Initial width of 0 for the typing effect */
 }

 /* Typing effect keyframe */
 @keyframes typing {
     from {
         width: 0;
     }

     to {
         width: 100%;
     }
 }

 /* Blinking cursor */
 @keyframes blink {
     50% {
         border-color: transparent;
     }
 }

 /* Fading effect for the text content */
 .typing-text {
     font-size: 1.1rem;
     margin-bottom: 20px;
     line-height: 1.6;
     opacity: 0;
     animation: fadeInText 2s forwards;
 }

 /* Fade-in text keyframe */
 @keyframes fadeInText {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }


 .services {
     padding: 50px 20px;
     text-align: center;
     background-color: #fff;
 }
.service-image {
    width: 300px;  /* Set the desired width */
    height: 200px; /* Set the desired height */
    object-fit: cover; /* Ensure the image scales to fit within the fixed dimensions */
}
 .services h2 {
     font-size: 2rem;
     margin-bottom: 20px;
 }

 .service-items {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 20px;
 }

 .service-item {
     background: #f9f9f9;
     padding: 20px;
     border: 1px solid #ddd;
     border-radius: 5px;
     width: 250px;
     text-align: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .service-item:hover {
     transform: translateY(-10px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 .service-item img {
     max-width: 100%;
     border-radius: 5px;
 }

 
 footer {
     background: #0056b3;
     color: #fff;
     text-align: center;
     padding: 10px 0;
     margin-top: 20px;
 }



  



 .social-media {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     /* Adjust to 3 logos per row */
     gap: 20px;
     margin-top: 40px;
     /* Adjust this if needed */
     width: 45%;
 }


 .social-media a {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .social-media img {
     width: 40px;
     height: 40px;
     transition: transform 0.3s ease;
 }

 .social-media img:hover {
     transform: scale(1.2);
 }