/*
Theme Name: Logi
Theme URI: https://logi.wpengine.com/
Author: the WeDesignTech team
Author URI: https://wedesignthemes.com/
Description: Logi is a lightweight, superfast, and attractive business theme suitable for creating every type of professional website. This multipurpose responsive theme is neatly coded, fully customizable, and highly optimized for SEO to rank high on search engines. It works completely fine with Gutenberg and significant page builders like Elementor, Visual Composer, etc. Logi is entirely compatible with WooCommerce to create your online store. With its extensive collection of features and easy customization options, every beginner can easily set up the websites without coding knowledge. It supports all the popular WordPress plugins, Google fonts, Menu options & Translation Ready. This stylish theme is 100% responsive, mobile-friendly, and good-looking with all device screens. Logi is the best and well-suited theme for you to craft a high-quality website. Logi theme is designed, developed, and Professionally maintained by Creative Brahma, and it is regularly updated with new advanced features.
Tags: Blog ,Portfolio
Text Domain: logi
Version: 1.0.4
Requires at least: 5.0
Tested up to: 6.7.2
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Copyright (C) 2024 buddhathemes. All rights reserved.
*/

.dialpadConsent{
	color: #F57539!important;
}
.dialpadConsent:hover{
	font-weight:bold !important;
}

.wdt-cus-service-imgbox .wdt-content-item .wdt-content-title h5{
	    width: calc(100%) !important;
}



/* ==========================================================================
   Contact Form 7 Custom Styles - Transphere Application
   ========================================================================== */

/* Clean up the boxes (fieldsets) around the form sections */
.wpcf7 fieldset {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 25px 30px !important;
    margin-bottom: 40px !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
}

/* Make sure the section titles look neat over the border */
.wpcf7 legend {
    padding: 0 15px !important;
    font-weight: bold;
    color: inherit;
}

/* Space out the radio buttons and checkboxes to stop them from squishing */
span.wpcf7-list-item {
    display: inline-block !important;
    margin-right: 25px !important;
    margin-bottom: 10px !important;
    margin-top: 5px !important;
}

/* Add breathing room between the radio circle and the text word */
span.wpcf7-list-item-label {
    margin-left: 8px !important;
    cursor: pointer;
}

/* Keep paragraphs tight inside the form */
.wpcf7 fieldset p {
    margin-bottom: 15px;
}



/* ==========================================================================
   Date Picker Improvements
   ========================================================================== */

/* 1. Fix the messy text spacing & setup the custom icon */
input[type="date"].wpcf7-form-control {
    letter-spacing: normal !important; /* Fixes the weird gaps in dd-mm-yyyy */
    font-family: inherit !important;
    cursor: pointer !important;
    position: relative !important;
    
    /* Add a custom, clean white calendar icon to replace the default */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 18px !important;
}

/* 2. Stretch the clickable area across the entire field */
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important; /* Hides the native icon but keeps it entirely clickable */
    cursor: pointer !important;
}

/* 3. Slightly fade the 'dd/mm/yyyy' placeholder so it looks cleaner */
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    color: rgba(255, 255, 255, 0.6) !important; 
}


/* ==========================================================================
   Two-Column Form Row (Desktop) & Mobile Stacking
   ========================================================================== */

/* Place the two columns side-by-side on computers/tablets */
.cf7-2col-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Creates two equal 50% columns */
    gap: 30px !important; /* Space between the two columns */
    align-items: start !important;
}

/* Ensure the radio button text doesn't have extra bottom margins inside the column */
.cf7-2col-row p {
    margin-bottom: 0 !important;
}

/* On mobile phones, stack them vertically so they aren't squished */
@media screen and (max-width: 768px) {
    .cf7-2col-row {
        grid-template-columns: 1fr !important; /* Changes back to 1 column */
        gap: 0px !important;
    }
}

/* --- Stronger fix for the stretched dd----yyyy spacing --- */
::-webkit-datetime-edit, 
::-webkit-datetime-edit-fields-wrapper, 
::-webkit-datetime-edit-text, 
::-webkit-datetime-edit-month-field, 
::-webkit-datetime-edit-day-field, 
::-webkit-datetime-edit-year-field {
    letter-spacing: 0px !important;
}



/* ==========================================================================
   Three-Column Layout & Submit Button Styling
   ========================================================================== */

/* 1. Place the 3 English questions side-by-side on computers */
.cf7-3col-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important; /* Creates three equal columns */
    gap: 25px !important;
    align-items: start !important;
}

/* Ensure paragraph margins don't mess up alignment */
.cf7-3col-row p {
    margin-bottom: 0 !important;
}

/* Stack the 3 columns vertically on mobile and smaller tablets so they don't squish */
@media screen and (max-width: 992px) {
    .cf7-3col-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* 2. Fix the Invisible Submit Button */
.wpcf7-submit {
    background-color: #0d6efd !important; /* A nice, bright, clickable blue */
    color: #ffffff !important; /* White text */
    border: none !important;
    padding: 15px 35px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    margin-top: 15px !important;
    display: inline-block !important;
}

/* Make it slightly darker blue when hovered */
.wpcf7-submit:hover {
    background-color: #0b5ed7 !important;
    color: #ffffff !important;
}



/* ==========================================================================
   UI / UX Polish: Bolder Questions & Smaller Errors
   ========================================================================== */

/* 1. Make all question text bolder and bright white */
.wpcf7 fieldset label,
.wpcf7 fieldset p {
    font-weight: 600 !important; /* Semi-bold so it pops */
    color: #ffffff !important; /* Pure white for max contrast */
}

/* 2. Keep the actual radio/checkbox options normal weight and slightly faded */
span.wpcf7-list-item-label {
    font-weight: 400 !important; /* Regular text weight */
    color: rgba(255, 255, 255, 0.85) !important; /* Slightly softer white */
}

/* 3. Add a tiny bit of breathing room between the question text and the input boxes */
.wpcf7 fieldset label input, 
.wpcf7 fieldset label select {
    margin-top: 8px !important;
}

/* 4. Shrink the aggressive red "Please fill out this field" text */
/* 4. Fix overlapping error messages and position them below the fields */
span.wpcf7-not-valid-tip {
    position: relative !important; /* Stops the theme from forcing it inside the box */
    display: block !important; /* Pushes it to its own line underneath the input */
    text-align: left !important; /* Aligns it neatly to the left edge */
    right: auto !important; /* Removes theme's right-side alignment */
    bottom: auto !important; /* Removes theme's bottom alignment */
    margin-top: 6px !important; /* Gives it breathing room below the box */
    font-size: 12px !important; /* Keeps it small and clean */
    font-weight: 500 !important;
    letter-spacing: normal !important;
}

/* 5. Clean up the main global error box that appears at the bottom on failure */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    font-size: 14px !important;
    border-radius: 6px !important;
    border-width: 2px !important;
    margin-top: 25px !important;
}