:root { --primary-color: #0A4D8C; --orange-color: #FF7A00; --steel-gray-color: #1E1E1E; --iron-gray-color: #2F2F2F; --light-color: #F3F4F6; --light-blue-color: #4DA3FF; --primary-color-rgb: 10, 77, 140; --orange-color-rgb: 255, 122, 0; --steel-gray-color-rgb: 30, 30, 30; --iron-gray-color-rgb: 47, 47, 47; --light-color-rgb: 243, 244, 246; --light-blue-color-rgb: 77, 163, 255; --mask-color: rgba(0, 0, 0, 0.15); --font-head: Montserrat, sans-serif; --font-text: Inter, sans-serif; --font-size: 16px; --line-height: 1.6; --line-height-lg: 2; --line-height-sm: 1.4; --section-padding: clamp(4rem, 6vw, 6rem); --section-padding-lg: clamp(5rem, 8vw, 8rem); --section-padding-sm: clamp(3rem, 4vw, 4rem); --border-radius: 16px; --border-radius-lg: 32px; --border-radius-sm: 8px; --box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35); --box-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.55); --box-shadow-sm: 0 5px 10px rgba(0, 0, 0, 0.35); --font-size-icon: 1.5rem; --font-size-icon-sm: 1.3rem; --font-size-icon-lg: 2.5rem } .text-cus-primary { color: var(--primary-color) !important } .text-cus-orange { color: var(--orange-color) !important } .text-cus-steel-gray { color: var(--steel-gray-color) !important } .text-cus-iron-gray { color: var(--iron-gray-color) !important } .text-cus-light { color: var(--light-color) !important } .text-cus-light-blue { color: var(--light-blue-color) !important } .bg-cus-primary { background-color: var(--primary-color) !important } .bg-cus-orange { background-color: var(--orange-color) !important } .bg-cus-steel-gray { background-color: var(--steel-gray-color) !important } .bg-cus-iron-gray { background-color: var(--iron-gray-color) !important } .bg-cus-light { background-color: var(--light-color) !important } .bg-cus-light-blue { background-color: var(--light-blue-color) !important } .border-cus-primary { border-color: var(--primary-color) !important } .border-cus-orange { border-color: var(--orange-color) !important } .border-cus-steel-gray { border-color: var(--white-color) !important } .border-cus-iron-gray { border-color: var(--iron-gray-color) !important } .border-cus-light { border-color: var(--light-color) !important } .border-cus-light-blue { border-color: var(--light-blue-color) !important } .border-cus-radius { border-radius: var(--border-radius) } .border-cus-radius-lg { border-radius: var(--border-radius-lg) } .border-cus-radius-sm { border-radius: var(--border-radius-sm) } .section-padding { padding-top: var(--section-padding); padding-bottom: var(--section-padding) } .section-padding-top { padding-top: var(--section-padding) } .section-padding-bottom { padding-bottom: var(--section-padding) } .section-padding-sm { padding-top: var(--section-padding-sm); padding-bottom: var(--section-padding-sm) } .section-padding-lg { padding-top: var(--section-padding-lg); padding-bottom: var(--section-padding-lg) } .text-eyebrow { display: inline-block; padding: 6px 15px; background: var(--steel-gray-color); border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--light-color); border: 1px solid rgba(var(--steel-gray-color-rgb), 0.08) } .text-highlight { background: linear-gradient(90deg, var(--primary-color), var(--light-blue-color)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); font-weight: 800 } .text-subheadline { margin-bottom: 1rem; color: rgba(var(--steel-gray-color-rgb), 0.55); font-weight: 600 } .text-cta-lg { background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.85), rgba(var(--primary-color-rgb), 0.55)); -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0) } .text-outline { -webkit-text-stroke: 1px var(--primary-color); color: rgba(0, 0, 0, 0) } .text-vertical { writing-mode: vertical-rl; text-orientation: mixed } .text-small { font-size: .875rem } .head-badge { display: inline-block; color: var(--primary-color); font-weight: bold; background-color: var(--light-color); border-radius: var(--border-radius-lg); padding: .5rem 1rem } .grid-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none } .ifCus { width: 100%; height: 100% } .responsive-video { width: 100%; height: auto } .list-unordered { list-style: none; margin: 0px; padding: 0px } .list-unordered li { padding: 5px } .list-ordered { list-style: none; counter-reset: circle-counter; padding-left: 0 } .list-ordered li { counter-increment: circle-counter; margin-bottom: 20px; padding-left: 48px; position: relative } .list-ordered li::before { content: counter(circle-counter); position: absolute; left: 0; top: -3px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--primary-color); display: flex; justify-content: center; align-items: center; flex-direction: row; font-size: 13px; font-weight: 500; color: var(--primary-color) } .list-icon { list-style: none; margin: 0px; padding: 0px } .list-icon li { padding: 5px } .list-icon li::before { font-family: "bootstrap-icons"; content: ""; margin-right: 8px; line-height: 1px; font-size: .7rem } .blockquote-comment { border-radius: var(--border-radius); padding: 2rem; font-size: 1.125rem; background-color: var(--light-color); box-shadow: var(--box-shadow-sm) } .blockquote-comment .icon { font-size: 3rem; margin-bottom: 1rem; opacity: .55 } @keyframes spin { to { transform: rotate(360deg) } } @keyframes blink { 0% { opacity: 1 } 50% { opacity: .3 } 100% { opacity: 1 } } @keyframes rotateText { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } @keyframes ripple { 0% { transform: scale(1); opacity: .75; border-width: 5px } 60% { transform: scale(1.6); opacity: .6; border-width: 3px } 100% { transform: scale(3.6); opacity: 0; border-width: .8px } } *::-webkit-scrollbar { width: .5rem } *::-webkit-scrollbar-track { background: var(--light-color) } *::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 999px } *::-webkit-scrollbar-thumb:hover { background: var(--orange-color) } * { scrollbar-width: thin; scrollbar-color: var(--primary-color) var(--light-color) } body { font-family: var(--font-text); font-size: var(--font-size); color: var(--steel-gray-color); line-height: var(--line-height) } body ::selection { background: var(--orange-color); color: var(--light-color) } a { text-decoration: none; color: var(--primary-color); transition: color .3s } a:hover { color: var(--orange-color) } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 600; margin: 1rem 0 } h1 { font-size: clamp(2.2rem, 2.2rem + (3rem - 2.2rem)*(100vw - 575px)/(1400px - 575px), 3rem) } h2 { font-size: clamp(1.8rem, 1.8rem + (2.5rem - 1.8rem)*(100vw - 575px)/(1400px - 575px), 2.5rem) } h3 { font-size: clamp(1.4rem, 1.4rem + (2rem - 1.4rem)*(100vw - 575px)/(1400px - 575px), 2rem) } h4 { font-size: clamp(1.25rem, 1.25rem + (1.5rem - 1.25rem)*(100vw - 575px)/(1400px - 575px), 1.5rem) } h5 { font-size: clamp(1.15rem, 1.15rem + (1.35rem - 1.15rem)*(100vw - 575px)/(1400px - 575px), 1.35rem) } h6 { font-size: clamp(1.05rem, 1.05rem + (1.15rem - 1.05rem)*(100vw - 575px)/(1400px - 575px), 1.15rem) } blockquote { font-style: italic; font-size: 1.25rem; border-left: 4px solid rgba(var(--primary-color-rgb), 0.55); padding-left: 1rem; color: var(--iron-gray-color); margin: 1.5rem 0 } pre { background: var(--steel-gray-color); color: var(--light-color); padding: 1rem; border-radius: var(--border-radius-sm); overflow: auto } input[type=text], input[type=number], input[type=email], input[type=password], select, textarea { border: 1px solid rgba(var(--primary-color-rgb), 0.55) !important; padding: .5rem 1rem; width: 100%; transition: all .3s } input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, input[type=password]:focus, select:focus, textarea:focus { border: 1px solid var(--orange-color) !important; box-shadow: 0 0 0 .35rem rgba(var(--orange-color-rgb), 0.25) !important } input[type=text]:focus-visible, input[type=number]:focus-visible, input[type=email]:focus-visible, input[type=password]:focus-visible, select:focus-visible, textarea:focus-visible { outline: none } .select-wrapper { position: relative } .select-wrapper select { appearance: none; -webkit-appearance: none; -moz-appearance: none } .select-wrapper::after { font-family: "bootstrap-icons"; content: ""; position: absolute; font-size: 15px; right: 1rem; pointer-events: none; top: 50%; transform: translateY(-50%) } input[type=range] { outline: none } input[type=checkbox] { margin: 5px; accent-color: var(--primary-color); width: 16px; height: 16px } input[type=checkbox]:focus { border: 1px solid var(--orange-color) !important; box-shadow: 0 0 0 .35rem rgba(var(--orange-color-rgb), 0.25) } input[type=checkbox]:focus-visible { outline: none } input[type=range]::-webkit-slider-runnable-track { background: rgba(var(--primary-color-rgb), 0.15) } input[type=range]::-webkit-slider-thumb { background: rgba(var(--primary-color-rgb), 0.75); border-color: rgba(var(--primary-color-rgb), 0.15); box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.35); cursor: pointer } input[type=range]::-moz-range-thumb { background: rgba(var(--primary-color-rgb), 0.75); border-color: rgba(var(--primary-color-rgb), 0.15); box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.35); cursor: pointer } .pagination .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff } .pagination .page-item.active .page-link:hover { background-color: var(--orange-color); border-color: var(--orange-color) } .pagination .page-item .page-link { color: var(--primary-color); width: 2.5rem; height: 2.5rem; border-radius: 50%; line-height: 1.6rem; text-align: center; display: inline-block; margin: 5px 10px } .pagination .page-item .page-link:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff } .breadcrumb .breadcrumb-item a { color: var(--orange-color) } .breadcrumb .breadcrumb-item.active { color: var(--light-color) } .breadcrumb li+li::before { font-family: "bootstrap-icons"; content: "" !important; color: var(--orange-color) !important } .nav-tabs .nav-link { color: var(--orange-color) } .nav-tabs .nav-link { border-radius: 0 } .nav-tabs .nav-link.active { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color) var(--primary-color) rgba(0, 0, 0, 0) } .tab-content { border: 1px solid rgba(var(--primary-color-rgb), 0.35) } .tab-content .tab-pane { padding: 2rem } .swiper-slide img { width: 100% } .swiper-pagination { position: relative; margin-top: 2rem } .swiper-pagination .swiper-pagination-bullet { width: 15px; height: 15px; background-color: var(--primary-color) } .swiper-pagination .swiper-pagination-bullet:hover { background-color: var(--orange-color) } .swiper-pagination .swiper-pagination-bullet.active { background-color: var(--orange-color) } .swiper-button-next, .swiper-button-prev { color: var(--orange-color) } .nav-main-page3 { transition: top .3s; width: 100%; z-index: 990 } .nav-main-page3.hide { top: -6rem } .nav-main-page3 .navbar-main-right .nav-item:hover .nav-link { color: var(--orange-color) } .nav-main-page3 .navbar-main-right .nav-item .nav-link { position: relative; color: var(--light-color); transition: color .3s; font-weight: 400 } .nav-main-page3 .navbar-main-right .nav-item .nav-link:active { color: var(--orange-color) } .nav-main-page3 .navbar-main-right .nav-item .nav-link.active { color: var(--orange-color) } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu li.dm-2::after { font-family: "bootstrap-icons"; content: ""; position: absolute; right: 1rem; top: 3rem; color: var(--light-color) } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu li .dropdown-menu-2 { min-width: 100%; padding: 1rem; list-style: none } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu li .dropdown-menu-2 a { display: inline-block; padding: .5rem; width: 100%; color: var(--light-color) } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus { position: initial } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu { left: 0; color: #fff } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu figure { padding: .5rem } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu figure img { display: none } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu figure figcaption { padding: .5rem 1rem; background-color: #fff; text-align: center; transition: transform .3s } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu figure figcaption:hover { transform: translateY(-15%) } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu figure figcaption h3 { font-size: 1rem; color: var(--primary-color); transition: color .3s; margin-bottom: 0 } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu .nav-link-cus a { display: block; padding: .5rem 0; position: relative; color: var(--light-color) } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu .nav-link-cus a:hover { color: var(--orange-color) } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu .nav-link-cus a:not(:last-child) { border-bottom: 1px solid rgba(var(--iron-gray-color-rgb), 0.15) } .nav-main-page3 .navbar-right .nav-item .nav-link { color: var(--light-color) } .nav-main-page3 .navbar-right .nav-btn { display: flex; justify-content: center; align-items: center } .nav-main-page3 .title { display: flex; justify-content: center; align-items: center } .nav-main-page3 .title img { height: 60px } .nav-main-page3 .title .site-title { font-size: 1.3rem; color: var(--orange-color); font-family: var(--font-head); text-transform: uppercase; font-weight: bold; margin: 0 0 .5rem 0 } .nav-main-page3 .title .sub-site-title { font-size: .8rem; color: rgba(var(--light-color-rgb), 0.75); margin: 0 } .nav-main-page3 .navbar-toggler { color: var(--orange-color); border: 3px solid var(--primary-color) } .nav-main-page3 .offcanvas { width: 90% } .nav-main-page3 .shortcut-search { position: relative } .nav-main-page3 .shortcut-search .search-form-desktop { position: absolute; right: 0; width: 300px; background-color: rgba(var(--steel-gray-color-rgb), 0.55); backdrop-filter: blur(10px); padding: 1rem; transform: translateY(100%); opacity: 0; visibility: hidden; transition: all .3s ease } .nav-main-page3 .shortcut-search .search-form-desktop.active { transform: translateY(0); opacity: 1; visibility: visible } .nav-main-page3 .input-group-cus input { padding-right: 4rem; border-radius: 0 } .nav-main-page3 .input-group-cus button { border: none; background-color: var(--primary-color); color: var(--light-color); padding: .3rem 1rem; border-radius: 0; transition: background-color .3s } .nav-main-page3 .input-group-cus button:hover { background-color: var(--orange-color) } @media(max-width: 991px) { .nav-main-page3 .offcanvas { background-color: rgba(var(--iron-gray-color-rgb), 0.55); backdrop-filter: blur(10px) } .nav-main-page3 .offcanvas .offcanvas-title { color: var(--light-color) } .nav-main-page3 .offcanvas .nav-item .nav-link { color: var(--light-color) } .nav-main-page3 .offcanvas .nav-item .nav-link.dropdown-toggle::after { font-family: "bootstrap-icons"; content: ""; right: 10px; top: .5rem; position: absolute; border: none; transition: transform .3s } .nav-main-page3 .offcanvas .nav-item .nav-link.dropdown-toggle.show::after { transform: rotate(90deg) } .nav-main-page3 .offcanvas .nav-item .dropdown-menu { border-color: var(--steel-gray-color); border-radius: 0px; background-color: rgba(var(--steel-gray-color-rgb), 0.85); transition: height .3s; padding-top: 10px; padding-bottom: 10px } .nav-main-page3 .offcanvas .nav-item .dropdown-menu .dropdown-item { color: #fff; padding-top: .5rem; padding-bottom: .5rem; transition: background-color .3s } .nav-main-page3 .offcanvas .nav-item .dropdown-menu .dropdown-item.active { background-color: var(--orange-color); color: #fff } .nav-main-page3 .offcanvas .nav-item .dropdown-menu .dropdown-item:hover, .nav-main-page3 .offcanvas .nav-item .dropdown-menu .dropdown-item:active, .nav-main-page3 .offcanvas .nav-item .dropdown-menu .dropdown-item:focus { background-color: var(--orange-color) } .nav-main-page3 .offcanvas .navbar-right .nav-item .nav-link { padding: 1rem 1rem !important } } @media(min-width: 992px) { .nav-main-page3 { background-color: rgba(var(--iron-gray-color-rgb), 0.55); backdrop-filter: blur(10px) } .nav-main-page3 .navbar-main-right .nav-item:hover .nav-link::before { width: 100%; border: 2px solid var(--orange-color) } .nav-main-page3 .navbar-main-right .nav-item:hover .nav-link.dropdown-toggle::after { animation: spin 5s linear infinite } .nav-main-page3 .navbar-main-right .nav-item .nav-link { padding: 1.5rem .5rem !important } .nav-main-page3 .navbar-main-right .nav-item .nav-link::before { content: ""; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 0px; transition: width .3s, bottom .3s } .nav-main-page3 .navbar-main-right .nav-item .nav-link.dropdown-toggle::after { font-family: "bootstrap-icons"; content: ""; border: none; vertical-align: middle; opacity: .55; line-height: 0 } .nav-main-page3 .navbar-main-right .nav-item.dropdown:hover .dropdown-menu { opacity: 1; transform: translateY(0); visibility: visible } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu { display: block; opacity: 0; transform: translateY(10px); visibility: hidden; transition: all .25s ease; border-radius: 0px; border: none; background-color: rgba(var(--steel-gray-color-rgb), 0.75); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(12, 11, 11, .1); padding-top: 0px; padding-bottom: 0px } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu .dropdown-item { padding: .8rem 2.5rem .8rem 1.3rem; color: var(--light-color); position: relative; transition: padding .3s } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu .dropdown-item.active { background-color: var(--orange-color); color: #fff } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu .dropdown-item:hover { padding-left: 1.6rem; background-color: rgba(0, 0, 0, 0); color: var(--orange-color) } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu li { position: relative } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu li:not(:last-child) { border-bottom: 1px solid rgba(var(--iron-gray-color-rgb), 0.15) } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu li.dm-2::after { font-family: "bootstrap-icons"; content: ""; position: absolute; right: 1rem; top: .8rem; color: var(--light-color) } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu li .dropdown-menu-2 { position: absolute; right: -100%; min-width: 100%; top: 0; padding: 1rem; background-color: rgba(var(--steel-gray-color-rgb), 0.75); backdrop-filter: blur(10px); list-style: none; visibility: hidden; opacity: 0; transition: opacity .3s } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu li .dropdown-menu-2 a { display: inline-block; padding: .5rem; width: 100%; transition: padding-left .3s; color: var(--light-color) } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu li .dropdown-menu-2 a:hover { padding-left: 1rem; color: var(--orange-color) } .nav-main-page3 .navbar-main-right .nav-item .dropdown-menu li:hover .dropdown-menu-2 { opacity: 1; visibility: visible } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu { max-height: 87vh; overflow-y: auto; color: var(--light-color) } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu figure img { display: block } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu figure figcaption { padding: 1rem } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu .nav-link-cus { padding: 0 1rem } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu .nav-link-cus a { color: var(--light-color); padding: 1rem 0; transition: padding .3s } .nav-main-page3 .navbar-main-right .nav-item.dropdown-cus .dropdown-menu .nav-link-cus a:hover { padding-left: .6rem } .nav-main-page3 .navbar-right .nav-item .nav-link { padding: 1.5rem .6rem !important } .nav-main-page3 .navbar-right .nav-item.dropdown:hover .dropdown-menu { opacity: 1; transform: translateY(0); visibility: visible } .nav-main-page3 .navbar-right .nav-item .dropdown-menu { display: block; opacity: 0; transform: translateY(10px); visibility: hidden; transition: all .25s ease; border-radius: 0px; border: none; background-color: rgba(var(--steel-gray-color-rgb), 0.75); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(12, 11, 11, .1); padding-top: 0px; padding-bottom: 0px; right: 0; left: auto; min-width: 180px } .nav-main-page3 .navbar-right .nav-item .dropdown-menu .dropdown-item { padding: .8rem 2.5rem .8rem 1.3rem; color: var(--light-color); position: relative; transition: padding .3s } .nav-main-page3 .navbar-right .nav-item .dropdown-menu .dropdown-item.active { background-color: var(--orange-color); color: #fff } .nav-main-page3 .navbar-right .nav-item .dropdown-menu .dropdown-item:hover { padding-left: 1.6rem; background-color: rgba(0, 0, 0, 0); color: var(--orange-color) } } @media(min-width: 1200px) { .nav-main-page3 .navbar-main-right .nav-item .nav-link { padding: 1.5rem .5rem !important; font-size: 1.1rem } .nav-main-page3 .navbar-right .nav-btn .nav-link { padding: 1.5rem .8rem !important; font-size: 1.2rem } } @media(min-width: 1400px) { .nav-main-page3 .navbar-main-right .nav-item .nav-link { padding: 1.5rem .6rem !important; font-size: 1.2rem } .nav-main-page3 .navbar-right .nav-btn .nav-link { padding: 1.5rem 1rem !important; font-size: 1.2rem } } .scroll-top { position: fixed; top: 50%; right: 20px; transform: translateY(-50%); width: 30px; height: 60px; border-radius: 50px; background-color: rgba(var(--primary-color-rgb), 0.55); backdrop-filter: blur(10px); color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s ease, background-color .3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); z-index: 980; display: flex; justify-content: center; align-items: center; flex-direction: column } .scroll-top svg { position: absolute; top: 0; left: 0; transform: rotate(180deg) } .scroll-top .progress-pill__bg { fill: none; stroke: hsla(0, 0%, 100%, .25); stroke-width: 1 } .scroll-top .progress-pill__progress { fill: none; stroke: #fff; stroke-width: 1; stroke-linecap: round; transition: stroke-dashoffset .2s ease } .scroll-top.show { opacity: 1; pointer-events: all } .scroll-top:hover { background-color: var(--orange-color) } .scroll-top:hover i { animation-play-state: paused } .scroll-top i { font-size: .8rem; z-index: 2; animation: arrow-bounce 1.2s ease-in-out infinite; pointer-events: none } @keyframes arrow-bounce { 0% { transform: translateY(0); opacity: .8 } 50% { transform: translateY(3px); opacity: 1 } 100% { transform: translateY(0); opacity: .8 } } .scroll-cta { position: absolute; transform: translateX(-50%); left: 50%; text-align: center; bottom: 20px; animation: fadeIn 2s ease-in-out; z-index: 99; width: 100px; height: 100px; border-radius: 50%; cursor: pointer; display: none } .scroll-cta p { font-size: 1.1rem; letter-spacing: 1px; opacity: .8; margin-bottom: 10px } .scroll-cta .mouse { width: 28px; height: 45px; border: 1px solid #fff; border-radius: 20px; position: relative; margin: 0 auto; background-color: rgba(var(--orange-color-rgb), 0.55); transition: background-color .3s ease } .scroll-cta .mouse::before { content: ""; position: absolute; top: 8px; left: 50%; width: 6px; height: 6px; background: #fff; border-radius: 50%; transform: translateX(-50%); animation: scrollDown 1.5s infinite } .scroll-cta .scroll-arrow { font-size: 1.5rem; margin-top: 10px; animation: bounce 1.5s infinite; color: var(--orange-color) } .scroll-cta:hover .mouse { background-color: rgba(var(--orange-color-rgb), 0.85) } @keyframes scrollDown { 0% { opacity: 1; transform: translate(-50%, 0) } 50% { opacity: .5; transform: translate(-50%, 10px) } 100% { opacity: 0; transform: translate(-50%, 18px) } } @keyframes fadeIn { from { opacity: 0; transform: translateX(-50%) translateY(20px) } to { opacity: 1; transform: translateX(-50%) translateY(0) } } @keyframes bounce { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(5px) } } @media(min-width: 992px) { .scroll-cta { display: block } } .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 9999; display: flex; justify-content: center; align-items: center; flex-direction: column } .preloader .gear { position: relative; width: 80px; height: 80px; margin: 20px } .preloader .gear::before, .preloader .gear::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; border: 6px solid rgba(0, 0, 0, 0); border-top-color: var(--orange-color); border-bottom-color: var(--orange-color); animation: spin 3s linear infinite } .preloader .gear::after { border-top-color: var(--primary-color); border-bottom-color: var(--primary-color); animation-direction: reverse } .hero { position: relative; overflow: hidden; height: 87vh; min-height: 600px } .hero .layer { position: absolute; width: 120%; height: 120%; top: -10%; left: -10%; background-size: cover; background-position: center; pointer-events: none } .hero .layer1 { background-image: url("../images/hero/layer1.jpg"); z-index: 1 } .hero .layer2 { background-image: url("../images/hero/layer2.png"); background-size: 1000; z-index: 2; mix-blend-mode: screen } .hero .layer3 { background-image: url("../images/hero/layer3.jpg"); background-size: 1000; z-index: 3; mix-blend-mode: overlay } .hero .overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 10; text-align: center; text-shadow: 0 0 20px rgba(0, 0, 0, .7); width: 85% } .hero .spark { position: absolute; width: 4px; height: 4px; background: #fc0; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 99 } @media(min-width: 576px) { .hero .overlay-text { width: 80% } } @media(min-width: 768px) { .hero .overlay-text { width: 75% } } @media(min-width: 992px) { .hero { min-height: 800px } .hero .overlay-text { width: 70% } } @media(min-width: 1200px) { .hero .overlay-text { width: 65% } } @media(min-width: 1400px) { .hero .overlay-text { width: 60% } } .hero-s2 { position: relative; height: 87vh; width: 100%; background-size: cover; background-position: center; background-attachment: fixed; display: flex; align-items: center } .hero-s2 .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 100%); z-index: 1 } .hero-s2 .noise { position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay; z-index: 2 } .hero-s2 .hero-content { position: relative; z-index: 3; color: #fff; max-width: 650px } .hero-s2 .hero-title { font-size: 2rem; font-weight: 800; line-height: 1.1; text-transform: uppercase } .hero-s2 .hero-subtitle { font-size: 1.2rem; color: #dcdcdc; margin-top: 20px; margin-bottom: 40px } .hero-s2 .hero-line { width: 4px; height: 80px; background: var(--orange-color); margin-bottom: 25px } @media(min-width: 768px) { .hero-s2 .hero-title { font-size: 2.5rem } } @media(min-width: 992px) { .hero-s2 .hero-title { font-size: 3rem } } @media(min-width: 1200px) { .hero-s2 .hero-title { font-size: 3.5rem } } @media(min-width: 1400px) { .hero-s2 .hero-title { font-size: 4rem } } .hero-s3 .hero-slider { height: 87vh; position: relative; overflow: hidden } .hero-s3 .hero-slider .swiper-slide { height: 100%; display: flex; align-items: center; background-size: cover; background-position: center; position: relative } .hero-s3 .hero-slider .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.34) 100%); z-index: 1 } .hero-s3 .hero-slider .noise { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: overlay; opacity: .85 } .hero-s3 .hero-slider .hero-content { position: relative; z-index: 3; color: #fff; max-width: 720px; padding: 2rem } .hero-s3 .hero-slider .hero-line { width: 5px; height: 90px; background: var(--orange-color); margin-bottom: 20px; opacity: 0 } .hero-s3 .hero-slider .hero-title { font-size: 2rem; font-weight: 800; line-height: 1.05; text-transform: uppercase; opacity: 0 } .hero-s3 .hero-slider .hero-desc { margin-top: 18px; color: #e0e0e0; max-width: 90%; opacity: 0 } .hero-s3 .swiper-pagination { bottom: 2rem; position: absolute } .hero-s3 .swiper-pagination-bullet { width: 11px; height: 11px; background: var(--orange-color); opacity: .6 } .hero-s3 .swiper-pagination-bullet-active { opacity: 1; transform: scale(1.2) } .hero-s3 .swiper-button-next, .hero-s3 .swiper-button-prev { color: var(--orange-color) } @media(min-width: 768px) { .hero-s3 .hero-slider .hero-title { font-size: 2.5rem } } @media(min-width: 992px) { .hero-s3 .hero-slider .hero-content { padding-left: 6rem } .hero-s3 .hero-slider .hero-title { font-size: 3rem } } @media(min-width: 1200px) { .hero-s3 .hero-slider .hero-title { font-size: 3.3rem } } @media(min-width: 1400px) { .hero-s3 .hero-slider .hero-title { font-size: 3.6rem } } .hero-s3 { position: relative; height: 87vh; width: 100%; display: flex; align-items: center } .hero-s3 .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.34) 100%); z-index: 2 } .hero-s3 .hero-video { height: 100%; position: absolute; inset: 0; z-index: 1 } .hero-s3 .hero-video video { height: 100%; object-fit: cover } .hero-s3 .hero-content { position: relative; z-index: 3; color: #fff; max-width: 650px } .hero-s3 .hero-title { font-size: 2rem; font-weight: 800; line-height: 1.1; text-transform: uppercase } .hero-s3 .hero-subtitle { font-size: 1.2rem; color: #dcdcdc; margin-top: 20px; margin-bottom: 40px } .hero-s3 .hero-line { width: 4px; height: 80px; background: var(--orange-color); margin-bottom: 25px } @media(min-width: 768px) { .hero-s3 .hero-title { font-size: 2.5rem } } @media(min-width: 992px) { .hero-s3 .hero-title { font-size: 3rem } } @media(min-width: 1200px) { .hero-s3 .hero-title { font-size: 3.5rem } } @media(min-width: 1400px) { .hero-s3 .hero-title { font-size: 4rem } } .hero-s5 { height: 96vh } .hero-page2 { display: flex; justify-content: center; align-items: center; flex-direction: row; min-height: 87vh; background: linear-gradient(to bottom, var(--light-color), white); padding-top: 2rem; padding-bottom: 2rem } .hero-page2 .truested { background: rgba(var(--steel-gray-color-rgb), 0.06); border: 1px solid rgba(var(--steel-gray-color-rgb), 0.15); color: var(--orange-color); display: inline-block; border-radius: var(--border-radius-sm); padding: .3rem } .hero-page2 .hero-left { backdrop-filter: blur(6px) } .hero-page2 .hero-visual { position: relative; height: 420px; border-radius: var(--border-radius); overflow: hidden; background: linear-gradient(135deg, var(--steel-gray-color) 0%, var(--iron-gray-color) 100%); box-shadow: var(--box-shadow-lg) } .hero-page2 .hero-visual img { width: 100%; height: 100%; object-fit: cover } .hero-page2 .hero-visual .overlay-top, .hero-page2 .hero-visual .overlay-bottom { position: absolute; color: var(--light-color); padding: .8rem; background: rgba(var(--steel-gray-color-rgb), 0.6); border: 1px solid hsla(0, 0%, 100%, .03) } .hero-page2 .hero-visual .overlay-top { left: 0; top: 0; border-bottom-right-radius: var(--border-radius-lg) } .hero-page2 .hero-visual .overlay-bottom { right: 0; bottom: 0; border-top-left-radius: var(--border-radius-lg) } .hero-page3 { min-height: 100vh; display: flex; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/home_ban.jpg); background-size: cover; background-position: center; background-attachment: fixed; color: #fff; padding: 100px 0 } .hero-page3 .sub-title { font-weight: 300 } .hero-page4 { min-height: 100vh; display: flex; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/hero/1.jpg"); background-size: cover; background-position: center; background-attachment: fixed; color: #fff; padding: 100px 0 } .hero-page4 h1 { font-size: clamp(48px, 6vw, 96px); line-height: 1.05 } .hero-page4 .outline { -webkit-text-stroke: 1px var(--light-color); color: rgba(0, 0, 0, 0) } .hero-page5 { min-height: 100vh; background: linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.9), rgba(0, 0, 0, 0.5)), url("../images/hero/1.jpg") center/cover; display: flex; align-items: center; color: #fff; position: relative } .hero-page6 { min-height: 100vh; display: flex; align-items: center; background: var(--steel-gray-color); position: relative; overflow: hidden; color: #fff; padding: 100px 0 } .hero-page6 .hero-content { z-index: 10; position: relative } .hero-page6 .hero-content .sub-title { letter-spacing: 5px } .hero-page6 .hero-content .hero-title { font-size: clamp(2.5rem, 6vw, 5rem); color: #fff; line-height: .9 } .hero-page6 .hero-content .btn-cus-play { color: var(--light-color) } .hero-page6 .hero-content .btn-cus-play i { font-size: 2rem; transition: font-size .3s } .hero-page6 .hero-content .btn-cus-play:hover { color: var(--orange-color) } .hero-page6 .hero-image-side { position: absolute; right: 0; top: 0; width: 70%; height: 100%; background: url("../images/hero/1.jpg") center/cover; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%) } @media(min-width: 992px) { .hero-page6 .hero-image-side { width: 50%; clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%) } } .hero-page7 .hero-swiper { height: 100vh; position: relative; background: var(--steel-gray-color) } .hero-page7 .hero-swiper .swiper-slide { overflow: hidden; position: relative } .hero-page7 .hero-swiper .swiper-slide .slide-inner { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; display: flex; align-items: center } .hero-page7 .hero-swiper .swiper-slide .slide-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 30, 30, 0.9) 0%, rgba(30, 30, 30, 0.4) 100%) } .hero-page7 .hero-swiper .swiper-slide .hero-content { position: relative; z-index: 10; color: #fff; max-width: 800px } .hero-page7 .hero-swiper .swiper-slide .hero-title { font-size: clamp(3rem, 7vw, 6rem); font-weight: 900; line-height: .85 } .hero-page7 .hero-swiper .swiper-slide .hero-tag { color: var(--orange-color); letter-spacing: 5px; font-weight: 700; font-size: 14px } .hero-page7 .hero-swiper .swiper-slide .side-specs { position: absolute; right: 5%; bottom: 10%; z-index: 20; border-left: 2px solid var(--orange-color); padding-left: 20px; color: #fff } .hero-page8 { min-height: 100vh; background-color: rgba(var(--primary-color-rgb), 0.75); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: 100px; padding-bottom: 60px } .hero-page8 .contents { z-index: 5 } .hero-page8 .contents h1 { line-height: 1 } .hero-page8 .hero-tag { color: var(--orange-color); letter-spacing: 5px; font-weight: 700; font-size: 14px } .hero-page8 .hero-blueprint-bg { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: var(--steel-gray-color); opacity: .1; clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%) } .hero-page8 .hero-image-mask { margin-top: 20px; width: 90%; aspect-ratio: 3/2; background: url("../images/hero/1.jpg") center/cover; border: 10px solid hsla(0, 0%, 100%, .15) } .hero-page8 .hero-floating-badge { margin-top: 20px; background: var(--orange-color); color: #fff; padding: 20px } @media(min-width: 992px) { .hero-page8 { flex-direction: row; padding-top: 0; padding-bottom: 0 } .hero-page8 .hero-image-mask { position: absolute; right: 5%; top: 15%; width: 40%; height: 70%; z-index: 2 } .hero-page8 .hero-floating-badge { position: absolute; bottom: 20%; right: 40%; background: var(--orange-color); color: #fff; padding: 10px; z-index: 3; transform: rotate(-5deg) } } @media(min-width: 1400px) { .hero-page8 .hero-floating-badge { padding: 20px } } .hero-page9 { background: url("../images/hero/2.png"), url("../images/hero/1.png"), radial-gradient(circle at top right, #ffffff, rgba(var(--light-blue-color-rgb), 0.35)); background-repeat: no-repeat, no-repeat; background-position: right 10% bottom 3%, right bottom; background-size: 300px, 700px, 100%; padding: 120px 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden } .hero-page9 .hero-tag { display: inline-block; padding: 8px 18px; background: var(--light-color); color: var(--primary-color); font-weight: 600; border-radius: 30px; margin-bottom: 20px } .hero-page9 h1 { font-size: 3.4rem; font-weight: 800; line-height: 1.1 } .hero-page9 p { color: #4b5563; margin: 24px 0; max-width: 420px } .hero-page9 .automation-core { position: relative; width: 100%; height: 520px; margin: 20px auto } .hero-page9 .core-center { position: absolute; inset: 0; margin: auto; width: 160px; height: 160px; background: linear-gradient(135deg, rgba(var(--orange-color-rgb), 0.95), rgba(var(--orange-color-rgb), 0.65)); border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; font-weight: 700; z-index: 3 } .hero-page9 .core-ring { position: absolute; inset: -25px; border: 2px dashed rgba(var(--primary-color-rgb), 0.4); border-radius: 50% } .hero-page9 .core-node { position: absolute; padding: 12px 18px; background: #fff; border-radius: var(--border-radius); font-weight: 600; box-shadow: 0 20px 40px rgba(0, 0, 0, .08); z-index: 2 } .hero-page9 .node-1 { top: 0; left: 50%; transform: translateX(-50%) } .hero-page9 .node-2 { top: 50%; right: 0; transform: translateY(-50%) } .hero-page9 .node-3 { bottom: 10%; left: 50%; transform: translateX(-50%) } .hero-page9 .node-4 { top: 50%; left: 0; transform: translateY(-50%) } .hero-page9 .node-5 { top: 15%; right: 15% } .hero-page10 { position: relative; overflow: hidden; min-height: 88vh; display: flex; align-items: center } .hero-page10::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(var(--primary-color-rgb), 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--primary-color-rgb), 0.05) 1px, transparent 1px); background-size: 50px 50px; z-index: 1; pointer-events: none } .hero-page10 .hero-backdrop-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 900; font-size: 25vw; color: rgba(var(--primary-color-rgb), 0.13); white-space: nowrap; z-index: 1; pointer-events: none } .hero-page10 .hero-main-title { font-weight: 900; color: var(--steel-gray-color); line-height: .9; letter-spacing: -2px } .hero-page10 .text-outline-blue { -webkit-text-stroke: 2px var(--primary-color); color: rgba(0, 0, 0, 0) } .hero-page10 .video-cta { cursor: pointer } .hero-page10 .hero-visual-frame { width: 100%; height: 100%; clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%); position: relative; overflow: hidden } .hero-page10 .hero-img-main { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1) } .hero-page10 .floating-tech-card { position: absolute; bottom: 10%; left: 20%; background: var(--steel-gray-color); padding: 30px; border-left: 5px solid var(--orange-color); z-index: 5; box-shadow: 0 30px 60px rgba(0, 0, 0, .3) } .section-title-s1 { color: var(--steel-gray-color); position: relative; padding-top: 1rem; margin-bottom: 1.3rem } .section-title-s1::before { content: ""; position: absolute; left: 50%; top: -2px; transform: translateX(-50%); width: 80px; height: 4px; background: var(--orange-color); border-radius: 4px } .section-title-s2 { position: relative; padding-left: 50px } .section-title-s2:before { content: ""; width: 35px; height: 4px; background: var(--primary-color); position: absolute; left: 0; top: 14px; border-radius: 4px } .section-title-s3 { position: relative; padding-top: 1rem } .section-title-s3::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 64px; border-radius: 8px; background: linear-gradient(90deg, var(--primary-color), var(--orange-color)); display: inline-block } .service-card { background: rgba(var(--light-color-rgb), 0.03); border-radius: var(--border-radius); min-height: 170px; position: relative; overflow: visible; border: 1px solid hsla(0, 0%, 100%, .04); transform-origin: center center; transition: transform 300ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 300ms; backdrop-filter: blur(6px) saturate(120%) } .service-card::before { content: ""; position: absolute; right: -36px; top: -36px; width: 120px; height: 120px; transform: rotate(25deg); background: linear-gradient(135deg, var(--light-blue-color) 0%, var(--primary-color) 100%); filter: blur(18px); opacity: .18; border-radius: 18px; pointer-events: none } .service-card .icon { width: 56px; height: 56px; border-radius: var(--border-radius-sm); background: linear-gradient(180deg, rgba(var(--light-color-rgb), 0.03), rgba(var(--light-color-rgb), 0.01)); display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: var(--font-size-icon); margin-bottom: 1rem; border: 1px solid rgba(var(--light-color-rgb), 0.04) } .service-card h3 { margin-bottom: .5rem; font-size: 1.3rem; font-weight: 700 } .service-card p { margin: 0; color: var(--light-color); font-size: .9rem } .service-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: var(--box-shadow) } .service-card.featured { grid-column: 2/3; grid-row: 1/span 2; min-height: 360px; display: flex; justify-content: center; align-items: left; flex-direction: column } .service-card.featured::before { background: linear-gradient(135deg, var(--light-blue-color) 0%, var(--orange-color) 100%); right: -60px; top: -80px; opacity: .14 } .service-card.featured .icon { width: 72px; height: 72px; border-radius: var(--border-radius); font-size: var(--font-size-icon-lg) } .service-card-s2 { position: relative; background: #fff; padding: 3rem 2.5rem; border-radius: var(--border-radius); overflow: hidden; transition: .4s; border: 1px solid rgba(0, 0, 0, .05); height: 100% } .service-card-s2:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, .15) } .service-card-s2 .service-icon { font-size: 3rem; color: var(--primary-color) } .service-card-s2 .service-badge { position: absolute; top: -20px; right: -20px; background: var(--orange-color); color: #fff; padding: 1.8rem 2.2rem; border-radius: 50%; font-weight: 700; font-size: 1.3rem; transform: rotate(15deg); opacity: .9 } .service-card-s3 { position: relative; padding: 3rem 2rem; border-radius: var(--border-radius); background: hsla(0, 0%, 100%, .06); backdrop-filter: blur(14px); border: 1px solid hsla(0, 0%, 100%, .08); transition: .45s; box-shadow: 0 0 0 rgba(0, 0, 0, 0); height: 100% } .service-card-s3 a { color: #fff } .service-card-s3 a:hover { color: var(--orange-color) } .service-card-s3:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 25px 45px rgba(0, 0, 0, .35); border-color: var(--light-blue-color) } .service-card-s3:hover .service-badge { transform: rotate(0deg) } .service-card-s3 .service-icon { font-size: 3rem; background: linear-gradient(135deg, var(--orange-color), var(--light-blue-color)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0) } .service-card-s3 .service-badge { position: absolute; top: -25px; right: -25px; width: 90px; height: 90px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: 800; color: #fff; background: radial-gradient(circle at top left, var(--light-blue-color), var(--primary-color)); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); transform: rotate(18deg); transition: transform .3s } .service-card-s4 { background: #fff; padding: 3rem; border-bottom: 5px solid var(--orange-color); box-shadow: 0 20px 40px rgba(0, 0, 0, .1); transition: transform .3s; height: 100% } .service-card-s4:hover { transform: translateY(-15px) } .service-card-s4 .icon { font-size: 3.5rem; color: var(--primary-color); margin-bottom: 25px; opacity: .8 } .service-card-s5 { position: relative; height: 450px; border-radius: var(--border-radius); overflow: hidden; background: var(--steel-gray-color); border: none } .service-card-s5:hover .card-image { transform: scale(1.1) } .service-card-s5:hover .blueprint-overlay { opacity: 1 } .service-card-s5 .card-image { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s cubic-bezier(0.19, 1, 0.22, 1); opacity: .8 } .service-card-s5 .blueprint-overlay { position: absolute; inset: 0; background: rgba(var(--primary-color-rgb), 0.92); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .4s ease; padding: 40px } .service-card-s5 .blueprint-overlay .blueprint-svg { width: 100%; height: auto; stroke: rgba(var(--light-blue-color-rgb), 0.55); stroke-width: 1; fill: none } .service-card-s5 .card-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px; z-index: 2; color: #fff } .service-card-s5 .card-content a { color: #fff } .service-card-s5 .card-content .icon-box { width: 50px; height: 50px; background: var(--orange-color); display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-sm); margin-bottom: 20px; font-size: 24px } .service-card-s5 .card-content .specs-tag { font-size: 12px; text-transform: uppercase; background: hsla(0, 0%, 100%, .1); padding: 4px 12px; border-radius: var(--border-radius-lg); margin-top: 10px; display: inline-block; border: 1px solid hsla(0, 0%, 100%, .2) } .industry-card { border-radius: var(--border-radius); background-image: linear-gradient(to bottom left, var(--light-color), #fff); box-shadow: inset -2px 2px #fff, -20px 20px 40px rgba(0, 0, 0, .25); transition: transform .3s ease } .industry-card:hover { transform: translateY(-10px) } .industry-card .industry-card-icon { font-size: var(--font-size-icon-lg); color: var(--orange-color); margin-bottom: 1rem; text-align: right } .industry-card h3 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--primary-color) } .industry-card p { font-size: 1rem; color: rgba(var(--steel-gray-color-rgb), 0.85) } .blueprint-card { position: relative; border: 1px solid var(--light-blue-color); border-radius: 0; background-color: rgba(var(--steel-gray-color-rgb), 0.75); overflow: hidden; transition: .35s ease; height: 100%; box-shadow: 0 0 0 1px rgba(var(--light-blue-color-rgb), 0.05), 0 20px 35px rgba(var(--steel-gray-color-rgb), 0.2) } .blueprint-card:hover { border-color: var(--light-blue-color); box-shadow: 0 0 12px rgba(var(--light-blue-color-rgb), 0.8), 0 12px 35px rgba(var(--light-blue-color-rgb), 0.25); transform: translateY(-6px) } .blueprint-card:hover::before, .blueprint-card:hover::after { opacity: 1 } .blueprint-card::before, .blueprint-card::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--light-blue-color); opacity: .4; transition: .3s } .blueprint-card::before { top: 10px; left: 10px; border-right: none; border-bottom: none } .blueprint-card::after { bottom: 10px; right: 10px; border-left: none; border-top: none } .blueprint-card .bp-line { height: 1px; width: 100%; background: repeating-linear-gradient(90deg, var(--light-blue-color) 0, var(--light-blue-color) 4px, transparent 4px, transparent 8px); opacity: .25; margin: 14px 0 } .blueprint-card .icon-stamp { width: 68px; height: 68px; border: 2px solid var(--light-blue-color); display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: var(--font-size-icon); color: var(--light-blue-color); margin-bottom: 2rem; background: rgba(var(--light-blue-color-rgb), 0.05); outline: 1px dashed rgba(var(--light-blue-color-rgb), 0.3); outline-offset: -6px } .blueprint-card h4 { font-size: 1.1rem; font-weight: 700; color: var(--light-color) } .blueprint-card p { font-size: .9rem; opacity: .8 } .pf-card { position: relative; border-radius: var(--border-radius); overflow: hidden; background: #fff; transition: box-shadow .35s ease } .pf-card:hover { box-shadow: var(--box-shadow-sm) } .pf-card:hover .pf-chip { background: rgba(var(--orange-color-rgb), 0.75) } .pf-card .pf-thumb { transform-origin: center; transition: transform .7s cubic-bezier(0.22, 0.9, 0.3, 1); overflow: hidden; position: relative } .pf-card .pf-thumb img { width: 100% } .pf-card h3 { font-size: 1.3rem; margin-bottom: 10px } .pf-card .pf-tags { font-size: .875; color: rgba(var(--iron-gray-color-rgb), 0.55) } .pf-card .pf-chip { position: absolute; top: 60%; right: 16px; background: rgba(var(--orange-color-rgb), 0.55); backdrop-filter: blur(10px); color: var(--light-color); font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: var(--border-radius-sm); height: 60px; min-width: 80px; line-height: 50px; text-align: center; z-index: 10; transition: background-color .35s ease } .tst-card { background: rgba(var(--light-color-rgb), 0.03); border: 1px solid rgba(var(--light-color-rgb), 0.06); backdrop-filter: blur(8px); border-radius: var(--border-radius); position: relative; overflow: visible; transition: transform .35s ease, box-shadow .35s ease; min-height: 220px } .tst-card:hover { transform: translateY(-8px); box-shadow: var(--box-shadow) } .tst-card::after { content: ""; position: absolute; inset: -2px; border-radius: var(--border-radius); padding: 2px; background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.85), rgba(var(--orange-color-rgb), 0.85)); -webkit-mask: linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0); opacity: .08; pointer-events: none } .tst-card .tst-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; border: 3px solid rgba(var(--light-color-rgb), 0.18); box-shadow: var(--box-shadow-sm); display: block } .tst-card .tst-name { font-weight: 700; font-size: 1.05rem; color: #fff; margin-bottom: 4px } .tst-card .tst-role { font-size: .9rem; color: #cbd5df; opacity: .75; margin-bottom: 12px } .tst-card .tst-comment { position: relative; padding: 1rem 2rem; font-size: .9rem } .tst-card .tst-comment::before, .tst-card .tst-comment::after { font-family: "bootstrap-icons"; content: ""; font-size: 2.5rem; position: absolute; line-height: 0; color: rgba(var(--light-color-rgb), 0.15) } .tst-card .tst-comment::before { left: -0.3rem; top: 1.2rem } .tst-card .tst-comment::after { right: -0.3rem; bottom: 1.5rem; transform: rotate(-180deg) } .team-card { position: relative; width: 100%; background: rgba(var(--light-color-rgb), 0.05); border-radius: var(--border-radius); display: flex; justify-content: center; align-items: center; flex-direction: column; backdrop-filter: blur(10px); border: solid 2px rgba(0, 0, 0, 0); box-shadow: 0px 10px 10px rgba(46, 54, 68, .03); padding: 2rem .5rem } .team-card .content { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; opacity: 1; transition: .5s; width: 80% } .team-card .content .img { position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; border: 10px solid rgba(var(--steel-gray-color-rgb), 0.25) } .team-card .content .img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover } .team-card .content .cardContent h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; font-size: 1.3rem; text-align: center; margin: 20px 0 10px; line-height: 1.1em } .team-card .content .cardContent h3 span { font-size: .8rem; font-weight: 300; text-transform: initial } .team-card .team-social { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: row; list-style: none; margin: 0; padding: 0 } .team-card .team-social li { margin: 0 10px; transform: translateY(0px); opacity: 1; transition: .5s; transition-delay: calc(.1s*var(--i)) } .team-card .team-social li a { font-size: 1.5rem; color: var(--light-color) } .team-card .team-social li a:hover { color: rgba(var(--light-color-rgb), 0.35) } @media(min-width: 992px) { .team-card { padding: 3.5rem .5rem } .team-card .content { opacity: .75 } .team-card .team-social { position: absolute; bottom: 30px } .team-card .team-social li { transform: translateY(40px); opacity: 0 } .team-card:hover .team-social li { transform: translateY(0px); opacity: 1 } .team-card:hover .content { opacity: 1; transform: translateY(-20px) } } .team-card-s2 { background-color: #fff; padding: 1rem; border-radius: var(--border-radius); transition: transform .3s ease, box-shadow .3s ease; height: 100% } .team-card-s2 img { width: 100% } .team-card-s2 .team-role { font-size: .9rem; color: var(--orange-color); margin-bottom: 10px } .team-card-s2:hover { box-shadow: var(--box-shadow-sm); transform: translateY(-8px) } .team-card-s3 { text-align: center; background-image: linear-gradient(45deg, var(--iron-gray-color) 50%, transparent 50%); color: var(--light-color); padding-bottom: 2rem } .team-card-s3:hover img { transform: rotate(5deg) } .team-card-s3 img { width: 80%; border-radius: 50%; margin-bottom: 1rem; transition: transform .3s } .team-card-s3 a { color: var(--light-color) } .team-card-s3 a:hover { color: var(--light-blue-color) } .team-card-s3 .social-icons a { display: inline-block; padding: 0 .5rem; font-size: 1.3rem; color: var(--light-color) } .team-card-s3 .social-icons a:hover { color: var(--light-blue-color) } .choose-card { background: #fff; padding: 2rem; border-radius: var(--border-radius); box-shadow: 0 12px 30px rgba(var(--steel-gray-color-rgb), 0.16); height: 100% } .choose-card .choose-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-color); color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 1.5rem; margin-bottom: 1rem } .workflow-card { padding: 2rem; background: var(--iron-gray-color); color: #fff; border-radius: var(--border-radius); position: relative; overflow: hidden; min-height: 140px } .workflow-card .workflow-number { font-size: 3rem; font-weight: 800; color: var(--orange-color); opacity: .12; position: absolute; top: 8px; right: 16px; transition: opacity .3s } .workflow-card:hover .workflow-number { opacity: .75 } .feature-card { background: #fff; padding: 1.5rem 1.3rem; border-radius: var(--border-radius); box-shadow: 0 4px 20px rgba(0, 0, 0, .05); text-align: center; transition: .3s; height: 100% } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 6px 30px rgba(0, 0, 0, .1) } .feature-card .icon { font-size: 2rem; color: var(--orange-color); margin-bottom: 15px } .feature-card-s2 { background: hsla(0, 0%, 100%, .05); padding: 1.5rem 1.3rem; border-radius: var(--border-radius); box-shadow: 0 4px 20px rgba(0, 0, 0, .05); text-align: center; transition: .3s; height: 100% } .feature-card-s2:hover { transform: translateY(-5px); box-shadow: 0 6px 30px rgba(0, 0, 0, .1) } .feature-card-s2 .icon { font-size: 2rem; color: var(--orange-color); margin-bottom: 15px } .feature-card-s3 { padding: 40px; background: #fff; border-bottom: 5px solid var(--primary-color); transition: .4s; height: 100% } .feature-card-s3:hover { transform: translateY(-10px); border-bottom-color: var(--orange-color) } .feature-card-s3 .icon { font-size: 40px; color: var(--primary-color); margin-bottom: 20px } .hero-card { background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.16), rgba(var(--light-blue-color-rgb), 0.12)); border-radius: var(--border-radius); padding: 2rem; box-shadow: 0 12px 30px rgba(var(--primary-color-rgb), 0.16); backdrop-filter: blur(6px) } .portfolio-card { position: relative; overflow: hidden; border-radius: var(--border-radius); background: linear-gradient(180deg, #fff, #fcfdff); box-shadow: 0 10px 28px rgba(18, 24, 40, .16); min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .35s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow .35s } .portfolio-card .thumb { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.9) saturate(1.02); transform-origin: center; transition: transform .6s cubic-bezier(0.2, 0.9, 0.2, 1) } .portfolio-card .thumb img { width: 100%; height: 100%; object-fit: cover } .portfolio-card .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 10, 27, 0) 30%, rgba(3, 10, 27, 0.45) 100%); z-index: 1; pointer-events: none } .portfolio-card .card-info { position: relative; z-index: 2; padding: 1.25rem; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: .75rem; backdrop-filter: blur(2px) } .portfolio-card .card-info a { color: #fff } .portfolio-card .chip { background: hsla(0, 0%, 100%, .12); padding: .4rem .6rem; border-radius: 999px; font-size: .8rem; text-align: center } .portfolio-card-s2 { position: relative; margin-bottom: 25px; display: inline-block; width: 100%; break-inside: avoid; cursor: pointer } .portfolio-card-s2 .card-inner { position: relative; overflow: hidden; border-radius: var(--border-radius); background: var(--steel-gray-color); border: 1px solid var(--steel-gray-color); transition: .4s ease } .portfolio-card-s2 .card-inner:hover { border-color: var(--orange-color); transform: translateY(-6px); box-shadow: 0 0 20px rgba(var(--orange-color-rgb), 0.2) } .portfolio-card-s2 .card-inner:hover img { transform: scale(1.07); filter: brightness(100%) } .portfolio-card-s2 .card-inner:hover .overlay-info { opacity: 1; transform: translateY(0) } .portfolio-card-s2 .card-inner img { width: 100%; height: auto; display: block; transition: .4s ease; filter: brightness(78%) } .portfolio-card-s2 .card-inner .overlay-info { position: absolute; left: 0; bottom: 0; padding: 30px; width: 100%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85)); transition: .35s ease } .portfolio-card-s2 .card-inner .overlay-info small { font-size: .8rem; color: var(--orange-color); letter-spacing: 1px } .portfolio-card-s2 .card-inner .overlay-info h3 { font-size: 1.3rem; margin-top: 5px; margin-bottom: 0 } .portfolio-card-s2 .card-inner .overlay-info a { color: var(--light-color) } .product-card { background: #fff; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 10px 25px rgba(0, 0, 0, .18); transition: .3s; height: 100%; position: relative } .product-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0, 0, 0, .22) } .product-card .product-img { width: 100% } .product-card .tag { background: var(--orange-color); color: #fff; border-radius: 50px; padding: 3px 12px; font-size: 12px; position: absolute; top: 15px; left: 15px } .product-card .product-info { padding: 1.5rem 1.5rem 0 1.5rem } .product-card .product-info h5 { margin-bottom: .5rem } .product-card .product-info .price-cart { display: flex; justify-content: space-between; align-items: center; flex-direction: row; margin-right: -1.5rem } .product-card .product-info .product-category { border-radius: 100px 100px 0 0; background-color: rgba(var(--steel-gray-color-rgb), 0.05); color: rgba(var(--steel-gray-color-rgb), 0.65); padding: .3rem; margin-top: 1rem; font-size: .8rem; text-align: center } .gallery-card { overflow: hidden; position: relative; border-radius: var(--border-radius); cursor: pointer } .gallery-card:hover img { transform: scale(1.1) } .gallery-card:hover .gallery-overlay { opacity: 1 } .gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s } .gallery-card .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .55); opacity: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; font-size: 1.4rem; font-weight: 600; transition: .3s; pointer-events: none } .video-card { overflow: hidden; position: relative; border-radius: var(--border-radius); transition: box-shadow .3s ease; background-color: #fff } .video-card:hover { box-shadow: var(--box-shadow-sm) } .video-card .video-thumb { position: relative } .video-card .video-thumb img { width: 100% } .video-card .video-thumb .btn-play-s2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) } .news-card { background: #fff; border-radius: var(--border-radius); overflow: hidden; transition: .45s ease; position: relative; border: 1px solid rgba(var(--steel-gray-color-rgb), 0.05) } .news-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--orange-color-rgb), 0.22), transparent 60%); opacity: 0; transition: .45s; pointer-events: none } .news-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-sm) } .news-card:hover::before { opacity: 1 } .news-card:hover .news-img { transform: scale(1.12) rotate(1deg) } .news-card .news-img-wrapper { overflow: hidden; cursor: pointer; } .news-card .news-img { width: 100%; height: 100%; object-fit: cover; transition: .6s ease } .news-card .news-meta { font-size: .8rem; color: rgba(var(--iron-gray-color-rgb), 0.55) } .news-card .news-title { font-size: 1.1rem; font-weight: 700; line-height: 1.5 } .news-card .news-desc { color: #555 } .news-card-s2 { position: relative; overflow: hidden } .news-card-s2.featured .news-image-wrap img { width: 100%; min-height: 500px; transition: .6s } .news-card-s2.featured .news-content-overlay { position: absolute; left: 0; bottom: 0; width: 100%; padding: 2.5rem; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent) } .news-card-s2.featured a { color: #fff } .news-card-s2.featured a:hover { color: var(--orange-color) } .news-card-s2-small { display: flex; gap: 1rem; margin-bottom: 1rem } .news-card-s2-small img { width: 140px; height: 140px; object-fit: cover } .news-card-s2-small a { color: var(--steel-gray-color) } .news-card-s2-small a:hover { color: var(--primary-color) } .result-card { padding: 20px; border-radius: var(--border-radius); background: #fff; margin-bottom: 25px; transition: .25s; position: relative } .result-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, .08) } .result-card .thumb img { width: 100% } .result-card .content .result-meta { opacity: .7 } @media(min-width: 992px) { .result-card { display: grid; grid-template-columns: 2fr 4fr; align-items: center } .result-card .content { margin-left: 20px } } .blog-card { background: #fff; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 10px 30px rgba(12, 20, 29, .06); transition: transform .28s ease, box-shadow .28s ease } .blog-card:hover { transform: translateY(-8px); box-shadow: 0 28px 70px rgba(12, 20, 29, .12) } .blog-card .thumb { overflow: hidden } .blog-card .thumb img { width: 100% } .blog-card .body { padding: 1rem } .blog-card .kicker { font-size: .75rem; text-transform: uppercase; opacity: .75 } .blog-card .title { font-size: 1.15rem; margin: .35rem 0 } .blog-card .title a { color: var(--iron-gray-color) } .blog-card .excerpt { color: rgba(var(--iron-gray-color-rgb), 0.85); font-size: .92rem } .blog-card .meta { font-size: .82rem; color: rgba(var(--iron-gray-color-rgb), 0.85); margin-top: .6rem } .blog-card-s2 { background: #fff; border: 1px solid var(--light-color); overflow: hidden; transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1) } .blog-card-s2:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, .08); transform: translateY(-5px) } .blog-card-s2:hover .blog-img { transform: scale(1.1) rotate(1deg) } .blog-card-s2 .blog-img-wrap { position: relative; overflow: hidden } .blog-card-s2 .blog-img-wrap .blog-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease } .blog-card-s2 .blog-img-wrap .blog-date { position: absolute; top: 0; right: 20px; background: var(--orange-color); color: #fff; padding: 10px 15px; text-align: center; display: flex; flex-direction: column; line-height: 1; z-index: 2 } .blog-card-s2 .blog-img-wrap .blog-date .day { font-size: 1.5rem; font-weight: 800 } .blog-card-s2 .blog-img-wrap .blog-date .month { font-size: .7rem; font-weight: 600 } .blog-card-s2 .blog-meta { font-size: .75rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 1px } .blog-card-s2 .blog-meta .category { color: var(--orange-color); margin-right: 15px } .blog-card-s2.horizontal-card { display: flex } .blog-card-s2.horizontal-card .blog-img-wrap { width: 40%; min-height: 200px } .blog-card-s2.horizontal-card .blog-content { width: 60% } @media(max-width: 992px) { .blog-card-s2.horizontal-card { flex-direction: column } .blog-card-s2.horizontal-card .blog-img-wrap, .blog-card-s2.horizontal-card .blog-content { width: 100% } } .blog-card-s3 { background: #fff; border-radius: var(--border-radius); overflow: hidden; margin-bottom: 80px; box-shadow: 0 30px 60px rgba(0, 0, 0, .03); border: 1px solid #f1f1f1; transition: transform .5s ease } .blog-card-s3 .blog-thumb-wrap { position: relative; height: 350px; overflow: hidden } .blog-card-s3 .blog-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease } .blog-card-s3 .blog-content { padding: 40px } .blog-card-s3 .blog-tag { background: #f0f7ff; color: var(--primary-color); padding: 6px 15px; border-radius: 100px; font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 20px; display: inline-block } .project-card { border-radius: var(--border-radius); overflow: hidden; position: relative; background: var(--iron-gray-color); box-shadow: var(--box-shadow-sm); transition: transform .3s, box-shadow .3s } .project-card:hover { transform: scale(1.02); box-shadow: var(--box-shadow) } .project-card img { width: 100%; height: 220px; object-fit: cover } .project-card .project-meta { position: absolute; left: 16px; bottom: 16px; background: linear-gradient(90deg, rgba(var(--steel-gray-color-rgb), 0.8), rgba(var(--steel-gray-color-rgb), 0.4)); padding: 1rem; border-radius: var(--border-radius-sm) } .project-card-s2 { min-width: 500px; height: 80%; margin-right: 50px; position: relative; border-radius: var(--border-radius); overflow: hidden; transition: transform .5s ease } .project-card-s2:hover .project-img { transform: scale(1.1); filter: grayscale(0%) } .project-card-s2 .project-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%); transition: all .6s ease } .project-card-s2 .project-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--primary-color-rgb), 0.85), transparent); padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; opacity: .9; transition: opacity .4s ease } .project-card-s2 .project-category { color: var(--orange-color); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 2px; margin-bottom: 10px } .project-card-s2 .project-title a { color: #fff } .project-card-s2 .project-location { color: hsla(0, 0%, 100%, .7); font-size: 14px } @media(min-width: 992px) { .project-card-s2 { height: 60% } } .about-card { background: linear-gradient(90deg, rgba(var(--primary-color-rgb), 0.08), transparent); padding: 1.3rem; border-radius: var(--border-radius) } .process-card { background: #fff; padding: 40px; border: 1px solid #eee; position: relative; height: 100%; transition: transform .3s } .process-card:hover { border-color: var(--orange-color); transform: translateY(-10px) } .process-card .step-num { font-size: 5rem; font-weight: 900; color: rgba(0, 0, 0, .04); position: absolute; top: 10px; right: 20px } .process-card-s2 { background: hsla(0, 0%, 100%, .03); border: 1px solid hsla(0, 0%, 100%, .05); padding: 40px; transition: .4s; position: relative; backdrop-filter: blur(10px) } .process-card-s2:hover { background: rgba(var(--orange-color-rgb), 0.05); border-color: var(--orange-color); transform: translateY(-10px) } .process-card-s2 .process-number { position: absolute; top: -20px; right: 20px; font-size: 4rem; font-weight: 900; color: rgba(var(--orange-color-rgb), 0.1); z-index: -1 } .process-card-s2 .process-icon-wrap { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: #1e1e1e; border: 2px solid var(--orange-color); border-radius: 50% } .info-card-wrap { margin-top: -60px; position: relative; z-index: 20 } .info-card-wrap .info-card { background: #fff; padding: 30px; border-top: 4px solid var(--orange-color); box-shadow: 0 15px 40px rgba(0, 0, 0, .1) } .info-card-wrap .info-card.active { background: var(--primary-color); color: var(--light-color) } .fleet-card { overflow: hidden; position: relative } .fleet-card:hover .fleet-img { filter: grayscale(0%); transform: scale(1.1) } .fleet-card .fleet-img { transition: .5s ease; filter: grayscale(100%) } .fleet-card .fleet-badge { position: absolute; bottom: 0; left: 0; background: var(--primary-color); color: #fff; padding: 10px 20px; font-weight: 700 } .sol-card { border: 1px solid #eee; transition: .4s; background: #fff; height: 100% } .sol-card:hover { border-color: var(--orange-color); box-shadow: 0 20px 40px rgba(0, 0, 0, .05); transform: translateY(-10px) } .sol-card .sol-icon { width: 70px; height: 70px; background: var(--light-color); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary-color); margin-bottom: 25px } .tech-card { border: 1px solid #ddd; padding: 30px; transition: .5s; background: #fff; position: relative } .tech-card:hover { border-color: var(--orange-color); transform: translateY(-10px) } .tech-card .tech-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 20px } .btn-cus { position: relative; padding: .5rem 2rem; border: none; background-color: rgba(0, 0, 0, 0); text-align: center; display: inline-block } .btn-cus-lg { padding: 1rem 2rem; font-size: 1.2rem } .btn-cus-sm { padding: .3rem 1rem; font-size: .8rem } .btn-cus-primary { background-color: var(--primary-color); border: 1px solid var(--primary-color); color: #fff; transition: color .3s, border .3s, background-color .3s } .btn-cus-primary.active { border-color: var(--orange-color); color: var(--orange-color) } .btn-cus-primary:hover { color: #fff; border: 1px solid var(--orange-color); background-color: var(--orange-color) } .btn-cus-primary:active { color: #fff; border: 1px solid rgba(var(--orange-color-rgb), 0.75); background-color: rgba(var(--orange-color-rgb), 0.75) } .btn-cus-outline-primary { background-color: var(--light-color); border: 1px solid var(--primary-color); color: var(--primary-color); transition: color .3s, border .3s, background-color .3s } .btn-cus-outline-primary:hover { background-color: #fff; border: 1px solid var(--orange-color); color: var(--orange-color) } .btn-cus-outline-primary:active { color: #fff; border: 1px solid rgba(var(--orange-color-rgb), 0.75); background-color: rgba(var(--orange-color-rgb), 0.75) } .btn-cus-outline-circle { border: 1px solid rgba(var(--primary-color-rgb), 0.55); border-radius: 3rem; color: var(--primary-color); transition: color .3s, border .3s, background-color .3s } .btn-cus-outline-circle:hover { border: 1px solid var(--orange-color); color: var(--orange-color) } .btn-cus-outline-circle:active { color: #fff; border: 1px solid rgba(var(--orange-color-rgb), 0.75); background-color: rgba(var(--orange-color-rgb), 0.75) } .btn-cus-line { border-top: 1px solid var(--primary-color); border-bottom: 1px solid var(--primary-color); border-left: none; border-right: none; color: var(--primary-color); transition: color .3s, border .3s, background-color .3s } .btn-cus-line:hover { color: var(--orange-color); border-top: 1px solid var(--orange-color); border-bottom: 1px solid var(--orange-color) } .btn-cus-line:active { color: #fff; border-color: rgba(var(--orange-color-rgb), 0.75); background-color: rgba(var(--orange-color-rgb), 0.75) } .btn-cus-circle-ripple { background-color: rgba(var(--light-color-rgb), 0.55); backdrop-filter: blur(20px); color: var(--primary-color); width: 5rem; height: 5rem; line-height: 0; font-size: 2rem; border-radius: 50%; transition: color .3s, border .3s, background-color .3s } .btn-cus-circle-ripple:hover { backdrop-filter: blur(10px); color: var(--orange-color); background-color: rgba(var(--light-color-rgb), 0.75) } .btn-cus-circle-ripple i, .btn-cus-circle-ripple span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 0 } .btn-cus-circle-ripple::after { content: ""; position: absolute; width: 5rem; height: 5rem; border-radius: 50%; border: 0px solid rgba(var(--light-color-rgb), 0.75); animation: ripple 3s ease-out infinite; pointer-events: none; top: 0; left: 0 } .btn-cus-gear { background-color: var(--orange-color); border: 1px solid var(--orange-color); padding: .5rem 2rem .5rem 3.5rem; color: #fff; border-radius: 3rem; margin-left: 1rem; transition: color .3s, border .3s, background-color .3s } .btn-cus-gear.active { border-color: var(--primary-color); color: var(--primary-color) } .btn-cus-gear:hover { background-color: var(--primary-color) !important; color: #fff } .btn-cus-gear:hover::before { animation: spin 5s linear infinite } .btn-cus-gear:active { color: #fff !important; border: 1px solid var(--orange-color) !important } .btn-cus-gear::before { font-family: "bootstrap-icons"; content: ""; position: absolute; font-size: 3.5rem; color: var(--orange-color); left: -1.1rem; line-height: 0; top: 1.2rem; animation: spin 50s linear infinite; text-shadow: 0 0 20px rgba(0, 0, 0, .3) } .btn-cus-gear.btn-cus-lg { padding: 1rem 2rem 1rem 5rem } .btn-cus-gear.btn-cus-lg::before { font-size: 5.5rem; left: -1.6rem; top: 1.7rem } .btn-cus-gear.btn-cus-sm { padding: .3rem 1rem .3rem 3rem; font-size: .8rem } .btn-cus-gear.btn-cus-sm::before { font-size: 3rem; left: -0.85rem; top: .9rem } .btn-cus-gradient { border: 0; color: #eee; border-radius: 3rem; overflow: hidden; z-index: 0 } .btn-cus-gradient.active { color: #fff } .btn-cus-gradient.active::before { opacity: 0 } .btn-cus-gradient.active::after { opacity: 1 } .btn-cus-gradient:hover { color: #fff } .btn-cus-gradient:hover::before { opacity: 0 } .btn-cus-gradient:hover::after { opacity: 1 } .btn-cus-gradient:active { color: var(--light-color) !important } .btn-cus-gradient::before, .btn-cus-gradient::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; opacity: 1; transition: opacity .3s } .btn-cus-gradient::before { background-image: linear-gradient(90deg, var(--primary-color), var(--light-blue-color)) } .btn-cus-gradient::after { background-image: linear-gradient(90deg, var(--light-blue-color), var(--orange-color)); opacity: 0 } .btn-play { cursor: pointer; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column } .btn-play .bi-gear-wide { font-size: 6rem; color: var(--orange-color); line-height: 0; animation: spin 20s linear infinite } .btn-play .bi-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 2rem; color: var(--orange-color); transition: font-size .3s } .btn-play:hover .bi-gear-wide { animation: spin 5s linear infinite } .btn-play:hover .bi-play { font-size: 2.2rem } .btn-play-s2 { width: 70px; height: 70px; background: hsla(0, 0%, 100%, .3); border-radius: 50%; backdrop-filter: blur(6px); transition: background-color .3s; display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 2rem; color: var(--orange-color); cursor: pointer } .btn-play-s2:hover { background: hsla(0, 0%, 100%, .45) } .btn-cus-left-line { border: 1px solid var(--primary-color); color: #fff; transition: color .3s, border .3s, background-color .3s; z-index: 0 } .btn-cus-left-line.active { border-color: var(--orange-color); color: var(--orange-color) } .btn-cus-left-line:hover { color: #fff; border: 1px solid var(--orange-color) } .btn-cus-left-line:hover::after { width: 11% } .btn-cus-left-line:active { color: #fff; border: 1px solid rgba(var(--orange-color-rgb), 0.75); background-color: rgba(var(--orange-color-rgb), 0.75) } .btn-cus-left-line::before, .btn-cus-left-line::after { content: ""; position: absolute; height: calc(100% + 2px); left: -1px; top: -1px; z-index: -1 } .btn-cus-left-line::before { width: calc(100% + 2px); background-color: var(--primary-color) } .btn-cus-left-line::after { width: 10px; background-color: var(--orange-color); transition: width .3s } .btn-cus-right-line { border: 1px solid var(--primary-color); color: #fff; transition: color .3s, border .3s, background-color .3s; z-index: 0 } .btn-cus-right-line.active { border-color: var(--orange-color); color: var(--orange-color) } .btn-cus-right-line:hover { color: #fff; border: 1px solid var(--orange-color) } .btn-cus-right-line:hover::after { width: 11% } .btn-cus-right-line:active { color: #fff; border: 1px solid rgba(var(--orange-color-rgb), 0.75); background-color: rgba(var(--orange-color-rgb), 0.75) } .btn-cus-right-line::before, .btn-cus-right-line::after { content: ""; position: absolute; height: calc(100% + 2px); right: -1px; top: -1px; z-index: -1 } .btn-cus-right-line::before { width: calc(100% + 2px); background-color: var(--primary-color) } .btn-cus-right-line::after { width: 10px; background-color: var(--orange-color); transition: width .3s } .btn-cus-orange { background: var(--orange-color); border: none; color: #fff; transition: color .3s; font-weight: 600; overflow: hidden } .btn-cus-orange.active { color: #fff } .btn-cus-orange:hover { color: #f1f2f3 } .btn-cus-orange:hover::before { transform: translateX(0) } .btn-cus-orange:active { color: #fff; font-weight: 600 } .btn-cus-orange::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%); transform: translateX(-100%); transition: .4s } .btn-cus-light-led { position: relative; font-weight: 600; color: #fff; border: none; border-radius: 999px; cursor: pointer; overflow: hidden; background: linear-gradient(135deg, var(--primary-color), var(--light-blue-color)); box-shadow: 0 10px 30px rgba(var(--light-blue-color-rgb), 0.35), inset 0 1px 1px hsla(0, 0%, 100%, .4); transition: box-shadow .35s ease } .btn-cus-light-led:hover { box-shadow: 0 14px 40px rgba(var(--light-blue-color-rgb), 0.5), inset 0 1px 1px hsla(0, 0%, 100%, .6); color: #f1f2f3 } .btn-cus-light-led:hover::after { opacity: 1; transform: translateX(100%); transition: transform .8s ease } .btn-cus-light-led:active { transform: scaleX(1.05) scaleY(0.97) } .btn-cus-light-led::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.3), transparent 70%); opacity: 0; transform: translateX(-100%) } .btn-cus-corner { background-color: #fff; background: linear-gradient(135deg, rgba(var(--orange-color-rgb), 0.35), var(--orange-color)); color: #fff; border: none; border-radius: 0; clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); transition: transform .3s, box-shadow .3s } .btn-cus-corner:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(var(--orange-color-rgb), 0.5) } .btn-cus-corner:hover span { transform: translateX(6px) } .btn-cus-corner span { display: inline-block; margin-left: 6px; transition: transform .3s ease } .btn-cus-skew { background: var(--primary-color); color: #fff; overflow: hidden; transition: transform .4s } .btn-cus-skew:hover { background: var(--orange-color); transform: skewX(-5deg); color: #fff } .btn-cus-zi { background: var(--orange-color); color: var(--light-color); border: none; text-transform: uppercase; letter-spacing: 2px; transition: .4s } .btn-cus-zi:hover { background: rgba(var(--orange-color-rgb), 0.75); letter-spacing: 4px } .btn-cus-text-cta { position: relative; display: inline-flex; align-items: center; font-weight: 600; text-decoration: none; color: var(--orange-color); transition: .3s; cursor: pointer; } .btn-cus-text-cta i { transition: .3s } .btn-cus-text-cta:hover i { transform: translateX(5px) } .btn-cus-text-rm { position: relative } .btn-cus-text-rm::after { content: ""; position: absolute; bottom: -3px; left: 0; width: 0%; height: 2px; background: #fa0; transition: .3s } .btn-cus-text-rm:hover::after { width: 100% } .btn-cus-text-s3 { position: relative; border-bottom: 2px solid var(--orange-color); padding-bottom: .5rem; letter-spacing: 3px } .btn-cus-text-ls { color: var(--primary-color); font-weight: 800; font-size: .85rem; letter-spacing: 1px; transition: .3s } .btn-cus-text-ls:hover { color: var(--orange-color); letter-spacing: 2px } .services-page3 { margin-top: -20px; position: relative; z-index: 10 } .services-page3 h2 a { color: inherit; cursor: pointer; } @media(min-width: 768px) { .services-page3 { margin-top: -20px } } @media(min-width: 992px) { .services-page3 { margin-top: -30px } } @media(min-width: 1200px) { .services-page3 { margin-top: -60px } } @media(min-width: 1400px) { .services-page3 { margin-top: -100px } } .spec-page3 { background: var(--steel-gray-color); color: #fff; padding: 80px 0 } .spec-page3 .spec-list { list-style: none; padding: 0 } .spec-page3 .spec-list li { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid hsla(0, 0%, 100%, .1) } .spec-page3 .spec-list li span { color: var(--orange-color); font-weight: 700 } .esg-page3 { background: var(--light-color); position: relative; overflow: hidden } .esg-page3 .esg-circle { position: absolute; right: -10%; top: -10%; width: 500px; height: 500px; border: 50px solid rgba(var(--primary-color-rgb), 0.03); border-radius: 50% } .esg-page3 .esg-box { height: 100%; padding: 1.5rem; text-align: center; border-bottom: 3px solid var(--orange-color); position: relative } .esg-page3 .esg-box:hover::before, .esg-page3 .esg-box:hover::after { height: 70% } .esg-page3 .esg-box::before, .esg-page3 .esg-box::after { content: ""; position: absolute; width: 3px; height: 50%; background-color: var(--orange-color); transition: height .3s } .esg-page3 .esg-box::before { bottom: 0; left: 0 } .esg-page3 .esg-box::after { bottom: 0; right: 0 } .project-page3 { background-image: linear-gradient(55deg, var(--steel-gray-color), var(--iron-gray-color)); background-size: 600% 600%; animation: gradientMove 30s ease infinite } .project-page3 .portfolio-wrap { columns: 3; column-gap: 25px } @media(max-width: 992px) { .project-page3 .portfolio-wrap { columns: 2 } } @media(max-width: 576px) { .project-page3 .portfolio-wrap { columns: 1 } } @keyframes gradientMove { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } .cta-page3 { background: linear-gradient(120deg, var(--iron-gray-color), var(--steel-gray-color)); color: #fff } .footer-page3 { background: var(--steel-gray-color); color: #7c8aa0 } .footer-page3 .footer-title { color: #fff; margin-bottom: 25px; position: relative; padding-bottom: 15px } .footer-page3 .footer-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--orange-color) } .footer-page3 a { color: rgba(var(--light-color-rgb), 0.55) } .footer-page3 a:hover { color: var(--light-color) }