.pagination {
    /* Centers the pagination container */
    display: flex;
    justify-content: end;
    /* Adds space above and below the pagination */
    padding: 20px 0;
}

.pagination .page-link {
    /* Color for the page numbers */
    color: #36348E;
    /* Assuming this is the tone of your image */
    background-color: #fff;
    /* White background */
    border-color: #ddd;
    /* Light grey border */
}

.pagination .page-link:hover,
.pagination .page-item.active .page-link {
    /* Hover and active background color */
    background-color: #36348E;
    /* Assuming this is the tone of your image */
    /* Text color when hovered/active */
    color: #fff;
    /* White text */
    border-color: #36348E;
    /* Same as background color */
}

.pagination .page-item.disabled .page-link {
    /* Style for disabled page links */
    color: #ccc;
    /* Light grey for disabled links */
    background-color: #fff;
    /* White background */
    border-color: #ddd;
    /* Light grey border */
}

.scroll_view {
    width: 100%;
    height: 550px;
    overflow: scroll;
    padding: 40px;
    /* background: #f6f6f6; */
    border-radius: 10px;
    /* color: black; */
}

.loading-image {
    /* width: 38px;
height: 36px; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

.switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 20px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: black;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 50%;
}

.switch input:checked+.slider {
    background-color: red;
}

.switch input:checked+.slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
}

.elementor-index-list {
    flex-wrap: wrap;
    justify-content: left;
    gap: 20px 0;
}


/* Accordion Styles */
.accordion-item {
    margin-bottom: 0.5em !important;
  }
  
  .accordion-button {
    background-color: #FFC53A !important; /* Default state color - Yellow */
    color: #000 !important;
    transition: background-color 0.3s ease, color 0.3s ease !important; /* Smooth transition for color and background */
  }
  
  /* Arrow color for default state */
  .accordion-button::after {
    color: black !important; /* Black arrow color for default state */
    transition: color 0.3s ease !important; /* Smooth transition for arrow color */
  }
  
  /* Hover and active state for accordion button */
  .accordion-button:hover, 
  .accordion-button:not(.collapsed) {
    background-color: #36348E !important; /* Hover and active state color - Purple */
    color: white !important; /* Text color for hover and active state */
  }
  
  /* Arrow color for hover and active state */
  .accordion-button:hover::after,
  .accordion-button:not(.collapsed)::after {
    color: white !important; /* White arrow color for hover and active state */
  }
  
  .accordion-body {
    background-color: white !important;
    color: black !important;
  }
  
  /* Override button background */
  .fancybox-button {
    background-color: #36348E !important; /* Dark blue background */
    color: #FFC53A !important; /* Yellow text color */
    padding: 10px !important;
}

/* Hover and focus state */
.fancybox-button:hover,
.fancybox-button:focus {
    background-color: #2d2c75 !important; /* Slightly darker blue on hover/focus */
    color: #ffd84d !important; /* Slightly lighter yellow on hover/focus */
}

/* Active state */
.fancybox-button:active {
    background-color: #242378 !important; /* Even darker blue on active */
    color: #ffe66d !important; /* Even lighter yellow on active */
}

.fancybox-button svg {
    fill: #FFC53A !important; /* Adjust the fill color as needed */
}


.slick-arrow {
    background: transparent !important; /* Remove the background color */
    color: #FFC53A !important; /* Set the color for the icon */
    font-size: 0 !important; /* Hide the default arrow */
  }
  
  /* Styles for the previous arrow icon */
  .slick-prev:before {
    content: '←' !important; /* Custom content for the arrow */
    font-size: 20px !important; /* Size of the custom arrow */
    color: #FFC53A !important; /* Color of the custom arrow */
  }

  /* Styles for the next arrow icon */
  .slick-next:before {
    content: '→' !important; /* Custom content for the arrow */
    font-size: 20px !important; /* Size of the custom arrow */
    color: #FFC53A !important; /* Color of the custom arrow */
  }

  /* Hover state for both arrows */
  .slick-arrow:hover {
    background-color: transparent !important; /* Keep background transparent on hover */
    color: #FFD700 !important; /* Example hover color, slightly lighter yellow */
  }

  .slick-prev:hover:before,
  .slick-next:hover:before {
    color: #FFD700 !important; /* Example hover color, slightly lighter yellow */
  }

  /* Padding and shape for the arrows */
  .slick-prev, .slick-next {
    padding: 10px !important; /* Padding for larger click area */
    width: 40px !important; /* Set a specific width for the clickable area */
    height: 40px !important; /* Set a specific height for the clickable area */
    display: flex !important; /* Use flexbox for centering the icon */
    align-items: center !important;
    justify-content: center !important;
  }

  /* Adjust the positioning of the arrows if needed */
  .slick-prev {
    left: -25px !important; /* Adjust this value as needed */
    z-index: 25;
  }
  .slick-next {
    right: -38px !important; /* Adjust this value as needed */
    z-index: 25;
  }

