/* Reset */
       
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       
       body {
           font-family: "Montserrat", sans-serif;
           background: #f5f5f5;
           color: #222;
           line-height: 1.5;
           overflow-x: hidden;
           cursor: none;
       }
       
       a {
           color: #28b381;
           text-decoration: none;
       }
       
       a:hover {
           text-decoration: underline;
       }
       
       .container {
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 20px;
       }
       
       header {
           background: #ffffff;
           padding: 45px 0;
           position: sticky;
           top: 0;
           z-index: 1000;
       }
       
       .header-inner {
           display: flex;
           justify-content: space-between;
           align-items: center;
       }
       
       .logo {
           height: 90px;
       }
       
       .menu-toggle {
           display: none;
           font-size: 28px;
           background: none;
           border: none;
           cursor: pointer;
       }
       
       nav {
           display: flex;
           gap: 25px;
       }
       
       nav a {
           color: #28b381;
           font-weight: 600;
           font-size: 16px;
           padding: 8px 12px;
           text-decoration: none;
           transition: 0.5s all ease-out;
       }
       
       nav a:hover {
           background: #f0a044;
           color: #28b381;
           border-radius: 4px;
           text-decoration: none;
       }
       /* Hero Banner */
       
       .hero {
           position: relative;
           height: 600px;
           background-image: url('../img/Slider-1_1.jpg');
           background-size: cover;
           background-position: center;
           color: white;
           display: flex;
           flex-direction: column;
           justify-content: center;
           /* padding-left: 60px; */
           text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.349);
           text-align: center;
       }
       
       .hero h1 {
           color: #28b381;
           font-size: 68px;
           font-weight: bolder;
           margin-bottom: 10px;
       }
       
       .hero h1 span {
           color: #292f38;
       }
       
       .hero p {
           color: #f0a044;
           font-weight: bolder;
           font-size: 26px;
           -webkit-text-stroke: 0.2px #292f38;
       }
       
       .hero .btn {
           position: absolute;
           top: 65%;
           left: 45%;
           width: 10%;
           padding: 15px 20px;
           font-size: 20px;
           font-weight: bold;
       }
       
       .btn:link,
       .btn:visited {
           text-transform: uppercase;
           text-decoration: none;
           display: inline-block;
           border-radius: 10px;
           transition: all 0.2s;
           position: absolute;
           -webkit-border-radius: 10px;
           -moz-border-radius: 10px;
           -ms-border-radius: 10px;
           -o-border-radius: 10px;
       }
       
       .btn:hover {
           transform: translateY(-3px);
           text-decoration: none;
           color: #292f38;
       }
       
       .btn-white {
           background-color: #f0a044;
           color: #fff;
       }
       
       .btn::after {
           content: "";
           color: #f0a044;
           display: inline-block;
           height: 100%;
           width: 100%;
           position: absolute;
           top: 0;
           left: 0;
           z-index: -1;
           transition: all 0.4s;
       }
       
       .btn-white::after {
           background-color: #fff;
       }
       
       .btn:hover::after {
           transform: scaleX(1.4) scaleY(1.6);
           opacity: 0;
       }
       
       .btn-animated {
           animation: moveInBottom 5s ease-out;
           animation-fill-mode: backwards;
       }
       
       @keyframes moveInBottom {
           0% {
               opacity: 0;
               transform: translateY(30px);
           }
           100% {
               opacity: 1;
               transform: translateY(0px);
           }
       }
       /* About Section */
       
       #about {
           background: white;
           padding: 60px 0;
           display: flex;
           align-items: center;
           gap: 40px;
       }
       
       #about img {
           width: 50%;
           border-radius: 8px;
       }
       
       #about .content {
           width: 50%;
       }
       
       #about h2 {
           font-weight: bold;
           color: #28b381;
           font-size: 36px;
           margin-bottom: 15px;
       }
       
       #about p {
           font-size: 16px;
           color: #444;
       }
       /* Services */
       
       #services {
           background: #e0f2f1;
           padding: 60px 0;
           text-align: center;
       }
       
       #services h2 {
           font-size: 56px;
           font-weight: bold;
           margin-bottom: 40px;
           color: #28b381;
       }
       
       .service-list {
           display: flex;
           justify-content: space-around;
           flex-wrap: wrap;
           gap: 30px;
       }
       
       .service-item {
           background: white;
           flex: 1 1 280px;
           padding: 25px;
           border-radius: 10px;
           box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
           transition: transform 0.3s ease;
       }
       
       .service-item:hover {
           transform: translateY(-8px);
       }
       
       .service-icon {
           font-size: 48px;
           color: #009688;
           margin-bottom: 20px;
       }
       
       .service-item h3 {
           font-size: 22px;
           margin-bottom: 15px;
           color: #28b381;
       }
       
       .service-item p {
           font-size: 16px;
           color: #555;
       }
       /* Team Section */
       
       #team {
           background: white;
           padding: 60px 0;
           text-align: center;
       }
       
       #team h2 {
           font-size: 56px;
           font-weight: bold;
           margin-bottom: 40px;
           color: #28b381;
       }
       
       .team-list {
           display: flex;
           justify-content: center;
           flex-wrap: wrap;
           gap: 40px;
       }
       
       .team-member {
           flex: 0 0 200px;
       }
       
       .team-member img {
           width: 200px;
           height: 200px;
           border-radius: 50%;
           object-fit: cover;
           box-shadow: 0 4px 8px rgb(0 0 0 / 0.15);
       }
       
       .team-member h4 {
           margin-top: 15px;
           color: #28b381;
       }
       
       .team-member p {
           color: #777;
           font-style: italic;
       }
       /* Gallery Section */
       
       #gallery {
           background: #e0f2f1;
           padding: 60px 0;
       }
       
       #gallery h2 {
           font-size: 56px;
           font-weight: bold;
           margin-bottom: 40px;
           text-align: center;
           color: #28b381;
       }
       
       .gallery-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
           gap: 25px;
           max-width: 1100px;
           margin: 0 auto;
       }
       
       .gallery-grid img {
           width: 100%;
           border-radius: 8px;
           box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
           object-fit: cover;
           height: 480px;
       }
       /* Contact Section */
       
       #contact {
           background-color: #fdfdfd;
           padding: 60px 0;
       }
       
       #contact h2 {
           font-size: 3.5rem;
           font-weight: bold;
           margin-bottom: 2rem;
           color: #28b381;
           text-align: center;
           position: relative;
       }
       
       #contact h2::after {
           content: '';
           width: 60px;
           height: 4px;
           background: #f0a044;
           display: block;
           margin: 10px auto 0;
           border-radius: 2px;
       }
       
       #contact h4 {
           font-size: 1.25rem;
           font-weight: 600;
           color: #292f38;
           margin-bottom: 1rem;
       }
       
       #contact a {
           color: #28b381;
           text-decoration: none;
       }
       
       #contact a:hover {
           text-decoration: underline;
       }
       
       #contact .form-control,
       #contact .form-select {
           border-radius: 0.6rem;
           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
           border: 1px solid #ccc;
           padding: 12px 16px;
           font-size: 1rem;
           transition: all 0.3s ease-in-out;
       }
       
       #contact .form-control:focus,
       #contact .form-select:focus {
           border-color: #28b381;
           box-shadow: 0 0 0 0.15rem rgba(40, 179, 129, 0.25);
           outline: none;
       }
       
       #contact input {
           width: 100%;
       }
       
       #contact textarea.form-control {
           resize: vertical;
           min-height: 120px;
           width: 100%;
       }
       
       #contact .btn-primary,
       #contact button[type="submit"] {
           border-radius: 8px;
           font-weight: 600;
           background: linear-gradient(135deg, #48ca9b, #28b381);
           border: none;
           padding: 14px 20px;
           font-size: 1.1rem;
           transition: all 0.3s ease;
           box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
       }
       
       #contact .btn-primary:hover,
       #contact button[type="submit"]:hover {
           background: linear-gradient(135deg, #f0a044, #f9a03b);
           color: #fff;
       }
       /* Optional: Additional layout tweaks */
       
       #contact .shadow-sm {
           box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
       }
       
       #contact form {
           display: flex;
           flex-direction: column;
           gap: 20px;
       }
       
       select option:hover {
           background-color: #28b381!important;
       }
       
       #contact option:focus {
           background-color: #28b381;
       }
       /* Footer */
       
       footer {
           background: #28b381;
           color: white;
           text-align: center;
           padding: 20px 10px;
       }
       
       footer p {
           margin-bottom: 8px;
       }
       
       .social-links {
           display: flex;
           justify-content: center;
           gap: 20px;
       }
       
       .social-links a {
           color: white;
           font-size: 24px;
           transition: color 0.3s ease;
       }
       
       .social-links a:hover {
           color: #f0a044;
       }
       /* Responsive */
       
       @media (max-width: 900px) {
           #about {
               flex-direction: column;
               text-align: center;
           }
           #about img,
           #about .content {
               width: 100%;
           }
           .service-list {
               flex-direction: column;
               align-items: center;
           }
           .team-list {
               flex-direction: column;
               align-items: center;
           }
       }
       /* Responsive - Tablet and Mobile Enhancements */
       
       @media (max-width: 1566px) {
           .hero .btn {
               width: 20%!important;
               left: 40%!important;
           }
       }
       
       @media (max-width: 1024px) {
           .hero .btn {
               width: 40%!important;
               top: 73%!important;
               left: 30%!important;
           }
           nav {
               display: none;
               flex-direction: column;
               background: #ffffff;
               position: absolute;
               top: 100%;
               right: 0;
               width: 100%;
               box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
           }
           nav.active {
               display: flex;
               transition: max-height 0.4s ease, padding 0.4s ease;
           }
           .menu-toggle {
               display: block;
               cursor: pointer;
               font-size: 28px;
               color: #28b381;
               background: none;
               border: none;
           }
           .header-inner {
               flex-wrap: wrap;
           }
       }
       
       @media (max-width: 768px) {
           .hero h1 {
               font-size: 42px;
           }
           .hero p {
               font-size: 18px;
           }
           .hero .btn {
               font-size: 16px;
               width: auto;
               padding: 10px 20px;
               width: 100%;
           }
           #services h2,
           #team h2,
           #gallery h2,
           #contact h2 {
               font-size: 32px;
           }
           .gallery-grid img {
               height: 280px;
           }
           .team-member {
               flex: 1 1 100%;
           }
       }
       
       @media (max-width: 480px) {
           .hero .btn {
               width: 50%!important;
               top: 70%!important;
               left: 27%!important;
           }
           .logo {
               height: 60px;
           }
           .hero {
               padding-left: 20px;
               height: 400px;
           }
           .hero h1 {
               font-size: 32px;
           }
           .hero p {
               font-size: 16px;
           }
           #about {
               padding: 40px 20px;
           }
           #about p {
               text-align: justify;
           }
           #services,
           #team,
           #gallery,
           #contact {
               padding: 40px 20px;
           }
           footer {
               font-size: 14px;
           }
           #gallery p {
               text-align: justify;
           }
       }
       /* animation */
       
       #loader-wrapper {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: #ffffff;
           /* Optional blur effect */
           display: flex;
           justify-content: center;
           align-items: center;
           z-index: 9999;
           backdrop-filter: blur(4px);
           /* Blur background */
       }
       
       .loader img {
           width: 100px;
           /* Adjust based on your GIF size */
           height: auto;
       }
       /* cursor */
       
       #cursor {
           position: fixed;
           top: -5px;
           left: -5px;
           width: 10px;
           height: 10px;
           background-color: #FF4B33;
           border-radius: 50%;
           pointer-events: none;
           z-index: 9999;
       }
       
       #cursor-border {
           --size: 50px;
           position: fixed;
           top: calc(var(--size) / -2);
           left: calc(var(--size) / -2);
           width: var(--size);
           height: var(--size);
           border-radius: 50%;
           box-shadow: 0 0 0 1px #FF4B33;
           pointer-events: none;
           transition: top 0.15s ease-out, left 0.15s ease-out, width 0.15s ease-out, height 0.15s ease-out, background-color 0.15s ease-out;
           z-index: 9999;
       }