/*==================================================
    DDS INTERIORS
    ABOUT PAGE
    PREMIUM CINEMATIC CSS
    DARK • GOLD • GLASS • 3D • RESPONSIVE
==================================================*/


/*==================================================
    ROOT
==================================================*/

:root{

    --dds-gold:#d4af37;
    --dds-gold-light:#f5d76e;
    --dds-gold-dark:#9f7f18;

    --dds-black:#050505;
    --dds-dark:#0a0a0a;
    --dds-dark-2:#111111;
    --dds-dark-3:#181818;

    --dds-white:#ffffff;
    --dds-text:#eeeeee;
    --dds-muted:#a7a7a7;

    --dds-border:rgba(212,175,55,.20);

    --dds-glass:
        rgba(255,255,255,.045);

    --dds-shadow:
        0 25px 70px rgba(0,0,0,.45);

    --dds-radius:24px;

}


/*==================================================
    GLOBAL
==================================================*/

html{

    scroll-behavior:smooth;

}


body{

    background:var(--dds-black);

    color:var(--dds-text);

    overflow-x:hidden;

}


#dds-about-hero *,
#dds-about-intro *,
#dds-about-stats *,
#dds-about-mission *,
#dds-about-leadership *,
#dds-about-why *,
#dds-about-cta *{

    -webkit-tap-highlight-color:transparent;

}


::selection{

    background:var(--dds-gold);

    color:#000;

}


img{

    max-width:100%;

    display:block;

}


/*==================================================
    GLOBAL SECTION
==================================================*/

.about-section{

    position:relative;

    padding:125px 0;

    overflow:hidden;

}


.about-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(212,175,55,.08),

            transparent 70%

        );

    top:-220px;

    right:-180px;

    pointer-events:none;

}


.about-section::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.025),

            transparent 70%

        );

    bottom:-180px;

    left:-150px;

    pointer-events:none;

}


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

#dds-about-hero{

    min-height:700px;

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

    isolation:isolate;

    background:

        linear-gradient(

            90deg,

            rgba(0,0,0,.95),

            rgba(0,0,0,.72),

            rgba(0,0,0,.35)

        ),

        url("../img2/after2.jpeg")

        center/cover no-repeat;

}


#dds-about-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at 75% 45%,

            rgba(212,175,55,.18),

            transparent 35%

        );

    animation:

        heroGlow 6s ease-in-out infinite alternate;

    z-index:-1;

}


#dds-about-hero::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-250px;

    bottom:-350px;

    border-radius:50%;

    border:1px solid rgba(212,175,55,.15);

    box-shadow:

        0 0 80px rgba(212,175,55,.08);

    animation:

        heroOrbit 20s linear infinite;

    z-index:-1;

}


.dds-about-hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(0,0,0,.3),

            rgba(0,0,0,.8)

        );

    z-index:-1;

}


.dds-about-hero-content{

    max-width:760px;

    padding:100px 0 70px;

}


.dds-about-hero-content > span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:11px 20px;

    border:1px solid rgba(212,175,55,.4);

    border-radius:50px;

    color:var(--dds-gold-light);

    font-size:12px;

    letter-spacing:2px;

    font-weight:600;

    background:rgba(0,0,0,.3);

    backdrop-filter:blur(10px);

    animation:

        fadeDown 1s ease both,

        badgePulse 4s ease-in-out infinite;

}


.dds-about-hero-content > span i{

    font-size:14px;

}


.dds-about-hero-content h1{

    margin:28px 0 22px;

    font-size:clamp(44px,6vw,82px);

    line-height:1.05;

    font-weight:300;

    letter-spacing:-2px;

    color:#fff;

    animation:

        fadeUp 1s .15s ease both;

}


.dds-about-hero-content h1 strong{

    display:block;

    color:var(--dds-gold-light);

    font-weight:700;

    text-shadow:

        0 0 35px rgba(212,175,55,.2);

}


.dds-about-hero-content p{

    max-width:650px;

    color:#c5c5c5;

    font-size:17px;

    line-height:1.9;

    margin-bottom:35px;

    animation:

        fadeUp 1s .3s ease both;

}


.about-primary-btn,
.about-outline-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:55px;

    padding:0 28px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    overflow:hidden;

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        background .4s ease;

}


.about-primary-btn{

    color:#000;

    background:

        linear-gradient(

            135deg,

            var(--dds-gold-light),

            var(--dds-gold),

            var(--dds-gold-dark)

        );

    box-shadow:

        0 12px 35px rgba(212,175,55,.25);

}


.about-outline-btn{

    color:var(--dds-gold-light);

    border:1px solid var(--dds-gold);

    background:transparent;

}


.about-primary-btn::before,
.about-outline-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:80%;

    height:100%;

    background:

        linear-gradient(

            110deg,

            transparent,

            rgba(255,255,255,.65),

            transparent

        );

    transform:skewX(-25deg);

    transition:1s ease;

}


.about-primary-btn:hover::before,
.about-outline-btn:hover::before{

    left:140%;

}


.about-primary-btn:hover,
.about-outline-btn:hover{

    transform:translateY(-5px);

}


.about-primary-btn:hover{

    box-shadow:

        0 18px 50px rgba(212,175,55,.4);

}


.about-outline-btn:hover{

    color:#000;

    background:var(--dds-gold);

}


/*==================================================
    INTRO
==================================================*/

#dds-about-intro{

    background:

        radial-gradient(

            circle at 15% 50%,

            rgba(212,175,55,.07),

            transparent 30%

        ),

        var(--dds-black);

}


.about-image-wrap{

    position:relative;

    max-width:570px;

    margin:auto;

    padding:18px;

    animation:

        imageFloat 6s ease-in-out infinite;

}


.about-image-wrap::before{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid rgba(212,175,55,.45);

    border-radius:28px;

    transform:rotate(-4deg);

    transition:.6s ease;

}


.about-image-wrap::after{

    content:"";

    position:absolute;

    inset:18px;

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

    border-radius:22px;

    pointer-events:none;

}


.about-image-wrap:hover::before{

    transform:rotate(3deg) scale(1.02);

}


.about-image-wrap img{

    position:relative;

    z-index:2;

    width:100%;

    height:520px;

    object-fit:cover;

    border-radius:22px;

    filter:

        brightness(.9)

        contrast(1.08);

    transition:

        transform .8s ease,

        filter .8s ease;

    box-shadow:var(--dds-shadow);

}


.about-image-wrap:hover img{

    transform:scale(1.035);

    filter:

        brightness(1.08)

        contrast(1.1);

}


.about-image-glow{

    position:absolute;

    width:280px;

    height:280px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    background:

        radial-gradient(

            circle,

            rgba(212,175,55,.35),

            transparent 70%

        );

    filter:blur(35px);

    animation:

        glowBreathing 4s ease-in-out infinite alternate;

    z-index:0;

}


.about-image-badge{

    position:absolute;

    z-index:5;

    right:-20px;

    bottom:45px;

    display:flex;

    align-items:center;

    gap:13px;

    padding:18px 23px;

    border-radius:18px;

    background:

        rgba(10,10,10,.85);

    border:1px solid rgba(212,175,55,.4);

    backdrop-filter:blur(16px);

    box-shadow:

        0 15px 45px rgba(0,0,0,.5);

    animation:

        badgeFloat 5s ease-in-out infinite;

}


.about-image-badge strong{

    color:var(--dds-gold-light);

    font-size:34px;

}


.about-image-badge span{

    color:#aaa;

    font-size:12px;

    line-height:1.5;

}


.about-content{

    padding-left:45px;

}


.about-label,
.section-heading > span{

    display:inline-block;

    color:var(--dds-gold-light);

    font-size:12px;

    letter-spacing:3px;

    font-weight:600;

    margin-bottom:18px;

}


.about-content h2,
.section-heading h2{

    color:#fff;

    font-size:clamp(32px,4vw,52px);

    line-height:1.2;

    font-weight:300;

    margin-bottom:25px;

}


.about-content h2 strong,
.section-heading h2 strong{

    display:block;

    color:var(--dds-gold-light);

    font-weight:700;

}


.about-content p{

    color:var(--dds-muted);

    font-size:16px;

    line-height:1.9;

    margin-bottom:18px;

}


.about-content .about-outline-btn{

    margin-top:15px;

}


/*==================================================
    STATS
==================================================*/

#dds-about-stats{

    position:relative;

    padding:80px 0;

    background:

        linear-gradient(

            135deg,

            #080808,

            #151515,

            #080808

        );

    overflow:hidden;

}


#dds-about-stats::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(212,175,55,.05),

            transparent

        );

    animation:

        statsSweep 8s linear infinite;

}


.about-stat-card{

    position:relative;

    height:100%;

    padding:38px 20px;

    text-align:center;

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

    border-radius:22px;

    background:

        linear-gradient(

            145deg,

            rgba(255,255,255,.06),

            rgba(255,255,255,.015)

        );

    backdrop-filter:blur(12px);

    overflow:hidden;

    transition:

        transform .5s ease,

        border-color .5s ease,

        box-shadow .5s ease;

}


.about-stat-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:2px;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--dds-gold),

            transparent

        );

    transition:.8s ease;

}


.about-stat-card:hover::before{

    left:100%;

}


.about-stat-card:hover{

    transform:translateY(-12px);

    border-color:rgba(212,175,55,.5);

    box-shadow:

        0 20px 50px rgba(0,0,0,.4),

        0 0 30px rgba(212,175,55,.08);

}


.stat-icon{

    width:65px;

    height:65px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:var(--dds-gold-light);

    font-size:24px;

    border:1px solid rgba(212,175,55,.4);

    background:rgba(212,175,55,.08);

    animation:

        iconPulse 3s ease-in-out infinite;

}


.about-stat-card h3{

    margin:0;

    color:var(--dds-gold-light);

    font-size:48px;

    font-weight:700;

    transition:.4s ease;

}


.about-stat-card h3 small{

    font-size:28px;

}


.about-stat-card p{

    margin:8px 0 0;

    color:#999;

    font-size:14px;

}


.about-stat-card:hover h3{

    transform:scale(1.08);

    text-shadow:

        0 0 25px rgba(212,175,55,.4);

}


/*==================================================
    SECTION HEADING
==================================================*/

.section-heading{

    max-width:780px;

    margin:0 auto 60px;

    text-align:center;

}


.section-heading p{

    color:var(--dds-muted);

    line-height:1.8;

    font-size:16px;

}


.section-heading h2{

    position:relative;

}


.section-heading h2::after{

    content:"";

    display:block;

    width:70px;

    height:2px;

    margin:22px auto 0;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--dds-gold),

            transparent

        );

    animation:

        linePulse 3s ease-in-out infinite;

}


.section-heading.text-left{

    text-align:left;

    margin-left:0;

}


.section-heading.text-left h2::after{

    margin-left:0;

}


/*==================================================
    MISSION / VISION
==================================================*/

#dds-about-mission{

    background:

        linear-gradient(

            180deg,

            #080808,

            #101010

        );

}


.purpose-card{

    position:relative;

    height:100%;

    padding:45px 38px;

    border-radius:26px;

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

    background:

        linear-gradient(

            145deg,

            rgba(255,255,255,.06),

            rgba(255,255,255,.015)

        );

    overflow:hidden;

    transform-style:preserve-3d;

    transition:

        transform .6s ease,

        border-color .5s ease,

        box-shadow .5s ease;

}


.purpose-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent 20%,

            rgba(212,175,55,.13),

            transparent 80%

        );

    transform:translateX(-100%);

    transition:.8s ease;

}


.purpose-card:hover::before{

    transform:translateX(100%);

}


.purpose-card:hover{

    transform:

        translateY(-12px)

        rotateX(3deg);

    border-color:rgba(212,175,55,.45);

    box-shadow:

        0 25px 60px rgba(0,0,0,.4);

}


.purpose-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    border-radius:20px;

    color:var(--dds-gold-light);

    font-size:28px;

    background:

        rgba(212,175,55,.1);

    border:1px solid rgba(212,175,55,.3);

}


.purpose-card h3{

    color:#fff;

    font-size:26px;

    margin-bottom:15px;

}


.purpose-card p{

    color:var(--dds-muted);

    line-height:1.8;

    margin:0;

}


/*==================================================
    LEADERSHIP
==================================================*/

#dds-about-leadership{

    background:

        radial-gradient(

            circle at 50% 0%,

            rgba(212,175,55,.07),

            transparent 35%

        ),

        #080808;

}


.leadership-card{

    position:relative;

    height:100%;

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

    border-radius:28px;

    overflow:hidden;

    background:

        linear-gradient(

            145deg,

            rgba(255,255,255,.06),

            rgba(255,255,255,.015)

        );

    box-shadow:

        0 20px 60px rgba(0,0,0,.35);

    transform-style:preserve-3d;

    transition:

        transform .6s ease,

        border-color .5s ease,

        box-shadow .5s ease;

}


.leadership-card:hover{

    transform:

        translateY(-14px)

        rotateX(2deg);

    border-color:rgba(212,175,55,.5);

    box-shadow:

        0 30px 80px rgba(0,0,0,.55),

        0 0 30px rgba(212,175,55,.08);

}


.leadership-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            110deg,

            transparent,

            rgba(255,255,255,.15),

            transparent

        );

    transform:skewX(-20deg);

    pointer-events:none;

    transition:1s ease;

}


.leadership-card:hover::after{

    left:150%;

}


.leadership-image{

    position:relative;

    height:270px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        radial-gradient(

            circle,

            rgba(212,175,55,.2),

            transparent 55%

        ),

        #111;

    overflow:hidden;

}


.leadership-image::before{

    content:"";

    position:absolute;

    width:230px;

    height:230px;

    border-radius:50%;

    border:1px solid rgba(212,175,55,.3);

    box-shadow:

        0 0 50px rgba(212,175,55,.12);

    animation:

        rotateOrbit 12s linear infinite;

}


.leadership-image::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border:1px dashed rgba(212,175,55,.25);

    border-radius:50%;

    animation:

        rotateOrbitReverse 18s linear infinite;

}


.leadership-avatar{

    position:relative;

    z-index:2;

    width:120px;

    height:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:var(--dds-gold-light);

    font-size:50px;

    background:

        linear-gradient(

            145deg,

            #222,

            #080808

        );

    border:1px solid rgba(212,175,55,.5);

    box-shadow:

        0 0 35px rgba(212,175,55,.2);

}


.leadership-badge{

    position:absolute;

    z-index:4;

    bottom:18px;

    right:20px;

    padding:9px 17px;

    border-radius:50px;

    color:#000;

    background:var(--dds-gold-light);

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    animation:

        badgeFloat 4s ease-in-out infinite;

}


.leadership-content{

    padding:34px;

}


.leadership-role{

    color:var(--dds-gold-light);

    font-size:11px;

    letter-spacing:2px;

}


.leadership-content h3{

    margin:12px 0;

    color:#fff;

    font-size:30px;

}


.leadership-line{

    width:65px;

    height:2px;

    margin-bottom:20px;

    background:var(--dds-gold);

}


.leadership-content p{

    color:var(--dds-muted);

    font-size:14px;

    line-height:1.8;

}


.leadership-quote{

    display:flex;

    gap:12px;

    margin-top:25px;

    padding:17px;

    border-left:2px solid var(--dds-gold);

    background:rgba(212,175,55,.06);

    color:#ccc;

    font-size:13px;

    font-style:italic;

}


.leadership-quote i{

    color:var(--dds-gold-light);

}


/*==================================================
    WHY DDS
==================================================*/

#dds-about-why{

    background:

        linear-gradient(

            135deg,

            #111,

            #070707

        );

}


.why-grid{

    display:grid;

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

    gap:20px;

}


.why-card{

    position:relative;

    min-height:210px;

    padding:30px;

    border-radius:22px;

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

    background:

        rgba(255,255,255,.035);

    overflow:hidden;

    transition:

        transform .5s ease,

        border-color .5s ease,

        background .5s ease;

}


.why-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(212,175,55,.1),

            transparent

        );

    transition:.8s ease;

}


.why-card:hover::before{

    left:120%;

}


.why-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.4);

    background:rgba(212,175,55,.06);

}


.why-card > i{

    display:inline-block;

    margin-bottom:20px;

    color:var(--dds-gold-light);

    font-size:30px;

    transition:.5s ease;

}


.why-card:hover > i{

    transform:

        translateY(-5px)

        rotate(8deg)

        scale(1.15);

    text-shadow:

        0 0 25px rgba(212,175,55,.5);

}


.why-card h4{

    color:#fff;

    font-size:20px;

    margin-bottom:12px;

}


.why-card p{

    color:#999;

    font-size:14px;

    line-height:1.7;

    margin:0;

}


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

#dds-about-cta{

    position:relative;

    padding:120px 0;

    text-align:center;

    overflow:hidden;

    isolation:isolate;

    background:

        linear-gradient(

            135deg,

            #151515,

            #050505

        );

}


#dds-about-cta::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(212,175,55,.2),

            transparent 70%

        );

    filter:blur(15px);

    animation:

        ctaGlow 5s ease-in-out infinite alternate;

    z-index:-1;

}


.about-cta-content{

    position:relative;

    z-index:2;

}


.about-cta-content > span{

    color:var(--dds-gold-light);

    font-size:12px;

    letter-spacing:3px;

    font-weight:600;

}


.about-cta-content h2{

    margin:20px 0;

    color:#fff;

    font-size:clamp(36px,5vw,65px);

    font-weight:300;

    animation:

        textGlow 4s ease-in-out infinite alternate;

}


.about-cta-content h2 strong{

    color:var(--dds-gold-light);

    font-weight:700;

}


.about-cta-content p{

    color:#aaa;

    font-size:17px;

    margin-bottom:30px;

}


/*==================================================
    FOOTER ENHANCEMENT
==================================================*/

.footer-area{

    position:relative;

    background:#050505;

    border-top:1px solid rgba(212,175,55,.15);

}


.footer-area h5{

    color:var(--dds-gold-light);

}


.footer-area p,
.footer-area li{

    color:#999;

}


.footer-area li{

    transition:.3s ease;

}


.footer-area li:hover{

    color:var(--dds-gold-light);

    transform:translateX(5px);

}


/*==================================================
    ANIMATIONS
==================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes heroGlow{

    from{

        opacity:.4;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1.15);

    }

}


@keyframes heroOrbit{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


@keyframes imageFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


@keyframes glowBreathing{

    from{

        opacity:.35;

        transform:translate(-50%,-50%) scale(.8);

    }

    to{

        opacity:.9;

        transform:translate(-50%,-50%) scale(1.2);

    }

}


@keyframes badgeFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}


@keyframes badgePulse{

    0%,

    100%{

        box-shadow:0 0 0 rgba(212,175,55,0);

    }

    50%{

        box-shadow:0 0 25px rgba(212,175,55,.15);

    }

}


@keyframes iconPulse{

    0%,

    100%{

        box-shadow:0 0 0 rgba(212,175,55,0);

    }

    50%{

        box-shadow:0 0 25px rgba(212,175,55,.2);

    }

}


@keyframes linePulse{

    0%{

        width:45px;

        opacity:.4;

    }

    50%{

        width:130px;

        opacity:1;

    }

    100%{

        width:45px;

        opacity:.4;

    }

}


@keyframes statsSweep{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(100%);

    }

}


@keyframes rotateOrbit{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


@keyframes rotateOrbitReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}


@keyframes ctaGlow{

    from{

        opacity:.35;

        transform:translate(-50%,-50%) scale(.8);

    }

    to{

        opacity:1;

        transform:translate(-50%,-50%) scale(1.2);

    }

}


@keyframes textGlow{

    from{

        text-shadow:

            0 0 0 rgba(212,175,55,0);

    }

    to{

        text-shadow:

            0 0 30px rgba(212,175,55,.2);

    }

}


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

@media(max-width:991px){

    .about-section{

        padding:95px 0;

    }


    #dds-about-hero{

        min-height:650px;

    }


    .dds-about-hero-content{

        max-width:650px;

    }


    .about-content{

        padding-left:0;

        margin-top:60px;

    }


    .about-image-wrap{

        max-width:620px;

    }


    .about-image-wrap img{

        height:480px;

    }


    .about-image-badge{

        right:5px;

    }


    .purpose-card{

        margin-bottom:25px;

    }


    .leadership-card{

        margin-bottom:25px;

    }


    .why-grid{

        margin-top:40px;

    }

}


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

@media(max-width:767px){

    .about-section{

        padding:75px 0;

    }


    #dds-about-hero{

        min-height:650px;

        background-position:center;

    }


    .dds-about-hero-content{

        padding:90px 0 50px;

        text-align:center;

    }


    .dds-about-hero-content > span{

        font-size:9px;

        letter-spacing:1.5px;

        padding:10px 14px;

    }


    .dds-about-hero-content h1{

        font-size:43px;

        letter-spacing:-1px;

    }


    .dds-about-hero-content p{

        font-size:14px;

        line-height:1.8;

    }


    .about-primary-btn,
    .about-outline-btn{

        width:100%;

        max-width:320px;

    }


    .about-image-wrap{

        padding:12px;

    }


    .about-image-wrap img{

        height:380px;

        border-radius:18px;

    }


    .about-image-badge{

        right:-5px;

        bottom:25px;

        padding:13px 15px;

    }


    .about-image-badge strong{

        font-size:27px;

    }


    .about-image-badge span{

        font-size:10px;

    }


    .about-content{

        margin-top:50px;

        text-align:center;

    }


    .about-content h2,
    .section-heading h2{

        font-size:34px;

    }


    .about-content p{

        font-size:14px;

        line-height:1.8;

    }


    .section-heading{

        margin-bottom:40px;

    }


    .section-heading p{

        font-size:14px;

    }


    .about-stat-card{

        margin-bottom:20px;

    }


    .about-stat-card h3{

        font-size:42px;

    }


    .purpose-card{

        padding:32px 25px;

    }


    .leadership-image{

        height:230px;

    }


    .leadership-content{

        padding:26px 22px;

    }


    .leadership-content h3{

        font-size:27px;

    }


    .leadership-content p{

        font-size:13px;

    }


    .why-grid{

        grid-template-columns:1fr;

        gap:15px;

    }


    .why-card{

        min-height:auto;

        padding:25px;

    }


    .section-heading.text-left{

        text-align:center;

        margin-left:auto;

    }


    .section-heading.text-left h2::after{

        margin-left:auto;

    }


    #dds-about-cta{

        padding:85px 20px;

    }


    .about-cta-content h2{

        font-size:38px;

    }


    .about-cta-content p{

        font-size:14px;

    }

}


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

@media(max-width:480px){

    #dds-about-hero{

        min-height:620px;

    }


    .dds-about-hero-content h1{

        font-size:36px;

    }


    .about-image-wrap img{

        height:320px;

    }


    .about-image-badge{

        transform:scale(.9);

        transform-origin:right bottom;

    }


    .purpose-card{

        padding:28px 22px;

    }


    .leadership-image{

        height:210px;

    }


    .leadership-avatar{

        width:100px;

        height:100px;

        font-size:40px;

    }


    .about-cta-content h2{

        font-size:33px;

    }

}


/*==================================================
    REDUCED MOTION
==================================================*/

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

    *,

    *::before,

    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}