#copyright {
  position: fixed; /* Sticks to the bottom of the viewport */
  bottom: 0;       /* Positions it at the very bottom */
  left: 0;
  right: 0;
  text-align: center; /* Centers the content */
  background-color: #f8f8f8; /* Optional: Add a background color */
  padding: 10px; /* Optional: Add padding for spacing */
  font-size: 14px; /* Optional: Adjust text size */
  z-index: 9999; /* Ensures it stays on top of other elements */
}

#site-title {
    display: none;
}

.entry-title {
    justify-content: center !important;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    padding-top: 15px;
		letter-spacing: 2px;
}

/* Apply background color to the entire navigation section */
#menu-primary {
    background-color: #003366; /* Soft Blue background color */
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* Style the primary navigation list */
#menu-primary {
    list-style: none; /* Removes default bullets */
    margin: 0;
    padding: 0; /* Remove padding to ensure clean layout */
    display: flex; /* This makes the list items display in a row */
    justify-content: center; /* Centers the menu items */
}

/* Style each navigation item */
#menu-primary li {
    margin: 0 25px; /* Adds space between menu items */
    border-left: 2px solid white;
    border-right: 2px solid white;
    position: relative; /* Required for positioning the pseudo-element */
}

/* Style each navigation link (button) */
#menu-primary a {
    text-decoration: none; /* Removes underline */
    padding: 0 20px; /* Adds padding inside each link */
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    background-color: transparent; /* Keep button background transparent */
    color: #ffffff; /* White text for contrast */
    border-radius: 1px; /* Rounded corners */
    transition: color 0.3s; /* Adds smooth color change effect */
    position: relative; /* Position for pseudo-element */
}

/* Add hover effect for the links */
#menu-primary a:hover {
    font-weight: 500;
    color: #f4f4f4; /* Change text color on hover if needed */
	    	
}

/* Create and animate bottom line on hover */
#menu-primary a::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0; /* Start with no width */
    height: 3px; /* Height of the underline */
    background-color: white; /* Color of the underline */
    transition: width .3s ease-out; /* Smooth animation for the width */
}

/* On hover, animate the bottom line width from left to right */
#menu-primary a:hover::before {
    width: 100%; /* Expand the underline to full width */
}

/* Style the banner */
.banner {
    width: 100%; /* Makes the banner span across the entire page */
    background-color: #f4f4f4; /* Optional: Change to your preferred background color */
    text-align: center; /* Centers the content inside the banner */
    padding: 20px 0; /* Adds space around the logo */
    position: relative; /* Keeps the banner at the top */
    margin-top: 0px;
    padding-top: 0px;
}

/* Style the logo inside the banner */
.banner-logo {
    max-width: 230px; /* Adjust the logo size */
    height: auto; /* Keeps the logo's aspect ratio */
    border-radius: 20px;
	margin-top: 20px
}

/* Optional: Adds margin to the top of the page content so the banner doesn't overlap */
body {
    margin-top: 5px; /* Adjust depending on your banner height */
}

/* Create and animate top line on hover */
#menu-primary a::after {
    content: '';
    position: absolute;
    top: calc(-3px - 5px); /* Match the bottom padding offset */
    left: 0; /* Start from the left */
    width: 100%; /* Full width initially */
    height: 3px; /* Height of the top line */
    background-color: transparent; /* Initially transparent */
    transition: background-color 0.3s ease-out, transform 0.3s ease-out; /* Smooth animation for color and movement */
    transform: scaleX(0); /* Start scaled down */
    transform-origin: right; /* Scale starts from the right */
}

/* On hover, animate the top line width from right to left */
#menu-primary a:hover::after {
    background-color: white; /* Color of the line when visible */
    transform: scaleX(1); /* Expand the line */
}

.entry-content {
    font-family: "Calibri", "Arial", sans-serif;
    padding: 30px;
    margin: 0 auto;
    max-width: 1200px; /* Optional: Set a max width for large screens */
}

/* Mobile responsive styles */
@media (max-width: 768px) { /* For screens smaller than 768px */
    #menu-primary {
        flex-direction: column; /* Stack menu items vertically */
        padding: 10px 0; /* Adjust spacing around the menu */
    }

    #menu-primary li {
        margin: 10px auto; /* Center each menu item and add vertical space */
        border-left: 2px solid white; /* Keep left border */
        border-right: 2px solid white; /* Keep right border */
        width: fit-content; /* Ensure the borders are close to the text */
        padding-left: 10px;
        padding-right: 10px;
    }

    #menu-primary a {
        padding: 10px; /* Adjust padding for touch-friendly design */
        text-align: center; /* Center text in each menu item */
    }

    /* Disable top and bottom underlines on mobile */
    #menu-primary a::before,
    #menu-primary a::after {
        display: none;
    }

    /* Reduce body padding on smaller screens */
    body {
        padding: 10px;
    }

    .entry-content {
        padding: 15px; /* Adjust padding for mobile view */
        max-width: 100%; /* Ensure the content stretches across the full screen width */
    }
}

/* Existing styles you might have */
.entry-content {
  font-family: "Calibri", "Arial", sans-serif;
  padding: 30px;
}

/* New styles to prevent footer overlap */
#copyright {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background-color: #f8f8f8;
  padding: 10px;
  font-size: 14px;
  z-index: 9999;
}

body {
  margin-top: 5px;
  padding-bottom: 40px; /* Added padding at the bottom to prevent footer overlap */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    body {
        padding-bottom: 50px;
    }

    .entry-content {
        padding: 15px;
    }
}

.about-1 {
    float: left; /* Makes the text wrap around the image */
    margin: 0 15px 15px 0; /* Adds space between the image and the text */
    max-width: 180px; /* Makes the image responsive */
}

.about-2 {
    float: right; /* Aligns the image to the right */
    margin: 0 0 15px 15px; /* Adds space between the image and the text */
    max-width: 180px; /* Ensures the image is responsive */
}




label[for="tab-instructor-input"] {
    display: none !important;
}

.meta-item.meta-item-instructor {
    display: none !important;
}

.course-detail-info {
    background-color: #003366 !important; /* Dark Blue */
    color: #ffffff !important; /* White text for readability */
    padding: 20px; /* Add spacing */
    border-radius: 5px; /* Rounded corners */
}

.meta-item.meta-item-categories {
    display: none !important; /* Hides the Category section */
}

.instructor-display-name {
    display: none !important; /* Hides the instructor's display name */
}

.course-instructor-category {
    display: none !important;
}

#popup-header {
    background-color: #003366 !important; /* Dark Blue */
    padding: 20px; /* Optional: Adjust padding if needed */
}

.lp-modal-header {
    background-color: #003366 !important; /* Dark Blue */
    padding: 15px; /* Optional: Adjust padding if needed */
}


/* Apply dark blue background to the main course detail area */
.course-detail-info .lp-content-area {
    background-color: #003366 !important; /* Dark Blue */
}

/* Apply dark blue background to course info left section */
.course-info-left {
    background-color: #003366 !important; /* Dark Blue */
}

/* Apply dark blue background to course meta primary section */
.course-meta.course-meta-primary {
    background-color: #003366 !important; /* Dark Blue */
}

/* Apply dark blue background to course meta secondary section */
.course-meta.course-meta-secondary {
    background-color: #003366 !important; /* Dark Blue */
}

/* Target specific left and right meta items */
.course-meta__pull-left,
.meta-item__value {
    background-color: #003366 !important; /* Dark Blue */
}

/* Apply dark blue to the instructor and category areas specifically */
.meta-item-instructor,
.meta-item-categories {
    background-color: #003366 !important; /* Dark Blue */
}


.course-detail-info::before,
.course-detail-info::after,
.lp-content-area::before,
.lp-content-area::after {
    content: none; /* Remove the pseudo-element content */
    display: none; /* Hide the pseudo-element */
}

/* Hide the entry-title on home page */
.page-id-154 .entry-title {
    display: none;
}

body {
  background-color: #eaeaea; /* Replace with your desired light color */
}

.banner {
  background-color: #eaeaea; 

}

#menu {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000; 
}


/* Hide the course meta information */
.course-meta__pull-left {
  display: none !important; /* Hides the entire section */
}

/* Ensure the button background is dark blue and text is white */
.lp-button.button.button-retake-course {
  background-color: #003366 !important; /* Dark blue */
  color: #fff !important; /* White text */
  padding: 15px 20px; /* Increase top and bottom padding for a taller button */
  text-align: center;
  position: relative; /* Necessary for positioning the text */
  border: none; /* Optional: Remove border if needed */
  border-radius: 5px; /* Optional: Smooth the edges */
}

/* Hide the number within parentheses */
.lp-button.button.button-retake-course {
  font-size: 0; /* Hide the number by setting font size to 0 */
}

.lp-button.button.button-retake-course::before {
  display: none; /* Hide the original text */
}

/* Add new text and center it */
.lp-button.button.button-retake-course::after {
  content: "Retake course"; /* Add new text */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the text */
  font-weight: 700; /* Make the text bold */
  color: #fff; /* White color */
  font-size: 16px; /* Adjust size of the text */
  white-space: nowrap; /* Prevent text wrapping */
}

/* Make all text within the quiz section white */
div .questions-index span,
div .questions-index,
div .current-point,
div .countdown span {
  color: white !important; /* Ensure the text color is white */
}

div .submit-quiz button{
	color: black;
}

/* Change the text color of the answer options to solid black */
ul#answer-options-365 .answer-option label {
  color: black !important; /* Ensure text is black */
}

/* Change the text color of the 'Finish Quiz' button to black */
button#button-submit-quiz {
  color: black !important; /* Ensures text is black */
}

/* Change the text color to white when hovering over the button */
button#button-submit-quiz:hover {
  color: white !important;
}




.tutor-course-thumbnail img {
	display: none !important;

}

.tutor-course-content-title {
    margin-top: -120px; /* Moves the element up */
}


.tutor-accordion-item-header {
    color: white; /* Ensures text color is white */
    background-color: #002366; /* Sets dark blue background */
    padding: 10px; /* Optional: Adds spacing */
    border-radius: 4px; /* Optional: Adds rounded corners */
	 border: 1px solid black; /* Thin black border around */
    border-bottom: none; /* Remove the bottom border */
}

.tutor-accordion-item-header:hover {
    color: white; /* Ensures text stays white on hover */
    background-color: #002366; /* Ensures background stays dark blue on hover */
}

.tutor-accordion-item-header.is-active {
    color: white; /* Ensures text stays white when active */
    background-color: #002366; /* Ensures background stays dark blue when active */
}

.tutor-course-details-instructors {
    display: none; /* Hides the entire element */
}

.tutor-course-details-actions {
    display: none; /* Hides the entire element */
}

.tutor-course-details-title {
    text-align: center; /* Centers the text horizontally */
    margin: 0 auto; /* Ensures proper centering if the element has a fixed width */
	font-family: Calibri, sans-serif;
}

.tutor-course-content-title {
    text-align: center; /* Centers the text */
    margin-top: -150px; /* Moves the element up */
    margin-left: auto; /* Ensures centering remains unaffected */
    margin-right: auto; /* Ensures centering remains unaffected */
	font-family: "Trebuchet MS", sans-serif;
	letter-spacing: 1px;
	padding-top: 20px;
}

.tutor-col {
    margin-top: -15px; /* Applies a negative margin of -30px */
}

.tutor-ratio.tutor-ratio-16x9 {
    display: none; /* Hides the entire div */
}

.tutor-meta.tutor-mt-auto {
    display: none; /* Hides the entire div */
}

a.tutor-course-wishlist-btn.save-bookmark-btn {
    display: none; /* Hides the wishlist button */
}

.tutor-card {
    border-radius: 10px; /* Rounded corners for the card */
    border: 2px solid #000; /* Adds a sharp black border around the card */
    overflow: hidden; /* Ensures content inside the card doesn't overflow the rounded corners */
}

.tutor-course-thumbnail img {
    border-radius: 10px 10px 0 0; /* Rounded top corners of the image */
}

.tutor-card-body {
    border-radius: 0 0 10px 10px; /* Rounded bottom corners of the card body */
    text-align: center; /* Centers the text inside the card body */
}

.tutor-course-name, 
.tutor-meta a, 
.tutor-card-footer {
    text-align: center; /* Ensures that the course name, links, and footer text are centered */
}

.tutor-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tutor-course-name a {

    text-decoration: none; /* Removes the underline */
}

.tutor-meta.tutor-course-details-info {
    text-align: left; /* Aligns the text to the left */
}

.tutor-course-content-list-item-title a {
    text-decoration: none;
}


.tutor-course-topic-single-header {
    background-color: #003366; /* Dark blue background */
    color: white; /* White text */
}

.tutor-course-topic-single-header a {
    color: white; /* White text for links */
}

.tutor-course-topic-single-header .tutor-course-topic-single-header-title {
    color: white; /* White text for title */
}

.tutor-course-topic-single-header .tutor-progress-content {
    color: white; /* White text for progress */
}

.tutor-course-topic-single-header .tutor-iconic-btn {
    background-color: #003366; /* Dark blue background for buttons */
    color: white; /* White icon color */
}

.tutor-course-topic-title {
    color: white; /* White font color */
}

.tutor-course-topic-summary {
    color: white; /* White font color */
}

.tutor-course-single-sidebar-title {
    background-color: #003366; /* Dark blue background */
    color: white; /* White text */
    padding: 10px; /* Optional: adjust padding to fit your design */
}

.tutor-course-single-sidebar-title .tutor-fs-6 {
    color: white; /* Ensures the text inside the span is white */
}

.header-title,
.quiz-question-title,
.tutor-fs-7.tutor-color-secondary {
    font-weight: bold !important;
}

.quiz-question-title{
	font-size: 18px;
}

.tutor-fs-5.tutor-fw-medium.tutor-color-black.tutor-mb-12 {
    display: none;
}

p,
li {
    color: black;
}

.tutor-course-topic-single-header {
    background-color: #003366 !important; /* Dark blue */
    color: white !important; /* White text */
}

/* Keep the dark blue background for the parent container */
.tutor-accordion-item-header {
    background-color: #003366 !important; /* Dark blue background */
}

/* Keep the text white and other formatting for the title */
.tutor-course-topic-title {
    background-color: #003366 !important; /* Dark blue background */
    color: white !important; /* White text */
    margin-top: 12px; /* Optional, to move it down a bit */
	margin-left: -15px;
    padding: 10px; /* Optional, for internal space */
}

/* Ensure the summary text remains white */
.tutor-course-topic-summary {
    color: white !important; /* White text */
}

body {
    background-color: rgb(245, 245, 245) !important; /* Very light gray */
}

div.banner {
    background-color: rgb(240, 240, 240) !important; /* Very light gray */
}

/* Ensure no border-radius or padding from parent elements */
.tutor-card {
    border-radius: 0; /* Ensure no inherited border-radius */
    background-color: #ffffff; /* Make sure the background is solid white */
}

/* Styling for tutor-card-body */
.tutor-card-body {
    position: relative; /* Ensures no overlap */
    z-index: 1; /* Prevents overlapping from other elements */
    background-color: #F7F7F7; /* Lighter than #F2F2F2 but not white */
    border-top: 1px solid black; /* Black border on the top */
    border-left: 1px solid black; /* Black border on the left */
    border-right: 1px solid black; /* Black border on the right */
    color: white; /* White text */
    padding: 15px; /* Add spacing for readability */
    border-radius: 8px 8px 0 0; /* Round the top corners only */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Optional: Add subtle shadow inside */
}

/* Styling for tutor-card-footer */
.tutor-card-footer {
    background-color: #F7F7F7; /* Lighter than #F2F2F2 but not white */
    border-top: 1px solid black; /* Black border on the top */
    border-left: 1px solid black; /* Black border on the left */
    border-right: 1px solid black; /* Black border on the right */
    border-bottom: 1px solid black; /* Black border on the bottom */
    color: white; /* White text */
    padding: 10px; /* Add spacing */
    border-radius: 0 0 8px 8px; /* Keep rounded bottom corners only */
}

/* Ensure links inside these sections are styled properly */
.tutor-card-body a, 
.tutor-card-footer a {
    color: white; /* White links */
    text-decoration: underline; /* Optional: Underline for clarity */
}

.tutor-card-body a:hover, 
.tutor-card-footer a:hover {
    color: #ffcc00; /* Optional: Change link color on hover */
}


/* Button Styling */
.tutor-btn {
    background-color: #003366; /* Dark blue background (matching nav menu) */
    color: #ffffff; /* White text color */
    border: 1px solid #003366; /* Border matches background */
    text-align: center;
    padding: 10px 20px;
    border-radius: 5px; /* Rounded corners */
    font-weight: bold;
    text-decoration: none !important; /* Remove underline */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

/* Hover State */
.tutor-btn:hover {
    background-color: #00509E; /* Lighter blue on hover */
    color: #ffffff; /* White text on hover */
    border-color: #00509E; /* Matching border on hover */
}

/* Focus State (Optional) */
.tutor-btn:focus {
    outline: none; /* Remove the default outline */
    box-shadow: 0 0 0 3px rgba(38, 143, 255, 0.5); /* Optional: Highlight button when focused */
}


/* Ensure both buttons have the same size and appearance */
.skip-quiz-btn, .start-quiz-btn {
    font-size: 16px !important; /* Set consistent font size */
    padding: 10px 20px !important; /* Set consistent padding for size */
    border-radius: 5px !important; /* Rounded corners for both buttons */
    text-align: center !important; /* Ensure text is centered */
    display: inline-block !important; /* Ensure buttons stay inline */
    width: auto !important; /* Ensure the button width adjusts based on text size */
}

/* Apply consistent button styling for both buttons */
.skip-quiz-btn {
    background-color: #003366 !important; /* Dark blue background */
    color: #ffffff !important; /* White text */
    border: 1px solid #003366 !important; /* Border matches background */
    text-decoration: none !important; /* No underline on text */
}

/* Adjust hover state for both buttons */
.skip-quiz-btn:hover {
    background-color: #00509E !important; /* Lighter blue for hover */
    border-color: #00509E !important; /* Matching border color */
}

/* Ensure consistent styling for the 'Start Quiz' button */
.start-quiz-btn {
    background-color: #003366 !important; /* Dark blue background */
    color: #ffffff !important; /* White text */
    border: 1px solid #003366 !important; /* Border matches background */
    text-decoration: none !important; /* No underline on text */
}

/* Adjust hover state for both buttons */
.start-quiz-btn:hover {
    background-color: #00509E !important; /* Lighter blue for hover */
    border-color: #00509E !important; /* Matching border color */
}

.tutor-course-name a {
    text-decoration: none;
		font-size: 18px;
		font-weight: 600;
}

.tutor-widget-title {
	text-align: center;
}

.grunion-field-label {
    padding-top: 10px;
    padding-bottom: 10px;
		font-size: 15px !important;
}


.wp-block-button {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically, if needed */
}

.wp-block-button__link {
    width: auto; /* Normal button width */
    padding: 10px 20px; /* Adds padding for better appearance */
    background-color: #001f5b; /* Dark blue background */
    color: #ffffff; /* White text */
    text-align: center; /* Centers text within the button */
    border: none; /* Removes any default border */
    border-radius: 5px; /* Optional: Adds rounded corners */
    font-size: 16px; /* Adjust font size */
    cursor: pointer; /* Changes cursor to pointer on hover */
}

.wp-block-button__link:hover {
    background-color: #003a8c; /* Slightly lighter blue on hover */
    color: #ffffff; /* Ensure white text on hover */
}


/* Hide submenu initially */
.sub-menu {
    display: none; /* Keep submenu hidden initially */
    opacity: 0; /* Make submenu invisible */
    visibility: hidden; /* Prevent interaction */
    position: absolute;
    top: 150%; /* Adjust submenu position relative to the parent */
    left: 0;
    background-color: #00274d; /* Dark blue background */
    min-width: 220px; /* Increase width to prevent wrapping */
    transition: opacity 0.3s ease, visibility 0s 0.3s; /* Smooth fade-in */
    z-index: 1000;
}

/* Show submenu on hover with smooth fade-in */
.menu-item:hover > .sub-menu {
    display: block; /* Show the submenu */
    opacity: 1; /* Make it visible */
    visibility: visible; /* Allow interaction */
    transition: opacity 0.3s ease, visibility 0s 0s; /* Fade-in with instant visibility change */
}

/* Adjust the submenu links to be spaced and easily readable */
.sub-menu li a {
    color: #ffffff; /* White text */
    text-decoration: none; /* Remove underline */
    padding: 10px 20px; /* Add padding to spread out the items */
    display: block; /* Ensure the entire area is clickable */
    background-color: transparent; /* Prevent background color change */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Add spacing between each menu item */
.sub-menu li {
    margin-bottom: 10px !important; /* Add spacing between each item */
}

/* Prevent submenu links from highlighting white when hovered */
.sub-menu li a:hover {
    color: #00274d; /* Dark blue text on hover */
    background-color: transparent; /* Keep background transparent on hover */
}

/* Ensure the parent menu items are positioned correctly for the submenu */
.menu-item {
    position: relative; /* Ensures proper positioning of submenu */
}

/* Optional: active menu item */
.menu-item.current-menu-item > a {
    color: #ffffff;
    background-color: #00274d; /* Dark blue background for active item */
}

/* Round the edges of the submenu */
.sub-menu {
    border-radius: 10px; /* Adjust the value to make the corners more or less rounded */
}

/* Change background color of submenu items on hover */
.sub-menu li a:hover {
    background-color: #1d3c6b !important; /* Lighter dark blue (adjust as needed) */
	font-weight: 700 !important;
}




.tutor-course-content-list-item-title {
    font-family: "Trebuchet MS", sans-serif;
    letter-spacing: 1px;
}
.tutor-accordion-item-header {
    font-family: "Trebuchet MS", sans-serif;
    letter-spacing: 1px;
}









/* Increase width of the submenu */
.sub-menu {
    width: 370px !important; /* Increase the width as needed */
}

.sub-menu {
    left: -25px; /* Adjust the value as needed to move the submenu left */
}

@media (max-width: 768px) {
    .sub-menu {
        display: none !important; /* Hide the submenu */
    }
}

ul {
    list-style-type: disc;  /* Ensures the use of bullet points */
    margin-left: 20px;      /* Adds space to the left of the list */
}

ul li {
    margin-bottom: 10px;    /* Adds spacing between list items */
}

/* General container for the progress bar */
.progress-bar-container {
    width: 100%; /* Full width of the container */
    background-color: #f3f3f3; /* Light gray background */
    border: 1px solid #ccc; /* Optional border for clarity */
    border-radius: 5px; /* Rounded corners */
    height: 20px; /* Height of the progress bar */
    overflow: hidden; /* Ensure child elements stay within bounds */
}

/* Actual progress bar */
.tutor-progress-value {
    display: block;
    width: 0%; /* Start at 0% width */
    height: 100%; /* Match the container's height */
    background-color: #4caf50; /* Green color for progress */
    transition: width 0.3s ease-in-out; /* Smooth transition for dynamic updates */
}

.menu {
    background: linear-gradient(to bottom, #001a33, #00264d 70%, #001a33); /* Darker, muted blue gradient */
    padding: 20px; /* Ensures spacing */
    color: white; /* Text color for readability */
    text-align: center; /* Optional: Center-align text or menu items */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Subtle shadow for depth */
}


.banner {
    position: relative;
    height: 150px; /* Adjust height as needed */
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner::after {
    content: '';
    position: absolute;
    left: calc(100% - 360px); /* Moves the image to the right side */
    top: 60%; /* Center vertically */
    transform: translateY(-50%) translateX(70px); /* Move it a little to the right */
    background-image: url('https://connstc.com/wp-content/uploads/2025/01/Licensed-Training-Provider-Graphic-April-2021.jpg');
    background-size: 50%; /* Resize the image by 50% */
    background-repeat: no-repeat;
    background-position: center;
    width: 340px; /* Set the width */
    height: 70px; /* Set the height */
	clip-path: inset(1px 93px 1px 93px); /* Top Right Bottom Left */
}

/* Mobile Version */
@media (max-width: 768px) {
    .banner::after {
        display: none; /* Hide the image on mobile */
    }
}

.tutor-course-filter-form {
    border-left: 1px solid #000; /* Left border */
    border-right: 1px solid #000; /* Right border */
    border-bottom: 1px solid #000; /* Bottom border */
    padding-left: 15px; /* Optional: Add some space inside the left side */
    padding-right: 15px; /* Optional: Add some space inside the right side */
    padding-bottom: 15px; /* Optional: Add some space inside the bottom */
	border-radius: 10px;
}

.tutor-widget-title {
    text-decoration: underline; /* Underlines the text */
}

.banner {
    background: radial-gradient(circle, #f9f9f9, #e0e0e0, #c0c0c0); /* Light gray to lighter gray */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
}

.menu a {
    letter-spacing: 1px; /* Adjust the value as needed */
}


#menu-primary li a span[itemprop="name"] {
    display: inline-block; /* Ensures scaling is consistent */
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

#menu-primary li a span[itemprop="name"]:hover {
    transform: scale(1.05); /* Slightly enlarges the text */
 
}
.tutor-fs-6.tutor-color-black.tutor-pb-8 {
    display: none;
}

.tutor-fs-4.tutor-fw-medium.tutor-color-black,
.tutor-quiz-info .tutor-fs-6 {
    color: black !important; /* Ensures the text color is overridden */
    font-weight: normal !important; /* Normalizes font weight if needed */
	    font-family: 'Calibri', sans-serif !important; /* Apply Calibri font */

}

h4.tutor-accordion-item-header {
    font-family: "Trebuchet MS", sans-serif;
}




.tutor-course-content-list-item {
    background: #dee2e6; /* Slightly darker gray for contrast */
    padding: 15px;
    border-radius: 6px; /* Slight rounding */
    margin: 10px 0; /* Space between items */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.tutor-course-content-list-item h5 a {

    color: #212529; /* Dark text for readability */
    text-decoration: none;
	    font-family: "Trebuchet MS", sans-serif;
	letter-spacing: 1px;
}

.tutor-course-content-list-item:hover {
    background: #ced4da; /* Slightly darker on hover */
    transition: background 0.3s ease-in-out;
}


.tutor-accordion-item-body-content {
    background: linear-gradient(45deg, #d3d3d3, #f0f0f0); /* Light gray gradient */
    padding: 20px; /* Optional: adjust padding for spacing */
    border: 1px solid black; /* Thin black border around the content */
    border-radius: 0 0 10px 10px; /* Rounded corners only at the bottom */
	
}


body {
    background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
}

#copyright {
    background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
    border-top: .1px solid black;
    padding: 10px;
}

.tutor-card-body {
    background: linear-gradient(to bottom, #e5e5e5, #e2e2e2); /* Slightly darker top */
    padding: 20px;
    border-radius: 8px 8px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.tutor-card-footer {
    background: linear-gradient(to bottom, #e5e5e5, #e2e2e2); /* Same adjustment */
    padding: 20px;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid #d1d3d4;
}


.tutor-list-item {
    border: 1px solid #000; /* Black border */
    padding: 10px; /* Optional: space between the content and the border */
    margin-bottom: 10px; /* Optional: space between items */
    border-radius: 5px; /* Optional: rounded corners */
    background: linear-gradient(to right, #d3d3d3, #e5e5e5); 
	font-weight: 500;
	letter-spacing: .5px;/* Light gray gradient */
    transition: background 0.6s ease-in-out; /* Smooth, slow transition for hover effect */

}

/* Slow hover effect */
.tutor-list-item:hover {
    background: linear-gradient(to right, #c0c0c0, #d0d0d0); /* Slightly darker gray gradient on hover */
}



.banner {
    position: relative; /* Set position relative to this container */
    display: flex;
    align-items: center;
}

.banner::before {
    content: '';
    position: absolute;
    left: -10px; /* Adjusts the shield's position to the left */
    top: 50%; /* Center vertically inside the banner */
    transform: translateY(-50%); /* Vertically center the image */
    background-image: url('https://connstc.com/wp-content/uploads/2025/01/Shield.png'); /* Shield image */
    background-size: 50%; /* Resize the image */
    background-repeat: no-repeat;
    background-position: center;
    width: 250px; /* Set the width */
    height: 120px; /* Set the height */
}

/* Mobile Version */
@media (max-width: 768px) {
    .banner::before {
        display: none; /* Hide the image on mobile */
    }
}


.tutor-course-topic-item-title.tutor-fs-7.tutor-fw-medium {
    font-family: 'Trebuchet MS', sans-serif;
    letter-spacing: 1px;
}


.tutor-course-topic-title,
.tutor-course-single-sidebar-title,
.tutor-course-topic-single-header-title,
.tutor-widget-title,
.tutor-course-topic-summary {
    font-family: "Trebuchet MS", sans-serif;
    letter-spacing: 1px;

}





#menu-primary a {
    font-size: 13px;
}




.banner {
    position: relative;
    height: 200px;
    width: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
                url('https://connstc.com/wp-content/uploads/2025/02/Background.png');
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
}



/* Ensure submenu has proper background and text color */
#menu-primary .sub-menu {
    list-style-type: none; /* Remove bullet points */
    margin: 0; /* Remove any default margin */
    padding: 0; /* Remove any default padding */
    position: absolute; /* Position the submenu below the parent */
    top: 100%; /* Position directly below the parent item */
    left: 0;
    background-color: #00274d; /* Dark blue background */
    min-width: 220px; /* Minimum width to prevent wrapping */
    z-index: 1000; /* Ensure it stays above other elements */
    display: none; /* Keep submenu hidden initially */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Prevent interaction */
    transition: opacity 0.3s ease, visibility 0s 0.3s; /* Smooth fade-in */
}

/* Display submenu when hovering over the parent */
#menu-primary li.menu-item:hover > .sub-menu {
    display: block; /* Show the submenu */
    opacity: 1; /* Make it visible */
    visibility: visible; /* Allow interaction */
    transition: opacity 0.3s ease, visibility 0s 0s; /* Smooth fade-in */
}

/* Ensure submenu links have correct text color */
#menu-primary .sub-menu a {
    text-decoration: none; /* Remove underline */
    color: #ffffff; /* White text for visibility */
    padding: 4px 8px; /* Add padding for better spacing */
    display: block; /* Ensure the entire area is clickable */
    background-color: transparent; /* Prevent background color change */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Add spacing between each menu item */
.sub-menu li {
    margin-bottom: 10px !important; /* Add space between items */
}

/* Hover effect for submenu items */
.sub-menu li a:hover {
    background-color: #1d3c6b !important; /* Lighter dark blue on hover */
    color: white; /* Change text color on hover */
    font-weight: 700; /* Make text bold on hover */
	    border-bottom: 1px solid #fff; /* Make sure the bottom border is present */
    margin-bottom: -5px !important; 
}

/* Ensure parent menu items are correctly positioned for the submenu */
.menu-item {
    position: relative; /* Ensure proper positioning of submenu */
}

/* Optional: active menu item */
.menu-item.current-menu-item > a {
    color: #ffffff;
    background-color: #00274d; /* Dark blue background for active item */
}

/* Round the edges of the submenu */
.sub-menu {
    border-radius: 10px; /* Rounded corners for the submenu */
}


body {
    overflow-x: hidden !important;
}







.sub-menu {
    display: block; /* Make sure the list is displayed as a block */
    width: 100%; /* Make it take full width, or adjust to fit your layout */
    max-height: 400px; /* Set a maximum height to prevent resizing */
    overflow: hidden; /* Prevent scrolling by hiding any overflow */
}

.sub-menu li {
    display: block; /* Ensure each menu item is on a new line */
    height: 20px; /* Set a fixed height for each item */
    line-height: 20px; /* Vertically center the text */
    border-top: 1px solid transparent; /* Add space for hover effect */
    border-bottom: 1px solid transparent; /* Add space for hover effect */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}

.sub-menu a {
    display: block; /* Make the link take up the full width of the li */
    text-decoration: none; /* Remove underline */
    color: #000; /* Set text color */
    padding: 0 10px; /* Add some padding for clickable area */
    font-size: 16px; /* Adjust font size as needed */
}