/* #region breakpoints for new mockups */
/* #endregion breakpoints for new mockups */
/* #region breakpoints for new mockups */
/* #endregion breakpoints for new mockups */
/* #region media queries for new mockups */
/* #endregion media queries for new mockups */
body, html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

@supports (scroll-margin-top: 0) {
    section{
        scroll-margin-top: 150px;
    }
    section.home-clients-section{
        scroll-margin-top: 10vh;
    }
}
@media (max-width: 768px){
    @supports (scroll-margin-top: 0) {
        section{
            scroll-margin-top: 10px;
        }
        section#clients{
            scroll-margin-top: 10px;
        }
    }
}

body {

    margin: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--main-bg-color);
}

main {
    flex: 1;
}

.info-block{
    background-color: var(--main-text-default-color);
    padding: 16px 16px 24px 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap:4px;
}

.text-block{
    display: flex;
    flex-direction: column;
    gap:8px;
}

a:link { color: var(--main-text-link-color) }
a:visited { color: var(--main-text-link-color-visited) }
a.white{color: var(--bg-color-white)}
a.white:visited{color: var(--bg-color-white)}

@media only screen and (min-width: 320px) {

    main section.labeled-section {
        margin-top: calc(-1 * 26px) !important;
    }

    main section.labeled-section .section-label {
        position: relative !important;
        top: 20px;
        right: 10px !important;
    }
    .container-wrapper{
        padding: 0 16px;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 360px) {
    main section.labeled-section .section-label {
        top: 18px;
    }
}

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

    main section.labeled-section .section-label {
        top: 26px;
    }

    .container-wrapper {
        padding:0 32px;
        margin: 0 auto;
    }

    .info-block{
        padding: 24px 24px 32px 24px;
        border-radius: 16px;
        gap:8px;
    }
}

@media (min-width: 1024px){
    .info-block{
        padding: 32px 32px 40px 32px;
        gap:16px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1365px) {

    main section.labeled-section {
        margin-top: calc(-1 * 35px) !important;
    }

    main section.labeled-section .section-label {
        position: relative !important;
        top: 26px !important;
    }
}

@media only screen and (min-width: 1280px) {

    .container-wrapper {
        padding:0 60px;
        margin: 0 auto;
    }
}




@media only screen and (min-width: 1366px) {

    main section.labeled-section {
        margin-top: calc(-1 * 35px) !important;
    }

    main section.labeled-section .section-label {
        position: relative !important;
        top: 35px !important;
    }
}

input,
textarea,
button,
select,
.clickable,
a {
    -webkit-tap-highlight-color: transparent; }

ul {
    padding: 0; }

input[type="submit"], input[type="button"], textarea, select {
    outline: none;
    font-size: 20px;
    font-weight: bold;
}

.btn-base {
    background: var(--main-items-color);
    background-position: center;
    border-color: var(--main-items-color);
    border-radius: 8px;
    border-style: solid;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 22px;
    text-transform: uppercase;
    height: 48px;
    width: 120px;
    
     }
a.btn-base:visited{
    color: white;
}

a.btn-base:hover:enabled,
.btn-base:hover:enabled {
    border: 1px solid var(--main-btn-bg-hover);
    background-color: var(--main-btn-bg-hover);
}
a.btn-base:focus:enabled,
.btn-base:focus:enabled{
    border: 1px solid var(--main-items-color);
}

.btn-base:disabled{
    background-color: var(--main-btn-bg-disabled);
    border-color: var(--main-btn-bg-disabled);
    color: var(--main-btn-text-disabled);
    cursor:default;
}

.btn-base i,
.btn-transparent-base i,
.btn-alt-base i
{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 18px;
    width: 30px;
}

.btn-transparent-base{
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Poppins, sans-serif;
    font-size: 21px;
    font-weight: 600;
    text-underline: none;
    height: 48px;
    width: 160px;
}


.btn-container .btn-transparent-base i.home-icon
{
    background-image: url('../images/home-icon.svg');
    height: 22px;
}

.btn-container .btn-transparent-base i.back-icon
{
    background-image: url('../images/back-arrow-icon.svg');
    background-position: center;
}

.btn-container .btn-transparent-base a
{
    text-decoration: none;
}

.btn-alt-base a:link
{
    color: var(--main-btn-text-color);
}

.btn-alt-base{
    background: linear-gradient(180deg,var(--main-btn-alt-bg), var(--main-btn-alt-bg-second));
    color: var(--main-btn-text-color);
    border-radius: 8px;
    width: fit-content;
    padding: 16px 32px;
}
.btn-alt-base:hover{
    background: linear-gradient(0deg,var(--main-btn-alt-bg-hover), var(--main-btn-alt-bg-second-hover));
    color:var(--main-btn-alt-text-color-hover);    
}

.btn-alt-base:hover a#learn-more-link{
    color:var(--main-btn-alt-text-color-hover);
}

.flex-row{
    display: flex;
    flex-direction: row;
}

.flex-wrap{
    flex-wrap: wrap;
}


.invisible {
    visibility: hidden; }

.hidden {
    display: none; }

.unclickable {
    cursor: text !important;
    color: #FFFFFF; }

.clickable {
    cursor: pointer; }

@media (min-width: 1440px) {
    main {
        box-sizing: border-box;
    }

    .container-wrapper {
        max-width: 1280px;
    }
}

@media only screen and (min-width: 1440px) {
    .container-wrapper {
        padding: 0;
        max-width: 1280px;
        margin: 0 auto;
    }
}