/*
    Colors
------------------------------------------------------------------------------------ */
:root {
    -webkit-font-smoothing: antialiased;


    --color-background: #202020;
    --color-background-light: #2d2f31;

    --color-text-dark: rgb(227, 227, 227);
    --color-text-lighter: #444;
    --color-text-light: #000;

    --color-green-light: rgba(46, 139, 87, 1);
    --color-green-dark: rgba(35, 105, 65, 1);

    --font-family-google-sans: "Google Sans", sans-serif;
    --font-family-mulish: 'Mulish', sans-serif;
    --font-family-space-grotesk: 'Space Grotesk', sans-serif;
}




/*
    Global
------------------------------------------------------------------------------------ */
html, body, div, h1 {
    font: inherit;
    font-family: var(--font-family-space-grotesk);
}

html, body {
    margin: 0;
    background: var(--color-background);
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

img {
    width: auto;
}

a {text-decoration: none;}


.md-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


.d-grid-small {grid-template-columns: repeat(2, 1fr);}
.d-grid-medium {grid-template-columns: repeat(3, 1fr);}
.d-grid-large {grid-template-columns: repeat(6, 1fr);}



/*
    Custom Global
------------------------------------------------------------------------------------ */
.md-containers-list {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    width: 100%;
}

.md-containers {
    margin: 0 8px;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}
.md-containers-large {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.md-container {width: 100%; max-width: 1200px;}
.md-container-large {width: 100%; max-width: 1760px;}
.md-container-fluid {width: 100%; max-width: 100%;}

.md-svg-full {
    width: 100%;
    padding: 0 24px;
}

.md-svg-separator {
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg id="1" viewBox="7.3446 4.83 183.7563 17.385" xmlns="http://www.w3.org/2000/svg"><path fill="%2328292a" d="M 9.273 21.842 C 10.112 21.842 10.765 21.33 10.977 20.508 C 12.581 14.3 16.372 10.74 21.378 10.74 C 26.806 10.74 32.177 14.838000000000001 34.745 20.938 C 35.072 21.713 35.781 22.215 36.551 22.215 C 37.157 22.215 37.717 21.897 38.085 21.342 L 38.553 20.632 L 38.604 20.639 L 38.583 20.588 L 38.864 20.161 C 41.467 16.19 43.715 12.761 48.472 11.072 C 49.935 10.552 51.463 10.289 53.014 10.289 C 58.766 10.289 64.629 13.993 67.603 19.505 C 67.905 20.065 68.577 20.442 69.274 20.442 C 69.8 20.442 70.254 20.232 70.553 19.85 C 71.258 18.949 71.937 18.011 72.619 17.07 C 74.547 14.409 76.541 11.657 79.185 9.729 C 81.121 8.316 83.198 7.6 85.357 7.6 C 91.538 7.6 97.732 13.581 100.655 19.49 C 100.945 20.079 101.503 20.417 102.184 20.417 C 102.669 20.417 103.163 20.239 103.539 19.928 C 104.952 18.758 106.102 17.551 107.215 16.384 C 110 13.463 112.405 10.94 117.744 10.337 C 118.281 10.276 118.81 10.245 119.319 10.245 C 125.616 10.245 128.872 14.833 132.173 19.866 L 132.152 19.916 L 132.201 19.91 C 132.331 20.109 132.462 20.309 132.593 20.509 L 132.666 20.62 C 133.031 21.178 133.589 21.498 134.197 21.498 C 134.971 21.498 135.682 20.996 136.009 20.219 C 138.526 14.208 142.559 10.76 147.074 10.76 C 151.169 10.76 155.212 13.691 158.166 18.801 C 158.732 19.78 160.255 19.981 161.067 19.179 C 161.622 18.629 162.155 18.081 162.678 17.544 C 166.013 14.116 168.892 11.155 174.422 11.065 L 174.666 11.063 C 180.674 11.063 185.454 14.74 187.454 20.9 C 187.711 21.69 188.387 22.181 189.218 22.181 C 189.847 22.181 190.451 21.888 190.794 21.416 C 191.111 20.98 191.185 20.433 191.004 19.875 C 188.541 12.283 182.706 7.751 175.396 7.751 C 170.059 7.751 164.652 10.208 160.538 14.497 C 159.876 14.219 158.018 12.156 157.102 11.14 C 156.263 10.208 155.813 9.714 155.549 9.532 C 152.392 7.361 149.898 6.514 146.346 6.41 L 146.05 6.406 C 141.323 6.406 137.251 9.633 133.938 16.004 C 128.949 9.335 123.734 5.955 118.428 5.955 C 116.026 5.955 113.607 6.67 111.238 8.081 C 109.074 9.37 107.421 10.712 105.531 12.713 C 104.431 13.879 103.317 15.016 102.834 15.017 C 102.519 15.017 102.077 14.284 101.517 13.355 C 101.14 12.73 100.671 11.953 100.05 11.058 C 97.559 7.476 92.909 5.109 87.914 4.881 C 87.201 4.848 86.513 4.83 85.847 4.83 C 81.439 4.83 77.73 5.604 73.958 9.383 C 73.791 9.55 73.447 9.969 72.855 10.696 C 71.959 11.794 69.963 14.242 69.255 14.803 C 67.793 12.307 65.421 10.709 62.912 9.164 C 59.899 7.306 56.837 6.365 53.811 6.365 C 46.411 6.365 40.52 11.93 36.756 16.856 C 33.187 10.91 27.163 7.107 21.221 7.107 C 14.584 7.107 9.42 11.755 7.409 19.542 C 7.263 20.108 7.367 20.659 7.703 21.094 C 8.063 21.555 8.664 21.842 9.273 21.842"/></svg>');
    height: 17px;
    background-repeat: repeat;
    width: 100%;
}


.md-color-disabled {
    color: var(--color-text-lighter) !important;
}

/*
    Header
------------------------------------------------------------------------------------ */
header {
    width: 100%;
    background: var(--color-background-light);
    padding: 16px 0;
}

header .md-logo {
    width: 120px;
    height: 48px;
    fill: #e3e3e3;
}




/*
    Footer
------------------------------------------------------------------------------------ */
footer {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 16px 40px;
}

footer .md-logo {
    width: 120px;
    height: 48px;
    fill: #e3e3e3;
}


footer ul {display: flex; list-style: none; column-gap: 24px; padding: 0;}
footer ul li {display: inline-block;}
footer ul li a {}
footer ul li a:hover {text-decoration: underline;}

footer .md-footer-content {margin: 24px;}
footer .md-footer-content .md-footer-content-menu {column-gap: 24px;}

/*
    Titles
------------------------------------------------------------------------------------ */
.md-h2 {
    font: inherit;
    font-weight: 475;
    font-size: 57px;
    color: rgb(227, 227, 227);
    line-height: 64px;
    font-variation-settings: "GRAD" 0, "opsz" 18;
    margin: 0 0 8px;
}

.md-h3 {
    font-size: 24px;
    line-height: 32px;
}


.md-text {
    font-family: var(--font-family-mulish);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-dark);
    margin-bottom: 32px;
}

.md-text-bold {
    font-weight: 500;
}



/*
    Buttons
------------------------------------------------------------------------------------ */
.md-button-cta {
    margin-top: 24px;
}

.md-button {
    font-size: 24px;
    font-weight: 475;
    line-height: 32px;
    font-variation-settings: "GRAD" 0, "opsz" 18;
    position: relative;
    width: 100%;
    height: 80px;
    padding: 0 48px;
    transition: all .2s cubic-bezier(.2, 0, 0, 1);
    border: 0;
    border-radius: 48px;
    background-color: var(--color-green-light);
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    overflow: hidden;
}

.md-button:hover {
    background-color: var(--color-green-dark);
}


/*
    Components: Section
------------------------------------------------------------------------------------ */
.md-component-section {margin: 96px 0;}
.md-component-section .md-component-section-header {margin: 24px;}
.md-component-section .md-component-section-content {margin: 24px;}


/*
    Components: Banner
------------------------------------------------------------------------------------ */
.md-component-banner {margin: 8px 0; background-size: cover; border-radius: 24px;}

.md-component-banner .content {min-height: 700px; color: #fff; z-index: 1;}
.md-component-banner .content h1 {font-size: 112px; line-height: 112px; text-align: center; max-width: 800px;}
.md-component-banner .content p {font-family: var(--font-family-mulish); font-size: 22px; line-height: 30px; max-width: 800px; margin: 0; text-align: center; padding-top: 12px;}

.md-component-banner-lnb {background-image: url('/img/clients/lnb000/presentation.png');}
.md-component-banner-sht {background-image: url('/img/projects/safe-handling-training.png');}
.md-component-banner-mycarena {background-image: url('/img/clients/sa009/background.png');}
.md-component-banner-tpc {background-image: url('/img/clients/tpc000/background.png');}
.md-component-banner-hpc {background-image: url('/img/clients/sa001/presentation.png');}
.md-component-banner-nxy {background-image: url('/img/clients/sa005/presentation.png');}
.md-component-banner-ekg {background-image: url('/img/clients/sa007/presentation.png');}
.md-component-banner-lmi {background-image: url('/img/clients/sa006/presentation.png');}
.md-component-banner-aty {background-image: url('/img/clients/sa008/presentation.png');}
.md-component-banner-odc {background-image: url('/img/clients/sa010/presentation.png');}

.md-component-banner-pvo {background-image: url('/img/clients/md001/presentation.png');}
.md-component-banner-cmn {background-image: url('/img/clients/md002/presentation.png');}

.md-component-banner-md {background-image: url('/img/presentation-2.jpg');}

/** Services **/
.md-component-banner-backend {background-image: url('/img/services/backend-1.png');}
.md-component-banner-frontend {background-image: url('/img/services/frontend-1.png');}
.md-component-banner-api {background-image: url('/img/services/api-1.png');}
.md-component-banner-script {background-image: url('/img/services/services-3.png');}
.md-component-banner-migration {background-image: url('/img/services/migration-5.png');}
.md-component-banner-custom {background-image: url('/img/services/migration-2.png');}


.md-component-banner-light .content h1 {color: var(--color-text-light);}
.md-component-banner-light .content p {color: var(--color-text-light);}


/*
.md-banner img {
    position: absolute;
    width: 100%;
}
*/


.md-cards {
    gap: 8px;
}

.md-cards + .md-cards {
    margin-top: 8px;
}

.md-card {
    background: #28292a;
    border-radius: 24px;
    width: 100%;
}

.md-card:hover {
    background: var(--color-green-dark);
    cursor: pointer;
    transition: border-radius .3s cubic-bezier(.2, 0, 0, 1), background-color .3s cubic-bezier(.2, 0, 0, 1);
}

.md-card-header {
    background-size: cover;
    border-radius: 24px;
    min-height: 200px;
    background-color: #000;
    transition: .4s;
}

.md-card:hover .md-card-header {
    background-position: center center;
    background-repeat: no-repeat;
}

.md-card-header-service-1 {background-image: url('/img/services/example.png');}

.md-card-header-project-lnb {background-image: url('/img/clients/lnb000/background.png');}
.md-card-header-project-mycarena {background-image: url('/img/clients/sa009/background.png');}
.md-card-header-project-tpc {background-image: url('/img/clients/tpc000/background.png');}
.md-card-header-project-sht {background-image: url('/img/clients/sa003/background.png');}
.md-card-header-project-hpc {background-image: url('/img/clients/sa001/presentation.png');}
.md-card-header-project-nxy {background-image: url('/img/clients/sa005/presentation.png');}
.md-card-header-project-ekg {background-image: url('/img/clients/sa007/presentation.png');}
.md-card-header-project-lmi {background-image: url('/img/clients/sa006/presentation.png');}
.md-card-header-project-aty {background-image: url('/img/clients/sa008/presentation.png');}
.md-card-header-project-odc {background-image: url('/img/clients/sa010/presentation.png');}

.md-card-header-project-pvo {background-image: url('/img/clients/md001/presentation.png');}
.md-card-header-project-cmn {background-image: url('/img/clients/md002/presentation.png');}

.md-card-body {
    padding: 24px;
}

.md-card-body  {
    color: #fff;
    white-space: nowrap;
    margin-bottom: 8px;
}

.md-card-body p {
    font-family: var(--font-family-mulish);
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}







/*
    Component: Slide
------------------------------------------------------------------------------------ */
.page-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    min-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.page-content-container {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    width: 100%;
}



.md-component-slides {}
.md-component-slides .md-component-slide .md-component-section {margin: 96px;}
.md-component-slides .md-component-slide .md-component-section .md-component-section-content .md-cards {margin-bottom: 32px;}
.md-component-slides .md-component-slide .slide-separator {text-align: center; padding: 80px 0;}

.md-component-slides, .scroll-show {width: 50%;}

.scroll-show {
    position: sticky;
    top: 0;
    height: 100vh;
}

.scroll-show-image-container.show {
    opacity: 1;
}

.scroll-show-container {
    width: 100%;
}

.scroll-show-image-container {
    position: absolute;
    width: 100%;
    height: 100vh;
    padding: 8px 0;
    transform: translateZ(0);
    transition: opacity .5s cubic-bezier(.2, 0, 0, 1);
    opacity: 0;
}

.scroll-show-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    background-position: center;
    background-size: cover;
}



.scroll-show-image-lnb-section-1 {background-image: url("/img/clients/lnb000/image-01.png");}
.scroll-show-image-lnb-section-2 {background-image: url("/img/clients/lnb000/image-02.png");}
.scroll-show-image-lnb-section-3 {background-image: url("/img/clients/lnb000/image-03.png");}

.scroll-show-image-sht-section-1 {background-image: url("/img/clients/sa003/image-01.png");}
.scroll-show-image-sht-section-2 {background-image: url("/img/clients/sa003/image-02.png");}
.scroll-show-image-sht-section-3 {background-image: url("/img/clients/sa003/image-03.png");}

.scroll-show-image-mycarena-section-1 {background-image: url("/img/clients/sa009/image-01.png");}
.scroll-show-image-mycarena-section-2 {background-image: url("/img/clients/sa009/image-02.png");}
.scroll-show-image-mycarena-section-3 {background-image: url("/img/clients/sa009/image-03.png");}



.scroll-show-image-backend-section-1 {background-image: url('/img/services/backend/image-01.png');}
.scroll-show-image-backend-section-2 {background-image: url('/img/services/backend/image-02.png');}
.scroll-show-image-backend-section-3 {background-image: url('/img/services/backend/image-03.png');}
.scroll-show-image-backend-section-4 {background-image: url('/img/services/backend/image-03.png');}
.scroll-show-image-backend-section-5 {background-image: url('/img/services/backend/image-06.png');}
.scroll-show-image-backend-section-6 {background-image: url('/img/services/backend/image-06.png');}


.scroll-show-image-frontend-section-1 {background-image: url('/img/services/frontend/image-01.png');}
.scroll-show-image-frontend-section-2 {background-image: url('/img/services/frontend/image-02.png');}
.scroll-show-image-frontend-section-3 {background-image: url('/img/services/frontend/image-03.png');}
.scroll-show-image-frontend-section-4 {background-image: url('/img/services/frontend/image-03.png');}
.scroll-show-image-frontend-section-5 {background-image: url('/img/services/frontend/image-06.png');}
.scroll-show-image-frontend-section-6 {background-image: url('/img/services/frontend/image-06.png');}


.md-page-legal {padding: 160px 0;}


.md-opacity-3 {background: rgba(0,0,0,0.3);}
.md-opacity-6 {background: rgba(0,0,0,0.6);}

@media (max-width: 480px) {
    .md-component-banner .content {height: unset; min-height: unset; padding: 32px;}
    .md-component-banner .content h1 {font-size: 56px; line-height: 56px; word-break: break-word;}
    .md-component-slides {width: 100%;}
    .md-component-slides .md-component-slide .md-component-section {margin: 0;}
    .scroll-show {display: none;}
    .scroll-show-image {padding-bottom: 50%;}
    .md-h2 {font-size: 32px; line-height: 38px;}
    .md-h3 {font-size: 20px; line-height: 26px;}
    .md-text {font-size: 14px; line-height: 20px;}
    .md-footer-content-menu {flex-direction: column;}
    .md-h1-animate { animation: unset;}

    .d-grid-small {grid-template-columns: 1fr;}
    .d-grid-large {grid-template-columns: 1fr;}

    .md-card-body {padding: 16px 24px; white-space: unset;}
    .md-card-body p {font-size: 14px; line-height: 20px;}
    .md-card-body .md-h3 {margin: 0;}
    .md-component-slides .md-component-slide .md-component-section .md-component-section-content .md-cards {margin-bottom: 0;}
}