.clean-section {
    padding:80px 20px;
    background:#f9fafb;
}

.clean-container {
    max-width:1200px;
    margin:0 auto;
}

.clean-header {
    text-align:center;
    margin-bottom:50px;
}

.clean-header-line {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin-bottom:15px;
}

.clean-label {
    color:#1947cd;
    font-size:20px;
    text-transform:uppercase;
    font-weight:600;
    letter-spacing:1px;
}

.clean-title {
    font-size:35px;
    color:#222;
    line-height:1.3;
}

.clean-highlight {
    color:#ffb400;
}


.clean-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr); 
    gap:25px;
}


.clean-card {
    background:#fff;
    position:relative;
    height:560px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 92%, 0 100%);
    overflow: visible; 
    transition:0.3s;
}

.clean-media {
    height:280px;
    overflow:hidden;
    clip-path:polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

.clean-media-img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.clean-icon-badge {
    width:95px;
    height:95px;
    background:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:210px;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
}

.clean-icon {
    font-size:42px;
    color:#ffb400;
}

.clean-card:hover .clean-icon-badge {
    background:#1947cd;
}

.clean-card:hover .clean-icon {
    color:#fff;
}

.clean-body {
    padding:50px 30px 30px;
    text-align:center;
}

.clean-title-card {
    font-size:22px;
    margin-bottom:15px;
}

.clean-title-card a {
    text-decoration:none;
    color:#1f2937;
    transition:0.3s;
}

.clean-title-card a:hover {
    color:#2563eb;
}

.clean-text {
    color:#6b7280;
    line-height:1.6;
    margin-bottom:25px;
    font-size:15px;
}

.clean-item {
    position: relative; 
}

.clean-arrow-wrapper {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
}

.clean-arrow {
    width:55px;
    height:55px;
    background:#1f2937;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    font-size:22px;
    transform:rotate(-45deg);
    transition:0.3s ease;
}

.clean-item:hover .clean-arrow {
    background:#ffb400;
    color:#1f2937;
    transform:rotate(5deg);
}

   @media (max-width: 1024px) {
    .clean-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .clean-card {
        height: auto;
    }

    .clean-body {
        padding: 40px 20px 30px;
    }
}


@media (max-width: 768px) {

    .clean-header {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .clean-header-line {
        justify-content: center;
        text-align: center;
    }

    .clean-title {
        font-size: 28px;
        line-height: 1.3;
    }

    .clean-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 0 20px;
    }

    .clean-card {
        height: auto;
        margin: 0 auto;
        width: 100%;
        max-width: 500px;
    }

    .clean-media {
        height: 250px;
    }

    .clean-icon-badge {
        top: 190px;
        width: 80px;
        height: 80px;
    }

    .clean-body {
        padding: 55px 25px 30px;
    }
}


@media (max-width: 480px) {

    .clean-header {
        text-align: center;
        align-items: center;
    }

    .clean-header-line {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
    }

    .clean-label {
        font-size: 16px;
    }

    .clean-title {
        font-size: 24px;
    }


    .clean-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .clean-card {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        height: auto;
    }

    .clean-media {
        height: 220px;
    }

    .clean-icon-badge {
        width: 75px;
        height: 75px;
        top: 170px;
    }

    .clean-body {
        padding: 60px 20px 25px;
    }
}

@media (max-width: 375px) {

    .clean-header-line img {
        width: 22px;
    }

    .clean-label {
        font-size: 15px;
    }

    .clean-title {
        font-size: 22px;
    }

    .clean-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .clean-card {
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
    }

    .clean-media {
        height: 200px;
    }

    .clean-icon-badge {
        width: 70px;
        height: 70px;
        top: 158px;
    }

    .clean-body {
        padding: 55px 18px 25px;
    }
}