.image-cropper-preview {
    width: 100%;
    background-color: #f3f4f6;
    background-image: url("https://placehold.co/640x360");
    background-repeat: no-repeat;
    background-position: center center;
    height: 360px;
    display: block;
}


.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 6px 4px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.select2-search__field {
    margin: 6px !important;
    padding: 2 !important;
    line-height: 1.5 !important;
}

.select2-selection__rendered {
    padding-top: 5px !important;
}

@media (max-width: 2048px) {
    .sidebar-only {
        display: none;
    }
}

.mobile-nav__container .sidebar-only {
    display: block;
}

.copyright {
    background-color: var(--ff-primary-darker);
}

.copyright__text {
    color: var(--ff-primary);
}

.mobile-nav__content {
    background-color: var(--ff-primary);
}

.mobile-nav__content .main-menu__list li>a {
    color: var(--ff-text-primary);
}

.mobile-nav__overlay {
    background-color: var(--ff-primary);
}

.mobile-nav__content .main-menu__list li a button {
    background-color: var(--ff-text-primary);
    color: var(--ff-primary);
}

.mobile-nav__content .main-menu__list li a button.expanded {
    transform: rotate(0deg);
    background-color: var(--ff-primary-darker);
    color: var(--ff-primary);
}

.mobile-nav__content .main-menu__list li a.expanded {
    color: var(--ff-primary-darker);
}

.main-header-two .main-menu .main-menu__list>li>a {
    color: var(--ff-text-primary);
}

.main-header-two .main-menu__list>li.current>a,
.main-header-two .main-menu__list>li:hover>a {
    color: var(--ff-primary-darker);
}


.form-check-input:checked {
    background-color: var(--ff-primary-darker);
    border-color: var(--ff-primary-darker);
}


.main-menu .main-menu__list li ul li.current>a,
.main-menu .main-menu__list li ul li:hover>a,
.stricky-header .main-menu__list li ul li.current>a,
.stricky-header .main-menu__list li ul li:hover>a {
    background-color: var(--ff-primary-darker);
    color: var(--ff-primary);
}

.main-menu .main-menu__list li ul li>a::after,
.stricky-header .main-menu__list li ul li>a::after {
    color: var(--ff-primary);
}

.main-footer-two {
    background-color: var(--ff-primary);
}


.main-header-two.stricky-header .main-menu__list>li>a {
    color: var(--ff-text-primary);
}

.main-header-two.stricky-header .main-menu__list>li.current>a,
.main-header-two.stricky-header .main-menu__list>li:hover>a {
    color: var(--ff-primary-darker);
}

.main-footer-two__info-list li span {
    color: var(--ff-text-primary);
}

.main-footer-two__info-list li {
    color: var(--ff-primary-darker);
}

.main-footer-two__title {
    color: var(--ff-text-primary);
}

.main-footer-two__navmenu ul li {
    color: var(--ff-primary-darker);
}

.mobile-nav__close {
    color: var(--ff-text-primary);
}



.main-header-two .main-menu__login,
.main-header-two .mobile-nav__toggler,
.main-header-two .main-menu__search {
    color: var(--ff-text-primary);
}

.main-header-two .main-menu__login:hover,
.main-header-two .mobile-nav__toggler:hover,
.main-header-two .main-menu__search:hover {
    color: var(--ff-primary-darker);
}

.mobile-nav__toggler:hover {
    color: var(--ff-primary-darker);
}

.scroll-top__circle path {
    stroke: var(--ff-primary-darker);
}

.scroll-top::after {
    color: var(--ff-primary-darker);
}

.section-title__title {
    color: var(--ff-text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ff-text-primary);
}

.section-title__tagline {
    color: var(--ff-primary-darker);
}

.custom-cursor__cursor,
.custom-cursor__cursor-two {
    border-color: var(--ff-primary);
}

.section-title__tagline svg.arrow-svg {
    fill: var(--ff-text-primary);
}

.course-two__author {
    padding: 0 0 0 0px;
}

.course-two__like {
    background-color: var(--ff-primary);
    color: var(--ff-text-primary);
}

.course-two__time {
    background-color: var(--ff-primary);
    color: var(--ff-text-primary);
}

.course-two__slider.owl-carousel .owl-nav button {
    background-color: var(--ff-primary);
    color: var(--ff-primary-darker);
}

.course-two__slider.owl-carousel .owl-nav button:hover {
    background-color: var(--ff-primary-darker);
    color: var(--ff-primary);
}

.testimonial-one__carousel.owl-carousel .owl-nav button {
    background-color: var(--ff-primary);
    color: var(--ff-primary-darker);
}

.testimonial-one__carousel.owl-carousel .owl-nav button:hover {
    background-color: var(--ff-primary-darker);
    color: var(--ff-primary);
}

.about-two__thumb__two-icon {
    background-color: var(--ff-primary);
    color: var(--ff-primary-darker);
}

.page-header__overlay {
    background-color: rgba(var(--ff-primary), 0.8);
}

.page-header__title {
    color: var(--ff-text-primary);
}

.blog-page__pagination li a {
    border: 1px solid var(--eduact-soft4);
    color: var(--ff-primary-darker);
}

.blog-page__pagination li a:hover,
.blog-page__pagination li a.active {
    background-color: var(--ff-primary);
    border-color: var(--ff-primary);
    color: var(--ff-primary-darker);
}

.blog-details__meta a {
    background-color: var(--ff-primary);
    color: var(--ff-primary-darker);
}

.blog-details__meta a:hover {
    background-color: var(--ff-primary-darker);
    color: var(--ff-primary);
}

.blog-details__tags a {
    background-color: var(--ff-primary);
    color: var(--ff-primary-darker);
}

.blog-details__tags a:hover {
    background-color: var(--ff-primary-darker);
    color: var(--ff-primary);
}

.main-footer-two__social a {
    border: 1px solid var(--ff-primary-darker);
    color: var(--ff-text-primary);
}

.main-footer-two__social a:hover {
    background-color: var(--ff-primary-darker);
}

.preloader {
    background-color: var(--ff-primary);
}

.product__item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product__item__img {
    flex-shrink: 0;
    height: 200px; /* Set to desired uniform height */
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.product__item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product__item__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product__item__title a {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* Set max-width to ensure ellipsis works */
}

.product__item__content .product__item__price,
.product__item__content .product__item__ratings {
    margin-top: auto; /* Pushes these elements to the bottom */
}

.dropdown-menu .dropdown-menu {
    position: absolute;
    left: 100%; /* Align submenus to the right */
    top: 0;
    margin-top: 0;
}

.dropdown-menu .dropdown-item.dropdown-toggle::after {
    content: '\f0da'; /* FontAwesome right arrow */
    float: right;
    font-family: 'FontAwesome';
    margin-left: 0.5rem;
}

.dropdown.active > .dropdown-item {
    color: white !important; /* Make the text color white */
}

li.active > .dropdown-item {
    color: white !important; /* Make the text color white */
}

ul.dropdown-menu > li.active > .dropdown-item {
    color: var(--primary) !important;
}

.google-map-container {
    height: 500px; /* Set the fixed height for the container */
    position: relative; /* Make the container position relative */
}

.google-map-container iframe {
    position: absolute; /* Set iframe's position to absolute */
    top: 0;
    left: 0;
    width: 100%; /* Ensure iframe takes full width of container */
    height: 100%; /* Make iframe height follow the container */
    border: 0; /* Ensure no borders */
}

/* Align the main navigation menu to the right */
.header-nav-main {
    display: flex;
    justify-content: flex-end;
}

/* Add left and right margin to ul elements */
.header-nav-main nav ul {
    margin-left: 20px;
}

/* Ensure dropdown menus also respect the margin */
.header-nav-main nav ul.dropdown-menu {
    margin-left: 20px;
}

/* Adjust button alignment for responsive menu */
.header-btn-collapse-nav {
    margin-left: auto;
}

/* Additional styling for a cleaner layout */
.header-nav-main ul {
    padding: 0;
    list-style: none;
}

.header-nav-main li {
    position: relative;
}

.header-nav-main li a {
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

.header-nav-main li a:hover {
    background-color: #f0f0f0;
    color: #333;
}