@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

        :root {
          --light-blue: #24D6D0;
          --dark-blue: #2F4457;
          --gradient-start: #24D6D0;
          --gradient-end: #2F4457;
          --background-light: #f4faff;
          --background-dark: #1c2e3a;
          --text-dark: #2F4457;
          --text-light: #fff;
        }

        html {
            font-size: 20px;
            scroll-behavior: smooth;
        }

        * {
          box-sizing: border-box;
        }

        body {
          margin: 0;
          font-family: 'Poppins', sans-serif;
          background: var(--background-light);
          color: var(--text-dark);
          line-height: 1.6;
          font-size: 20px;
          overflow-x: hidden;
        }

        /* Floating particles background */
        .particles {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: -1;
        }

        .particle {
          position: absolute;
          width: 4px;
          height: 4px;
          background: var(--light-blue);
          border-radius: 50%;
          opacity: 0.3;
          animation: float 15s infinite ease-in-out;
        }

        @keyframes float {
          0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
          10% { opacity: 0.3; }
          90% { opacity: 0.3; }
          50% { transform: translateY(-10vh) rotate(180deg); opacity: 0.7; }
        }

        header {
          background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end), var(--light-blue), var(--dark-blue));
          background-size: 400% 400%;
          animation: gradient-wave 8s ease infinite;
          color: var(--text-light);
          padding: 60px 20px 40px 20px;
          text-align: center;
          position: relative;
          overflow: hidden;
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        header::before {
          content: "";
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: radial-gradient(circle at center, rgba(36,214,208,0.3) 0%, transparent 70%);
          animation: pulse 8s infinite alternate ease-in-out;
          z-index: 0;
        }

        header::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
          animation: grid-move 20s linear infinite;
          z-index: 0;
        }

        @keyframes grid-move {
          0% { transform: translate(0, 0); }
          100% { transform: translate(10px, 10px); }
        }

        @keyframes pulse {
          0% {
            transform: scale(1) translateX(0);
            opacity: 0.3;
          }
          100% {
            transform: scale(1.3) translateX(20%);
            opacity: 0.5;
          }
        }

        @keyframes gradient-wave {
          0% { background-position: 0% 50%; }
          25% { background-position: 100% 50%; }
          50% { background-position: 100% 100%; }
          75% { background-position: 0% 100%; }
          100% { background-position: 0% 50%; }
        }

        header h1 {
          font-weight: 600;
          font-size: 3rem;
          margin-bottom: 10px;
          position: relative;
          z-index: 1;
          text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
          animation: glow 3s ease-in-out infinite alternate;
        }

        @keyframes glow {
          from { text-shadow: 0 0 5px rgba(36,214,208,0.5), 0 0 10px rgba(36,214,208,0.5), 0 0 15px rgba(36,214,208,0.5); }
          to { text-shadow: 0 0 10px rgba(36,214,208,0.8), 0 0 20px rgba(36,214,208,0.8), 0 0 30px rgba(36,214,208,0.8); }
        }

        header p {
          font-weight: 300;
          font-size: 1.2rem;
          margin: 6px 0;
          position: relative;
          z-index: 1;
          animation: fadeInUp 1s ease-out forwards;
          opacity: 0;
          transform: translateY(30px);
        }

        header p:nth-child(2) { animation-delay: 0.2s; }
        header p:nth-child(3) { animation-delay: 0.4s; }
        header p:nth-child(4) { animation-delay: 0.6s; }

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

        .logo {
          max-width: 460px;
          height: auto;
          margin-bottom: 20px;
          position: relative;
          z-index: 1;
          animation: logoFloat 4s ease-in-out infinite, logoGlow 2s ease-in-out infinite alternate;
          filter: drop-shadow(0 0 20px rgba(36,214,208,0.5));
        }

        @keyframes logoFloat {
          0%, 100% { transform: translateY(0) scale(1); }
          50% { transform: translateY(-10px) scale(1.02); }
        }

        @keyframes logoGlow {
          from { filter: drop-shadow(0 0 10px rgba(36,214,208,0.3)); }
          to { filter: drop-shadow(0 0 25px rgba(36,214,208,0.8)); }
        }

        .headinfo {
          transition: all 0.3s ease;
          position: relative;
          z-index: 1;
        }

        .headinfo:hover {
          color: black;
          transform: scale(1.05);
        }

        .social-media {
          margin-top: 20px;
          position: relative;
          z-index: 1;
        }

        .social-media a {
          margin-right: 25px;
          text-decoration: none;
          color: white;
          font-size: 32px;
          transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          position: relative;
          display: inline-block;
        }

        .social-media a::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          background: rgba(36,214,208,0.2);
          border-radius: 50%;
          transition: all 0.4s ease;
          transform: translate(-50%, -50%);
          z-index: -1;
        }

        .social-media a:hover {
          color: var(--light-blue);
          transform: scale(1.3) rotate(360deg);
        }

        .social-media a:hover::before {
          width: 60px;
          height: 60px;
        }

        /* Scroll indicator */
        .scroll-indicator {
          position: absolute;
          bottom: 30px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 1;
          animation: bounce 2s infinite;
        }

        .scroll-indicator i {
          font-size: 2rem;
          color: white;
          opacity: 0.8;
        }

        @keyframes bounce {
          0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
          40% { transform: translateX(-50%) translateY(-10px); }
          60% { transform: translateX(-50%) translateY(-5px); }
        }

        #about img[alt="ballout"] {
          width: 100%;
          max-width: 600px;
          height: auto;
          margin: 0 auto 20px auto;
          display: block;
          border-radius: 15px;
          transition: all 0.5s ease;
          filter: grayscale(0.2);
        }

        #about img[alt="ballout"]:hover {
          transform: scale(1.05);
          filter: grayscale(0) brightness(1.1);
          box-shadow: 0 15px 35px rgba(36,214,208,0.4);
        }

        nav {
          background: var(--dark-blue);
          display: flex;
          justify-content: center;
          position: sticky;
          top: 0;
          z-index: 100;
          flex-wrap: wrap;
          box-shadow: 0 4px 20px rgba(0,0,0,0.3);
          backdrop-filter: blur(10px);
        }

        nav::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(90deg, var(--light-blue), var(--dark-blue), var(--light-blue));
          background-size: 200% 100%;
          animation: navGlow 3s linear infinite;
        }

        @keyframes navGlow {
          0% { background-position: -200% 0; }
          100% { background-position: 200% 0; }
        }

        nav a {
          color: var(--light-blue);
          padding: 15px 30px;
          display: inline-block;
          text-decoration: none;
          font-weight: 600;
          text-transform: uppercase;
          transition: all 0.3s ease;
          border-bottom: 3px solid transparent;
          position: relative;
          overflow: hidden;
        }

        nav a::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(36,214,208,0.2), transparent);
          transition: left 0.5s ease;
        }

        nav a:hover::before {
          left: 100%;
        }

        nav a:hover, nav a:focus {
          color: white;
          border-bottom: 3px solid var(--light-blue);
          transform: translateY(-2px);
          text-shadow: 0 0 10px rgba(36,214,208,0.7);
        }

        section {
          max-width: 960px;
          margin: 48px auto;
          padding: 30px;
          border-radius: 20px;
          background: rgba(255,255,255,0.95);
          box-shadow: 0 8px 32px rgba(36, 214, 208, 0.15);
          transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          text-align: center;
          position: relative;
          overflow: hidden;
          backdrop-filter: blur(10px);
        }

        section::before {
          content: '';
          position: absolute;
          top: -2px;
          left: -2px;
          right: -2px;
          bottom: -2px;
          background: linear-gradient(45deg, var(--light-blue), transparent, var(--dark-blue), transparent, var(--light-blue));
          background-size: 400% 400%;
          border-radius: 22px;
          z-index: -1;
          animation: borderGlow 4s ease infinite;
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        section:hover::before {
          opacity: 0.7;
        }

        @keyframes borderGlow {
          0%, 100% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
        }

        section:hover {
          transform: translateY(-10px) scale(1.02);
          box-shadow: 0 20px 60px rgba(36, 214, 208, 0.3);
        }

        section h2 {
          color: var(--dark-blue);
          text-align: center;
          font-weight: 600;
          font-size: 2.5rem;
          margin-bottom: 25px;
          position: relative;
          animation: titleGlow 3s ease-in-out infinite alternate;
        }

        @keyframes titleGlow {
          from { text-shadow: 0 0 5px rgba(47,68,87,0.3); }
          to { text-shadow: 0 0 15px rgba(47,68,87,0.6), 0 0 25px rgba(36,214,208,0.3); }
        }

        section h2::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 60px;
          height: 3px;
          background: linear-gradient(90deg, var(--light-blue), var(--dark-blue));
          border-radius: 2px;
          animation: underlineGrow 2s ease-in-out infinite alternate;
        }

        @keyframes underlineGrow {
          from { width: 60px; }
          to { width: 120px; }
        }

        section h3 {
          color: var(--light-blue);
          font-weight: 600;
          font-size: 1.4rem;
          margin: 20px 0 12px 0;
          text-shadow: 0 2px 4px rgba(36,214,208,0.3);
        }

        ul {
          list-style: none;
          padding-left: 0;
          margin: 0 0 20px 0;
        }

        ul li {
          margin: 8px 0;
          font-weight: 400;
          transition: all 0.3s ease;
          padding: 8px;
          border-radius: 8px;
          position: relative;
          animation: fadeInLeft 0.6s ease-out forwards;
          opacity: 0;
          transform: translateX(-30px);
        }

        ul li:nth-child(1) { animation-delay: 0.1s; }
        ul li:nth-child(2) { animation-delay: 0.2s; }
        ul li:nth-child(3) { animation-delay: 0.3s; }
        ul li:nth-child(4) { animation-delay: 0.4s; }
        ul li:nth-child(5) { animation-delay: 0.5s; }
        ul li:nth-child(6) { animation-delay: 0.6s; }

        @keyframes fadeInLeft {
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }

        ul li:hover {
          background: rgba(36,214,208,0.1);
          transform: translateX(10px);
          padding-left: 20px;
        }

        ul li::before {
          content: "✓";
          color: var(--light-blue);
          font-weight: 700;
          margin-right: 12px;
          font-size: 1.2em;
          animation: checkPulse 2s ease-in-out infinite;
        }

        @keyframes checkPulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.2); }
        }

        #contact {
          background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
          color: var(--text-light);
          padding: 50px 30px;
          box-shadow: 0 15px 35px rgba(0,0,0,0.3);
          position: relative;
          overflow: hidden;
        }

        #contact::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
          animation: shimmer 3s ease-in-out infinite;
        }

        @keyframes shimmer {
          0% { left: -100%; }
          100% { left: 100%; }
        }

        .contact-form {
          max-width: 480px;
          margin: 0 auto 30px auto;
          display: flex;
          flex-direction: column;
          position: relative;
          z-index: 1;
        }

        .contact-form input,
        .contact-form textarea {
          margin: 15px 0;
          padding: 15px 20px;
          font-size: 1rem;
          border: none;
          border-radius: 12px;
          background-color: rgba(255,255,255,0.9);
          box-shadow: inset 2px 2px 10px rgba(0,0,0,0.1);
          resize: vertical;
          transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          position: relative;
        }

        .contact-form input:focus,
        .contact-form textarea:focus {
          outline: none;
          box-shadow: 0 0 20px 3px rgba(36,214,208,0.4);
          background-color: white;
          transform: scale(1.02);
        }

        .contact-form button {
          background: linear-gradient(45deg, var(--light-blue), var(--dark-blue));
          border: none;
          padding: 18px 0;
          font-size: 1.2rem;
          font-weight: 600;
          color: white;
          border-radius: 12px;
          cursor: pointer;
          margin-top: 15px;
          transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          box-shadow: 0 8px 25px rgba(36, 214, 208, 0.4);
          position: relative;
          overflow: hidden;
        }

        .contact-form button::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
          transition: left 0.6s ease;
        }

        .contact-form button:hover::before {
          left: 100%;
        }

        .contact-form button:hover {
          transform: translateY(-3px) scale(1.05);
          box-shadow: 0 15px 35px rgba(36, 214, 208, 0.6);
          text-shadow: 0 0 10px rgba(255,255,255,0.5);
        }

        .hours, .service-area {
          max-width: 300px;
          margin: 25px auto;
          font-weight: 400;
          position: relative;
          z-index: 1;
        }

        .hours p, .service-area p {
          margin: 8px 0;
          font-size: 1.1rem;
        }

        footer {
          text-align: center;
          padding: 25px;
          background: var(--dark-blue);
          color: var(--light-blue);
          font-weight: 500;
          font-size: 1rem;
          position: relative;
          overflow: hidden;
        }

        footer::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, var(--light-blue), transparent, var(--light-blue));
          animation: footerGlow 2s ease-in-out infinite alternate;
        }

        @keyframes footerGlow {
          from { opacity: 0.5; }
          to { opacity: 1; }
        }

        #carouselExampleAutoplaying {
            max-width: 720px;
            margin: 0 auto 2rem auto;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
            overflow: hidden;
            position: relative;
        }

        .carousel-inner img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            transition: all 0.5s ease;
        }

        .carousel-inner img:hover {
            transform: scale(1.1);
        }

        video {
            width: 100%;
            height: auto;
            display: block;
            max-width: 520px;
            margin: 0 auto;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(36,214,208,0.3);
            transition: all 0.4s ease;
        }

        video:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(36,214,208,0.5);
        }

        .mylogo {
            width: 200px;
            height: auto;
            text-align: left;
            transition: all 0.3s ease;
        }

        .mylogo:hover {
            transform: scale(1.1) rotate(5deg);
        }

        /* Reviews Section Styles */
        .reviews-section {
          margin: 40px 0;
        }

        .reviews-section h3 {
          color: var(--dark-blue);
          font-size: 2.2rem;
          margin-bottom: 30px;
          animation: titleGlow 3s ease-in-out infinite alternate;
        }

        .review-card {
          background: rgba(255, 255, 255, 0.98);
          padding: 35px;
          border-radius: 20px;
          margin: 25px;
          box-shadow: 0 8px 25px rgba(0,0,0,0.15);
          position: relative;
          overflow: hidden;
        }

        .review-card::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: conic-gradient(from 0deg, transparent, rgba(36,214,208,0.1), transparent);
          animation: reviewRotate 10s linear infinite;
        }

        @keyframes reviewRotate {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        .stars {
          color: #ffc107;
          font-size: 1.8rem;
          margin-bottom: 20px;
          position: relative;
          z-index: 1;
        }

        .review-text {
          font-size: 1.2rem;
          line-height: 1.7;
          margin-bottom: 20px;
          color: var(--text-dark);
          position: relative;
          z-index: 1;
        }

        .reviewer-name {
          font-weight: 600;
          color: var(--light-blue);
          font-size: 1.1rem;
          position: relative;
          z-index: 1;
        }

        .overall-rating {
          text-align: center;
          margin-top: 35px;
        }

        .overall-rating a {
          color: var(--light-blue);
          text-decoration: none;
          font-weight: 600;
          margin-left: 15px;
          font-size: 1.1rem;
          transition: all 0.3s ease;
        }

        .overall-rating a:hover {
          text-decoration: underline;
          color: var(--dark-blue);
          transform: scale(1.1);
        }

        /* Intersection Observer Animation Classes */
        .fade-in {
          opacity: 0;
          transform: translateY(50px);
          transition: all 0.8s ease-out;
        }

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

        .slide-in-left {
          opacity: 0;
          transform: translateX(-100px);
          transition: all 0.8s ease-out;
        }

        .slide-in-left.visible {
          opacity: 1;
          transform: translateX(0);
        }

        .slide-in-right {
          opacity: 0;
          transform: translateX(100px);
          transition: all 0.8s ease-out;
        }

        .slide-in-right.visible {
          opacity: 1;
          transform: translateX(0);
        }

        @media (max-width: 768px) {
          html { font-size: 18px; }
          header { padding: 40px 15px 30px 15px; min-height: 80vh; }
          header h1 { font-size: 2.4rem; }
          header p { font-size: 1rem; line-height: 1.4; }
          .logo { max-width: 360px; }
          nav { justify-content: center; padding: 0 10px; }
          nav a { padding: 12px 20px; font-size: 0.9rem; margin: 2px; }
          section { margin: 30px 15px; padding: 25px 15px; }
          section h2 { font-size: 1.8rem; }
          section h3 { font-size: 1.1rem; }
          .carousel-inner img { height: 250px; }
          #about img[alt="ballout"] { max-width: 100%; margin-bottom: 15px; }
          #contact { padding: 30px 15px; }
          .contact-form { max-width: 100%; padding: 0 10px; }
          .contact-form input, .contact-form textarea { font-size: 0.95rem; padding: 10px 14px; }
          .contact-form button { font-size: 1rem; padding: 12px 0; }
          video { max-width: 100%; height: auto; }
        }

        @media (max-width: 480px) {
          html { font-size: 16px; }
          header h1 { font-size: 2rem; }
          header p { font-size: 0.9rem; }
          .logo { max-width: 300px; }
          nav a { padding: 10px 15px; font-size: 0.8rem; }
          section { margin: 20px 10px; padding: 20px 12px; }
          section h2 { font-size: 1.5rem; }
          section h3 { font-size: 1rem; }
          .carousel-inner img { height: 200px; }
          #about img[alt="ballout"] { max-width: 100%; margin-bottom: 12px; }
          ul li { font-size: 0.9rem; }
        }