*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:'Google Sans',Arial,sans-serif;
    background:#fff;
}

.dp-feature-section{
    width:100%;
    position:relative;
    overflow:hidden;
    background:#fff;
    padding:18px 14px;
    isolation:isolate;
}

.dp-wave{
    position:absolute;
    width:620px;
    height:220px;
    border-radius:50%;
    filter:blur(2px);
    opacity:.38;
    z-index:-2;
    animation:waveFloat 9s ease-in-out infinite alternate;
}

.dp-wave-one{
    left:-180px;
    top:-120px;
    background:
        radial-gradient(circle at 50% 50%,rgba(48,190,115,.18),transparent 60%);
}

.dp-wave-two{
    right:-180px;
    bottom:-130px;
    background:
        radial-gradient(circle at 50% 50%,rgba(61,136,255,.16),transparent 60%);
    animation-delay:-3s;
}

.dp-wave-three{
    left:35%;
    bottom:-170px;
    background:
        radial-gradient(circle at 50% 50%,rgba(255,159,67,.15),transparent 60%);
    animation-delay:-6s;
}

.dp-bg-line{
    position:absolute;
    width:120%;
    height:100px;
    left:-10%;
    top:48%;
    border-top:1px solid rgba(40,69,92,.08);
    border-bottom:1px solid rgba(40,69,92,.05);
    transform:rotate(-3deg);
    z-index:-3;
}

.dp-bubble{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(46,87,112,.12);
    z-index:-1;
    animation:bubbleMove 8s ease-in-out infinite alternate;
}

.dp-bubble.b1{
    width:35px;
    height:35px;
    left:4%;
    top:16%;
}

.dp-bubble.b2{
    width:18px;
    height:18px;
    left:34%;
    bottom:9%;
    animation-delay:-2s;
}

.dp-bubble.b3{
    width:45px;
    height:45px;
    right:4%;
    top:9%;
    animation-delay:-4s;
}

.dp-bubble.b4{
    width:24px;
    height:24px;
    right:26%;
    bottom:8%;
    animation-delay:-6s;
}

.dp-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(41,77,99,.10);
    z-index:-1;
    animation:ringRotate 12s linear infinite;
}

.dp-ring.r1{
    width:130px;
    height:130px;
    left:-55px;
    bottom:-52px;
    border-right:5px solid rgba(49,188,113,.10);
}

.dp-ring.r2{
    width:105px;
    height:105px;
    right:-35px;
    top:-35px;
    border-left:5px solid rgba(249,148,54,.10);
}

.dp-main-row{
    width:100%;
    margin:0;
}

.dp-col{
    padding:7px;
}

.dp-feature-card{
    position:relative;
    height:100%;
    min-height:205px;
    overflow:hidden;
    border:1px solid rgba(32,68,82,.12);
    border-radius:0;
    transition:.35s ease;
}

.dp-feature-card:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(34,59,73,.10);
}

.dp-green{
    background:
        radial-gradient(circle at 14% 20%,rgba(255,255,255,.95) 0 5%,transparent 5.5%),
        radial-gradient(circle at 92% 12%,rgba(27,160,88,.12),transparent 26%),
        linear-gradient(135deg,#f8fffa 0%,#ecfaef 55%,#def6e6 100%);
}

.dp-blue{
    background:
        radial-gradient(circle at 14% 20%,rgba(255,255,255,.95) 0 5%,transparent 5.5%),
        radial-gradient(circle at 92% 12%,rgba(45,122,226,.12),transparent 26%),
        linear-gradient(135deg,#f8fcff 0%,#edf6ff 55%,#dfedff 100%);
}

.dp-orange{
    background:
        radial-gradient(circle at 14% 20%,rgba(255,255,255,.95) 0 5%,transparent 5.5%),
        radial-gradient(circle at 92% 12%,rgba(243,139,46,.13),transparent 26%),
        linear-gradient(135deg,#fffdf8 0%,#fff5e8 55%,#ffead0 100%);
}

.dp-feature-card:before{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-80px;
    bottom:-85px;
    border:18px solid rgba(255,255,255,.48);
    border-radius:50%;
}

.dp-feature-card:after{
    content:"";
    position:absolute;
    width:90px;
    height:1px;
    right:12px;
    top:18px;
    background:rgba(41,65,79,.16);
    box-shadow:
        0 6px 0 rgba(41,65,79,.07),
        0 12px 0 rgba(41,65,79,.04);
}

.dp-inner-row{
    min-height:205px;
    position:relative;
    z-index:2;
}

.dp-image-side{
    position:relative;
    height:100%;
    min-height:205px;
    padding:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-right:1px solid rgba(40,67,80,.10);
}

.dp-img-box{
    width:100%;
    max-width:150px;
    height:150px;
    position:relative;
    background:rgba(255,255,255,.74);
    border:1px solid rgba(31,58,73,.12);
    padding:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 28px rgba(35,55,68,.08);
    overflow:hidden;
}

.dp-img-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s ease;
}

.dp-feature-card:hover .dp-img-box img{
    transform:scale(1.06);
}

.dp-mini-logo{
    position:absolute;
    left:5px;
    bottom:5px;
    width:43px;
    height:43px;
    background:#fff;
    border:1px solid rgba(38,63,76,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:12px;
    letter-spacing:.5px;
    box-shadow:0 6px 20px rgba(31,59,74,.11);
}

.dp-green .dp-mini-logo{
    color:#16814c;
}

.dp-blue .dp-mini-logo{
    color:#226ac4;
}

.dp-orange .dp-mini-logo{
    color:#d7701a;
}

.dp-img-ring{
    position:absolute;
    width:58px;
    height:58px;
    border-radius:50%;
    top:8px;
    right:3px;
    border:1px dashed rgba(39,72,88,.22);
    animation:ringRotate 8s linear infinite;
}

.dp-content-side{
    position:relative;
    padding:17px 15px 13px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.dp-top-icon{
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid rgba(33,62,76,.12);
    margin-bottom:8px;
    font-size:15px;
}

.dp-green .dp-top-icon{
    color:#16834d;
}

.dp-blue .dp-top-icon{
    color:#256fc8;
}

.dp-orange .dp-top-icon{
    color:#da731c;
}

.dp-feature-title{
    margin:0;
    color:#182d39;
    font-size:19px;
    line-height:1.15;
    font-weight:700;
}

.dp-subtitle{
    display:block;
    margin-top:4px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.1px;
}

.dp-green .dp-subtitle{
    color:#27845a;
}

.dp-blue .dp-subtitle{
    color:#3276bd;
}

.dp-orange .dp-subtitle{
    color:#ca7025;
}

.dp-divider{
    width:100%;
    height:1px;
    background:rgba(28,53,67,.12);
    margin:10px 0;
    position:relative;
}

.dp-divider:before{
    content:"";
    position:absolute;
    left:0;
    top:-1px;
    width:43px;
    height:3px;
}

.dp-green .dp-divider:before{
    background:#27a565;
}

.dp-blue .dp-divider:before{
    background:#4386dc;
}

.dp-orange .dp-divider:before{
    background:#eb8a32;
}

.dp-desc{
    margin:0 0 9px;
    color:#526570;
    font-size:12.5px;
    line-height:1.55;
}

.dp-info-line{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:4px;
    font-size:11.5px;
    font-weight:600;
    color:#354b57;
}

.dp-info-line i{
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.68);
    border:1px solid rgba(30,62,77,.10);
}

.dp-corner-dots{
    position:absolute;
    right:12px;
    bottom:11px;
    width:34px;
    height:34px;
    opacity:.35;
    background-image:radial-gradient(circle,rgba(26,56,70,.45) 1px,transparent 1.5px);
    background-size:7px 7px;
}

@keyframes waveFloat{
    0%{
        transform:translate3d(0,0,0) scale(1);
    }
    100%{
        transform:translate3d(55px,22px,0) scale(1.08);
    }
}

@keyframes bubbleMove{
    0%{
        transform:translateY(0) translateX(0);
    }
    100%{
        transform:translateY(-22px) translateX(12px);
    }
}

@keyframes ringRotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@media(max-width:991.98px){
    .dp-feature-section{
        padding:15px 8px;
    }

    .dp-feature-card{
        min-height:190px;
    }

    .dp-inner-row,
    .dp-image-side{
        min-height:190px;
    }
}

@media(max-width:575.98px){
    .dp-feature-section{
        padding:10px 5px;
    }

    .dp-col{
        padding:5px;
    }

    .dp-inner-row{
        min-height:175px;
    }

    .dp-image-side{
        min-height:175px;
        padding:9px;
    }

    .dp-img-box{
        height:125px;
        padding:6px;
    }

    .dp-content-side{
        padding:13px 10px;
    }

    .dp-feature-title{
        font-size:16px;
    }

    .dp-desc{
        font-size:11.5px;
        line-height:1.45;
    }

    .dp-info-line{
        font-size:10.5px;
    }

    .dp-top-icon{
        width:30px;
        height:30px;
        margin-bottom:6px;
    }
}