/* Table Base Structure */
.my-custom-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    font-size:17px;
}

/* Header Styling */
.my-custom-table th {
    background-color: #1d2b4e;
    color: #ffffff;
    text-align: left;
    padding: 12px 15px;
    font-weight: bold;
}

/* Cell Styling */
.my-custom-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #dddddd;
    color: #333333;
}

/* Alternating Row Colors (Zebra Striping) */
.my-custom-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

/* Row Hover Effect */
.my-custom-table tbody tr:hover {
    background-color: #f1f1f1;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .my-custom-table {
        overflow-x: auto;
        display: block;
        width: 100%;
    }
}

.dialog-lightbox-message
 {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}





.widget-image-caption {
    font-size: 14px;
    color:#4e4e4e;
    text-align:left;
}



.elementor-sticky--active {
    z-index: 10;
}


/* Prevent Elementor popups from showing focus outlines on hover navigation links */
.elementor-popup-modal a:focus,
.elementor-popup-modal a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.pink-to-purple h2{
 background: linear-gradient(to right, #AF1062, #6C3B80);
  
  /* Clip the background gradient strictly to the text characters */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Make the original text color transparent so the gradient shows through */
  -webkit-text-fill-color: transparent;
  color: transparent; 
  
  /* Optional: Ensures the heading wraps properly without clipping artifacts */
  display: inline-block;
}




.mega-pink-btm-fade div{
    position: relative; 
}
.mega-pink-btm-fade div::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(175, 16, 98, 0) 30%, rgba(175, 16, 98, 0.5) 100%);
    pointer-events: none;
    z-index: 1;
}



.banner-image div,
.banner-image-pink div{
    position: relative; 
}



.banner-image figcaption,
.banner-image-pink figcaption{
    position: absolute;
    bottom: 0;
    color: white;
    z-index: 2;
    right: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2em;
    padding: 20px 30px;
}
@media (max-width: 1024px) {
    .banner-image figcaption,
    .banner-image-pink figcaption{
        padding: 15px 20px;
    }   
}

.banner-image-pink div::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(175, 16, 98, 0) 30%, rgba(175, 16, 98, 0.5) 100%);
    pointer-events: none;
    z-index: 1;
}



.elementor-widget-text-editor ul{
	margin: 0 0 1em 0;
}

.elementor-widget-text-editor ul li{
	margin: 0 0 0.75em 0;
}


.animated-link a {
  display: inline;
  text-decoration: none;
  color: #333;
  
  /* Adds the 1px gap below the text */
  padding-bottom: 2px;
  
  /* Forces padding and backgrounds to apply to every wrapped line */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  
  /* Updated to your custom colour */
  background-image: linear-gradient(to right, #af1062, #af1062);
  background-repeat: no-repeat;
  
  /* Default exit state: anchor line to the right so it shrinks to the right */
  background-position: bottom right;
  background-size: 0% 1px;
  
  /* Smooth transition for sizing */
  transition: background-size 0.4s ease;
}

/* On hover: grow from left to right */
.animated-link:hover a {
  /* Snap position to the left instantly so it expands to the right */
  background-position: bottom left; 
  background-size: 100% 1px;
}


.animated-project-image-link img {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* Container remains the same */
.animated-project-image-link a:has(img) {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* Image zoom transition */
.animated-project-image-link a:has(img) img {
  display: block;
  transition: transform 0.4s ease;
}

/* Hover: Zoom the image in slightly */
.animated-project-image-link a:has(img):hover img {
  transform: scale(1.1);
}

/* Active: Zoom the image in more on click */
.animated-project-image-link a:has(img):active img {
  transform: scale(1.15);
}

/* White Box & Text Container: Moves left on hover */
.animated-project-image-link a:has(img)::before {
  content: "View Project";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 52px; /* Hidden completely behind the cross box at first */
  height: 52px;
  background-color: white;
  z-index: 1; /* Sits below the cross */
  overflow: hidden;
  transition: width 0.4s ease; /* Expands to the left */

  /* Text styling */
  font-family: sans-serif;
  font-size: 14px;
  font-weight: normal; /* Removed bold */
  color: #1D2B4E; /* New dark blue colour */
  white-space: nowrap;
  
  /* Alignment */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 20px; /* Space on the left edge of the expanded box */
}

/* Hover: Expand the text box to the left */
.animated-project-image-link a:has(img):hover::before {
  width: 170px; /* Adjust based on your text length */
}

/* Solid White Box + Grey Cross */
.animated-project-image-link a:has(img)::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 52px;
  height: 52px;
  z-index: 2; /* Layered directly on top to hide text underneath */
  transition: background 0.4s ease, transform 0.1s ease;
  
  /* Stacks your original gradient lines over a solid white background block */
  background: 
    linear-gradient(#ccc, #ccc) no-repeat right 14px bottom 25.5px / 24px 2px, 
    linear-gradient(#ccc, #ccc) no-repeat right 25.5px bottom 14px / 2px 24px,
    linear-gradient(white, white); /* Solid white base layer */
}

/* Hover: Solid White Box + Pink Cross */
.animated-project-image-link a:has(img):hover::after {
  background: 
    linear-gradient(#AF1062, #AF1062) no-repeat right 14px bottom 25.5px / 24px 2px, 
    linear-gradient(#AF1062, #AF1062) no-repeat right 25.5px bottom 14px / 2px 24px,
    linear-gradient(white, white); /* Keeps background white on hover */
}

/* Active: Shrink the cross while image zooms */
.animated-project-image-link a:has(img):active::after {
  transform: scale(0.85);
}



.job-list-item:hover,.job-list-item:active{
  background-color:#3A8DDE!important;
}

.job-list-item:hover h2,.job-list-item:active h2{
  color:#ffffff!important;
}
.job-list-item:hover div,.job-list-item:active div{
  color:#ffffff;
}
.job-list-item:hover .elementor-button,.job-list-item:active .elementor-button{
  background-color:#ffffff;
  color:#1d2b4e;
  border-color:#ffffff;
}