/* Production Process Grid Widget Styles */
.production-process-grid-page.production-process-grid {
    display: grid;
    gap: 30px;
    justify-content: center;
    margin: 40px auto;
    max-width: 100%;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.production-process-grid-page.production-process-grid.grid-col-1 {
    grid-template-columns: minmax(0, 100%);
    max-width: 900px;
}

.production-process-grid-page.production-process-grid.grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1400px;
}

.production-process-grid-page.production-process-grid.grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1800px;
}

.production-process-grid-page .process-card-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
}

.production-process-grid-page .process-card-link {
    text-decoration: none;
    display: block;
    width: 100%;
    transition: transform 0.3s ease;
}

.production-process-grid-page .process-card-link:hover {
    transform: translateY(-8px);
}

.production-process-grid-page .production-process-card.masked-card {
    width: 100%;
    aspect-ratio: 1.2 / 1;
    min-height: 350px;
    max-height: 550px;
    position: relative;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    background-color: #002d20;
    
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1639.781' height='1327.552' viewBox='0 0 1639.781 1327.552' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='1639.781' height='1327.552' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg transform='translate(1529.79 1056.302)'%3E%3Cpath d='M2484.9,94.911v979.35a94.923,94.923,0,0,1-94.912,94.931h-632.73a94.921,94.921,0,0,0-92.689,74.375,87.568,87.568,0,0,0-1.554,9.127,94.914,94.914,0,0,1-92.669,74.356h-629.8a94.91,94.91,0,0,1-94.931-94.912V252.789a94.927,94.927,0,0,1,94.931-94.931H1573.1a94.917,94.917,0,0,0,93.161-76.677c.3-1.495.551-3.008.748-4.544A94.976,94.976,0,0,1,1760.19,0h629.8A94.906,94.906,0,0,1,2484.9,94.911' transform='translate(-2375.406 -1055.801)' fill='%23002f26'/%3E%3Cpath d='M219.657,1105.515c8.278-49.255,1.65-100.879,3.583-151.384,1.315-34.271,10.792-66.878,31.189-100.858,34.252,109.154,58.885,214.633,30.894,323.879a95.138,95.138,0,0,0-31.448,22.361C225.66,1176.011,212.455,1148.381,219.657,1105.515ZM903.513,1169.2c-11.422-67.605-11.914-136.166-9.68-204.7,2.609-80.458,8.263-160.826,12.594-241.228.116-2.28.494-4.548,1.272-11.449,37.294,52.1,64.893,103.966,74.908,162.836,7.8,45.948,11.228,92.734,14.991,139.272,5.009,61.875,8.723,101.639,15.663,136.172A94.48,94.48,0,0,1,956.17,1169.2Zm-168.48,0q-12.8-30-25.745-59.938c-50.061-115.667-43.442-227.37,21.162-335.509,32.957-55.17,66.521-109.963,99.376-165.172,8.888-14.941,16.191-30.84,26.946-51.543,0,34.053.764,62.613-.123,91.107C852.23,789.564,844.8,930.963,843.591,1072.4a633.661,633.661,0,0,0,6.479,96.8Zm-165.337,0c-7.2-28-15.353-55.816-23.448-83.586-34.845-119.54-28.021-236.91,6.308-354.968,18.108-62.265,36.618-125.631,33.254-191.056C582.831,481.6,572.2,424,564.735,366.248c-7.295-56.487-16.807-112.791-21.713-169.481-4.12-47.683,13.139-93.147,31.292-135.5C583.066,40.847,591.859,20.512,600.052,0H701.3c33.9,68.589,67.6,137.272,99.238,206.884,30.761,67.691,43.507,141.625,48.529,215.6,1.809,26.5-5.472,56.132-16.823,80.52C807.713,555.771,778.566,606.457,750,657.259c-20.98,37.323-44.67,73.114-66.049,110.226-62.118,107.776-70.9,219.573-21.859,334.47q14.388,33.706,29.185,67.241Zm-124.4,0c8.689-40.522,27.355-78.77,44.259-120.261,12.2,44.995,22.194,84.881,30.07,120.261Zm-111.279,0c22.552-106.906,2.405-212.28-30.779-317.886-25.835-82.182-51.013-164.924-69.589-248.929-17.4-78.717-10.508-157.846,25.137-232.114,4.788-9.979,12.927-19.3,21.626-26.293,65.752-52.806,132.134-104.818,197.923-157.554,6.7-5.371,10.828-13.938,18.364-19.222-10.749,70.759-.139,138.321,15.943,204.5,24.5,100.806,20.341,200.626.546,301.187-12.769,64.893-23.407,130.208-34.787,195.363-1.33,7.646-2.413,15.647-1.621,23.278,5.712,55.185-12.34,104.782-34.271,153.862-18.013,40.322-38.3,80.236-46.06,123.808ZM16.844,804.728C10.573,778.939,6.335,752.6,2.085,726.354,1,719.7,2.259,712.091,4.424,705.563Q60.617,535.714,192.181,414.355c1.395-1.279,3.161-2.15,7.4-4.979-44.089,142.324,1.875,273.036,42.126,405-52.365,49.649-62.1,114.376-62.808,182.037-.429,40.05-.087,80.1-.087,125.218C98.277,1025.645,45.163,921.42,16.844,804.728ZM1038.032,961.042c-5.218-70.871-15.74-141.431-49.727-204.725-18.452-34.374-45.7-63.959-68.244-96.217-5.057-7.239-10.079-16.633-10.007-24.982.815-105.363-2.077-210.334-21.728-314.326C866.707,206.384,819.434,102.085,766.217,0h63.129c53.746,35.543,110.211,66.867,166.828,98.01,7.492,4.12,14.606,14.607,16.039,23.116a249.452,249.452,0,0,0,38.863,98.615V1074.26a95.542,95.542,0,0,1-.945,13.436C1043.965,1045.827,1041.163,1003.4,1038.032,961.042Zm-992.4-612C62.474,307.093,84.136,267,105.341,226.96c4.338-8.173,15.514-15.07,24.919-17.832,62.161-18.219,125.449-32.876,186.9-53.093C390.474,131.945,457.1,94.447,518.627,37.461c-3.343,8.139-4.346,11.105-5.741,13.865-1.766,3.468-3.829,6.774-5.791,10.139-45.433,77.748-110.7,136.568-180.635,191.368-63.825,49.991-127.883,99.891-189.093,153.012C83.46,452.617,44.684,512.328,9.519,574.089q-4.709,8.275-9.448,16.5C-1.207,506.594,14.729,426,45.635,349.038ZM232.44,81.179c.3-1.5.552-3.007.748-4.542a93.827,93.827,0,0,1,3.79-13.768A771.008,771.008,0,0,1,311.125,1.218,95.366,95.366,0,0,1,326.366,0H486.6a414.488,414.488,0,0,1-31.927,26.618C380.156,82.757,293.9,112.731,205.516,137.847c-4.183,1.193-8.38,2.344-12.72,3.5A94.915,94.915,0,0,0,232.44,81.179ZM970.428,16.415Q956.754,8.133,943.057,0H956.17a94.935,94.935,0,0,1,88.884,61.569Q1007.739,38.987,970.428,16.415Z' transform='translate(-941.584 -1055.802)' fill='%23fff' stroke='rgba(0,0,0,0)' stroke-miterlimit='10' stroke-width='1' opacity='0.03'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1639.781' height='1327.552' viewBox='0 0 1639.781 1327.552' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='1639.781' height='1327.552' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg transform='translate(1529.79 1056.302)'%3E%3Cpath d='M2484.9,94.911v979.35a94.923,94.923,0,0,1-94.912,94.931h-632.73a94.921,94.921,0,0,0-92.689,74.375,87.568,87.568,0,0,0-1.554,9.127,94.914,94.914,0,0,1-92.669,74.356h-629.8a94.91,94.91,0,0,1-94.931-94.912V252.789a94.927,94.927,0,0,1,94.931-94.931H1573.1a94.917,94.917,0,0,0,93.161-76.677c.3-1.495.551-3.008.748-4.544A94.976,94.976,0,0,1,1760.19,0h629.8A94.906,94.906,0,0,1,2484.9,94.911' transform='translate(-2375.406 -1055.801)' fill='%23002f26'/%3E%3Cpath d='M219.657,1105.515c8.278-49.255,1.65-100.879,3.583-151.384,1.315-34.271,10.792-66.878,31.189-100.858,34.252,109.154,58.885,214.633,30.894,323.879a95.138,95.138,0,0,0-31.448,22.361C225.66,1176.011,212.455,1148.381,219.657,1105.515ZM903.513,1169.2c-11.422-67.605-11.914-136.166-9.68-204.7,2.609-80.458,8.263-160.826,12.594-241.228.116-2.28.494-4.548,1.272-11.449,37.294,52.1,64.893,103.966,74.908,162.836,7.8,45.948,11.228,92.734,14.991,139.272,5.009,61.875,8.723,101.639,15.663,136.172A94.48,94.48,0,0,1,956.17,1169.2Zm-168.48,0q-12.8-30-25.745-59.938c-50.061-115.667-43.442-227.37,21.162-335.509,32.957-55.17,66.521-109.963,99.376-165.172,8.888-14.941,16.191-30.84,26.946-51.543,0,34.053.764,62.613-.123,91.107C852.23,789.564,844.8,930.963,843.591,1072.4a633.661,633.661,0,0,0,6.479,96.8Zm-165.337,0c-7.2-28-15.353-55.816-23.448-83.586-34.845-119.54-28.021-236.91,6.308-354.968,18.108-62.265,36.618-125.631,33.254-191.056C582.831,481.6,572.2,424,564.735,366.248c-7.295-56.487-16.807-112.791-21.713-169.481-4.12-47.683,13.139-93.147,31.292-135.5C583.066,40.847,591.859,20.512,600.052,0H701.3c33.9,68.589,67.6,137.272,99.238,206.884,30.761,67.691,43.507,141.625,48.529,215.6,1.809,26.5-5.472,56.132-16.823,80.52C807.713,555.771,778.566,606.457,750,657.259c-20.98,37.323-44.67,73.114-66.049,110.226-62.118,107.776-70.9,219.573-21.859,334.47q14.388,33.706,29.185,67.241Zm-124.4,0c8.689-40.522,27.355-78.77,44.259-120.261,12.2,44.995,22.194,84.881,30.07,120.261Zm-111.279,0c22.552-106.906,2.405-212.28-30.779-317.886-25.835-82.182-51.013-164.924-69.589-248.929-17.4-78.717-10.508-157.846,25.137-232.114,4.788-9.979,12.927-19.3,21.626-26.293,65.752-52.806,132.134-104.818,197.923-157.554,6.7-5.371,10.828-13.938,18.364-19.222-10.749,70.759-.139,138.321,15.943,204.5,24.5,100.806,20.341,200.626.546,301.187-12.769,64.893-23.407,130.208-34.787,195.363-1.33,7.646-2.413,15.647-1.621,23.278,5.712,55.185-12.34,104.782-34.271,153.862-18.013,40.322-38.3,80.236-46.06,123.808ZM16.844,804.728C10.573,778.939,6.335,752.6,2.085,726.354,1,719.7,2.259,712.091,4.424,705.563Q60.617,535.714,192.181,414.355c1.395-1.279,3.161-2.15,7.4-4.979-44.089,142.324,1.875,273.036,42.126,405-52.365,49.649-62.1,114.376-62.808,182.037-.429,40.05-.087,80.1-.087,125.218C98.277,1025.645,45.163,921.42,16.844,804.728ZM1038.032,961.042c-5.218-70.871-15.74-141.431-49.727-204.725-18.452-34.374-45.7-63.959-68.244-96.217-5.057-7.239-10.079-16.633-10.007-24.982.815-105.363-2.077-210.334-21.728-314.326C866.707,206.384,819.434,102.085,766.217,0h63.129c53.746,35.543,110.211,66.867,166.828,98.01,7.492,4.12,14.606,14.607,16.039,23.116a249.452,249.452,0,0,0,38.863,98.615V1074.26a95.542,95.542,0,0,1-.945,13.436C1043.965,1045.827,1041.163,1003.4,1038.032,961.042Zm-992.4-612C62.474,307.093,84.136,267,105.341,226.96c4.338-8.173,15.514-15.07,24.919-17.832,62.161-18.219,125.449-32.876,186.9-53.093C390.474,131.945,457.1,94.447,518.627,37.461c-3.343,8.139-4.346,11.105-5.741,13.865-1.766,3.468-3.829,6.774-5.791,10.139-45.433,77.748-110.7,136.568-180.635,191.368-63.825,49.991-127.883,99.891-189.093,153.012C83.46,452.617,44.684,512.328,9.519,574.089q-4.709,8.275-9.448,16.5C-1.207,506.594,14.729,426,45.635,349.038ZM232.44,81.179c.3-1.5.552-3.007.748-4.542a93.827,93.827,0,0,1,3.79-13.768A771.008,771.008,0,0,1,311.125,1.218,95.366,95.366,0,0,1,326.366,0H486.6a414.488,414.488,0,0,1-31.927,26.618C380.156,82.757,293.9,112.731,205.516,137.847c-4.183,1.193-8.38,2.344-12.72,3.5A94.915,94.915,0,0,0,232.44,81.179ZM970.428,16.415Q956.754,8.133,943.057,0H956.17a94.935,94.935,0,0,1,88.884,61.569Q1007.739,38.987,970.428,16.415Z' transform='translate(-941.584 -1055.802)' fill='%23fff' stroke='rgba(0,0,0,0)' stroke-miterlimit='10' stroke-width='1' opacity='0.03'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    transition: transform 0.25s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    box-shadow: 0 25px 40px -15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.production-process-grid-page .card-image {
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    position: relative;
    z-index: 6;
    top: 50px;
    border-radius: 35px;
}

.production-process-grid-page .card-overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, #002d20, #002d20 90%);
    pointer-events: none;
    z-index: 3;
    transition: background 0.3s ease;
}

/* Overlay image */
.production-process-grid-page .production-process-card.masked-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 70px;
    width: 100%;
    height: 100%;
    background-image: url(/wp-content/uploads/2026/02/overlay.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 4;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Hover Effects */
.production-process-grid-page .production-process-card.masked-card:hover {
    transform: scale(1.02);
    box-shadow: 0 30px 50px -15px #000000;
}

.production-process-grid-page .production-process-card.masked-card:hover .card-overlay {
    background: linear-gradient(90deg, #E4EDEB, #E4EDEB 90%);
}

.production-process-grid-page .production-process-card.masked-card:hover::after {
    opacity: 0.5;
}

.production-process-grid-page .production-process-card.masked-card:hover .right-content h2 {
    color: #002d20;
}

.production-process-grid-page .production-process-card.masked-card:hover .right-content p {
    color: #333333;
}

.production-process-grid-page .production-process-card.masked-card:hover .card-image {
    filter: brightness(1.05);
}

.production-process-grid-page .production-process-card .right-content {
    position: relative;
    z-index: 5;
    width: 50%;
    max-width: 50%;
    animation: fadeSlideIn 0.6s ease;
    text-align: center;
    background: transparent;
    padding: 20px ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: color 0.3s ease;
    overflow: hidden;
}

@keyframes fadeSlideIn {
    0% { opacity: 0; transform: translateX(15px); }
    100% { opacity: 1; transform: translateX(0); }
}

.production-process-grid-page .production-process-card .right-content h2 {
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
    font-family: "Century Gothic Paneuropean", sans-serif;
    font-weight: bold;
    font-size: 24px;
    line-height: 35px;
    text-align: center;
    color: #c9bba6;
    transition: color 0.3s ease;
}

.production-process-grid-page .production-process-card .right-content p {
    margin: 0.5rem 0 1rem 0;
    font-family: "Century Gothic Paneuropean", sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    color: #fff;
    word-wrap: break-word;
    transition: color 0.3s ease;
}

/* Explore Button Styles */
.production-process-grid-page .explore-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 20px;
    border-radius: 24px;
    background: #e4edeb;
    color: #002d20 !important;
    font-family: "Century Gothic Paneuropean", sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.3);
    text-shadow: none;
    letter-spacing: 0.5px;
    z-index: 6;
    position: relative;
}

.production-process-grid-page .production-process-card.masked-card:hover .explore-btn {
    background-color: #002d20 !important;
    color: #E4EDEB !important;
    border: 2px solid #002d20;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    transform: translateX(5px);
}

.production-process-grid-page .production-process-card.masked-card::before {
    display: none;
}

/* Responsive breakpoints */
@media (min-width: 1800px) {
    .production-process-grid-page .production-process-card.masked-card {
        max-height: 450px;
    }
    .production-process-grid-page .production-process-card .right-content h2 {
        font-size: 24px;
    }
    .production-process-grid-page .production-process-card .right-content p {
        font-size: 16px;
    }
}

@media (max-width: 1400px) {
    .production-process-grid-page.production-process-grid.grid-col-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .production-process-grid-page .production-process-card .right-content {
        padding: 0 15px 5% 0;
    }
}

@media (max-width: 1100px) {
    .production-process-grid-page.production-process-grid.grid-col-2,
    .production-process-grid-page.production-process-grid.grid-col-3 {
        grid-template-columns: 1fr;
        max-width: 800px;
    }
    .production-process-grid-page .production-process-card.masked-card {
        max-height: 500px;
        margin: 0 auto;
    }
    .production-process-grid-page .production-process-card .right-content h2 {
        font-size: 24px;
    }
    .production-process-grid-page .production-process-card .right-content p {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .production-process-grid-page.production-process-grid {
        gap: 25px;
        padding: 0 15px;
    }
    .production-process-grid-page .production-process-card.masked-card {
        min-height: 400px;
        max-height: 450px;
    }
    .production-process-grid-page .production-process-card .right-content h2 {
        font-size: 24px;
    }
    .production-process-grid-page .production-process-card .right-content p {
        font-size: 16px;
    }
    .production-process-grid-page .explore-btn {
        font-size: 14px;
        padding: 6px 16px;
    }
}

@media (max-width: 576px) {
    .production-process-grid-page.production-process-grid {
        gap: 20px;
        padding: 0 12px;
    }
    .production-process-grid-page .production-process-card.masked-card {
        min-height: 350px;
        max-height: 400px;
    }
    .production-process-grid-page .production-process-card .right-content h2 {
        font-size: 24px;
        margin-bottom: 0.3rem;
    }
    .production-process-grid-page .production-process-card .right-content p {
        font-size: 16px;
        line-height: 1.4;
    }
    .production-process-grid-page .process-card-link:hover {
        transform: translateY(-4px);
    }
    .production-process-grid-page .explore-btn {
        font-size: 13px;
        padding: 5px 14px;
    }
}

@media (max-width: 375px) {
    .production-process-grid-page.production-process-grid {
        gap: 15px;
        padding: 0 10px;
    }
    .production-process-grid-page .production-process-card.masked-card {
        min-height: 300px;
        max-height: 350px;
    }
    .production-process-grid-page .production-process-card .right-content h2 {
        font-size: 24px;
    }
    .production-process-grid-page .production-process-card .right-content p {
        font-size:16px;
        line-height: 1.3;
    }
    .production-process-grid-page .explore-btn {
        font-size: 12px;
        padding: 4px 12px;
    }
}