.container{

    width:90%;
    max-width:1200px;
    margin:auto;
    padding:70px 0;

}

.release-hero{

    height:180px;

    background:linear-gradient(rgba(5,20,45,.78),
    rgba(5,20,45,.78)),
    url("/static/images/release-banner.jpg");

    background-size:cover;
    background-position:center;

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

    text-align:center;
    color:#fff;

}

.release-overlay h1{

    font-size:52px;
    margin-bottom:20px;

}

.release-overlay p{

    max-width:800px;
    margin:auto;

    font-size:20px;

    line-height:1.8;

}

.release-timeline{

    position:relative;

}

.release-card{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:30px;

    margin-bottom:40px;

    background:#fff;

    border-radius:15px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    padding:35px;

}

.release-version{

    background:#1565c0;

    color:#fff;

    border-radius:12px;

    text-align:center;

    font-size:28px;

    font-weight:bold;

    padding:40px 15px;

    height:fit-content;

}

.release-content h2{

    color:#0b3d91;

    margin-bottom:10px;

}

.release-date{

    display:block;

    color:#777;

    margin-bottom:20px;

}

.release-content h4{

    color:#1565c0;

    margin-top:20px;

}

.release-content ul{

    margin-top:10px;

    padding-left:20px;

    line-height:1.9;

}

.release-content li{

    color:#555;

}

@media(max-width:900px){

.release-card{

grid-template-columns:1fr;

}

.release-version{

padding:20px;

}

}

/* ==========================================
   Release Description
========================================== */

.release-description{

    margin-top:20px;

    padding:20px;

    background:#f8fbff;

    border:1px solid #dbe8ff;

    border-radius:10px;

    color:#444;

    line-height:1.8;

    font-size:15px;

}

/* Headings */


/* Paragraph */




/* =========================================
   RELEASE NOTES
========================================= */

.release-container {

    width: 90%;
    max-width: 1200px;

    margin: auto;

    padding: 70px 0;

}


/* =========================================
   RELEASE TREE
========================================= */

.release-tree {

    position: relative;

    padding-left: 60px;

}


/* Main vertical tree */

.release-tree::before {

    content: "";

    position: absolute;

    left: 22px;

    top: 0;

    bottom: 0;

    width: 3px;

    background: linear-gradient(
        to bottom,
        #002A7F,
        #25B11B
    );

    border-radius: 10px;

}


/* =========================================
   RELEASE NODE
========================================= */

.release-node {

    position: relative;

    margin-bottom: 60px;

}


/* =========================================
   VERSION NODE
========================================= */

.release-version-node {

    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 25px;

}


/* Circle */

.release-version-icon {

    position: absolute;

    left: -60px;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #002A7F,
        #008235
    );

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    font-size: 15px;

    box-shadow:
        0 0 0 5px #ffffff,
        0 5px 15px rgba(0,0,0,.15);

}


/* =========================================
   VERSION INFORMATION
========================================= */

.release-version-info {

    background: white;

    padding: 20px 25px;

    border-radius: 14px;

    border: 1px solid #e2e8f0;

    box-shadow:
        0 8px 25px rgba(0,0,0,.07);

    flex: 1;

}


.release-version-info h2 {

    margin: 0;

    color: #002A7F;

    font-size: 28px;

}


.release-version-info span {

    display: block;

    margin-top: 5px;

    color: #555;

    font-size: 16px;

}


.release-version-info small {

    display: block;

    margin-top: 10px;

    color: #777;

}


/* =========================================
   RELEASE BRANCH
========================================= */

.release-branch {

    position: relative;

    margin-left: 35px;

    padding-left: 35px;

}


/* Horizontal branch */

.release-branch::before {

    content: "";

    position: absolute;

    left: 0;

    top: 25px;

    width: 35px;

    height: 2px;

    background: #cbd5e1;

}


/* =========================================
   RELEASE DESCRIPTION
========================================= */

.release-description {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    padding: 25px 30px;

    color: #444;

    line-height: 1.8;

    font-size: 15px;

    box-shadow:
        0 6px 20px rgba(0,0,0,.06);

}


/* =========================================
   DESCRIPTION HEADINGS
========================================= */

.release-description h1,
.release-description h2,
.release-description h3,
.release-description h4,
.release-description h5,
.release-description h6 {

    color: #002A7F;

    margin-top: 25px;

    margin-bottom: 12px;

}


.release-description h3 {

    font-size: 20px;

    padding-left: 15px;

    border-left: 4px solid #25B11B;

}


/* =========================================
   LIST
========================================= */

.release-description ul,
.release-description ol {

    margin: 15px 0 20px 25px;

}


.release-description li {

    margin-bottom: 8px;

}


/* =========================================
   LIST TREE EFFECT
========================================= */

.release-description ul {

    list-style: none;

    padding-left: 20px;

}


.release-description ul li {

    position: relative;

    padding-left: 25px;

}


.release-description ul li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 11px;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #25B11B;

}


/* =========================================
   LINKS
========================================= */

.release-description a {

    color: #1565c0;

    text-decoration: none;

}


.release-description a:hover {

    color: #25B11B;

    text-decoration: underline;

}


/* =========================================
   IMAGES
========================================= */

.release-description img {

    max-width: 100%;

    height: auto;

    display: block;

    margin: 20px 0;

    border-radius: 8px;

    border: 1px solid #ddd;

}


/* =========================================
   TABLE
========================================= */

.release-description table {

    width: 100%;

    border-collapse: collapse;

    margin: 20px 0;

}


.release-description th {

    background: #002A7F;

    color: white;

    padding: 10px;

}


.release-description td {

    padding: 10px;

    border: 1px solid #ddd;

}


/* =========================================
   BLOCKQUOTE
========================================= */

.release-description blockquote {

    margin: 20px 0;

    padding: 15px 20px;

    background: #f5f9ff;

    border-left: 5px solid #25B11B;

    color: #555;

}


/* =========================================
   CODE
========================================= */

.release-description code {

    background: #f4f4f4;

    padding: 2px 6px;

    border-radius: 4px;

    font-family: Consolas, monospace;

}


.release-description pre {

    background: #1f2937;

    color: white;

    padding: 18px;

    border-radius: 8px;

    overflow: auto;

}


/* =========================================
   DOWNLOAD
========================================= */

.release-download {

    margin-top: 20px;

}


.download-btn {

    display: inline-block;

    background: #25B11B;

    color: white;

    text-decoration: none;

    padding: 12px 22px;

    border-radius: 8px;

    font-weight: 600;

    transition: .25s;

}


.download-btn:hover {

    background: #008235;

    transform: translateY(-2px);

}


/* =========================================
   EMPTY
========================================= */

.release-empty {

    padding: 25px;

    background: #f8fafc;

    border-radius: 10px;

    color: #777;

}


.release-empty-main {

    text-align: center;

    padding: 70px 20px;

}


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

@media(max-width: 768px) {

    .release-container {

        width: 92%;

        padding: 40px 0;

    }


    .release-tree {

        padding-left: 45px;

    }


    .release-tree::before {

        left: 15px;

    }


    .release-version-icon {

        left: -45px;

        width: 35px;

        height: 35px;

        font-size: 12px;

    }


    .release-version-info h2 {

        font-size: 22px;

    }


    .release-branch {

        margin-left: 10px;

        padding-left: 20px;

    }


    .release-branch::before {

        width: 20px;

    }


    .release-description {

        padding: 20px;

        font-size: 14px;

    }

}