/*
Theme Name: my-twenty-twenty-five
Theme URI: 
Author: Markus Petroff
Author URI: 
Description: My modifications to twenty twenty five wp theme.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: my-twenty-twenty-five
Tags: 
*/



.woocommerce-products-header {
    display: block !important;
    visibility: visible !important;
}



html {
    scroll-behavior: smooth;
}

/* Site Header */
.site-header {
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: #FFFFFF; /* Bright Metallic White */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); /* Darker shadow */
    z-index: 1000;
    transition: top 0.3s ease, opacity 0.3s ease;
}

/* Hidden Header */
.site-header.hidden {
    top: -100px; /* Adjust value to match header height */
}




/*media break point */
/* Set your custom breakpoint, e.g., 820px */
@media (max-width: 1040px) {
    /* Ensure the body or container has no unintended margins or paddings */
    body, .container {
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    /* Hide the regular navigation */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }

    /* Show the burger menu icon */
    .wp-block-navigation__responsive-container-open {
        display: block !important;
        position: relative; /* Ensure it stays in place */
        left: 0; /* Aligns it to the left */
    }

    /* Optional: Add padding or margin adjustments if needed */
    .wp-block-navigation__responsive-container {
        padding-left: 0; /* Remove any extra padding causing the shift */
        padding-right: 0;
    }
}

/* Ensure the regular navigation is shown and the burger menu is hidden above the breakpoint */
@media (min-width: 1041px) {
    /* Show the regular navigation */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: flex; /* or block depending on your theme layout */
    }

    /* Hide the burger menu icon */
    .wp-block-navigation__responsive-container-open {
        display: none;
    }
}

/* divider */
.is-separator-wide {
    border: none; /* Remove the default border */
    height: 4px; /* Make the line thicker */
    background-color: #333; /* Solid color for the line */
    border-radius: 2px; /* Slight rounding for a smoother look */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1); /* Shadow effect */
    margin-top: 20px; /* Space above */
    margin-bottom: 20px; /* Space below */
}

.is-separator-shadow{
    height: 8px; /* Line thickness remains for shadow sizing */
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1), 0 5px 3px rgba(0, 0, 0, 0.1); /* Shadow effect */
    margin-top: 20px; /* Space above */
    margin-bottom: 20px; /* Space below */
}
.is-separator-shadow-top{
    height: 8px; /* Line thickness remains for shadow sizing */
    box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.1), 0 -5px 3px rgba(0, 0, 0, 0.1); /* Shadow effect */
    color: transparent;
    background-color:transparent;
    margin-top: 20px; /* Space above */
    margin-bottom: 20px; /* Space below */
}

.is-separator-accent {
    height: 4px; /* Line thickness */
    background: linear-gradient(
        90deg,
        rgba(184, 115, 51, 1) 0%,  /* Copper base tone */
        rgba(239, 165, 89, 1) 25%, /* Highlight tone */
        rgba(184, 115, 51, 1) 50%, /* Base tone */
        rgba(239, 165, 89, 1) 75%, /* Highlight tone */
        rgba(184, 115, 51, 1) 100% /* Base tone */
    ); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    border-radius: 2px; /* Softens the edges */
    margin-top: 20px; /* Space above */
    margin-bottom: 20px; /* Space below */
    width: 60%;
}

.is-separator-narrow{
    width: 20%;
}



/* Main Navigation Item Styling */
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content {
    position: relative; /* For the underline animation */
    color: #333333; /* Default text color */
    display: inline-block; /* Keeps the text width aligned with the content */
    box-sizing: border-box; /* Ensures padding and border are included in element size */
    margin: 0; /* No extra margin */
    text-decoration: none; /* Remove any default underline */
    border: 2px solid transparent; /* Default transparent border */
    transition: color 0.3s ease, border 0.3s ease; /* Smooth transition for text color and border */
}

/* Add Background Box Using ::before */
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content::before {
    content: ''; /* Empty content for the background box */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent; /* Default background (transparent) */
    z-index: -1; /* Ensure the background stays behind the text */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for background color */
}

/* Hover Effect for Main Navigation Items */
.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    color: #FFFFFF; /* White text color on hover */

}

/* Hover Effect for Background Box */
.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content::before {
    background-color: #EAAB4C; /* light Copper background on hover */
    transform: scaleX(1.35) scaleY(2.8); /* Scale the background box */
}
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content::before {
    background-color: transparent; /* Dark Copper background on hover */
    transform: scaleX(1.0) scaleY(2.8);  /* Scale the background box */
}

/* White Line Animation within the Background Box */
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content::after{
    content: ''; /* Empty content for the underscore */
    position: absolute;
    bottom: -5px; /* Move the line 6px up to sit inside the background box */
    left: 0;
    width: 0%; /* Initially, the line has no width */
    height: 3px; /* Bold thickness of the line */
    background-color: #FFFFFF; /* White color for the line */
    transition: width 0.3s ease-in-out; /* Animate the width */
}

/* On Hover: Show the Animated White Line */
.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
    width: 100%; /* Full width of the text */
}


.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
    background-color: transparent; /* Dark Copper background on hover */
    transform: none !important; /* Ensure no scaling for submenu items */
}


/* Submenu (Secondary Navigation) - Override Hover Behavior */
.wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
    color: #FFFFFF; /* White text color on hover */
    background-color: #D0A16D; /* Dark Copper background on hover */
    transform: none; /* Remove scaling effect on hover */
}

/* Submenu White Line Animation (Secondary Navigation) */
.wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: ''; /* Empty content for the underscore */
    position: absolute;
    bottom: -1px; /* Move the line 6px up to sit inside the background box */
    left: 0;
    width: 0%; /* Initially, the line has no width */
    height: 3px; /* Bold thickness of the line */
    background-color: #FFFFFF; /* White color for the line */
    transition: width 0.3s ease-in-out; /* Animate the width */
}

/* On Hover: Show the Animated White Line for Submenu Items */
.wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
    width: 100%; /* Full width of the text */
}


/* Default state: Arrow color remains the default */
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
    color: #333333; /* Default color (dark gray) */
    transition: color 0.3s ease; /* Smooth color transition */
     margin-left: -8px;
}

/* Apply hover color change when the parent item is hovered */
.wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon svg {
    color: white; /* White color on hover */
}


/* Submenu (Secondary Navigation) Styling */
.wp-block-navigation .wp-block-navigation__submenu-container {
    position: absolute; /* Ensures the submenu is positioned relative to its parent */
    top: 100%; /* Moves the submenu directly below the main menu item */
    right: 0%; /* Aligns the submenu with the left edge of the parent item */
    margin-top: 10px; /* Adjusts vertical spacing between the menu item and submenu */
    display: none; /* Initially hides the submenu */
    width: auto; /* Adjusts the width to fit content */
    z-index: 999; /* Ensures the submenu stays above other content */
}

/* Remove the outline from main navigation items */
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content:active {

    /*color: #FFFFFF; /* White text color */
    outline: none; /* Remove the outline box */
}


/* Default navigation item style */
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content {
    color: #333; /* Default color */
    background-color: transparent; /* Default background */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover effect */
.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    color: #fff; /* White text on hover */
}


/* Active Menu Item Styling */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before {
    color: #FFFFFF; /* White text for the active item */
    background-color: #D0A16D; /* Bright copper background for the active item */
    transform: scaleX(1.35) scaleY(2.8); /* Match the hover scaling effect */
    border: 2px solid transparent; /* To keep the consistent border style */
}

.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    color: #FFFFFF ; /* White text for the active item */
}

.wp-block-navigation.is-open .wp-block-navigation-item > .wp-block-navigation-item__content {
    color: #333333; /* Default color for other items in the open mobile menu */
}

/* Remove the underline effect for active items */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
    width: 100%; /* No underline for active items */
}



/* Ensure submenu items do not inherit the main active state styles */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    color: #333333; /* Default dark text for submenu active items */
    background-color: transparent; /* Transparent background for submenu active items */
}





/*----------------------------------------------
/* Style css for contact form 7 - contact us */

/* General Form Container Styling */
.wpcf7 form {
    background: linear-gradient(135deg, #f4f4f4 0%, #c7b69e 60%, #d0a06b 100%); /* Lighter copper on bottom right */
    color: #2a2a2a; /* Dark grey text for contrast */
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #b0a38d; /* Light copperish border for elegance */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for a modern, elegant effect */
}

/* Heading Text Color */
.wpcf7 h1, .wpcf7 h2, .wpcf7 h3, .wpcf7 h4, .wcf7 h5, .wpcf7 h6 {
    color: #2a2a2a; /* Dark grey for headings to contrast with the light background */
}

/* Input Fields Styling */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    background-color: #fafafa; /* Soft off-white background for input fields */
    color: #2a2a2a; /* Dark grey text to match the overall text color */
    border: 1px solid #c1b8a4; /* Light copper border for inputs */
    padding: 10px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1px;
}

.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 input[type="tel"]::placeholder,
.wpcf7 textarea::placeholder {
    color: #b0a38d; /* Light copper placeholder text */
}

/* Input Focus State */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
    background-color: #f1f1f1; /* Slightly lighter grey background on focus */
    border-color: #d0bb95; /* Softer copper border when focused */
    outline: none; /* Remove default outline */
}

/* Submit Button Styling */
.wpcf7 input[type="submit"] {
    background-color: #9e7b56; /* Darker copper for the button */
    color: #ffffff; /* White text */
    border: none;
    padding: 12px 20px;
    border-radius: 25px; /* Rounded button */
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
    background-color: #8c6a4b; /* Slightly lighter copper on hover */
    color: #ffffff; /* White text */
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.2); /* Subtle glow effect */
}

/* Error Messages */
.wpcf7 .wpcf7-response-output {
    background-color: #fafafa; /* Off-white background for error message */
    color: #ff4d4d; /* Red for errors */
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
    border: 1px solid #ff4d4d;
}

/* Success Messages */
.wpcf7 .wpcf7-mail-sent-ok {
    background-color: #7a5c36; /* Off-white background for success message */
    color: #4dff88; /* Green for success */
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
    border: 1px solid #4dff88;
}


/* Ensures the label associated with the checkbox also appears on a new line */
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item {
    display: block; /* Make each label take up the full width */
    margin-bottom: 10px; /* Optional: space between labels */
}


/* Reduces the height of the textarea */
.wpcf7-form-control.wpcf7-textarea {
    height: 100px; /* Adjust this value as needed */
    resize: vertical; /* Optional: Allows vertical resizing only */
    padding: 10px; /* Optional: Adjust padding for more compactness */
}


/* General form container styling */
.contact-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Two equal columns */
    gap: 1px 10px; /* Horizontal gap: 20px, Vertical gap: 10px */
}

/* Full-width fields span both columns */
.contact-form .full-width {
    grid-column: span 3; /* Spans both columns */
}

/* Field labels for consistent styling */
.contact-form label {
    display: block; /* Ensures consistent block layout */
}



/* Make form responsive */
@media screen and (max-width: 1041px) {
    .contact-form {
        grid-template-columns: 1fr; /* Single column layout on smaller screens */
        gap: 15px; /* Smaller gap for mobile */
    }
    .contact-form .full-width {
        grid-column: span 1; /* Default full-width behavior for mobile */
    }
}









/* css for work status field */

/* General styling for the work-status block */
.work-status {
    background-color: #f4f4f4; /* Subtle light gray background for the block */
    border-radius: 10px; /* Rounded corners for a modern look */
    padding: 15px; /* Padding inside the block */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for a modern, elegant effect */
    display: flex; /* Flexbox to align items horizontally */
    align-items: center; /* Center items vertically */
    max-width: 400px; /* Set a maximum width to control the size */
    margin: 20px auto; /* Center the block horizontally with margin */
}

/* Styling for the status label (e.g., 'Status:') */
.work-status .status-label {
    color: #2a2a2a; /* Dark gray text for contrast */
    font-size: 18px; /* Slightly larger text size */
    margin-right: 10px; /* Space between label and status */
}

/* Styling for the status itself (e.g., 'Available') */
.work-status .status-value {
    background-color: #d0a06b; /* Soft copper color for the status */
    color: #ffffff; /* White text color for contrast */
    padding: 10px 20px; /* Padding inside the status block */
    border-radius: 5px; /* Rounded corners */
    font-size: 18px; /* Font size matching the label */
    font-weight: bold; /* Bold text for emphasis */
    flex-grow: 1; /* Ensure the status block grows to fill the space */
    text-align: center; /* Center text inside the status block */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}

/* Hover effect for the status block */
.work-status .status-value:hover {
    background-color: #b78c4a; /* Slightly darker copper on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover for a 'pop' effect */
}




/* sonar filter panels */
/* General styling for the filter-details */

/* General Styling for the <details> block */
.wp-block-details.filter-details {
  background: linear-gradient(135deg, #f1f1f1 40%, #dcdcdc 100%); /* Subtle metallic gradient, light grey at the top, slightly darker metallic grey at the bottom */
  color: #1a1a1a; /* Dark text for corporate look */
  padding: 15px;
  border-radius: 15px; /* Rounded corners for a sleek design */
  border: none; /* No border for a clean appearance */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for interactivity */
}

/* Styling for the summary within the <details> block */
.wp-block-details.filter-details summary {
  font-size: 18px;
  font-weight: bold;
  color: #1a1a1a; /* Ensure contrast against the gradient */
  cursor: pointer; /* Pointer cursor for interactivity */
  outline: none; /* Remove default outline for a cleaner look */
  transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover effect for the summary */
.wp-block-details.filter-details summary:hover {
  color: #1F1F1F; /* Slightly darker text on hover */
}

/* Expanded content within the <details> block */
.wp-block-details.filter-details > .srp-tags-widget {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  padding-top: 0;
  padding-bottom: 0;
}

/* Expanded state */
.wp-block-details.filter-details[open] > .srp-tags-widget {
  max-height: 400px; /* Adjust as needed for content */
  padding-top: 10px; /* Provide spacing for expanded content */
  padding-bottom: 10px;
}

/* Text content inside the expanded area */
.wp-block-details.filter-details > .srp-tags-widget p {
  margin: 0;
  line-height: 1.6;
  color: #1a1a1a; /* Match dark text color for a cohesive style */
}

/* Add a subtle shadow for a modern business look */
.wp-block-details.filter-details {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.srp_filter_container .srp_filter_buttons_list li .srp_filter_button:hover:not(.srp_filter_button--active) {
    color: #1F1F1F; /* Dark text on hover */
}



/* Styling for filter buttons */
.srp_filter_container .srp_filter_buttons_list li .srp_filter_button {
  border: solid 1px #A9A9A9; /* Desaturated silver for the border */
  color: #1F1F1F; 
  background-color: #dcdcdc; /* Desaturated metallic copper for a more subtle look */
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 8px;
  font-family: Open Sans;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Hover effect for filter buttons */
.srp_filter_container .srp_filter_buttons_list li .srp_filter_button:hover {
  border-color: #ECDCC7; /* Copper-inspired border */
  color: #1F1F1F; /* Dark text on hover */
  background-color: #F0DABE; /* Copper for the background */
  border: solid 1px #A9A9A9; /* Desaturated silver for the border */
}

/* Active state for filter buttons */
.srp_filter_container .srp_filter_buttons_list li .srp_filter_button.srp_filter_button--active {
  background-color: #CFC1AD; /* Copper-inspired active state */
  color: #1F1F1F; /* dark text for contrast */
}

/* Styling for chips */
.srp_chips .srp_chip {
  color: #1F1F1F; /* Dark font for clear contrast */
  background-color: #CFC1AD; /* Desaturated metallic copper background */
  border: 1px solid #b9b9b9; /* Subtle desaturated border */
  font-family: Roboto;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Smooth transition */
}

/* Hover effect for chips */
.srp_chips .srp_chip:hover {
  background-color: #F0DABE; /* Lighter and desaturated copper for hover */
  color: #1F1F1F; /* dark text on hover */
  border-color: #FDDEB6; /* Matching border color for hover */
}

/* Active state for selected chips */
.srp_chips .srp_chip.srp_chip--active {
  background-color: #CFC1AD; /* Brighter, more saturated copper when active */
  color: #1F1F1F; 
  border: 1px solid #b9b9b9; /* Subtle desaturated border */
}

.srp_chips {
  min-height: 40px;
}

/* Filters dropdown styling */
.srp-filters-container .multiselect__option, 
.srp-filters-container .multiselect__tags, 
.srp-filters-container .multiselect, 
.srp-filters-container .multiselect__input, 
.srp-filters-container .multiselect__single {
  color: #1F1F1F; /* dark desaturated text */
  background-color: #6B6B6B; /* Slightly brighter dark silver for input fields */
  font-family: Roboto;
}

.srp-filters-container .multiselect__option:hover, 
.srp-filters-container .multiselect__tags:hover, 
.srp-filters-container .multiselect__input:hover, 
.srp-filters-container .multiselect__single:hover {
  background-color: #dcdcdc; /* Copper-inspired hover state */
  color: #1F1F1F;
}

.srp-filters-container .multiselect__content-wrapper {
  color: #1F1F1F; /*dark text*/
  background-color: #dcdcdc; /* Slightly brighter dark silver */
}

/* Range slider styling */
.srp_range_wrapper .srp_range_container {
  color: #1F1F1F; 
  background: linear-gradient(135deg, #f1f1f1 40%, #dcdcdc 100%); /* Subtle metallic gradient, light grey at the top, slightly darker metallic grey at the bottom */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */

  font-family: Roboto;
  border-radius: 8px;
}

.srp_range_wrapper .srp_range_container .vue-slider-process {
  background-color: #838383; /* Dark background for the slider process */
}

.srp_range_wrapper .srp_range_container .srp_range_buttons .srp_filter_button {
  color: #1F1F1F; /* Dark font for clear contrast */
  background-color: #dcdcdc; /* Desaturated metallic copper background */
  border: 1px solid #b9b9b9; /* Subtle desaturated border */
  font-family: Roboto;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Smooth transition */
}
.srp_range_wrapper .srp_range_container .srp_range_buttons .srp_filter_button:hover {
  color: #1F1F1F; /* Dark font for clear contrast */
  background-color: #F0DABE; /* Desaturated metallic copper background */
  border: 1px solid #b9b9b9; /* Subtle desaturated border */
  font-family: Roboto;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Smooth transition */
}
.srp_range_wrapper .srp_range_container .srp_range_buttons .srp_filter_button.srp_filter_button--active {
  color: #1F1F1F; /* Dark font for clear contrast */
  background-color: #CFC1AD; /* Desaturated metallic copper background */
  border: 1px solid #b9b9b9; /* Subtle desaturated border */
  font-family: Roboto;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Smooth transition */
}

/* View license button styling */
.srp_variant_terms .view-license-button {
  background-color: #dcdcdc; /* Neutral dark tone */
  color: #1F1F1F; /* Light silver text */
  border: none;
  border-radius: 25px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.srp_variant_terms .view-license-button:hover {
  background-color: #dcdcdc; /* Copper-inspired hover state */
  color: #1F1F1F;
  box-shadow: 0 0 10px 2px rgba(216, 179, 132, 0.3); /* Subtle copper glow */
}

#sonaar-modal .srp_button {
  background-color: #b89569;
}


#sonaar-modal .srp_button::hover {
  background-color: #dcdcdc !important;
}



/* listen buy on front page */

#listen-buy {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow effect */
    border-radius: 10px; /* Optional: Rounds the corners of the section */
}


/* portfolio box */

.portfolio-box {
    background-color: #333333; /* Slightly lighter grey for contrast */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Soft shadow for panel effect */
    padding: 20px; /* Padding inside the box for content spacing */
    margin: 20px 0; /* Margin to create space above and below the block */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}

.portfolio-box:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Stronger shadow on hover */
    background-color: #3a3a3a; /* Slightly lighter background on hover */
}

/* Adjust inner content styling, if needed */
.portfolio-box .wp-block-image img,
.portfolio-box iframe {
    border-radius: 8px; /* Rounding corners of images and embeds */
    max-width: 100%; /* Ensure images and embeds fit within the block */
    display: block; /* Ensures the embed respects block level spacing */
}



/* Optional: Style the buttons in the portfolio box */
.portfolio-box .wp-block-button__link {
    background-color: #ffffff; /* White background for buttons */
    color: #333333; /* Dark text color for buttons */
    border-radius: 6px; /* Rounded button corners */
    padding: 10px 20px; /* Padding inside the button */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* Button shadow for a subtle 3D effect */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth color transition on hover */
}

/* Modern Grey Button Styling */
.portfolio-box .wp-block-button__link {
    background-color: #4a4a4a; /* Dark grey background for buttons */
    color: #ffffff; /* White text color */
    border-radius: 50px; /* Fully rounded button corners */
    padding: 10px 30px; /* Padding inside the button */
    font-weight: bold; /* Bold text for emphasis */
    text-transform: uppercase; /* Uppercase text for modern look */
    border: none; /* Remove any default borders */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Soft shadow for a 3D effect */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    display: inline-block; /* Ensures buttons align correctly */
    text-align: center; /* Centers text inside the button */
}

.portfolio-box .wp-block-button__link:hover {
    background-color: #5a5a5a; /* Lighter grey on hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
    transform: translateY(-3px); /* Slight lift on hover */
}



/* button restyle */
/* General button styling */
.wp-block-button__link, 
button, 
input[type="button"], 
input[type="submit"] {
    background-color: #B89569; /* Dark copper */
    color: #ffffff; /* White text color for contrast */
    border-radius: 20px; /* More rounded corners for a softer look */
    padding: 12px 24px; /* Adjusted padding for better size */
    font-weight: 600; /* Slightly bolder text */
    text-transform: uppercase; /* Uppercase text for a clean and modern appearance */
    border: none; /* No border for a cleaner look */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for a slight 3D effect */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    cursor: pointer; /* Pointer cursor for buttons */
    text-align: center; /* Center the text */
    display: inline-block; /* Ensure buttons align correctly */
    width: auto; /* Make sure buttons are only as wide as their content */
}

/* Hover effect */
.wp-block-button__link:hover, 
button:hover, 
input[type="button"]:hover, 
input[type="submit"]:hover {
    background-color: #D8B384; /* Slightly lighter grey on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
    /*transform: translateY(-3px); /* Slight lift on hover */ 
}

/* Active state */
.wp-block-button__link:active, 
button:active, 
input[type="button"]:active, 
input[type="submit"]:active {
    background-color: #383838; /* Slightly darker background on click */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Reduced shadow on click */
    /*transform: translateY(0); /* Reset lift on click */
}

/* Focus state */
.wp-block-button__link:focus, 
button:focus, 
input[type="button"]:focus, 
input[type="submit"]:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); /* Custom focus outline */
}




@media only screen and (max-width: 767px) {
    div.sr-playlist-cf-container {
        display: none !important;
    }
}