body.container {
    min-height: 100vh; /* fill screen vertically */
}

html {
    position: relative;
    overflow-x: hidden;
}

h2 {
    text-align: center;
    font-weight: 500;
    font-size: 1.2rem;
}
#index-body.download-body h2{
    text-align:start;
    font-size:1.5rem;
}#container-first > h2.machead{
    margin-top:50px;
}
#index-body {
    position: relative;
    overflow-x: hidden;
    background-color: white;
    display: flex; /* optional: center if you want */
    flex-direction: column; /* stack header + hero + sections */
}
.link-button {
    color: #0066cc; /* web-style blue */
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}

    .link-button:hover {
        color: #004999; /* darker blue on hover */
        text-decoration: none;
    }

#main-img-1 {
    border-radius: 10px;
}

.inner-blur {
    position: absolute;
    filter: blur(50px);
    width: 40%;
    opacity: 0.7;
    height: 100%;
}
.logo-img-header{
    margin-top:5px
}
.logo-text-index {
    opacity: 0.85;
    font-weight: 600;

}
.logo-text-downloads {
    opacity: 0.85;
    font-weight: 600;
}


#btn-container-right {
    margin-left: auto;
    display: flex;
}

    #btn-container-right .btn-dark {
        background-color: #b81d3d;
    }

    #btn-container-right .btn {
        padding: 5px 12px;
    }

    #btn-container-right > a.btn.btn-dark {
        margin-left: 0px;
    }

footer .nav-item .nav-link, footer .text-muted {
    font-size: 0.9rem !important;
}

#inner-blur-1 {
    background-color: var( --gradient-color-1d);
    left: 0%;
}

#inner-blur-2 {
    background-color: var( --gradient-color-2d);
    left: 20%;
}

#inner-blur-3 {
    background-color: var( --gradient-color-3d);
    left: 40%;
}

#inner-blur-4 {
    background-color: var( --gradient-color-4d);
    left: 60%;
}

#subtext-1 {
    background-color: #ffffff30;
    border-radius: 1rem;
    max-width: fit-content;
    display: inline-block;
    padding: .35rem .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    font-size: .9rem;
    opacity: .9;
    backdrop-filter: saturate(1.2);
    margin: auto;
    color: #000000;
}
.download-body #container-first {
display:flex; flex-grow:1;    justify-content: start;
}
#container-first {
    /* overflow-x:hidden; */
    margin-top: 50px;
    display: flex;
    
    flex-direction: column;
    justify-content: center;
}

.logo-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .logo-card img {
        filter: grayscale(100%);
    }

#index-footer {
    z-index: 2;
    position: relative;
}

.logo-card img:hover {
    filter: none;
    opacity: 1;
    transform: translateY(-1px)
}

#support-row {
    display: flex;
    justify-content: center;
    margin-bottom: 100px !important;
    z-index: 1;
}

.logo-card span {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

#text-cont-1 {
    display: flex;
    position: relative;
    z-index: 1;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 10px
}

#index-body .navbar {
    padding: 10px 20px;
    border: none !important;
    background-color: transparent !important;
    border-bottom: solid 1px #0000002b !important;
    border-radius: 0px !important;z-index:10;
}

#button-row-2 {
    display: flex;
    flex-wrap: wrap;
}

    #button-row-2 .col-12 {
        flex: 1;
        display: flex;
    }

        #button-row-2 .col-12:first-of-type {
            justify-content: end;
        }

    #button-row-2 .btn {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

#button-row-2 {
    display: flex;
    max-width: 720px;
    width: 100%;
    margin: auto;
    justify-content: center;
}

.img-blur-bg {
    position: absolute;
    top: -400px;
    z-index: 0;
    left: -300px;
    width: 100%;
    display: flex;
    min-width: 2000px;
    max-width: 5000px;
    height: 1400px;
    opacity: 0.7; /* soften brightness */
    display: none;
}

#button-row-2 .btn {
    padding: 9px 20px;
    border-radius: 1.5rem;
    max-width: 300px;
}

#windows-button {
    background-color: #0173d0;
}

#mac-button {
    background-color: #363c4c;
}

#ios-button {
    border: solid 1px #0000006e;
}

.blur-container-1 {
    display: none;
}

.blur-container-2 {
    display: flex;
}

.blur-container-2 {
    filter: blur(2px);
    position: absolute;
    top: -404px;
    left: -700px;
    z-index: 0;
    width: 100%;
    min-width: 3000px;
    max-width: 6000px;
    height: 1500px;
    background: url("/img/index/bgblur1.png") center/cover no-repeat;
    opacity: 0.7;
    /* feather the edges */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 10%,rgba(0,0,0,1) 40%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 80%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 10%,rgba(0,0,0,1) 40%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.4) 80%,rgba(0,0,0,0) 90%);
    mask-repeat: no-repeat;
    mask-size: cover;
}

.blur-container-1 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 1rem;
}

.inner-container-main-1 {
    padding: 100px;
    position: relative;
    padding-bottom: 20px;
}

#main-img-1 {
    box-shadow: 0 20px 60px rgba(0,0,0,0.25), /* normal drop shadow */
    0 0 120px 40px rgba(0,0,0,0.25); /* soft radial glow */
    z-index: 1;
    position: relative;
    outline: 1px solid rgba(255,255,255,.25);
}

.text-body-secondary {
    margin-top: 10px;
}

section.features {
    background: #f7f6f6;
    position: relative;
    width: 100%;
    margin: 0px !important;
    justify-content: center;
    display: flex;
    max-width: 100%;
}

@media (max-width: 768px) {
    /* styles here apply only on mobile & small tablets */
    .partners {
        flex-direction: column;
        gap: 12px;
    }

    #index-body .navbar {
        padding: 10px 0px
    }

    .section-kicker {
        font-size: 0.85rem;
    }

    #button-row-2 {
        flex-direction: column;
    }

        #button-row-2 .btn {
            width: 100%;
        }

    .inner-container-main-1 {
        padding: 10px;
    }

    #text-cont-1 {
        margin-bottom: 30px
    }

    #ios-button {
        display: none;
    }

    #button-row-2 .col-12 {
        justify-content: center !important;
    }

        #button-row-2 .col-12 .btn {
            margin-left: 0px
        }
}

@media (max-width: 1020px) {
    .inner-container-main-1 {
        padding: 10px;
    }
}

@media (max-width: 325px) {
    #btn-container-right > a.btn.btn-dark > i {
        display: none
    }
}