/**
Theme Name: Theme In Between
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: theme-in-between
Template: astra
*/

/* Set the gradient background for .site-content and add the image with opacity for all pages */
.site-content {
    background: linear-gradient(to bottom, #efefef, #89a6c1), url('https://inbetweenbyelena.com/wp-content/uploads/2025/04/Home-page-image.jpg');
    background-size: cover; /* Ensure both the gradient and image cover the container */
    background-position: center; /* Center both the gradient and image */
    background-attachment: fixed; /* Keeps the background fixed while scrolling */
    background-repeat: no-repeat; /* Prevent repeating the background image */
    opacity: 0.7; /* Set opacity for the background image */
}

/* Set the gradient background for body.home and add the image with opacity */
body.home {
    background: linear-gradient(to bottom, #efefef, #89a6c1), url('https://inbetweenbyelena.com/wp-content/uploads/2025/04/Home-page-image.jpg');
    background-size: cover; /* Ensure both the gradient and image cover the container */
    background-position: center; /* Center both the gradient and image */
    background-attachment: fixed; /* Keeps the background fixed while scrolling */
    background-repeat: no-repeat; /* Prevent repeating the background image */
    opacity: 1; /* Ensure full opacity for gradient */
}

/* Specific background for the About page */
body.page-id-776 .site-content {
    background-color: #A0BDCC; opacity: 0.7 /* Simple background color for the About page */
    background-image: none; /* Remove the image background */
    opacity: 1; /* Full opacity for solid color background */
}
/* Specific background for the Section page */
body.page-id-635 .site-content {
    background-color: #A0BDCC; opacity: 0.7 /* Simple background color for the About page */
    background-image: none; /* Remove the image background */
    opacity: 1; /* Full opacity for solid color background */
}


/* Media query to prevent fixed background on smaller screens */
@media (max-width: 1024px) {
    body.home {
        background-attachment: scroll; /* Prevents the background from being fixed on mobile */
    }
}


/* Set the gradient background for body.home and add the image with opacity */
body.home {
    background: linear-gradient(to bottom, #efefef, #89a6c1), url('https://inbetweenbyelena.com/wp-content/uploads/2025/04/Home-page-image.jpg');
    background-size: cover; /* Ensure both the gradient and image cover the container */
    background-position: center; /* Center both the gradient and image */
    background-attachment: fixed; /* Keeps the background fixed while scrolling */
    background-repeat: no-repeat; /* Prevent repeating the background image */
    opacity: 1; /* Ensure full opacity for gradient */
}

/* Media query to prevent fixed background on smaller screens */
@media (max-width: 1024px) {
    body.home {
        background-attachment: scroll; /* Prevents the background from being fixed on mobile */
    }
}
/* MENUS FORMATTING */
/* Normal state for menu links */
.main-header-menu > .menu-item > .menu-link {
    color: #21465b; /* Your original normal text color */
    font-family: 'Tenor Sans', sans-serif;
    font-size: 20px;
    font-weight: normal; /* Ensure text is not bold */
    text-decoration: none; /* Remove underline */
    position: relative;
    padding: 4px 12px; /* Reduced padding to make the box smaller */
    display: inline-block;
    padding-bottom: 2px; /* Padding below text */
    padding-top: 4px; /* Padding above text */
    transition: background-color 0.3s ease; /* Smooth background transition */
}

/* Hover effect */
.main-header-menu > .menu-item > .menu-link:hover {
    color: #2197bd; /* Text color on hover */
    background-color: #e8e5e5; /* Background color on hover */
    padding-top: 4px; /* Adjust padding on hover */
    padding-bottom: 4px; /* Adjust padding on hover */
}

/* Active (current page) effect */
.main-header-menu > .menu-item.current-menu-item > .menu-link {
    color: #2197bd; /* Text color for active link */
    background-color: #e8e5e5; /* Same background color as hover to indicate active page */
    padding-bottom: 4px; /* Consistent padding */
}

/* Underline effect for hover (blue line on the bottom) */
.main-header-menu > .menu-item > .menu-link::after {
    content: ''; /* Empty content to create the line */
    position: absolute;
    bottom: 0; /* Position the line at the bottom of the menu item */
    left: 0;
    width: 0%; /* Initially the width is 0, meaning the line is hidden */
    height: 2px; /* Height of the underline */
    background-color: #2197bd; /* The blue color of the underline */
    transition: width 0.3s ease; /* Smooth transition for the underline appearing */
}

/* Make the underline appear on hover */
.main-header-menu > .menu-item > .menu-link:hover::after {
    width: 100%; /* On hover, the width expands to full length */
}

/* Remove outline when clicking on menu items (Focus state) */
.main-header-menu > .menu-item > .menu-link:focus {
    outline: none !important; /* Removes focus outline (line) */
}

/* Remove border and box-shadow on click (active state) */
.main-header-menu > .menu-item > .menu-link:active {
    border: none !important;
    box-shadow: none !important;
}

/* Adjust padding for the container of social media icons to fit better */
/* Social media icons container */
.ast-builder-social-element.ast-inline-flex {
    padding: 4px; /* Reduced padding around the social media icons */
    margin: 0; /* Remove any margins */
}

/* Active state for the icons */
a.ast-builder-social-element.ast-inline-flex.header-social-item[aria-label="LinkedIn"] svg,
a.ast-builder-social-element.ast-inline-flex.header-social-item[aria-label="Instagram"] svg {
    width: 40px;
    height: 30px;
    padding: 4px; /* Reduced padding to reduce the box around the icons */
    transition: fill 0.3s ease; /* Smooth transition for color change */
}

/* Hover effect for social media icons */
/* Change icon color on hover */
a.ast-builder-social-element.ast-inline-flex.header-social-item[aria-label="LinkedIn"]:hover svg,
a.ast-builder-social-element.ast-inline-flex.header-social-item[aria-label="Instagram"]:hover svg {
    fill: #2197bd;
}

/* Remove dotted outline on click/focus */
a.ast-builder-social-element.ast-inline-flex.header-social-item[aria-label="LinkedIn"]:focus,
a.ast-builder-social-element.ast-inline-flex.header-social-item[aria-label="Instagram"]:focus {
    outline: none;
    box-shadow: none;
}

body.page-id-3 #astra-footer-menu a {
    fill: #21465b !important;
    color: #21465b !important;
}


/* Target Astra social icon colors on page ID 3 */
body.page-id-3 .wp-block-social-links .wp-block-social-link a,
body.page-id-3 .wp-block-social-links .wp-block-social-link svg,
body.page-id-3 .wp-block-social-links .wp-block-social-link path {
    color: #21465b !important;
    fill: #21465b !important;
}

@media only screen and (max-width: 1024px) {
    /* Your existing mobile styles ... */

    /* Keep your existing .main-header-menu rules as they are */

    /* === Add these for the hamburger icon color and hover === */

    /* Target the menu toggle button itself */
    button.menu-toggle,
    button.menu-toggle:focus,
    button.menu-toggle:active {
        color: #1A3B4D !important;
        fill: #1A3B4D !important;
    }

    /* Target SVG or icon inside the button */
    button.menu-toggle svg,
    button.menu-toggle i {
        fill: #1A3B4D !important;
        color: #1A3B4D !important;
    }

    /* Hover and focus states */
    button.menu-toggle:hover,
    button.menu-toggle:focus:hover,
    button.menu-toggle:active:hover {
        color: #2197BD !important;
        fill: #2197BD !important;
    }

    button.menu-toggle:hover svg,
    button.menu-toggle:focus:hover svg,
    button.menu-toggle:active:hover svg,
    button.menu-toggle:hover i,
    button.menu-toggle:focus:hover i,
    button.menu-toggle:active:hover i {
        fill: #2197BD !important;
        color: #2197BD !important;
    }
}


/* Footer menu mobile layout improvements */
@media only screen and (max-width: 768px) {
  .ast-footer-menu-wrap {
    text-align: center;
  }

  .ast-footer-menu-wrap ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0;
  }

  .ast-footer-menu-wrap ul li {
    display: inline-block;
    margin: 4px 0;
  }

  .ast-footer-menu-wrap ul li a {
    font-size: 16px;
    color: #21465b;
  }

  .ast-footer-menu-wrap ul li a:hover {
    color: #2197bd;
  }
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
  .footer-widget-area .widget_social,
  .footer-widget-area .widget {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Modify Footer Menu Layout to Left Align and Keep Horizontal */
#astra-footer-menu {
    display: flex;
    justify-content: flex-start; /* Align menu items to the left */
    gap: 15px; /* Add space between the items */
    padding: 4px 12px; /* Adjust padding to reduce the space around the footer menu items */
    flex-wrap: wrap; /* Allows the items to wrap to a new line on smaller screens */
}

/* Apply Flex properties to the menu links inside the footer */
#astra-footer-menu > .menu-item > .menu-link {
    display: inline-flex;
    align-items: center; /* Center the text inside each menu item vertically */
    padding: 4px 12px; /* Adjust padding to reduce the space around each menu item */
    text-decoration: none; /* Optional: Remove underline */
    color: #21465b; /* Set footer menu text color same as header menu */
    font-family: 'Tenor Sans', sans-serif; /* Apply the same font as header menu */
    font-size: 16px; /* Same font size as header menu */
    font-weight: normal; /* Ensure font weight matches the header menu */
}

/* Footer Menu Text Color - Matching Header Menu Color */
#astra-footer-menu .menu-item .menu-link {
    color: #21465b; /* Same color as header menu links */
}

/* Change hover color in footer menu */
#astra-footer-menu .menu-item .menu-link:hover {
    color: #2197bd; /* Same hover color as header menu */
}

/* Ensure that on mobile, the footer menu remains left aligned */
@media only screen and (max-width: 1024px) {
    #astra-footer-menu {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
        justify-content: flex-start; /* Left align the items */
        gap: 10px; /* Space between items */
    }

    #astra-footer-menu > .menu-item > .menu-link {
        display: block; /* Stack the items vertically on mobile */
        padding: 10px 12px; /* Adjust padding for touch accessibility */
        width: auto; /* Allow the items to wrap and occupy full width */
        margin: 5px 0; /* Add margin to space out the links */
    }
}

/* Keep Header Menu Styling Unchanged */
.main-header-menu > .menu-item > .menu-link {
    height: 100%;
    align-items: center;
    display: flex;
}

.elementor-584 .elementor-element.elementor-element-452d075 img {
    height: 300px;
    opacity: 1;
    filter: brightness(110%); /* Adjust the brightness here */
}
.elementor-widget-container h5,
.elementor-widget-container nav a {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 20px;
    font-weight: 600; /* Semi-bold */
    line-height: 1.5em;
    color: #21465B;
}
input.search-submit {
    display: none !important;
}
/* CUSTOM CONTACT FORM 7 */

/* === LABEL STYLING === */
.wpcf7 label {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 20px;
    color: #21465B;
    font-weight: bold;
}

/* === INPUT FIELDS & TEXTAREA === */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    font-family: 'Lora', serif;
    font-size: 16px;
    font-weight: 300;
    color: #333333;
    /* compact spacing & dimensions */
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 14px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* === TEXTAREA HEIGHT REDUCED === */
.wpcf7 textarea {
    height: 100px;
    resize: vertical;
}

/* === FOCUS STATES === */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
    border-color: #21465B;
    outline: none;
}

/* === PRIVACY CHECKBOX STYLING === */
.privacy-wrapper label {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 20px;
    color: #21465B;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

/* Checkbox input alignment */
.privacy-wrapper input[type="checkbox"] {
    margin: 0 8px 0 0;
}

/* === PRIVACY POLICY BOLD & LINKED TEXT === */
.privacy-wrapper label {
    display: inline-flex;
    align-items: center;
}

.privacy-wrapper label::after {
    content: " ";
    font-weight: normal;
    font-size: 18px;
}

/* Make Privacy Policy link bold */
.privacy-wrapper label strong {
    font-weight: bold;
}

/* Make the Privacy Policy text a clickable link */
.privacy-wrapper a {
    font-weight: normal;
    color: #21465B;
    text-decoration: underline;
    font-size: 16px; /* Match font size with other form elements */
}

/* === SUBMIT BUTTON STYLING === */
.wpcf7 input[type="submit"] {
    display: block;
    margin: 24px auto 0 auto; /* reduced top margin */
    font-family: 'Tenor Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 0.5em;
    text-align: center;
    color: #21465B;
    background-color: #EFEFEF;
    border: 1px solid #EFEFEF;
    border-radius: 100px;
    padding: 12px 48px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: none;
    cursor: pointer;
    max-width: 100%;
    box-sizing: border-box;
}

/* === BUTTON HOVER === */
.wpcf7 input[type="submit"]:hover {
    background-color: #2197BD;
    color: #ffffff;
    border-color: #2197BD;
}

/* REMOVE HOME*/
.home .entry-title {
    display: none;
}
.page-id-984 .entry-title {
    display: none;
}
.page-id-981 .entry-title {
    display: none;
} 
.page-id-631 .entry-title{
	  display: none;
}
.page-id-633 .entry-title{
	display: none;
}
.page-id-966 .entry-title{
	display: none;
}
.page-id-3 .entry-title{
	display: none;
}


/*NAVIGATION IN POST*/
/* Style Previous and Next post navigation links */
.navigation.post-navigation .nav-links a {
  color: #21465B !important;
  text-decoration: none !important;
}

.navigation.post-navigation .nav-links a:hover {
  color: #2197BD !important;
}