/* =========================================
        WHAT WE BUILD
========================================= */

.build-section{

    position: relative;

    width: 100%;

    padding: 160px 0;

    overflow: hidden;

    background:
    radial-gradient(circle at top left,
    rgba(28,44,77,.45),
    transparent 35%),

    linear-gradient(
    90deg,
    #11161F 0%,
    #151B25 45%,
    #10141C 100%);

}


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

.build-container{

    width:88%;
    max-width:1120px;

    margin:auto;
    margin-bottom: -60px;

}


/* =========================================
        HEADER
========================================= */

.build-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

margin-top: 10px;
    margin-bottom:50px;

}

.build-title{

    font-size:94px;

    font-weight:800;

    line-height:1;

    color:#ffffff;

    letter-spacing:-3px;

}

.build-description{

    width:460px;

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

    font-size:13px;

    line-height:1.5;
    margin-top: 30px;

}


/* =========================================
        GRID
========================================= */

.build-grid{

    display:flex;

    justify-content:center;

    gap:30px;

}


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

.build-card{

    position:relative;

    width:350px;

    height:450px;

    border-radius:24px;

    overflow:hidden;

    flex-shrink:0;

    cursor:pointer;

    transition:.45s;

}

.build-card:hover{

    transform:translateY(-12px);

}


/* =========================================
        IMAGE
========================================= */

.build-image{

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        grayscale(100%)
        brightness(.55)
        contrast(1.05);

    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        filter .8s cubic-bezier(.22,.61,.36,1);

}

.build-card:hover .build-image{

    transform:scale(1.08);

    filter:
        grayscale(0%)
        brightness(1)
        contrast(1.05)
        saturate(1.15);

}


/* =========================================
        OVERLAY
========================================= */

.build-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    to top,

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

    rgba(0,0,0,.18),

    rgba(0,0,0,.05));

}


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

.build-content{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:30px;

}

.build-content h3{

    font-size:40px;

    line-height:1.15;

    font-weight:700;

    letter-spacing:0;

}


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

.build-btn{

    width:100%;

    height:58px;

    border-radius:999px;

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

    backdrop-filter:blur(20px);

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    transition:.35s;

}

.build-btn:hover{

    background:#ffffff;

    color:#111111;

}


/* =========================================
        CARD GLOW
========================================= */

.build-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top,

    rgba(52,210,255,.25),

    transparent 65%);

    opacity:0;

    transition:.45s;

    z-index:2;

}

.build-card:hover::before{

    opacity:1;

}

.build-content{

    z-index:3;

}


/* =========================================
        RESPONSIVE
========================================= */

/* Laptop Besar */
@media (max-width:1400px){

    .build-container{

        max-width:1100px;

    }

    .build-title{

        font-size:82px;

    }

    .build-card{

        width:320px;
        height:420px;

    }

    .build-content h3{

        font-size:36px;

    }

}


/* Laptop */
@media (max-width:1200px){

    .build-container{

        width:90%;

    }

    .build-header{

        flex-direction:column;

        gap:25px;

        margin-bottom:45px;

    }

    .build-description{

        width:100%;

        max-width:700px;

        margin-top:0;

    }

    .build-title{

        font-size:72px;

    }

    .build-grid{

        display:flex;

        justify-content:center;

        gap:22px;

        flex-wrap:wrap;

    }

    .build-card{

        width:310px;

        height:420px;

    }

    .build-content h3{

        font-size:34px;

    }

}


/* Tablet */
@media (max-width:992px){

    .build-section{

        padding:110px 0;

    }

    .build-title{

        font-size:58px;

        letter-spacing:-2px;

    }

    .build-description{

        font-size:15px;

        line-height:1.7;

    }

    .build-grid{

        flex-direction:column;

        align-items:center;

        gap:28px;

    }

    .build-card{

        width:100%;

        max-width:620px;

        height:430px;

    }

}


/* Mobile */
@media (max-width:768px){

    .build-section{

        padding:90px 0;

    }

    .build-container{

        width:90%;

        margin-bottom:0;

    }

    .build-header{

        margin-bottom:35px;

    }

    .build-title{

        font-size:42px;

        letter-spacing:-1px;

    }

    .build-description{

        font-size:15px;

        line-height:1.7;

    }

    .build-grid{

        gap:22px;

    }

    .build-card{

        width:100%;

        height:380px;

        border-radius:22px;

    }

    .build-content{

        padding:24px;

    }

    .build-content h3{

        font-size:30px;

    }

    .build-btn{

        height:52px;

        font-size:12px;

    }

}


/* Small Mobile */
@media (max-width:480px){

    .build-title{

        font-size:34px;

    }

    .build-description{

        font-size:14px;

    }

    .build-card{

        height:340px;

        border-radius:18px;

    }

    .build-content{

        padding:20px;

    }

    .build-content h3{

        font-size:24px;

    }

    .build-btn{

        height:48px;

        font-size:11px;

    }

}


/* iPhone SE */
@media (max-width:380px){

    .build-title{

        font-size:30px;

    }

    .build-description{

        font-size:13px;

        line-height:1.6;

    }

    .build-card{

        height:310px;

    }

    .build-content h3{

        font-size:21px;

    }

}