/* =========================================================
   DAMKAR PAKET DC
   PREMIUM PROFESSIONAL DESIGN
   NO EMOJI
========================================================= */

:root{
    --dc-navy:#06172a;
    --dc-navy-2:#0a2742;
    --dc-blue:#0878c9;
    --dc-blue-2:#0d9ae8;
    --dc-orange:#f26a21;
    --dc-orange-2:#ff8a3d;

    --dc-white:#ffffff;
    --dc-bg:#f5f8fb;
    --dc-bg-2:#edf3f7;

    --dc-text:#17293b;
    --dc-text-light:#637487;

    --dc-border:#dfe7ee;

    --dc-shadow:
        0 25px 70px rgba(4,30,55,.10);

    --dc-radius:24px;
}


/* =========================================================
   RESET
========================================================= */

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;

    background:#ffffff;

    color:var(--dc-text);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.dc-page{
    width:100%;
    overflow:hidden;
}

.dc-container{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
}


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

.dc-hero{
    position:relative;

    min-height:730px;

    display:flex;
    align-items:center;

    overflow:hidden;

    color:#ffffff;

    background:
        linear-gradient(
            110deg,
            rgba(3,16,30,.98) 0%,
            rgba(4,35,60,.95) 52%,
            rgba(3,80,125,.86) 100%
        );

    isolation:isolate;
}


/* Decorative background */

.dc-hero::before{
    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-260px;
    top:-180px;

    border-radius:50%;

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

    box-shadow:
        0 0 0 80px rgba(255,255,255,.025),
        0 0 0 160px rgba(255,255,255,.018);

    pointer-events:none;
}


.dc-hero::after{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-260px;
    bottom:-320px;

    border-radius:50%;

    background:
        rgba(7,135,215,.18);

    filter:blur(80px);

    pointer-events:none;
}


.dc-hero-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.22),
            transparent 65%
        );

    z-index:-1;
}


/* Decorative lines */

.dc-fire-glow{
    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

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

    pointer-events:none;
}

.dc-glow-one{
    right:70px;
    top:120px;
}

.dc-glow-two{
    right:150px;
    top:195px;

    width:130px;
    height:130px;
}


/* Hero content */

.dc-hero-inner{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,1.3fr)
        minmax(300px,.7fr);

    align-items:center;

    gap:85px;

    padding:110px 0;
}


.dc-hero-copy{
    max-width:760px;
}


.dc-eyebrow{
    display:inline-flex;

    align-items:center;

    min-height:38px;

    padding:
        0
        17px;

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

    border-radius:50px;

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

    color:
        #a8dafa;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.8px;

    text-transform:uppercase;
}


.dc-hero h1{
    margin:
        25px
        0
        26px;

    max-width:800px;

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

    line-height:1.02;

    letter-spacing:-3.2px;

    font-weight:900;

    color:#ffffff;
}


.dc-hero h1 strong{
    display:block;

    color:
        var(--dc-orange-2);

    font-weight:900;
}


.dc-hero-copy > p{
    max-width:700px;

    color:
        rgba(231,241,249,.84);

    font-size:19px;

    line-height:1.85;

    font-weight:400;
}


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

.dc-hero-buttons{
    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:38px;
}


.dc-btn{
    min-height:56px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:
        0
        28px;

    border-radius:9px;

    text-decoration:none !important;

    font-family:inherit;

    font-size:15px;

    font-weight:800;

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


.dc-btn:hover{
    transform:translateY(-3px);
}


.dc-btn-orange{
    background:
        var(--dc-orange);

    color:#ffffff !important;

    box-shadow:
        0 16px 35px
        rgba(242,106,33,.22);
}


.dc-btn-orange:hover{
    background:
        #df5815;
}


.dc-btn-light{
    background:
        rgba(255,255,255,.05);

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

    color:#ffffff !important;
}


.dc-btn-light:hover{
    background:
        rgba(255,255,255,.11);

    border-color:
        rgba(255,255,255,.5);
}


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

.dc-hero-card{
    position:relative;

    padding:
        48px
        36px;

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

    border-radius:26px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.22);

    backdrop-filter:
        blur(18px);

    text-align:center;

    overflow:hidden;
}


.dc-hero-card::before{
    content:"";

    position:absolute;

    left:50%;
    top:-130px;

    width:260px;
    height:260px;

    transform:translateX(-50%);

    border-radius:50%;

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


.dc-fire-symbol{
    position:relative;

    width:76px;
    height:76px;

    margin:
        0
        auto
        25px;

    display:flex;

    align-items:center;
    justify-content:center;

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

    border-radius:20px;

    background:
        rgba(242,106,33,.13);

    color:
        var(--dc-orange-2);

    font-size:0;
}


/*
   Menghilangkan emoji dari HTML:
   ikon diganti dengan bentuk CSS
*/

.dc-fire-symbol::before{
    content:"";

    width:25px;
    height:34px;

    display:block;

    border-radius:
        70% 30% 60% 40%;

    background:
        linear-gradient(
            145deg,
            #ff9b58,
            #f15d19
        );

    transform:
        rotate(-8deg);
}


.dc-hero-card > span{
    position:relative;

    color:
        #91ccef;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;
}


.dc-hero-card h2{
    position:relative;

    margin:
        12px
        0
        12px;

    color:#ffffff;

    font-size:64px;

    line-height:1;

    letter-spacing:-2px;

    font-weight:900;
}


.dc-hero-card p{
    position:relative;

    margin:0;

    color:
        #c2d4e2;

    font-size:15px;

    line-height:1.75;
}


.dc-hero-line{
    width:55px;
    height:2px;

    margin:
        24px
        auto;

    background:
        var(--dc-orange);
}


.dc-hero-card > strong{
    position:relative;

    color:#ffffff;

    font-size:14px;

    font-weight:700;
}


/* =========================================================
   QUICK INFO
========================================================= */

.dc-quick{
    position:relative;

    z-index:10;

    margin-top:-60px;
}


.dc-quick-grid{
    display:grid;

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

    overflow:hidden;

    border:
        1px solid
        rgba(220,230,237,.9);

    border-radius:20px;

    background:#ffffff;

    box-shadow:
        0 28px 65px
        rgba(3,35,62,.13);
}


.dc-quick-item{
    min-height:128px;

    display:flex;

    align-items:center;

    gap:16px;

    padding:
        25px;

    border-right:
        1px solid
        var(--dc-border);

    background:#ffffff;

    transition:
        background .25s ease;
}


.dc-quick-item:hover{
    background:
        #f8fbfd;
}


.dc-quick-item:last-child{
    border-right:0;
}


.dc-icon{
    position:relative;

    width:52px;
    height:52px;

    flex:none;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:15px;

    background:
        #edf6fc;

    font-size:0;
}


/*
   Pure CSS icon style
*/

.dc-icon::before{
    content:"";

    width:18px;
    height:18px;

    border:
        2px solid
        var(--dc-blue);

    border-radius:5px;
}


.dc-quick-item span{
    display:block;

    margin-bottom:6px;

    color:
        #8291a0;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.4px;
}


.dc-quick-item strong{
    display:block;

    color:
        var(--dc-navy);

    font-size:16px;

    line-height:1.4;

    font-weight:800;
}


/* =========================================================
   GENERAL SECTION
========================================================= */

.dc-section{
    padding:
        120px
        0;
}


.dc-section-heading{
    max-width:820px;

    margin:
        0
        auto
        60px;

    text-align:center;
}


.dc-section-heading > span{
    display:inline-block;

    margin-bottom:15px;

    color:
        var(--dc-blue);

    font-size:11px;

    font-weight:900;

    letter-spacing:2px;

    text-transform:uppercase;
}


.dc-section-heading h2{
    margin:0;

    color:
        var(--dc-navy);

    font-size:
        clamp(36px,4.3vw,55px);

    line-height:1.1;

    letter-spacing:-2px;

    font-weight:900;
}


.dc-section-heading p{
    max-width:720px;

    margin:
        20px
        auto
        0;

    color:
        var(--dc-text-light);

    font-size:17px;

    line-height:1.85;
}


/* =========================================================
   SCHEDULE
========================================================= */

.dc-schedule{
    background:#ffffff;
}


.dc-schedule-grid{
    display:grid;

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

    gap:18px;
}


.dc-schedule-card{
    position:relative;

    min-height:170px;

    padding:28px;

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

    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 8px 25px
        rgba(10,40,65,.035);

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


.dc-schedule-card:hover{
    transform:
        translateY(-6px);

    border-color:
        #a8d5ef;

    box-shadow:
        0 22px 45px
        rgba(4,70,115,.10);
}


.dc-schedule-card small{
    display:block;

    color:
        var(--dc-blue);

    font-size:10px;

    font-weight:900;

    letter-spacing:1.5px;
}


.dc-schedule-card strong{
    display:block;

    margin-top:13px;

    color:
        var(--dc-navy);

    font-size:30px;

    line-height:1;

    font-weight:900;
}


.dc-schedule-card span{
    display:block;

    margin-top:10px;

    color:
        var(--dc-text-light);

    font-size:14px;

    line-height:1.5;
}


.dc-next{
    border:
        2px solid
        var(--dc-orange);

    box-shadow:
        0 15px 40px
        rgba(242,106,33,.10);
}


.dc-next-badge{
    position:absolute;

    top:15px;
    right:15px;

    padding:
        5px
        9px;

    border-radius:30px;

    background:
        #fff0e8;

    color:
        #d95314;

    font-size:8px;

    font-weight:900;

    letter-spacing:.6px;
}


/* =========================================================
   INVESTMENT
========================================================= */

.dc-investment{
    position:relative;

    padding:
        95px
        0;

    overflow:hidden;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #06172a,
            #0a3150
        );
}


.dc-investment::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-200px;
    top:-220px;

    border-radius:50%;

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

    box-shadow:
        0 0 0 70px rgba(255,255,255,.02),
        0 0 0 140px rgba(255,255,255,.015);
}


.dc-investment-inner{
    position:relative;

    display:grid;

    grid-template-columns:
        .8fr
        1.2fr;

    align-items:center;

    gap:80px;
}


.dc-investment-inner > div:first-child > span{
    color:
        #8bcff5;

    font-size:11px;

    font-weight:900;

    letter-spacing:2px;
}


.dc-investment h2{
    margin:
        15px
        0
        0;

    color:#ffffff;

    font-size:
        clamp(42px,5vw,68px);

    line-height:1;

    letter-spacing:-2px;

    font-weight:900;
}


.dc-investment-inner > div:first-child > p{
    margin-top:10px;

    color:#8faabd;

    font-size:16px;
}


.dc-investment-content h3{
    margin:
        0
        0
        24px;

    color:#ffffff;

    font-size:23px;

    font-weight:800;
}


.dc-benefit-grid{
    display:grid;

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

    gap:12px;
}


.dc-benefit-grid div{
    padding:
        17px
        18px;

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

    border-radius:11px;

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

    color:#d8e5ee;

    font-size:14px;

    font-weight:700;
}


/* =========================================================
   BACKGROUND / ABOUT
========================================================= */

.dc-background{
    background:
        var(--dc-bg);
}


.dc-two-column{
    display:grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap:100px;
}


.dc-sticky-title{
    align-self:start;

    position:sticky;

    top:40px;
}


.dc-sticky-title > span{
    color:
        var(--dc-blue);

    font-size:11px;

    font-weight:900;

    letter-spacing:2px;
}


.dc-sticky-title h2{
    max-width:500px;

    margin:
        17px
        0
        25px;

    color:
        var(--dc-navy);

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

    line-height:1.08;

    letter-spacing:-1.7px;

    font-weight:900;
}


.dc-title-line{
    width:65px;
    height:4px;

    border-radius:10px;

    background:
        var(--dc-orange);
}


.dc-content-text p{
    margin:
        0
        0
        25px;

    color:
        #526577;

    font-size:17px;

    line-height:1.9;
}


.dc-highlight{
    margin-top:35px;

    padding:
        28px
        30px;

    border-left:
        4px solid
        var(--dc-orange);

    border-radius:
        0
        16px
        16px
        0;

    background:#ffffff;

    box-shadow:
        0 16px 40px
        rgba(5,40,70,.06);
}


.dc-highlight strong{
    display:block;

    margin-bottom:8px;

    color:
        var(--dc-navy);

    font-size:16px;
}


.dc-highlight p{
    margin:0;

    font-size:15px;
}


/* =========================================================
   OBJECTIVE
========================================================= */

.dc-objective{
    background:#ffffff;
}


.dc-objective-grid{
    display:grid;

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

    gap:18px;
}


.dc-objective-card{
    position:relative;

    min-height:310px;

    padding:32px;

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

    border-radius:20px;

    background:#ffffff;

    overflow:hidden;

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


.dc-objective-card::after{
    content:"";

    position:absolute;

    right:-60px;
    bottom:-60px;

    width:150px;
    height:150px;

    border-radius:50%;

    background:
        #f1f7fb;
}


.dc-objective-card:hover{
    transform:
        translateY(-7px);

    border-color:
        #c9dce9;

    box-shadow:
        0 25px 55px
        rgba(5,40,70,.09);
}


.dc-objective-card > span{
    position:relative;

    z-index:2;

    display:block;

    margin-bottom:55px;

    color:
        #dbe7ee;

    font-size:46px;

    line-height:1;

    font-weight:900;
}


.dc-objective-card h3{
    position:relative;

    z-index:2;

    margin:
        0
        0
        12px;

    color:
        var(--dc-navy);

    font-size:20px;

    line-height:1.35;

    font-weight:800;
}


.dc-objective-card p{
    position:relative;

    z-index:2;

    margin:0;

    color:
        var(--dc-text-light);

    font-size:14px;

    line-height:1.8;
}


/* =========================================================
   MATERIAL
========================================================= */

.dc-material{
    background:
        linear-gradient(
            180deg,
            #f5f8fb 0%,
            #eaf1f6 100%
        );
}


.dc-class-box{
    margin-bottom:30px;

    overflow:hidden;

    border:
        1px solid
        rgba(218,229,237,.9);

    border-radius:24px;

    background:#ffffff;

    box-shadow:
        0 20px 55px
        rgba(10,40,65,.07);
}


.dc-class-heading{
    display:flex;

    align-items:center;

    gap:20px;

    padding:
        30px
        34px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #06172a,
            #0b456e
        );
}


.dc-class-letter{
    width:68px;
    height:68px;

    flex:none;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:17px;

    background:
        var(--dc-orange);

    color:#ffffff;

    font-size:32px;

    font-weight:900;

    box-shadow:
        0 12px 25px
        rgba(242,106,33,.18);
}


.dc-class-heading span{
    display:block;

    color:
        #94c8e6;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;
}


.dc-class-heading h3{
    margin-top:5px;

    color:#ffffff;

    font-size:29px;

    line-height:1.2;

    font-weight:900;
}


.dc-material-grid{
    display:grid;

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


.dc-material-card{
    min-height:230px;

    padding:
        32px;

    border-right:
        1px solid
        var(--dc-border);

    border-bottom:
        1px solid
        var(--dc-border);

    background:#ffffff;

    transition:
        background .25s ease;
}


.dc-material-card:hover{
    background:#fbfdfe;
}


.dc-material-number{
    margin-bottom:17px;

    color:
        #c8d9e4;

    font-size:12px;

    font-weight:900;

    letter-spacing:1px;
}


.dc-material-card h4{
    margin:
        0
        0
        15px;

    color:
        var(--dc-navy);

    font-size:18px;

    line-height:1.5;

    font-weight:800;
}


.dc-material-card ul{
    margin:0;

    padding:0;

    list-style:none;
}


.dc-material-card li{
    position:relative;

    padding-left:21px;

    margin:
        9px
        0;

    color:
        #596b7b;

    font-size:14px;

    line-height:1.65;
}


.dc-material-card li::before{
    content:"";

    position:absolute;

    left:0;
    top:9px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        var(--dc-orange);
}


.dc-material-card p{
    margin:0;

    color:
        var(--dc-text-light);

    font-size:15px;

    line-height:1.8;
}


/* =========================================================
   REQUIREMENT
========================================================= */

.dc-requirement{
    background:#ffffff;
}


.dc-requirement-box{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    align-items:center;

    gap:80px;

    padding:
        65px;

    border:
        1px solid
        #dfebf3;

    border-radius:27px;

    background:
        #f3f8fc;
}


.dc-requirement-box > div:first-child > span{
    color:
        var(--dc-blue);

    font-size:11px;

    font-weight:900;

    letter-spacing:2px;
}


.dc-requirement-box h2{
    margin-top:15px;

    color:
        var(--dc-navy);

    font-size:
        clamp(35px,4vw,50px);

    line-height:1.08;

    letter-spacing:-1.5px;

    font-weight:900;
}


.dc-requirement-item{
    display:flex;

    gap:20px;

    padding:29px;

    border:
        1px solid
        #e6edf2;

    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 16px 40px
        rgba(5,40,70,.06);
}


.dc-check{
    width:52px;
    height:52px;

    flex:none;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:15px;

    background:
        #e4f3fc;

    font-size:0;
}


.dc-check::before{
    content:"";

    width:19px;
    height:10px;

    border-left:
        3px solid
        var(--dc-blue);

    border-bottom:
        3px solid
        var(--dc-blue);

    transform:
        rotate(-45deg)
        translateY(-2px);
}


.dc-requirement-item h3{
    margin:
        0
        0
        8px;

    color:
        var(--dc-navy);

    font-size:19px;

    font-weight:800;
}


.dc-requirement-item p{
    margin:0;

    color:
        var(--dc-text-light);

    font-size:15px;

    line-height:1.75;
}


/* =========================================================
   LOCATION
========================================================= */

.dc-location{
    padding:
        110px
        0;

    background:
        #f5f8fb;
}


.dc-location-box{
    position:relative;

    min-height:410px;

    display:grid;

    grid-template-columns:
        1.4fr
        .6fr;

    align-items:center;

    padding:
        65px;

    overflow:hidden;

    border-radius:30px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #06172a,
            #0a3b60
        );

    box-shadow:
        0 25px 70px
        rgba(4,35,60,.14);
}


.dc-location-box::before{
    content:"";

    position:absolute;

    width:400px;
    height:400px;

    right:-100px;
    bottom:-220px;

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

    border-radius:50%;

    box-shadow:
        0 0 0 60px rgba(255,255,255,.02),
        0 0 0 120px rgba(255,255,255,.015);
}


.dc-location-box > div:first-child{
    position:relative;

    z-index:2;
}


.dc-location-box > div:first-child > span{
    color:
        #83c9ed;

    font-size:11px;

    font-weight:900;

    letter-spacing:2px;
}


.dc-location-box h2{
    max-width:700px;

    margin:
        15px
        0
        35px;

    color:#ffffff;

    font-size:
        clamp(38px,4vw,55px);

    line-height:1.08;

    letter-spacing:-1.7px;

    font-weight:900;
}


.dc-location-data{
    display:flex;

    flex-wrap:wrap;

    gap:55px;
}


.dc-location-data strong{
    color:#ffffff;

    font-size:15px;

    font-weight:800;
}


.dc-location-data p{
    margin-top:8px;

    color:
        #d0dfe9;

    font-size:16px;
}


.dc-location-data small{
    display:block;

    margin-top:4px;

    color:
        #8daabd;

    font-size:12px;
}


.dc-location-art{
    position:absolute;

    right:-50px;
    bottom:-90px;

    width:390px;
    height:390px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:
        55px solid
        rgba(242,106,33,.08);

    border-radius:50%;
}


.dc-location-art span{
    color:
        rgba(255,255,255,.035);

    font-size:125px;

    font-weight:900;

    letter-spacing:-5px;
}


/* =========================================================
   REGISTRATION
========================================================= */

.dc-registration{
    background:#ffffff;
}


.dc-registration-box{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:55px;

    padding:
        65px;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #06172a,
            #0b3b60
        );

    box-shadow:
        0 25px 65px
        rgba(4,35,60,.13);
}


.dc-registration-content{
    max-width:720px;
}


.dc-registration-content > span{
    color:
        #82caee;

    font-size:11px;

    font-weight:900;

    letter-spacing:2px;
}


.dc-registration-content h2{
    margin:
        15px
        0
        18px;

    color:#ffffff;

    font-size:
        clamp(35px,4vw,50px);

    line-height:1.1;

    letter-spacing:-1.5px;

    font-weight:900;
}


.dc-registration-content p{
    margin:0;

    color:
        #c7d9e7;

    font-size:16px;

    line-height:1.8;
}


.dc-registration-buttons{
    width:240px;

    flex:none;

    display:flex;

    flex-direction:column;

    gap:11px;
}


.dc-btn-outline-dark{
    color:#ffffff !important;

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

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


.dc-btn-outline-dark:hover{
    background:
        rgba(255,255,255,.1);
}


/* =========================================================
   FAQ
========================================================= */

.dc-faq{
    background:
        var(--dc-bg);
}


.dc-faq-list{
    max-width:900px;

    margin:auto;
}


.dc-faq-item{
    margin-bottom:12px;

    overflow:hidden;

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

    border-radius:15px;

    background:#ffffff;
}


.dc-faq-question{
    width:100%;

    min-height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:
        20px
        24px;

    border:0;

    background:#ffffff;

    color:
        var(--dc-navy);

    text-align:left;

    cursor:pointer;

    font-family:inherit;

    font-size:16px;

    line-height:1.5;

    font-weight:750;
}


.dc-faq-question b{
    width:28px;
    height:28px;

    flex:none;

    display:flex;

    align-items:center;
    justify-content:center;

    border:
        1px solid
        #dbe5ec;

    border-radius:50%;

    color:
        var(--dc-blue);

    font-size:20px;

    line-height:1;

    font-weight:400;

    transition:
        transform .25s ease,
        background .25s ease;
}


.dc-faq-item.active
.dc-faq-question b{
    transform:
        rotate(45deg);

    background:
        #edf7fd;
}


.dc-faq-answer{
    max-height:0;

    overflow:hidden;

    transition:
        max-height .35s ease;
}


.dc-faq-answer p{
    margin:0;

    padding:
        0
        24px
        24px;

    color:
        var(--dc-text-light);

    font-size:15px;

    line-height:1.8;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.dc-reveal{
    opacity:0;

    transform:
        translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.dc-reveal.dc-visible{
    opacity:1;

    transform:
        translateY(0);
}


/* =========================================================
   PASSED SCHEDULE
========================================================= */

.dc-schedule-card.dc-passed{
    opacity:.58;

    filter:saturate(.65);
}


.dc-schedule-card.dc-passed:hover{
    transform:none;

    box-shadow:none;
}


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

@media(max-width:1100px){

    .dc-hero-inner{
        grid-template-columns:1fr;

        gap:50px;
    }


    .dc-hero-card{
        max-width:430px;
    }


    .dc-quick-grid{
        grid-template-columns:
            repeat(2,1fr);
    }


    .dc-quick-item:nth-child(2){
        border-right:0;
    }


    .dc-schedule-grid{
        grid-template-columns:
            repeat(3,1fr);
    }


    .dc-objective-grid{
        grid-template-columns:
            repeat(2,1fr);
    }


    .dc-investment-inner{
        grid-template-columns:1fr;

        gap:45px;
    }


    .dc-two-column{
        grid-template-columns:1fr;

        gap:55px;
    }


    .dc-sticky-title{
        position:relative;

        top:auto;
    }


    .dc-registration-box{
        flex-direction:column;

        align-items:flex-start;
    }


    .dc-registration-buttons{
        width:100%;

        flex-direction:row;

        flex-wrap:wrap;
    }


    .dc-registration-buttons .dc-btn{
        flex:1;
    }
}


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

@media(max-width:700px){

    .dc-container{
        width:
            calc(100% - 28px);
    }


    .dc-hero{
        min-height:680px;
    }


    .dc-hero-inner{
        padding:
            80px
            0;
    }


    .dc-hero h1{
        font-size:43px;

        letter-spacing:-1.8px;
    }


    .dc-hero-copy > p{
        font-size:16px;

        line-height:1.75;
    }


    .dc-hero-buttons{
        flex-direction:column;
    }


    .dc-btn{
        width:100%;
    }


    .dc-hero-card{
        padding:
            38px
            25px;
    }


    .dc-quick{
        margin-top:-35px;
    }


    .dc-quick-grid{
        grid-template-columns:1fr;
    }


    .dc-quick-item{
        min-height:105px;

        border-right:0 !important;

        border-bottom:
            1px solid
            var(--dc-border);
    }


    .dc-quick-item:last-child{
        border-bottom:0;
    }


    .dc-section{
        padding:
            80px
            0;
    }


    .dc-section-heading{
        margin-bottom:42px;
    }


    .dc-section-heading h2{
        font-size:35px;

        letter-spacing:-1.2px;
    }


    .dc-section-heading p{
        font-size:15px;
    }


    .dc-schedule-grid{
        grid-template-columns:
            repeat(2,1fr);
    }


    .dc-schedule-card{
        min-height:150px;

        padding:22px;
    }


    .dc-schedule-card strong{
        font-size:25px;
    }


    .dc-schedule-card span{
        font-size:13px;
    }


    .dc-benefit-grid{
        grid-template-columns:1fr;
    }


    .dc-objective-grid{
        grid-template-columns:1fr;
    }


    .dc-objective-card{
        min-height:260px;
    }


    .dc-material-grid{
        grid-template-columns:1fr;
    }


    .dc-material-card{
        border-right:0;
    }


    .dc-requirement-box{
        grid-template-columns:1fr;

        gap:35px;

        padding:
            40px
            25px;
    }


    .dc-location{
        padding:
            80px
            0;
    }


    .dc-location-box{
        grid-template-columns:1fr;

        padding:
            45px
            27px;
    }


    .dc-location-art{
        display:none;
    }


    .dc-location-data{
        flex-direction:column;

        gap:25px;
    }


    .dc-registration-box{
        padding:
            45px
            25px;
    }


    .dc-registration-buttons{
        flex-direction:column;
    }


    .dc-registration-buttons .dc-btn{
        width:100%;
    }


    .dc-class-heading{
        padding:
            25px;
    }


    .dc-class-letter{
        width:58px;
        height:58px;

        font-size:27px;
    }


    .dc-class-heading h3{
        font-size:25px;
    }


    .dc-class-heading span{
        font-size:8px;

        letter-spacing:1.2px;
    }
}


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

@media(max-width:430px){

    .dc-hero h1{
        font-size:37px;
    }


    .dc-eyebrow{
        min-height:34px;

        padding:
            0
            13px;

        font-size:8px;

        letter-spacing:1px;
    }


    .dc-schedule-grid{
        grid-template-columns:1fr;
    }


    .dc-schedule-card{
        min-height:145px;
    }


    .dc-class-heading{
        gap:13px;
    }


    .dc-class-letter{
        width:52px;
        height:52px;
    }


    .dc-material-card{
        padding:25px;
    }


    .dc-requirement-item{
        padding:24px;
    }


    .dc-location-box h2{
        font-size:35px;
    }


    .dc-registration-content h2{
        font-size:34px;
    }
}


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

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

    html{
        scroll-behavior:auto;
    }


    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;
    }
}