


.logo_wrapper {
  background: linear-gradient(-45deg, rgba(255, 105, 180, 1) 3%, rgba(255, 182, 193, 1) 38%, rgb(159, 43, 104));
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.logo_wrap {
  right: 380px;
}


@media only screen and (min-width: 640px) {
  .logo_wrap {
   right: 0px;
   top: 0px;
  }
}


@media (min-width: 1px) and (max-width: 639px) {
  .logo_wrap {
   right: 0px;
   position: absolute;
   top: 200px;
  }
} 


/* li>a:before {
    position: absolute;
    left: 10px;
    content: "\f105";
    font-family: FontAwesome;
    font-size: 18px;
    margin-right: 5px;  
    color: #500724;
    color: #926414;
} */
.inquary{
  background: url("img/Utkarsh Logo.png");

}
.inquary::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* top: 500px; */
  background: url("https://cdn.pixabay.com/photo/2024/12/25/05/54/sea-9289597_1280.png"), #000;
  background-position: center;
  background-size: cover;
}

label{
  font-size: 16px !important;
}



/* ----------------Inquiry page ------------------------------*/
    :root {
      --primary: #f9a8d4;
      --accent: #fbcfe8;
      --text-dark: #333;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', sans-serif;
    }

    body {
      min-height: 100vh;
      background-color: #fdf2f8;
           align-items: center;
      justify-content: center;
     
    }

    .container {
      display: flex;
      background-color: #fce7f3;
      flex-direction: row;
      width: 100%;
      height: 650px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 10px rgba(190, 24, 93, 0.2);
      
    }

    .image-side {
      flex: 1;
      background: url("../img/Utkarsh\ Logo.png") no-repeat center center;
      background-size: contain;
      /* background-color: #0000;   */
      background-color: #fbcfe8;
      position: relative;
    }



    .form-side {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 3rem;
      /* color: var(--text-dark); */
      /* background: rgba(255, 255, 255, 0.6); */
      background-color: #be185d;
      backdrop-filter: blur(12px);
    }

    .form-side h2 {
      margin-bottom: 2rem;
      font-size: 2rem;
    }

    label {
      margin-bottom: 0.4rem;
      display: block;
      font-size: 0.9rem;
      color: var(--text-dark);
    }

    input {
      width: 100%;
      padding: 0.75rem;
      margin-bottom: 1.2rem;
      border: 1px solid var(--primary);
      border-radius: 10px;
      background: #fff;
      color: var(--text-dark);
      font-size: 1rem;
    }

    input::placeholder {
      color: #999;
    }

    button {
      /* width: 100%; */
      padding: 0.75rem;
      background-color: #1d4ed8;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      color: #fff;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.3s;
    }

    /* button:hover {
      background-color: #f472b6;
    } */

    .extra {
      margin-top: 1rem;
      text-align: center;
      font-size: 0.85rem;
    }

    .extra a {
      color: var(--primary);
      text-decoration: none;
    }

    /* Responsive Design */

    @media (max-width: 900px) {
      .container {
        flex-direction: column;
        height: auto;
      }

      .image-side {
        height: 200px;
      }

      .form-side {
        padding: 2rem;
      }
    }

    @media (max-width: 600px) {
      .form-side h2 {
        font-size: 1.6rem;
      }

      input,
      button {
        font-size: 0.95rem;
        padding: 0.65rem;
      }
    }

    @media (max-width: 400px) {
      .form-side {
        padding: 1.5rem;
      }

      .form-side h2 {
        font-size: 1.4rem;
      }

      button {
        font-size: 0.9rem;
      }
    }


    .-z-1 {
      z-index: -1;
    }

    .origin-0 {
      transform-origin: 0%;
    }

    input:focus~label,
    input:not(:placeholder-shown)~label,
    textarea:focus~label,
    textarea:not(:placeholder-shown)~label,
    select:focus~label,
    select:not([value='']):valid~label {
      /* @apply transform; scale-75; -translate-y-6; */
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-rotate: 0;
      --tw-skew-x: 0;
      --tw-skew-y: 0;
      transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      --tw-scale-x: 0.75;
      --tw-scale-y: 0.75;
      --tw-translate-y: -1.5rem;
      color: white;
    }

    input:focus~label,
    select:focus~label {
      /* @apply text-black; left-0; */
      --tw-text-opacity: 1;
      color: white;
      left: 0px;
    }


.delete-btn {
  background-color: #fee2e2;
}


