/* Custom Fonts */
@font-face {
  font-family: 'OverusedGrotesk';
  src: url('./fonts/OverusedGrotesk-VF.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Global Styles & Utilities */
:root {
    --font-geist: 'Geist', sans-serif;
    --font-instr: 'Instrument Sans', sans-serif;
    --font-host: 'Host Grotesk', sans-serif;
    --font-overused: 'OverusedGrotesk', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-instr);
    background-color: white;
    -webkit-font-smoothing: antialiased;
}

/* Matching your Nuxt input styles */
input, textarea {
    width: 100%;
    height: 48px;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    border: 0.5px solid #D4D4D8;
    background: #F4F4F5;
    padding: 8px 24px;
    border-radius: 99px;
    color: #27272A;
    outline: none;
}

.input{
    width: 100%;
    height: 48px;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    border: 0.5px solid #D4D4D8;
    background: #F4F4F5;
    padding: 8px 24px;
    border-radius: 99px;
    color: #27272A;
    outline: none;
}

.textarea{
    width: 100%;
    height: 210px;
    padding: 8px 24px;
    background: #F4F4F5;
    border: 0.5px #D4D4D8;
    border-radius: 12px;
    color: #27272A;
    outline: none;
    resize: none;
    box-shadow: 0 0 0 1px #e2e8f0;
    font-family: var(--font-instr);
    font-size: 18px;
    line-height: 32px;
    transition: box-shadow 0.2s ease-in-out;
}



input:focus, 
.textarea:focus, 
button:focus {
    /* focus:ring-2 */
    outline: none; /* Removes default browser outline to show the ring */
    box-shadow: 0 0 0 2px #368CFB; /* #3b82f6 is the standard blue-500 hex */

    /* transition-all */
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Custom Component Classes */
.font-instrSans { font-family: var(--font-instr); }
.font-grotesk { font-family: var(--font-host); }
.font-Ogrotesk { font-family: var(--font-overused); }

.btn-1 {
    background: radial-gradient(600.29% 1182.91% at 51.22% 100%, #368CFB 0%, #5CAEFE 30%, #FFEB85 100%);
    height: 40px;
}

.test {
    background-image: url("./images/quote.png");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
    height: 200px;
    width: 100px;
}

a { outline: none; text-decoration: none; }

.vector {
    box-shadow: 0px 2.64px 6.16px 0px #00000014,
                0px 11.44px 11.44px 0px #00000012,
                0px 26.41px 15.85px 0px #0000000A,
                0px 46.66px 18.49px 0px #00000003;
    background-image: url("./images/Vector.png");
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
}

/* Section Transitions (Replaces Nuxt intersection observer logic simply) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Gradients for SVGs */
.svg-gradient-text {
    fill: url(#paint0_radial_testimonial);
}

textarea {
    resize: none;
}