:root {
	--main-color: #08b1c4;
	--alt-color: #1a6f7c;
	--bg-color: #1d252f;
	--white-color: #fff;
    --dark-color: #101010;
	--word-total: 1;
    --char-total: 4;
    --listStyleCounterType: decimal-leading-zero;
    --border-light-color: #ffffff0d;
    --card-height: 70vh;
    --card-margin: 4vw; 
    --card-top-offset: 1em; 
    --card-outline-width: 0px;
}

                                                /*critical*/
                                                body {overflow-x: clip; font-family: "Noto Sans", sans-serif; font-size: 1.1rem; background-color: var(--bg-color); color: var(--white-color); position: relative; background-image: url(../img/noise.png);
                                                	background-position: 0 0; background-size: auto; height: 100%; width: 100%; animation: fadeInAnimation ease 3s; animation-iteration-count: 1; animation-fill-mode: forwards; min-height: 100vh;}
                                                
                                                
                                                header {position: fixed; top: 0; left: 0; width: 100%; z-index: 99998; padding: 30px 0; color: #fff; -webkit-transition: all .7s; transition: all .7s; transition-delay: 1s;}
                                                header .row img {max-width: 220px;}
                                                header .logo, .loader-wrapper .logo {width: 170px; height: 32px; margin-left: 12px; background-size: contain; background-repeat: no-repeat; background-position: left; z-index: 998; background-image: url(../img/logo-w.svg); 
                                                    transition: all .2s ease-out .2s;}
                                                header .hidden-logo {transition: all .2s ease-out .5s;}
                                                header.topnav .container-fluid {padding: 0 32px;}
                                                header.topnav .menu-icon {cursor: pointer; position: relative; z-index: 998;}
                                                header.topnav .menu-icon:after {content: "zatvori"; width: max-content; min-width: 70px; position: absolute; 
                                                	line-height: 20px; top: calc(50% - 10px); left: 44px; opacity: 0; -webkit-transition: all .4s; transition: all .4s; -webkit-transition-delay: .4s; transition-delay: .4s;}
                                                header.topnav.open .word, header.topnav.open .menu-icon .char, header.topnav.open .menu-icon:hover .char {opacity: 0;}
                                                header.topnav.open .menu-icon:after {opacity: 1;}
                                                header.topnav .word, header.topnav .menu-icon .char, header.topnav .menu-icon:hover .char {-webkit-transition-delay: .4s; transition-delay: .4s;}
                                                header.topnav .menu-icon .char {margin-left: 1px;}
                                                header.disable-header {z-index: 99997;}
                                                header:before {content: ''; background: url(../img/noise_header.png), linear-gradient(180deg, var(--bg-color), 60%, transparent); position: absolute; width: 100%; height: 100%; display: block; 
                                                    top: 0; z-index: 998; background-repeat: repeat; transition: all .5s ease 0s; opacity: 0;}
                                                header.nav-scroll:before {opacity: 1; transition: all .5s ease 0s;}
                                                
                                                
                                                
                                                .menu-btn {width: 20px; height: 20px; transition-duration: 0.3s; position: relative;} 
                                                .menu-btn .icon {transition-duration: 0.3s; position: absolute; height: 3px; width: 17px; top: 11px; background-color: var(--main-color);} 
                                                .menu-btn .icon:before {transition-duration: 0.3s; position: absolute; width: 20px; height: 3px; background-color: #fff; content: ""; top: -7px; left: 0;} 
                                                .menu-btn .icon:after {transition-duration: 0.3s; position: absolute; width: 20px; height: 3px; background-color: #fff; content: ""; top: 7px; left: 0;} 
                                                .menu-icon:hover .icon {width: 20px}
                                                .menu-icon:hover .icon:before {left: 3px}
                                                .menu-icon:hover .icon:after {left: -3px;}
                                                
                                                .menu-icon.open .icon {transition-duration: 0.5s; transform: rotateZ(180deg);} 
                                                .menu-icon.open .icon:before {transform: rotateZ(38deg) scaleX(0.75) translate(5px, 1px);} 
                                                .menu-icon.open .icon:after {transform: rotateZ(-38deg) scaleX(0.75) translate(5px, -1px);} 
                                                .menu-icon:hover {cursor: pointer;}
                                                .menu-icon.open:hover .icon:before {left: 0;}
                                                .menu-icon.open:hover .icon:after {left: 0;}
                                                
                                                
                                                
                                                .intro {height: 100vh; padding-top: 100px;}
                                                .intro h1 {font-size: 42px;}
                                                .intro h1 .span-last {white-space: nowrap; display: block; bottom: -6px; position: relative;}
                                                .intro .section-subtitle {color: #ffffffa0;}
                                                
                                                /*.intro .img-wrap {position: absolute; right: 0; left: 0; top: 0; -webkit-mask-image: url(/img/shape/shape19.svg); mask-image: url(/img/shape/shape19.svg); -webkit-mask-position: center center; mask-position: center; 
                                                    -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; text-align: center; z-index: 0; width: 100%; height: auto;}*/
                                                .intro .img-wrap img {width: auto; opacity: .2; filter: grayscale(1); box-shadow: 0 0 150px #fff; pointer-events: none; height: 100vh; object-fit: cover; transition: .4s ease;}
                                                
                                                
                                                @media only screen and (min-width: 768px) {
                                                    header.topnav .container-fluid {padding: 0 50px;}
                                                    header .logo, .loader-wrapper .logo {width: 220px; height: 54px;}
                                                    
                                                    
                                                    canvas{display: block; vertical-align: bottom;} 
                                                    #particles-js{position:absolute; width: 100%; height: 100%; background-color: transparent; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; z-index: 1; will-change: transform;}
                                                    #particles-js2{position:absolute; z-index: 1; width: 100%; height: 100%; background-color: transparent; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; pointer-events: none; padding-bottom: 100px;}
                                                    #particles-background, #particles-foreground {left: -51%; top: -51%; width: 202%; height: 202%; transform: scale3d(.5,.5,1);}
                                                    #particles-background {background: #2c2d44; background-image: -moz-linear-gradient(45deg,#3f3251 2%,#002025 100%); background-image: -webkit-linear-gradient(45deg,#3f3251 2%,#002025 100%); 
                                                        background-image: linear-gradient(45deg,#3f3251 2%,#002025 100%);}
                                                        
                                                        #particles-js,
                                                        #particles-js2 {
                                                          opacity: 0;
                                                          pointer-events: none;
                                                          transition: opacity 0.5s ease;
                                                        }
                                                        
                                                        #particles-js.active,
                                                        #particles-js2.active {
                                                          opacity: 1;
                                                          pointer-events: auto;
                                                        }
                                                }

                                                @media only screen and (max-width: 991px) {
                                                    
                                                }

/*[data-scroll] {transition: opacity 1s;}
[data-scroll="in"] {opacity: 1;}
[data-scroll="out"] {opacity: 0;}*/

::-moz-selection {color: #fff; background-color: var(--main-color); -webkit-text-fill-color: initial; text-fill-color: initial;}
::selection {color: #fff; background-color: var(--main-color); -webkit-text-fill-color: initial; text-fill-color: initial;}
.noselect, img {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
a {text-decoration: none; background-color: transparent; color: inherit; transition: .2s;}
h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', sans-serif;}
h1 {font-weight: 800; letter-spacing: -.5px;}
h2.section-title, h1.section-title {font-size: 36px; font-weight: 700; margin-bottom: 24px;}
span.title-dot {color: var(--main-color); font-size: 42px;}
.section-subtitle {font-weight: 300; font-size: 19px; margin-bottom: 20px; color: #ffffff90!important;}
.section-title-desc {font-size: .5em; font-weight: 500;}
.overlay:before {content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0;}
code {color: var(--main-color);}

.portfolio .portfolio-items, .top-bubble-wrap, .animation-lr, .animation-lr-inst {will-change: transform;}
.portfolio-item, .breadcrumb {will-change: transform, opacity;}

.theme-color {color: var(--main-color);}
.theme-button {-webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; padding: 0; background: transparent; border-radius: 0; cursor: pointer; position: relative; display: inline-flex; align-items: center; 
    justify-content: center; border-radius: 8px; text-decoration: none; overflow: hidden; z-index: 1; text-align: center; transition: opacity .3s; transition-delay: 0s; transition-timing-function: ease; height: 3.75rem;
    box-shadow: -3px 0 10px -5px #000; box-shadow: rgb(0 0 0 / 14%) 0px 0px 20px, rgb(0 0 0 / 10%) 0px 2px 6px;}
.theme-button-text {position: relative; z-index: 1; display: flex!important; flex-direction: row; align-items: center; justify-content: center;  padding: 0 2.25rem; width: 100%; height: 100%;
    font-weight: 400; line-height: 140%; transition: color .5s; transition-delay: 0s; transition-timing-function: ease; font-size: 1rem; color: var(--white-color); border: 0;}
.theme-button-text:before, .theme-button-text:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; transition: transform .5s,background-color .5s,border-color .5s; transition-delay: 0s; transition-timing-function: ease;}
.theme-button-text:before {background-color: var(--main-color); z-index: -2;}
.theme-button-text:after {transform: translateY(105%); background-color: var(--white-color); z-index: -1; border-radius: 8px; border-radius: 100% 100% 0 0/100% 100% 0 0; transition: all 0.3s cubic-bezier(1, 0, 0.55, 1);}
.theme-button:hover .theme-button-text {color: var(--main-color);}
.theme-button:hover .theme-button-text:before {transform: scale(.99);}
.theme-button:hover .theme-button-text:after {transform: translateY(0); border-radius: 8px;}

.theme-button-alt.slide-vertical .char:before {color: #fff;}
.theme-button-alt.slide-vertical .char:after {color: var(--alt-color);}
.theme-button-alt .theme-button-text:before {background-color: #fff;}
.theme-button-alt .theme-button-text:after {background-color: var(--alt-color);}

.theme-button-dark {background-image: linear-gradient(135deg, #1D242E, #282B38);}
.theme-button-dark .theme-button-text:before {background-color: transparent; background-image: linear-gradient(135deg, rgba(214, 163, 228, 0), rgba(214, 163, 228, .07));}

.theme-list li {position: relative; display: flex; align-items: center; justify-content: flex-start; padding-left: 30px;}
.theme-list li:before {content: ''; position: absolute; top: calc(50%); left: 0; transform: translateY(-50%); display: inline-block; width: 20px; height: 8px; background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 108.8 41.4' enable-background='new 0 0 108.8 41.4' xml:space='preserve'%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='-38.7585' y1='606.153' x2='61.9653' y2='606.153' gradientTransform='matrix(1.0806 1.023165e-004 -1.217313e-004 1.2806 41.9565 -755.5405)'%3E%3Cstop offset='0.1' style='stop-color:%235FCAE6'/%3E%3Cstop offset='0.1704' style='stop-color:%2342C4DC'/%3E%3Cstop offset='0.2826' style='stop-color:%231BB8CE'/%3E%3Cstop offset='0.4067' style='stop-color:%2307A6BA'/%3E%3Cstop offset='0.547' style='stop-color:%231499AC'/%3E%3Cstop offset='0.7171' style='stop-color:%230992A5'/%3E%3Cstop offset='1' style='stop-color:%230F90A1'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23SVGID_1_)' d='M0,14.8C0,5.2,15,0,31.7,0c13,0,77.1,0,77.1,0s-0.3,29.1-32.2,29.1c-12.7,0-31.1,0-45.2,0 c-14,0-31,3.4-31.4,12.3C0,41.5-0.1,21.1,0,14.8z'/%3E%3C/svg%3E%0A");
					background-size: 20px auto; background-repeat: no-repeat;}



/*.floating-image {animation: floating 5s infinite 2.5s; position: relative; z-index: 1;}
.floating-image img {animation: 1s ease 0s 1 normal forwards running faded-in;}
*/
.side-contact-button {cursor: pointer;}

.sidemenu, .sidecontact {position:fixed; top: 0; left: -100%; width: 80%; height: 100%; min-height: 100vh; padding: 0; z-index: 99998; -webkit-transition:all 0.5s cubic-bezier(1,0,.55,1); transition:all 0.5s cubic-bezier(1,0,.55,1);
                        background-color: #167d8d; color: #fff; background-image: url(../img/noise.png); background-position: 0 0; background-size: auto;}
.side-content {padding: 90px 20px 20px; position: relative; height: 100%; overflow-y: auto; overflow-x: hidden;}
.side-content .form-title {font-size: 44px; margin-bottom: .5rem;}
.sidemenu .menu-links {color:#fff;margin-top:0}
.sidemenu .menu-links .o-hidden {display:inline-block; position: relative;}
.sidemenu .menu-links .main-menu {position:relative; color: #fff; counter-reset: listStyle; padding: 0}
.sidemenu .menu-links .main-menu .sub-menu.sub-open{opacity:1!important;visibility:visible!important}
.sidemenu .menu-links .main-menu >li {list-style: none; font-size: 24px; font-weight: 600; padding: 8px 10px 8px 0; width: 100%; max-width: 100%; opacity:1; visibility:visible; -webkit-transition: all .5s; transition: all .5s}
.sidemenu .menu-links .main-menu> li span.nm {opacity:.8; font-size:11px; margin-right:10px;}
.sidemenu ul.main-menu > li .link> .nm:before {counter-increment: listStyle; content: counter(listStyle, var(--listStyleCounterType)) ".";}
.sidemenu .menu-links span, .sidemenu .menu-links .sub-link, .btn-curve span, .popup-video .vid-btn .icon, .splitting span, .about .items .more-stroke span, .content .img span, .quote-icon {display: inline-block;}
.sidemenu .menu-links .main-menu > li .link {display: inline-block; -webkit-transform:translateY(45px);transform:translateY(45px);-webkit-transition:all .7s;transition:all .7s;	cursor:pointer;}
.sidemenu .menu-links .main-menu > li .link i {font-size:15px;margin-left:5px}
.sidemenu.open .menu-links .main-menu > li .link {-webkit-transform:translateY(0); transform:translateY(0); -webkit-transition-delay:1s; transition-delay:1s;}
.sidemenu .menu-links .main-menu > li:hover .link {color: var(--main-color); -webkit-transition-delay: 0s !important; transition-delay: 0s !important;}
.sidemenu .menu-links .main-menu .sub-menu {position:absolute;top:0;left:0;opacity:0;visibility:hidden;-webkit-transition-delay:.2s;transition-delay:.2s}
.sidemenu .menu-links .main-menu .sub-menu.sub-open>ul>li>div>.sub-link {-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition-delay:1s;transition-delay:1s}
.sidemenu .menu-links .main-menu .sub-menu li {color:#eee;font-size:20px;font-weight:400;letter-spacing:1px;padding:8px 10px;width:100%;max-width:100%}
.sidemenu .menu-links .main-menu .sub-menu li:hover {color:#fff}
.sidemenu .menu-links .main-menu .sub-menu>ul>li>div>.sub-link {-webkit-transform:translateY(45px);transform:translateY(45px);-webkit-transition:all .7s;transition:all .7s}
.sidemenu .menu-links .main-menu .sub-menu li .sub-link.back {color:#fff;font-size:20px;font-weight:600;cursor:pointer}
.sidemenu .menu-links .main-menu .sub-menu li .sub-link.back i {margin-left:10px}
.sidemenu .menu-links .main-menu .sub-menu li .sub-link em {font-size:13px;font-weight:300;margin-left:10px}
.sidemenu .contact-info:after {content:''; width:1px; height:0; background:#ffffff7a; position:absolute; left:-40px; top:-170px; -webkit-transition:all .7s; transition:all .7s}
.sidemenu .contact-info .item {font-size: 16px; -webkit-transform:translateY(-30px); transform:translateY(-30px); opacity:0; -webkit-transition:all .7s; transition:all .7s}
.sidemenu .contact-info .item:last-of-type {margin-bottom:0}
.sidemenu.open .contact-info:after {height:100vh; -webkit-transition-delay:1s; transition-delay:1s}
.sidemenu.open .contact-info .item {-webkit-transform:translateY(0); transform:translateY(0); opacity:1; -webkit-transition-delay:1s; transition-delay:1s;}
.sidemenu.open .contact-info .item li:first-child {border-bottom: 1px solid #85b7bf;}
.sidemenu .contact-info .instagram-icon svg {fill: #ffffff; width: 30px; height: 30px;}
.sidemenu .contact-info a:hover {color: var(--main-color);}
.sidemenu .contact-info-bottom:after {display: none;}

body:has(.sidemenu.open) .sidemenu-rest, body:has(.sidecontact.open) .side-contact-rest {width: 30%; z-index: 998; position: absolute; right: 0; top: 0; height: 100vh; overflow: hidden;}
body:has(.sidemenu.open) header {z-index: 99999; transition-delay: 0s;}
body:has(.sidecontact.open) .sidemenu-rest {width: 20%!important;}

.main-content {background-color: var(--bg-color); color: var(--white-color); position: relative; background-image: url(../img/noise.png); background-position: 0 0; background-size: auto; z-index: 1; box-shadow: 0 10px 30px #00000030;}
.move-right {transform: translateX(0%); -webkit-transition: all 0.5s cubic-bezier(1,0,.55,1) .7s; transition: all 0.5s cubic-bezier(1,0,.55,1) .7s; transition-delay: .7s;}	
.move-right.active {transform: translateX(50%); -webkit-transition: all 0.5s cubic-bezier(1,0,.55,1) .4s;
    transition: all 0.5s cubic-bezier(1,0,.55,1) .4s; transition-delay: .4s; opacity: .3; overflow: hidden;  pointer-events: none;}
    
/*.sidemenu.open ~ .move-right, .sidecontact.open ~ .move-right {transform: translateX(50%); -webkit-transition: all 0.5s cubic-bezier(1,0,.55,1) .4s;
    transition: all 0.5s cubic-bezier(1,0,.55,1) .4s; transition-delay: .4s; opacity: .3; overflow: hidden;
    pointer-events: none;}*/
/*body:has(.sidemenu.open), body:has(.sidecontact.open) {overflow: hidden;}*/
body:has(.sidemenu.open) .cursor {background: var(--main-color);}


.sidemenu:before, .sidecontact:before {position: absolute; content: ''; left: 92%; top: calc(50% - 70%); height: 150%;
    width: 0; border-radius: 200%; background-color: #167d8d; background-image: url(../img/noise.png); z-index: -1;}
.sidemenu.open:before, .sidecontact.open:before {animation: sidebarFromLeft .7s cubic-bezier(0.3, 0, 0.7, 1) .4s;}
.sidecontact.open .contact-form, .sidecontact.open .contact-form-bottom, .sidecontact.open .close-button {animation: sidebarFromLeft2 .7s cubic-bezier(0.3, 0, 0.7, 1) .4s;}
.sidecontact.open .sidecontact-logo {animation: sidebarFromLeftLogo 0.9s cubic-bezier(0.3, 0, 0.7, 1) .4s;}

.sidecontact {width: 90%; background-color: #346067;}
body:has(.sidecontact.open) .side-contact-rest {width: 20%; z-index: 999;}
.sidecontact:before {background-color: #346067;}

.close-button {position: absolute; top: 120px; right: -16px; z-index: 999999; cursor: pointer; text-align: right;}
.close-button svg {width: 30px; height: 30px;}

.sidecontact-logo {width: 208px; max-height: 46px; position: absolute; top: 30px; transform-origin:left center;}
.sidecontact .contact-intro:after, .sidecontact .contact-form:after {content: ''; height: 1px; width: calc(100% + 60px); left: -30px; position: absolute; bottom: 0; background: #ffffff3b;}
.sidecontact .lead p {font-size: 18px; margin-bottom: 10px;}
.sidecontact .lead .required {font-size: 14px;}
.sidecontact .lead p > a:hover {color: var(--main-color);}
.sidecontact input.form-control, .sidecontact textarea.form-control {background-color: transparent; font-size: 30px; border: 0; padding: 0px 10px; color: var(--dark-color); font-family: 'Montserrat'; letter-spacing: -1.5px;}
.sidecontact .form-group:after {content: ''; width: 100%; height: 20px; border: 1px solid #fff; display: block; position: absolute; border-top: 0; border-radius: 0 0 8px 8px; bottom: 0;}
.sidecontact .contact-form h3, .sidecontact .contact-form-bottom h3, .sidecontact input.form-control, .sidecontact textarea.form-control {font-size: 20px;}


.sidecontact .form-group {position: relative;}
.sidecontact .label-wrap {position: absolute; width: 100%; transition: all .15s ease-out; pointer-events: none; bottom: 10px; left: 10px; text-transform: uppercase;}
.sidecontact .label-wrap label {font-size: 14px;}

.sidecontact .label-wrap label > span {font-size: 15px; text-transform: none; color: #ffffffb0; font-weight: 300;}
.sidecontact .form-group:focus-within .label-wrap, .sidecontact .form-group.has-value .label-wrap {-webkit-transform: translateY(calc(-150% - 0px)); transform: translateY(calc(-150% - 0px)); color: #ffffff80;}
/*.sidecontact .form-group:focus-within label, .sidecontact .form-group.has-value label {-webkit-transform: translateX(-100%); transform: translateX(-100%); color: #bbb; font-size: 14px;}*/
.sidecontact .form-group.has-value textarea + .label-wrap, .sidecontact .form-group:focus-within textarea + .label-wrap {bottom: 100%; transform: none;}
.sidecontact .form-group:focus-within label > span, .sidecontact .form-group.has-value label > span {opacity: .5;}
.sidecontact .form-group .required-label {position: absolute; font-size: 15px; margin-top: 4px; color: var(--main-color); top: 100%; left: 0;}

.form-control:focus {background-color: transparent; box-shadow: none;}

.sidecontact .textarea {display: block; width: 100%; overflow: hidden; resize: vertical; min-height: 45px; line-height: 1.2em;}

.text-box-item {z-index: 0; width: 100%; grid-column-gap: 1rem; grid-row-gap: 1rem; border-right: .0625rem solid #48424e; border-radius: 2rem; flex-direction: column; padding: 2rem 1.5rem 2rem 2rem; display: flex; position: relative; box-shadow: -3px 0 10px -5px #000;}
.text-box-item-content {z-index: 1; grid-column-gap: 1rem; grid-row-gap: 1rem; flex-direction: column; display: flex; position: relative;}
.text-box-item:before {content: ''; z-index: -1; width: 100%; height: 100%; opacity: 1; background-image: linear-gradient(135deg,rgba(214,163,228,0),rgba(214,163,228,.07)); border-radius: 2rem; position: absolute; top: 0%; bottom: 0%; left: 0%; right: 0%;}
.text-box-item .testimonials-name {font-size: 1.75rem; font-family: 'Montserrat', sans-serif; margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; color: #fff;}
.services-wide .text-box-item .text-box-item-heading h2 {font-size: 18px; font-weight: 400; margin-bottom: 0; line-height: 26px;}

.logo-back {opacity: .01; display: block; position: absolute; z-index: 1; top: 83%; pointer-events: none; max-width: 100vw; width: 100vw; height: auto;}

.max-width-small {max-width: 80%; margin: 0 auto;}
      
.cards {padding-bottom: calc(var(--numcards) * var(--card-top-offset)); margin-bottom: var(--card-margin);}
#card_1 {--index: 1;} #card_2 {--index: 2;} #card_3 {--index: 3;} #card_4 {--index: 4;} #card_5 {--index: 5;} #card_6 {--index: 6;} #card_7 {--index: 7;}

.sticky-card {/*position: sticky;*/ top: 40px; padding-top: calc((0 + var(--index)) * var(--card-top-offset)); height: var(--card-height); max-width: 100vw;}
.card-content {transform-origin: 50% 0%;}
.card-content:before {background-image: linear-gradient(135deg,rgb(26 111 123),rgba(214,163,228,.07));}
.cards {list-style: none; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(var(--numcards), var(--card-height)); gap: var(--card-margin);}
.card-content > div {grid-area: text; width: 90%; place-self: center; text-align: left; display: grid; gap: 1em; place-items: start; height: 100%;}
.card-content svg {position: absolute; fill: #FCFFF4; opacity: .3;}
@keyframes scale {to {transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index)))); opacity: .2;}}
@keyframes scale2 {to {transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index2)))); opacity: .2;}}
.cards {--numcards: 4; view-timeline-name: --cards-element-scrolls-in-body;}
.cards-qualification {--numcards2: 7; view-timeline-name: --cards-element-scrolls-in-body; padding-bottom: calc(var(--numcards) * var(--card-top-offset)); grid-template-rows: repeat(var(--numcards2), var(--card-height)); padding-top: calc((0 + var(--index)) * 10);}
/*.card-content {--start-range: calc(var(--index0) / var(--numcards) * 100%); --end-range: calc((var(--index)) / var(--numcards) * 100%); animation: linear scale forwards; animation-timeline: --cards-element-scrolls-in-body; animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range); justify-content: center;}
.card-content-qualification {--start-range: calc(var(--index0) / var(--numcards2) * 100%); --end-range: calc(var(--index) / var(--numcards2) * 100%); animation: linear scale2 forwards; animation-timeline: --cards-element-scrolls-in-body; 
        animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range); justify-content: center;}*/
.card-content p, .text300 {font-size: 18px; color: #ffffffa3; font-weight: 300;}

.theme-tooltip {border-bottom: 1px dashed #ffffff47; cursor: help;}


.services-wide {background: linear-gradient(180deg, transparent, #000000a6, transparent); overflow: hidden;}
.services-wide:before {content: ''; background-position: right center; background-repeat: no-repeat; background-size: 834px; position: absolute; right: -212px; bottom: 0;
    width: 100%; height: 100%; background-image: url(../img/bg/shine-back400.png);
    	background-image: image-set(
	    url(../img/bg/shine-back400.avif) type("image/avif"), 
	    url(../img/bg/shine-back400.png) type("image/png")
    ); opacity: .4;}
.services .services-intro p {font-size: 19px; margin-bottom: 32px;}
.services .service-card:hover .text-box-item {transform: scale(1.05);}
.services .service-card .text-box-item {transition: all .3s ease-out;}
.services .solution-img {width: 100px; height: auto; filter: invert(1) hue-rotate(186deg) brightness(1.2);}


.qualification {background-image: linear-gradient(0deg, var(--dark-color), 90%, transparent); padding-top: 100px; padding-bottom: 80vh;}
.qualification .card-content {justify-content: flex-start; padding: 24px 16px; border-right: none; min-height: 450px; height: auto;}
.qualification .card-content > div {display: flex; gap: initial;}
.qualification .card-content > .service-top-wrap {flex: 1 1 auto; width: 100%; height: auto; margin: 0; align-content: center;}
.qualification .card-content > .service-bottom-wrap {flex: 0 0 auto; width: 100%; height: auto; padding-top: 24px;}
.qualification .service-detail-disabled {opacity: .45; cursor: default; pointer-events: none;}
.qualification .service-top-content {align-self: center;}
.qualification .sticky-card {padding-left: 1rem; padding-right: 1rem; height: auto; will-change: transform, opacity;}
.qualification .service-card-count {position: absolute; top: 24px; right: 24px; z-index: 2; display: inline-flex; align-items: baseline; gap: 5px; color: rgba(255,255,255,.34); font-family: 'Montserrat', sans-serif; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 400; letter-spacing: .08em; line-height: 1; pointer-events: none;}
.qualification .service-card-count strong {color: rgba(255,255,255,.68); font-size: 14px; font-weight: 500;}
.qualification .service-card-count span {color: var(--main-color); opacity: .65;}
.qualification .card-content h3 {text-transform: uppercase; letter-spacing: -2px; font-size: 26px; word-spacing: 3px; margin-bottom: 32px; text-align: center;}
.qualification .card-content p {font-size: 18px; text-align: center; line-height: 1.45;}
.qualification .service-top-wrap .service-img-wrap img {border-top-right-radius: 20px; width: 100%; height: auto;}
.qualification #card_2 .service-top-wrap .service-img-wrap img {width: 100%; height: auto; object-fit: contain;}
.qualification .text-box-item:before {background-color: var(--bg-color); background-image: url(../img/noise.png);}
.qualification .service-top-wrap .service-img-wrap .monitor-img img {height: auto;}
.qualification .monitor-img:before {content: ''; background-image: url(../img/services/monitor-empty.png); background-image: image-set(
	    url(../img/services/monitor-empty.webp) type("image/webp"), 
	    url(../img/services/monitor-empty.png) type("image/png")
    ); position: absolute; right: 0; top: -20px; display: block; background-repeat: no-repeat; z-index: 1;}




.topnav .menu-icon:hover .word .char, .footer .splitting:hover .char {-webkit-animation: fadeInUp2 0.3s cubic-bezier(0.3, 0, 0.7, 1) both;
	 animation: fadeInUp2 0.3s cubic-bezier(0.3, 0, 0.7, 1) both;
	-webkit-animation-delay: calc(30ms * var(--char-index)); animation-delay: calc(30ms * var(--char-index));}
.fadeInRight2 {-webkit-animation-name: fadeInRight2; animation-name: fadeInRight2;}

.splitting.animated .char{-webkit-animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; -webkit-animation-delay: calc(30ms * var(--char-index)); 
	animation-delay: calc(30ms * var(--char-index));} 
.splitting.animated .word{-webkit-animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;	animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; -webkit-animation-delay: calc(30ms * var(--word-index)); 
    animation-delay: calc(30ms * var(--word-index));} 
.splitting .whitespace {width: 7px;} 

.splitting.txt.animated .char, .splitting.txt.animated .word{-webkit-animation: fadeIn2 0.3s cubic-bezier(0.3, 0, 0.7, 1) both; animation: fadeIn2 0.3s cubic-bezier(0.3, 0, 0.7, 1) both; 
    -webkit-animation-delay: calc(10ms * var(--char-index)); animation-delay: calc(10ms * var(--char-index));} 
.splitting.txt .whitespace {width: 5px;}


.section-padding {padding: 50px 0;}
/*.section-title .word {-webkit-animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; -webkit-animation-delay: calc(30ms * var(--word-index)); animation-delay: calc(30ms * var(--word-index));}*/


.reveal-top, .reveal-top-portfolio {position: relative; transition: 1s all cubic-bezier(0.22,0.61,0.36,1);}
.footer-reveal, .reveal-left {position: relative; transform: translateY(150px); opacity: 0; transition: 1s all ease;}
.reveal.active, .footer-reveal-active {transform: translateY(0); opacity: 1;}
.reveal-delay-1 {transition-delay: .1s;}
.reveal-delay-2 {transition-delay: .2s;}
.reveal-delay-3 {transition-delay: .3s;}
.reveal-delay-4 {transition-delay: .4s;}
.reveal-delay-5 {transition-delay: .5s;}
.reveal-delay-6 {transition-delay: .6s;}
.reveal-delay-7 {transition-delay: .7s;}
.reveal-delay-8 {transition-delay: .8s;}
.reveal-delay-9 {transition-delay: .9s;}
.reveal-delay-10 {transition-delay: 1s;}

.z-dot {position: relative;}
.z-dot span {color: #fff!important;}
.reveal-dot-top:after {content: ''; background-color: transparent; width: 13px; height: 13px; display: inline-block; position: absolute; left: 2px; bottom: 13px;
    border-radius: 50%; background-image: linear-gradient(90deg, #01c6d9, #17737e);}
.reveal-dot {display: inline-block;}
.reveal-dot-top {transform: translateY(0); opacity: 1; transition: 1s all cubic-bezier(0.22,0.61,0.36,1) 2s;}

.text > .lighten {font-size: 26px; text-transform: uppercase; font-weight: 600; letter-spacing: -2.4px; word-spacing: 7px;}
.about-me .text > .lighten {font-size: 30px;}
.text-highlight-word {background: linear-gradient(to right, rgb(255 255 255) 50%, #7b7b7b26 50%); background-size: 200% 100%; background-position-x: 100%; color: transparent!important; background-clip: text; -webkit-background-clip: text;}
.text > .lighten .span-img, .location .span-img {width: 0.95em; height: 0.95em; background-image: url(../img/aboutMe.webp); background-position: 50%; background-size: cover; border-radius: 1vw; 
    display: inline-block; margin-right: 16px; z-index: 1; position: relative; cursor: pointer;}
.text > .lighten .span-img2 {background-image: url(../img/about/aboutMe2-thumb.webp);} 
.text > .lighten .span-img3 {background-image: url(../img/about/aboutMe3-thumb.webp);} 
.text > .lighten .span-img .about-hover-img, .location .span-img .about-hover-img {z-index: 2; position: relative;}
.text > .lighten .span-img img, .location .span-img img {position: absolute; opacity: 0; transition: opacity .18s ease, transform .28s cubic-bezier(.22,.61,.36,1), border-radius .28s ease; left: -175px; top: -175px; width: 400px; height: 400px; cursor: pointer; box-shadow: 0 0 150px #000; border-radius: 1vw; 
    filter: none; transform-style: preserve-3d; transform: scale(0) perspective(1000px);}
.text > .lighten .span-img:active img, .text > .lighten .span-img:active img:active, .location .span-img:active img {opacity: 1; transform: scale(.5);  border-radius: 50%;  pointer-events: auto;}
.text > .lighten .span-img:active img, .location .span-img:active {transition: none;}
.info-text .lighten {letter-spacing: -1.5px; word-spacing: 5px; font-weight: 500; text-transform: none;}
.text > .lighten, .info-text > .lighten {font-family: 'Montserrat', sans-serif; line-height: 1.2em;}


.about-me {background-image: url(../img/bg/about-me-back6.avif); background-position: top center; background-repeat: no-repeat; background-size: cover; padding: 50px 0 100px;}
.about-me.intro {height: auto;}
.about-me .img-wrap {top: 0; padding: 0; pointer-events: none;}
.about-me .img-wrap img {width: 100%;}
.about-me .about-text {text-align: center; letter-spacing: -.02em; font-size: 4.55em; font-weight: 600; line-height: 1; text-transform: uppercase;}
.about-me .senior-shadow {text-shadow: rgba(255, 255, 255, 0.51) 0px 0px 1px;}
.about-me .text img {width: 60px; height: 60px;}
.about-me .zzz {position: relative;}
.about-me .zzz:after {content: url('../img/crticaZ.svg'); position: absolute; top: 15px; left: 2px; width: 90%; height: 100%; display: inline-block; line-height: 0; visibility: visible; transition: 1s all cubic-bezier(0.22,0.61,0.36,1) 2s;}
.about-me .word > span[data-char="."] {color: var(--main-color);}
.about-me:after {content: ''; background-position: center; background-repeat: no-repeat; background-size: 768px; position: absolute; left: -273px; top: 39px; width: 768px; height: 768px; background-image: url(../img/bg/shine-back400.png);
	background-image: image-set(
	    url(../img/bg/shine-back400.avif) type("image/avif"), 
	    url(../img/bg/shine-back400.png) type("image/png")
    ); opacity: .2; pointer-events: none;}
.weather-wrap {width: auto!important; min-width: unset!important;}
.weather-wrap .ww-box {padding: 0!important;}
.weather-wrap .ww_current .ww_temp {color: #ffffffeb!important; text-shadow: rgba(255, 255, 255, 0.51) 0px 0px 1px!important; font-size: 29px!important; font-weight: 600!important; letter-spacing: -1px!important; font-family: 'Montserrat', sans-serif;}
.weather-wrap.reveal.active .ww_current .ww_temp {background-position: 0; transition: transform .3s, background-position 1s!important;}
.resize-sensor, .weather-wrap .ww_source, .weather-wrap .ww_cond, .ww_icon {display: none!important;}
.weather-inline {display: inline-block; width: 2.2em; height: 1em; vertical-align: -.08em; white-space: nowrap;}
.weather-inline svg {display: block; width: 100%; height: 100%; overflow: visible;}
.weather-inline text {fill: #ffffffeb; font-family: 'Montserrat', sans-serif; font-size: 50px; font-weight: 600; letter-spacing: -1px;}
.weather-data-source {position: fixed!important; left: -10000px!important; top: 0!important; width: 1px!important; height: 1px!important; overflow: hidden!important; opacity: 0!important; visibility: hidden!important; pointer-events: none!important;}


.location {padding-top: 200px; background: linear-gradient(360deg, #295b73, transparent);}
.location .scroll-image {width: 100px; height: 100px; border-radius: 1vh; display: block; position: relative; backdrop-filter: blur(22px);
				 mask-image: url(/img/shape/shape11.svg); -webkit-mask-image: url(/img/shape/shape11.svg); mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat;
				 mask-repeat: no-repeat;}
.location .scroll-image img, .location .scroll-image video {position: absolute; width: 100px; height: 100px; object-fit: cover; filter: grayscale(1) brightness(0.9); 
	transition: border-radius .05s ease, width .3s ease-in, height .3s ease-in; left: 0; bottom: 0; top: 0;}
.location-img-offset {padding-top: 200px;}

.video2 {width: 100%; height: 100%; object-fit: cover;}
.video-container2:after {content: ''; background-image: url("data:image/svg+xml,%3Csvg width='80px' height='80px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.4086 9.35258C23.5305 10.5065 23.5305 13.4935 21.4086 14.6474L8.59662 21.6145C6.53435 22.736 4 21.2763 4 18.9671L4 5.0329C4 2.72368 6.53435 1.26402 8.59661 2.38548L21.4086 9.35258Z' fill='%2308b1c4'/%3E%3C/svg%3E"); 
			position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: 50px; height: 50px; background-size: 40px; background-repeat: no-repeat; background-position: center; pointer-events: none;}
.video-container2:before {content: ''; background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' id='icon_sound' viewBox='144 46.4 700 699.6'%3E%3Cstyle%3E.st0%7Bfill:%2308b1c4%7D%3C/style%3E%3Cg id='Layer_10'%3E%3Cpath class='st0' d='M671.3 571c-5.2 0-10.3-1.5-14.5-4.5-11.2-8-13.9-23.6-5.8-34.9l.1-.1c28.1-39.6 43.1-87 43-135.5-.3-49.8-16.7-98.2-46.8-138-8.4-11-6.2-26.8 4.9-35.1 11-8.4 26.8-6.2 35.1 4.9 74.1 97.9 75.8 232.5 4.3 332.3-4.7 6.6-12.2 10.7-20.3 10.9z'/%3E%3Cpath class='st0' d='M769 646c-3.8 0-7.6-.8-11-2.5-12.3-6.1-17.4-20.9-11.5-33.3 65-135.4 65-293.1 0-428.5-6.8-12-2.6-27.3 9.4-34.1 12-6.8 27.3-2.6 34.1 9.4.6 1 1.1 2.1 1.5 3.2 33.9 71.9 51.8 150.3 52.5 229.8.8 83.6-17.6 166.3-53.8 241.8-3.9 8.2-12 13.7-21.2 14.2z'/%3E%3C/g%3E%3Cpath d='M608 48.7c-8.1-3.8-17.7-2.9-25 2.3L285.8 271H169c-13.8 0-25 11.2-25 25v225c0 13.8 11.2 25 25 25h117.5L583 741.8c4.1 2.7 8.8 4.2 13.7 4.3 4.2 0 8.3-1 12-3 8-4.4 13-12.8 13-22V71c0-9.4-5.3-18-13.7-22.3z' style='fill:%2308b1c4' id='Layer_13'/%3E%3C/svg%3E"); 
	background-repeat: no-repeat; background-position: center; background-size: contain; width: 30px; height: 30px; display: block; position: absolute; left: 5%; top: 30%; z-index: 9; pointer-events: none;
	transition: opacity .5s ease 0s, transform .7s ease 0s; opacity: 0; transform: scale(0); filter: drop-shadow(1px 1px 6px black);}
.video-container2:hover:before {opacity: 1; transform: scale(1); transition: opacity .5s ease 1s, transform .7s ease 1s;}
.align-items-end .video-container2:before {right: 5%; left: auto;}
.align-items-end .video-container2:hover:before {transform: scale(-1);}

.location .scroll-image:hover  {mask-image: none; z-index: 2;}
.location .scroll-image:hover img, .location .scroll-image img:hover, .location .scroll-image:hover video, .location .scroll-image video:hover {width: 360px; height: 360px; z-index: 2; cursor: pointer; border-radius: 50% 50% 40% 35%; 
		transition: border-radius .05s ease, width .2s ease-in, height .2s ease-in; box-shadow: rgb(0 0 0 / 23%) 0px -11px 28px, rgb(0 0 0 / 21%) 0px 10px 10px; filter: none; top: 50%; transform: translateY(-50%);
		overflow: hidden;}
.location .align-items-end .scroll-image:hover img, .location .align-items-end .scroll-image:hover video {right: 0; left: auto;}
.location .scroll-image.video-container2:hover:after {opacity: 0;}
.location .scroll-image.video-container2:hover video {overflow: hidden;}

.clear-css {transform: none!important;}

.city img {width: 16.6%; height: auto;}



.accordion-item {background-color: transparent; color: #fff; border: none; margin-top: -1px; /*border-top: 1px solid var(--border-light-color); border-bottom: 1px solid var(--border-light-color);*/ border-radius: 0;}
.accordion-button {font-size: 19px; font-weight: 500; font-family: 'Montserrat', sans-serif; padding: 1.5rem 50px 1.5rem 0; display: inline-block;}
.accordion-button, .accordion-button:not(.collapsed) {background-color: transparent; color: #fff; box-shadow: none;}
.accordion-button:focus {box-shadow: none;}
.accordion-item:after {content: ""; position: absolute; top: 0; left: 50%; width: 100%; height: 100%; transform: translate(-50%); 
    border-top: 1px solid var(--border-light-color); border-bottom: none; transition: width .1s, background-color .2s ease-in .1s; transition-timing-function: ease;
     pointer-events: none; z-index: -1;}
.accordion-item:last-of-type:after {border-bottom: 1px solid var(--border-light-color);}
.accordion-item.active:after {border-top: 1px solid var(--border-light-color); border-bottom: 1px solid var(--border-light-color); background-color: #00000029; width: 100vw;}
.accordion-item.active {border: none;}
.accordion-body {padding: 0 0 2rem;}
.accordion-item-no-border:after {border-bottom: none;}

.accordion-button:after {display: none;}
.accordion-mark {position: absolute; right: 0; top: 50%; transform: translateY(-50%); flex-shrink: 0; cursor: pointer; width: 2.5rem; height: 2.5rem; border: 1px solid var(--border-light-color);
    border-radius: 50%; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: center; pointer-events: none;}
.accordion-mark:before, .accordion-mark:after {content: ''; position: absolute; width: 8px;
    height: 1px; background-color: #fff; transition: transform .5s, background-color .3s;}
.accordion-mark:after {transform: rotate(90deg);}
.accordion-item.active .accordion-mark:before, .accordion-item.active .accordion-mark:after {transform: rotate(180deg); transform: rotate(180deg);}
.accordion-item .faq-qm {display: inline-block; transition: all .35s ease-in .4s; margin-left: 4px;}


.accordion-item .accordion-body {height: auto;}
.accordion-item .accordion-body .accordion-content {font-size: 15px; transition: all .5s cubic-bezier(0.26,0.69,0.37,0.96); font-weight: 300; color: var(--main-color);}
.accordion-item.active .accordion-body .accordion-content {transform: translateY(0); opacity: 1;}

.accordion-item .underlined.highlight-animation:before {animation-delay: 0s;}
.accordion-content a {cursor: pointer;}


.blog {background-image: linear-gradient(0deg, #101010, 80%, var(--bg-color));}
.blog:before {background-image: url(../img/noise.png);}
.blog div a {border-bottom: 1px solid;}
.blog div a:hover {border-bottom-color: transparent;}
.blog lord-icon {width: 100px; height: 100px;}

.breadcrumb {transform-origin: center;}
.breadcrumb ul {color: #657281; font-family: 'Montserrat', sans-serif; gap: 20px;}
.breadcrumb ul li {font-size: 15px; position: relative; text-transform: lowercase; white-space: nowrap;}
.breadcrumb ul li:before {content: ""; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); border-radius: 50%; height: 5px; width: 5px; background: #e4e4e430; transition: .2s ease-out .2s;}
.breadcrumb ul li:last-child:before {display: none;}
.breadcrumb ul li a:hover {color: #fff;}



.footer {position: fixed; height: 100vh; font-size: 20px; width: 100%; bottom: 0; left: 0; padding-top: 40px; background-image: linear-gradient(180deg, var(--dark-color), transparent); font-size: 1rem; z-index: -1;}
.footer:before {content: ''; background-position: right center; background-repeat: no-repeat; background-size: 768px; position: absolute; right: -243px; top: 0; width: 200%; height: 200%; 
	background-image: url(../img/bg/shine-back400.png);
		background-image: image-set(
	    url(../img/bg/shine-back400.avif) type("image/avif"), 
	    url(../img/bg/shine-back400.png) type("image/png")
    ); opacity: .4; z-index: 2; pointer-events: none;}

.footer-spacer {height: 100vh; position: relative; pointer-events: none;}
.footer .footer-about {font-size: 20px; font-family: 'Montserrat', sans-serif;}
.footer .footer-about p {font-weight: 200; color: #fff8; letter-spacing: -.3px;}
.footer .footer-about a {transition: .25s ease-out;}
.footer .footer-about a:hover {color: var(--main-color);}
.footer .footer-about-link:before {height: 1px; top: 100%; background-color: #ffffff30; transition: transform .35s ease-out;}
.footer .footer-about-link:hover:before {transform: scale(0);}
.footer-wrap {background-color: var(--main-color); flex-direction: column; justify-content: space-between; padding-top: 4em; display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    background-image: url(../img/noise.png), linear-gradient(180deg, var(--dark-color), #00000030); height: 100vh;}
.footer .footer-links li .cursor-link {text-transform: uppercase; padding: 7px 0; display: inline-flex; transition: .25s ease-out; font-size: 17px;}
.footer .footer-links li:hover a {color: var(--main-color);}
.footer .footer-links li:first-child a {padding-top: 0;}
.footer .footer-grid {grid-template-columns: 1fr; grid-template-rows: auto; grid-column-gap: 1em; grid-row-gap: 0; align-content: start; align-items: start; grid-auto-columns: 1fr;}
.footer .footer-grid p {color: #fff8; font-size: 18px;}
.footer .footer-contact {border-top: 2px solid #fff4; border-bottom: 2px solid #fff4; padding: 5% 0;}
.footer .footer-contact h3 {font-size: 26px; font-weight: 700; letter-spacing: -1px; text-shadow: 0px 8px 8px hsla(189, 100%,calc(28% - 10%),calc(100% - 10%));}
.footer .footer-rating svg {max-height: 17px; width: 150px; fill: var(--main-color);}
.footer-bottom {font-size: 1rem; color: #fff8;}
.footer-bottom a:hover {color: #fff;}
                                         
.icon-scroll-line {width: 1px; position: fixed; will-change: transform; bottom: 0; right: 15px; z-index: 9999; pointer-events: none; height: 11rem;}
.icon-scroll-line:before {bottom: 0; background: rgba(255, 255, 255, 0.15); z-index: 15;}
.icon-scroll-line:after, .icon-scroll-line:before {width: 1px; content: ""; position: absolute; overflow: hidden; top: 0; left: 0; pointer-events: none; -webkit-transition: background ease .4s; -moz-transition: background ease .4s; -ms-transition: background ease .4s; -o-transition: background ease .4s; transition: background ease .4s;}
.icon-scroll-line:after {background: #eee; height: 2.4rem; z-index: 16; -webkit-animation: iconscroll 2s ease-in-out infinite; -ms-animation: iconscroll 2s ease-in-out infinite; animation: iconscroll 2s ease-in-out infinite;}


body:before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
@media only screen and (min-width: 1050px) {
  body:before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
 }
}

.top-bubble-wrap {width: 100%; max-height: 100%; max-width: 100%; color: rgba(0, 0, 0, 0); position: absolute; bottom: auto; left: 0%; right: 0%; overflow: hidden; padding-top: 30px; 
    transform-style: preserve-3d; pointer-events: none;}
.top-bubble {width: 500vw; height: 500vw; margin-left: -200vw; background-image: linear-gradient(180deg, #0d1115, transparent); border-radius: 50%; mix-blend-mode: darken;
    transform-style: preserve-3d;}

.service-redesign-monitor {position: relative; max-width: 500px; margin: 0 auto 52px; padding: 10px 10px 24px; border: 1px solid rgba(255,255,255,.24); border-radius: 16px; background: linear-gradient(145deg,#222b33,#080b0e 72%); box-shadow: 0 24px 50px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.04); user-select: none;}
.service-redesign-monitor:before {content: ''; position: absolute; z-index: -1; left: 50%; bottom: -31px; width: 18%; height: 32px; transform: translateX(-50%); background: linear-gradient(90deg,#10161b,#38434d 50%,#0b0f13); clip-path: polygon(18% 0,82% 0,100% 100%,0 100%);}
.service-redesign-monitor:after {content: ''; position: absolute; z-index: -1; left: 50%; bottom: -39px; width: 42%; height: 9px; transform: translateX(-50%); border-radius: 50% 50% 3px 3px; background: linear-gradient(90deg,#090c0f,#45515b 50%,#090c0f); box-shadow: 0 8px 18px rgba(0,0,0,.45);}
.service-redesign-screen {position: relative; width: 100%; aspect-ratio: 1007/569; overflow: hidden; border-radius: 8px; background: #11171c; touch-action: pan-y; cursor: grab;}
.service-redesign-screen:after {content: ''; position: absolute; z-index: 3; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12),inset 0 0 28px rgba(0,0,0,.2);}
.service-redesign-image {position: absolute; inset: 0; width: 100%!important; max-width: none!important; height: 100%!important; border-radius: 0!important; object-fit: cover; object-position: top center;}
.service-redesign-before {position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--compare-position)) 0 0); background: #151a1f;}
.service-redesign-divider {position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--compare-position); width: 2px; transform: translateX(-1px); background: var(--main-color); box-shadow: 0 0 18px var(--main-color); pointer-events: none;}
.service-redesign-divider i {position: absolute; top: 50%; left: 50%; width: 42px; aspect-ratio: 1; transform: translate(-50%,-50%); border: 2px solid var(--main-color); border-radius: 50%; background: rgba(13,17,21,.94); box-shadow: 0 8px 22px rgba(0,0,0,.36);}
.service-redesign-divider i:before,.service-redesign-divider i:after {content: ''; position: absolute; top: 50%; width: 8px; height: 8px; border-top: 1px solid #fff; border-left: 1px solid #fff;}
.service-redesign-divider i:before {left: 8px; transform: translateY(-50%) rotate(-45deg);}
.service-redesign-divider i:after {right: 8px; transform: translateY(-50%) rotate(135deg);}
.service-redesign-label {position: absolute; z-index: 4; top: 12px; padding: 6px 9px; border-radius: 99px; background: rgba(8,11,14,.8); color: #fff; font-size: 9px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; pointer-events: none;}
.service-redesign-label-before {left: 12px;}
.service-redesign-label-after {right: 12px; color: var(--main-color);}
.service-redesign-range {position: absolute; z-index: 6; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: grab;}
.service-redesign-range:active,.service-redesign-screen.is-grabbing {cursor: grabbing;}

.wrapper-tooltip {--icon-color: #414856; --shape-color-01: #b8cbee; --shape-color-02: #7691e8; --shape-color-03: #f6946e; --width: 60px; --height: 60px; --border-radius: var(--height); position: relative; border-radius: var(--border-radius); display: flex; justify-content: center; align-items: center; z-index: 3;}
.wrapper-tooltip .btn {background: var(--main-color); width: var(--width); height: var(--height); position: relative; z-index: 3; border-radius: var(--border-radius); 
	box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); display: flex; justify-content: center; align-items: center; animation: plus-animation-reverse 0.5s ease-out forwards;}
.wrapper-tooltip .btn::before, .wrapper-tooltip .btn::after {content: ""; display: block; position: absolute; border-radius: 4px; background: #fff;}
.wrapper-tooltip .btn::before {width: 4px; height: 28px;}
.wrapper-tooltip .btn::after {width: 28px; height: 4px;}
.wrapper-tooltip .tooltip {height: 75px; border-radius: 70px; position: absolute; background: #fff; z-index: 2; padding: 0 15px; box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
 	opacity: 0; top: 0; display: flex; justify-content: space-around; align-items: center; transition: opacity 0.15s ease-in, top 0.15s ease-in, width 0.15s ease-in;}
.wrapper-tooltip .tooltip > svg {width: 100%; height: 26px; display: flex; justify-content: space-around; align-items: center; cursor: pointer;}
.wrapper-tooltip .tooltip > svg .icon {fill: none; stroke: var(--icon-color); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; opacity: 0.4; transition: opacity 0.3s ease;}
.wrapper-tooltip .tooltip > svg:hover .icon {opacity: 1;}
.wrapper-tooltip .tooltip::after {content: ""; width: 20px; height: 20px; background: #fff; border-radius: 3px; position: absolute; left: 50%; margin-left: -10px; bottom: -8px; transform: rotate(45deg); z-index: 0;}
.wrapper-tooltip > svg {width: 300px; height: 300px; position: absolute; z-index: 1; transform: scale(0);}
.wrapper-tooltip > svg .shape {fill: none; stroke: none; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 20%;}
.wrapper-tooltip input {height: 100%; width: 100%; border-radius: var(--border-radius); cursor: pointer; position: absolute; z-index: 5; opacity: 0;}
.wrapper-tooltip input:checked ~ svg {animation: pang-animation 1.2s ease-out forwards;} .wrapper-tooltip input:checked ~ svg .shape:nth-of-type(1) {transform: translate(23px, 30%) rotate(40deg);}
.wrapper-tooltip input:checked ~ svg .shape:nth-of-type(2) {transform: translate(-7px, 30%) rotate(80deg);}
.wrapper-tooltip input:checked ~ svg .shape:nth-of-type(3) {transform: translate(13px, 30%) rotate(120deg);}
.wrapper-tooltip input:checked ~ svg .shape:nth-of-type(4) {transform: translate(-14px, 30%) rotate(160deg);}
.wrapper-tooltip input:checked ~ svg .shape:nth-of-type(5) {transform: translate(24px, 30%) rotate(200deg);}
.wrapper-tooltip input:checked ~ svg .shape:nth-of-type(6) {transform: translate(-2px, 30%) rotate(240deg);}
.wrapper-tooltip input:checked ~ svg .shape:nth-of-type(7) {transform: translate(21px, 30%) rotate(280deg);}
.wrapper-tooltip input:checked ~ svg .shape:nth-of-type(8) {transform: translate(18px, 30%) rotate(320deg);}
.wrapper-tooltip input:checked ~ svg .shape:nth-of-type(9) {transform: translate(19px, 30%) rotate(360deg);}
.wrapper-tooltip input:checked ~ .btn {animation: plus-animation 0.5s ease-out forwards;}
.wrapper-tooltip input ~ .tooltip {pointer-events: none;}
.wrapper-tooltip input:checked ~ .tooltip {width: auto; height: 70px; animation: stretch-animation 1s ease-out forwards 0.15s; top: -90px; opacity: 1; pointer-events: auto;}
.wrapper-tooltip .tooltip a {z-index: 1; padding: 8px;}
.wrapper-tooltip .tooltip a img {display: block; width: 60px; height: 60px; object-fit: contain;}
.wrapper-tooltip .tooltip a:nth-child(2) img {width: 50px; height: 50px;}
[aria-label][data-cooltipz-dir]:after {border-radius: 8px; background: var(--main-color); font-size: 16px; color: #fff;}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:before {border-top-color: var(--main-color);}



.helper-widget-wrap {position: fixed; z-index: 1000; left: 0px; bottom: 40px; pointer-events: none;}  
.bata {animation-duration: 1200ms; animation-fill-mode: both; backface-visibility: hidden; transform: translateX(-150%) rotate(0); opacity: 0; transition: all 1.2s ease;}

.bata img {display: block; top: 0px; left: 0px; height: 140px; width: auto; pointer-events: none; position: relative; z-index: 2; transition: opacity 350ms ease 350ms;}
.helper-widget-chat-box {width: 305px; top: 100px; left: 100px; position: absolute; padding: 20px 30px; opacity: 0; transition: 0.5s ease-in-out 0s; color: var(--main-color); pointer-events: none;}
.helper-widget-chat-box .button {color: var(--main-color); cursor: pointer; text-decoration: none; display: flex; align-items: baseline;}
.helper-widget-chat-box .button:hover {color: var(--white-color);}
.helper-widget-icon {position: absolute; top: -14px; left: -63px;}
.helper-widget-chat-box p {color: var(--white-color);}

.helper-active .bata {transform: translateX(-50%) rotate(40deg); opacity: 1;}
.chat-box-active {opacity: 1; transition: 1s ease-in-out 0.7s; pointer-events: auto;}
.helper-widget-chat-box:before {background-image: linear-gradient(135deg,rgb(20 17 20 / 80%),rgb(28 27 28 / 95%));}




@media only screen and (min-width: 500px) {
    .location .scroll-image:hover img, .location .scroll-image img:hover, .location .scroll-image:hover video, .location .scroll-image video:hover {width: 460px; height: 460px;}
}


@media only screen and (min-width: 768px) {
    
    
   html {scroll-behavior: auto!important; overscroll-behavior: auto!important; touch-action: auto!important; -webkit-scroll-behavior: auto!important;
        -webkit-overscroll-behavior: auto!important; -webkit-touch-action: auto!important; -webkit-overflow-scrolling: auto!important; -webkit-backface-visibility: auto!important; 
        scrollbar-face-color: var(--main-color); /* Firefox 63 compatibility */ scrollbar-track-color: #83545424; /* Firefox 63 compatibility */ scrollbar-color: var(--main-color) #83545424; scrollbar-width: thin;
       -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
   }

    .back-diff {mix-blend-mode: difference;}
    h2.section-title, h1.section-title {font-size: 44px; margin-bottom: .5rem;}
    .services .services-intro p {font-size: 21px;}
    .section-subtitle {font-size: 23px;}
    
    .cursor {position: fixed; background: linear-gradient(135deg, var(--main-color), var(--alt-color)); width: 12px; height: 12px; border-radius: 100%; z-index: 1; 
        transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; user-select: none; pointer-events: none; z-index: 100000; transform: scale(1); 
    	&.active {opacity: 0.5; transform: scale(0);} 
    	&.hovered {opacity: 0.08;} 
    } 
    .cursor-follower {position: fixed; background-color: #05c0d447; width: 20px; height: 20px; border-radius: 100%; z-index: 1; transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    	 user-select: none; pointer-events: none; z-index: 100000; transform: translate(5px, 5px);
    	&.active {opacity: 0.8; transform: scale(3);} 
    	&.hovered {opacity: 0.08;}
    }
    .cursor-follower-link {height: 90px; width: 90px; border-radius: 50%; background-color: currentColor; mix-blend-mode: exclusion; will-change: auto;}
    .cursor-follower-link:before {content: ''; position: absolute; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 18 18 6m0 0H9m9 0v9' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-size: 40px 40px; background-position: center; background-repeat: no-repeat; width: 40px; height: 40px; left: 50%; top: 50%; transform: translate(-50%, -50%);
    }
    .cursor-inactive {display: none;}
    
    .sidemenu {width: 70%;}
    .sidecontact {width: 80%;}
    .side-content {padding: 120px 30px 30px;}
    .sidecontact .lead p {font-size: 20px;}
    .sidecontact .contact-form h3, .sidecontact .contact-form-bottom h3, .sidecontact input.form-control, .sidecontact textarea.form-control {font-size: 24px;}
    
    .sidemenu .menu-links {margin-top:30px}
    .sidemenu .menu-links .main-menu >li {font-size: 26px; padding: 10px;}
    .sidecontact .label-wrap label {font-size: 15px;}
    
    .intro {padding-top: 0;}
    .intro h1 {font-size: 60px;}
    .intro h1 .span-first {display: block;}
    .intro h1 .span-last {display: inline-block; animation-name: wordSlider2; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-duration: 7s;}
    
    .about-me .zzz:after {top: 24px; left: 4px;}

    .wrapper-tooltip {--width: 75px; --height: 75px;}
    .floating-image {position: absolute; right: 20%;}
    
    span.title-dot {font-size: 58px;}
    
    .sticky-card {top: 100px;}
    
    .card-content p, .text300 {font-size: 22px;}
    .card-content > div {width: 80%;}
    
    .qualification .sticky-card {padding-left: 4rem; padding-right: 4rem;}
    .qualification .card-content {height: 100%; padding: 40px; min-height: 550px;}
    .qualification .service-card-count {top: 34px; right: 40px;}
    .qualification .card-content h3 {letter-spacing: -3px; font-size: 30px;}
    .qualification .card-content p {font-size: 20px; line-height: 1.5;}
    .qualification #card_3 .service-top-content {flex: 1 1 0;} 
    .qualification #card_3 .service-img-wrap {max-width: 100%;}
    
    
    .about-me {padding-top: 100px;}
    .about-me:before {background-size: 100% 84px;}
    .text > .lighten, .about-me .text > .lighten {font-size: 36px; letter-spacing: -5px;}
    .weather-wrap .ww_current .ww_temp {font-size: 35px!important;}
    .info-text .lighten {font-size: 28px; letter-spacing: -1.5px;}
    .text > .lighten .span-img, .location .span-img {transition: z-index 0s linear .35s;}
    .text > .lighten .span-img::after, .location .span-img::after {content: ""; position: absolute; left: -175px; top: -175px; width: 400px; height: 400px; border-radius: 50%; pointer-events: none;}
    .text > .lighten .span-img:hover, .location .span-img:hover {z-index: 3; transition-delay: 0s;}
    .text > .lighten .span-img:hover::after, .location .span-img:hover::after {pointer-events: auto; cursor: pointer;}
    .text > .lighten .span-img img, .location .span-img img {pointer-events: none;}
    .text > .lighten .span-img:hover img, .location .span-img:hover img {opacity: 1; transform: scale(1); border-radius: 50%;}

    .location .scroll-image {width: 150px; height: 150px;}
    .location .scroll-image img, .location .scroll-image video {width: 150px; height: 150px;}
    
    .accordion-button {font-size: 20px;}
    .accordion-item .accordion-body .accordion-content {font-size: 18px;}
    .icon-scroll-line {right: 60px;}
    
    .section-padding {padding: 100px 0;}
    
    @keyframes sidebarFromLeft { 0% {width: 0;} 40% {width: 382px;} 70% {width: 482px;} 100% {width: 0%;} }

    .icon-scroll-line {height: 22.50015rem;}
    .icon-scroll-line:after {height: 4.50003rem;}

    
}

@media (min-width: 768px) and (max-width: 991px) {
    
    .theme-button-text {padding: 0 1.65rem;}

    .footer-wrap {height: auto!important;}
    .footer .footer-height-row {height: auto!important;}
}

@media only screen and (min-width: 992px) {
    
    
    .intro h1 {font-size: 80px;}
    h2.section-title, h1.section-title {font-size: 58px;}
    .section-subtitle {font-size: 25px;}
    
    .intro-icon-boxes .text-box-item-content lord-icon {width: 150px; height: 150px;}
    
    .breadcrumb {transform-origin: left;}
    
    .sidemenu .menu-links .main-menu >li {font-size: 30px;}
    .sidemenu .contact-info .item {font-size: 18px;}
    .sidecontact .lead p {font-size: 24px;}
    .sidecontact .contact-form h3, .sidecontact .contact-form-bottom h3, .sidecontact input.form-control, .sidecontact textarea.form-control {font-size: 30px;}
    .sidecontact .label-wrap label {font-size: 17px;}
    .side-content .form-title {font-size: 58px;}
    
    .accordion-button {font-size: 22px;}
    .accordion-item:not(.active):hover .accordion-mark:before, .accordion-item:not(.active):hover .accordion-mark:after, .accordion-item.active .accordion-mark:before, .accordion-item.active .accordion-mark:after {background-color: var(--main-color);}
    .accordion-item:not(.active):hover .accordion-mark:after, .accordion-item.active .accordion-mark:after {transform: rotate(450deg) scale(2);}    
    .accordion-item:not(.active):hover .accordion-mark:before, .accordion-item.active .accordion-mark:before {transform: rotate(360deg) scale(2);}
    .accordion-item:not(.active):hover .faq-qm, .accordion-item.active .faq-qm {color: var(--main-color); transform: translateX(4px); font-weight: 900; transition: all .15s ease-in;}
    
    .qualification .card-content h3 {font-size: 32px; text-align: left;}
    .qualification .card-content p {font-size: 21px; text-align: left;}
    .qualification .service-top-wrap > .service-img-wrap > img {max-height: 300px; object-fit: contain;}
    .qualification #card_3 .service-img-wrap {width: 330px;}
    .qualification .service-top-wrap .service-img-wrap .monitor-img img  {width: 280px;}
    .qualification .monitor-img:before {width: 280px; height: 230px; background-size: 280px;}
    
    .text > .lighten, .about-me .text > .lighten {font-size: 52px; letter-spacing: -5px;}
    .info-text .lighten {font-size: 32px; letter-spacing: -1.5px;}
    .weather-wrap .ww_current .ww_temp {font-size: 50px!important; letter-spacing: -2px!important;}
    
    .card-content p, .text300 {font-size: 28px;}
    
    .top-bubble {width: 300vw; height: 150vw; margin-left: -100vw;}
    
    
    .footer {padding-top: 140px;}
    .footer-wrap {padding-top: 10em;}
    .footer .footer-grid {grid-template-columns: auto 1fr; grid-column-gap: 2em; grid-row-gap: 2em;}
    .footer .footer-links li .cursor-link {font-size: 20px;}
    .footer .footer-contact h3 {font-size: 80px; letter-spacing: -2px;}
    .helper-widget-wrap {bottom: 150px;}  
    .bata img {height: 232px;}
        
    
}

@media only screen and (min-width: 1200px) {
    
    .floating-image {right: 0;}
    
    .qualification .card-content h3 {font-size: 46px; letter-spacing: -4px;}
    .qualification .card-content p {font-size: 26px;}
    .qualification .monitor-img:before {width: 440px; height: 354px; background-size: 440px;}
    .qualification #card_3 .service-img-wrap {width: 460px;}
    .qualification #card_3 .monitor-img {margin-top: 0!important;}
    .qualification .service-top-wrap .service-img-wrap .monitor-img img {width: 420px;}

}

@media only screen and (min-width: 992px) and (max-height: 800px) {
    .qualification .card-content {padding: 20px 28px;}
    .qualification .card-content h3 {margin-bottom: 20px;}
    .qualification .card-content p {line-height: 1.4;}
    .qualification .card-content > .service-bottom-wrap {padding-top: 8px;}
}


@media only screen and (min-width: 1280px) {
    .container {max-width: 1140px;}
    .about-me .img-wrap {padding: 20px;}
}
@media only screen and (min-width: 1550px) {
    .about-me .img-wrap {padding: 60px;}
}

@media only screen and (min-width: 1920px) {
    .about-me .img-wrap {padding: 130px;}
}


@media only screen and (max-width: 991px) {
    
    .qualification .service-top-wrap .service-img-wrap {position: absolute; z-index: -1; opacity: .2; top: 50%; transform: translateY(-50%);}
    .qualification .service-top-wrap .service-img-wrap img {max-width: 80%;}
    .qualification .card-content p {color: #ffffffba; text-shadow: 0 0 10px #000;}
}


@media only screen and (max-width: 767px) {
    
    html {overflow-x: clip; touch-action: pan-y!important; -webkit-overflow-scrolling: touch;}
    body {min-height: -webkit-fill-available;} /* mobile viewport bug fix */

    /* A transformed ancestor becomes the containing block for position:fixed.
       ScrollTrigger mobile pins must be fixed to the viewport while panels are closed. */
    .move-right:not(.active) {transform: none;}
    .portfolio .portfolio-items {will-change: auto;}

    /* Keep the hero tied to one stable mobile viewport. 100vh changes as the
       browser toolbar opens/closes and invalidates ScrollTrigger measurements. */
    .intro {height: 100svh; min-height: 100svh;}
    .intro .img-wrap img {height: 100svh;}
    .intro h1 {font-size: clamp(2rem, 10.5vw, 2.625rem); line-height: 1.16; letter-spacing: -.045em;}
    .intro h1 .span-last {bottom: 0;}
    .intro .section-subtitle {font-size: clamp(.94rem, 4.5vw, 1.19rem); line-height: 1.42; margin-top: 1rem!important; margin-bottom: 1.5rem!important;}
    .intro .theme-button {height: clamp(3rem, 15vw, 3.75rem); margin-top: 1.5rem!important; margin-bottom: 1rem!important;}
    .intro .theme-button-text {padding-right: 1rem; padding-left: 1rem; font-size: clamp(.9rem, 4.2vw, 1rem);}
    .intro .wrapper-tooltip {--width: clamp(48px, 16vw, 60px); --height: clamp(48px, 16vw, 60px);}

    #particles-js,
    #particles-js2 {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none!important;
        opacity: 0;
        transition: opacity .5s ease;
    }
    #particles-js.active,
    #particles-js2.active {opacity: 1; pointer-events: none!important;}
    
    .h-xs-auto {height: auto!important;}
    span.title-dot {line-height: 0;}
    
    .services-wide:before {left: 0;}
    
    h3.lighten {font-size: 20px; line-height: 1.4;}
    
    .sidemenu, .sidemenu .side-content {height: 100%; overflow-y: hidden; min-height: 100%;}
    
    .sidecontact .section-title {font-size: 30px;}
    .sidecontact .lead .required {font-size: 12px;}

    .qualification .monitor-img:before {display: none;}

    .particles-about {background: linear-gradient(0deg, var(--dark-color), 100%, transparent);}
    .about-me .word > span[data-char="Z"]:after {top: 13px; left: 3px; width: 83%;}
    .z-dot:after {width: 8px; height: 8px; left: 1px; bottom: 8px;}
    
    .footer p {font-size: 18px;}
    .footer .footer-links li .word {white-space: nowrap;}
    
    @keyframes sidebarFromLeft {0% {width: 0;} 40% {width: 42px;} 70% {width: 100px;} 100% {width: 0%;}}

}

@media only screen and (max-width: 359px) {
    body {font-size: 1rem;}

    /* Compact spacing for iOS Display Zoom and other sub-360 CSS viewports. */
    .section-padding {padding-top: 40px; padding-bottom: 40px;}
    h2.section-title,
    h1.section-title {font-size: 2rem; line-height: 1.16; margin-bottom: 1rem;}
    .section-subtitle {font-size: 1rem; line-height: 1.45; margin-bottom: 1rem;}
    span.title-dot {font-size: 1.2em;}
    .portfolio-h1 {font-size: 2.25rem!important; line-height: 1.12!important; letter-spacing: -.045em;}
    .text300 {font-size: 1rem; line-height: 1.5;}

    .text-box-item {gap: .75rem; padding: 1.35rem 1rem; border-radius: 1.35rem;}
    .text-box-item:before {border-radius: 1.35rem;}
    .card-content p {font-size: 1rem; line-height: 1.45;}
    .testimonials-slide .card-content p {font-size: .95rem; line-height: 1.45;}
    .text-box-item .testimonials-name {font-size: 1.1rem; line-height: 1.25;}
    .testimonial-link {font-size: .86rem;}

    .breadcrumb ul {max-width: 100%; flex-wrap: wrap; gap: .35rem .7rem;}
    .breadcrumb li {font-size: .78rem; line-height: 1.35;}

    .theme-button {min-width: 0; height: 3rem;}
    .theme-button-text {padding-right: 1rem; padding-left: 1rem; font-size: .95rem;}

    .services .services-intro p {font-size: 1rem; line-height: 1.55; margin-bottom: 1.25rem;}
    .services .solution-img {width: 76px;}

    .qualification {padding-top: 60px;}
    .qualification .sticky-card {padding-right: .5rem; padding-left: .5rem;}
    .qualification .card-content {min-height: 410px; padding: 1.25rem .9rem;}
    .qualification .card-content h3 {font-size: 1.35rem; line-height: 1.18; letter-spacing: -.06em; word-spacing: .08em; margin-bottom: 1.25rem;}
    .qualification .card-content p {font-size: 1rem; line-height: 1.45;}
    .qualification .card-content > .service-bottom-wrap {padding-top: 1rem;}
    .qualification .service-card-count {top: 18px; right: 16px;}

    .accordion-button {font-size: 1.05rem; line-height: 1.35; padding: 1.1rem 2.5rem 1.1rem 0;}
    .accordion-body {padding: 1rem .25rem 1.25rem;}

    .blog-item {border-radius: 1.35rem;}
    .blog-item .img-wrap {border-radius: 1rem;}
    .blog-item .blog-item-content {padding: 1.5rem!important;}
    .blog-item .blog-item-content h3 {font-size: 1.25rem; line-height: 1.3;}
    .blog-item .blog-item-content p {font-size: 1rem; line-height: 1.5;}
    .blog-item .blog-item-date {font-size: .72rem; padding: .75rem!important;}

    .sidemenu {width: 88%;}
    .sidemenu .side-content {padding: 76px 16px 16px;}
    .sidemenu .menu-links .main-menu > li {font-size: 1.2rem; padding-top: 6px; padding-bottom: 6px;}

    .sidecontact {width: 100%;}
    .sidecontact .side-content {padding: 76px 16px 24px;}
    .sidecontact-logo {top: 22px; width: 140px;}
    .sidecontact .contact-intro {margin-top: 1rem!important; margin-bottom: 2rem!important;}
    .sidecontact .section-title {font-size: 1.45rem; margin-bottom: 1.5rem!important;}
    .sidecontact .lead p {font-size: .94rem; line-height: 1.5;}
    .sidecontact .contact-form h3,
    .sidecontact .contact-form-bottom h3,
    .sidecontact input.form-control,
    .sidecontact textarea.form-control {font-size: 1rem;}
    .sidecontact .label-wrap label {font-size: .72rem;}
    .sidecontact .label-wrap label > span {font-size: .72rem;}
    .sidecontact .form-group {margin-bottom: 2rem!important;}
    .sidecontact .contact-form-bottom {margin-top: 2rem!important;}
    .sidecontact .close-button {top: 20px; right: 14px;}

    .footer-wrap {padding-top: 2.25rem;}
    .footer .footer-about {font-size: 1rem; line-height: 1.4; margin-top: 0!important;}
    .footer p {font-size: .92rem; line-height: 1.4;}
    .footer .footer-grid {grid-column-gap: .5rem;}
    .footer .footer-grid.me-5 {margin-right: 1rem!important;}
    .footer .footer-grid.ms-5 {margin-left: 1rem!important;}
    .footer .footer-links li .cursor-link {font-size: .78rem; padding-top: 3px; padding-bottom: 3px;}
    .footer .footer-contact {padding-top: 3%; padding-bottom: 3%;}
    .footer .footer-contact h3 {font-size: 1.25rem; line-height: 1.2;}
    .footer-bottom {font-size: .72rem; line-height: 1.35;}

    .intro {padding-top: 72px;}
    .about-me .text > .lighten {font-size: 1.65rem; line-height: 1.08; letter-spacing: -.06em;}
}


@keyframes fadeInAnimation {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes fadeInRight2 {from {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);} to {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
@-webkit-keyframes fadeInRight2 {from {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);} to {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} 
@keyframes fadeIn2 {0% {opacity: 0;} 100% {opacity: 1;}}
@-webkit-keyframes fadeIn2 {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes fadeInUp2 {0% {opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px);} 100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}}
@-webkit-keyframes fadeInUp2 {0% {opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px);} 100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}}
@keyframes iconscroll{0%{opacity:0} 20%{opacity:1} 45%{opacity:1} 100%{opacity:0;top:calc(100% - 4.50003rem)}}
@keyframes highlight{1%{width:1%;-webkit-mask-size:10000% .3em;mask-size:10000% .3em}6%{width:6%;-webkit-mask-size:1666.6666666667% .3em;mask-size:1666.6666666667% .3em}11%{width:11%;-webkit-mask-size:909.0909090909% .3em;mask-size:909.0909090909% .3em}16%{width:16%;-webkit-mask-size:625% .3em;mask-size:625% .3em}21%{width:21%;-webkit-mask-size:476.1904761905% .3em;mask-size:476.1904761905% .3em}26%{width:26%;-webkit-mask-size:384.6153846154% .3em;mask-size:384.6153846154% .3em}31%{width:31%;-webkit-mask-size:322.5806451613% .3em;mask-size:322.5806451613% .3em}36%{width:36%;-webkit-mask-size:277.7777777778% .3em;mask-size:277.7777777778% .3em}41%{width:41%;-webkit-mask-size:243.9024390244% .3em;mask-size:243.9024390244% .3em}46%{width:46%;-webkit-mask-size:217.3913043478% .3em;mask-size:217.3913043478% .3em}51%{width:51%;-webkit-mask-size:196.0784313725% .3em;mask-size:196.0784313725% .3em}56%{width:56%;-webkit-mask-size:178.5714285714% .3em;mask-size:178.5714285714% .3em}61%{width:61%;-webkit-mask-size:163.9344262295% .3em;mask-size:163.9344262295% .3em}66%{width:66%;-webkit-mask-size:151.5151515152% .3em;mask-size:151.5151515152% .3em}71%{width:71%;-webkit-mask-size:140.8450704225% .3em;mask-size:140.8450704225% .3em}76%{width:76%;-webkit-mask-size:131.5789473684% .3em;mask-size:131.5789473684% .3em}81%{width:81%;-webkit-mask-size:123.4567901235% .3em;mask-size:123.4567901235% .3em}86%{width:86%;-webkit-mask-size:116.2790697674% .3em;mask-size:116.2790697674% .3em}91%{width:91%;-webkit-mask-size:109.8901098901% .3em;mask-size:109.8901098901% .3em}96%{width:96%;-webkit-mask-size:104.1666666667% .3em;mask-size:104.1666666667% .3em}to{width:100%;-webkit-mask-size:100% .3em;mask-size:100% .3em}}
@keyframes rotate {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
@keyframes fade {0% {opacity: 1;} 50% {opacity: 0.25;}}
@keyframes fade-in {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes wordSlider {0%, 27% {transform: translateY(0%);} 33%, 60% {transform: translateY(-25%);} 66%, 93% {transform: translateY(-50%);} 100% {transform: translateY(-75%);}}
@keyframes wordSlider2 {0%, 27% {transform: translateX(var(--hero-suffix-shift-1, 0%));} 33%, 60% {transform: translateX(var(--hero-suffix-shift-2, -40%));} 66%, 93% {transform: translateX(var(--hero-suffix-shift-3, -85%));} 100% {transform: translateX(var(--hero-suffix-shift-1, 0%));}}
@keyframes slideOut {0 {opacity: 1; transform: scale(1);} 99% {opacity: 0; transform: scale(3);} 100% {transform: scale(0);}}
@keyframes sidebarFromLeft2 {0% {width: 0;} 40% {width: 100%;} 70% {width: 120%;} 100% {width: 100%;}}
@keyframes sidebarFromLeftLogo {0% {transform: scaleX(1);} 40% {transform: scaleX(1.2);} 70% {transform: scaleX(1.5);} 100% {transform: scaleX(1);}}
@keyframes faded-in {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes floating {50% {transform: translate(0, 1.5vw);}}
@keyframes breath {from {animation-timing-function: ease-out;} to {transform: translateY(-5px) scale(1.25); text-shadow: 0 0 25px var(--main-color); animation-timing-function: ease-in-out;}}
@keyframes shake {10%, 90% {transform: translate3d(-1px, 0, 0);} 20%, 80% {transform: translate3d(3px, 0, 0);} 30%, 50%, 70% {transform: translate3d(-4px, 0, 0);} 40%, 60% {transform: translate3d(4px, 0, 0);}}
@keyframes pang-animation {0% {transform: scale(0); opacity: 0;} 40% {transform: scale(1); opacity: 1;} 100% {transform: scale(1.1); opacity: 0;}} 
@keyframes plus-animation {0% {transform: rotate(0) scale(1);} 20% {transform: rotate(60deg) scale(0.93);} 55% {transform: rotate(35deg) scale(0.97);} 80% {transform: rotate(48deg) scale(0.94);} 100% {transform: rotate(45deg) scale(0.95);}} 
@keyframes plus-animation-reverse {0% {transform: rotate(45deg) scale(0.95);} 20% {transform: rotate(-15deg);} 55% {transform: rotate(10deg);} 80% {transform: rotate(-3deg);} 100% {transform: rotate(0) scale(1);}} 
@keyframes stretch-animation {0% {transform: scale(1, 1);} 10% {transform: scale(1.1, 0.9);} 30% {transform: scale(0.9, 1.1);} 50% {transform: scale(1.05, 0.95);} 100% {transform: scale(1, 1);}}
@keyframes spin {100% {transform:rotate(360deg)}}    
@keyframes spinPortfolio {to{transform: rotate(360deg);}}



@media only screen and (min-width: 768px) {
    /*scroll top progress circle*/
    @-webkit-keyframes border-transform{0%,100% {border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;}14% {border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;}28% {border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;}42% {border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;}56% {border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;}70% {border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;}84% {border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;}} 
    .progress-wrap {position: fixed; right: 30px; bottom: 30px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1); 
        z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(20px); -webkit-transition: all 200ms linear; transition: all 200ms linear;}
    .progress-wrap.active-progress {opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0);}
    .progress-wrap:after {content: ''; position: absolute; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.4 19.4' fill='%2308b1c4' style='enable-background:new 0 0 19.4 19.4' xml:space='preserve'%3E%3Cpath d='m9.7 4.1-.7.7-9 9 1.4 1.4 8.3-8.3 8.3 8.3 1.4-1.4-9-9-.7-.7z'/%3E%3C/svg%3E");
        background-size: 20px 20px; background-position: center; background-repeat: no-repeat; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 1; 
        -webkit-transition: all 200ms linear; transition: all 200ms linear; filter: saturate(0) brightness(1.2);}
    .progress-wrap:hover:after {filter: saturate(1) brightness(1);}
    .progress-wrap svg path {fill: none;}
    .progress-wrap svg.progress-circle path {stroke: var(--main-color); stroke-width: 4; box-sizing:border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear;}
}

@media only screen and (max-width: 767px) {
    .accordion-item.active .accordion-mark:before, .accordion-item.active .accordion-mark:after {background-color: var(--main-color);}
    .accordion-item.active .accordion-mark:before {transform: rotate(360deg) scale(2);}
    .accordion-item.active .accordion-mark:after {transform: rotate(450deg) scale(2);}
    .accordion-item.active .faq-qm {color: var(--main-color); transform: translateX(4px); font-weight: 900; transition: all .15s ease-in;}
}

.blog-item {display: flex; flex-direction: column; background: var(--alt-color); background-image: url(../img/noise.png); box-shadow: -3px 0 10px -5px #000; border-radius: 2em;}
.blog-item .img-wrap {aspect-ratio: 3 / 2; overflow: hidden; border-radius: 1em; background-image: url(../img/noise.png);}
.blog-item .img-wrap img {width: 100%; height: 100%; object-fit: cover; border-radius: 2em 2em 0 0; opacity: .4; transition: all .3s ease;}
.blog-item .blog-item-content p {font-weight: 200; font-size: 17px; color: #fff9;}
.blog-item .blog-item-date {font-size: 14px; font-weight: 300; background-color: #1d6f7d; border-radius: 1em 0 1em 0; background-image: url(../img/noise.png);}
.blog-item .button-wrap {font-family: 'Montserrat', sans-serif; bottom: 0; right: 0; background-color: #1d6f7d; border-radius: 1em 0 0 0; background-image: url(../img/noise.png);}
.blog-item .theme-button {height: 2.6rem; opacity: 0; transform: scale(0); transition: all .3s;}
.blog-item .theme-button svg {width: 23px; height: 23px; fill: #fff;}
.blog-item lord-icon {width: 50px; height: 50px; bottom: 0; right: 50%; transform: translateX(50%); transition: all .3s ease .2s;}
.blog-item:hover .theme-button {opacity: 1;transform: scale(1);}
.blog-item:hover lord-icon {opacity: 0; transition: all .3s ease;}
.blog-item:hover img {opacity: 0.6;}
.blog-item .theme-button:hover svg {fill: var(--main-color)}


/*breath shadow*/
.animation-breath > span, .animation-breath .word > span {animation: breath 1200ms ease calc(1 * 100 * 1ms) infinite alternate;}


/* splitting */
/*html > body > section {
    scroll-snap-align: center;
}
@media (min-width: 481px) {
    h1 {
        --scalar: 4vw;
    }
}*/
/*@media (prefers-reduced-motion: no-preference) {
    [letter-animation] > span {
        display: inline-block;
        white-space: break-spaces;
    }
    [letter-animation="breath"] {
        --glow-color: white;
    }
    [letter-animation="breath"] > span {
        -webkit-animation: breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate;
        animation: breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate;
    }
    [letter-animation="hover"]:hover > span {
        transform: scale(0.75) perspective(1px);
    }
    [letter-animation="hover"] > span {
        transition: transform 0.3s;
        cursor: pointer;
    }
    [letter-animation="hover"] > span:hover {
        transform: scale(1.25) perspective(1px);
    }
}
@media (prefers-reduced-motion: no-preference) and (prefers-color-scheme: light) {
    [letter-animation="breath"] {
        --glow-color: black;
    }
}
@media (prefers-reduced-motion: no-preference) {
    [word-animation] {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 1ch;
    }
    [word-animation="trampoline"] > span {
        display: inline-block;
        transform: translateY(100%);
        -webkit-animation: trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate;
        animation: trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate;
    }
}
@media (prefers-reduced-motion: no-preference) and (hover) {
    [word-animation="hover"] {
        overflow: hidden;
        overflow: clip;
    }
    [word-animation="hover"] > span {
        transition: transform 0.3s;
        cursor: pointer;
    }
    [word-animation="hover"] > span:not(:hover) {
        transform: translateY(50%);
    }
}*/
/*.github-corner {
    fill: CanvasText;
    color: Canvas;
}

.github-corner:hover .octo-arm {
    -webkit-animation: 560ms ease-in-out octocat-wave;
    animation: 560ms ease-in-out octocat-wave;
}
@-webkit-keyframes octocat-wave {
    0%,
    100% {
        transform: rotate(0);
    }
    20%,
    60% {
        transform: rotate(-25deg);
    }
    40%,
    80% {
        transform: rotate(10deg);
    }
}
@keyframes octocat-wave {
    0%,
    100% {
        transform: rotate(0);
    }
    20%,
    60% {
        transform: rotate(-25deg);
    }
    40%,
    80% {
        transform: rotate(10deg);
    }
}
@-webkit-keyframes breath {
    from {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    to {
        transform: scale(1.25) translateY(-5px) perspective(1px);
        text-shadow: 0 0 40px var(--glow-color);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
}
@keyframes breath {
    from {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    to {
        transform: scale(1.25) translateY(-5px) perspective(1px);
        text-shadow: 0 0 40px var(--glow-color);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
}
@-webkit-keyframes trampoline {
    0% {
        transform: translateY(100%);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    50% {
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}
@keyframes trampoline {
    0% {
        transform: translateY(100%);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    50% {
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}*/ /* Recommended styles for Splitting */
.splitting .word,
.splitting .char {
    display: inline-block;
} /* Psuedo-element chars */
.splitting .char {
    position: relative;
} /** * Populate the psuedo elements with the character to allow for expanded effects * Set to `display: none` by default; just add `display: block` when you want * to use the psuedo elements */
.splitting .char::before,
.splitting .char::after {
    content: attr(data-char);
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    transition: inherit;
    user-select: none;
} /* Expanded CSS Variables */
.splitting {
    /* The center word index */
    --word-center: calc((var(--word-total) - 1) / 2); /* The center character index */
    --char-center: calc((var(--char-total) - 1) / 2); /* The center character index */
    --line-center: calc((var(--line-total) - 1) / 2);
}
.splitting .word {
    /* Pecent (0-1) of the word's position */
    --word-percent: calc(var(--word-index) / var(--word-total)); /* Pecent (0-1) of the line's position */
    --line-percent: calc(var(--line-index) / var(--line-total));
}
.splitting .char {
    /* Percent (0-1) of the char's position */
    --char-percent: calc(var(--char-index) / var(--char-total)); /* Offset from center, positive & negative */
    --char-offset: calc(var(--char-index) - var(--char-center)); /* Absolute distance from center, only positive */
    --distance: calc((var(--char-offset) * var(--char-offset)) / var(--char-center)); /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
    --distance-sine: calc(var(--char-offset) / var(--char-center)); /* Distance from center where 1 is far left/far right, 0 is center */
    --distance-percent: calc((var(--distance) / var(--char-center)));
}




.slide-vertical .char, .slide-horizontal .char {overflow: hidden; color: transparent;}
.slide-vertical .char:before, .slide-vertical .char:after {visibility: visible; color: #fff; transition: transform 0.3s cubic-bezier(1, 0, 0.55, 1); transition-delay: calc(0s + ( 0.02s * ( var(--char-index)) ));}
.slide-vertical .char:before {color: var(--main-color); transition-delay: calc(0s * ( var(--char-index)));}
.slide-vertical:hover .char:before {transition-delay: calc(0.01s + ( 0.02s * ( var(--char-index)) ));}
.slide-vertical:hover .char:after {transition-delay: calc(0.01s * ( var(--char-index)));}
.slide-vertical .char:before {transform: translateY(100%);}
.slide-vertical:hover .char:before {transform: translateY(0%);}
.slide-vertical:hover .char:after {transform: translateY(-100%);}

@media only screen and (max-width: 359px) {
    .blog-item .blog-item-content p {font-size: 1rem; line-height: 1.5;}
}