@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');

.jdm-code { font-style: italic; font-weight: bold; }
.jdm-code::before { content: '< '; font-weight: normal; }
.jdm-code::after { content: ' />'; font-weight: normal; }
@media (max-width: 700px) {
    .jdm-code { text-align: center; line-height: 1; width: 80%; margin: 0 10%; }
}

body { background-color: var(--sl-dark); color: var(--sl-light); }
img { max-width: 100%; }

.bg-gradiant { background: #200003; background: linear-gradient(125deg, #3fb984 -75%, #000000 25%, #000000 75%, #3d53be 175%); }
.text-gradiant { display: inline-block; background: var(--sl-primary); background: linear-gradient(120deg, #3d53be 20%, #30a26f 80%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="var(--color-primary)", endColorstr="var(--color-secondary)",GradientType=1 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.bg-primary-right { position: relative; }
.bg-primary-right::before { content: ''; position: absolute; top: 0; left: 8%; width: calc(100% - 8%); height: 100%; background-color: var(--sl-black); z-index: -1; border-radius: 1rem 0 0 1rem; }
.bg-black-right > .container { position: relative; z-index: 0; background-color: var(--sl-black); }
.bg-black-right > .container::before { content: ''; position: absolute; top: 0; right: 100%; width: 5rem; height: 100%; background-color: var(--sl-black); z-index: -1; border-radius: 1rem 0 0 1rem; }
.bg-black-right > .container::after { content: ''; position: absolute; top: 0; left: 100%; width: 50vw; height: 100%; background-color: var(--sl-black); z-index: -1; }
@media (max-width: 700px) {
    .bg-primary-right::before { width: 100%; left: 0; border-radius: 0; }
}

h1, .h1 { font-family: "Montserrat", "Open Sans", sans-serif; font-size: 80px; font-weight: 900; text-transform: uppercase; display: inline-block; background: var(--sl-primary); background: linear-gradient(110deg, #3d82be 20%, #42d392 80%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="var(--color-primary)", endColorstr="var(--color-secondary)",GradientType=1 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
h2 .jdm-underline::before { bottom: 0; }
h1 div:nth-child(1) { font-size: 70px; }
h1 div:nth-child(2) { font-size: 60px; }
h1 div:nth-child(3) { font-size: 120px; }
.h1 span:nth-child(1) { font-size: 50px; display: block; }
.h1 span:nth-child(2) { font-size: 40px; display: block; }
.h1 span:nth-child(3) { font-size: 80px; display: block; }
@media (max-width: 700px) {
    h1, .h1 { font-size: 2rem; }
    h1 div:nth-child(1) { font-size: 2rem; }
    h1 div:nth-child(2) { font-size: 1.7rem; }
    h1 div:nth-child(3) { font-size: 2.3rem; }
    .h1 span:nth-child(1) { font-size: 1.5rem; }
    .h1 span:nth-child(2) { font-size: 1.4rem; }
    .h1 span:nth-child(3) { font-size: 1.7rem; }
}

h2 { font-weight: bold; }
h2 div:nth-child(1) { font-size: 30px; }
h2 div:nth-child(2) { font-size: 40px; }
@media (max-width: 700px) {
    h2 div:nth-child(1) { font-size: 20px; }
    h2 div:nth-child(2) { font-size: 25px; }
}

.jdm-underline { position: relative; }
.jdm-underline::before { content: ''; position: absolute; bottom: 1rem; left: -1rem; right: -1rem; height: 2rem; border-radius: 1rem; background: #409ba566; background: linear-gradient(100deg, #3d53be66 0%, #30a26f66 100%); z-index: -1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (max-width: 700px) {
    .jdm-underline::before { bottom: .25rem; left: -.5rem; right: -.5rem; height: 1rem; border-radius: .5rem; }
}

:root {
    --sl-card-border-color: #fff;
    --sl-card-background: #fff;
}
.jdm-color-vuejs { --sl-card-border-color: #3fb984; --sl-card-background: linear-gradient(110deg, #2c3c35 20%, #395247 80%); }
.jdm-color-codeigniter { --sl-card-border-color: #ee4323; --sl-card-background: linear-gradient(110deg, #4d3631 20%, #65453e 80%); }
.jdm-color-ionic { --sl-card-border-color: #478aff; --sl-card-background: linear-gradient(110deg, #2c3749 20%, #344560 80%); }
.jdm-color-prestashop { --sl-card-border-color: #e0006e; --sl-card-background: linear-gradient(110deg, #69515d 20%, #795165 80%); }

.jdm-header-skill { background-color: #3d53be66; border-radius: .5rem; height: 100%; cursor: pointer; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.jdm-header-skill-software { background-color: #409ba566; }
.jdm-header-skill-application { background: #42d39266; }
.jdm-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; }
.jdm-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; }
.jdm-header-skill-title::after { content: ''; position: absolute; top: 0; bottom: 0; left: 20%; width: 60%; border-top: 4px solid #ffffff66; }
.jdm-header-skill-description { padding: 1rem 2rem 2rem 4rem; font-size: 1.2rem; }
.jdm-header-skill:hover { background: linear-gradient(130deg, #7f9173 30%, #5b6d4a 80%); }
.jdm-header-skill:hover .jdm-header-skill-title::before { border-color: #fff; }
.jdm-header-skill:hover .jdm-header-skill-title::after { border-color: #fff; }
.jdm-header-skill:hover .jdm-header-skill-title { color: #fff; }

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

#home-top { padding: 225px 0 75px 0; }
#home-top-skills { padding-top: 75px; }
@media (max-width: 700px) {
    #home-top { padding: 85px 0 0 0; }
    #home-top-skills { padding-top: 0; }
}

.jdm-skill { background: var(--sl-card-background); border: 2px solid transparent; border-radius: 99rem; padding: 3rem; margin-bottom: 3rem; position: relative; overflow: hidden; }
.jdm-skill:hover { border-color: var(--sl-card-border-color); }
.jdm-skill .row { position: relative; }
.jdm-skill .jdm-skill-img-blur { position: absolute; height: 100%; width: 100%; object-fit: contain; z-index: 0; top: 0; left: 0; filter: blur(30px); opacity: .2; object-position: right; }
.jdm-skill .jdm-skill-image { text-align: center; }
.jdm-skill .jdm-skill-image img { width: 10rem; }
.jdm-skill .jdm-skill-content { border-left: 2px solid var(--sl-card-border-color); }
.jdm-skill .badge .fw-light { font-size: 1rem; margin-top: .25rem; }

@media (max-width: 700px) {
    .jdm-skill { border-radius: 2rem; padding: 1.5rem; }
    .jdm-skill .jdm-skill-image img { width: 5rem; }
    .jdm-skill .jdm-skill-content { border-left: 0; margin-top: 1rem; }
    .jdm-skill .jdm-skill-content .jdm-skill-title { text-align: center; }
    .jdm-skill .jdm-skill-content .jdm-skill-button a { width: 100%; }
}

.jdm-skill-card { background: var(--sl-primary); padding: 1rem; border-radius: 1rem; font-size: 1.4rem; font-weight: bold; text-align: center; }
.jdm-skill-card i { margin-right: .5rem; }
.jdm-skill-card.jdm-skill-card-lg { padding: 1rem; font-size: 1.4rem; font-weight: bold; border-radius: 1rem; background-color: #3d53be66; }
.jdm-skill-card.jdm-skill-card-md { padding: .75rem; font-size: 1.2rem; font-weight: 600; border-radius: .75rem; background-color: #409ba566; }
.jdm-skill-card.jdm-skill-card-sm { padding: .5rem; font-size: .9rem; font-weight: normal; border-radius: .5rem; background: #42d39266; }

@media (max-width: 700px) {
    .jdm-skill-card i { margin-right: .25rem; }
    .jdm-skill-card.jdm-skill-card-lg { padding: .75rem 0; font-size: 1.1rem; font-weight: bold; border-radius: 1rem; }
    .jdm-skill-card.jdm-skill-card-md { padding: .5rem 0; font-size: 1rem; font-weight: 600; border-radius: .75rem; opacity: .9; }
    .jdm-skill-card.jdm-skill-card-sm { padding: .25rem 0; font-size: .8rem; font-weight: normal; border-radius: .5rem; opacity: .7; }
}

#customers img { cursor: pointer; filter: grayscale(1); opacity: .8; transition: 0.3s; background: #fff; }
#customers img:hover { transform: scale(1.1); opacity: 1; filter: grayscale(0); }

#sl-main-menu { position: fixed; top: 0; width: 100%; z-index: 999; }
#sl-main-menu .navbar-brand img { height: 80px; }
#sl-main-menu .nav-link { color: #fff; font-weight: 700; font-size: 1.2rem; }
#sl-main-menu .nav-link > span { display: block; }
#sl-main-menu .nav-link > span:nth-child(2) { opacity: 0; font-size: .7rem; display: none; }
#sl-main-menu .nav-link:hover > span:nth-child(2) { opacity: 1; }
.jdm-scrolled #sl-main-menu { background-color: #231f20; }
.jdm-scrolled #sl-main-menu::after { content: ''; background: linear-gradient(145deg, #3d53be 0%, #30a26f 100%); position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; }
.jdm-scrolled #sl-main-menu .nav-link { color: var(--sl-light); }
.jdm-scrolled #sl-main-menu .nav-link.active { color: var(--sl-light); }
@media (max-width: 700px) {
    #sl-main-menu { background-color: #231f20; }
    #sl-main-menu::after { content: ''; background: linear-gradient(145deg, #3d53be 0%, #30a26f 100%); position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; }
    #sl-main-menu .navbar-brand img { height: 60px; }
    #sl-main-menu .navbar-nav { text-align: center; }
    #sl-main-menu .nav-link { color: var(--sl-light); }
    #sl-main-menu .nav-link.active { color: var(--sl-light); }
}

footer .jdm-footer-start { position: relative; z-index: 10; background: linear-gradient(145deg, #3d53be 0%, #30a26f 100%); padding: 75px 150px 75px 150px; border-top-right-radius: 1rem; }
footer .jdm-footer-end { background-color: var(--sl-black); color: var(--sl-light); padding: 100px 70px 40px 70px; }
footer .jdm-footer-end .jdm-footer-copyright { padding-top: 60px; }

@media (max-width: 700px) {
    footer .jdm-footer-start { padding: 3rem 2rem; border-radius: 0; }
    footer .jdm-footer-end { padding: 3rem 2rem; }
    footer .jdm-footer-end .jdm-footer-copyright { padding-top: 3rem; }
}

#contact { padding: 225px 0 75px 0; }
#contact.jdm-map-container { position: relative; background: var(--sl-black); }
#contact.jdm-map-container #map { position: absolute; top: 0; left: 0; right: 0; bottom: -10rem; z-index: 1; }
#contact.jdm-map-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: -10rem; z-index: 2; pointer-events: none; background: -moz-linear-gradient(left, rgba(57, 169, 232, 0.4), rgba(43, 162, 68, 0.4)); }
#contact.jdm-map-container .container { position: relative; z-index: 3; }

@media (max-width: 700px) {
    #contact { padding: 75px 0 50px 0; }
    #contact.jdm-map-container #map { position: initial; height: 50vh; border-radius: 1rem; width: calc(100% - 2rem); margin: 0 1rem; }
    #contact.jdm-map-container::before { display: none; }
}

.bg-vuejs { background: -webkit-linear-gradient(315deg,#42d392 25%,#647eff); color: #fff; }
.bg-ionic { background: #478aff; color: #fff; }
.bg-codeigniter { background: #DD4814; color: #fff; }
.bg-php { background: #848bb6; color: #fff; }
.bg-sluck-io { background: #4ea860; color: #fff; }


.jdm-service .jdm-service-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.jdm-service .jdm-service-content h2 strong { display: block; }

@media (max-width: 700px) {
    .jdm-service .jdm-service-image { margin-bottom: 1rem; }
    .jdm-service .jdm-service-image img { aspect-ratio: 3 / 1 }
}


.jdm-portfolio-container { background: #12a19b; background: -webkit-linear-gradient(315deg, #12a19b, #672784 25%, #672784 60%, #f29303); padding: 3rem 4rem; display: flex; align-items: center; border-radius: .5rem; }
.jdm-portfolio-container .jdm-portfolio-computer { box-shadow: 10px 10px 30px #0006; border-radius: .5rem; overflow: hidden; }
.jdm-portfolio-container .jdm-portfolio-computer .jdm-portfolio-computer-header { background-color: #ddd; color: #333; padding: .25rem; display: flex; font-size: .6rem; }
.jdm-portfolio-container .jdm-portfolio-computer .jdm-portfolio-computer-header .jdm-portfolio-computer-header-bullet { width: 20%; }
.jdm-portfolio-container .jdm-portfolio-computer .jdm-portfolio-computer-header .jdm-portfolio-computer-header-bullet::before,
.jdm-portfolio-container .jdm-portfolio-computer .jdm-portfolio-computer-header .jdm-portfolio-computer-header-bullet::after { content: ''; width: .75rem; height: .75rem; background-color: #bbb; border-radius: 50%; display: inline-block; margin-left: .25rem; }
.jdm-portfolio-container .jdm-portfolio-computer .jdm-portfolio-computer-header .jdm-portfolio-computer-header-navbar { background-color: #fff; width: 78%; padding: 0 .5rem; border-radius: .2rem; }
.jdm-portfolio-container .jdm-portfolio-computer .jdm-portfolio-computer-content { aspect-ratio: 16 / 9; }
.jdm-portfolio-container .jdm-portfolio-computer .jdm-portfolio-computer-content a { display: initial; }
.jdm-portfolio-container .jdm-portfolio-computer .jdm-portfolio-computer-content img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; transition: object-position 1s ease-out; }
.jdm-portfolio-container .jdm-portfolio-computer .jdm-portfolio-computer-content img:hover { object-fit: cover; object-position: 0 100%; transition: object-position 10s ease-out; }

.jdm-portfolio-container.jdm-portfolio-sm { padding: 1rem; border-radius: .25rem; }
.jdm-portfolio-container.jdm-portfolio-sm .jdm-portfolio-computer { box-shadow: 8px 8px 20px #0006; border-radius: .25rem; }
.jdm-portfolio-container.jdm-portfolio-sm .jdm-portfolio-computer .jdm-portfolio-computer-header { padding: .15rem; display: flex; font-size: .5rem; }
.jdm-portfolio-container.jdm-portfolio-sm .jdm-portfolio-computer .jdm-portfolio-computer-header .jdm-portfolio-computer-header-bullet::before,
.jdm-portfolio-container.jdm-portfolio-sm .jdm-portfolio-computer .jdm-portfolio-computer-header .jdm-portfolio-computer-header-bullet::after { content: ''; width: .5rem; height: .5rem; background-color: #bbb; border-radius: 50%; display: inline-block; margin-left: .25rem; }

@media (max-width: 700px) {
    .jdm-portfolio-container { padding: 1.5rem 2rem; }
}



img.jdm-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; object-fit: cover; object-position: center; }