:root {
      --primary-blue: #6b7cff;
      --primary-purple: #8a5fff;
      --primary-pink: #c45aad;
      --primary-coral: #e8655a;
    }

    body {
      font-family: 'Poppins', serif;
      background: #000;
      color: #fff;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      overflow-x: hidden;
      position: relative;
    }

    /* Background Effect */
    body::before {
      content: '';
      position: fixed;
      top: -50%;
      left: 50%;
      transform: translateX(-50%);
      width: 150%;
      height: 200%;
      background: radial-gradient(ellipse at center, rgba(107, 124, 255, 0.15) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

    /* ─── Main Container ─── */
    .contact-container {
      position: relative;
      z-index: 1;
      max-width: 1100px;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 0.9fr;
      gap: 3rem;
      align-items: start;
    }

    /* ─── Left Side: Form ─── */
    .form-section {
      position: relative;
      max-width: 550px;
    }

    .form-header {
      margin-bottom: 2rem;
    }

    .form-header h1 {
        font-family: "Poppins", serif;
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      margin-bottom: 0.8rem;
      background: linear-gradient(120deg, #6b7cff, #c45aad, #e8655a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .form-header p {
      font-family: 'Crimson Text', serif;
      font-size: clamp(0.95rem, 1.8vw, 1.1rem);
      font-weight: 400;
      line-height: 1.5;
      background: linear-gradient(135deg, 
        #b8b8b8 0%, 
        #ffffff 25%, 
        #d4d4d4 50%, 
        #ffffff 75%, 
        #b8b8b8 100%);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: metalShine 3s linear infinite;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }

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

    /* Form */
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .form-group {
      position: relative;
    }

    .form-label {
      display: block;
      font-family: 'Crimson Text', serif;
      font-size: 0.95rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.75);
      margin-bottom: 0.6rem;
      letter-spacing: 0.02em;
    }

    .form-input,
    .form-textarea {
      width: 100%;
      padding: 0.9rem 1.2rem;
      font-family: 'Crimson Text', serif;
      font-size: 0.98rem;
      color: #fff;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 10px;
      backdrop-filter: blur(8px);
      transition: all 0.3s ease;
    }

    .form-input:focus,
    .form-textarea:focus {
      outline: none;
      border-color: var(--primary-pink);
      background: rgba(255, 255, 255, 0.06);
      box-shadow: 0 0 0 3px rgba(196, 90, 173, 0.15);
    }

    .form-input::placeholder,
    .form-textarea::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .form-textarea {
      min-height: 120px;
      resize: vertical;
    }

    /* Submit Button with Paper Plane */
    .submit-wrapper {
      position: relative;
      margin-top: 0.5rem;
    }

    .submit-btn {
      position: relative;
      width: 100%;
      padding: 1rem 1.8rem;
      font-family: 'Crimson Text', serif;
      font-size: 1.05rem;
      font-weight: 600;
      color: #2196F3;
      background: transparent;
      border: 2px solid #2196F3;
      border-radius: 10px;
      cursor: pointer;
      overflow: visible;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .submit-btn:hover:not(.sent) {
      background: rgba(33, 150, 243, 0.1);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
    }

    .btn-text {
      position: relative;
      z-index: 1;
      transition: opacity 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .btn-icon {
      position: relative;
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }

    .btn-icon svg {
      stroke: #2196F3;
      transition: stroke 0.3s ease;
    }

    .submit-btn:hover:not(.sent) .btn-icon {
      transform: translateX(4px);
    }

    /* Sent State */
    .submit-btn.sent {
      color: #4caf50;
      border-color: #4caf50;
      cursor: not-allowed;
      pointer-events: none;
    }

    .submit-btn.sent .btn-icon svg {
      stroke: #4caf50;
    }

    .submit-btn.sent .btn-icon {
      animation: flyAwayOut 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes flyAwayOut {
      0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
      }
     
      100% {
        transform: translate(1200px, -600px) rotate(45deg) scale(0.5);
        opacity: 0;
      }
    }

    /* ─── Right Side: Contact Info ─── */
    .info-section {
      position: sticky;
      top: 120px;
      padding: 2.5rem 2rem;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .info-item {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      padding: 1.2rem 0;
    }

    .info-item:not(:last-child) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .info-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      background: rgba(107, 124, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .info-icon svg {
      stroke: var(--primary-blue);
      width: 24px;
      height: 24px;
    }

    .info-text {
      flex-grow: 1;
    }

    .info-label {
      font-family: 'Crimson Text', serif;
      font-size: 0.85rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 0.3rem;
    }

    .info-value {
      font-family: 'Crimson Text', serif;
      font-size: 1.05rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.9);
    }

    /* Divider */
    .info-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(107, 124, 255, 0.3), rgba(196, 90, 173, 0.3), transparent);
      margin: 1.5rem 0;
    }

    /* Social Icons */
    .social-icons-wrapper {
      padding: 1.2rem 0;
    }

    .iconss {
      display: flex;
      gap: 1.5rem;
      justify-content: center;
    }

    .iconaa {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 56px;
      height: 56px;
      filter: grayscale(100%);
      opacity: 0.5;
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .iconaa img {
      width: 56px;
      height: 56px;
      transition: transform 0.4s ease;
    }

    .iconaa.instagram:hover {
      opacity: 1;
      filter: none;
      transform: translateY(-5px) rotate(5deg);
    }

    .iconaa.whatsapp:hover {
      opacity: 1;
      filter: none;
      transform: translateY(-5px) rotate(-5deg);
    }

    .iconaa:hover img {
      transform: scale(1.1);
    }

    /* ─── Responsive ─── */
    @media (max-width: 900px) {
      .contact-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }

      .form-section {
        max-width: 100%;
      }

      .info-section {
        position: relative;
        top: 0;
      }
    }

    @media (max-width: 640px) {
      body {
        padding: 1.5rem;
      }

      .contact-container {
        gap: 2rem;
      }

      .form-header h1 {
        font-size: 1.8rem;
      }

      .form-header p {
        font-size: 0.95rem;
      }

      .contact-form {
        gap: 1.2rem;
      }

      .form-input,
      .form-textarea {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
      }

      .form-textarea {
        min-height: 100px;
      }

      .submit-btn {
        padding: 0.9rem 1.5rem;
        font-size: 1rem;
      }

      .info-section {
        padding: 2rem 1.5rem;
      }

      .info-icon {
        width: 45px;
        height: 45px;
      }

      .info-icon svg {
        width: 22px;
        height: 22px;
      }

      .iconss {
        gap: 1.2rem;
      }

      .iconaa,
      .iconaa img {
        width: 50px;
        height: 50px;
      }

      @keyframes flyAwayOut {
        0% {
          transform: translate(0, 0) rotate(0deg) scale(1);
          opacity: 1;
        }
        20% {
          transform: translate(25px, -12px) rotate(10deg) scale(1.1);
          opacity: 1;
        }
        40% {
          transform: translate(60px, -30px) rotate(20deg) scale(1.2);
          opacity: 1;
        }
        100% {
          transform: translate(600px, -400px) rotate(45deg) scale(0.5);
          opacity: 0;
        }
      }
    }

    /* Success Message */
    .success-message {
      position: fixed;
      top: 2rem;
      right: 2rem;
      padding: 1.2rem 1.8rem;
      background: #4caf50;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
      opacity: 0;
      transform: translateY(-20px);
      transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
      z-index: 1000;
    }

    .success-message.show {
      opacity: 1;
      transform: translateY(0);
    }

    .success-message p {
      font-family: 'Crimson Text', serif;
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 0.7rem;
      margin: 0;
    }

    .success-message svg {
      width: 20px;
      height: 20px;
    }