.docttus-formats{
    padding:100px 0;
    text-align:center;
}

.docttus-formats__title{
    margin:0 0 4rem;
    color:var(--cyan);
    font-size:2.8rem;
    font-weight:900;
    letter-spacing:-.03em;
    text-transform:uppercase;
    text-shadow:0 0 20px rgba(0,209,224,.3);
}

[data-theme="light"] .docttus-formats__title{
    text-shadow:none;
}

.docttus-formats__showcase{
    position:relative;
    max-width:850px;
    margin:0 auto 5rem;
    aspect-ratio:16 / 9;
    display:flex;
    align-items:center;
    justify-content:center;
}

.docttus-formats__laptop{
    position:relative;
    z-index:2;
    width:80%;
    height:auto;
    border-radius:8px;
    box-shadow:0 20px 50px rgba(0,0,0,.8);
}

[data-theme="light"] .docttus-formats__laptop{
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.docttus-formats__rings{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}

.docttus-formats__ring{
    position:absolute;
    top:50%;
    left:50%;
    width:85%;
    height:35%;
    border:2px solid var(--cyan);
    border-radius:50%;
    box-shadow:0 0 25px rgba(0,209,224,.6), inset 0 0 20px rgba(0,209,224,.2);
    opacity:.7;
}

.docttus-formats__ring--one{
    transform:translate(-50%, -50%) rotate(-8deg);
}

.docttus-formats__ring--two{
    transform:translate(-50%, -50%) rotate(8deg);
}

.docttus-formats__icons{
    position:absolute;
    inset:0;
    z-index:3;
}

.docttus-formats__icon{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    transition:transform .4s cubic-bezier(.175, .885, .32, 1.275);
}

.docttus-formats__icon:hover{
    transform:translateY(-12px) scale(1.08);
}

.docttus-formats__icon-box{
    width:65px;
    height:65px;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:#fff;
    box-shadow:0 15px 30px rgba(0,0,0,.5), inset 0 -3px 5px rgba(0,0,0,.1);
}

[data-theme="light"] .docttus-formats__icon-box{
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.docttus-formats__icon-box svg{
    width:100%;
    height:100%;
}

.docttus-formats__icon-box i{
    font-size:1.8rem;
    color:var(--cyan);
    line-height:1;
}

.docttus-formats__icon-box--large{
    width:85px;
    height:85px;
    padding:15px;
}

.docttus-formats__icon-box--large i{
    font-size:2.25rem;
}

.docttus-formats__icon span{
    color:var(--text);
    text-align:center;
    font-size:.75rem;
    line-height:1.2;
    font-weight:800;
    text-transform:uppercase;
    text-shadow:0 2px 5px rgba(0,0,0,.8);
}

[data-theme="light"] .docttus-formats__icon span{
    color:var(--muted);
    text-shadow:none;
}

.docttus-formats__icon--1{left:5%;top:35%}
.docttus-formats__icon--2{left:22%;top:20%}
.docttus-formats__icon--3{left:50%;top:12%;transform:translateX(-50%)}
.docttus-formats__icon--4{right:22%;top:20%}
.docttus-formats__icon--5{right:5%;top:35%}

.docttus-formats__icon--3:hover{
    transform:translateX(-50%) translateY(-12px) scale(1.08);
}

.docttus-formats__benefits{
    display:flex;
    justify-content:center;
    gap:3rem;
    margin:0 0 4rem;
    flex-wrap:wrap;
}

.docttus-formats__benefit{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--text);
    font-size:1.15rem;
    font-weight:700;
}

.docttus-formats__check{
    width:22px;
    height:22px;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--cyan);
    box-shadow:0 0 10px rgba(0,209,224,.16);
}

.docttus-formats__check svg{
    width:14px;
    height:14px;
}

.docttus-formats__check path{
    fill:none;
    stroke:#000;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

[data-theme="light"] .docttus-formats__check path{
    stroke:#fff;
}

.docttus-formats__cta{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.8rem;
}

.docttus-formats__cta h3{
    margin:0;
    color:var(--muted);
    font-size:1.5rem;
    font-weight:500;
}

.docttus-formats__button{
    min-height:46px;
    padding:0 22px;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
    letter-spacing:0;
}

.docttus-formats__button:hover{
    transform:translateY(-1px);
}

@media (max-width: 900px){
    .docttus-formats{
        padding:84px 0;
    }

    .docttus-formats__title{
        font-size:2rem;
    }

    .docttus-formats__benefits{
        flex-direction:column;
        gap:1.2rem;
        align-items:center;
    }

    .docttus-formats__showcase{
        aspect-ratio:auto;
        height:auto;
        margin-bottom:2.25rem;
        display:flex;
        flex-direction:column;
        gap:2rem;
    }

    .docttus-formats__rings{
        display:none;
    }

    .docttus-formats__icons{
        position:static;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:1.5rem;
    }

    .docttus-formats__icon{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        transform:none !important;
    }

    .docttus-formats__icon-box--large{
        width:65px;
        height:65px;
        padding:12px;
    }
}

@media (max-width: 768px){
    .docttus-formats__cta h3{
        font-size:1.2rem;
    }

    .docttus-formats__button{
        padding:.95rem 2.1rem;
        font-size:1rem;
    }
}