@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

img { max-width: 100%; }
body { overflow-x: initial; }
/*main { overflow-x: hidden; }*/

.bg-gradiant { background: #5683a2; background: var(--sl-logo-gradient); transition: background 1s ease; background-size: 150% 100%; }
.bg-gradiant:hover { background-position: 75%; }

.sl-underline-gradient { display: inline-block; position: relative; }
.sl-underline-gradient::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; border-radius: 100%; background: var(--sl-logo-gradient); }

:root {
    --sl-card-border-color: #fff;
    --sl-card-background: #fff;

    --sl-logo-color-1: #345b7c;
    --sl-logo-color-2: #506f30;
    --sl-logo-color-3: #bf0027;

    --sl-logo-gradient: linear-gradient(135deg, #5683a2 10%, #89ae59 45%, #89ae59 55%, #bd1f27 90%);
}

h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", "Open Sans", sans-serif; }

strong { font-weight: 600; }

.sl-google-review-container { aspect-ratio: 1 / 1; width: 10rem; background: conic-gradient(
        #e63125 0deg 50deg,
        #3073f1 50deg 150deg,
        #249a41 150deg 240deg,
        #f6ad01 240deg 300deg,
        #e63125 300deg 360deg
); border-radius: 50%; padding: .5rem; }
.sl-google-review-container-two { border-radius: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: #fff; }
.sl-google-review-container .sl-google-review-average { font-size: 5rem; color: #f6ad01; line-height: 1; }
.sl-google-review-container .sl-google-review-note { font-size: 1.2rem; color: #3073f1; line-height: 1; font-weight: bold; text-decoration: underline; }



.sl-header-skill { background-color: #5683a2; border-radius: .5rem; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sl-header-skill-software { background-color: #89ae59; }
.sl-header-skill-application { background: #bd1f27; }
.sl-header-skill-title { font-family: "Montserrat", "Open Sans", sans-serif; font-size: 27px; font-weight: 700; text-transform: uppercase; color: #ffffff; padding: 1rem 2rem; position: relative; }
.sl-header-skill-title::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 20%; border-top: 4px solid #ffffff66; border-left: 4px solid #ffffff66; border-bottom: 4px solid #ffffff66; border-bottom-left-radius: .5rem; border-top-left-radius: .5rem; }
.sl-header-skill-title::after { content: ''; position: absolute; top: 0; bottom: 0; left: 20%; width: 60%; border-top: 4px solid #ffffff66; }
.sl-header-skill-description { padding: 1rem 2rem 2rem 4rem; font-size: 1.2rem; }

@media (max-width: 991px) {
    .sl-header-skill-title { font-size: 1.2rem; padding: .75rem 1.5rem; }
    .sl-header-skill-description { padding: .75rem 1.5rem 1.5rem 3rem; font-size: 1rem; }
}

.sl-page-top { padding-top: 146px; }
@media (max-width: 991px) {
    .sl-page-top { padding-top: 105px; }
}

#sl-main-menu { position: fixed; top: 0; width: 100%; z-index: 999; }
#sl-main-menu .navbar-brand img { height: 120px; object-fit: contain; }
#sl-main-menu .nav-link { font-weight: 700; font-size: 1.1rem; }
#sl-main-menu .nav-link:hover > span:nth-child(2) { opacity: 1; }
.sl-scrolled #sl-main-menu { background-color: #231f20; }
.sl-scrolled #sl-main-menu::after { content: ''; background: var(--sl-logo-gradient); position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; }
.sl-scrolled #sl-main-menu .navbar-brand img { height: 80px; }
.sl-scrolled #sl-main-menu .nav-link { color: var(--sl-light); }
.sl-scrolled #sl-main-menu .nav-link.active { color: var(--sl-primary); }
@media (max-width: 991px) {
    #sl-main-menu { background-color: #231f20; }
    #sl-main-menu::after { content: ''; background: var(--sl-logo-gradient); position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; }
    #sl-main-menu .navbar-brand img { height: 80px; }
    #sl-main-menu .navbar-toggler { color: var(--sl-light); border-color: var(--sl-light); }
    #sl-main-menu .nav-link { color: var(--sl-light); }
    #sl-main-menu .nav-link.active { color: var(--sl-primary); }
    #sl-main-menu .navbar-nav { text-align: center; }
    #sl-main-menu #sl-main-menu-content > .navbar-nav:nth-child(1) > li { padding-bottom: 1rem; border-bottom: 1px solid #fff; }
    #sl-main-menu #sl-main-menu-content > .navbar-nav:nth-child(2) { height: calc(100vh - 245px); justify-content: space-evenly; }
}

footer { margin-top: -20rem; }
footer .sl-footer-start { position: relative; z-index: 10; padding: 50px 75px 50px 75px; border-top-right-radius: 1rem; }
footer .sl-footer-start .sl-footer-logo { width: 80%; filter: grayscale(1); transition: filter 1s ease; }
footer .sl-footer-start:hover .sl-footer-logo { filter: grayscale(0); }
footer .sl-footer-end-top { padding: 25px 200px 25px 200px; }
footer .sl-footer-end { background-color: var(--sl-black); color: var(--sl-light); padding: 50px 75px 25px 75px; }
footer .sl-footer-end .sl-footer-copyright { padding-top: 50px; }
@media (max-width: 991px) {
    footer { margin-top: 0; }
    footer .sl-footer-end-top { padding: 1rem; }
    footer .sl-footer-start { padding: 3rem 2rem; border-radius: 0; }
    footer .sl-footer-end { padding: 3rem 2rem; }
    footer .sl-footer-end .sl-footer-copyright { padding-top: 2rem; }
}

.sl-border-start { position: relative; }
.sl-border-start::before { content: ''; position: absolute; top: -30px; left: 20px; height: calc(100% - 20px); width: 3px; background: var(--sl-logo-gradient); }
.sl-border-end { position: relative; }
.sl-border-end::after { content: ''; position: absolute; top: -10px; right: 20px; height: calc(100% + 20px); width: 3px; background: var(--sl-logo-gradient); }

.sl-show-scrolled { display: none; }
@media (min-width: 992px) {
    .sl-scrolled .sl-hide-scrolled { display: none !important; }
    .sl-scrolled .sl-show-scrolled { display: initial; }
}




.sl-prestations { display: flex; margin-left: -.5rem; margin-right: -.5rem; }
.sl-prestations .sl-prestation { width: 18%; position: relative; cursor: pointer; padding: 0 .5rem; transition: width 1s ease; }
.sl-prestations .sl-prestation img { object-fit: cover; width: 100%; height: 20vw; object-position: center; filter: grayscale(.9); }
.sl-prestations .sl-prestation .sl-prestation-content { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; text-align: center; padding: .5rem; border-radius: .5rem; filter: grayscale(1); }
.sl-prestations .sl-prestation:nth-child(1) .sl-prestation-content { background-color: #345b7c; }
.sl-prestations .sl-prestation:nth-child(2) .sl-prestation-content { background-color: #739c78; }
.sl-prestations .sl-prestation:nth-child(3) .sl-prestation-content { background-color: #506f30; }
.sl-prestations .sl-prestation:nth-child(4) .sl-prestation-content { background-color: #a75d3d; }
.sl-prestations .sl-prestation:nth-child(5) .sl-prestation-content { background-color: #bf0027; }
.sl-prestations .sl-prestation .sl-prestation-content h3 { margin: 0; line-height: 1; }

.sl-prestations .sl-prestation:hover img { filter: grayscale(0); }
.sl-prestations .sl-prestation:hover .sl-prestation-content { filter: grayscale(0); }

.sl-prestations .sl-prestation.active { width: 28%; }
.sl-prestations .sl-prestation.active img { filter: grayscale(0); }
.sl-prestations .sl-prestation.active .sl-prestation-content { filter: grayscale(0); }




.sl-portfolio-work { position: relative; }
.sl-portfolio-work img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.sl-portfolio-work .sl-portfolio-work-content { position: absolute; bottom: .75rem; left: .75rem; right: .75rem; }




.sl-img-ratio-16-9 { aspect-ratio: 16 / 9; width: 100%; }



.sl-services .sl-service { display: block; padding: 1rem; border-radius: .5rem; margin-bottom: 1rem; text-align: center; cursor: pointer; filter: grayscale(1); color: var(--sl-light); }
.sl-services .sl-service:nth-child(1) { background-color: #345b7c; }
.sl-services .sl-service:nth-child(2) { background-color: #739c78; }
.sl-services .sl-service:nth-child(3) { background-color: #506f30; }
.sl-services .sl-service:nth-child(4) { background-color: #a75d3d; }
.sl-services .sl-service:nth-child(5) { background-color: #bf0027; }

.sl-services .sl-service:hover { filter: grayscale(0); }
.sl-services .sl-service.active { filter: grayscale(0); }

.sl-services-horizontal { position: sticky; top: 106px; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; }
.sl-services-horizontal .sl-service { width: 100%; margin-right: 1rem; margin-bottom: 0; filter: grayscale(1); }
.sl-services-horizontal .sl-service:last-child { margin-right: 0; }




.sl-border-bottom-gradient { position: relative; }
.sl-border-bottom-gradient::after { content: ''; position: absolute; bottom: -2rem; left: 4rem; width: 100%; height: 3px; background: var(--sl-logo-gradient); }

.sl-text-gradient { background: var(--sl-logo-gradient); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sl-text-underline-gradient { position: relative; }
.sl-text-underline-gradient:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--sl-logo-gradient); }

.lead { position: relative; padding-left: 1.5rem; }
.lead:after { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--sl-logo-gradient); }





.sl-bg-left { position: absolute; top: 0; left: 0; width: 45vw; height: 100%; background: var(--sl-dark); z-index: 0; border-bottom-right-radius: 1rem; }
.sl-scrolled .sl-bg-left { background: transparent; }