/* ===================================
   COYCRUISIN DYNAMIC BUILD PAGE
=================================== */

:root {

    --green:#82BE21;
    --orange:#ff6600;

    --dark:#111;
    --text:#111;

    --muted:#666;

    --light:#f5f5f2;

}


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

* {

    box-sizing:border-box;

}


html,
body {

    margin:0;

    padding:0;

    width:100%;

    overflow-x:hidden;

}


body {

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

    color:var(--text);

    background:#fff;

}


/* ===================================
   PAGE
=================================== */

.build-page {

    width:100%;

}


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

.build-container {

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding-left:25px;

    padding-right:25px;

}


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

.build-hero {

    background:#111;

    color:#fff;

    text-align:center;

    padding:65px 20px 55px;

}


.build-hero h1 {

    margin:0 0 15px;

    font-size:46px;

    line-height:1.15;

}


.build-hero p {

    max-width:800px;

    margin:0 auto;

    color:#ccc;

    font-size:18px;

    line-height:1.7;

}


/* ===================================
   BUILD SECTION
=================================== */

.build-section {

    background:#f5f5f2;

    padding:70px 0;

}


/* ===================================
   BUILD ITEM
=================================== */

.build-item {

    display:grid;

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

    align-items:center;

    gap:60px;

    margin-bottom:80px;

}


.build-item:last-child {

    margin-bottom:0;

}


/* ===================================
   REVERSE
=================================== */

.build-item.reverse {

    direction:rtl;

}


.build-item.reverse > * {

    direction:ltr;

}


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

.build-image {

    width:80%;

    margin:0 auto;

    overflow:hidden;

    border-radius:12px;

    background:#ddd;

    display:flex;

    align-items:center;

    justify-content:center;

}


.build-image img {

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

}
/* ===================================
   NO IMAGE
=================================== */

.no-image {

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#888;

    font-size:18px;

}


/* ===================================
   TEXT
=================================== */

.build-text {

    padding:10px 10px;

}


.stage-number {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    margin-bottom:15px;

    border-radius:50%;

    background:var(--green);

    color:#111;

    font-size:15px;

    font-weight:bold;

}


.build-text h2 {

    margin:0 0 15px;

    font-size:32px;

    line-height:1.2;

}


.build-text p {

    margin:0;

    color:#555;

    font-size:17px;

    line-height:1.7;

}


/* ===================================
   NO STAGES
=================================== */

.no-stages {

    max-width:700px;

    margin:0 auto;

    padding:60px 30px;

    text-align:center;

    background:#fff;

    border-radius:12px;

}


.no-stages h2 {

    margin:0 0 10px;

    font-size:28px;

}


.no-stages p {

    margin:0;

    color:var(--muted);

}


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

@media (max-width:800px) {

    .build-hero {

        padding:50px 20px 45px;

    }


    .build-hero h1 {

        font-size:38px;

    }


    .build-section {

        padding:50px 0;

    }


    .build-item {

        gap:35px;

        margin-bottom:60px;

    }


    .build-text h2 {

        font-size:27px;

    }


    .build-text p {

        font-size:16px;

    }

}


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

@media (max-width:600px) {

    .build-container {

        padding-left:15px;

        padding-right:15px;

    }


    .build-hero {

        padding:40px 15px 35px;

    }


    .build-hero h1 {

        font-size:32px;

    }


    .build-hero p {

        font-size:16px;

        line-height:1.6;

    }


    .build-section {

        padding:40px 0;

    }


    .build-item,
    .build-item.reverse {

        display:flex;

        flex-direction:column;

        gap:20px;

        margin-bottom:50px;

        direction:ltr;

    }


    .build-image {

        border-radius:10px;

    }


    .build-text {

        width:100%;

        padding:0 5px;

    }


    .stage-number {

        width:34px;

        height:34px;

        margin-bottom:10px;

    }


    .build-text h2 {

        font-size:25px;

        margin-bottom:10px;

    }


    .build-text p {

        font-size:16px;

        line-height:1.6;

    }

}


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

@media (max-width:400px) {

    .build-hero h1 {

        font-size:28px;

    }


    .build-text h2 {

        font-size:23px;

    }


    .build-text p {

        font-size:15px;

    }

}