/*
Theme Name: ykhalaf
Theme URI: https://yasminkhalaf.com/
Description: A custom WordPress theme designed and developed by Yasmin Khalaf. It features a clean and modern design, optimized for performance and user experience. The theme is fully responsive, ensuring it looks great on all devices. It includes customizable options, allowing users to easily modify the appearance and functionality to suit their needs. With a focus on accessibility and SEO best practices, this theme is perfect for bloggers, businesses, and creatives looking to establish a strong online presence.
Author: Yasmin Khalaf
Author URI: https://yasminkhalaf.com/
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ykhalaf
Tags: responsive, custom-background, custom-logo, featured-images, theme-options, Blog, Business, Creative
*/

* {
    box-sizing: border-box;
}

:root {
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* Form Styles */

.wpcf7 label span {
    color: #ff0000;
}

.wpcf7 p {
    margin-bottom: 0;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    background-color: transparent !important;
    border: 1px solid var(--wp--preset--color--white);
    border-radius: 16px;
    padding: 20px 24px;
    width: 100%;
    line-height: 1.2;
    margin-top: 8px;
}

.wpcf7 input,
.wpcf7 textarea {
    font-size: 18px;
    font-family: var(--wp--preset--font-family--sarabun);
    color: var(--wp--preset--color--white);
    font-weight: 300;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #9683B8;
}


.wpcf7 input[type="submit"] {
    background: var(--wp--preset--color--white);
    border-radius: 100px;
    color: var(--wp--preset--color--custom-46246-d);
    padding: 8px 24px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    font-family: var(--wp--preset--font-family--sarabun);
    margin: 0 auto;
    display: block;
    transition: all 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
    background: var(--wp--preset--color--custom-46246-d);
    color: var(--wp--preset--color--white);
    cursor: pointer;
}

.wpcf7-not-valid-tip {
    color: #ff0000;
    font-size: 16px !important;
    font-weight: normal;
    display: block;
    background: var(--wp--preset--color--white);
    margin-top: 8px;
    padding: 4px 24px;
    border-radius: 8px;
}

.wpcf7-spinner {
    background-color: rgba(246, 246, 246, 0.1) !important;
    margin: 12px auto !important;
    display: block !important;
}

.wpcf7-response-output {
    border: none !important;
    color: #ffb900;
    text-align: center;
    margin: 0 !important;
}

/** Responsiveness */
@media screen and (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }

    .responsive-flex {
        flex-direction: column;
        align-items:flex-start !important;
    }

     .remove-margin div {
        border-right: none !important;
    }
}

@media screen and (max-width: 1024px) {
    .remove-margin {
        margin-top: 3rem !important;
    }

}