@charset "UTF-8";
/* CSS Document */




.workheight{
	min-height: 1000px;
	
	margin-bottom: 200px;
	
}

.workwrap2{
	margin-top: 35px;

}
/*--image hover--*/
.image-link {
    text-decoration: none; /* Removes underline from links */
    color: inherit; /* Inherits text color from parent elements */
    display: block; /* Ensures the link takes up the full container space */
}

.image-container {
    position: relative;
    width: 100%;
	height: auto;
	box-shadow: 10 10 10 10 #000;


    overflow: hidden;
	
}


.img-fluid {
    width: 100%;
	   height: auto;
    display: block;
    box-shadow: inset 0 50px #000000;
	
    transition: transform 0.5s ease;
}

.overlay {
    position: absolute;
    bottom: 0;
	height:50%;
    background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.7));/* Dark overlay for better readability */
    color: white;
	font-size:1.25rem;
	font-weight: 600;
		font-family: "Poppin", system-ui;
    width: 100%;
    transform: translateY(100%);
    transition: transform 0.5s ease;
    text-align:center;
	  justify-content:center;
	  display: flex;
  align-items: flex-end; /* Aligns content to the bottom */

    padding: 40px;
}
.overlay2 {
	
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
	
    display: flex;
    justify-content: center;
	text-align: center;
	
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.image-container:hover .overlay{  transform: translateY(0);}


 .image-container:hover .overlay2 {
    opacity: 1;
}

.image-container:hover .img-fluid {
    transform: scale(1.05);
}


/*--image hover--*/
.split-text {
   
    font-weight: 500;
    overflow: hidden;  /* Ensure overflowing content is hidden */
    display: block;
	text-align: center;
	
	
}

.split-text span {
	color:#121B42;
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    animation: slideIn 0.5s forwards;
}

.split-text span:nth-child(1) { animation-delay: 0.1s; }
.split-text span:nth-child(2) { animation-delay: 0.15s; }
.split-text span:nth-child(3) { animation-delay: 0.2s; }
.split-text span:nth-child(4) { animation-delay: 0.25s; }
.split-text span:nth-child(5) { animation-delay: 0.3s; }
.split-text span:nth-child(6) { animation-delay: 0.35s; }
.split-text span:nth-child(7) { animation-delay: 0.4s; }
.split-text span:nth-child(8) { animation-delay: 0.45s; }
.split-text span:nth-child(9) { animation-delay: 0.5s; }
.split-text span:nth-child(10) { animation-delay: 0.55s; }
.split-text span:nth-child(11) { animation-delay: 0.6s; }
.split-text span:nth-child(12) { animation-delay: 0.66s; }
.split-text span:nth-child(13) { animation-delay: 0.7s; }
.split-text span:nth-child(14) { animation-delay: 0.75s; }
.split-text span:nth-child(15) { animation-delay: 0.8s; }
.split-text span:nth-child(16) { animation-delay: 0.85s; }
.split-text span:nth-child(17) { animation-delay: 0.9s; }
.split-text span:nth-child(18) { animation-delay: 0.95s; }
.split-text span:nth-child(19) { animation-delay: 1.1s; }
.split-text span:nth-child(20) { animation-delay: 1.15s; }
.split-text span:nth-child(21) { animation-delay: 1.2s; }
.split-text span:nth-child(22) { animation-delay: 1.25s; }
.split-text span:nth-child(23) { animation-delay: 1.3s; }
.split-text span:nth-child(24) { animation-delay: 1.35s; }
.split-text span:nth-child(25) { animation-delay: 1.4s; }
.split-text span:nth-child(26) { animation-delay: 1.45s; }
.split-text span:nth-child(27) { animation-delay: 1.5s; }
.split-text span:nth-child(28) { animation-delay: 1.55s; }
.split-text span:nth-child(29) { animation-delay: 1.6s; }
.split-text span:nth-child(30) { animation-delay: 1.65s; }
.split-text span:nth-child(31) { animation-delay: 1.7s; }
.split-text span:nth-child(32) { animation-delay: 1.75s; }
.split-text span:nth-child(33) { animation-delay: 1.8s; }
.split-text span:nth-child(34) { animation-delay: 1.85s; }
.split-text span:nth-child(34) { animation-delay: 1.9s; }
.split-text span:nth-child(34) { animation-delay: 1.95s; }


@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.highlight-animation {
    
	 height: 15px;
	left: 0;
    margin-bottom: 0.15em;
    position: absolute;
    right: 0;
	top:45px;
    z-index: -1;
    transition-property: right;
    white-space: nowrap;  /* Ensures the text doesn't wrap and the animation runs smoothly across */
    background: linear-gradient(to right, yellow 100%, transparent 0%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    animation: highlight 1s forwards; /* Animation stops and stays at the final state */
	animation-delay: 2s;

	
	
}
.highlight-animation2 {
    

		left: 0;
    position: absolute;
    right: 0;

    z-index: -1;
    transition-property: right;
    white-space: nowrap;  /* Ensures the text doesn't wrap and the animation runs smoothly across */
    background: linear-gradient(to right, yellow 100%, transparent 0%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    animation: highlight 1s forwards; /* Animation stops and stays at the final state */
	animation-delay: 2.6s;

	
	
}

@keyframes highlight {
    from {
        background-size: 0% 100%;
    }
    to {
        background-size: 100% 100%;
    }
}