.logos-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0px 0; /* Adjust padding as needed */
   
}

.logos-container:not(:last-child) .logo-item:not(:first-child):before {
    content: '';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(70, 76, 103, 0.00) 0%, #464C67 50%, rgba(70, 76, 103, 0.00) 100%);
    height: calc(100% * var(--logo-count)); /* Use var() to reference the custom property */

    left: 0;
}

/* For desktop, adjust to 4 logos per row */
.logo-item {
    text-align: center;
    position: relative;
    padding: 45px 0;
    width: calc(100% / 4); /* Now 4 logos per row */
}

/* Add vertical gradient line between columns */
.logos-container:not(:last-child) .logo-item:not(:last-child)::after {
    content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%3E%3Crect%20x%3D%228%22%20y%3D%220.5%22%20width%3D%221%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%220.5%22%20y%3D%229%22%20width%3D%221%22%20height%3D%2216%22%20transform%3D%22rotate(-90%200.5%209)%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
    position: absolute;
    border: 0;
    right: -8px;
    width: 16px;
    height: 16px;
    bottom: -5px;
    z-index: 99;
}

.logos-container .logo-item:nth-child(4n+1):not(:nth-last-child(-n+4))::after {
    background: linear-gradient(90deg, rgba(70, 76, 103, 0.00) 0%, #464C67 25%, #464C67 75%, rgba(70, 76, 103, 0.00) 100%);
    content: " ";
    width: 1200px;
    max-width: calc(100vw - 40px);
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
}

section.logos-block h3{
    margin-bottom: 15px;
}


.col.d-logo{
    margin-bottom: 0;
}
.logo-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.logos-container:not(:last-child)::after {
    background: linear-gradient(90deg, rgba(70, 76, 103, 0.00) 0%, #464C67 25%, #464C67 75%, rgba(70, 76, 103, 0.00) 100%);
    content: " ";
    width: 1200px;
    max-width: calc(100vw - 40px);
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* Add vertical gradient line between columns */
/* .logos-container .logo-item:nth-child(3n+2):not(:nth-last-child(2))::after {
    content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%3E%3Crect%20x%3D%228%22%20y%3D%220.5%22%20width%3D%221%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%220.5%22%20y%3D%229%22%20width%3D%221%22%20height%3D%2216%22%20transform%3D%22rotate(-90%200.5%209)%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

    position: absolute;
    border: 0;
    right: -8px;
    width: 16px;
    height: 16px;
    bottom: -5px;
    z-index: 99;
}


.logos-container .logo-item:nth-child(3n+1):not(:nth-last-child(-n+3))::after {
    background: linear-gradient(90deg, rgba(70, 76, 103, 0.00) 0%, #464C67 25%, #464C67 75%, rgba(70, 76, 103, 0.00) 100%);
    content: " ";
    width: 1200px;
    max-width: calc(100vw - 40px);
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
} */

/* .logos-container .logo-item:nth-child(3n+2):not(:nth-last-child(2))::before {
    content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%3E%3Crect%20x%3D%228%22%20y%3D%220.5%22%20width%3D%221%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%220.5%22%20y%3D%229%22%20width%3D%221%22%20height%3D%2216%22%20transform%3D%22rotate(-90%200.5%209)%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
    bottom: -5px;
    position: absolute;
    border: 0;
    left: -8px;
    width: 16px;
    height: 16px;
    z-index: 99;
} */


.logos-container{
    position: relative;
}



/* Add vertical gradient line before and after the middle logo */
.col.d-logo{
    position: relative;
}
.container.d-max{
    max-width: 1200px;

}
/* .col.d-logo::before,
.col.d-logo::after {
    content: '';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(70, 76, 103, 0.00) 0%, #464C67 50%, rgba(70, 76, 103, 0.00) 100%);
} */

.col.d-logo::before {
    left: 33.33%; /* Positioning the line between the first and second column */
}

.col.d-logo::after {
    left: 66.66%; /* Positioning the line between the second and third column */
}


@media(max-width:600px){
    .logos-container .logo-item:nth-child(3n+2):not(:nth-last-child(2))::before,
    .logos-container .logo-item:nth-child(3n+2):not(:nth-last-child(2))::after,
    .logos-container .logo-item:nth-child(3n+1):not(:nth-last-child(-n+3))::after,
    .col.d-logo::before, .col.d-logo::after,
    .logo-item:not(:last-child)::after,
    .logo-item:not(:first-child):before,
    .logos-container:not(:last-child)::after{
        display: none;
    }
    .logo-item{
        width: calc(100% / 2);
    }
}