/* =========================================================
   DEEP WEB SOLUTION
   ABOUT PAGE
========================================================= */

:root {

    --dws-blue: #1842B6;
    --dws-blue-dark: #102D82;
    --dws-cyan: #13BCE8;
    --dws-green: #26D48C;

    --dws-dark: #071A3A;
    --dws-text: #17233A;
    --dws-muted: #68758A;

    --dws-light: #F5F8FC;
    --dws-white: #FFFFFF;

    --dws-border: #E4EAF2;

    --dws-gradient:
        linear-gradient(
            105deg,
            #1842B6 0%,
            #1267D7 45%,
            #13BCE8 75%,
            #26D48C 100%
        );
}


/* =========================================================
   BASE
========================================================= */

.dws-about-page,
.dws-about-page * {
    box-sizing: border-box;
}

.dws-about-page {

    width: 100%;

    overflow: hidden;

    color: var(--dws-text);

    background: var(--dws-white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.dws-about-page img {

    display: block;

    max-width: 100%;
}

.dws-about-page a {

    text-decoration: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.dws-about-container {

    width: calc(100% - 60px);

    max-width: 1240px;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   HERO
========================================================= */

.dws-about-hero {

    position: relative;

    min-height: 390px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;

    color: #fff;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(19,188,232,.18),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 75%,
            rgba(38,212,140,.15),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            #071A3A 0%,
            #102D82 50%,
            #1842B6 100%
        );
}


.dws-about-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    pointer-events: none;
}


.dws-about-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 20%,
            rgba(7,26,58,.18)
        );

    pointer-events: none;
}


.dws-about-hero .dws-about-container {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.dws-about-hero-content {

    width: 100%;

    max-width: 900px;

    padding: 65px 0;

    margin: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


/* Hero label */

.dws-about-hero-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 17px;

    padding: 8px 17px;

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius: 50px;

    background:
        rgba(255,255,255,.07);

    color: #fff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.8px;
}


/* Hero title */

.dws-about-hero h1 {

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            38px,
            5vw,
            64px
        );

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;
}


.dws-about-hero h1 span {

    display: block;

    margin-top: 5px;

    background:
        linear-gradient(
            90deg,
            #fff,
            #13BCE8 55%,
            #26D48C
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.dws-about-hero p {

    max-width: 720px;

    margin: 22px auto 0;

    color:
        rgba(255,255,255,.78);

    font-size: 18px;

    line-height: 1.7;
}


/* Hero buttons */

.dws-about-hero-buttons {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 30px;
}


.dws-about-btn {

    min-height: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 0 23px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 700;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.dws-about-btn:hover {

    transform:
        translateY(-2px);
}


.dws-about-btn-primary {

    color: #fff;

    background:
        var(--dws-gradient);

    box-shadow:
        0 12px 30px
        rgba(19,188,232,.22);
}


.dws-about-btn-outline {

    color: #fff;

    border:
        1px solid
        rgba(255,255,255,.35);

    background:
        rgba(255,255,255,.06);
}


.dws-about-btn-outline:hover {

    background:
        rgba(255,255,255,.14);
}


/* =========================================================
   SECTIONS
========================================================= */

.dws-about-section {

    width: 100%;

    padding: 82px 0;
}


.dws-about-white {

    background:
        #fff;
}


.dws-about-light {

    background:
        var(--dws-light);
}


/* =========================================================
   SPLIT LAYOUT
========================================================= */

.dws-about-split {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 65px;

    align-items: center;
}


.dws-about-split-reverse {

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
}


/* =========================================================
   CONTENT
========================================================= */

.dws-about-content {

    min-width: 0;
}


.dws-about-label {

    display: inline-block;

    margin-bottom: 12px;

    color:
        var(--dws-blue);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.dws-about-content h2 {

    margin: 0 0 19px;

    color:
        var(--dws-dark);

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height: 1.14;

    font-weight: 800;

    letter-spacing: -1px;
}


.dws-about-content h2 span {

    color:
        var(--dws-blue);
}


.dws-about-content > p {

    margin: 0 0 15px;

    color:
        var(--dws-muted);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   3D VISUAL
========================================================= */

.dws-about-visual {

    position: relative;

    min-height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #EEF5FF,
            #F9FCFF
        );

    border:
        1px solid
        rgba(24,66,182,.08);

    box-shadow:
        0 20px 50px
        rgba(7,26,58,.09);
}


.dws-about-visual::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    top: -90px;

    right: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(19,188,232,.17),
            transparent 70%
        );
}


.dws-about-visual::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    bottom: -100px;

    left: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(38,212,140,.13),
            transparent 70%
        );
}


.dws-about-visual-glow {

    position: absolute;

    width: 65%;

    height: 65%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(19,188,232,.10),
            transparent 68%
        );

    filter:
        blur(8px);
}


.dws-about-visual img {

    position: relative;

    z-index: 2;

    width: 88%;

    max-height: 390px;

    object-fit: contain;

    transition:
        transform .6s ease;
}


.dws-about-visual:hover img {

    transform:
        translateY(-8px)
        scale(1.025);
}


/* =========================================================
   CHECK POINTS
========================================================= */

.dws-about-points {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 12px 20px;

    margin-top: 25px;
}


.dws-about-points div {

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        var(--dws-text);

    font-size: 14px;

    font-weight: 700;
}


.dws-about-points i {

    color:
        var(--dws-green);

    font-size: 17px;
}


/* =========================================================
   ICON
========================================================= */

.dws-about-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 17px;

    border-radius: 14px;

    color: #fff;

    background:
        var(--dws-gradient);

    box-shadow:
        0 12px 28px
        rgba(24,66,182,.18);

    font-size: 21px;
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.dws-about-highlight {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 25px;

    padding: 16px 18px;

    border-left:
        4px solid
        var(--dws-green);

    border-radius: 10px;

    background:
        #F3F7FF;
}


.dws-about-highlight-icon {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: #fff;

    background:
        var(--dws-blue);
}


.dws-about-highlight strong {

    display: block;

    margin-bottom: 4px;

    color:
        var(--dws-dark);

    font-size: 15px;
}


.dws-about-highlight span {

    display: block;

    color:
        var(--dws-muted);

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   BENEFITS
========================================================= */

.dws-about-benefits {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 15px;

    margin-top: 25px;
}


.dws-about-benefit {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 15px;

    border:
        1px solid
        var(--dws-border);

    border-radius: 13px;

    background:
        #fff;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.dws-about-benefit:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(24,66,182,.22);

    box-shadow:
        0 12px 30px
        rgba(7,26,58,.08);
}


.dws-about-benefit-icon {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color:
        var(--dws-blue);

    background:
        #EEF4FF;

    font-size: 16px;
}


.dws-about-benefit h3 {

    margin: 0 0 5px;

    color:
        var(--dws-dark);

    font-size: 15px;
}


.dws-about-benefit p {

    margin: 0;

    color:
        var(--dws-muted);

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   PROCESS
========================================================= */

.dws-about-process {

    display: grid;

    gap: 12px;

    margin-top: 25px;
}


.dws-about-process-item {

    display: flex;

    align-items: flex-start;

    gap: 13px;
}


.dws-about-process-item > span {

    width: 35px;

    height: 35px;

    flex: 0 0 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    color: #fff;

    background:
        var(--dws-gradient);

    font-size: 11px;

    font-weight: 800;
}


.dws-about-process-item h3 {

    margin: 0 0 3px;

    color:
        var(--dws-dark);

    font-size: 15px;
}


.dws-about-process-item p {

    margin: 0;

    color:
        var(--dws-muted);

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   TECHNOLOGY
========================================================= */

.dws-about-tech {

    padding: 82px 0;

    color: #fff;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(19,188,232,.18),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            #071A3A,
            #102D82
        );
}


.dws-about-tech-grid {

    display: grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap: 65px;

    align-items: center;
}


.dws-about-tech-content .dws-about-label {

    color:
        var(--dws-green);
}


.dws-about-tech-content h2 {

    margin: 0 0 18px;

    color: #fff;

    font-size:
        clamp(
            30px,
            4vw,
            45px
        );

    line-height: 1.15;
}


.dws-about-tech-content h2 span {

    color:
        var(--dws-cyan);
}


.dws-about-tech-content p {

    max-width: 600px;

    margin: 0;

    color:
        rgba(255,255,255,.72);

    font-size: 16px;

    line-height: 1.8;
}


.dws-about-tech-list {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 12px;
}


.dws-about-tech-list span {

    min-height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 10px;

    background:
        rgba(255,255,255,.055);

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}


.dws-about-tech-list span:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(38,212,140,.45);

    background:
        rgba(38,212,140,.10);
}


/* =========================================================
   CTA
========================================================= */

.dws-about-cta {

    padding: 68px 0;

    background:
        linear-gradient(
            110deg,
            #1842B6,
            #1267D7 50%,
            #13BCE8
        );
}


.dws-about-cta-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


.dws-about-cta-content {

    max-width: 700px;
}


.dws-about-cta-content > span {

    color:
        rgba(255,255,255,.75);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


.dws-about-cta h2 {

    margin: 9px 0 10px;

    color: #fff;

    font-size:
        clamp(
            30px,
            4vw,
            45px
        );

    line-height: 1.15;
}


.dws-about-cta h2 strong {

    color:
        var(--dws-green);
}


.dws-about-cta p {

    margin: 0;

    color:
        rgba(255,255,255,.82);

    font-size: 15px;

    line-height: 1.7;
}


.dws-about-cta-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


.dws-about-cta-buttons a {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 0 19px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 700;

    transition:
        transform .25s ease;
}


.dws-about-cta-buttons a:hover {

    transform:
        translateY(-2px);
}


.dws-about-cta-outline {

    color: #fff;

    border:
        1px solid
        rgba(255,255,255,.35);

    background:
        rgba(255,255,255,.08);
}


.dws-about-cta-primary {

    color:
        var(--dws-blue);

    background:
        #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .dws-about-section {

        padding:
            70px 0;
    }


    .dws-about-split {

        gap:
            42px;
    }


    .dws-about-visual {

        min-height:
            370px;
    }


    .dws-about-visual img {

        max-height:
            330px;
    }


    .dws-about-tech-grid {

        gap:
            40px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .dws-about-container {

        width:
            calc(100% - 30px);
    }


    /* HERO */

    .dws-about-hero {

        min-height:
            360px;
    }


    .dws-about-hero-content {

        padding:
            50px 0;
    }


    .dws-about-hero h1 {

        font-size:
            37px;
    }


    .dws-about-hero p {

        font-size:
            15px;
    }


    .dws-about-hero-buttons {

        width:
            100%;

        flex-direction:
            column;

        align-items:
            center;
    }


    .dws-about-btn {

        width:
            100%;

        max-width:
            280px;
    }


    /* SECTIONS */

    .dws-about-section {

        padding:
            55px 0;
    }


    /* STACK */

    .dws-about-split,
    .dws-about-split-reverse {

        grid-template-columns:
            1fr;

        gap:
            32px;
    }


    /* IMAGE */

    .dws-about-visual {

        min-height:
            300px;

        border-radius:
            18px;
    }


    .dws-about-visual img {

        width:
            90%;

        max-height:
            290px;
    }


    /* TEXT */

    .dws-about-content h2 {

        font-size:
            32px;
    }


    .dws-about-content > p {

        font-size:
            15px;

        line-height:
            1.7;
    }


    /* POINTS */

    .dws-about-points {

        grid-template-columns:
            1fr;
    }


    /* BENEFITS */

    .dws-about-benefits {

        grid-template-columns:
            1fr;
    }


    /* TECHNOLOGY */

    .dws-about-tech {

        padding:
            60px 0;
    }


    .dws-about-tech-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .dws-about-tech-list {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    /* CTA */

    .dws-about-cta {

        padding:
            55px 0;
    }


    .dws-about-cta-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            28px;
    }


    .dws-about-cta-buttons {

        width:
            100%;

        flex-direction:
            column;
    }


    .dws-about-cta-buttons a {

        width:
            100%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .dws-about-container {

        width:
            calc(100% - 24px);
    }


    .dws-about-hero {

        min-height:
            350px;
    }


    .dws-about-hero h1 {

        font-size:
            31px;

        line-height:
            1.1;
    }


    .dws-about-hero p {

        font-size:
            14px;
    }


    .dws-about-section {

        padding:
            48px 0;
    }


    .dws-about-content h2 {

        font-size:
            29px;
    }


    .dws-about-content > p {

        font-size:
            14px;
    }


    .dws-about-visual {

        min-height:
            260px;
    }


    .dws-about-visual img {

        max-height:
            250px;
    }


    .dws-about-tech-list {

        grid-template-columns:
            1fr 1fr;
    }


    .dws-about-tech-list span {

        min-height:
            48px;

        font-size:
            13px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .dws-about-container {

        width:
            calc(100% - 20px);
    }


    .dws-about-hero h1 {

        font-size:
            28px;
    }


    .dws-about-content h2 {

        font-size:
            27px;
    }


    .dws-about-visual {

        min-height:
            230px;
    }


    .dws-about-visual img {

        max-height:
            220px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dws-about-page *,
    .dws-about-page *::before,
    .dws-about-page *::after {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;
    }

}