/*
Theme Name: Zatra
Theme URI: https://dezigndigital.com.au/themes/zatra/
Author: Dezign Digital
Author URI: https://dezigndigital.com.au/
Description: Zatra offers full-site editing flexibility and cross-browser compatibility. It is a responsive and mobile-friendly theme. Customizing the colors, fonts, typography, layouts, and more is easy. With the help of the powerful block editor, it will be simple to tailor your website to your needs. This theme is carefully crafted and meticulously developed.
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 5.7
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zatra
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, blog, portfolio, news
*/

.home-about-section .home-icon-wrap {
    text-align: center;
}

.home-about-section .home-icon-wrap i {
    font-size: 54px;
    border-width: 4px;
    border-style: solid;
    border-radius: 20px;
    border-color: inherit;
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-about-section .home-icon-wrap.home-icon-wrap-1 i {
    color: #f17e00;
}

.home-about-section .home-icon-wrap.home-icon-wrap-2 i {
    color: #3685fb;
}

.home-about-section .home-icon-wrap.home-icon-wrap-3 i {
    color: #bbd700;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Custom Language Switcher (Polylang)
   ========================================================================== */

/* Container for the language list (UL) */
.polylang_langswitcher {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-flex;  /* Changed from flex to inline-flex */
                           /* This allows the UL to behave like an inline element that can be
                              vertically aligned by its parent, while still being a flex container
                              for its LI children. */
    align-items: center;   /* Vertically align the LI items (flex items) within the UL */
    gap: 6px;              /* Space between flags */
    vertical-align: middle;/* Helps align the entire UL block within its parent line,
                               if the parent div is not using flex for alignment. */
}

/* Individual language items (LI) */
.lang-item {
	display: flex;         /* Make LI a flex container to center its 'a' tag child */
    align-items: center;   /* Vertically center the 'a' tag within the LI */
	margin: 0;             /* Margins handled by 'gap' on UL */
}

/* Anchor tag within language items */
.lang-item a {
    display: inline-block; /* Or just block, as parent LI is flex */
    line-height: 0;        /* Remove potential extra space under image */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Flag images */
.lang-item img {
    width: 32px;
    height: auto;
	display: block;        /* Removes space under image, good for flex item children */
    /* vertical-align: middle; /* Less critical if parent 'a' or 'li' handles alignment */
}

/* Styling for the currently active language item */
.lang-item.current-lang a {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

/* Hover effect for non-active language items */
.lang-item:not(.current-lang) a:hover {
    transform: scale(1.08);
}

/* Specific adjustments when the switcher is inside a .wp-block-navigation context */
.wp-block-navigation .polylang_langswitcher {
    margin-right: 2.5rem;
    /* justify-content: flex-end; /* If using display:flex on UL and want to align right within nav */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Other Styles (Highlight Column - Unchanged from your original)
   ========================================================================== */

/* Style for the specific column (highlight-column) */
.highlight-column {
    position: relative; /* Ensure proper positioning */
}

/* Style for the Font Awesome icon inside the group */
.highlight-column .wp-block-group i {
    transition: transform 0.3s ease; /* Transition only for scaling */
}

/* Highlight the icon when hovering over the parent column */
.highlight-column:hover .wp-block-group i {
    transform: scale(1.14); /* Slightly enlarge the icon to 1.1 */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Common style for all forms - THIS SECTION IS NOW MINIMAL
Styles previously here are now in /css/custom-common-form-styles.css
Only keep styles here if they are TRULY global and not specific to your custom forms,
or if other parts of your theme (not these custom forms) rely on them.
*/

/* These utility classes MAY REMAIN if used globally or for non-custom forms */
.form-width-400 {
    max-width: 462px;
    margin: 0 auto;
}

.form-width-700 {
    max-width: 702px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.phone-mobile {
		margin: 12px 0 0 0 !important;
	}
	
	.column-phone-mobile{
		padding: 0 !important;
	}
	
	.group-phone-mobile {
		padding: 36px !important;
		margin: 0 !important;
		border-radius: 20px !important;
	}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Forminator Dropdown Menu */

/* dropdown container - entire list */
.forminator-select-dropdown.forminator-custom-form-1001 {
	border-radius: 5px!important;
	/* background-color:!important; */ /* This was commented or empty */
}

/* Search field inside the dropdown */
.forminator-select-dropdown.forminator-custom-form-1001 .select2-search__field {
    border: 1px solid #ccc !important; /* Set the border color and size */
    padding: 10px; /* Adjust padding inside the search field */
    font-size: 14px; /* Change the font size of the text inside the search field */
    border-radius: 5px !important; /* Round the corners of the search box */
    background-color: #FFFFFF; /* Set a background color for the search box */
    width: 100%; /* Ensure it stretches to full width within the dropdown */
}