/*
Theme Name:   ITSY Child Theme
Theme URI:    https://www.itsolutionsyorkshire.uk/
Description:  IT Solutions Yorkshire child theme
Author:       IT Solutions Yorkshire
Author URI:   https://www.itsolutionsyorkshire.uk/
Version:      1.0.0
Template:     Divi
*/

/* General Menu Button Style */
.et_pb_menu__menu .et-menu-nav .et-menu li {
    display: inline-flex !important;  /* Ensure list items are inline-flex */
    align-items: center !important;   /* Vertically center items */
    height: auto !important;          /* Auto height based on content */
    margin: 0 !important;             /* Remove any unnecessary margin */
}

/* General Link Style */
.et_pb_menu__menu .et-menu-nav .et-menu li a {
    background-color: #3d4ba4 !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    margin: 0 1px !important;  /* Margin between buttons */
    transition: all 0.3s ease-in-out !important;
    display: inline-flex !important;  /* Keep links as inline-flex */
    align-items: center !important;   /* Center text vertically */
    justify-content: center !important;  /* Center text horizontally */
    height: auto !important;  /* Ensure buttons are not full height */
    line-height: normal !important;   /* Reset line-height to normal */
}

/* Specific Styling for "Get a Quote" Menu Item */
.et_pb_menu__menu .et-menu-nav .et-menu li.get-a-quote a {
    background-color: #28a745 !important; /* Green background */
}

/* Hover Effect for "Get a Quote" */
.et_pb_menu__menu .et-menu-nav .et-menu li.get-a-quote a:hover {
    background-color: #218838 !important; /* Darker green on hover */
}

/* Active State for "Get a Quote" */
.et_pb_menu__menu .et-menu-nav .et-menu li.get-a-quote.current-menu-item a {
    background-color: #34c759 !important; /* Lighter green when active */
}

/* Specific Styling for "Book Online" Menu Item */
.et_pb_menu__menu .et-menu-nav .et-menu li.book-online a {
    background-color: #ff6666 !important; /* Red background */
}

/* Hover Effect for "Book Online" */
.et_pb_menu__menu .et-menu-nav .et-menu li.book-online a:hover {
    background-color: #ff3232 !important; /* Darker red on hover */
}

/* Active State for "Book Online" */
.et_pb_menu__menu .et-menu-nav .et-menu li.book-online.current-menu-item a {
    background-color: #ff9999 !important; /* Lighter red when active */
}

/* H1 Styling */
h1 {
    font-size: 100px !important;
}

/* H2 Styling */
h2 {
    font-size: 50px !important;
}

/* H3 Styling */
h3 {
    font-size: 30px !important;
}

/* Tablet Breakpoints (980px and below) */
@media (max-width: 980px) {
    h1 {
        font-size: 75px !important;
    }
    h2 {
        font-size: 50px !important;
    }
    h3 {
        font-size: 30px !important;
    }
}

/* Mobile Breakpoints (767px and below) */
@media (max-width: 767px) {
    h1 {
        font-size: 40px !important;
    }
    h2 {
        font-size: 35px !important;
    }
    h3 {
        font-size: 25px !important;
    }
}

/* General input fields styling */
input[type="text"], 
input[type="email"], 
input[type="tel"], 
input[type="number"], 
input[type="date"], 
input[type="time"], 
textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 16px;
}

/* Specific styling for textarea */
textarea {
    height: 120px;
}

/* Submit button styling */
.wpcf7-form-control.wpcf7-submit {
    border-radius: 8px; /* Rounded corners for submit button */
    padding: 12px 24px; /* Padding for the button */
    background-color: #0073e6; /* Background color */
    color: white; /* Text color */
    border: none; /* Remove border */
    font-size: 16px; /* Increase font size */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for submit button */
.wpcf7-form-control.wpcf7-submit:hover {
    background-color: #005bb5; /* Darker shade on hover */
}

/* Dropdown styling */
select.wpcf7-form-control.wpcf7-select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 16px;
    background-color: #fff; /* Background color of dropdown */
    color: #333; /* Text color in dropdown */
    appearance: none; /* Remove default dropdown arrow */
    -webkit-appearance: none; /* Remove default dropdown arrow in Safari */
    -moz-appearance: none; /* Remove default dropdown arrow in Firefox */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="#333" d="M2 0L0 2h4z"/></svg>'); /* Custom dropdown arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

/* Time field styling */
/* Time field styling */
input[type="time"].time-field {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 16px;
}
#drivers .percent-value::before, #vehicles .percent-value::before {
    content: "Over ";
    font-size: 72px;
    font-weight: normal; /* Ensures the text is not bold */
    display: inline-block;
    margin-right: 10px; /* Optional: Adjust spacing between "OVER" and the number */
}



/* Add an overlay with the specified rgba colour */
.coming-soon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1;
}

/* Add "Coming Soon!" text directly in CSS at a 35-degree angle */
.coming-soon::after {
    content: "Coming Soon!";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    color: white;
    font-size: 4em; /* Adjust as necessary */
	line-height:1.2;
    text-align: center;
    z-index: 2; /* Above the overlay */
}