@import url("https://fonts.googleapis.com/css?family=Manrope:400,700");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap");

body {
    font-family: 'Manrope', sans-serif;
    margin: 0;
    padding: 0;
    background: #000000;
}

.font-canela {
    font-family: 'Playfair Display', serif;
}

.font-manrope {
    font-family: 'Manrope', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* HubSpot Form Styling - More Specific Selectors */
.hs-form-frame {
    width: 100% !important;
    max-width: 400px !important;
    background: none !important;
    background-color: transparent !important;
}

.hs-form-frame .hs-form {
    background: none !important;
    background-color: transparent !important;
}

.hs-form-frame .hs-form fieldset {
    max-width: none !important;
}

.hs-form-frame .hs-form .hs-form-field {
    margin-bottom: 1rem !important;
}

.hs-form-frame .hs-form .hs-form-field > label {
    display: none !important;
}

.hs-form-frame .hs-form .hs-input[type="text"],
.hs-form-frame .hs-form .hs-input[type="email"],
.hs-form-frame .hs-form .hs-input[type="tel"],
.hs-form-frame .hs-form .hs-input,
.hs-form-frame .hs-form input[type="text"],
.hs-form-frame .hs-form input[type="email"],
.hs-form-frame .hs-form input[type="tel"],
.hs-form-frame .hs-form input,
.hs-form-frame .hs-form textarea,
.hs-form-frame .hs-form select {
    width: 100% !important;
    padding: 0.75rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.375rem !important;
    font-family: 'Manrope', sans-serif !important;
    color: white !important;
    font-size: 0.875rem !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
}

.hs-form-frame .hs-form .hs-input::placeholder,
.hs-form-frame .hs-form input::placeholder,
.hs-form-frame .hs-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.hs-form-frame .hs-form .hs-input:focus,
.hs-form-frame .hs-form input:focus,
.hs-form-frame .hs-form textarea:focus {
    outline: none !important;
    border-color: #a6eddd !important;
    box-shadow: none !important;
}

.hs-form-frame .hs-form .hs-button,
.hs-form-frame .hs-form input[type="submit"] {
    width: 100% !important;
    padding: 0.75rem !important;
    background: #a6eddd !important;
    color: #6e29f6 !important;
    border: none !important;
    border-radius: 0.375rem !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    margin-top: 1rem !important;
}

.hs-form-frame .hs-form .hs-button:hover,
.hs-form-frame .hs-form input[type="submit"]:hover {
    background: rgba(166, 237, 221, 0.9) !important;
}

.hs-form-frame .hs-form .hs-error-msgs {
    color: #ef4444 !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
}

.hs-form-frame .hs-form .hs-error-msg {
    color: #ef4444 !important;
    font-size: 0.75rem !important;
}

.hs-form-frame .hs-form .submitted-message {
    width: 100% !important;
    padding: 0.75rem !important;
    background: rgba(34, 197, 94, 0.2) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    border-radius: 0.375rem !important;
    font-family: 'Manrope', sans-serif !important;
    color: #4ade80 !important;
    font-size: 0.875rem !important;
    text-align: center !important;
}

/* Hide HubSpot branding and unwanted elements */
.hs-form-frame .hs-form .hs-form-booleancheckbox-display > span {
    color: white !important;
    font-size: 0.75rem !important;
}

.hs-form-frame .hs-form .hs-form-booleancheckbox-display a {
    color: #a6eddd !important;
}

.hs-form-frame .hs-form .hs-richtext {
    color: white !important;
    font-size: 0.75rem !important;
}

.hs-form-frame .hs-form .hs-richtext a {
    color: #a6eddd !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hs-form-frame {
        max-width: 100% !important;
    }
}