/* Reset and Base Styles */
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
          line-height: 1.6;
          color: #374151;
          background-color: #ffffff;
      }

      /* Container */
      .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 1.5rem;
      }

      .container-small {
          max-width: 800px;
          margin: 0 auto;
          padding: 0 1.5rem;
      }

      /* Navigation */
      .navibar {
          position: fixed;
          top: 0;
          width: 100%;
          background-color: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(10px);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          z-index: 1000;
      }

      .nav-container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 1rem 1.5rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      .nav-brand {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-weight: bold;
          color: #1f2937 !important;
      }
      .nav-brand a {
          text-decoration: none;
          color: inherit;
      }

      .nav-brand i {
          color: #ff6b9d;
          font-size: 1.5rem;
      }

      .logo-img {
          width: 40px;
          height: 40px;
          object-fit: contain;
      }

      .nav-links {
          display: flex;
          gap: 2rem;
      }

      .nav-links a {
          color: #4b5563;
          text-decoration: none;
          transition: color 0.3s;
      }

      .nav-links a:hover {
          color: #ff6b9d;
      }

      /* Hero Section */
      .hero {
          padding: 6rem 1.5rem 2rem;
          min-height: 100vh;
          display: flex;
          align-items: center;
          background: linear-gradient(180deg, #FFFFFF 35%, #FFF0F3 100%);
      }

      .hero-container {
          max-width: 1200px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: 1fr 1.2fr;
          gap: 2rem;
          align-items: center;
      }

      .hero-content {
          opacity: 0;
          transform: translateX(-40px);
      }

      .fade-in-left {
          animation: fadeInLeft 1s ease-out forwards;
      }

      .hero-title {
          font-size: 4.5rem;
          font-weight: bold;
          color: #d94371;
          margin-bottom: 0.5rem;
          line-height: 0.95;
          letter-spacing: -0.02em;
      }

      .hero-subtitle {
          font-size: 1.25rem;
          color: #d94371;
          margin-bottom: 1rem;
          font-style: normal;
          font-weight: 500;
      }

      .hero-description {
          font-size: 0.95rem;
          color: #6b7280;
          margin-bottom: 2rem;
          line-height: 1.6;
          font-style: normal;
          max-width: 400px;
      }

      .btn-primary {
          background: linear-gradient(135deg, #ff6b9d 0%, #ffa5c7 100%) !important;
          color: white;
          padding: 0.75rem 2rem;
          border: none !important;
          border-radius: 50px !important;
          font-size: 0.9rem;
          font-weight: 500;
          cursor: pointer;
          box-shadow: 0 4px 15px rgba(217, 67, 113, 0.3);
          transition: all 0.3s;
          display: inline-block;
      }

      .btn-primary:hover {
          background: linear-gradient(135deg, #ff5a8d 0%, #ff95b7 100%);
          box-shadow: 0 10px 25px rgba(255, 107, 157, 0.3);
      }

      .hero-image {
          position: relative;
          opacity: 0;
          transform: scale(0.8);
          width: 100%;
          max-width: 500px;
          margin: 0 0 0 auto;
          filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
      }

      .scale-in {
          animation: scaleIn 1.2s ease-out forwards;
      }

      .hero-image img {
          width: 100%;
          height: auto;
          object-fit: contain;
          display: block;
      }

      /* Gallery Section */
      .gallery {
          padding: 4rem 1.5rem;
          background-color: white;
      }

      .gallery .section-title {
          text-align: center;
          margin-bottom: 3rem;
      }

      .gallery-carousel-wrapper {
          max-width: 1200px;
          margin: 0 auto;
          overflow: hidden;
      }

      .gallery-carousel {
          display: flex;
          gap: 1.5rem;
          animation: scroll-gallery 40s linear infinite;
          width: max-content;
      }

      .gallery-carousel:hover {
          animation-play-state: paused;
      }

      .gallery-item {
          width: 280px;
          height: 280px;
          border-radius: 1rem;
          overflow: hidden;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
          cursor: pointer;
          transition: transform 0.3s;
          flex-shrink: 0;
      }

      .gallery-item:hover {
          transform: scale(1.05);
      }

      .gallery-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      @keyframes scroll-gallery {
          0% {
              transform: translateX(0);
          }
          100% {
              transform: translateX(calc(-280px * 4 - 1.5rem * 4));
          }
      }

      /* Lightbox */
      .lightbox {
          display: none;
          position: fixed;
          z-index: 9999;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.95);
          justify-content: center;
          align-items: center;
      }

      .lightbox.active {
          display: flex;
      }

      .lightbox img {
          max-width: 90%;
          max-height: 90%;
          object-fit: contain;
          border-radius: 0.5rem;
      }

      .lightbox-close {
          position: absolute;
          top: 2rem;
          right: 3rem;
          color: white;
          font-size: 3rem;
          font-weight: bold;
          cursor: pointer;
          transition: color 0.3s;
      }

      .lightbox-close:hover {
          color: #ff6b9d;
      }

      .lightbox-prev,
      .lightbox-next {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background-color: rgba(255, 255, 255, 0.2);
          color: white;
          border: none;
          font-size: 2rem;
          padding: 1rem 1.5rem;
          cursor: pointer;
          border-radius: 0.5rem;
          transition: background-color 0.3s;
      }

      .lightbox-prev:hover,
      .lightbox-next:hover {
          background-color: rgba(255, 255, 255, 0.3);
      }

      .lightbox-prev {
          left: 2rem;
      }

      .lightbox-next {
          right: 2rem;
      }

      /* YouTube Videos Section */
      .youtube-section {
          padding: 4rem 1.5rem;
          background: linear-gradient(135deg, #fdf2f8 0%, #fff0f3 100%);
      }

      .youtube-section .section-title {
          text-align: center;
      }

      .section-subtitle {
          text-align: center;
          color: #6b7280;
          font-size: 1.1rem;
          margin-top: -1rem;
          margin-bottom: 3rem;
      }

      .videos-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 2.5rem;
          max-width: 1000px;
          margin: 0 auto 3rem;
      }

      .video-card {
          background: white;
          border-radius: 1.5rem;
          overflow: hidden;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s, box-shadow 0.3s;
      }

      .video-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 20px 40px rgba(217, 67, 113, 0.2);
      }

      .video-wrapper {
          position: relative;
          padding-bottom: 56.25%;
          height: 0;
          overflow: hidden;
      }

      .video-wrapper iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
      }

      .video-title {
          padding: 1.25rem;
          font-size: 1.125rem;
          font-weight: 600;
          color: #1f2937;
          text-align: center;
      }

      .youtube-cta {
          text-align: center;
      }

      .btn-youtube {
          display: inline-flex;
          align-items: center;
          gap: 0.75rem;
          background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
          color: white;
          padding: 1rem 2.5rem;
          border-radius: 50px;
          text-decoration: none;
          font-size: 1.1rem;
          font-weight: 600;
          box-shadow: 0 8px 20px rgba(255, 0, 0, 0.3);
          transition: all 0.3s;
      }

      .btn-youtube:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 30px rgba(255, 0, 0, 0.4);
          background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
      }

      .btn-youtube i {
          font-size: 1.5rem;
      }

      /* About Section */
      .about {
          padding: 4rem 1.5rem;
          background-color: #fdf2f8;
      }

      .section-title {
          font-size: 2.5rem;
          font-weight: bold;
          color: #1f2937;
          margin-bottom: 2rem;
      }

      .about-content {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 3rem;
          align-items: center;
      }

      .about-image {
          border-radius: 1.5rem;
          overflow: hidden;
          width: 400px;
          height: 400px;
          margin-left: auto;
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      }

      .about-image img {
          width: 100%;
          height: 100%;
          transform: scale(1,1);
          object-fit: cover;
      }

      .about-text p {
          color: #4b5563;
          margin-bottom: 1rem;
          line-height: 1.8;
      }

      /* Achievements Section */
      .achievements {
          padding: 4rem 1.5rem;
          background-color: white;
      }

      .achievements .section-title {
          text-align: center;
      }

      .achievements-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 2rem;
          margin-top: 3rem;
      }

      .achievement-card {
          background-color: #f3f4f6;
          border-radius: 1rem;
          padding: 2rem;
          text-align: center;
          transition: box-shadow 0.3s;
      }

      .achievement-card:hover {
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      }

      .achievement-image {
          width: 100%;
          height: 12rem;
          background-color: #e5e7eb;
          border-radius: 0.75rem;
          margin-bottom: 1rem;
      }

      .achievement-card h3 {
          font-weight: bold;
          font-size: 1.125rem;
          color: #1f2937;
          margin-bottom: 0.5rem;
      }

      .achievement-card p {
          color: #6b7280;
          font-size: 0.875rem;
      }

      /* Testimonials Section */
      .testimonials {
          padding: 4rem 1.5rem;
          background-color: #fdf2f8;
      }

      .testimonials .section-title {
          text-align: center;
      }

      .testimonial-card {
          background-color: white;
          border-radius: 1.5rem;
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
          padding: 3rem;
          margin-top: 3rem;
      }

      .testimonial-content {
          display: flex;
          align-items: flex-start;
          gap: 1.5rem;
      }

      .testimonial-avatar {
          width: 4rem;
          height: 4rem;
          border-radius: 50%;
          flex-shrink: 0;
      }

      .testimonial-text h3 {
          font-weight: bold;
          font-size: 1.125rem;
          margin-bottom: 0.25rem;
      }

      .rating {
          color: #ff6b9d;
          font-size: 0.875rem;
          margin-bottom: 0.75rem;
      }

      .testimonial-quote {
          color: #4b5563;
          line-height: 1.8;
      }

      /* Contact Section */
      .contact {
          padding: 4rem 1.5rem;
          background-color: #f3f4f6;
      }

      .contact .section-title {
          text-align: center;
      }

      .contact-form {
          background-color: white;
          border-radius: 1.5rem;
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
          padding: 2rem;
          margin-top: 2rem;
      }

      .form-group {
          margin-bottom: 1.5rem;
      }

      .form-group label {
          display: block;
          font-size: 0.875rem;
          font-weight: 500;
          color: #374151;
          margin-bottom: 0.5rem;
      }

      .form-group input,
      .form-group textarea {
          width: 100%;
          padding: 0.75rem 1rem;
          border: 1px solid #d1d5db;
          border-radius: 0.5rem;
          font-size: 1rem;
          font-family: inherit;
          transition: all 0.3s;
      }

      .form-group input:focus,
      .form-group textarea:focus {
          outline: none;
          border-color: #ff6b9d;
          box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
      }

      .form-group textarea {
          resize: none;
      }

      .btn-submit {
          width: 100%;
          background: linear-gradient(135deg, #ff6b9d 0%, #ffa5c7 100%);
          color: white;
          padding: 0.75rem 1.5rem;
          border: none;
          border-radius: 0.5rem;
          font-size: 1rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          transition: all 0.3s;
      }

      .btn-submit:hover {
          background: linear-gradient(135deg, #ff5a8d 0%, #ff95b7 100%);
          box-shadow: 0 10px 25px rgba(255, 107, 157, 0.3);
      }

    .btncancel {
          background: inherit !important;
          padding: 0.75rem 2rem;
          border: 0.1px solid #ff6b9d!important;
          border-radius: 50px !important;
          font-size: 0.9rem;
          color: #ff6b9d !important;
        
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s;
          display: inline-block;
             
    }

      .status-message {
          text-align: center;
          margin-top: 1rem;
          font-size: 0.875rem;
      }

      .social-links {
          display: flex;
          justify-content: center;
          gap: 1.5rem;
          margin-top: 2rem;
      }

      .social-icon {
          color: #ff6b9d;
          font-size: 1.75rem;
          transition: color 0.3s;
      }

      .social-icon:hover {
          color: #ff5a8d;
      }

      /* Footer */
      .footer {
          background-color: #1f2937;
          color: white;
          padding: 2rem 1.5rem;
          text-align: center;
      }

      .footer p {
          font-size: 0.875rem;
      }

      /* Navbar toggle button */
      .nav-toggle {
          display: none;
          background: none;
          border: none;
          font-size: 1.5rem;
          cursor: pointer;
          color: #4b5563;
      }

      /* Hide links wrapper by default on mobile */
      .nav-links-wrapper {
          display: flex;
          gap: 2rem;
      }

      /* Modal Customization */
      .modal-header {
          background: linear-gradient(135deg, #ff6b9d 0%, #ffa5c7 100%);
          color: white;
          border-bottom: none;
      }

      .modal-header .btn-close {
          filter: brightness(0) invert(1);
      }

      .form-check-input:checked {
          background-color: #ff6b9d;
          border-color: #ff6b9d;
      }

      .form-check-input:focus {
          border-color: #ff6b9d;
          box-shadow: 0 0 0 0.25rem rgba(255, 107, 157, 0.25);
      }

      .agreement-text {
          font-size: 0.9rem;
          color: #666;
          line-height: 1.6;
      }

      .success-icon {
          font-size: 4rem;
          color: #ff6b9d;
          margin-bottom: 1rem;
          animation: scaleIn 0.5s ease-out;
      }

      .loading-spinner {
          border: 3px solid #f3f3f3;
          border-top: 3px solid #ff6b9d;
          border-radius: 50%;
          width: 40px;
          height: 40px;
          animation: spin 1s linear infinite;
          margin: 0 auto;
      }

      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }

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

      @keyframes scaleIn {
          to {
              opacity: 1;
              transform: scale(1);
          }
      }

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

      /* Responsive Design */
      @media (max-width: 768px) {
          .nav-toggle {
              display: block;
          }

          .nav-links-wrapper {
              display: none;
              flex-direction: column;
              width: 100%;
              background-color: rgba(255, 255, 255, 0.95);
              position: absolute;
              top: 100%;
              left: 0;
              padding: 1rem 1.5rem;
              box-shadow: 0 4px 6px rgba(0,0,0,0.1);
              border-bottom-left-radius: 1rem;
              border-bottom-right-radius: 1rem;
          }

          .nav-links-wrapper.active {
              display: flex;
          }

          .nav-links {
              flex-direction: column;
              gap: 1rem;
          }

          .hero {
              padding: 5rem 1.5rem 2rem;
              min-height: auto;
          }

          .hero-container {
              grid-template-columns: 1fr;
              text-align: center;
              gap: 2rem;
          }

          .hero-title {
              font-size: 3.5rem;
          }

          .hero-subtitle {
              font-size: 1.25rem;
          }

          .hero-description {
              font-size: 0.95rem;
              margin: 0 auto 2rem;
          }

          .hero-image {
              max-width: 450px;
              order: -1;
              margin: 0 auto;
          }

          .gallery-item {
              width: 250px;
              height: 220px;
          }

          @keyframes scroll-gallery {
              0% {
                  transform: translateX(0);
              }
              100% {
                  transform: translateX(calc(-220px * 4 - 1.5rem * 4));
              }
          }

          .about-content {
              grid-template-columns: 1fr;
              text-align: center;
              align-items: center;
          }
          
          .about-image {
              width: 100%;
              max-width: 350px;
              height: auto;
              margin: 0 auto 2rem;
          }

          .about-text {
              font-size: 0.95rem;
          }

          .videos-grid {
              grid-template-columns: 1fr;
              gap: 2rem;
              max-width: 100%;
          }

          .video-card {
              max-width: 100%;
          }

          .btn-youtube {
              font-size: 1rem;
              padding: 0.875rem 2rem;
          }
          .btncancel {
              font-size: 1rem;
              padding: 0.5rem 1rem;
              border-radius: 30px;
              border: 2px solid #ff6b9d;
              color:#ff6b9d;
              background-color: inherit;
             
          }

          .achievements-grid {
              grid-template-columns: 1fr;
          }

          .testimonial-content {
              flex-direction: column;
              text-align: center;
              align-items: center;
          }
          
          .testimonial-avatar {
              margin-bottom: 1rem;
          }
      }

      @media (max-width: 480px) {
          .hero-title {
              font-size: 2.5rem;
          }

          .hero-subtitle {
              font-size: 1rem;
          }

          .hero-description {
              font-size: 0.875rem;
          }

          .hero-image {
              max-width: 350px;
          }

          .gallery-item {
              width: 180px;
              height: 180px;
          }

          @keyframes scroll-gallery {
              0% {
                  transform: translateX(0);
              }
              100% {
                  transform: translateX(calc(-180px * 4 - 1.5rem * 4));
              }
          }

          .videos-grid {
              grid-template-columns: 1fr;
              gap: 1.5rem;
          }

          .video-title {
              font-size: 1rem;
              padding: 1rem;
          }

          .section-subtitle {
              font-size: 0.95rem;
              padding: 0 1rem;
          }

          .btn-youtube {
              font-size: 0.95rem;
              padding: 0.75rem 1.75rem;
          }

          .btn-youtube i {
              font-size: 1.25rem;
          }

          .youtube-section {
              padding: 3rem 1rem;
          }

          .lightbox-prev,
          .lightbox-next {
              padding: 0.5rem 1rem;
              font-size: 1.5rem;
          }

          .lightbox-close {
              top: 1rem;
              right: 1rem;
              font-size: 2rem;
          }
      }