/* Remove default button background on hover */
.w3-bar .w3-button {
background-color: transparent !important;
padding: 10px 16px;
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
}

.w3-bar .w3-button:hover {
background-color: #f2f2f2 !important;
}

.w3-dropdown-content .w3-bar-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
padding: 10px 16px;
}

.w3-dropdown-content .w3-bar-item i {
width: 20px;
text-align: center;
color: #333;
}

/* Subtle dropdown shadow */
.w3-dropdown-content {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.primary-color {
    color: white !important;
    background-color: #2c4d80 !important;
}
.primary-color-text {
    color: #2c4d80 !important;
}
.secondary-color {
    color: white !important;
    background-color: #87161e !important;
}
.secondary-color-text {
    color: #87161e !important;
}
.tertiary-color {
    color: white !important;
    background-color: #583059 !important;
}
.tertiary-color-text {
    color: #583059 !important;
}
.black-color {
    color: white !important;
    background-color: #333 !important;
}
.black-color-text {
    color: #333 !important;
}

:root {
  --gjs-primary-color: #2c4d80;
  --gjs-secondary-color: #87161e;
  --gjs-tertiary-color: #583059;
  --gjs-quaternary-color: #ec5896;
}

/* Primary color for the background */
.gjs-one-bg {
  background-color: #2c4d80;
}

/* Secondary color for the text color */
.gjs-two-color {
  color: #87161e;
}

/* Tertiary color for the background */
.gjs-three-bg {
  background-color: #583059;
  color: white;
}



/* Fonts */
@font-face {
    font-family: 'Roboto';
    src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap') format('woff2');
    font-weight: 400;
    font-style: normal;
}

.Roboto {
    font-family: 'Roboto', sans-serif;
}

@font-face {
    font-family: 'Poppins';
    src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap') format('woff2');
    font-weight: 400;
    font-style: normal;
}
.Poppins {
    font-family: 'Poppins', sans-serif;
}


/* Extra w3.css classes  after width 992px and before width 1320px */
@media screen and (min-width: 992px) and (max-width: 1320px) {
    /* When screen in between large and medium ... hide */
    .w3-hide-semi-medium {
        display: none !important;
    }
    
}


.heading {
    font-weight: 600 !important;
    color: #87161e !important;
}

/* Section backgrounds */
.section-bg {
  background: #f5f7fa79;
}



/* ===== Secondary Color Range Slider Styling ===== */

/* General track styling for input[type=range] with .secondary-color class
    - Sets the base track color (background: #ddd) before browser-specific overrides
    - Applies border radius and removes outline
*/
input[type=range].secondary-color {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #ddd; /* Default track color (overridden below) */
  border-radius: 3px;
  outline: none;
}

/* --- WebKit Browsers (Chrome, Safari, Edge Chromium) --- */

/* Track color for WebKit browsers
    - Colors the slider track with the secondary color (#87161e)
*/
input[type=range].secondary-color::-webkit-slider-runnable-track {
  height: 6px;
  background: #2c4d80; /* Secondary color for the track */
  border-radius: 3px;
}

/* Thumb styling for WebKit browsers
    - Colors the slider thumb (the draggable circle) with the secondary color
    - margin-top aligns the thumb vertically with the track
*/
input[type=range].secondary-color::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #87161e; /* Secondary color for the thumb */
  margin-top: -6px; /* Align thumb with track */
  cursor: pointer;
  border: none;
}

/* --- Firefox --- */

/* Track color for Firefox
    - Colors the slider track with the secondary color
*/
input[type=range].secondary-color::-moz-range-track {
  height: 6px;
  background: #87161e; /* Secondary color for the track */
  border-radius: 3px;
}

/* Thumb styling for Firefox
    - Colors the slider thumb with the secondary color
*/
input[type=range].secondary-color::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #87161e; /* Secondary color for the thumb */
  cursor: pointer;
  border: none;
}

/* --- Internet Explorer / Legacy Edge --- */

/* Track styling for IE/Edge (legacy)
    - The track itself is transparent, but the fill-lower and fill-upper pseudo-elements are used for coloring
*/
input[type=range].secondary-color::-ms-track {
  height: 6px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

/* Left side of the track (from min to thumb) in IE/Edge
    - Colored with the secondary color
*/
input[type=range].secondary-color::-ms-fill-lower {
  background: #87161e; /* Secondary color for the filled part of the track */
}

/* Right side of the track (from thumb to max) in IE/Edge
    - Colored with a lighter gray
*/
input[type=range].secondary-color::-ms-fill-upper {
  background: #ccc; /* Unfilled part of the track */
}

/* Thumb styling for IE/Edge
    - Colors the slider thumb with the secondary color
*/
input[type=range].secondary-color::-ms-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #87161e; /* Secondary color for the thumb */
  cursor: pointer;
  border: none;
}



.w3-medium {
    font-size: 15px !important;
}

.w3-hover-zoom:hover {
    transform: scale(1.1);
}