/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* --- Form container spacing --- */
.wpcf7 form {
    color: #ffffff; /* Make all text white */
}

/* --- Labels (titles) on red background --- */
.wpcf7 form label {
    color: #ffffff !important;
    font-weight: 600;
    margin-bottom: 6px;
}

/* --- Input fields --- */
.wpcf7 input,
.wpcf7 textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ffffff;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1); 
    color: #ffffff;
}

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

/* --- Focus state --- */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border-color: #373131;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

/* --- Submit button --- */
.cf7-submit-wrap input.wpcf7-submit {
    background: #fab915; 
    color: #ffffff;
    padding: 14px 22px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s;
}

.cf7-submit-wrap input.wpcf7-submit:hover {
    background: #ec494a; /* Accent hover */
    border: 1px solid #fff;
    color: #fff;
}

/* --- CF7 Error Messages --- */
.wpcf7-not-valid-tip {
    color: #ffffff !important; /* white so visible on red */
    font-weight: 600;
}

.wpcf7-response-output {
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    background: transparent !important;
    padding: 10px 15px;
}

/* --- Row & columns (if being used) --- */
.row {
    display: flex;
    gap: 20px;
}

.col {
    flex: 1;
}

@media (max-width: 600px) {
    .row {
        flex-direction: column;
    }
}


/* Box Border */
.why-box {
  position: relative;
  overflow: hidden;
}

.why-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 0 solid #ec494a;
  border-left: 0 solid #ec494a;
  transition: all 0.35s ease;
  pointer-events: none;
}

.why-box:hover::before {
  border-top-width: 8px;
  border-left-width: 8px;
  width: 100%;
  height: 100%;
  opacity: 1;
}