/* Antilia Construction Business HTML-5 Template */

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header / Two / Three
5. Main Slider / Slider Two / Slider Three
6. Welcome One / Two / Three
7. Marketing One / Two
8. Team One
9. Services One / Two
10. Project One / Two / Three / Four
11. Progress One
12. News One / Two
13. CTA One / Two / Three
14. Main Footer
15. Steps One
16. Default One
17. Testimonial One / Two / Three
18. Main Footer / Footer Style Two
19. Counter One
20. Faq One
21. Info One
22. History One
23. Price One
24. Privacy Policy
25. Terms & Condition
26. Team Detail
27. Service Detail
28. Project Detail
29. Our Shop
30. Shop Detail
31. Shoping Cart
32. CheckOut
33. Register
34. Coming Soon
35. Blog Widgets
36. Blog Classic
37. Comment Form
38. Comment Box
39. Not Found
40. Contact Info
41. Map
42. Contact Form

**********************************************/

/* 

	font-family: 'Anybody', sans-serif;

*/

/*** 

====================================================================
	Root Code Variables
====================================================================

 ***/

.theme_color {
	color: var(--main-color);
}

/* Theme Color */

:root {

	/* #a97300 in decimal RGB */
	--main-color: #cd4602;
	--main-color-rgb: 169, 115, 0;

	/* #444444 in decimal RGB */
	--color-two: rgb(68, 68, 68);
	--color-two-rgb: 68, 68, 68;

	/* #5f5f5f in decimal RGB */
	--color-three: rgb(95, 95, 95);
	--color-three-rgb: 95, 95, 95;

	/* #0a0a0a in decimal RGB */
	--color-four: rgb(10, 10, 10);
	--color-four-rgb: 10, 10, 10;

	/* #efefef in decimal RGB */
	--color-five: rgb(239, 239, 239);
	--color-five-rgb: 239, 239, 239;

	/* #ffffff in decimal RGB */
	--white-color: rgb(255, 255, 255);
	--white-color-rgb: 255, 255, 255;

	/* #000000 in decimal RGB */
	--black-color: rgb(0, 0, 0);
	--black-color-rgb: 0, 0, 0;

	/* Fonts */
	--font-family-Anybody: 'Anybody', sans-serif;

}

/*** 

====================================================================
	Reset
====================================================================

 ***/

* {
	margin: 0px;
	padding: 0px;
	border: none;
	outline: none;
}

/*** 

====================================================================
	Global Settings
====================================================================

***/


/* width */
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background-color: var(--color-two);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-three);
}

body {
	font-family: var(--font-family-Anybody);
	color: var(--color-five);
	line-height: 1.6em;
	font-weight: 400;
	font-size: 14px;

	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
}

i {
	font-style: normal;
}

.bordered-layout .page-wrapper {
	padding: 0px 50px 0px;
}

a {
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	color: var(--main-color);
}

/* Preloader */

.preloader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 999999999;
	background-color: #ffffff;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(../images/icons/preloader.svg);
	background-size: 80px;
}

button,
a:hover,
a:focus,
a:visited {
	text-decoration: none;
	outline: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	position: relative;
	margin: 0px;
	background: none;
	font-weight: 700;
	color: var(--black-color);
}

input,
button,
select,
textarea {}

textarea {
	overflow: hidden;
}

.text,
p {
	position: relative;
	line-height: 28px;
	font-size: 16px;
	color: var(--color-two);
}

/* Typography */

h1 {
	line-height: 90px;
	font-size: 80px;
}

h2 {
	line-height: 65px;
	font-size: 55px;
}

h3 {
	line-height: 40px;
	font-size: 30px;
}

h4 {
	line-height: 34px;
	font-size: 24px;
}

h5 {
	line-height: 30px;
	font-size: 20px;
}

h6 {
	line-height: 28px;
	font-size: 18px;
}

.auto-container {
	position: static;
	max-width: 1320px;
	padding: 0px 15px;
	margin: 0 auto;
}

.page-wrapper {
	position: relative;
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
	min-width: 300px;
}

ul,
li {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

img {
	display: inline-block;
	max-width: 100%;
}

.theme-btn {
	cursor: pointer;
	display: inline-block;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.centered {
	text-align: center;
}

::-webkit-input-placeholder {
	color: inherit;
}

::-moz-input-placeholder {
	color: inherit;
}

::-ms-input-placeholder {
	color: inherit;
}

/***

====================================================================
	Scroll To Top style
====================================================================

***/

.progress-wrap {
	position: fixed;
	right: 30px;
	bottom: 40px;
	height: 35px;
	width: 35px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	color: var(--main-color);
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.20);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
	transform: translateY(15px);
	-webkit-transform: translateY(15px);
	-moz-transform: translateY(15px);
	-ms-transform: translateY(15px);
	-o-transform: translateY(15px);
}

.progress-wrap::after {
	position: absolute;
	content: '\f176';
	font-family: "Font Awesome 5 Free";
	text-align: center;
	line-height: 35px;
	font-size: 15px;
	stroke: var(--main-color);
	left: 0;
	top: 0;
	height: 35px;
	width: 35px;
	cursor: pointer;
	display: block;
	font-weight: 700;
	z-index: 1;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
	font-size: 13px;
}

.progress-wrap svg path {
	fill: none;
}

.progress-wrap svg.progress-circle path {
	stroke: var(--main-color);
	stroke-width: 4;
	box-sizing: border-box;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}

.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.progress-wrap.style2::after {
	color: var(--thm-color-2);
}

.progress-wrap.style2 svg.progress-circle path {
	stroke: var(--thm-color-2);
}

.progress-wrap.style3::after {
	color: var(--thm-color-3);
}

.progress-wrap.style3 svg.progress-circle path {
	stroke: var(--thm-color-3);
}

/* List Style One */

.list-style-one {
	position: relative;
}

.list-style-one li {
	position: relative;
	color: var(--white-color);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8em;
	margin-bottom: var(--margin-bottom-10);
	padding-left: var(--padding-left-30);
}

.list-style-one li a {
	position: relative;
	color: var(--white-color);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.list-style-one li a:hover {
	color: var(--main-color);
}

.list-style-one li .icon {
	position: absolute;
	left: 0px;
	top: 5px;
	color: var(--main-color);
	font-size: 18px;
	line-height: 1em;
	font-weight: 300;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

/* Btn Style One */

.btn-style-one {
	position: relative;
	font-weight: 600;
	overflow: hidden;
	text-align: center;
	border-radius: 2px;
	padding: 15px 30px 15px 40px;
	font-size: 16px;
	display: inline-block;
	color: var(--white-color);
	text-transform: uppercase;
	border: 1px solid var(--white-color);
}

.btn-style-one:before {
	-webkit-transition-duration: 800ms;
	transition-duration: 800ms;
	position: absolute;
	content: "";
	top: 0%;
	left: 0%;
	width: 10px;
	bottom: 0px;
	z-index: 1;
	background-color: var(--white-color);
}

.btn-style-one:hover:before {
	width: 100%;
}

.btn-style-one .btn-wrap {
	position: relative;
	z-index: 1;
	float: left;
	overflow: hidden;
	display: inline-block;
}

.btn-style-one .btn-wrap .text-one {
	position: relative;
	display: block;
	color: var(--white-color);
	transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.btn-style-one:hover .btn-wrap .text-one:first-child {
	-webkit-transform: translateY(-150%);
	-ms-transform: translateY(-150%);
	transform: translateY(-150%);
}

.btn-style-one .btn-wrap .text-two {
	position: absolute;
	top: 100%;
	display: block;
	color: var(--color-six);
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.btn-style-one:hover .btn-wrap .text-two {
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.btn-style-one:hover .btn-wrap .text-two {
	color: var(--color-two);
}

.btn-style-one:hover {}

.btn-style-one:hover:before {
	top: -40%;
}

/* Btn Style Two */

.btn-style-two {
	position: relative;
	font-weight: 600;
	overflow: hidden;
	text-align: center;
	border-radius: 2px;
	font-size: 16px;
	display: inline-block;
	padding: 16px 30px 16px 40px;
	color: var(--white-color);
	text-transform: uppercase;
	background-color: var(--main-color);
}

.btn-style-two:before {
	-webkit-transition-duration: 800ms;
	transition-duration: 800ms;
	position: absolute;
	width: 10px;

	content: "";
	top: 5px;
	left: 0px;
	bottom: 5px;

	z-index: 1;
	background-color: var(--white-color);
}

.btn-style-two:hover:before {

	width: 100%;
	background-color: var(--black-color);
}

.btn-style-two .btn-wrap {
	position: relative;
	z-index: 1;
	float: left;
	overflow: hidden;
	display: inline-block;
}

.btn-style-two .btn-wrap .text-one {
	position: relative;
	display: block;
	color: var(--white-color);
	transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.btn-style-two:hover .btn-wrap .text-one:first-child {
	-webkit-transform: translateY(-150%);
	-ms-transform: translateY(-150%);
	transform: translateY(-150%);
}

.btn-style-two .btn-wrap .text-two {
	position: absolute;
	top: 100%;
	display: block;
	color: var(--white-color);
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.btn-style-two:hover .btn-wrap .text-two {
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.btn-style-two:hover .btn-wrap .text-two {}

.btn-style-two:hover {}

.btn-style-two:hover:before {}

/* Btn Style Three */

.btn-style-three {
	position: relative;
	font-weight: 600;
	overflow: hidden;
	text-align: center;
	border-radius: 2px;
	font-size: 16px;
	display: inline-block;
	padding: 17px 30px 16px 40px;
	color: var(--black-color);
	text-transform: uppercase;
	border: 1px solid var(--black-color);
}

.btn-style-three:before {
	-webkit-transition-duration: 800ms;
	transition-duration: 800ms;
	position: absolute;
	width: 7px;

	content: "";
	top: 5px;
	left: 0px;
	bottom: 5px;

	z-index: 1;
	background-color: var(--black-color);
}

.btn-style-three:hover:before {

	width: 100%;
	background-color: var(--black-color);
}

.btn-style-three .btn-wrap {
	position: relative;
	z-index: 1;
	float: left;
	overflow: hidden;
	display: inline-block;
}

.btn-style-three .btn-wrap .text-one {
	position: relative;
	display: block;
	color: var(--black-color);
	transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.btn-style-three:hover .btn-wrap .text-one:first-child {
	-webkit-transform: translateY(-150%);
	-ms-transform: translateY(-150%);
	transform: translateY(-150%);
}

.btn-style-three .btn-wrap .text-two {
	position: absolute;
	top: 100%;
	display: block;
	color: var(--white-color);
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.btn-style-three:hover .btn-wrap .text-two {
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.btn-style-three:hover .btn-wrap .text-two {}

.btn-style-three:hover {}

.btn-style-three:hover:before {}

img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

/*** 

====================================================================
	Section Title
====================================================================

***/

.sec-title {
	position: relative;
	z-index: 2;
	margin-bottom: 40px;
}

.sec-title_icon {
	position: relative;
	-webkit-animation: icon-bounce 0.8s ease-out infinite;
	animation: icon-bounce 0.8s ease-out infinite;
}

.sec-title_title {
	position: relative;
	font-weight: 700;
	display: block;
	font-size: 16px;
	letter-spacing: 1px;
	margin-top: 20px;
	color: var(--main-color);
	text-transform: uppercase;
}

.sec-title_heading {
	margin-top: 15px;
	font-weight: 400;
	color: var(--black-color);
	text-transform: capitalize;
}

.sec-title_text {
	line-height: 28px;
	font-size: 16px;
	margin-top: 20px;
	color: var(--color-two);
}

.sec-title.light .sec-title_text,
.sec-title.light .sec-title_heading {
	color: var(--white-color);
}

.sec-title.centered {
	text-align: center !important;
}

.sec-title.centered .separator {
	margin: 0 auto;
}

/* Custom Select */

.form-group .ui-selectmenu-button.ui-button {
	top: -2px;
	width: 100%;
	border: 0px;
	padding: 17px 25px;
	font-weight: 500;
	line-height: 28px;
	font-size: 14px;
	background: none;
	border-radius: 0px;
	color: rgba(255, 255, 255, .80);
	border: 1px solid rgba(255, 255, 255, .4);
}

.form-group .ui-button .ui-icon {
	background: none;
	position: relative;
	top: 3px;
	text-indent: 0px;
	color: #a5a5a5;
}

.form-group .ui-button .ui-icon:before {
	font-family: 'FontAwesome';
	content: "\f0d7";
	position: absolute;
	right: 0px;
	top: 2px !important;
	top: 10px;
	height: 22px;
	display: block;
	line-height: 20px;
	font-size: 18px;
	font-weight: normal;
	text-align: center;
	z-index: 5;
	color: var(--color-fiftyfour);
}

.ui-menu .ui-menu-item {
	font-size: 16px;
}

.ui-menu .ui-menu-item:last-child {
	border: none;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
	background-color: var(--main-color) !important;
	border-color: var(--main-color) !important;
}

.ui-menu .ui-menu-item-wrapper {
	position: relative;
	display: block;
	padding: 8px 20px;
	line-height: 24px;
	font-size: 14px;
}

.ui-menu-item:hover {
	background-color: var(--color-two);
}

/* Cursor */

.cursor {
	position: fixed;
	background-color: var(--main-color);
	width: 10px;
	height: 10px;
	border-radius: 100%;
	z-index: 1;
	-webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
	transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 10000;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.cursor.active {
	opacity: 1;
	-webkit-transform: scale(0);
	transform: scale(0);
}

.cursor.menu-active {
	opacity: 1;
	-webkit-transform: scale(0);
	transform: scale(0);
}

.cursor.hovered {
	opacity: 1;
}

.cursor-follower {
	position: fixed;
	border: 0.5px solid var(--main-color);
	width: 30px;
	height: 30px;
	border-radius: 100%;
	z-index: 1;
	-webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background;
	transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 10000;
	-webkit-transform: translate(2px, 2px);
	transform: translate(2px, 2px);
}

.cursor-follower.active {
	opacity: 1;
	-webkit-transform: scale(2);
	transform: scale(2);
}

.cursor-follower.menu-active {
	opacity: 1;
	-webkit-transform: scale(2);
	transform: scale(2);
}

.cursor-follower.hovered {
	opacity: 1;
}

/* Cursor End */

.xs-sidebar-group .close-button {
	font-family: "Font Awesome 6 Free"; /* Changed from Flaticon to Font Awesome */
	color: var(--color-two);
	font-size: 24px;
	font-weight: 900;
}

.newsletter-popup-area-section {
	display: none;
}






















/*** 
=============================================
   Project Page One Css
=============================================
***/
.project-form-area{
    position: relative;
    display: block;
    background: #ffffff;
    padding: 68px 0 70px;
    border-bottom: 1px solid #e5e5e5;
}
.project-form-area .shape1{
    position: absolute;
    left: 100px;
    bottom: -70px;
    z-index: 1;
}

.project-form-box{
    position: relative;
    display: block;
    margin-left: -15px;
    margin-right: -15px;
    z-index: 2;
}
.project-form-box .single-box{
    position: relative;
    display: block;
    float: left;
    max-width: 20%;
    width: 100%;
    padding: 0 15px 0;
}
.project-form-box .single-box .inner{
    position: relative;
    display: block;
}
.project-form-box .single-box .inner h5{
    color: var(--thm-black);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 11px;
}


.project-form-box form input[type="text"],
.project-form-box form input[type="email"],
.project-form-box form textarea{
    position: relative;
    display: block;   
    background: #ffffff;
    width: 100%;
    height: 50px;
    border: 1px solid #e5e7ec;
    color: #808288;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
    transition: all 500ms ease;
    font-family: var(--thm-font);
}
.project-form-box form input[type="text"]:focus{
    color: #808288;
    border-color: var(--thm-base); 
}
.project-form-box form input[type="text"]::-webkit-input-placeholder {
    color: #808288;
}
.project-form-box form input[type="text"]:-moz-placeholder {
    color: #808288;
}
.project-form-box form input[type="text"]::-moz-placeholder {
    color: #808288;
}
.project-form-box form input[type="text"]:-ms-input-placeholder {
    color: #808288;
}


.project-form-box button {
    display: block;
    width: 100%;
    line-height: 50px;
    border-radius: 5px;
    margin-top: 29px;
}
.project-form-box button:before {
    border-radius: 5px;
}
.project-form-box button:after {
    border-radius: 5px;
}






/*** 
=============================================
   Project Page One CSS - Fixed Height Cards with Professional Hover Effects
=============================================
***/
.project-page-one{
    position: relative;
    display: block;
    background: #ffffff;
    padding: 50px 0 50px;
}
.project-page-one .shape1 {
    position: absolute;
    top: -550px;
    right: -100px;
}

.project-page-one .row{
    position: relative;
    z-index: 1;
    /* Ensure equal height columns */
    display: flex;
    flex-wrap: wrap;
}

.project-page-one .row > [class*="col-"] {
    display: flex;
    margin-bottom: 30px;
}

.project-block{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 520px; /* Fixed minimum height */
    transform: translateY(0px);
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
    z-index: 10;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #ffffff;
}

.project-block:hover{
    transform: translateY(-8px); 
    transition: all 0.3s ease-in-out;  
    box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--thm-base-rgb, 79, 70, 229), 0.15);
}

.project-block .img-holder{
    position: relative;
    display: block;
    height: 280px; /* Fixed height for image area */
    overflow: hidden;
    flex-shrink: 0; /* Prevent shrinking */
}

.project-block .img-holder .inner{
    position: relative;
    display: block;
    overflow: hidden;
    height: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.project-block .img-holder .inner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%);
    transition: all 0.4s ease;
    opacity: 0;
    z-index: 1;
}

.project-block:hover .img-holder .inner:before{
    opacity: 1;
}

/* Professional overlay icon */
.project-block .img-holder .inner:after {
    content: "→";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 24px;
    font-weight: 300;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 2;
}

.project-block:hover .img-holder .inner:after{
    opacity: 1;
}

.project-block .img-holder .inner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures images fill the container while maintaining aspect ratio */
    object-position: center; /* Center the image */
    transform: scale(1);
    transition: transform 0.4s ease;
    filter: brightness(1);
}

.project-block:hover .img-holder .inner img{
    transform: scale(1.05);
    filter: brightness(0.9);
}

.project-block .text-holder{
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Take up remaining space */
    background: #ffffff;
    padding: 28px 30px 26px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: all 0.3s ease;
    justify-content: space-between; /* Distribute content evenly */
    min-height: 240px; /* Minimum height for text area */
}

.project-block:hover .text-holder{
    background: #fafbfc;
}

.project-block .text-holder h3{
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    margin: 0 0 8px;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Don't shrink the title */
}

.project-block .text-holder h3 a{
    color: #1a2332;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.project-block:hover .text-holder h3 a{
    color: var(--thm-base, var(--main-color));
}

/* Subtle underline effect */
.project-block .text-holder h3 a:after {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--thm-base, var(--main-color));
    transition: width 0.3s ease;
}

.project-block:hover .text-holder h3 a:after {
    width: 100%;
}

.project-block .text-holder p{
    font-weight: 400;
    margin: 0 0 18px;
    color: #6b7280;
    font-size: 14px;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.project-block:hover .text-holder p{
    color: #4b5563;
}

.project-block .text-holder ul{
    position: relative;
    display: block;
    margin: 0 0 auto 0; /* Push to bottom with auto margin */
    padding: 0;
    list-style: none;
    flex-grow: 1; /* Take up available space */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align to bottom */
}

.project-block .text-holder ul li{
    color: #374151;
    font-size: 14px;
    font-weight: 400;  
    margin-bottom: 6px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}

.project-block:hover .text-holder ul li{
    color: #1f2937;
}

.project-block .text-holder ul li:last-child{
    margin-bottom: 0;
}

.project-block .text-holder ul li span{
    font-weight: 500;
    color: #6b7280;
    transition: color 0.3s ease;
    min-width: 45px;
}

.project-block:hover .text-holder ul li span{
    color: var(--thm-base, var(--main-color));
}

/* Excerpt styling for consistent spacing */
.project-block .project-excerpt {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
}

.project-block .project-excerpt p {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}

/* Professional separator line */
.project-block .text-holder:before {
    content: "";
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-block:hover .text-holder:before {
    opacity: 1;
}

/* Subtle left border accent */
.project-block:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--thm-base, var(--main-color));
    transition: width 0.3s ease;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.project-block:hover:before {
    width: 4px;
}

/* Professional focus states */
.project-block:focus-within {
    outline: 2px solid var(--thm-base, var(--main-color));
    outline-offset: 2px;
}

/* Enhanced readability on hover */
.project-block .text-holder ul li {
    border-bottom: 1px solid transparent;
}

.project-block:hover .text-holder ul li {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.project-block:hover .text-holder ul li:last-child {
    border-bottom-color: transparent;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .project-block {
        min-height: 480px;
    }
    
    .project-block .img-holder {
        height: 250px;
    }
    
    .project-block .text-holder {
        min-height: 230px;
    }
}

@media (max-width: 992px) {
    .project-block {
        min-height: 460px;
    }
    
    .project-block .img-holder {
        height: 240px;
    }
    
    .project-block .text-holder {
        min-height: 220px;
    }
}

@media (max-width: 768px) {
    .project-page-one .row > [class*="col-"] {
        margin-bottom: 20px;
    }
    
    .project-block {
        border-radius: 6px;
        min-height: 420px;
    }
    
    .project-block .img-holder {
        height: 220px;
    }
    
    .project-block .img-holder .inner {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    
    .project-block .text-holder {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        padding: 24px 20px 22px;
        min-height: 200px;
    }
    
    .project-block:hover {
        transform: translateY(-4px);
    }
}

@media (max-width: 576px) {
    .project-block {
        min-height: 400px;
    }
}

/* Portfolio Swiper Fixes */
.portfolio-swiper {
    position: relative;
    overflow: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 400px !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.portfolio-swiper .swiper-wrapper {
    height: 400px !important;
}

.portfolio-swiper .swiper-slide {
    height: 400px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.portfolio-swiper .swiper-slide img {
    width: 100% !important;
    height: 400px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Swiper Navigation Styling */
.portfolio-swiper .swiper-button-next,
.portfolio-swiper .swiper-button-prev {
    color: #cd4602 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
}

.portfolio-swiper .swiper-button-next:after,
.portfolio-swiper .swiper-button-prev:after {
    font-size: 16px !important;
}

.portfolio-swiper .swiper-pagination-bullet {
    background: #cd4602 !important;
}

.portfolio-swiper .swiper-pagination-bullet-active {
    background: #cd4602 !important;
}

/* Prevent image flashing during initialization */
.portfolio-image-carousel .carousel-item {
    visibility: visible !important;
    opacity: 1 !important;
}

.portfolio-image-carousel .carousel-item img {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Force all child elements to respect container width */
.portfolio-image-carousel,
.portfolio-image-carousel *,
.owl-carousel,
.owl-carousel * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Owl Carousel Stage Fix */
.owl-carousel .owl-stage-outer {
    overflow: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

.owl-carousel .owl-stage {
    max-width: none !important;
    width: auto !important;
}

.portfolio-image-carousel .carousel-item {
    display: block;
    width: 100%;
    height: 400px;
    max-height: 400px;
    overflow: hidden;
}

.portfolio-image-carousel .carousel-item img {
    width: 100% !important;
    height: 400px !important;
    max-height: 400px !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Owl Carousel Override Fixes */
.owl-carousel .owl-item {
    display: block !important;
    height: 400px !important;
    max-height: 400px !important;
    overflow: hidden !important;
}

.owl-carousel .owl-item img {
    display: block !important;
    width: 100% !important;
    height: 400px !important;
    max-height: 400px !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Specific fixes for portfolio carousel */
.portfolio-image-carousel.owl-carousel .owl-item {
    height: 400px !important;
    max-height: 400px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.portfolio-image-carousel.owl-carousel .owl-item .carousel-item {
    display: block !important;
    width: 100% !important;
    height: 400px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.portfolio-image-carousel.owl-carousel .owl-item img {
    height: 400px !important;
    max-height: 400px !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* jQuery Compatibility Fixes */
.no-js .portfolio-image-carousel .carousel-item:not(:first-child) {
    display: none;
}

/* Magnific Popup Fixes */
.mfp-wrap {
    z-index: 9999 !important;
}

.mfp-bg {
    z-index: 9998 !important;
}

/* Accordion Improvements */
.accordion-content {
    overflow: visible;
}

.accordion-content.active {
    overflow: visible;
}

/* Project Details Enhancements */
.project-details {
    padding: 30px 25px;
}

.project-image-section {
    margin-bottom: 20px;
}

.project-info-section {
    padding-left: 0;
}

@media (min-width: 768px) {
    .project-details {
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }
    
    .project-image-section {
        flex: 0 0 300px;
        margin-bottom: 0;
    }
    
    .project-info-section {
        flex: 1;
        padding-left: 0;
    }
}

@media (max-width: 576px) {
    .project-block .img-holder {
        height: 200px;
    }
    
    .project-block .text-holder {
        min-height: 200px;
        padding: 20px 18px;
    }
    
    .project-block .text-holder h3 {
        font-size: 18px;
        line-height: 26px;
    }
}

/* Fallback for browsers that don't support object-fit */
.no-objectfit .project-block .img-holder .inner img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .project-block,
    .project-block:hover,
    .project-block .img-holder .inner img,
    .project-block:hover .img-holder .inner img,
    .project-block .text-holder h3 a:after {
        transition: none;
    }
}

/* Additional styles for the single portfolio page to maintain consistency */
.portfolio-details-section {
    padding: 80px 0;
}

.portfolio-image {
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.portfolio-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Related projects cards on single portfolio page */
.related-project-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.related-project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.related-project-image {
    height: 200px;
    overflow: hidden;
    flex-shrink: 0;
}

.related-project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.related-project-card:hover .related-project-image img {
    transform: scale(1.05);
}

.related-project-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}