/* General styling for all tabs */
.elementor-widget-n-tabs .e-n-tab-title {
    position: relative;
    display: inline-block;
    padding-right: 30px; /* Space for the arrow */
    text-align: left;
    transition: background-color 0.3s ease; /* Smooth background transition */
    padding: 15px 30px 15px 0px !important;
    line-height: 25px;
}

/* Arrow for inactive tabs (pointing down initially) */
.elementor-widget-n-tabs .e-n-tab-title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%); /* Default pointing down */
    width: 0;
    height: 0;
    border-left: 10px solid transparent; /* Transparent left */
    border-right: 10px solid transparent; /* Transparent right */
    border-top: 10px solid #6708c0; /* Purple arrow pointing down */
    transition: transform 0.7s ease, border-color 0.2s ease; /* Smooth rotation and color change */
}

/* Hover effect for inactive tabs */
.elementor-widget-n-tabs .e-n-tab-title:hover::after {
    /* transform: translateY(-55%);  */
    border-top: 10px solid transparent; 
    border-right: 10px solid transparent;
    border-left: 10px solid white; 
    border-bottom: 10px solid transparent; 
}

/* Active tab arrow (pointing to the right) */
.elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%); /* No rotation needed for active state */
    width: 0;
    height: 0;
    border-top: 10px solid transparent; /* Transparent top */
    border-bottom: 10px solid transparent; /* Transparent bottom */
    border-left: 10px solid white; /* White arrow pointing to the right */
}

.service .react-addon-services .services-part .services-text {
    height: 250px;
}