a{
    overflow-wrap: break-word;
  word-wrap: break-word;
}

[type=button], [type=submit], button {
    background: #E77409 !important;
    color: #fff !important;
    border: solid 1px #E77409 !important;
}

[type=button]:hover, [type=submit]:hover, button:hover {
    background: #000 !important;
}
.elementor a {color: #fff;}
.elementor a:hover {color: #E77409}
.txt-stroke{
    -webkit-text-stroke:2px #fff;
    color:transparent;
}
.elementor-widget-text-editor ul{
    margin-bottom:20px;
    padding-left: 0px;
}
.elementor-widget-text-editor ul li{
    list-style: none;
    position: relative;
    padding-left: 30px;
}
.elementor-widget-text-editor ul li:before{
    content: '__';
    position: absolute;
    left: 0;
    top: -5px;
    letter-spacing: -3px;
}
.txt-orange{
    color: #E77409;
}
.single-post-content p{
    margin-bottom: 40px;
}
.single-post-content blockquote {
    background: #1A1B1E;
    padding: 50px;
    margin: 9px 0px 50px 0px;
    border-radius: 25px;
    font-size: 80%;
    line-height: 1.7;
}
.single-post-content blockquote:before {
    display: block;
    background-image: url(https://breakingbarriersrochdale.com/wp-content/uploads/Quote-Image.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 80px;
    height: 70px;
    content: "";
    margin-bottom: 30px;
}
.single-post-content a {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
    border-bottom: dotted 1px;
}
.single-post-content a:hover{
    color: #E77409;
    border-bottom-color: #E77409;
}
.single-post-content img{
    border-radius: 25px !important;
}
.single-post-content .two-image{
    width: calc(50% - 12px);
  max-width: none;
  margin: 0 0 24px 0;
}
.single-post-content .three-image{
    width: calc(33% - 12px);
  max-width: none;
  margin: 0 0 24px 0;
}
.project-filter .select2-selection {
    color: transparent;
    -webkit-text-stroke: 1px #fff;
}
.project-filter .uc-select-filter__select-wrapper {
    width: 100%;
}
.project-filter .select2 {
    width: 100% !important;
}
.project-container p a {
    border-bottom: 1px dashed #fff !important;
}
/********************************/
/* HOME SERVICE */
/********************************/
.home-service-tabs .ue-list-item-image {
    display: none;
    position: absolute;
    left: 50%;
    /* top: 0; */
    width: 300px;
    z-index: 10;
    transform: translateY(-75%);
}
.home-service-tabs a.ue-list-item:hover .ue-list-item-image {
    display: block;
}
.home-service-tabs a.ue-list-item:hover h3 {
    -webkit-text-stroke:1px #fff;
        color:transparent !important;
}
.home-service-tabs i.fas.fa-arrow-right {
    rotate: -45deg;
}
/********************************/
/* Menu Drop Down */
/********************************/

a.expanded {
/*    -webkit-text-stroke: #e77409 1px; */
    color: #E77409 !important;
}

/********************************/
/* What we do Menu */
/********************************/

#header-service i.fas.fa-arrow-right {rotate: -35deg;}
#header-service .uc_classic_content {box-shadow: none;}
#header-service img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path 0.4s ease-in-out; 
}
#header-service .service-ie:hover h2.ue-title {color: #E77409;}
#header-service .service-ie:hover .uc_classic_content_placeholder {background-color: #E77409;}
#header-service .service-ie:hover .uc_btn {border-color: #E77409;color: #E77409}
#header-service .service-tie:hover h2.ue-title {color: #17BEBB;}
#header-service .service-tie:hover .uc_classic_content_placeholder {background-color: #17BEBB;}
#header-service .service-tie:hover .uc_btn {border-color: #17BEBB;color: #17BEBB}
#header-service .service-td:hover h2.ue-title {color: #7692FF;}
#header-service .service-td:hover .uc_classic_content_placeholder {background-color: #7692FF;}
#header-service .service-td:hover .uc_btn {border-color: #7692FF; color: #7692FF}
#header-service .service-film:hover h2.ue-title {color: #F9FF62;}
#header-service .service-film:hover .uc_classic_content_placeholder {background-color: #F9FF62;}
#header-service .service-film:hover .uc_btn {border-color: #F9FF62; color: #F9FF62}



/* ============================================
   CLIP-PATH HOVER EFFECT
   sharp top-right + bottom-left, rest rounded
   ============================================ */

/* --- BASE STATE --- */

.image-clip img,
#header-service [class*="service-"] img,
.uc_post_image,
.uc_image_carousel_placeholder {
  clip-path: polygon(
    0% 3.6%, 0.586% 1.054%, 2% 0%,
    60% 0%, 60% 0%, 60% 0%,
    60% 0%, 60% 0%, 60% 0%,
    100% 0%, 100% 0%, 100% 0%,
    100% 96.4%, 99.414% 98.946%, 98% 100%,
    52% 100%, 52% 100%, 52% 100%,
    52% 100%, 52% 100%, 52% 100%,
    0% 100%, 0% 100%, 0% 100%
  );
  transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- HOVER STATE --- */

.image-clip img:hover {
  clip-path: polygon(
    0% 18.6%, 0.586% 16.054%, 2% 15%,
    58% 15%, 59.414% 13.946%, 60% 11.4%,
    60% 3.6%, 60.586% 1.054%, 62% 0%,
    100% 0%, 100% 0%, 100% 0%,
    100% 71.4%, 99.414% 73.946%, 98% 75%,
    54% 75%, 52.586% 76.054%, 52% 78.6%,
    52% 96.4%, 51.414% 98.946%, 50% 100%,
    0% 100%, 0% 100%, 0% 100%
  );
}

#header-service [class*="service-"]:hover img {
  clip-path: polygon(
    0% 18.6%, 0.586% 16.054%, 2% 15%,
    58% 15%, 59.414% 13.946%, 60% 11.4%,
    60% 3.6%, 60.586% 1.054%, 62% 0%,
    100% 0%, 100% 0%, 100% 0%,
    100% 71.4%, 99.414% 73.946%, 98% 75%,
    54% 75%, 52.586% 76.054%, 52% 78.6%,
    52% 96.4%, 51.414% 98.946%, 50% 100%,
    0% 100%, 0% 100%, 0% 100%
  );
}

/* Unlimited Elements — Post Grid */
.ue_post_grid_item:hover .uc_post_image {
  clip-path: polygon(
    0% 18.6%, 0.586% 16.054%, 2% 15%,
    58% 15%, 59.414% 13.946%, 60% 11.4%,
    60% 3.6%, 60.586% 1.054%, 62% 0%,
    100% 0%, 100% 0%, 100% 0%,
    100% 71.4%, 99.414% 73.946%, 98% 75%,
    54% 75%, 52.586% 76.054%, 52% 78.6%,
    52% 96.4%, 51.414% 98.946%, 50% 100%,
    0% 100%, 0% 100%, 0% 100%
  );
}

/* Unlimited Elements — Image Carousel */
.uc_carousel_item:hover .uc_image_carousel_placeholder {
  clip-path: polygon(
    0% 18.6%, 0.586% 16.054%, 2% 15%,
    58% 15%, 59.414% 13.946%, 60% 11.4%,
    60% 3.6%, 60.586% 1.054%, 62% 0%,
    100% 0%, 100% 0%, 100% 0%,
    100% 71.4%, 99.414% 73.946%, 98% 75%,
    54% 75%, 52.586% 76.054%, 52% 78.6%,
    52% 96.4%, 51.414% 98.946%, 50% 100%,
    0% 100%, 0% 100%, 0% 100%
  );
}


/********************************/
/* CATEGORY PILLS */
/********************************/

.category-pills .elementor-icon-list-item {
  display: inline-block;
  margin-right: 8px;
}
.category-pills .elementor-post-info__item-prefix,
.category-pills .elementor-post-info__item-separator {
  display: none;
}
.category-pills a {
  padding: 6px 14px;
  border-radius: 50px;
  display: inline-block;
  text-decoration: none;
}

/* Unique background and text colors per category slug */
.category-pills a[href*="film-sound"] {
  background-color: #F9FF62 !important;
  color: #111111 !important;
}
.category-pills a[href*="immersive-experience"] {
  background-color: #E77409 !important;
  color: #ffffff !important;
}
.category-pills a[href*="theatre-in-education"] {
  background-color: #17BEBB !important;
  color: #111111 !important;
}
.category-pills .elementor-post-info__terms-list {
  font-size: 0;
}
.category-pills .elementor-post-info__terms-list a {
  font-size: 18px !important;
  margin-right: 8px;
  margin-bottom: 6px;
}

/********************************/
/* FORMS STYLING */
/********************************/

button.forminator-button.forminator-button-submit {
    padding: 10px 40px !important;
    border-radius: 25px !important;
    border: solid 1px #e8882e !important;
}
button.forminator-button.forminator-button-submit:hover {
    border: solid 1px #e8882e !important;
    color:#e8882e !important;
    background-color: #111 !important;
}
span.forminator-required {
    display: none;
}
.forminator-textarea {
    border: 0px !important;
    border-bottom: 1px solid #fff !important;
}
.forminator-module-edit-link {
    display: none !important;
}

/********************************/
/* FOOTER FORMS STYLING */
/********************************/

#footer-form button.forminator-button.forminator-button-submit {
	padding: 10px 40px !important;
	border-radius: 25px !important;
	border: solid 1px #e8882e !important;
}
#footer-form button.forminator-button.forminator-button-submit:hover {
	border: solid 1px #e8882e !important;
	color:#e8882e !important;
    background-color: #FFFCF6 !important;
}
#footer-form .forminator-textarea {
	border: 0px !important;
	border-bottom: 1px solid #111 !important;
}
#footer-form .forminator-consent__label a {
    color: #111;
}
#footer-form .forminator-consent__label a:hover {
    color: #e8882e;
}


/********************************/
/* Legal Pages Styling */
/********************************/

#legal p, #legal ul{
    width: 50%;
    margin-left: 50%;
    padding-bottom: 10px;
}
#legal h3{
    font-size: 14.4px;
    text-transform: uppercase;
    border-bottom: 1px solid;
    width: 20%;
    margin-top: 100px;
    padding-bottom:20px;
    letter-spacing: 0.1em;
    margin-bottom: -30px;
}
#legal a {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
    border-bottom: dotted 1px;
}
#legal a:hover{
    color: #E77409;
    border-bottom-color: #E77409;
}
#legal ul{
    margin-bottom:20px;
    padding-left: 0px;
}
#legal ul li{
    list-style: none;
    position: relative;
    padding-left: 30px;
}
#legal ul li:before{
    content: '__';
    position: absolute;
    left: 0;
    top: -5px;
    letter-spacing: -3px;
}
#legal table{
    width:50%;
    margin-left: 50%;
}

/********************************/
/* Team member styling */
/********************************/

span.ue_taxonomy_item_num_posts {
    padding-bottom: 10px;
    font-size: 12px !important;
}



/********************************/
/* Event Read More styling */
/********************************/

.event-end-message a{
    border-bottom: dotted 1px #fff;
}
/* Remove default margins on the post content container bottom */
.readmore-target-box {
    margin-bottom: 0 !important;
}

/* Custom fade layer blending cleanly into #FFFCF6 background */
.readmore-fade-overlay {
    width: 100%;
    height: 100px; 
    margin-top: -100px; 
    position: relative;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(255, 252, 246, 0) 0%, #FFFCF6 100%);
    transition: opacity 0.3s ease;
    pointer-events: none; 
}

/* Custom Button UI Layout with Flexbox positioning */
.readmore-action-btn {
    background-color: transparent;
    color: #E77409;
    padding: 8px 30px;
    border: 2px solid #E77409;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    margin-top: 20px;
    display: inline-flex; /* Leverages flexbox for side-by-side alignment */
    align-items: center; /* Vertically centers the text and arrow */
    justify-content: center;
    gap: 10px; /* Precise gap separation spacing between text and arrow */
    outline: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
}

/* Seamless CSS Arrow Icon geometry shapes creation */
.btn-arrow {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid #E77409; /* Matches theme orange color */
    border-bottom: 2px solid #E77409;
    transform: rotate(45deg); /* Points arrow downwards initially */
    margin-top: -3px; /* Visual adjustment centering fix */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Hover and Focus interaction state settings rules modifications */
.readmore-action-btn:hover,
.readmore-action-btn:focus {
    background-color: #E77409;
    color: #ffffff;
}

/* Flips arrow borders to white on hover interaction */
.readmore-action-btn:hover .btn-arrow,
.readmore-action-btn:focus .btn-arrow {
    border-color: #ffffff;
}

/* Rotates the arrow into an upward facing arrow angle when expanded */
.btn-arrow.arrow-rotated {
    transform: rotate(-135deg); /* Spins 180 degrees backwards smoothly */
    margin-top: 3px; /* Counter-balancing adjustment fix */
}

/* Micro-interaction feedback click tap animation scaling down */
.readmore-action-btn:active {
    transform: scale(0.97);
}



/********************************/
/* Footer Styling */
/********************************/

footer form span.elementor-button-icon {
    rotate: -45deg;
    padding-left: 5px;
}
.credit {
    color: #92929252 !important;
}
.credit a {
    color: #92929252 !important;
    border-bottom: dashed 1px;
     width: fit-content !important;
}
.credit a:hover {
    color: #fff !important;
    border-bottom: dashed 1px #fff;
    transition: 0.3s;
}


