/**
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
*/

/* Modal Overlay */
.contact-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.contact-modal-overlay.active {
    display: flex;
}

.contact-modal-container {
    background: white;
    border-radius: 32px;
    width: 60%;
    max-height: 670px;
    overflow-y: auto;
    position: relative;
		padding: 64px;
    animation: modalSlideIn 0.3s ease-out;
	z-index: 1000;
}
.submit-row p {
	margin: 0;
}
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-header h2 {
    margin: 0;
    font-size: 40px;
		line-height:60px;
    font-weight: 400;
    color: #333;
}

.modal-close {
    background: none;
    border: none;
    font-size: 30px;
    color: #666;
    cursor: pointer;
    padding: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
    transform: rotate(90deg);
}
.contact-form-wrapper {
	display: flex;
	flex-direction: column;
	gap:24px;
}

.form-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
}

.contact-info-section h3, 
.social-links h4 {
    margin: 0 0 25px 0;
    font-size: 24px;
	line-height: 40px;
    font-weight: 600;
    color: #333;
}
.contact-info-section{
	    display: flex
;
    flex-direction: column;
    gap: 64px;
}
.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
}

.contact-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-details p, .contact-details a {
    margin: 0;
    color: #666;
    font-size: 16px;
    line-height: 24px;
	font-weight: 400;
}
.social-links h4 {
    margin: 0 0 16px 0;
}
.wpcf7-spinner {
	display: none;
}

.social-icons {
    display: flex;
    gap: 16px;
}

.social-link {
    display: inline-block;
    padding: 8px;
    background: white;
    border-radius: 6px;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.social-icon {
    width: 36px;
    height: 36px;
}

/* Form Fields */
.form-fields-section {
    display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom:0 !important;
}
.form-user-detail, .form-company-detail {
    display: flex;
	flex-direction: column;
	gap: 16px;
}
.field-row p {
	margin: 0;
}
.field-row.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.field-group {
    position: relative;
}
.field-group label{
    font-size: 13px;
	line-height: 20px;
	font-weight: 700;
	color: #666;
}

.field-group input {
    width: 100%;
    padding: 15px 16px;
    border: 2px solid #8C8C8C;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
	
}

.field-group input:focus {
    border-color: #8C8C8C;
}

/* .field-group input:focus + label,
.field-group input:not(:placeholder-shown) + label {
    top: -8px;
    font-size: 12px;
    color: #007cba;
    font-weight: 500;
} */

.submit-btn {
    background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    width: 100%;
    transition: all 0.3s ease;
}

/* .submit-btn:hover {
    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.3);
} */

@media (max-width: 768px) {
    .contact-modal-container {
        margin: 10px auto;
        max-height: 95vh;
			  width: 100%;
			  box-sizing: border-box;
			  padding: 24px 16px;
			  border-radius: 12px;
			  overflow: auto;
    }
	
	  /* Hide the left address section */
    .contact-info-section {
        display: none;
    }
	
	   /* Make form fields full width */
    .form-fields-section {
        width: 100%;
        gap: 16px;
        padding: 0;
        margin-bottom: 0 !important;
    }
	
	   /* Two-column rows become single column */
    .field-row.two-column {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .form-content {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 20px;
    }
    
	  
    .field-row.two-column {
        grid-template-columns: 1fr;
    }
    
    .form-header {
        padding: 20px;
    }
    
    .form-header h2 {
        font-size: 24px;
			  line-height: 32px;
    }
	
	   /* Submit button adjustments */
    .submit-btn {
        padding: 14px 20px;
        font-size: 15px;
    }
}


.ast-narrow-container .site-content {
    background-color: transparent;
    background-image: none;
}

@media (min-width: 922px) {
    .ast-narrow-container .site-content > .ast-container {
        max-width: 1112px;
    }
}


.blog-section .hfe-post-card{
	display: flex;
}


.post-category .elementor-widget-container h5{
	display:  none;
}
.post-category .elementor-widget-container h5{
	display:  none;
}

.post-category .elementor-widget-container .cat-item{
	list-style: none;
	padding: 4px 8px;
	border: 1px solid #8C8C8C;
	border-radius: 8px;
	color: #333;	
}

.post-category .elementor-widget-container nav ul{
	margin: 0;
	display: flex;
	gap: 16px;
}
.post-category .elementor-widget-container .cat-item a{
	color: #333;
}

/* Gradient Text for Elementor Heading */
.gradient-about-text {
  background: linear-gradient(90deg, #4DACFF 30%, #FFA525 50%, #995A00 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important;
  display: inline-block;
}

.site-content .ast-container,
.ast-page-builder-template .site-content > .ast-container, [data-elementor-type="wp-page"]{
	margin-top: 100px !important;
}
/* MAIN WRAPPER */
.humbee-flip-card {
  position: relative;
  width: 100%;
  min-height: 285px;
  height: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
  z-index: 1;
  display: block; /* ✅ Ensures width is applied correctly */
}
.humbee-flip-card::before {
  content: "";
  display: block;
  /* padding-top: 85%; Adjust aspect ratio — try 85% for rectangular card */
}

/* INNER FLIP CONTAINER */
.humbee-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  transform-style: preserve-3d;
  transition: transform 0.8s ease-in-out;
  /* background: linear-gradient(0deg, #ffffff, transparent); */
  border-radius: 16px;
}

/* FLIP EFFECT */
.humbee-flip-card:hover .humbee-flip-inner {
  transform: rotateY(180deg);
}

/* FRONT + BACK COMMON STYLES */
.humbee-flip-front,
.humbee-flip-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  display: flex; /* ✅ Keeps layout stable */
  flex-direction: column;
  box-sizing: border-box;
}

/* FRONT SIDE */
.humbee-flip-front {
  background-image: url(/wp-content/uploads/2025/10/vcp-benefit-card.png);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 32px;
  justify-content: flex-start;
  text-align: left;
  z-index: 3;
  gap:16px;
}

.humbee-icon img {
  width: 64px;
  height: 64px;
}

.humbee-benefit .elementor-icon, 
.humbee-icon img{
    box-shadow:
        1px 1px 1px 0px #FFFFFFCC inset,
        -1px -1px 1px 0px #FFFFFF99 inset,
        1px 1px 6px 0px #FFFFFF33 inset,
        1px 4px 10px 0px #0000001A !important;
    backdrop-filter: blur(50px) !important;
    padding: 8px;
    border-radius: 50% !important;
}


.humbee-flip-front h3 {
  font-size: 24px;
  line-height: 40px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.humbee-flip-front p {
  font-size: 16px;
  color: #333;
  line-height: 24px;
}

/* BACK SIDE */
.humbee-flip-back {
  background: linear-gradient(0deg, #FFF9F0 0%, #FFFFFF 100%);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: cover;
  transform: rotateY(180deg);
  padding: 32px;
  text-align: left;
  justify-content: flex-start;
  z-index: 2;
}

.humbee-flip-back .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #333;
}

.humbee-flip-back .text {
  font-size: 13px;
  line-height: 20px;
  color: #666;
  margin-bottom: 0;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: start;
}

.benefit-item img {
  width: 64px;
  height: 64px;
}


/* I have moved all the css in the theme folder */
  
/*
  Contact Form Input Fields Underlined
   For: Name, Mobile, Email fields only */

input[name="full-name"],
input[name="phone"],
input[name="email"] {
  border: none !important;
  border-bottom: 1px solid #C8C8C8 !important;
  border-radius: 0 !important;
  background: transparent !important;
  width: 100% !important;
  padding: 0px 0 1px 0 !important;   /* keep minimal height */
  font-family: 'Lato', sans-serif !important;
  font-size: 13px !important;
  color: #666666 !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease;
  line-height: 20px !important;
}

/* ↓ just slightly decreased vertical gap */
input[name="full-name"],
input[name="phone"] {
  margin-bottom: 0.5px !important;   /* Name → Mobile → Email */
}

input[name="email"] {
  margin-bottom: 0px !important;     /* Email → Company Name */
}

/* keep focus underline behavior */
input[name="full-name"]:focus,
input[name="phone"]:focus,
input[name="email"]:focus {
  border-bottom: 1.1px solid #000 !important;
  outline: none !important;
}

/* labels remain the same */
.form-user-detail .field-group label {
  display: block;
  font-family: 'Lato', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #666666 !important;
  margin-bottom: 0px !important;
  line-height: 18px !important;
}

/* keep section tight */
.form-user-detail {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* placeholder same */
input[name="full-name"]::placeholder,
input[name="phone"]::placeholder,
input[name="email"]::placeholder {
  color: #999999 !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* lower fields unchanged */
.form-company-detail .field-group input {
  border: 1px solid #BFBFBF !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  background: #fff !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 13px !important;
  color: #333333 !important;
}

/* hover feedback */
input[name="full-name"]:hover,
input[name="phone"]:hover,
input[name="email"]:hover {
  border-bottom: 1px solid #999999 !important;
}

/* Apply underline only to email and phone in Contact Us section */
.elementor-widget-icon-list .elementor-icon-list-item:nth-child(2) .elementor-icon-list-text,
.elementor-widget-icon-list .elementor-icon-list-item:nth-child(3) .elementor-icon-list-text {
  text-decoration: underline;
  text-underline-offset: 3px; /* adjust spacing below text */
}


/* underline for email and phone in contact info */
.form-content .contact-info-section .contact-info .contact-item .contact-details a[href^="mailto"],
.form-content .contact-info-section .contact-info .contact-item .contact-details a[href^="tel"] {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}


/* Target header nav menu items */

/* ===========================
🎯 DESKTOP HEADER STYLING
=========================== */

/* Default header links */
.hfe-nav-menu__layout-horizontal .hfe-menu-item {
  color: #666 !important;
  transition: color 0.3s ease;
}

/* Hover + Active (exclude button) */
.hfe-nav-menu__layout-horizontal .menu-item:not(:last-child) > .hfe-menu-item:hover,
.hfe-nav-menu__layout-horizontal .menu-item:not(:last-child).current-menu-item > .hfe-menu-item {
  color: #333 !important;
}


/* 'Get in Touch' desktop button */
.hfe-nav-menu__layout-horizontal .menu-item:last-child > .hfe-menu-item {
  color: #fff !important;
  background-color: #8a5414 !important;
  border-radius: 10px;
  padding: 10px 24px;
  transition: all 0.3s ease;
	font-family: 'Lato', sans-serif !important;
  font-weight: 600 !important; /* semi-bold */
}

/* Optional hover for desktop button */
.hfe-nav-menu__layout-horizontal .menu-item:last-child > .hfe-menu-item:hover {
  background-color: #70440f !important;
  color: #fff !important;
}

.author-avatar img{
	width: 50px;
	height: 50px;
}

#footer-link a.footer_links{
	font-weight: normal !important;
}
.elementor-button-content-wrapper{
  pointer-events: none;
}
.blog-section .hfe-post-card .hfe-post-image .attachment-thumbnail{
	border-radius: 16px !important ;
} 

/* ✅ MOBILE FIXES */
@media (max-width: 768px) {
    
    .site-content .ast-container,
    .ast-page-builder-template .site-content > .ast-container, [data-elementor-type="wp-page"]{
        margin-top: 70px !important;
    }
  .humbee-flip-card {
    width: 100% !important; /* ✅ Prevents collapse */
    min-height: 260px;
    min-width: 188px;
  }

    .humbee-flip-inner {
            width: 100%;
            height: 100%;
            min-height: 260px;
            /* background: linear-gradient(0deg, #FFF9F0 0%, #FFFFFF 100%); */
            
    }
    .humbee-flip-inner .humbee-flip-front{
        height: 100%;
    }
    .humbee-flip-inner .humbee-flip-back{
        background: linear-gradient(0deg, #FFF9F0 0%, #FFFFFF 100%);
        height: 100%;
    }

    .humbee-flip-front,
    .humbee-flip-back {
        width: 100%;
        height: auto;
        padding: 16px !important;
        border-radius: 12px;
    }

    .humbee-flip-front h3 {
        font-size: 20px;
        line-height: 32px;
    }

    .humbee-flip-front p,
    .humbee-flip-back .text {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 0;
    }

    .humbee-flip-back .title {
        font-size: 13px;
        line-height: 20px;
    }

    .humbee-icon img {
        width: 55px;
        height: 55px;
    }

    .benefit-item img {
        width: 36px;
        height: 36px;
    }

    .benefits-list {
        gap: 8px;
    }
    .benefit-item {
        display: flex;
        align-items: start;
        gap: 4px;
        justify-content: start;
    }
    .blog-section .hfe-post-card{
        flex-direction: column !important;
    }
    .hfe-creative-menu .menu-item:last-child {
            margin-right: 16px !important;
            margin-left: 16px !important;
    }
    .hfe-nav-menu .menu-item:last-child {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}
@media (max-width: 400px) {
    .humbee-flip-card {
        width: 100% !important;
        min-height: 260px;
        min-width: 165px;
    }
    .humbee-flip-front, .humbee-flip-back {
        padding: 8px !important;
    }
    .ehf-header.on-dark .main-header .hfe-menu-item {
        color: #666 !important;
    }
}
.post-category .elementor-widget-container nav ul li a{
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.profile-image img{
    width: auto !important;
}
.profile-content .elementor-icon-wrapper{
    display: flex;
}
.ehf-header.on-dark .main-header .hfe-menu-item {
  color: #fff !important;
}

.blog-tags .premium-tcloud-term-wrap .premium-tcloud-term, .media-blog-tags .media-blog-tag-wrapper{
    padding: 6px 12px;
    border: 1px solid #8C8C8C;
    border-radius: 8px;
    color: #333;
}
.blog-tags .premium-tcloud-term-wrap a, .media-blog-tags .media-blog-tag-wrapper a{
    font-family: "Lato", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 24px;
    pointer-events: none;
    cursor: default;
    color: #333;
    text-decoration: none;
}
.blog-section .media-blog-tags .media-blog-tag-wrapper{
    padding: 2px 14px;
}
.blog-section .media-blog-tags .media-blog-tag-wrapper a{
    font-size: 13px;
}

.blog-section .blog-tags .hfe-post-tags {
    display: flex;
}
.blog-section .media-blog-tags {
    display: flex;
    gap: 16px;
}
.blog-section .hfe-post-card{
    gap: 16px;
    padding-bottom: 16px;
    border-radius: 0 !important;
    border-bottom:  1px solid #D9D9D9;
}
.blog-section .hfe-post-content{
    padding: 0 !important;
}
.blog-section .hfe-post-meta{
    margin-bottom: 0 !important;
}

.blog-section .hfe-post-content{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.blog-section .hfe-post-content .hfe-post-title{
    margin-bottom: 0 !important;
}
.blog-section .hfe-post-image a img{
    width: 172px;
    height: 112px;
}

.hfe-post-meta .hfe-post-date{
    font-family: "Lato", Sans-serif;
    font-size: 16px;
    color: #666;
    font-style: normal;
    line-height: 24px;
}
.blog-cover-image img{
    border-radius: 16px !important;
}

.footer-bottom a{
    font-size: 13px !important;
    color: #666 !important;
    line-height: 24px !important;
}

.contact-block-bottom {
    scroll-margin-top: 200px !important; /* adjust to your header height */
    padding-top: 200px !important;
    margin-top: -200px !important;
}
.humbee-news-load-more {
    z-index: 99;
    position: relative;
}