:root {
    --red: #da2114;
    --black: #161616;
    --grey: #505050;
    --lightgrey: #bec9ca;
    --white: #ffffff;
    --spacing-small: 2rem;
}
/* Services Section */
.services-section {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

/* Service Heading */
.service-heading-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

.subtitle {
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 500;
    margin: 0;
}

.service-heading-inner {
    max-width: 38rem;
}

.heading-2 {
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1.1;
    margin: 0;
}

/* Service Content Wrapper */
.service-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Service Link Block - EXACT RENCANA STYLES */
.service-link-block {
    padding-top: var(--spacing-small);
    padding-bottom: var(--spacing-small);
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid #DEDEDE;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: minmax(24rem, 1.5fr) 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    position: relative;
    /* EXACT transition from Rencana */
    transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.service-link-block:first-child {
    border-top: 1px solid #DEDEDE;
}

/* Hover Effect - EXACT RENCANA */
.service-link-block:hover {
    padding-right: 2rem;
    padding-left: var(--spacing-small);
    /* background-color: var(--red); */
    /* border-radius: 12px; */
}

/* Service Title Wrapper */
.service-title-wrapper {
    display: flex;
    flex-direction: row;
        gap: 11.5rem;
    justify-content: flex-start;
    align-items: flex-start;
   
}
.service-link-block:hover .industry-arrow-btn {
    border-color: #ffffff;
    background: linear-gradient(90deg, #C5962F 3.99%, #E7C562 59.69%, #F7DD7B 73.62%, #EFD271 101.47%, #E3C05D 115.4%, #DEB853 143.25%);
    width: 32px;
    height: 32px;
}
/* 
.service-number-wrapper {
    aspect-ratio: 1;
    width: 40px;
} */

.service-number {
    /* letter-spacing: 0.15em; */
    text-transform: uppercase;
    color: #000;
    font-family: Poppins;
    font-size: 23px;
    font-style: normal;
    font-weight: 400;
    line-height: 58px; /* 252.174% */

    /* Transition for color change on hover */
    transition: color 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* Service number turns white on hover */
/* .service-link-block:hover .service-number {
    color: var(--white);
} */

.service-title {
    color: #000;
font-family: Poppins;
font-size: 26px;
font-style: normal;
font-weight: 500;
line-height: 58px; /* 193.333% */

    margin: 0;

    /* Transition for color change on hover */
    transition: color 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* Service title turns white on hover */
/* .service-link-block:hover .service-title {
    color: var(--white);
} */

/* Service Image Wrapper */
.service-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo-white img.white-logo {
    max-width: 300px;
    width: 100%;
}
.service-image {
    border-radius: 16px;
    position: absolute;
    overflow: hidden;
    /* EXACT initial state from Rencana - hidden with scale(0) */
    transform: scale(0) translate3d(0, 0, 0);
    transition: transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    will-change: transform;

}
.service-link-block:hover  {
    border-bottom: 2px solid #EFD06C;
}
.service-image-home {
    width: 100%;
    display: block;
    border-radius: 16px;
    max-width: 221px;
}
/* Service Description */
.service-description {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: flex-start;
    width: 24rem;
    align-items: center;
}

.service-text {
    margin: 0;
    color: #3C3C3C;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 33px; /* 206.25% */
    /* Transition for color change on hover */
    transition: color 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	display: -webkit-box;   -webkit-line-clamp: 3;   -webkit-box-orient: vertical;   overflow: hidden;
}
.service-hd {
color: #000;
font-family: "Poltawski Nowy";
font-size: 50px;
font-style: normal;
font-weight: 700;
line-height: 58px; /* 116% */
}
.service-p {
color: #000;
font-family: Playfair;
font-size: 47px;
font-style: normal;
font-weight: 500;
line-height: 58px;
margin-bottom: 65px;
}
img.white-logo {
    max-width: 420px;
    flex-shrink: 0;
}
.logo-white {
    display: flex;
    justify-content: center;
}

/* Service text turns white on hover */
/* .service-link-block:hover .service-text {
    color: var(--white);
} */

/* Arrow Button Icon */
.arrow-button-icon {
    width: 1.5rem;

    /* EXACT initial state from Rencana - hidden with scale(0) */
    transform: scale(0);

    /* Initial filter state */
    filter: invert(0%);

    /* Smooth scale and filter animation */
    transition: transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19),
                filter 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* Arrow appears on hover - scales from 0 to 1 and inverts to white */
.service-link-block:hover .arrow-button-icon {
    transform: scale(1);
    filter: invert(100%);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .service-link-block {
        grid-template-columns: minmax(24rem, 1fr) 1fr;
    }

    .service-image-wrapper {
        display: none;
    }
}

@media (max-width: 991px) {
    /* .container {
        padding: 2rem 2rem;
    } */

    .services-section {
        gap: 3rem;
    }

    .service-heading-wrapper {
        flex-direction: column;
        gap: 1rem;
        padding-left: 0;
    }

    .heading-2 {
        font-size: 2.5rem;
    }

    .service-link-block {
        grid-template-columns: minmax(20rem, 1fr) 1fr;
    }

    .service-image-wrapper {
        display: none;
    }
}

@media (max-width: 768px) {
    /* .container {
        padding: 2rem 1.5rem;
    } */

    .heading-2 {
        font-size: 2rem;
    }

 

    .service-link-block {
        grid-template-columns: 1fr;
        padding-top: 1rem;
        /* gap: 1rem; */
    }

    .service-title-wrapper {
        flex-direction: row;
    }

    .service-description {
        width: 100%;
    }
}

@media (max-width: 580px) {
    .service__head {
        text-align: center;

    }
    .service-title-wrapper {
        flex-direction: column;
        gap: 0;
    }
    .service-hd {
        font-size: 36px;
        line-height: 43px;
    }
    .service-p {
        font-size: 32px;
        line-height: 43px;
    }
    .heading-2 {
        font-size: 1.75rem;
    }


    .subtitle {
        font-size: 0.75rem;
    }

    .service-description {
        flex-direction: column-reverse;
        gap: 0rem;
        margin-top: -30px;
    }
}