/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
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: astra-child
Template: astra
*/

:root {
	--desktop-header-width: 484px;
}

/* ========================================
   3DPATH Custom Header Styles
   ======================================== */

/* Reset and Base Header Styles */
.site-header,
.ast-primary-header-bar,
.ast-main-header-wrap,
.main-header-bar-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.site-header {
    position: absolute;
    width: 100%;
    z-index: 999;
}

.ast-primary-header-bar {
    padding: 20px 0;
}

.site-navigation [href="#"] {
	cursor: default !important;
}

/* ========================================
   Right Section Container (Menu + Button)
   ======================================== */

body.ast-desktop .ast-grid-right-section {
    display: flex !important;
    align-items: center;
	justify-content: space-between;
    row-gap: 90px;
    /*padding: 12px 12px 12px 30px;*/
    border-radius:0;
    transition: background-color 0.2s, border-radius 0.2s;
    background: transparent;
    position: relative;
	min-width: var(--desktop-header-width);
}

/* White background on hover */
body.ast-desktop .ast-grid-right-section:hover {
    background-color: #ffffff;
}

/* White background + no border-radius when submenu is open */
body.ast-desktop .ast-grid-right-section:has(.menu-item-has-children:hover) {
    background-color: #ffffff;
    border-radius: 0;
}

/* ========================================
   Navigation Menu Styles
   ======================================== */

body.ast-desktop .main-header-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Menu Items Container - Fixed Width */
body.ast-desktop .main-header-menu > .menu-item {
    position: relative;
}

/* Menu Items - Default State (White Text) */
body.ast-desktop .main-header-menu > .menu-item > .menu-link {
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 20px;
    position: relative;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

/* Menu Link Text - Wrap in span-like behavior for transform */
body.ast-desktop .main-header-menu > .menu-item > .menu-link {
    overflow: visible;
}
body.ast-desktop .main-header-menu > .menu-item > .menu-link .menu-text {
    padding-left: 10px;
}

/* Menu Items - Dark Text on Container Hover */
body.ast-desktop .ast-grid-right-section:hover .main-header-menu > .menu-item > .menu-link,
body.ast-desktop .ast-grid-right-section:has(.menu-item-has-children:hover) body.ast-desktop .main-header-menu > .menu-item > .menu-link {
    color: #1a1a1a !important;
}

/* Yellow Circle Indicator - Positioned to the left */
body.ast-desktop .main-header-menu > .menu-item > a::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 8px;
    height: 8px;
    background-color: TRANSPARENT;
    border-radius: 50%;
    transition: transform 0.3s ease;
    z-index: 10;
    pointer-events: none;
    border-radius: 50%;
    border: 2px solid #F5D547;
}

/* Show Yellow Circle on Hover/Active */
body.ast-desktop .main-header-menu > .menu-item:hover > a::before,
body.ast-desktop .main-header-menu > .menu-item.current-menu-item > a::before,
body.ast-desktop .main-header-menu > .menu-item.current-menu-parent > a::before {
    transform: translateY(-50%) scale(1);
}

/* Text Moves Right using transform (1 second transition) - doesn't affect container width */
body.ast-desktop .main-header-menu > .menu-item > .menu-link {
    transform: translateX(0);
    transition: color 0.2s ease, transform 1s ease;
}

body.ast-desktop .main-header-menu > .menu-item:only-child:hover > .menu-link {
    transform: translateX(25px);
}

/*body.ast-desktop .main-header-menu > .menu-item:hover > .menu-link,
body.ast-desktop .main-header-menu > .menu-item.current-menu-item > .menu-link,
body.ast-desktop .main-header-menu > .menu-item.current-menu-parent > .menu-link {
    transform: translateX(10px);
}*/

/* Hide Default Astra Dropdown Arrow */
body.ast-desktop .ast-header-navigation-arrow,
body.ast-desktop .menu-item .ast-menu-toggle,
body.ast-desktop .main-header-menu .ast-icon {
    display: none !important;
}

/* Remove Astra default underline hover effect */
body.ast-desktop .ast-menu-hover-style-underline .menu-item > .menu-link::after {
    display: none !important;
}

/* ========================================
   Dropdown/Submenu Styles
   ======================================== */

/* Submenu Container */
/*body.ast-desktop .main-header-menu .sub-menu {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 0 0 125px;
    position: absolute;
    min-width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0;
    overflow: hidden;
    height: 60px;
    transition: height 0.4s ease;
    padding: 25px 59px 35px;
	justify-content: space-between;
}*/

/* Position submenu relative to the right section container */
body.ast-desktop .main-header-menu .menu-item-has-children {
    position: relative !important;
}

.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item {
    line-height: 0px;
}

/*body.ast-desktop .ast-builder-menu-1,
body.ast-desktop .ast-main-header-bar-alignment,
body.ast-desktop .main-header-bar-navigation {
    position: static !important;
}*/

body.ast-desktop .astra-megamenu.sub-menu.astra-mega-menu-width-custom::before,
body.ast-desktop .astra-megamenu.sub-menu.astra-mega-menu-width-custom::after {
	content: none;
}

body.ast-desktop .astra-megamenu.sub-menu.astra-mega-menu-width-custom {
	display: flex;
	flex-wrap: wrap;
	row-gap: 8px;
	max-width: var(--desktop-header-width);
	padding: 10px 60px 40px !important;
}

/* Submenu Open State - Height Transition */
/*body.ast-desktop .main-header-menu .menu-item-has-children:hover > .sub-menu {
    padding: 25px 59px 35px;
    width: 602.3px;
    left: -29.5px;
    top: 17px;
    height: 150px;
}*/

/*html[lang="el"] body.ast-desktop .main-header-menu .menu-item-has-children:hover > .sub-menu {
	width: 639.3px;
}*/

/* Submenu Items - 2 Column Layout */
body.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.megamenu-active .astra-megamenu>.menu-item, 
body.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:not([data-megamenu-trigger=click]):hover .astra-megamenu>.menu-item {
	flex-basis: 50% !important;
	margin: 0;
	padding: 0;
}
/*body.ast-desktop .main-header-menu .sub-menu > .menu-item {
    width: calc(50% - 25px);
    list-style: none;
}*/

/*body.ast-desktop .main-header-menu .sub-menu .menu-link {
    color: #1a1a1a !important;
    font-size: 17px;
    font-weight: 500;
    padding: 0 !important;
    display: block;
    transition: color 0.3s ease;
}*/

body.ast-desktop .main-header-menu .sub-menu .menu-link:hover {
    color: #666666 !important;
}

/* Hide SVG Icons in Submenu */
body.ast-desktop .main-header-menu .sub-menu .menu-link .ast-icon {
    display: none !important;
}

/* ========================================
   Get in Touch Button + Arrow Button
   ======================================== */

body.ast-desktop .ast-header-button-1 .ast-builder-button-wrap {
    display: flex !important;
    align-items: center;
    gap: 0;
    z-index: 100;
}

/* Main Yellow Button */
body.ast-desktop .ast-header-button-1 .ast-custom-button-link {
    background-color: #F5D547 !important;
    border: none !important;
    border-radius: 8px 0 0 8px !important;
    padding: 0 !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease;
}

body.ast-desktop .ast-header-button-1 .ast-custom-button {
    white-space: nowrap;
    text-transform: none;
}

body.ast-desktop .ast-header-button-1 .ast-custom-button-link:hover {
    background-color: #e5c63a !important;
}

/* Hide the duplicate menu-link button text */
body.ast-desktop .ast-header-button-1 .menu-link {
    display: none !important;
}

/* Arrow Button - Using ::after pseudo-element */
body.ast-desktop .ast-header-button-1 .ast-builder-button-wrap::after {
    content: '';
    display: block;
    width: 36px;
    height: 36px;
    background-color: #1a1a1a;
    border: 1px solid #F9D342;
    background-image: url(/wp-content/uploads/2026/01/arrow-up-right-1.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    border-radius: 2px;
    transition: background-color 0.2s;
    cursor: pointer;
    margin-left: 4px;
}

body.ast-desktop .ast-header-button-1 .ast-builder-button-wrap:hover::after {
    background-color: #333333;
}

/* ========================================
   Logo Styles
   ======================================== */

.site-branding .custom-logo {
    max-height: 40px;
    width: auto;
}

.site-header-primary-section-left {
    padding-left: 20px;
}

/* ========================================
   Layout Adjustments
   ======================================== */

.ast-builder-grid-row-has-sides {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}

.ast-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* ========================================
   Additional Fixes
   ======================================== */

/* Ensure proper z-index stacking */
.main-header-menu {
    position: static;
    z-index: 100;
}

.main-header-menu .sub-menu {
    z-index: 101;
}

/* Remove any Astra shadows */
.ast-menu-shadow {
    box-shadow: none !important;
}

/* Smooth font rendering */
.site-header * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.steps-title h2 {
    position: relative;
    top: -16px;
    background: #000000;
    display: inline-block;
    padding: 5px 30px 5px 80px;
}

.steps-title h2:before {
    content: '';
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 3px solid #F9D342;
    border-radius:50%;
    margin-right: 8px;
    position: relative;
    top: 2px
}

.steps-title.wb h2 {
    background: #ffffff;
}

.static-container {
    position: relative;
}

.static-content {
    position: sticky;
    top: 100px; /* same as margin-top */
    align-self: flex-start;
}

.solutions--r-item {
    aspect-ratio: 1.708;
        max-width: 560px;
}

/* --- Wrapper & Layout --- */
.dark-cf7-wrapper {
    background-color: #000; /* Matches dark theme */
    color: #fff;
    padding: 20px 0;
    max-width: 800px;
    margin: 0 auto;
    font-family: sans-serif;
}

.cf7-row {
    margin-bottom: 25px;
    width: 100%;
}

.two-col {
    display: flex;
    gap: 20px;
}

.cf7-field {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cf7-field p {
    margin-bottom: 0;
}

/* --- Labels & Inputs --- */
.dark-cf7-wrapper .wpcf7-list-item label {
    margin-bottom: 0;
}

.dark-cf7-wrapper label {
    font-size: 16px;
    display: block;
    color: white;
    margin-bottom: 8px;
}

.dark-cf7-wrapper input[type="text"],
.dark-cf7-wrapper input[type="email"],
.dark-cf7-wrapper input[type="tel"] {
    background: transparent;
    border: 1px solid #555;
    padding: 12px;
    color: #fff;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
}

.dark-cf7-wrapper input:focus {
    border-color: #fff;
    outline: none;
}

/* --- Checkboxes as Buttons (Fields) --- */
.interest-section .wpcf7-list-item {
    display: inline-block;
    margin: 0 10px 10px 0;
}

/* Hide default checkbox */
.interest-section input[type="checkbox"] {
    display: none;
}

/* Style the label as a box */
.interest-section .wpcf7-list-item-label {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #808080;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
    font-size: 14px;
}

/* Checked state (Optional: Highlight on select) */
.interest-section input[type="checkbox"]:checked + .wpcf7-list-item-label {
     border-color: white;
}

/* --- Submit Button & Arrow --- */
/* 1. Main Container: Aligns Button and Arrow side-by-side */
.submit-group {
    position: relative; /* Needed for spinner positioning */
    display: flex;
    align-items: center; /* Vertically center items */
    gap: 0; /* Remove gap so arrow touches button */
    margin-top: 20px;
    width: fit-content; /* Only take up necessary width */
}

/* 2. Handle the P tag that CF7 adds automatically */
.submit-group p {
    margin: 0;
    padding: 0;
    display: contents; /* This makes the P tag "disappear" for layout purposes */
}

/* 3. The Submit Button */
.submit-group input[type="submit"] {
background-color: #ebd96b;
    color: #000;
    border: none;
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    width: auto;
    border-radius: 0;
    text-transform: none;
}

/* 4. The Arrow Box (Created with ::after) */
.submit-group::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin-left: 4px;
    border: 1px solid #ebd96b;
    background-image: url('https://3dpath.p82.app6.srv401.netsteps.net/wp-content/uploads/2026/01/arrow-right-1-1.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    
    cursor: pointer;
    transition: 0.3s;
    box-sizing: border-box;
}

/* Hover Effect */
.submit-group:hover::after {
    background-color: rgba(235, 217, 107, 0.1);
}

/* 5. FIX THE SPINNER: Move it "Last" and out of the way */
.submit-group .wpcf7-spinner {
    position: absolute;
    right: -30px; /* Moves it to the far right, outside the button/arrow group */
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important; /* Override default CF7 margins */
}

.wpcf7 form.invalid .wpcf7-response-output {
    color: white;
}

/* Container Wrapper */
.subscribe-bar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding-bottom: 0;
    background-color: #000;
    max-width: 515px;
    margin: 32px 0;
}

/* Email Input Field */
.sb-email {
    flex-grow: 1; /* Takes up all available space to the left */
    margin-right: 20px;
}

.sb-email input[type="email"] {
    background: transparent;
    border: none;
    color: #fff !important;
    font-size: 18px;
    width: 100%;
    padding-left: 0 !important;
}

/* Placeholder Color */
.sb-email input::placeholder {
    color: #fff;
    opacity: 1; /* Ensures it's fully white */
}

/* Remove Blue Focus Outline */
.sb-email input:focus {
    outline: none;
}

/* Subscribe Button */
.subscribe-bar-wrapper .wpcf7-spinner {
    display: none;
}



.sb-submit input[type="submit"] {
    background-color: #fff;
    color: #000;
    border: none;
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 2px;
    transition: 0.3s;
    text-transform: none;
}

/* Button Hover Effect */
.sb-submit input[type="submit"]:hover {
    background-color: #ddd;
}

.sb-submit p {
    margin-bottom: 12px;
}

.bottom-footer p {
    margin: 0;
}

.industry-small-title {
    position: absolute;
	right: -18px;
    top: 22px;
}

.industry-small-title:after {
    content: '';
    width: 14px;
    height: 14px;
    background: white;
    border: 2px solid #ecd35f;
    margin-left: 8px;
    display: block;
    border-radius: 50%;
    position: absolute;
    right: -22px;
    top: 0;
}

/* ========================================
   Mobile
   ======================================== */

@media (max-width: 921px) {
    .ast-grid-right-section {
        padding: 8px;
        border-radius: 12px;
    }
   .ast-header-button-1 .ast-custom-button {
        padding: 12px 18px;
        font-size: 14px;
    }
    .ast-header-button-1 .ast-builder-button-wrap::after {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    .main-header-menu .sub-menu {
        min-width: 300px;
        padding: 20px 25px 25px;
        gap: 10px 30px;
    }
    .main-header-menu .sub-menu > .menu-item {
        width: 100%;
    }
	.subscribe-bar-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .sb-email, .sb-submit {
        width: 100%;
    }
    .sb-submit input[type="submit"] {
        width: 100%;
    }
	 .two-col {
        flex-direction: column;
        gap: 0;
    }
	.ast-builder-grid-row-has-sides {
		padding: 0;
	}
	.site-header-primary-section-left {
		padding-left: 0;
	}
	.ast-builder-grid-row-has-sides {
    	gap: 0;
	}
	.ast-header-button-1 .ast-custom-button {
		white-space: nowrap;
		text-transform: none;
	}
	.video-hover-play .text-container {
		right: auto;
		left: 10px;
	}
	.video-hover-play.hero-r-container-1 {
    	border-radius: 0!important;
	}
	.video-hover-play.hero-r-container-3 {
		border-radius: 0;
	}
	.video-hover-play.hero-r-container-1,
	.video-hover-play.hero-r-container-2,
	.video-hover-play.hero-r-container-3 {
		    height: 76px;
		border: none;
	}
	.hero-m-b-conainer {
		    border: 1px solid #F9D34280;
		border-radius: 0 320px 300px 0;
		overflow: hidden;
	}
	.steps-title h2 {
		padding: 5px 30px 5px 30px;
	}
	.solutions-r-container:before {
		content: '';
		height: 100%;
		width: 1px;
		display: block;
		background: black;
		position: absolute;
		top: 0;
		left: 36px;
	}
	.industry-small-title {
		right: auto;
		top: auto;
		bottom: -174px;
		left: -53px;
		transform: rotate(270deg);
	}
	.industry-small-title:after {
		width: 12px;
		height: 12px;
		right: -4px;
		top: 18px;
	}
}