@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body{font-family: "Montserrat", sans-serif;}
.btn-primary{background: #362B5A; border-color: #362B5A;}
.btn-outline-primary{border-color: #362B5A; color: #362B5A;}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{background: #362B5A;}
.btn:hover{background: #362B5A; border-color: #362B5A;}



/* wrapper controls the visible border thickness and radius */
.gradient-wrap{
  position: relative;            /* required for ::before positioning */
  display: inline-block;
  padding: 3px 3px 0px;                  /* border thickness */
  border-radius: .375rem; height: 181px;         /* outer radius */

  width: 100%; overflow: hidden; box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.15);
}

/* the rotating gradient (behind the textarea) */
.gradient-wrap::before{
  content: "";
  position: absolute;
  inset: 0;                      /* cover the wrapper (including padding) */
  z-index: 0;                    /* behind the textarea */
  border-radius: inherit;
  pointer-events: none;          /* allow clicks to reach the textarea */
  background: conic-gradient(
    from 0deg,
    #fff 0deg,
    rgba(54, 43, 90, 1) 112.5deg,
    #FFC100 228.75deg,
    rgba(255, 193, 0, 1) 360deg
  );
  /* animate rotation so the gradient moves */
  transform: rotate(0deg);     width: calc(100% * 1.41421356237);
  transform-origin: 50% 50%;
  animation: rotate-gradient 5s linear infinite;
  /* optional: soften the border with blur */
  filter: blur(10px);
}

/* the inner white area (textarea). z-index:1 to sit above the gradient */
.gradient-textarea{
  position: relative;
  z-index: 1; 
  width: 100%;
  min-height: 175px;
  box-sizing: border-box;  font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 400;
  border: none;                  /* remove native border */
  border-radius: .375rem;            /* inner radius slightly smaller than wrapper */
  padding: 15px;
  background: #ffffff;           /* inner fill so gradient shows only as border */

  outline: none;
  resize: vertical;              /* allow vertical resize if you want */
}

/* keyframes to rotate the pseudo-element */
@keyframes rotate-gradient {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}



.ask-button {
            background: linear-gradient(45deg, #feca57, #ff9f43);
            color: #333;
            border: none;
            padding: 12px 25px;
            border-radius: .375rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px 0 rgba(254, 202, 87, 0.4);
            position: relative;
            overflow: hidden;
        }

        .ask-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px 0 rgba(254, 202, 87, 0.6);
        }

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

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


        .arrow-icon svg{width: 28px;}
        footer a{font-size: 14px!important;}
        footer a:hover{color: #362B5A!important;}

        .form-signin {
  max-width: 450px;
  padding: 15px;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}



.form-signin input[type="password"] {
  margin-bottom: 10px;

}

@media screen and (max-width: 767px) {
  .full-w{width: 100%!important;}
  .f-button{position: fixed; bottom:0; border-radius: 0; left: 0; width: 99%!important; margin: 0px;}
}