/* Custom CSS */
        body {
            font-family: 'Arial', sans-serif;
            overflow-x: hidden;
            background-color: #111a2c;
        }

        .hero-section {
            position: relative;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url('../images/main.jpg');
            background-size: cover;
            background-position: center;
            color: white;
            text-align: center;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s ease, transform 1s ease;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            padding: 2rem;
            
        }

        .hero-content h1 {
            font-size: 2.0rem;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            font-weight: bolder;
            color: #4CAF50/*#81cd55/*#4378c8*/;
        }

        .hero-content p {
            font-size: 1.0rem;
            margin-bottom: 2rem;
            color: #FFFFFF;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
            
        }

        .btn-primary{
            background-color: #368b39; /* Darker green than your current button */
            color: #FFFFFF;
            padding: 12px 24px;
            border-radius: 30px;
            border: none;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
       
        .btn-primary:hover{
            background-color: #2a6e2c; /* Even darker on hover for interactive feedback */
        }

        .features-section {
            padding: 5rem 0;
            background-color: rgba(26, 34, 56, 0.7)/*#1A2238/*#2D2D2D/*#343434/*aliceblue/*rgba(0, 0, 0, 0.3)/*#31302d/*rgba(65, 89, 58, 0.9)/*#111a2c/*#f8f9fa*/;
        }

        .features-section h2 {
            text-align: center;
            margin-bottom: 3rem;
            color:#F5F5F5/*aliceblue*/;
            font-weight: bold;
        }
        .features-section h4 {
           
            color:#4CAF50/*#81cd55/*aliceblue*/;
            font-weight: bold;
            text-transform: uppercase;
        }
        .features-section h5 {
           
           color:#4CAF50/*#81cd55/*aliceblue*/;
           font-weight: bold;
           text-transform: uppercase;
       }
        .features-section p {
            
            /*color:#3498DB/*#93bce8/*aliceblue;
            font-weight: bold;*/
            font-size: 1.0rem;
            margin-bottom: 2rem;
            color: #FFFFFF;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        .feature-item {
            text-align: center;
            margin-bottom: 2rem;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s ease, transform 1s ease;
        }

        .feature-image {
            width: 250px;
            height: 250px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 1.5rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .feature-image:hover {
            transform: scale(1.20);
        }

        .feature-item h3 {
            margin-bottom: 1rem;
        }

        .visible {
            opacity: 1;
            transform: translateY(0);
        }

        a{
            text-decoration: none;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .hero-content h1 {
                font-size: 2.5rem;
            }
            
            .hero-content p {
                font-size: 1rem;
            }
            
            .feature-image {
                width: 150px;
                height: 150px;
            }
        }

        @media (max-width: 576px) {
            .hero-content h1 {
                font-size: 2rem;
            }
        }

        /*Footer*/
        footer {
            background-color: rgba(26, 34, 56, 0.7)/*rgb(20, 19, 19)/*#2D2D2D/*#333*/;
            color: white;
            padding: 30px 0;
          }
          
          .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
          }
          
          .social-icons {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
          }
          
          .social-icons a {
            color: #4CAF50/*white*/;
            font-size: 24px;
            transition: color 0.3s;
          }
          
          .social-icons a:hover {
            color: #1DA1F2; /* Twitter blue */
          }
          
          .social-icons a.facebook:hover {
            color: #4267B2; /* Facebook blue */
          }

          .social-icons a.phone:hover {
            color: #1DA1F2; /* Phone blue */
          }

          .social-icons a.email:hover {
            color: aliceblue; /* Email white */
          }

          .social-icons a.whatsapp:hover {
            color: #4CAF50; /* Whatsapp green */
          }
          
          .social-icons a.instagram:hover {
            color: #E1306C; /* Instagram pink */
          }
          
          .social-icons a.linkedin:hover {
            color: #0077B5; /* LinkedIn blue */
          }
          
          .social-icons a.youtube:hover {
            color: #FF0000; /* YouTube red */
          }
          
          .copyright {
            text-align: center;
            font-size: 14px;
          }
          
          @media (max-width: 768px) {
            .social-icons {
              gap: 15px;
            }
            
            .social-icons a {
              font-size: 20px;
            }
          }