/* Presentation parity with the original Metronic site, without its legacy JS. */
[hidden] { display: none !important; }
body { font-family: 'Open Sans', Arial, sans-serif; }
.vp-header { margin-bottom: 0; }
.vp-header .front-topbar { min-height: 29px; }
.vp-header .login-menu { margin: 0; min-height: 28px; display: flex; align-items: center; gap: 6px; }
.vp-header .login-menu > li { padding: 0; }
.vp-header .login-menu a, .vp-header .login-menu summary { color: #777; font-size: 12px; }
.vp-navigation-row { display: flex; align-items: center; justify-content: space-between; min-height: 75px; }
.vp-navigation-row::before, .vp-navigation-row::after, .vp-title-band > .container::before, .vp-title-band > .container::after { display: none; }
.vp-header .navbar-brand { height: auto; padding: 15px 0; margin: 0; }
.vp-header > .container .navbar-brand { margin-left: 0; }
.vp-header .navbar-brand img { width: 225px; max-width: 100%; height: auto; }
.vp-navigation { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.vp-navigation > li > a, .vp-navigation > li > details > summary { display: block; padding: 27px 16px; color: #555; font-size: 15px; text-decoration: none; }
.vp-navigation > li > a:hover, .vp-dropdown > summary:hover { color: #3aa449; }
.vp-dropdown { position: relative; }
.vp-dropdown > summary { cursor: pointer; list-style: none; }
.vp-dropdown > summary::-webkit-details-marker { display: none; }
.vp-dropdown > summary .fa-angle-down { margin-left: 4px; }
.vp-dropdown-panel { position: absolute; right: 0; top: 100%; z-index: 50; min-width: 185px; background: #fff; border-top: 2px solid #3aa449; box-shadow: 0 3px 8px #0003; padding: 5px 0; }
.vp-dropdown-panel > a, .vp-dropdown-panel .link-button { display: block; width: 100%; padding: 10px 16px; color: #555; text-align: left; white-space: nowrap; }
.vp-dropdown-panel > a:hover, .vp-dropdown-panel .link-button:hover { background: #f5f5f5; text-decoration: none; }
.vp-user-menu > summary { display: flex; align-items: center; gap: 4px; }
.vp-user-menu img { object-fit: contain; }
.vp-search > summary .fa-search { padding-left: 18px; border-left: 1px solid #eee; color: #aaa; }
.vp-search[open] > form { display: flex; gap: 8px; width: 310px; padding: 14px; }
.vp-search input { width: 185px; min-width: 0; border: 1px solid #ddd; padding: 7px 10px; }
.vp-menu-toggle { display: none; border: 0; background: #eee; padding: 10px 13px; color: #666; font-size: 20px; }
:is(button, a, summary, input, textarea, [tabindex]):focus-visible { outline: 2px solid #267b32; outline-offset: 3px; }

.vp-hero { position: relative; background: #f3f5f5; margin-bottom: 10px; }
.vp-hero-slide { background: url('../Content/Metronic/Images/Sliders/Revolution/bg.jpg') center / cover; overflow: hidden; }
.vp-hero-second { background-image: url('../Content/Metronic/Images/Sliders/Revolution/bg9.jpg'); }
.vp-hero-inner { height: 425px; position: relative; }
.vp-hero-copy { position: relative; z-index: 2; padding-top: 104px; width: 63%; color: #596568; }
.vp-hero-copy h1, .vp-hero-copy h2 { font-size: 46px; font-weight: 300; text-transform: uppercase; line-height: 1.15; margin: 4px 0 16px; }
.vp-hero-copy p { line-height: 1.8; margin-bottom: 20px; }
.vp-hero-copy .vp-hero-subtitle { display: inline-block; background: #3aa449; color: white; font-size: 18px; text-transform: uppercase; margin: 0 0 5px; padding: 1px 5px; }
.vp-hero-copy .btn { text-transform: uppercase; }
.vp-hero-person { position: absolute; left: 55%; bottom: 0; height: 390px; width: auto; }
.vp-hero-second .vp-hero-person { height: 445px; }
.vp-hero-second .vp-hero-copy { padding-top: 70px; }
.vp-hero-devices { position: absolute; left: 54%; right: 0; top: 95px; height: 300px; }
.vp-hero-devices img { position: absolute; width: auto; }
.vp-device-mac { height: 250px; left: 30px; top: 0; }
.vp-device-ipad { height: 140px; left: 0; top: 140px; }
.vp-device-phone { height: 100px; left: 150px; top: 185px; }
.vp-device-laptop { height: 165px; left: 245px; top: 125px; }
.vp-hero-prev, .vp-hero-next { position: absolute; top: 44%; z-index: 3; border: 0; background: #75858c44; color: white; font-size: 45px; font-weight: 300; line-height: 44px; width: 40px; height: 50px; }
.vp-hero-prev { left: 20px; } .vp-hero-next { right: 20px; }
.vp-hero-controls { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; z-index: 4; }
.vp-hero-controls [data-vp-dot] { height: 12px; width: 12px; padding: 0; margin: 0 3px; border: 0; border-radius: 50% !important; background: #bbb; }
.vp-hero-controls [aria-pressed='true'] { background: #7b8488; }
.vp-carousel-pause { position: absolute; right: 20px; bottom: 0; padding: 3px 7px; font-size: 11px; border: 1px solid #ccc; background: #ffffffe8; color: #555; }
.vp-rail-controls { display: flex; gap: 5px; margin: 12px 0; }
.vp-rail-controls button { border: 0; background: #e6e6e6; color: #777; font-size: 24px; line-height: 28px; width: 29px; height: 29px; padding: 0; }
.vp-rail-controls button:hover { background: #3aa449; color: white; }
.vp-projects-rail > div:first-child, .vp-partners > div:first-child { position: relative; }
.vp-projects-rail > div:first-child > h2, .vp-partners > div:first-child > h2 { padding-right: 58px; }
.vp-projects-rail > div:first-child > .vp-rail-controls, .vp-partners > div:first-child > .vp-rail-controls { position: absolute; right: 15px; top: 0; margin: 0; }
.vp-projects-rail .vp-rail-controls button, .vp-partners .vp-rail-controls button, .vp-references .vp-rail-controls button { background: transparent; width: 23px; }
.vp-rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vp-rail::-webkit-scrollbar { display: none; }
.vp-rail > * { flex: 0 0 auto; scroll-snap-align: start; }
.vp-project-card { width: calc((100% - 30px) / 4); min-width: 0; }
.vp-project-card { background: #fcfcfc; }
.vp-project-card img { display: block; height: auto; width: 100%; }
.vp-project-card h3 { font-size: 16px; font-weight: 300; margin: 10px 10px; line-height: 1.3; text-align: justify; }
.vp-project-card h3 a { color: #3e4d5c; }
.vp-project-card p { font-size: 13px; font-weight: 300; margin: 0 10px 10px; text-align: justify; }
.vp-project-rail { align-items: flex-start; }
.vp-partner-rail { align-items: center; gap: 2px; }
.vp-partner-rail > img { width: calc((100% - 8px) / 5); max-width: none; object-fit: contain; height: 101px; }
.vp-references { position: relative; padding-bottom: 15px; }
.vp-references .carousel-inner { min-height: 155px; }
.vp-references [data-vp-slide] > .testimonials-slide { display: block; padding: 15px; color: #8a8a8a; font-size: 14px; line-height: 20px; font-style: italic; background: #f8f8f8 url('../Content/Metronic/Images/corners.png') no-repeat right bottom; }
.vp-references .carousel-info { overflow: hidden; }
.vp-references .vp-rail-controls { position: absolute; right: 0; bottom: 10px; }
.home-references { margin: 15px -15px 40px; }
.no-space-steps > div { padding: 0; }

.vp-title-band { background: #fcfcfc; border-bottom: 1px solid #eee; margin-bottom: 20px; }
.vp-title-band > .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 55px; }
.vp-title-band h1 { font-size: 23px; font-weight: 300; margin: 10px 0; }
.vp-title-band .breadcrumb { background: none; padding: 0; margin: 0; font-size: 12px; }
.vp-tabs { margin-bottom: 40px; }
.vp-tablist { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid #ddd; margin: 0 0 20px; }
.vp-tablist button { border: 1px solid transparent; border-top: 3px solid transparent; background: transparent; padding: 10px 15px; color: #555; margin-bottom: -1px; font-size: 14px; }
.vp-tablist button[aria-selected='true'] { border-color: #ddd; border-bottom-color: white; border-top-color: #3aa449; background: white; }
.vp-profile-tabs > .vp-tablist button[aria-selected='true'] { border-top-color: #e84d3c; }
.vp-project-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 30px; }
.vp-project-body h2 { font-size: 24px; margin: 22px 0 16px; }
.vp-project-gallery { position: relative; background: #f8f8f8; }
.vp-project-gallery img { width: 100%; height: 430px; object-fit: contain; display: block; }
.vp-project-gallery .vp-rail-controls { position: absolute; right: 10px; bottom: 0; }
.vp-panel { background: #fafafa; border: 1px solid #e7e7e7; margin-bottom: 20px; }
.vp-panel > h2, .vp-panel > h3 { font-size: 18px; background: #f1f1f1; margin: 0; padding: 10px 15px; }
.vp-panel-body { padding: 15px; }
.vp-panel-body > :last-child { margin-bottom: 0; }
.vp-stars { color: #3aa449; font-size: 21px; margin-bottom: 10px; }
.vp-project-facts { display: flex; gap: 12px; justify-content: space-between; margin: 12px 0 0; }
.vp-project-facts div { min-width: 0; } .vp-project-facts dt { font-size: 16px; font-weight: 600; } .vp-project-facts dd { font-size: 12px; }
.vp-progress { height: 9px; background: #e5e5e5; margin-top: 15px; } .vp-progress > span { background: #3aa449; display: block; height: 100%; }
.vp-ended { text-align: center; padding: 24px 15px; } .vp-ended strong { display: block; font-size: 20px; font-weight: 300; margin-bottom: 8px; }
.vp-author { display: flex; gap: 14px; align-items: flex-start; } .vp-author > img { width: 65px; height: 65px; object-fit: contain; }
.vp-author .vp-profile-description { font-size: 12px; } .vp-profile-links { display: flex; flex-wrap: wrap; gap: 10px; }
.vp-profile-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.vp-profile-overview { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) minmax(200px, 1fr); gap: 30px; padding: 0 15px 20px; }
.vp-profile-avatar { width: 100%; max-width: 255px; height: 250px; object-fit: contain; }
.vp-profile-actions { margin-top: 10px; } .vp-profile-actions a { display: block; padding: 8px 0; }
.vp-profile-name { font-weight: 300; font-size: 24px; margin: 0 0 20px; }
.vp-profile-summary { margin: 0; padding: 0; list-style: none; }
.vp-profile-summary li { border-bottom: 1px solid #eee; padding: 10px 0; }
.vp-profile-summary li:last-child { border: 0; }
.vp-profile-summary span { display: block; font-size: 11px; color: #888; }
.vp-profile-summary strong { display: block; text-align: right; font-size: 26px; font-weight: 300; line-height: 1.3; }
.vp-inner-tabs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 25px; }
.vp-inner-tabs > .vp-tablist { display: block; border: 0; }
.vp-inner-tabs > .vp-tablist button { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid transparent; margin: 0; }
.vp-inner-tabs > .vp-tablist button[aria-selected='true'] { border-left-color: #3aa449; background: #f1f1f1; }
.vp-readonly-fields { max-width: 720px; } .vp-readonly-fields .form-control { margin-bottom: 14px; }
.vp-readonly-fields label { font-weight: 400; }
.vp-readonly-note { margin: 20px 0; }
.vp-profile-tabs table { font-size: 13px; }
.vp-supporter { display: flex; gap: 15px; padding: 12px 0; border-bottom: 1px solid #eee; }
.vp-supporter img { width: 48px; height: 48px; }
.vp-supporter h3 { margin: 0 0 8px; font-size: 16px; }
.vp-login-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.vp-list-project { box-shadow: none; border: 1px solid #eee; }
.vp-list-project .vp-project-facts dt { font-size: 14px; }
.project-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1199px) {
    .vp-hero-copy h1, .vp-hero-copy h2 { font-size: 38px; }
    .vp-hero-prev { left: 5px; } .vp-hero-next { right: 5px; }
    .vp-project-card { width: calc((100% - 20px) / 3); }
    .vp-profile-overview { grid-template-columns: 190px minmax(0, 1fr) 220px; gap: 20px; }
}
@media (max-width: 991px) {
    .project-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vp-navigation > li > a, .vp-navigation > li > details > summary { padding: 27px 10px; font-size: 14px; }
    .vp-header .navbar-brand img { width: 195px; }
    .vp-hero-copy h1, .vp-hero-copy h2 { font-size: 32px; }
    .vp-hero-copy .vp-hero-subtitle { font-size: 14px; }
    .vp-hero-person { left: 60%; height: 310px; }
    .vp-hero-second .vp-hero-person { height: 370px; }
    .vp-hero-devices { transform: scale(.72); transform-origin: left center; }
    .vp-project-layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; }
    .vp-project-gallery img { height: 320px; }
    .vp-projects-rail > div:first-child, .vp-partners > div:first-child { margin-bottom: 15px; }
    .vp-profile-overview { grid-template-columns: 160px minmax(0, 1fr); }
    .vp-profile-overview > .vp-panel { grid-column: 2; }
}
@media (max-width: 767px) {
    .project-list { grid-template-columns: minmax(0, 1fr); }
    .vp-navigation-row { flex-wrap: wrap; min-height: 74px; }
    .vp-header .navbar-brand img { width: 220px; }
    .vp-js .vp-menu-toggle { display: block; }
    .vp-header #vp-main-nav { width: 100%; }
    .vp-js #vp-main-nav:not(.is-open) { display: none; }
    .vp-navigation { display: block; padding-bottom: 15px; }
    .vp-navigation > li > a, .vp-navigation > li > details > summary { padding: 12px 8px; border-top: 1px solid #eee; }
    .vp-navigation .vp-dropdown-panel { position: static; box-shadow: none; border: 0; background: #f8f8f8; }
    .vp-search > summary .fa-search { border: 0; padding: 0; }
    .vp-search[open] > form { width: 100%; }
    .vp-search input { flex: 1; }
    .vp-hero-inner { height: 490px; }
    .vp-hero-copy { width: 100%; padding: 35px 15px 0; }
    .vp-hero-copy h1, .vp-hero-copy h2 { font-size: 30px; }
    .vp-hero-copy .vp-hero-subtitle { font-size: 13px; }
    .vp-hero-copy p { font-size: 12px; margin-bottom: 15px; }
    .vp-hero-person { left: auto; right: 15px; height: 220px; }
    .vp-hero-second .vp-hero-copy { padding-top: 35px; }
    .vp-hero-second .vp-hero-person { height: 240px; }
    .vp-hero-devices { left: 15px; top: 210px; transform: scale(.66); }
    .vp-hero-prev, .vp-hero-next { top: 64%; font-size: 35px; width: 30px; }
    .vp-carousel-pause { right: 6px; font-size: 9px; }
    .vp-project-card { width: calc((100% - 10px) / 2); }
    .vp-project-card img { height: 130px; }
    .vp-partner-rail > img { width: calc((100% - 2px) / 2); }
    .vp-title-band > .container { align-items: flex-start; flex-direction: column; gap: 0; padding-bottom: 10px; }
    .vp-tablist button { padding: 9px 11px; font-size: 13px; }
    .vp-project-layout, .vp-profile-overview, .vp-inner-tabs { grid-template-columns: minmax(0, 1fr); }
    .vp-profile-overview > .vp-panel { grid-column: auto; }
    .vp-profile-avatar { height: 180px; width: 180px; }
    .vp-project-gallery img { height: 310px; }
    .vp-inner-tabs { gap: 10px; }
    .vp-inner-tabs > .vp-tablist { display: flex; }
    .vp-inner-tabs > .vp-tablist button { width: auto; }
}
.vp-editor-fields { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 5fr); gap: 20px; align-items: start; }
.vp-editor-fields > label { text-align: right; padding-top: 7px; }
.vp-editor-preview { min-height: 160px; border: 1px solid #ddd; padding: 12px; overflow-wrap: anywhere; }
.vp-editor-actions { margin-top: 20px; text-align: right; }
.vp-editor-reward { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; border: 1px solid #ddd; padding: 15px; }
.vp-project-editor .panel-heading { padding: 14px 18px; }
.vp-project-editor .panel-body { padding: 24px; }
.vp-partner-rail > a { flex: 0 0 calc((100% - 8px) / 5); display: flex; align-items: flex-start; }
.vp-partner-rail > a > img { max-width: 100%; height: auto; }
.vp-partner-rail { align-items: flex-start; }
@media (max-width: 767px) { .vp-partner-rail > a { flex-basis: calc((100% - 2px) / 2); } }
.vp-blog-gallery { position: relative; }
.vp-project-video { display: block; width: 100%; height: auto; min-height: 200px; aspect-ratio: 16 / 9; border: 0; }
.vp-blog-gallery img { display: block; max-width: 100%; max-height: 480px; width: auto; height: auto; margin: 0 auto; }
.vp-blog-gallery .vp-rail-controls { justify-content: flex-end; margin-top: 8px; }
.blog-tags li > span { display: inline-block; padding: 5px 7px; margin: 0 3px 5px 0; background: #f5f5f5; color: #555; }
@media (max-width: 767px) { .vp-editor-fields, .vp-editor-reward { grid-template-columns: 1fr; gap: 8px; } .vp-editor-fields > label { text-align: left; } }