:root {
    --zints-blue: #4c7291;
    --zints-orange: #fab164;
    --zints-pink: #ca528f;
    --zints-green: #afd4ca;
}

html, body {
    margin: 0;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    background-image: url('images/zintsmaster-background-2025-gradient.jpg');
    /*background-color: rgba(1000,1000,1000,0.7);
    background-blend-mode: color-dodge;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
}

.main-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}

.zintsmaster-div {
    margin: auto;
}

.zintsmaster-div h1 {
    margin: 25px;
    font-size: 5em;
    text-align: center;
}
.zintsmaster-div:first-child img { margin-bottom: 4rem; }
.zintsmaster-div:last-child img { margin-top: 4rem; }

#desc { margin: auto; }
#desc div { max-width: fit-content; margin: auto; }
#desc div img { height: 2.3rem; }
#dots { margin-right: 5px; }
/*#desc .row div:last-child img { height: 45px; margin-top: 10px; }*/

/*** FONTS & COLORS ************************************/

.zints-blue {
    color: var(--zints-blue);
}

.zints-orange {
    color: var(--zints-orange);
}

.zints-pink {
    color: var(--zints-pink);
}

.zints-green {
    color: var(--zints-green);
}

.text-shadow {
    text-shadow: 1px 1px 2px #000;
}

.text-uppercase { text-transform: uppercase; }

/**** BUTTONS ***********************************************/
.btn-zintsmaster {
    background: var(--zints-blue);
    border-color: var(--zints-blue);
    border-radius: initial;
    margin: 10px;
}

.btn-zintsmaster:hover {
    background: #31495d;
    border-color: #31495d;
}


/**** RESPONSIVENESS *************************************************************/
@media screen and (min-width: 1400px) {
    .container { max-width: 1140px !important; }
    .zintsmaster-div:last-child img { margin-top: 0; }
    .zintsmaster-div:first-child img { margin-bottom: 3rem; }
    .zintsmaster-div { text-align: center; }
    #zintsLogo { max-width: 90%; }
    .zintsmaster-div:first-child img { margin-bottom: 3rem; }
}

@media screen and (min-width: 1650px) {
    .container { max-width: 1320px !important; }
    .zintsmaster-div { width: 90%; }
}

@media screen and (min-width: 1920px) {
    .container { max-width: 1620px !important; }
    #desc div img { height: 3rem; }
}

@media screen and (max-width: 1400px) {
    .container { max-width: 1140px !important; }
    .zintsmaster-div:last-child img { margin-top: 0; }
    .zintsmaster-div:first-child img { margin-bottom: 3rem; }
    .zintsmaster-div { text-align: center; }
    #zintsLogo { max-width: 90%; }
    .zintsmaster-div:first-child img { margin-bottom: 3rem; }
}

@media screen and (max-width: 1200px) {
    .zintsmaster-div {
        width: 100%;
    }
}

@media screen and (max-width: 990px) {
    #zintsLogo { max-width: 100%; }
}

@media screen and (max-width: 768px) {

    html {
        height: auto;
        background-image: linear-gradient(to top, var(--zints-green) 15%, white 50%, var(--zints-orange) 200%);
    }

    body {
        background: transparent none;
    }

    .main-container { margin-top: 3rem; }

    .zintsmaster-div:last-child { margin-top: -60px !important; }

    .zintsmaster-div:last-child div { flex-direction: column; }

    #desc div { margin: initial; }

    .btn-zintsmaster { margin-bottom: 5px; }

    .zints-srv-itm { margin-bottom: 2.5rem; text-align: center; }

    .zints-srv-itm:last-child a img { margin-left: 20px; }

}

@media screen and (max-width: 575px) {
    .zints-srv-itm:first-child a img { margin-left: -10px; }

}

@media screen and (max-width: 450px) {
    .zintsmaster-div {
        padding: 0;
    }

    #desc div img { height: 30px; }

    .zints-srv-itm:nth-child(2) a img, .zints-srv-itm:last-child a img { max-width: 90%; }
}

@media screen and (max-width: 400px) {


}