/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');*/

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: #0B1F3A;
    background-color: #F8FAFC;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Space Grotesk', sans-serif;
}

.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
    background: rgba(11, 31, 58, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #1E90FF, #28C76F);
}

.clip-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.clip-diagonal-reverse {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
}

/* Scroll Animations - Disabled as per request */
.fade-in {
    opacity: 1;
    transform: none;
    transition: none;
}

.slide-in-left {
    opacity: 1;
    transform: none;
    transition: none;
}

.slide-in-right {
    opacity: 1;
    transform: none;
    transition: none;
}

.fade-in.visible,
.slide-in-left.visible,
.slide-in-right.visible {
    opacity: 1;
    transform: none;
}

/* Delay utilities for staggered animations */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }


body .h-\[500px\] {
    /*height: 500px !important;*/
    height: 500px;
}

body .h-\[600px\] {
    height: 600px;
}

body .h-full {
    height: 100%;
}

body .h-\[550px\] {
    height: 550px;
}

.h-80 {
    height: 20rem !important;
}

.rounded-\[60px\] {
    border-radius: 60px !important;
}

.rounded-\[80px\] {
    border-radius: 80px !important;
}

.rounded-\[40px\] {
    border-radius: 40px !important;
}

body .rounded-\[48px\] {
    border-radius: 48px !important;
}

.rounded-3xl {
    border-radius: 1.5rem !important;
}


/* Contact Form 7 - Match HTML Form Exactly */
.hte-contact__form .wpcf7-form {
    font-medium;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hte-contact__form .wpcf7-form p {
    margin: 0;
}
.hte-contact__form .wpcf7-form .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.hte-contact__form .wpcf7-form .grid > div {
    display: flex;
    flex-direction: column;
}
.hte-contact__form .wpcf7-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: rgba(7, 17, 39, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.hte-contact__form .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
}
.hte-contact__form .wpcf7-form .hte-cf7-input {
    width: 100%;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 1rem;
    transition: border-color 0.2s;
}
.hte-contact__form .wpcf7-form .hte-cf7-input:focus {
    outline: none;
    border-color: #0ea5e9;
}
.hte-contact__form .wpcf7-form .wpcf7-select {
    width: 100%;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 1rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}
.hte-contact__form .wpcf7-form .wpcf7-select:focus {
    outline: none;
    border-color: #0ea5e9;
}
.hte-contact__form .wpcf7-form .hte-cf7-btn {
    width: 100%;
    background-color: #f97316;
    color: white;
    font-weight: 700;
    padding: 16px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.2);
}
.hte-contact__form .wpcf7-form .hte-cf7-btn:hover {
    background-color: rgba(249, 115, 22, 0.9);
}
.hte-contact__form .wpcf7-form .wpcf7-spinner {
    margin-left: 8px;
}




/* =========================
   FORM BASE
========================= */
.wpcf7 form {
    width: 100%;
}

.wpcf7-form-control {
    width: 100%;
    font-family: inherit;
}

/* =========================
   INPUT / TEXTAREA / SELECT
========================= */
.hte-cf7-input {
    width: 100%;
    background: #f3f4f6; /* light grey */
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    color: #1f2937;
    transition: all 0.25s ease;
    outline: none;
}

.hte-cf7-input::placeholder {
    color: #9ca3af;
}

.hte-cf7-input:focus {
    border-color: #3b82f6; /* electric blue */
    background: #ffffff;
}

/* TEXTAREA SPECIFIC */
textarea.hte-cf7-input {
    min-height: 120px;
    resize: vertical;
}

/* SELECT FIX */
select.hte-cf7-input {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 20 20' width='20'><path d='M5 7l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

/* =========================
   BUTTON
========================= */
.hte-cf7-btn {
    width: 100%;
    background: #f97316; /* orange */
    color: #ffffff;
    font-weight: 700;
    padding: 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}

.hte-cf7-btn:hover {
    background: #ea580c;
}

/* DISABLED STATE */
.wpcf7 form.submitting .hte-cf7-btn {
    opacity: 0.7;
    pointer-events: none;
}

/* =========================
   SPINNER (LOADER)
========================= */

p:has( .wpcf7-spinner ) {
    position: relative ;
}

.wpcf7-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: white;
    border-right-color: white;
    border-radius: 50%;
    display: inline-block;
    animation: hte-spin 0.6s linear infinite;
    opacity: 0;
    position: absolute;
    top: calc(50% - 9px);
    right: 0;
    /*transform: translateY(-50%) !important;*/
}

/* Show spinner only when submitting */
.wpcf7 form.submitting .wpcf7-spinner {
    opacity: 1;
}

/* Remove default CF7 spinner */
.wpcf7-spinner::before {
    display: none !important;
}

@keyframes hte-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =========================
   RESPONSE MESSAGES
========================= */
.wpcf7-response-output {
    margin: 0px !important;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border: none;
}

/* SUCCESS */
.wpcf7 form.sent .wpcf7-response-output {
    background: #e6f9f0;
    color: #0f9d58;
}

/* ERROR */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    background: #fdecea;
    color: #d93025;
}

/* SPAM */
.wpcf7 form.spam .wpcf7-response-output {
    background: #fff4e5;
    color: #f57c00;
}

/* =========================
   VALIDATION ERRORS
========================= */
.wpcf7-not-valid {
    border-color: #ef4444 !important;
}

.wpcf7-not-valid-tip {
    font-size: 12px;
    color: #ef4444;
    margin-top: 4px;
}

/* =========================
   REMOVE EXTRA SPACING (IMPORTANT)
========================= */
.wpcf7 p {
    margin: 0;
}