/* General Site Colors */
body {
    /*  background-color: #FFFFFF; /* White background */
    color: #333333;
    /* Text base color */
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 16px;
    /* Base font size for span */
    font-weight: 400;
}

.nav-menu nav {
    background-color: #003399;
    /* Menu bar background color */
}

.nav-menu nav a {
    color: #FFFFFF;
    /* Menu bar text color */
}

/* span tag styling */
span {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

/* div tag styling */
div {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}


/* a tag styling */
a {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    color: inherit;
    /* Keeps links the same color as the surrounding text */
}

/* H2 tag styling */
h2 {
    font-family: 'Cantarell', Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 700;
    /* Bold */
    font-style: normal;
    /* margin-bottom: 10px; /* Adjusts spacing after heading */
}

/* H3 tag styling */
h3 {
    font-family: 'Cantarell', Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 400;
    /* Normal weight */
    font-style: normal;
    /*margin-bottom: 8px; /* Adjusts spacing after heading */
}

/* p tag styling */
p {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    /*margin-bottom: 10px; /* Adds spacing between paragraphs */
}

/* label tag styling */
label {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    /* Bold */
    /* margin-bottom: 5px; /* Adds spacing between label and form element */
    /*display: inline-block; /* Ensures proper spacing when used above inputs */
}

/* Page Header CSS */
.page-head {
    color: #3498db;
    font-size: 2em;
    text-align: center;
    font-weight: bold;
    padding: 20px;
}

/* START : Footer & Banner Slider CSS */
.brand-slider {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.brand-slide {
    margin: 0 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-slide img {
    max-width: 120px;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}

.custom-slider {
    position: relative;
    width: 100%;
}

.slider-item img {
    width: 100%;
    height: auto;
}

.slick-prev,
.slick-next {
    font-size: 24px;
    /*color: #000;  */
    background-color: pink;
    z-index: 1000;
}

.slick-prev {
    left: 10px;
}

.slick-next {
    right: 10px;
}

.slider-container,
.hyka-our-brand-footer-section {
    max-width: 100%;
    /* Makes the slider container full width */
    width: 100%;
    /* Ensure full width */
    padding: 0 20px;
    /* Optional: Adds padding to give some space on the sides */
}

.slick-slide img {
    width: 100%;
    /* Ensures the images inside the slider take full width of the container */
    height: auto;
    /* Maintains aspect ratio */
}

/* Brand slider specific overrides */
.brand-slider .slick-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-slider .slick-slide img {
    max-width: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.slick-dots {
    display: block !important;
    /* Ensure the dots are displayed */
    text-align: center;
    /* Center the dots */
    padding: 25px 0;
    /* Add some padding for spacing */
}

.slick-dots li {
    display: inline-block;
    /* Ensure dots are in a row */
    margin: 0 5px;
    /* Add space between the dots */
}

.slick-dots li button {
    background-color: #333;
    /* Dot color */
    border: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* Make dots round */
    cursor: pointer;
}

.slick-dots li.slick-active button {
    background-color: #039;
    /* Change color of active dot */
}

.col-full.hyka-our-brand-footer-section {
    padding-left: 0;
    padding-right: 0;
}

.col-full {
    max-width: 90em !important;
}

/* END : Footer & Banner Slider CSS */


.card-header-custom {
    background-color: #007bff;
    color: white;
    font-size: 1.25rem;
}

.card-body-custom {
    background-color: #f8f9fa;
}

.info-label {
    font-weight: bold;
}

.table-info th {
    background-color: #e2e3e5;
    color: #383d41;
    /* text-align: center; */
}

.table-info td {
    text-align: left;
}

.table-info thead th {
    font-weight: bold;
}

.alert-primary {
    margin-bottom: 0;
}

.alert-primary {
    background-color: #afcff1;
    color: black;
    border: none;
}

.alert-primary strong {
    font-size: 1.25rem;
}

.download-link-btn , .copy-link-btn , .select-csv-column {
    width: 20px;
    height: 20px;
    align-items: center;
    top: 5px;
    position: relative;
}

.download-link-section , .Copy-link-section, .select-csv-section{
    display: flex;
    gap: 5px;
}

.success-message.tooltip {
    display: none;
    color: #fff;
    background-color: #28a745;
    padding: 8px 12px;
    border-radius: 4px;
    position: absolute;
    z-index: 10;
    margin-top: 5px;
}

.custom-slider .slick-dots li {    
    text-decoration: none;
    display: inline-block;
    height: 10px;
    width: 10px;
    margin-right: 1%;
    background: #999;    
    border-radius: 50%;
    color: transparent;
    bottom: 10px;
    background-image: linear-gradient(bottom, #999 43%, #bbb 86%);
    background-image: -o-linear-gradient(bottom, #999 43%, #bbb 86%);
    background-image: -moz-linear-gradient(bottom, #999 43%, #bbb 86%);
    background-image: -webkit-linear-gradient(bottom, #999 43%, #bbb 86%);
    background-image: -ms-linear-gradient(bottom, #999 43%, #bbb 86%);
}

.custom-slider .slick-dots li.slick-active button {        
    background-image: linear-gradient(top, #999 43%, #bbb 86%);
    background-image: -o-linear-gradient(top, #999 43%, #bbb 86%);
    background-image: -moz-linear-gradient(top, #999 43%, #bbb 86%);
    background-image: -webkit-linear-gradient(top, #999 43%, #bbb 86%);
    background-image: -ms-linear-gradient(top, #999 43%, #bbb 86%)
}

.custom-slider button.slick-prev.slick-arrow,button.slick-next.slick-arrow {
    background: rgba(255,255,255,0.5) !important;
    width: 20px;
    height: 100%;
    left: 0;
    opacity: 0;
}

.custom-slider button.slick-next.slick-arrow {
    left: auto;
    right: 0;
}

.custom-slider button.slick-prev.slick-arrow {
    left: 0;
    right: auto;
}

.custom-slider .slick-prev:before {
    content: "";
    position: absolute;
    top: 45%;
    left: 5px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 10px solid black;
}

.custom-slider .slick-next:before {
    content: "";
    position: absolute;
    top: 45%;
    right: 5px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 10px solid black;
}

.custom-slider:hover .slick-prev.slick-arrow, .custom-slider:hover .slick-next.slick-arrow {
    opacity: 1;
}

.star-rating::before, .star-rating span::before{
    font-family: "Font Awesome 5 Free" !important;
    font-size: 14px !important;
}

#reviews .commentlist li .comment_container .comment-text .star-rating {
    height: 20px !important;
    width: 85px !important;
}
.single-product div.product .woocommerce-product-rating {
    margin-top: 20px !important;
}

.woocommerce-MyAccount-navigation-link--hyka-ra {
    display: none;
}