.hero-text {
       position: relative;
       z-index: 1;
       color: #ffffff;
       padding: 20px;
   }

   .particles-container {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 0;
   }

   .dropdown-item {
       color: black !important;
       /* Set the color to dark black */
   }

   .nav-item .btn.btn-outline-danger {
       color: #ff7f50;
       /* Text color */
       border-color: #ff7f50;
       /* Outline color */
   }

   .nav-item .btn.btn-outline-danger:hover {
       background-color: #ff7f50;
       /* Hover background color */
       border-color: #ff7f50;
       /* Hover outline color */
   }

   .orange-border {
       border-color: #ff7f50 !important;
       /* Apply orange border to button */
   }

   #header {
       background-color: transparent !important;
   }

   #header.solid-header {
       background-color: rgba(255, 255, 255, 0.9) !important;
   }

   #hero {
       background-color: #ff7f50;
       height: 500px;
       padding: 100px 0;
   }

   .hero-text h1,
   .hero-text h2 {
       color: #fff;
       /* White text color */
   }

   /* Adjustments for Mobile Devices */
   @media (max-width: 767.98px) {
       #hero {
           height: 600px;
           /* Adjusted height for mobile devices */
       }
   }

   #hero img {
       display: block;
       margin: auto;
   }

   #about .stat {
       margin-bottom: 30px;
   }

   #about .stat h3 {
       font-size: 24px;
   }

   #about .stat h3 i {
       margin-right: 10px;
       color: #ff7f50;
       /* You can change the color as needed */
   }

   #about .stat p {
       font-size: 16px;
       color: #666;
   }

   #achievements {
       background-image: linear-gradient(120deg, #ff7f50, #ff7949);
       color: #fff;
       padding: 50px 0;
   }

   #achievements .achievement-box {
       background-color: rgba(255, 255, 255, 0.1);
       border-radius: 10px;
       padding: 20px;
       text-align: center;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       transition: background-color 0.3s ease;
       height: 100%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
   }

   #achievements .achievement-box:hover {
       background-color: rgba(255, 255, 255, 0.2);
   }

   #achievements .achievement-box i {
       font-size: 40px;
       color: #fff;
       margin-bottom: 20px;
   }

   #achievements .achievement-box h3 {
       font-size: 20px;
       color: #fff;
       margin-bottom: 10px;
   }

   #achievements .achievement-box p {
       font-size: 14px;
       color: #ddd;
       margin-bottom: 0;
   }

   #clients {
       padding: 50px 0;
       background-color: #f9f9f9;
   }

   #clients h2 {
       color: #333;
       margin-bottom: 30px;
   }

   #clients p {
       color: #666;
       margin-bottom: 30px;
       font-size: 18px;
       line-height: 1.5;
   }

   #clients .client-logo {
       border: 2px solid #ccc;
       /* Add border */
       padding: 10px;
       /* Add padding for spacing */
   }

   #clients img {
       max-width: 100%;
       height: auto;
       display: block;
       margin: 0 auto;
   }

   #clients .client-logo img {
       transition: transform 0.3s ease;
       /* Add transition */
   }

   #clients .client-logo:hover img {
       transform: scale(1.1);
       /* Enlarge on hover */
   }

   #case-studies {
       background-color: #f9f9f9;
   }

   #case-studies h2 {
       color: #333;
   }

   #case-studies p {
       color: #666;
   }

   .card {
       border: none;
       box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
   }

   .card-img-top {
       height: 200px;
       object-fit: cover;
   }

   .card-title {
       font-size: 20px;
       font-weight: bold;
       margin-bottom: 10px;
   }

   .card-text {
       color: #666;
       font-size: 16px;
   }

   .btn-primary {
       background-color: #ff7f50;
       border: none;
       color: #fff;
       transition: background-color 0.3s ease;
   }

   .btn-primary:hover {
       background-color: #ff6c3f;
   }

   .btn-primary i {
       margin-left: 5px;
   }

   .stretched-link::after {
       display: none;
   }

   /* testimonials */
   .testimonial-slider {
       background-color: #fa8a62;
       padding: 2em 2em 3em;
   }

   .testimonial-title {
       color: #fff;
   }

   .testimonial-title h2 {
       padding-left: 0.2em;
   }

   .card {
       margin: 0 0.5em;
       box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
       border: none;
       height: 100%;
   }

   .carousel-control-prev,
   .carousel-control-next {
       background-color: #fff;
       width: 3em;
       height: 3em;
       border-radius: 50%;
       top: 60%;
       transform: translateY(-50%);
   }

   @media (min-width: 576px) {
       .carousel-item {
           margin-right: 0;
           flex: 0 0 50%;
           display: block;
       }

       .carousel-inner {
           display: flex;
       }
   }

   @media (min-width: 768px) {
       .carousel-inner {
           padding: 1em;
       }

       .carousel-control-prev,
       .carousel-control-next {
           opacity: 1;
           position: absolute;
           left: 1em;
           top: 90%;
           transform: translateY(-50%);
       }

       .carousel-control-next {
           left: 5em;
       }
   }


   /* contact us */

   .section-title {
       font-size: 2rem;
       text-align: center;
       margin-bottom: 20px;
   }

   .section-description {
       text-align: center;
       margin-bottom: 20px;
   }

   .contact-form {
       background-color: #f9f9f9;
       padding: 20px;
       border-radius: 8px;
   }

   .form-group {
       margin-bottom: 20px;
   }

   label {
       display: block;
       margin-bottom: 5px;
   }

   input[type="text"],
   input[type="email"],
   textarea {
       width: 100%;
       padding: 10px;
       border: 1px solid #ccc;
       border-radius: 4px;
   }

   textarea {
       resize: vertical;
   }

   .submit-btn {
       background-color: #ff6c3f;
       color: #fff;
       padding: 10px 20px;
       border: none;
       border-radius: 4px;
       cursor: pointer;
   }

   .submit-btn:hover {
       background-color: #ff7f50;
   }

   /* Address Section */
   .address-section {
       padding: 5px 0;
       position: relative;
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
   }

   .address-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 2px;
       background-color: #ccc;
   }

   .address-section::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 2px;
       background-color: #ccc;
   }

   .address-box {
       background-color: #f9f9f9;
       padding: 20px;
       border-radius: 10px;
       text-align: center;
       flex: 0 1 calc(25% - 20px);
       margin-bottom: 20px;
   }

   .address-box img {
       width: 50px;
       height: auto;
       border-radius: 5%;
       margin-bottom: 20px;
   }

   /* Footer styles */
   .footer-section {
       padding: 50px 0;
   }

   .footer-section h5 {
       font-size: 18px;
       margin-bottom: 20px;
   }

   .footer-section ul {
       list-style: none;
       padding: 0;
   }

   .footer-section ul li {
       margin-bottom: 10px;
   }

   .footer-section ul li a {
       color: #fff;
       text-decoration: none;
   }

   .subscribe-form input[type="email"] {
       width: 70%;
       padding: 10px;
       border: none;
       border-radius: 4px;
       margin-right: 10px;
   }

   .subscribe-form button {
       padding: 10px 20px;
       border: none;
       background-color: #fff;
       color: #fd8458;
       border-radius: 4px;
       cursor: pointer;
   }

   .social-links {
       list-style: none;
       padding: 0;
   }

   .social-links li {
       display: inline-block;
       margin-right: 10px;
   }

   .social-links li a {
       color: #fff;
       text-decoration: none;
       font-size: 20px;
   }

   .footer-section p {
       color: #fff;
       font-size: 14px;
   }

   /* Placeholder image styles */
   .placeholder-image {
       background-color: #ccc;
       height: 200px;
       width: 100%;
   }

   /* Placeholder image styles */
   .placeholder-image {
       background-color: #f0f0f0;
       height: 200px;
       width: 100%;
       border-radius: 10px;
   }

   /* Portfolio section styles */
   .portfolio-section {
       padding: 50px 0;
   }

   .section-title {
       text-align: center;
       margin-bottom: 30px;
       color: #333;
   }

   .portfolio-items {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
   }

   .portfolio-item {
       position: relative;
       margin: 0 15px 30px;
       overflow: hidden;
       border-radius: 10px;
       box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
       transition: box-shadow 0.3s ease;
   }

   .portfolio-item:hover {
       box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
   }

   .portfolio-item .overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.7);
       padding: 20px;
       color: #fff;
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .portfolio-item:hover .overlay {
       opacity: 1;
   }

   .portfolio-item h3 {
       margin-top: 0;
       font-size: 24px;
   }

   .portfolio-item p {
       margin-bottom: 0;
       font-size: 16px;
   }

   /* Services Section */

   .services-box {
       background-color: #fff;
       border-radius: 10px;
       padding: 30px;
       box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
       transition: all 0.3s ease;
   }

   .services-box:hover {
       transform: translateY(-5px);
   }

   .services-box img.lazy {
       width: 100px;
       margin-bottom: 20px;
       filter: invert(100%);
   }

   .services-box h4 {
       font-size: 20px;
       margin-bottom: 15px;
   }

   .services-box p {
       color: #6c757d;
   }

   .service-link {
       margin-top: 20px;
   }

   .service-link .badge {
       margin-right: 5px;
       color: #fff;
       border: 1px solid #fff;
       background-color: #ff7949 !important;
   }

   .service-link .badge a {
       color: inherit;
       text-decoration: none;
   }

   .service-link .badge:hover {
       background-color: #fff;
       color: #fff;
   }