/* * Prefixed by https://autoprefixer.github.io * PostCSS: v8.4.14, * Autoprefixer: v10.4.7 * Browsers: last 4 version */ @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Radio+Canada:ital,wght@0,300..700;1,300..700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap'); /* @import url('https://fonts.cdnfonts.com/css/helvetica-neue-55'); */ .parkinsans { font-family: "Parkinsans", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; } .inter { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; } .raleway { font-family: "Raleway", sans-serif; font-style: normal; } .radio-canada { font-family: "Radio Canada", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; font-variation-settings: "wdth" 100; } .nav-posisan-fist{ } /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-Black.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-Black.woff') format('woff');*/ /* font-weight: 900;*/ /* font-style: normal;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-Bold.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-Bold.woff') format('woff');*/ /* font-weight: 100;*/ /* font-style: normal;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-BlackItalic.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-BlackItalic.woff') format('woff');*/ /* font-weight: 400;*/ /* font-style: italic;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-BoldItalic.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-BoldItalic.woff') format('woff');*/ /* font-weight: 100;*/ /* font-style: italic;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-Heavy.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-Heavy.woff') format('woff');*/ /* font-weight: 400;*/ /* font-style: normal;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-HeavyItalic.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-HeavyItalic.woff') format('woff');*/ /* font-weight: 400;*/ /* font-style: italic;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-Italic.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-Italic.woff') format('woff');*/ /* font-weight: normal;*/ /* font-style: italic;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-Light.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-Light.woff') format('woff');*/ /* font-weight: 300;*/ /* font-style: normal;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-LightItalic.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-LightItalic.woff') format('woff');*/ /* font-weight: 300;*/ /* font-style: italic;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-Medium.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-Medium.woff') format('woff');*/ /* font-weight: 500;*/ /* font-style: normal;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-MediumItalic.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-MediumItalic.woff') format('woff');*/ /* font-weight: 500;*/ /* font-style: italic;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-ThinItalic.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-ThinItalic.woff') format('woff');*/ /* font-weight: 100;*/ /* font-style: italic;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-Thin.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-Thin.woff') format('woff');*/ /* font-weight: 100;*/ /* font-style: normal;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-Roman.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-Roman.woff') format('woff');*/ /* font-weight: normal;*/ /* font-style: normal;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-UltraLight.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-UltraLight.woff') format('woff');*/ /* font-weight: 200;*/ /* font-style: normal;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'helvetica-neue-lt-pro';*/ /* src: url('../webfonts/HelveticaNeue-UltraLightItalic.woff2') format('woff2'),*/ /* url('../webfonts/HelveticaNeue-UltraLightItalic.woff') format('woff');*/ /* font-weight: 200;*/ /* font-style: italic;*/ /* font-display: swap;*/ /*}*/ /*@font-face {*/ /* font-family: 'Helvetica';*/ /* src: url('../webfonts/Helvetica_cyr-BoldOblique.woff2') format('woff2'),*/ /* url('../webfonts/Helvetica_cyr-BoldOblique.woff') format('woff');*/ /* font-weight: bold;*/ /* font-style: normal;*/ /* font-display: swap;*/ /*}*/ @font-face { font-family: "Helvetica"; src: url("../webfonts/Helvetica.ttf"); } @font-face { font-family: 'Helvetica Oblique'; src: url('../webfonts/Helvetica-Oblique.woff2') format('woff2'), url('../webfonts/Helvetica-Oblique.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } :root { --primary-color: #FFFFFF; --secondary-color: #1B1B1B; --text-color: #F5F5F4; --accent-color: #1e8a8a; --dark-color: #000000; --divider-color: #FFFFFF1A; --dark-divider-color: #F7FBFA1A; --error-color: rgb(230, 87, 87); /* --default-font: 'helvetica-neue-lt-pro'; */ } /************************************/ /*** 02. General css ***/ /************************************/ body { position: relative; font-family: -apple-system, BlinkMacSystemFont, 'helvetica-neue-lt-pro', Helvetica; font-size: 16px; font-weight: 400; line-height: 1.6em; color: var(--text-color); /* background: url('../images/section-bg-shape.png') var(--dark-color); background-repeat: repeat-y; background-position: top 900px center; background-size: 100% auto; */ } button {} p { line-height: 24px; margin-bottom: 16px; font-family: 'helvetica-neue-lt-pro'; font-style: normal; font-weight: 400; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.2em; color: var(--primary-color); font-family: "Raleway", sans-serif; } figure { margin: 0; } img { max-width: 100%; } a { text-decoration: none; } a:hover { text-decoration: none; outline: 0; } a:focus { text-decoration: none; outline: 0; } html, body { width: 100%; overflow-x: clip; } .container { max-width: 1300px; } @media (min-width: 992px) { .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; gap: 80px; } } @media (max-width:1300px) { .container { max-width: 1100px; } .section-title h2 { font-size: 31px !important; } .digiexperience .service-item img { height: auto !important; width: 100%; margin-bottom: -50px; } .section-title p { font-size: 14px !important; font-weight: 400; } } @media (min-width:1500px) and (max-width:2000px) { .brin-bg-video-waber { position: absolute; height: 75%; top: 50%; right: -18%; transform: translateY(-50%); z-index: -2; }.epictechnology .testimonial-slider .service-item { height: 410px; } .testimonial-slider1 .swiper-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; width: 100%; } } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { padding-right: 15px; padding-left: 15px; } .image-anime { position: relative; overflow: hidden; } .image-anime:after { content: ""; position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255, 255, 255, .3); -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); z-index: 1; } .image-anime:hover:after { height: 250%; -webkit-transition: all 600ms linear; -o-transition: all 600ms linear; transition: all 600ms linear; background-color: transparent; } .reveal { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; visibility: hidden; overflow: hidden; } .reveal img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; } .row { margin-right: -15px; margin-left: -15px; } .row>* { padding-right: 15px; padding-left: 15px; } .row.no-gutters { margin-right: 0px; margin-left: 0px; } .row.no-gutters>* { padding-right: 0px; padding-left: 0px; } .btn-default { display: inline-block; font-size: 16px; font-weight: 700; line-height: 1.4em; text-transform: capitalize; background: transparent; color: var(--primary-color); border-radius: 60px; padding: 14px 25px; margin-right: 50px; border: none; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: relative; z-index: 1; } .btn-default::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* background-color: var(--primary-color); */ border-radius: 60px; opacity: 20%; width: 100%; height: 100%; } .btn-default::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 50px; height: 50px; border-radius: 50%; background-color: var(--accent-color); background-image: url('../images/arrow-dark.svg'); background-repeat: no-repeat; background-position: center center; background-size: 24px auto; -webkit-transform: translate(50px, 0px); -ms-transform: translate(50px, 0px); transform: translate(50px, 0px); -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .btn-default:hover::before { background-color: transparent; -webkit-transform: translate(50px, 0px) rotate(45deg); -ms-transform: translate(50px, 0px) rotate(45deg); transform: translate(50px, 0px) rotate(45deg); } .btn-highlighted { position: relative; display: inline-block; line-height: 1.3em; font-size: 16px; font-weight: 700; background: var(--accent-color); color: var(--dark-color); text-transform: capitalize; border-radius: 8px; padding: 15px 30px; border: none; overflow: hidden; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 1; } .btn-highlighted:hover { background-color: var(--primary-color); } .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background-color: var(--dark-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .loading-container, .loading { height: 100px; position: relative; width: 100px; border-radius: 100%; } .loading-container { margin: 40px auto; } .loading { border: 1px solid transparent; border-color: transparent var(--accent-color) transparent var(--accent-color); -webkit-animation: rotate-loading 1.5s linear 0s infinite normal; animation: rotate-loading 1.5s linear 0s infinite normal; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } .loading-container:hover .loading, .loading-container .loading { -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #loading-icon { position: absolute; top: 50%; left: 50%; max-width: 66px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @-webkit-keyframes rotate-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .section-row { margin-bottom: 40px; } .section-row .section-title { width: 100%; /* max-width: 750px; */ margin-bottom: 0; } .our-services .section-title { width: 100%; max-width: 1000px; margin: auto; } .section-title { margin-bottom: 40px; } .section-title h3 { display: inline-block; position: relative; font-size: 14px; font-weight: 600; line-height: normal; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary-color); padding-left: 24px; margin-bottom: 20px; } .section-title h3::before { content: ''; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: url(../images/icon-sub-accent-heading.svg) no-repeat; background-position: left center; background-size: cover; width: 16px; height: 16px; } .section-title h1 { font-size: 85px; /* font-weight: 600; */ line-height: 1.2em; color: var(--primary-color); margin-bottom: 0; cursor: none; } .section-title h1 span { font-weight: 800; color: var(--accent-color); } .section-title h2 { font-size: 40px; line-height: 48px; font-weight: 600; /* line-height: 1.2em; */ color: #fff; margin-bottom: 0; cursor: none; font-family: "Raleway", sans-serif; } .thepath .section-title p { font-size: 16px; font-weight: 400; line-height: 24px; font-family: "helvetica-neue-lt-pro", sans-serif; font-style: normal; margin: 32px 0px !important; } .about-agency-content .section-title h2 { width: 70%; color: #000 !important; } .agency-benefits .section-title h2 { width: 80%; } .section-title h2 span { font-weight: 700; color: var(--accent-color); } .section-title p { margin-top: 20px; margin-bottom: 20px; font-size: 16px; font-weight: 400; } .section-content-btn .section-title-content { margin-bottom: 30px; } .section-title-content p { margin: 0; } .help-block.with-errors ul { margin: 0; text-align: left; } .help-block.with-errors ul li { color: var(--error-color); font-weight: 500; font-size: 14px; } /************************************/ /**** 03. Header css ****/ /************************************/ header.main-header { position: relative; top: 0; width: 100%; /* border-bottom: 1px solid var(--divider-color); */ -webkit-box-shadow: 10px 14px 24px 0px #00000026; box-shadow: 10px 14px 24px 0px #00000026; z-index: 100; } header.main-header .header-sticky { position: relative; top: 0; z-index: 100; } header.main-header .header-sticky.hide { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; -o-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; border-radius: 0; } header.main-header .header-sticky.active { position: fixed; top: 0; left: 0; right: 0; border-radius: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); background: var(--dark-color); border-bottom: 1px solid var(--divider-color); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); } .navbar { padding: 0px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #082326; } .navbar-brand { padding: 0; margin: 0; } .main-menu .nav-menu-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: flex; align-items: center; justify-content: end; text-align: center; /* margin-left: 40px; */ } .main-menu .nav-menu-wrapper>ul { -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 80px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .main-menu ul li { margin: 0; /* position: relative; */ } .main-menu ul li.nav-item a { font-size: 16px; line-height: 24px; font-weight: 400; font-style: normal; letter-spacing: 0px; padding: 0px 0px !important; color: var(--primary-color); text-transform: capitalize; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; font-family: "helvetica-neue-lt-pro", sans-serif; } .main-menu ul li.submenu>a:after { /*content: '';*/ position: absolute; right: 20px; top: 36%; width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-position: center; /* Your SVG inlined (URI-encoded) */ background-image: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16.8' cy='10.8' r='1.2' transform='rotate(90 16.8 10.8)' fill='white'/%3E%3Ccircle cx='19.2004' cy='8.4' r='1.2' transform='rotate(90 19.2004 8.4)' fill='white'/%3E%3Ccircle cx='12.0002' cy='15.6' r='1.2' transform='rotate(90 12.0002 15.6)' fill='white'/%3E%3Ccircle cx='9.5998' cy='13.2' r='1.2' transform='rotate(90 9.5998 13.2)' fill='white'/%3E%3Ccircle cx='7.20039' cy='10.8' r='1.2' transform='rotate(90 7.20039 10.8)' fill='white'/%3E%3Ccircle cx='4.8' cy='8.4' r='1.2' transform='rotate(90 4.8 8.4)' fill='white'/%3E%3Ccircle cx='14.3996' cy='13.2' r='1.2' transform='rotate(90 14.3996 13.2)' fill='white'/%3E%3C/svg%3E"); } .main-menu ul li a:hover, .main-menu ul li a:focus { color: var(--accent-color); } .main-menu ul .subli { visibility: hidden; opacity: 0; -webkit-transform: scaleY(0.8); -ms-transform: scaleY(0.8); transform: scaleY(0.8); -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; padding: 0; margin: 0; list-style: none; width: -webkit-max-content; width: -moz-max-content; width: max-content; border-radius: 0px; position: absolute; left: 0; top: 100%; background: #fff; text-align: left; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .main-menu ul li.submenu:first-child ul { width: 230px; } .main-menu ul ul ul { left: 100%; top: 0; text-align: left; } .main-menu ul li:hover>ul { visibility: visible; opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); padding: 5px 0; } .main-menu ul li.submenu ul li.submenu>a:after { content: '\f105'; float: right; } .main-menu ul ul li { margin: 0; padding: 0; } .main-menu ul ul li.nav-item a { color: #000; padding: 6px 20px !important; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: relative; } .main-menu ul li:hover>ul { visibility: visible; opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); padding: 5px 0; } .main-menu ul ul li a:hover, .main-menu ul ul li a:focus { color: #082326; background-color: transparent; padding: 6px 20px 6px 30px !important; } .main-menu ul ul li a::before { position: absolute; content: ''; top: 50%; left: 0px; -webkit-transform: translateY(-50%) translateX(-8px); -ms-transform: translateY(-50%) translateX(-8px); transform: translateY(-50%) translateX(-8px); /* start slightly hidden left */ height: 7px; width: 7px; background: #499A9A; border-radius: 50%; opacity: 0; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; /* smooth dot animation */ } .ser-btn .content-box a { margin-top: 16px; } .ser-btn { margin-bottom: 16px !important; } .main-menu ul ul li a:hover::before { opacity: 1; -webkit-transform: translateY(-50%) translateX(0); -ms-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); /* slide into place */ } .header-social-box { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-social-links { margin-right: 0px; } .header-social-links ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-social-links ul li { line-height: normal; margin-right: 15px; padding: 0; } .header-social-links ul li a { color: inherit; } .header-social-links ul li:last-child { margin: 0; } .header-social-links ul li i { font-size: 30px; color: #ffffff; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .header-social-links ul li:hover i { color: var(--primary-color); } .header-btn .btn-popup { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; z-index: 100; } .header-btn .offcanvas-backdrop { z-index: 100; } .header-btn .btn-popup { background: var(--divider-color); border-radius: 50%; border: none; width: 36px; height: 36px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .header-btn .btn-popup img { max-width: 14px; } body:has(:not(.offcanvas)) { padding-right: initial !important; } body:has(.offcanvas) { padding-right: 0 !important; } .header-btn .offcanvas { position: fixed; top: 0; bottom: 0; left: auto; right: -15px; background: var(--secondary-color) !important; border-radius: 0; opacity: 100%; width: 100% !important; height: 100% !important; max-width: 375px; border: none; padding: 150px 37px 150px 30px; -webkit-transform: translateX(100%) !important; -ms-transform: translateX(100%) !important; transform: translateX(100%) !important; z-index: 101; -webkit-transition: all 0.3s ease-in-out !important; -o-transition: all 0.3s ease-in-out !important; transition: all 0.3s ease-in-out !important; } .offcanvas.show:not(.hiding), .offcanvas.showing { -webkit-transform: translateX(0) !important; -ms-transform: translateX(0) !important; transform: translateX(0) !important; } .navbar-expand-lg .offcanvas .offcanvas-body { display: block; } .header-btn .offcanvas .btn-close { position: absolute; top: 30px; right: 37px; background-color: transparent; border: 1px solid var(--primary-color); border-radius: 50%; width: 36px; height: 36px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); opacity: 100%; -webkit-box-shadow: none; box-shadow: none; padding: 0; } .header-contact-box { text-align: center; border-bottom: 1px solid var(--divider-color); padding-bottom: 30px; margin-bottom: 30px; } .header-contact-box .icon-box { margin-bottom: 20px; } .header-contact-box .icon-box img { max-width: 40px; } .header-contact-box-content h3 { font-size: 22px; text-transform: capitalize; margin-bottom: 10px; } .header-contact-box-content p { color: var(--text-color); margin: 0; } .header-social-links.sidebar-social-links { text-align: center; margin-right: 0; } .header-social-links.sidebar-social-links h3 { font-size: 22px; text-transform: capitalize; margin-bottom: 20px; } .header-social-links.sidebar-social-links ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .header-social-links.sidebar-social-links ul li a { background-color: transparent; border: 1px solid var(--accent-color); border-radius: 50%; width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .header-social-links.sidebar-social-links ul li a:hover { border-color: var(--primary-color); } .responsive-menu, .navbar-toggle { display: none; } .responsive-menu { top: 0; position: relative; } .slicknav_btn { background: var(--accent-color); padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 38px; height: 38px; margin: 0; border-radius: 8px; } .slicknav_icon .slicknav_icon-bar { display: block; width: 100%; height: 3px; width: 22px; background-color: var(--dark-color); border-radius: 8px; margin: 4px auto !important; -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .slicknav_icon .slicknav_icon-bar:first-child { margin-top: 0 !important; } .slicknav_icon .slicknav_icon-bar:last-child { margin-bottom: 0 !important; } .navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1) { -webkit-transform: rotate(-45deg) translate(-5px, 5px); -ms-transform: rotate(-45deg) translate(-5px, 5px); transform: rotate(-45deg) translate(-5px, 5px); } .navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2) { opacity: 0; } .navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3) { -webkit-transform: rotate(45deg) translate(-5px, -5px); -ms-transform: rotate(45deg) translate(-5px, -5px); transform: rotate(45deg) translate(-5px, -5px); } .slicknav_menu { position: absolute; width: 100%; padding: 0; background: var(--accent-color); } .slicknav_menu ul { margin: 5px 0; } .slicknav_menu ul ul { margin: 0; } .slicknav_nav .slicknav_row, .slicknav_nav li a { position: relative; font-size: 16px; font-weight: 600; text-transform: capitalize; padding: 8px 20px; color: var(--dark-color); line-height: normal; margin: 0; border-radius: 0 !important; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .slicknav_nav a:hover, .slicknav_nav a:focus, .slicknav_nav .slicknav_row:hover { background-color: transparent; color: var(--primary-color); } .slicknav_menu ul ul li a { padding: 8px 20px 8px 30px; } .slicknav_arrow { font-size: 0 !important; } .slicknav_arrow:after { content: '\f107'; font-family: 'FontAwesome'; font-weight: 900; font-size: 12px; margin-left: 8px; color: var(--dark-color); position: absolute; right: 15px; top: 15px; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .slicknav_open>a .slicknav_arrow:after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); color: var(--primary-color); } /************************************/ /*** 04. Hero css ***/ /************************************/ .hero { position: relative; padding: 0px 0 0px; min-height: 100vh; } .hero .hero-bg-video { position: absolute; top: 0; right: 0; /* left: 0; */ bottom: 0; width: 100%; height: 100%; } .hero .hero-bg-video video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hero.bg-image { position: relative; background: url('../images/hero-bg.jpg') no-repeat; background-position: center center; background-size: cover; } .hero.bg-image::before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: -webkit-gradient(linear, right top, left top, color-stop(-73.04%, rgba(0, 0, 0, 0)), color-stop(1.71%, rgba(22, 22, 22, 0.3)), to(var(--secondary-color))); background: -o-linear-gradient(right, rgba(0, 0, 0, 0) -73.04%, rgba(22, 22, 22, 0.3) 1.71%, var(--secondary-color) 100%); background: linear-gradient(270deg, rgba(0, 0, 0, 0) -73.04%, rgba(22, 22, 22, 0.3) 1.71%, var(--secondary-color) 100%); width: 100%; height: 100%; z-index: 0; } .hero.hero-slider-layout { background: none; padding: 0; } .hero.hero-slider-layout .hero-slide { position: relative; background: url('../images/hero-bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 215px 0 120px; min-height: 100vh; } .hero.hero-slider-layout .hero-slide.slide-2 { background: url('../images/hero-bg-2.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; } .hero.hero-slider-layout .hero-slide::before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: -webkit-gradient(linear, right top, left top, color-stop(-73.04%, rgba(0, 0, 0, 0)), color-stop(1.71%, rgba(22, 22, 22, 0.3)), to(var(--secondary-color))); background: -o-linear-gradient(right, rgba(0, 0, 0, 0) -73.04%, rgba(22, 22, 22, 0.3) 1.71%, var(--secondary-color) 100%); background: linear-gradient(270deg, rgba(0, 0, 0, 0) -73.04%, rgba(22, 22, 22, 0.3) 1.71%, var(--secondary-color) 100%); width: 100%; height: 100%; z-index: 1; } .hero.hero-slider-layout .hero-slide .hero-slider-image { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .hero.hero-slider-layout .hero-slide .hero-slider-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hero.hero-slider-layout .hero-pagination { position: absolute; bottom: 30px; text-align: center; z-index: 2; } .hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background: var(--primary-color); opacity: 1; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin: 0 5px; } .hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active { background-color: var(--accent-color); } .hero-content { position: relative; z-index: 1; } .hero-content .section-title { width: 100%; /* margin-bottom: 40px; */ margin-top: 0px; } .typing-title { display: none; } .section-title h1 span div { color: transparent; } .hero-content-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 0px; } .hero-content-video { width: 35%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hero-content-video .video-play-button a { background: #082326; border-radius: 50%; height: 120px; width: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: none; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hero-content-video .video-play-button:hover a { background-position: right center; } .hero-content-video .video-play-button a i { font-size: 35px; color: var(--dark-color); } .learn-more-circle { margin-left: -30px; } .learn-more-circle img { max-width: 128px; -webkit-animation: infiniterotate 30s infinite linear; animation: infiniterotate 30s infinite linear; } @-webkit-keyframes infiniterotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes infiniterotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .hero-video-content { width: 70%; } .hero-video-content p { margin: 0; color: #082326; font-size: 20px; visibility: visible; /* force visible from start */ font-family: 'helvetica-neue-lt-pro', Helvetica, Arial, sans-serif; } .hero-btn { text-align: center; margin-top: 60px; } /************************************/ /*** 05. Scrolling Ticker css ***/ /************************************/ .our-scrolling-ticker { background-color: var(--accent-color); padding: 26px 0; } .scrolling-ticker-box { --gap: 40px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; gap: var(--gap); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .scrolling-content { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--gap); min-width: 100%; -webkit-animation: scroll 40s linear infinite; animation: scroll 40s linear infinite; } .scrolling-content span { display: inline-block; font-size: 28px; font-weight: 700; line-height: .5em; color: #ffffff; vertical-align: middle; } .scrolling-content span img { width: 100%; max-width: 24px; margin-right: 40px; } @-webkit-keyframes scroll { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(calc(-100% - var(--gap))); transform: translateX(calc(-100% - var(--gap))); } } @keyframes scroll { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(calc(-100% - var(--gap))); transform: translateX(calc(-100% - var(--gap))); } } /************************************/ /*** 06. About Agency css ***/ /************************************/ .about-agency { /* position: relative; */ padding: 100px 0 80px; } /* .about-agency::before { content: ''; display: block; position: absolute; left: -120px; top: 50%; background: url('../images/globe.png') no-repeat; background-position: left center; background-size: contain; opacity: 50%; width: 386px; height: 400px; animation: circlerotate 20s infinite linear; z-index: -1; } */ @-webkit-keyframes circlerotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes circlerotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .about-agency-content { /* position: sticky; */ top: 100px; padding-right: 35px; } .about-agency-list { /* border-left: 1px solid var(--divider-color); */ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 50px 30px; padding-left: 50px; } .about-agency-item { width: 100%; } .about-agency-item .icon-box { margin-bottom: 20px; } .about-agency-item .icon-box img { max-width: 40px; } .agency-item-content h3 { position: relative; font-size: 22px; text-transform: capitalize; margin-bottom: 10px; } .agency-item-content h3:after { content: ''; position: absolute; top: 0; left: -60px; background: url('../images/dot-green-icon.svg') no-repeat; background-position: left center; background-size: cover; width: 20px; height: 20px; } .agency-item-content p:last-child { margin: 0; } /************************************/ /*** 07. Our Services css ***/ /************************************/ .our-services { padding: 80px 0; } .service-item { position: relative; border: 1px solid #ffffff; border-radius: 8px; /* height: calc(100% - 30px); */ margin-bottom: 30px; padding: 25px 30px; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; background: transparent; /* height: 516px; */ } .benefits-steps-item { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .benefits-steps-item:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .service-item:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .service-item::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: transparent; opacity: 0%; } .service-item-header { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; } .service-item-header .icon-box img { max-width: 100px; } .service-arrow a img { max-width: 34px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .service-item:hover .service-arrow a img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .service-item-body { position: relative; } .service-item-body h3 { font-size: 32px; text-transform: capitalize; line-height: 40px; margin-bottom: 20px; font-weight: 600; font-family: "Raleway", sans-serif; } .sersec .service-item-body p { margin-bottom: 0; font-size: 15px; font-weight: 100 !important; } .thepath .service-item-body p { font-size: 15px; font-weight: 100 !important; font-family: 'Helvetica', 'Arial', sans-serif; font-style: normal; } .service-footer { margin-top: 20px; } .service-footer p { text-align: center; margin-bottom: 0; } .service-footer p a { font-weight: 700; text-transform: capitalize; text-decoration: underline; color: var(--accent-color); -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .service-footer p a:hover { color: var(--primary-color); } /************************************/ /*** 09. Digital Success css ***/ /************************************/ .digital-success { padding: 80px 0; } .digital-success-box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 80px; padding: 80px; position: relative; border-radius: 8px; background: -webkit-gradient(linear, left top, left bottom, from(#1e8a8a), color-stop(90.04%, rgba(0, 0, 0, 0))); background: -o-linear-gradient(top, #1e8a8a 0%, rgba(0, 0, 0, 0) 90.04%); background: linear-gradient(180deg, #1e8a8a 0%, rgba(0, 0, 0, 0) 90.04%); } .digital-success-box::before { content: ""; position: absolute; left: 20px; top: 20px; border-radius: 8px; background: -webkit-gradient(linear, left top, left bottom, color-stop(75%, #000000), color-stop(99.04%, rgba(0, 0, 0, 0))); background: -o-linear-gradient(top, #000000 75%, rgba(0, 0, 0, 0) 99.04%); background: linear-gradient(180deg, #000000 75%, rgba(0, 0, 0, 0) 99.04%); width: calc(100% - 40px); height: calc(100% - 20px); } .digital-success-list, .digital-success-content { position: relative; width: calc(50% - 40px); z-index: 1; } .digital-success-content::before { content: ''; display: block; position: absolute; top: 0; right: -40px; border: 1px dashed var(--dark-divider-color); height: 100%; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .digital-success-content .section-title { margin-bottom: 80px; } .success-counter-box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; } /* .success-counter-item { width: calc(50% - 15px); } */ .success-counter-item h2 { font-size: 50px; color: var(--accent-color); margin-bottom: 10px; } .success-counter-item p { margin: 0; } .success-list-item { background: url('../images/icon-sub-accent-heading.svg') no-repeat; background-position: left top 2px; background-size: 20px auto; padding-left: 30px; margin-bottom: 80px; } .success-list-item:last-child { margin-bottom: 0; } .success-list-item p { margin: 0; } .success-list-item p span { font-size: 22px; font-weight: 700; text-transform: capitalize; } /************************************/ /*** 10. Why Choose Us css ***/ /************************************/ .why-choose-us { position: relative; padding: 80px 0; } .why-choose-us::before { content: ''; display: block; position: absolute; right: -90px; top: 50%; background: url(../images/why-choose-bg-shape.png) no-repeat; background-position: left center; background-size: contain; opacity: 50%; width: 310px; height: 325px; -webkit-animation: circlezoomrotate 10s infinite linear; animation: circlezoomrotate 10s infinite linear; -webkit-animation-direction: alternate; animation-direction: alternate; z-index: -1; } @-webkit-keyframes circlezoomrotate { from { -webkit-transform: rotate(0deg) scale(0.5); transform: rotate(0deg) scale(0.5); } to { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); } } @keyframes circlezoomrotate { from { -webkit-transform: rotate(0deg) scale(0.5); transform: rotate(0deg) scale(0.5); } to { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); } } .why-choose-content { margin-right: 30px; } .why-choose-item { position: relative; border: 1px solid var(--divider-color); border-radius: 8px; overflow: hidden; margin-bottom: 30px; padding: 25px 30px; } .why-choose-item:last-child { margin-bottom: 0; } .why-choose-item::before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(255, 255, 255, 0.1)), to(rgba(0, 0, 0, 0))); background: -o-linear-gradient(left, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0) 100%); width: 0; height: 100%; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .why-choose-item.active:before, .why-choose-item:hover:before { width: 100%; } .why-choose-item h3 { font-size: 22px; text-transform: capitalize; margin-bottom: 10px; } .why-choose-item p { margin: 0; } .why-choose-image figure { display: block; border-radius: 8px; overflow: hidden; } .why-choose-image img { width: 100%; /* aspect-ratio: 1 / 0.93; */ -o-object-fit: cover; object-fit: cover; border-radius: 8px; } /************************************/ /*** 10. Join Agency css ***/ /************************************/ .join-agency { padding: 80px 0 50px; } .agency-social-item { position: relative; border: 1px solid var(--divider-color); border-radius: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 30px 0 30px 30px; padding: 30px 40px 30px 70px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .agency-social-item .icon-box { position: absolute; top: -30px; left: -30px; } .agency-social-item .icon-box a { position: relative; display: block; background-color: var(--accent-color); border-radius: 50%; width: 80px; height: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .agency-social-item:hover .icon-box a { background-color: transparent; } .agency-social-item .icon-box a::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--secondary-color); border-radius: 50%; -webkit-transform: translate(100%, 100%); -ms-transform: translate(100%, 100%); transform: translate(100%, 100%); -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .agency-social-item:hover .icon-box a::before { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .agency-social-item .icon-box i { position: relative; font-size: 40px; color: #ffffff; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 1; } .agency-social-item:hover .icon-box a i { color: var(--primary-color); } .agency-social-content h3 { font-size: 20px; text-transform: capitalize; margin-bottom: 5px; } .agency-social-content p { margin: 0; } .agency-social-btn { margin-left: 10px; } .readmore-btn { border: 1px solid var(--primary-color); border-radius: 50%; width: 36px; height: 36px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .readmore-btn:hover { border-color: var(--accent-color); } .readmore-btn img { max-width: 24px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .agency-social-item:hover .readmore-btn img { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /************************************/ /*** 11. How It Work css ***/ /************************************/ .how-it-work { position: relative; padding: 80px 0 50px; } .how-it-work::before { content: ''; display: block; position: absolute; left: -90px; top: 40%; background: url(../images/how-work-bg-shape.png) no-repeat; background-position: left center; background-size: contain; opacity: 50%; width: 297px; height: 340px; -webkit-animation: roundrotate 8s infinite linear; animation: roundrotate 8s infinite linear; -webkit-animation-direction: alternate; animation-direction: alternate; z-index: -1; } @-webkit-keyframes roundrotate { from { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } to { -webkit-transform: translateY(100px) rotate(360deg); transform: translateY(100px) rotate(360deg); } } @keyframes roundrotate { from { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } to { -webkit-transform: translateY(100px) rotate(360deg); transform: translateY(100px) rotate(360deg); } } .work-process-item { position: relative; background: url(../images/service-bg.svg) no-repeat; background-position: top left; background-size: auto; border: 1px solid var(--divider-color); border-radius: 8px; backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px); height: calc(100% - 30px); margin-bottom: 30px; padding: 40px; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; } .work-process-item:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } .work-process-item::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: var(--secondary-color); opacity: 40%; z-index: -1; } .work-process-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 40px; } .work-process-title h3 { font-size: 22px; text-transform: capitalize; } .work-process-btn { margin-left: 10px; } .work-process-item:hover .work-process-btn .readmore-btn img { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .work-process-content { margin-bottom: 80px; } .work-process-content p { margin: 0; } .work-process-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 20px; } .work-process-no { width: 50%; padding-right: 10px; } .work-process-no h3 { font-size: 22px; text-transform: uppercase; margin-bottom: 5px; } .work-process-no h2 { font-size: 40px; color: var(--accent-color); } .work-process-icon-box { width: 50%; position: absolute; display: block; bottom: 0; right: 0; text-align: center; background-color: var(--accent-color); border-radius: 8px 0 8px 0; padding: 40px; overflow: hidden; } .work-process-icon-box::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--primary-color); border-radius: 8px 0 8px 0; -webkit-transform: translate(100%, 100%); -ms-transform: translate(100%, 100%); transform: translate(100%, 100%); -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .work-process-item:hover .work-process-icon-box::before { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .work-process-icon-box img { position: relative; max-width: 60px; } /************************************/ /*** 12. Our Features css ***/ /************************************/ .our-features { position: relative; padding: 80px 0; } .our-features::before { content: ''; display: block; position: absolute; right: -90px; top: 50%; background: url(../images/features-bg-shape.png) no-repeat; background-position: left center; background-size: contain; opacity: 50%; width: 300px; height: 285px; -webkit-animation: squrerotate 5s infinite linear; animation: squrerotate 5s infinite linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; z-index: -1; } @-webkit-keyframes squrerotate { from { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); } to { -webkit-transform: translate(-150px, 200px) rotate(180deg); transform: translate(-150px, 200px) rotate(180deg); } } @keyframes squrerotate { from { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); } to { -webkit-transform: translate(-150px, 200px) rotate(180deg); transform: translate(-150px, 200px) rotate(180deg); } } .digital-features-box { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } .digital-features-item.features-item-1 { width: 32%; } .digital-features-item.features-item-2 { width: 32%; } .digital-features-item { position: relative; padding: 30px; border: 1px solid var(--divider-color); backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px); border-radius: 8px; overflow: hidden; } .digital-features-item::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* background: var(--secondary-color); */ opacity: 40%; z-index: 0; } .digital-features-image { position: relative; border-radius: 8px; overflow: hidden; margin-bottom: 40px; z-index: 1; } .digital-features-image img { width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 8px; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .digital-features-item.features-item-1 .digital-features-image img { aspect-ratio: 1 / 0.46; } .digital-features-item.features-item-2 .digital-features-image img { aspect-ratio: 1 / 0.72; } .digital-features-item:hover .digital-features-image img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .digital-features-content { position: relative; z-index: 1; } .digital-features-content h3 { font-size: 22px; text-transform: capitalize; margin-bottom: 10px; } .digital-features-content p { margin: 0; } .digital-features-item.agency-supports { padding: 0px 0; } .agency-supports-header { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 50px; padding: 0 60px; z-index: 1; } .agency-supports-content { width: 50%; } .agency-supports-content h3 { font-size: 22px; text-transform: capitalize; margin-bottom: 10px; } .agency-supports-content p { margin: 0; } .agency-free-consultation { width: 50%; text-align: right; } .agency-free-consultation img { max-width: 100px; -webkit-animation: infiniterotate 30s infinite linear; animation: infiniterotate 30s infinite linear; } .agency-supports-slider { position: relative; } .agency-supports-slider::before { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: 0; background: -o-linear-gradient(170deg, #030709 -50%, rgba(3, 7, 9, 0) 26.97%); background: linear-gradient(280deg, #030709 -50%, rgba(3, 7, 9, 0) 26.97%); width: 215px; height: 100%; z-index: 2; } .agency-supports-slider::after { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; background: -webkit-gradient(linear, left top, right top, color-stop(-50%, #030709), color-stop(26.97%, rgba(3, 7, 9, 0))); background: -o-linear-gradient(left, #030709 -50%, rgba(3, 7, 9, 0) 26.97%); background: linear-gradient(90deg, #030709 -50%, rgba(3, 7, 9, 0) 26.97%); width: 215px; height: 100%; z-index: 2; } .agency-supports-logo { background-color: #ffffff; border-radius: 8px; text-align: center; padding: 15px 30px; border: 1px solid #f2f2f2; } .agency-supports-logo img { max-height: 50px; } /************************************/ /*** 13. Our Portfolio css ***/ /************************************/ .our-portfolio { padding: 80px 0 40px; } .our-Project-nav { text-align: center; margin-bottom: 80px; } .our-Project-nav ul { list-style: none; text-align: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px 20px; padding: 0; margin: 0; } .our-Project-nav ul li a { position: relative; display: inline-block; background-color: transparent; border: 1px solid var(--divider-color); border-radius: 8px; color: var(--text-color); font-weight: 400; line-height: 1.2em; text-transform: capitalize; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; padding: 10px 20px; overflow: hidden; } .our-Project-nav ul li a.active-btn, .our-Project-nav ul li a:hover { background-color: var(--accent-color); color: var(--dark-color); } .project-item { height: calc(100% - 40px); margin-bottom: 40px; text-align: center; overflow: hidden; } .project-image { position: relative; margin-bottom: 20px; } .project-image figure { display: block; border-radius: 8px; overflow: hidden; } .project-image img { width: 100%; aspect-ratio: 1 / 0.8; -o-object-fit: cover; object-fit: cover; border-radius: 8px; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .project-item:hover .project-image figure img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .project-tag { position: absolute; top: 25px; right: 25px; z-index: 1; } .project-tag a { display: block; background-color: var(--divider-color); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--text-color); border-radius: 8px; font-size: 14px; text-transform: capitalize; padding: 6px 15px; } .project-btn { position: absolute; top: 50%; left: 50%; opacity: 0; visibility: hidden; -webkit-transform: translate(-50%, -30%); -ms-transform: translate(-50%, -30%); transform: translate(-50%, -30%); -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: 1; } .project-item:hover .project-btn { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; visibility: visible; } .project-btn a { border: 1px solid var(--primary-color); border-radius: 50%; width: 100px; height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .project-btn a:hover { background-color: var(--accent-color); border-color: var(--accent-color); } .project-btn a img { max-width: 42px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .project-btn a:hover img { -webkit-filter: brightness(1) invert(1); filter: brightness(1) invert(1); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .project-content h3 { font-size: 22px; text-transform: capitalize; } /************************************/ /*** 14. Our Testimonial Css ***/ /************************************/ .our-testimonial { position: relative; padding: 80px 0; } /*.our-testimonial::before {*/ /* content: '';*/ /* display: block;*/ /* position: absolute;*/ /* left: -70px;*/ /* top: 50%;*/ /* -webkit-animation: circlerotate 20s infinite linear;*/ /* animation: circlerotate 20s infinite linear;*/ /* z-index: -1;*/ /*}*/ /*.our-testimonial .section-row .section-title {*/ /* max-width: 448px;*/ /*}*/ .testimonial-review-box { position: relative; width: 100%; border: 1px solid var(--divider-color); border-radius: 8px; backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px); text-align: center; overflow: hidden; padding: 50px; } .testimonial-review-box::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--secondary-color); opacity: 40%; z-index: -1; } .testimonial-review-header { margin-bottom: 30px; } .testimonial-review-header h2 { font-size: 80px; font-weight: 600; } .testimonial-review-header .testimonial-rating { margin-bottom: 10px; } .testimonial-review-header p { margin: 0; } .testimonial-review-content { margin-bottom: 30px; } .testimonial-review-content h3 { font-size: 22px; } .company-client-images { margin-bottom: 10px; } .satisfy-client-image { display: inline-block; margin-left: -14px; border: 1px solid var(--dark-color); border-radius: 50%; overflow: hidden; } .satisfy-client-image:first-child { margin: 0; } .satisfy-client-image figure { display: block; } .satisfy-client-image img { max-width: 40px; } .testimonial-slider { margin-left: 0px; } .testimonial-slider .swiper-wrapper { cursor: none; padding: 0px 0px 30px; } .testimonial-company-logo { margin-bottom: 30px; } .testimonial-company-logo img { max-width: 120px; max-height: 30px; } .testimonial-rating { margin-bottom: 20px; } .testimonial-rating i { font-size: 16px; color: var(--accent-color); margin-right: 2px; } .testimonial-rating i:last-child { margin-right: 0; } .testimonial-content { margin-bottom: 40px; } .testimonial-content p { font-size: 22px; font-weight: 600; color: var(--primary-color); margin-bottom: 0; } .testimonial-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 95px; } .author-image { margin-right: 15px; } .author-image figure { display: block; border-radius: 50%; overflow: hidden; } .author-image img { max-width: 60px; border-radius: 50%; } .author-content { width: calc(100% - 75px); } .author-content h3 { font-size: 22px; text-transform: capitalize; margin-bottom: 5px; } .author-content p { text-transform: capitalize; margin: 0; } .testimonial-btn { position: absolute; bottom: 0px; left: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; margin-top: 30px; z-index: 2; } .testimonial-slider .testimonial-button-next, .testimonial-slider .testimonial-button-prev { position: relative; width: 50px; /* height: 50px; */ /* background: var(--secondary-color); */ border-radius: 8px; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .testimonial-slider .testimonial-button-next { margin-left: 5px; } .testimonial-slider .testimonial-button-next:hover, .testimonial-slider .testimonial-button-prev:hover { /* background: var(--accent-color); */ } /* .testimonial-slider .testimonial-button-next::before, .testimonial-slider .testimonial-button-prev::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; background: url("data:image/svg+xml;utf8,") no-repeat center center; background-size: 30px auto; transform: rotate(0deg); transition: all 0.4s ease-in-out; } */ /* .testimonial-slider .testimonial-button-prev ::before { transform: rotate(180deg); } .testimonial-slider .testimonial-button-next:hover:before, .testimonial-slider .testimonial-button-prev:hover:before { filter: brightness(1) invert(1); } */ .testimonial-slider .testimonial-button-prev { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .testimonial-benefits-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 150px; backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px); border: 1px solid var(--divider-color); border-radius: 8px; overflow: hidden; margin-top: 100px; padding: 60px; } .testimonial-benefits-box::before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--secondary-color); opacity: 40%; z-index: -1; } .testimonial-benefits-item { position: relative; width: calc(25% - 112.5px); } .testimonial-benefits-item::before { content: ''; display: block; position: absolute; top: 50%; right: -75px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border-right: 1px solid var(--divider-color); height: 80%; z-index: 1; } .testimonial-benefits-item:last-child:before { display: none; } .testimonial-benefits-item .icon-box { margin-bottom: 30px; } .testimonial-benefits-item .icon-box img { max-width: 40px; } .testimonial-benefits-content h3 { font-size: 22px; text-transform: capitalize; margin-bottom: 20px; } .testimonial-benefits-content ul { list-style: none; padding: 0; margin: 0; } .testimonial-benefits-content ul li { position: relative; padding-left: 25px; margin-bottom: 15px; } .testimonial-benefits-content ul li::before { content: "\2a"; font-family: "FontAwesome"; position: absolute; top: 0; left: 0; font-size: 16px; color: var(--primary-color); } .testimonial-benefits-content ul li:last-child { margin-bottom: 0 } .testimonial-slider33 { position: relative; } .testimonial-slider33 .swiper { overflow: visible; } /* allow peek */ .testimonial-slider33 .swiper-slide { /* let Swiper compute widths from slidesPerView (no auto widths needed) */ -webkit-box-sizing: border-box; box-sizing: border-box; } /* navigation buttons */ /*.testimonial-button-prev,*/ /*.testimonial-button-next {*/ /* position: absolute;*/ /* top: 50%;*/ /* width: 25px;*/ /* height: 25px;*/ /* border-radius: 50%;*/ /* z-index: 10;*/ /* cursor: pointer;*/ /*}*/ .testimonial-button-prev { left: -20px; } .testimonial-button-next { right: -20px; } /* tiny responsive tweaks */ @media (max-width: 768px) { .testimonial-btn .testimonial-button-prev { left: 4px; top: -20px; } .msadvmobile .w80 h3{ width:100%; } .testimonial-btn .testimonial-button-next { right: 4px; top: -2px; } .testimonial-btn1 .testimonial-button-prev { left: 0px !important; top: 3px !important; } .testimonial-slider1 .testimonial-button-next { margin-left: 0px !important; } .testimonial-btn1 .testimonial-button-next { right: -5px !important; top: 2px !important; } .testimonial-slider .testimonial-button-next { margin-left: 0px; } .projectslider .testimonial-button-prev { left: 4px; top: 6px; } .projectslider .testimonial-button-next { left: 0px; top: -10px; } .projectslider .testspace { padding: 0px 5px 0px 10px; } .testimonial-btn { position: absolute; bottom: 0px; left: 0px !important; } } .testimonial-slider3 .testimonial-button-next, .testimonial-slider3 .testimonial-button-prev { position: relative; width: 35px; height: 35px; /* background: var(--secondary-color); */ border-radius: 8px; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .testimonial-slider3 .testimonial-button-next { margin-left: 5px; } .testimonial-controls { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: self-start; -ms-flex-align: self-start; align-items: self-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; gap: 10px; margin-top: 20px; } .testspace { font-family: "Radio Canada", sans-serif; font-weight: 300; font-style: normal; font-size: 24px; line-height: 32px; letter-spacing: 0; text-align: center; } .testimonial-slider3 .testimonial-button-next:hover, .testimonial-slider3 .testimonial-button-prev:hover { /* background: var(--accent-color); */ } .testimonial-slider3 .testimonial-button-next::before, .testimonial-slider3 .testimonial-button-prev::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url("../images/Dotted\ Arrow1.svg") no-repeat center center; background-size: 30px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .testimonial-slider3 .testimonial-button-prev::before { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .testimonial-slider3 .testimonial-button-next:hover:before, .testimonial-slider3 .testimonial-button-prev:hover:before { -webkit-filter: brightness(1) invert(1); filter: brightness(1) invert(1); } /* .testimonial-slider3 .swiper-slide-active .service-item { border-top: 1px solid transparent !important; border-right: 1px solid #fff !important; border-left: 1px solid transparent !important; border-bottom: 1px solid #fff !important; } */ .testimonial-slider3 .service-item-body p { font-size: 14px; height: 260px; } /************************************/ /*** 15. Agency Benefits Css ***/ /************************************/ .benefits-steps-item { position: relative; width: 100%; /* border: 1px solid var(--divider-color); */ border-radius: 8px; /* backdrop-filter: blur(100px); */ /* -webkit-backdrop-filter: blur(100px); */ /* overflow: hidden; */ /* height: calc(100% - 30px); */ margin-bottom: 30px; padding: 0px 0px; } .benefits-steps-item::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* background: var(--secondary-color); */ opacity: 40%; z-index: -1; } .benefits-steps-no { margin-bottom: 40px; } .benefits-steps-no h3 { font-size: 22px; } .benefits-steps-item .icon-box img { max-width: 80px; } .benefits-steps-content h3 { font-size: 24px; font-weight: 600; line-height: 32px; margin-bottom: 10px; font-family: "Raleway", sans-serif; margin-bottom: 0px; padding: 16px 0px; } .brainsec .benefits-steps-content .ralewayfont { font-family: 'Raleway'; } .brainsec .benefits-steps-content { width: 300px; } .benefits-steps-content p { margin: 0; font-size: 16px; font-weight: 400; font-family: "helvetica-neue-lt-pro", sans-serif; line-height: 24px; } /************************************/ /*** 16. Our Blog Css ***/ /************************************/ .our-blog { padding: 80px 0 40px; } .our-blog .section-row .section-title { max-width: 100%; } .post-item { height: calc(100px - 30px); margin-bottom: 30px; } .post-featured-image { margin-bottom: 30px; } .post-featured-image figure a { cursor: none; display: block; border-radius: 8px; overflow: hidden; } .post-featured-image img { aspect-ratio: 1 / 0.75; -o-object-fit: cover; object-fit: cover; border-radius:8px; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .post-item:hover .post-featured-image img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .post-item-content { margin-bottom: 20px; } .post-item-content h3 { font-size: 22px; } .post-item-content h3 a { color: inherit; } .post-item-btn a { position: relative; display: inline-block; font-size: 16px; font-weight: 700; line-height: 1.2em; text-transform: capitalize; color: var(--accent-color); padding-right: 30px; border: none; } .post-item-btn a:hover { color: var(--primary-color); } .post-item-btn a::before { content: ''; position: absolute; top: -2px; right: 0; background-image: url(../images/arrow-accent.svg); background-repeat: no-repeat; background-position: center center; background-size: cover; width: 24px; height: 24px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .post-item-btn a:hover::before { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /************************************/ /*** 17. Footer css ***/ /************************************/ .footer-work-together { position: relative; padding: -1px 0; } .footer-work-together::before { /*content: '';*/ display: block; position: absolute; left: -120px; top: 20%; background: url(../images/work-together-bg-shape.png) no-repeat; background-position: left center; background-size: contain; opacity: 40%; width: 305px; height: 315px; -webkit-animation: circlmoveerotate 12s infinite linear; animation: circlmoveerotate 12s infinite linear; -webkit-animation-direction: alternate; animation-direction: alternate; z-index: -1; } @-webkit-keyframes circlmoveerotate { from { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } to { -webkit-transform: translateY(160px) rotate(360deg); transform: translateY(160px) rotate(360deg); } } @keyframes circlmoveerotate { from { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } to { -webkit-transform: translateY(160px) rotate(360deg); transform: translateY(160px) rotate(360deg); } } .work-together-box { position: relative; } .work-together-content { position: relative; /* background: url('../images/work-together-bg.png') no-repeat; background-position: center center; background-size: auto; */ text-align: center; bottom: -2.5px; } /* .work-together-content::before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(../images/work-together-bg-gradient.png) no-repeat; background-position: center center; background-size: contain; width: 100%; height: 100%; z-index: -1; } */ .footer-work-together { margin-bottom: 0; } .footer-work-together h3 { font-size: 22px; text-transform: uppercase; margin-bottom: 20px; } .footer-work-together h2 { font-size: 180px; font-weight: 800; text-transform: uppercase; } .work-together-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .footer-work-together .work-together-btn a { background-color: var(--accent-color); border-radius: 50%; width: 150px; height: 150px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; text-align: center; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .footer-work-together .work-together-btn a:hover { background-color: var(--secondary-color); } .footer-work-together .work-together-btn a img { width: 100%; max-width: 24px; height: 24px; color: var(--secondary-color); -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .footer-work-together .work-together-btn a:hover img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .footer-work-together .work-together-btn a span { width: 100%; font-weight: 700; text-transform: capitalize; color: var(--dark-color); -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .footer-work-together .work-together-btn a:hover span { color: var(--primary-color); } .footer-main { /* border-top: 1px solid var(--divider-color); */ padding: 60px 0 0; } .footer-logo { margin-bottom: 24px; } .footer-contact-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; } .footer-contact-item:last-child { margin-bottom: 0; } .footer-contact-item .icon-box { border: 1px solid var(--accent-color); border-radius: 50%; width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: 20px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .footer-contact-item:hover .icon-box { border-color: var(--primary-color); } .footer-contact-item .icon-box img { max-width: 18px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .footer-contact-item:hover .icon-box img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1) } .footer-contact-content { width: calc(100% - 60px); } .footer-contact-content p { font-size: 22px; font-weight: 600; margin: 0; } .footer-links h3 { font-size: 22px; text-transform: capitalize; color: var(--primary-color); margin-bottom: 24px; } .footer-links ul { list-style: none; margin: 0; padding: 0; } .footer-links ul li { text-transform: capitalize; margin-bottom: 16px; } .footer-links ul li:last-child { margin-bottom: 0; } .footer-links ul li a { color: var(--primary-color); -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; font-family: 'helvetica-neue-lt-pro', sans-serif; } .footer-links ul li:hover a { color: var(--accent-color); } .footer-newsletter-form .form-group { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer-newsletter-form h3 { font-size: 22px; text-transform: capitalize; margin-bottom: 40px; } .footer-newsletter-form .form-group .form-control { width: 64%; padding: 12px 20px; border: 1px solid var(--divider-color); background: transparent; color: var(--text-color); border-radius: 8px; -webkit-box-shadow: none; box-shadow: none; } .footer-newsletter-form .form-group .form-control::-webkit-input-placeholder { color: var(--text-color); } .footer-newsletter-form .form-group .form-control::-moz-placeholder { color: var(--text-color); } .footer-newsletter-form .form-group .form-control:-ms-input-placeholder { color: var(--text-color); } .footer-newsletter-form .form-group .form-control::-ms-input-placeholder { color: var(--text-color); } .footer-newsletter-form .form-group .form-control::placeholder { color: var(--text-color); } .footer-newsletter-form .btn-highlighted { margin-left: 10px; } .footer-social-links { margin-top: 40px; } .footer-social-links ul { list-style: none; padding: 0; margin: 0; } .footer-social-links ul li { display: inline-block; border-radius: 50%; margin-right: 15px; } .footer-social-links ul li:last-child { margin-right: 0; } .footer-social-links ul li a { border: 1px solid var(--accent-color); border-radius: 50%; width: 36px; height: 36px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .footer-social-links ul li:hover a { border-color: var(--primary-color); } .footer-social-links ul li a i { color: #ffffff; font-size: 18px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .footer-social-links ul li:hover a i { color: var(--primary-color); } .footer-copyright { border-top: 1px solid var(--dark-divider-color); padding: 25px 0; margin-top: 60px; } .footer-copyright-text { text-align: left; } .footer-copyright-text p { margin: 0; } /************************************/ /*** 34. Responsive css ***/ /************************************/ @media only screen and (max-width: 991px) { .navbar { padding: 20px 0; } .slicknav_nav li, .slicknav_nav ul { display: block; } .responsive-menu, .navbar-toggle { display: block; } .header-social-links { display: none; } .section-row { margin-bottom: 0px; } .section-row .section-title { max-width: 100%; } .section-title { margin-bottom: 30px; } .section-title h3 { margin-bottom: 15px; } .section-title h3::before { width: 14px; height: 14px; } .section-title h1 { font-size: 70px; } .section-title h2 { font-size: 40px; } .section-title p { margin-top: 15px; } .section-content-btn .section-title-content { margin-bottom: 20px; } .section-title-content { margin-top: 15px; } .hero { padding: 180px 0 90px; min-height: auto; } .hero.hero-slider-layout .hero-slide { padding: 180px 0 90px; min-height: auto; } .hero-content .section-title { margin-bottom: 40px; } .hero-content-body { margin-left: 0px; } .hero-content-video { width: 37%; } .hero-video-content { width: 63%; } .hero-btn { margin-top: 30px; } .our-scrolling-ticker { padding: 22px 0; } .scrolling-content span { font-size: 34px; } .about-agency { padding: 80px 0 40px; } .about-agency::before { width: 300px; height: 330px; } .about-agency-content { position: initial; padding-right: 0px; margin-bottom: 30px; } .about-agency-list { gap: 30px; padding-left: 30px; margin-left: 10px; } .agency-item-content h3:after { left: -40px; } .agency-item-content h3 { font-size: 20px; } .our-services { padding: 30px 0; } .service-item { padding: 30px; } .service-item-header { margin-bottom: 20px; } .service-item-header .icon-box img { max-width: 50px; } .service-item-body h3 { font-size: 20px; margin-bottom: 15px; } .service-footer { margin-top: 10px; } .digital-success { padding: 40px 0; } .digital-success-box { gap: 40px; padding: 50px; } .digital-success-list, .digital-success-content { width: 100%; } .digital-success-content::before { display: none; } .digital-success-content .section-title { margin-bottom: 40px; } .success-counter-item h2 { font-size: 40px; } .success-list-item { margin-bottom: 40px; } .success-list-item p span { font-size: 20px; } .why-choose-us { padding: 40px 0; } .why-choose-us::before { top: 20%; width: 250px; height: 280px; } .why-choose-content { margin-right: 0; margin-bottom: 30px; } .why-choose-item { padding: 15px 20px; } .why-choose-item h3 { font-size: 20px; } .why-choose-image img { aspect-ratio: 1 / 0.73; } .join-agency { padding: 40px 0 10px; } .agency-social-item { padding: 20px 30px 20px 50px; margin: 20px 0 30px 20px; } .agency-social-item .icon-box { top: -20px; left: -20px; } .agency-social-item .icon-box a { width: 60px; height: 60px; } .agency-social-item .icon-box i { font-size: 30px; } .agency-social-content h3 { font-size: 20px; } .how-it-work { padding: 40px 0 10px; } .how-it-work::before { top: 0; width: 240px; height: 280px; } .work-process-item { padding: 30px; } .work-process-header { margin-bottom: 30px; } .work-process-title h3 { font-size: 20px; } .work-process-content { margin-bottom: 40px; } .work-process-body { padding-top: 10px; } .work-process-no h3 { font-size: 20px; } .work-process-no h2 { font-size: 34px; } .work-process-icon-box { padding: 30px; } .work-process-icon-box img { max-width: 50px; } .our-features { padding: 40px 0; } .our-features::before { top: 15%; width: 250px; height: 225px; } .digital-features-box { gap: 30px; } .digital-features-item.features-item-1 { width: calc(55% - 15px); } .digital-features-item.features-item-2 { width: calc(45% - 15px); } .digital-features-item { padding: 30px; } .digital-features-content h3 { font-size: 20px; } .digital-features-image { margin-bottom: 30px; } .digital-features-item.features-item-1 .digital-features-image img { aspect-ratio: 1 / 0.62; } .digital-features-item.agency-supports { padding: 0px 0; } .agency-supports-header { margin-bottom: 30px; padding: 0 30px; } .agency-supports-content { width: 70%; } .agency-supports-content h3 { font-size: 20px; } .agency-free-consultation { width: 30%; } .agency-free-consultation img { max-width: 80px; } .agency-supports-logo { padding: 20px 25px; } .agency-supports-logo img { max-height: 25px; } .our-portfolio { padding: 40px 0 10px; } .our-Project-nav { margin-bottom: 40px; } .our-Project-nav ul { gap: 10px 20px; } .our-Project-nav ul li a { font-size: 14px; padding: 10px 15px; } .project-item { height: calc(100% - 30px); margin-bottom: 30px; } .project-btn a { width: 80px; height: 80px; } .project-btn a img { max-width: 34px; } .project-content h3 { font-size: 20px; } .our-testimonial { padding: 40px 0; } .our-testimonial::before { width: 250px; height: 245px; } .testimonial-review-box { padding: 30px; margin-bottom: 30px; } .testimonial-review-content, .testimonial-review-header { margin-bottom: 20px; } .testimonial-review-header h2 { font-size: 60px; } .testimonial-review-content h3 { font-size: 20px; } .testimonial-slider { margin-left: 0px; } .testimonial-company-logo { margin-bottom: 20px; } .testimonial-content { margin-bottom: 30px; } .testimonial-content p { font-size: 20px; } .author-content h3 { font-size: 20px; } .testimonial-slider .testimonial-button-next, .testimonial-slider .testimonial-button-prev { width: 50px; height: 50px; } .testimonial-slider .testimonial-button-next::before, .testimonial-slider .testimonial-button-prev::before { background-size: 24px auto; } .testimonial-benefits-box { gap: 20px; margin-top: 50px; padding: 30px 15px; } .testimonial-benefits-item { width: calc(25% - 15px); } .testimonial-benefits-item::before { right: -10px; } .testimonial-benefits-item .icon-box { margin-bottom: 20px; } .testimonial-benefits-content h3 { font-size: 20px; margin-bottom: 15px; } .testimonial-benefits-content ul li { font-size: 14px; padding-left: 18px; margin-bottom: 10px; } .testimonial-benefits-content ul li::before { font-size: 14px; } .agency-benefits { padding: 40px 0 10px; } .agency-benefits::before { width: 210px; height: 220px; } .benefits-steps-item { padding: 20px; } .benefits-steps-item .icon-box, .benefits-steps-no { margin-bottom: 30px; } .benefits-steps-item .icon-box img { max-width: 75px; } .benefits-steps-content h3 { font-size: 20px; } .our-blog { padding: 40px 0 10px; } .post-featured-image { margin-bottom: 20px; } .post-item-content { margin-bottom: 15px; } .post-item-content h3 { font-size: 20px; } .footer-work-together { padding: 40px 0; } .footer-work-together::before { top: 0; width: 245px; height: 355px; } @-webkit-keyframes circlmoveerotate { from { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } to { -webkit-transform: translateY(100px) rotate(360deg); transform: translateY(100px) rotate(360deg); } } @keyframes circlmoveerotate { from { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } to { -webkit-transform: translateY(100px) rotate(360deg); transform: translateY(100px) rotate(360deg); } } .work-together-content { background-size: cover; } .footer-work-together h3 { font-size: 20px; margin-bottom: 10px; } .footer-work-together h2 { font-size: 120px; } .footer-work-together .work-together-btn a { width: 120px; height: 120px; } .footer-main { padding: 0px 0 0; border-top: none !important; } .footer-logo { margin-bottom: 40px; } .footer-contact-item { margin-bottom: 20px; } .footer-contact-content p { font-size: 20px; } .footer-newsletter-form h3, .footer-links h3 { font-size: 20px; margin-bottom: 20px; } .footer-links ul li { margin-bottom: 10px; } .footer-newsletter-form { margin-top: 30px; } .footer-newsletter-form .form-group .form-control { width: 80%; } .footer-social-links { margin-top: 30px; } .footer-copyright { padding: 30px 0; margin-top: 40px; } .page-header { padding: 182px 0 80px; } .page-header-box h1 { font-size: 70px; } .page-header-box ol li.breadcrumb-item { font-size: 16px; } .our-scrolling-ticker.subpages-scrolling-ticker .scrolling-content span { font-size: 20px; } .our-approach { padding: 40px 0 10px; } .mission-vision-item { padding: 30px; } .mission-vision-image { margin-bottom: 15px; } .mission-vision-item .mission-vision-content h3 { font-size: 20px; margin-bottom: 15px; } .who-we-are { padding: 40px 0; } .who-we-are::before { top: -13%; width: 210px; height: 220px; } .who-we-are .who-we-are-content { padding-right: 0px; margin-bottom: 30px; } .experts-counters-list { gap: 40px; } .experts-counter-box { width: calc(50% - 20px); gap: 40px; } .experts-counter-box:nth-child(even) { margin-top: 40px; } .experts-counter-content h2 { font-size: 40px; } .executive-partners { padding: 40px 0; } .executive-partners-box { padding: 50px; } .executive-partners-box .section-title { margin-bottom: 30px; } .our-team { padding: 40px 0 10px; } .our-team::before { top: -5%; width: 250px; height: 280px; } .team-image figure, .team-image img { aspect-ratio: 1 / 1.3; } .team-content h3 { font-size: 20px; } .our-faqs { padding: 40px 0; } .faq-images { max-width: 80%; margin: 0 auto 30px; padding: 100px 80px 0 0; } .faq-img-1 img { max-width: 285px; } .faq-img-2 img { aspect-ratio: 1 / 0.9; } .our-faq-section .accordion-header .accordion-button { font-size: 20px; } .page-services { padding: 80px 0 10px; } .page-service-single { padding: 80px 0 40px; } .page-service-single::before { width: 300px; height: 330px; } .page-service-single::after { width: 250px; height: 280px; } .service-single-content { margin: 0 0 40px 0; } .service-feature-image { margin-bottom: 30px; } .service-feature-image img { aspect-ratio: 1 / 0.59; } .service-entry { margin-bottom: 30px; } .service-entry h2 { font-size: 40px; } .service-entry-list-image { margin: 30px 0; gap: 20px; } .service-entry-list { width: calc(55% - 10px); } .service-entry-list ul li { margin-bottom: 15px; padding-left: 25px; } .service-entry-list ul li::before { font-size: 16px; } .service-entry-image { width: calc(45% - 10px); } .process-step-content { padding: 30px; } .process-step-header { margin-bottom: 50px; } .process-step-header .icon-box img { max-width: 48px; } .process-step-no h3 { font-size: 20px; } .process-step-body h3 { font-size: 20px; } .process-step-image img { aspect-ratio: 1 / 0.8; } .service-sidebar { position: initial; } .service-catagery-list { margin-bottom: 40px; } .service-catagery-list h3 { font-size: 20px; padding: 30px 30px 20px; } .service-catagery-list ul { padding: 20px 30px 30px; } .service-catagery-list ul li { padding-bottom: 20px; margin-bottom: 20px; } .sidebar-cta-box { padding: 30px; } .sidebar-cta-box .icon-box { margin-bottom: 30px; } .sidebar-cta-box .icon-box img { max-width: 50px; } .cta-contact-content h3 { font-size: 20px; margin-bottom: 10px; } .page-blog { padding: 80px 0 40px; } .page-blog::before { width: 300px; height: 330px; } .post-item { height: calc(100% - 30px); margin-bottom: 30px; } .page-pagination { margin-top: 10px; } .page-single-post { padding: 80px 0 40px; } .post-image { margin-bottom: 20px; } .post-entry blockquote { background-position: 25px 25px; background-size: 50px; padding: 25px 25px 25px 90px; margin-bottom: 20px; } .post-entry blockquote p { font-size: 18px; } .post-entry h2 { font-size: 40px; } .post-entry ul li { font-size: 16px; } .post-tags { margin-bottom: 20px; } .post-social-sharing ul { text-align: left; } .tag-links { font-size: 22px; } .post-tags .tag-links a { font-size: 16px; padding: 6px 15px; } .page-project { padding: 80px 0 10px; } .page-project::before { width: 300px; height: 330px; } .page-project-single { padding: 80px 0 40px; } .page-project-single::before { top: 20%; width: 210px; height: 220px; } .page-project-single::after { width: 250px; height: 280px; } .project-single-content { margin-right: 0; margin-bottom: 30px; } .project-single-image { margin-bottom: 30px; } .project-single-content img { aspect-ratio: 1 / 0.57; } .project-challenges, .project-info, .project-entry { margin-bottom: 30px; } .project-entry p { margin-bottom: 20px; } .project-entry h2 { font-size: 40px; margin-bottom: 20px; } .project-entry ul li { margin-bottom: 15px; padding-left: 25px; } .project-entry ul li::before { font-size: 16px; } .project-solution-rating { margin-top: 0; } .project-counter-content h3 { font-size: 34px; } .project-sidebar { position: initial; } .project-catagery-list { margin-bottom: 40px; } .category-item-list { padding: 30px 30px 20px; } .category-list-item h3 { font-size: 20px; margin-bottom: 5px; } .category-social-link { padding: 30px; } .category-social-link .social-links { font-size: 20px; } .page-team { padding: 80px 0 10px; } .page-team::before { width: 245px; height: 355px; } .page-team-single { padding: 80px 0 40px; } .page-team-single::before { top: 40%; width: 250px; height: 280px; } .team-single-content { margin-right: 0; } .team-info-box { margin-bottom: 40px; } .team-info-header { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; } .team-single-content h2 { font-size: 40px; } .team-contact-box { padding-bottom: 20px; margin-bottom: 20px; } .team-contact-box .icon-box { width: 65px; height: 65px; } .team-contact-box .icon-box img { max-width: 30px; } .team-contact-content { width: calc(100% - 95px); } .team-contact-content h3 { font-size: 20px; margin-bottom: 5px; } .team-personal-info { margin-bottom: 40px; } .team-career-list { margin-top: 20px; } .team-career-list ul { row-gap: 15px; } .team-single-sidebar { position: initial; margin-bottom: 30px; } .team-single-image { margin-bottom: 40px; } .team-single-image img { aspect-ratio: 1 / 0.8; -o-object-position: top center; object-position: top center; } .team-single-contact-form h3 { font-size: 28px; padding: 30px; } .team-single-contact-form form { padding: 30px; } .page-pricing { padding: 80px 0 40px; } .pricing-box-list { gap: 30px; } .pricing-box { width: calc(50% - 15px); padding: 30px; } .pricing-box-content { gap: 15px; margin-bottom: 30px; padding-bottom: 30px; } .pricing-title { width: calc(52% - 7.5px); } .pricing-title h3 { font-size: 26px; margin-bottom: 5px; } .pricing-price { width: calc(48% - 7.5px); } .pricing-price h2 { font-size: 40px; } .pricing-price h2 sup { font-size: 20px; } .pricing-price h2 sub { font-size: 14px; } .pricing-list ul { gap: 15px; } .pricing-list ul li { width: 100%; } .pricing-list { margin-bottom: 30px; } .page-testimonial { padding: 80px 0 40px; } .testimonial-box-list { gap: 40px; } .testimonial-box-item { padding: 40px 30px; gap: 30px; } .client-author-image { width: calc(32% - 15px); } .client-testimonial-content { width: calc(68% - 15px); } .client-testimonial-rating { margin-bottom: 10px; } .client-testimonial-info p { font-size: 18px; } .client-author-title h3 { font-size: 20px; } .page-gallery { padding: 80px 0 10px; } .page-video-gallery { padding: 80px 0 10px; } .page-faqs { padding: 80px 0 40px; } .page-faqs-catagery { margin-right: 0px; } .page-faq-accordion { margin-bottom: 40px; } .faq-sidebar { position: initial; margin-bottom: 30px; } .faq-catagery-list { margin-bottom: 40px; } .faq-catagery-list ul { padding: 30px; } .faq-catagery-list ul li { padding-bottom: 20px; margin-bottom: 20px; } .page-contact-us { padding: 80px 0 40px; } .contact-information { margin-bottom: 30px; } .contact-info-box { gap: 20px; } .contact-info-box .info-box-1, .contact-info-box .info-box-2 { padding: 20px 30px; } .contact-info-item .icon-box { margin-bottom: 20px; } .contact-info-item .icon-box img { max-width: 40px; } .contact-info-box .info-box-2 .contact-item-content { width: calc(100% - 70px); } .contact-item-content h3 { font-size: 20px; } .contact-us-form { margin: 0; padding: 30px; } .google-map { padding: 40px 0; } .google-map-iframe, .google-map-iframe iframe { height: 450px; } .error-page { padding: 80px 0 40px; } .error-page-image { margin-bottom: 20px; } .error-page-image img { max-width: 80%; } .error-page-content-heading { margin-bottom: 15px; } .error-page-content-body p { margin-bottom: 20px; } } @media only screen and (max-width: 767px) { body { background-size: 200% auto; } .section-title h1 { font-size: 34px; } .section-title h2 { font-size: 30px; } .hero-content { text-align: left; padding-top: 0px; } .hero-content .section-title { margin-bottom: 30px; } .hero-content-body { display: block; } .hero-content-video { width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; margin-bottom: 30px; } .hero-content-video .video-play-button a { height: 80px; width: 80px; } .hero-content-video .video-play-button a i { font-size: 25px; } .learn-more-circle img { max-width: 80px; } .hero-video-content { width: 100%; } .scrolling-ticker-box { --gap: 20px; } .scrolling-content span { font-size: 28px; } .scrolling-content span img { max-width: 20px; margin-right: 20px; } .about-agency::before { width: 250px; height: 280px; } .about-agency-list { padding-left: 20px; } .agency-item-content h3:after { left: -30px; } .agency-item-content h3 { font-size: 18px; } .service-item { padding: 20px; } .service-item-body h3 { font-size: 18px; } .service-footer p { font-size: 12px; } .digital-success-box { gap: 30px; padding: 40px 30px; } .digital-success-box::before { left: 10px; top: 10px; border-radius: 8px; width: calc(100% - 20px); height: calc(100% - 10px); } .success-counter-box { gap: 20px; } .success-counter-item { width: 100%; } .success-counter-item h2 { font-size: 30px; } .success-list-item { background-size: 18px auto; margin-bottom: 30px; } .success-list-item p span { font-size: 18px; } .why-choose-us::before { top: 30%; width: 200px; height: 230px; } .why-choose-item h3 { font-size: 18px; } .agency-social-item { margin: 15px 0 30px 15px; } .agency-social-item .icon-box { top: -15px; left: -15px; } .agency-social-item .icon-box a { width: 50px; height: 50px; } .agency-social-item .icon-box i { font-size: 20px; } .agency-social-content h3 { font-size: 18px; } .how-it-work::before { width: 180px; height: 220px; } .work-process-header { margin-bottom: 20px; } .work-process-title h3 { font-size: 18px; } .work-process-content { margin-bottom: 30px; } .work-process-body { padding-top: 20px; } .work-process-no h3 { font-size: 18px; } .work-process-no h2 { font-size: 28px; } .our-features::before { right: -70px; top: 13%; width: 150px; height: 135px; } .digital-features-item.features-item-2, .digital-features-item.features-item-1 { width: 100%; } .digital-features-item.features-item-1 .digital-features-image img { aspect-ratio: 1 / 0.72; } .digital-features-item { padding: 20px; } .digital-features-image { margin-bottom: 20px; } .digital-features-content h3 { font-size: 18px; } .agency-supports-header { display: block; } .agency-supports-content, .agency-free-consultation { width: 100%; } .agency-supports-content h3 { font-size: 18px; } .agency-free-consultation { text-align: left; margin-top: 20px; } .agency-supports-slider::before { background: -o-linear-gradient(170deg, #030709 0%, rgba(3, 7, 9, 0) 60.97%); background: linear-gradient(280deg, #030709 0%, rgba(3, 7, 9, 0) 60.97%); width: 150px; } .agency-supports-slider::after { background: -webkit-gradient(linear, left top, right top, from(#030709), color-stop(60.97%, rgba(3, 7, 9, 0))); background: -o-linear-gradient(left, #030709 0%, rgba(3, 7, 9, 0) 60.97%); background: linear-gradient(90deg, #030709 0%, rgba(3, 7, 9, 0) 60.97%); width: 150px; } .project-btn a { width: 60px; height: 60px; } .project-btn a img { max-width: 26px; } .project-content h3 { font-size: 18px; } .testimonial-review-box { padding: 20px; } .testimonial-review-header h2 { font-size: 40px; } .testimonial-review-content h3 { font-size: 18px; } .testimonial-company-logo, .testimonial-rating { margin-bottom: 15px; } .testimonial-content p { font-size: 18px; } .author-content h3 { font-size: 18px; } .testimonial-btn { position: relative; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; margin-top: 0px; } .testimonial-slider .testimonial-button-next, .testimonial-slider .testimonial-button-prev { width: 45px; height: 45px; } .testimonial-benefits-box { gap: 30px; padding: 30px 20px; } .testimonial-benefits-item { width: 100%; } .testimonial-benefits-item::before { top: auto; bottom: -15px; right: 0; border-right: none; border-bottom: 1px solid var(--divider-color); width: 100%; height: 1px; z-index: 1; } .testimonial-benefits-item:last-child:before { display: none; } .testimonial-benefits-content h3 { font-size: 18px; margin-bottom: 10px; } .benefits-steps-item .icon-box, .benefits-steps-no { margin-bottom: 10px; } .benefits-steps-no h3 { font-size: 18px; } .benefits-steps-content h3 { font-size: 20px; line-height: 28px; } .post-item-content h3 { font-size: 18px; } .footer-work-together::before { left: -90px; width: 180px; height: 190px; } .footer-work-together h3 { font-size: 18px; } .footer-work-together h2 { font-size: 55px; } .work-together-btn { top: 56%; } .footer-work-together .work-together-btn a { width: 85px; height: 85px; } .footer-work-together .work-together-btn a span { font-size: 12px; } .about-footer { margin-bottom: 30px; } .footer-contact-content p { font-size: 18px; } .footer-logo { margin-bottom: 30px; } .footer-newsletter-form h3, .footer-links h3 { font-size: 18px; margin-bottom: 15px; } .footer-newsletter-form .form-group .form-control { width: 57%; } .footer-copyright { padding: 20px 0; margin-top: 30px; } .page-header-box h1 { font-size: 34px; } .our-scrolling-ticker.subpages-scrolling-ticker .scrolling-content span { font-size: 18px; } .our-scrolling-ticker.subpages-scrolling-ticker .scrolling-content span img { max-width: 16px; } .mission-vision-item { padding: 20px; } .mission-vision-item .mission-vision-content h3 { font-size: 18px; } .experts-rating-video-image { width: 100%; margin-bottom: 20px; } .who-we-are-client { width: 100%; padding-left: 0px; } .experts-counter-box { width: 100%; gap: 30px; } .experts-counter-box:nth-child(even) { margin-top: 0px; } .experts-counter-item { padding: 20px; } .experts-counter-box.expert-box-2 .experts-counter-item:nth-child(odd) { background: url(../images/who-we-are-counter-bg.png); } .experts-counter-box.expert-box-2 .experts-counter-item:nth-child(even) { background: transparent; } .experts-counter-content h2 { font-size: 30px; } .executive-partners-box { padding: 30px; } .our-partners-list { gap: 20px; } .our-partners-list .company-logo { width: calc(50% - 10px); padding: 15px; } .faq-images { max-width: 100%; padding: 80px 50px 0 0; } .faq-img-1 img { max-width: 185px; } .faq-cta-box a { font-size: 14px; padding: 8px 15px; } .our-faq-section .accordion-item { margin-bottom: 20px; } .our-faq-section .accordion-header .accordion-button { font-size: 18px; padding: 12px 40px 12px 12px; } .our-faq-section .accordion-item .accordion-button::after, .our-faq-section .accordion-item .accordion-button.collapsed::after { right: 12px; font-size: 12px; width: 20px; height: 20px; } .our-faq-section .accordion-item .accordion-body { padding: 0 12px 12px 12px; } .page-service-single::before { width: 250px; height: 280px; } .page-service-single::after { width: 250px; height: 280px; } .service-feature-image img { aspect-ratio: 1 / 0.78; } .service-entry h2 { font-size: 30px; } .service-entry-list-image { gap: 30px; } .service-entry-list, .service-entry-image { width: 100%; } .service-entry-list ul li { font-size: 14px; padding-left: 20px; } .service-entry-list ul li::before { font-size: 14px; } .service-entry-image img { aspect-ratio: 1 / 0.68; -o-object-position: top center; object-position: top center; } .service-process-steps { gap: 20px; margin: 0; } .process-step-item { gap: 20px; } .process-step-content, .process-step-image { width: 100%; } .process-step-content { padding: 20px; } .process-step-header { margin-bottom: 50px; } .process-step-header .icon-box img { max-width: 36px; } .process-step-no h3 { font-size: 18px; } .process-step-body h3 { font-size: 18px; margin-bottom: 15px; } .process-step-image img { aspect-ratio: 1 / 0.72; } .service-catagery-list { margin-bottom: 30px; } .service-catagery-list h3 { font-size: 18px; padding: 20px; } .service-catagery-list ul { padding: 20px; } .service-catagery-list ul li { padding-bottom: 15px; margin-bottom: 15px; } .service-catagery-list ul li a::before { width: 22px; height: 22px; } .sidebar-cta-box { padding: 20px; } .sidebar-cta-box .icon-box { margin-bottom: 25px; } .sidebar-cta-box .icon-box img { max-width: 40px; } .cta-contact-content h3 { font-size: 18px; } .cta-contact-btn a { padding: 10px 25px; } .cta-contact-btn a img { max-width: 22px; margin-right: 10px; } .page-blog::before { width: 250px; height: 280px; } .post-image figure, .post-image img { aspect-ratio: 1 / 0.70; } .post-entry blockquote { background-position: 20px 20px; padding: 70px 20px 20px 20px; } .post-entry h2 { font-size: 28px; } .tag-links { font-size: 20px; } .page-project::before { width: 250px; height: 280px; } .page-project-single::before { width: 210px; height: 220px; } .page-project-single::after { top: 53%; width: 200px; height: 230px; } .project-single-content { margin-bottom: 20px; } .project-single-content img { aspect-ratio: 1 / 0.67; } .project-entry h2 { font-size: 30px; } .project-entry ul li { font-size: 14px; margin-bottom: 10px; } .project-solution-rating { gap: 15px; } .project-rating-counter .icon-box i { font-size: 36px; } .project-counter-content { width: calc(100% - 56px); } .project-counter-content h3 { font-size: 28px; } .project-rating-content, .project-rating-counter { width: 100%; } .category-item-list { padding: 20px; } .category-list-item { padding-bottom: 15px; margin-bottom: 15px; } .category-list-item h3 { font-size: 18px; } .category-social-link { padding: 20px; } .category-social-link span { font-size: 20px; } .page-team::before { width: 180px; height: 190px; } .page-team-single::before { width: 200px; height: 230px; } .team-info-box { margin-bottom: 30px; } .team-info-header { margin-bottom: 30px; gap: 10px; } .team-info-title, .team-info-social-list { width: 100%; } .team-info-social-list ul { text-align: left; } .team-single-content p { margin-bottom: 15px; } .team-single-content h2 { font-size: 30px; } .team-contact-box { padding-bottom: 15px; margin-bottom: 15px; } .team-contact-box .icon-box { margin-right: 20px; } .team-contact-content { width: calc(100% - 85px); } .team-contact-content h3 { font-size: 18px; } .team-personal-info { margin-bottom: 30px; } .team-career-list ul { gap: 10px; } .team-career-list ul li { width: 100%; padding-left: 25px; } .team-career-list ul li::before { font-size: 16px; } .team-single-image { margin-bottom: 25px; } .team-single-image img { aspect-ratio: 1 / 1.08; } .team-single-contact-form h3 { font-size: 30px; padding: 20px; } .team-single-contact-form form { padding: 20px; } .pricing-box { width: 100%; padding: 20px; } .pricing-box-content { margin-bottom: 20px; padding-bottom: 20px; } .pricing-title h3 { font-size: 22px; } .pricing-price h2 { font-size: 30px; } .pricing-price h2 sup { font-size: 16px; } .pricing-list ul li { padding-left: 25px; } .pricing-list ul li::before { font-size: 16px; } .testimonial-box-item { padding: 20px 15px; gap: 20px; text-align: center; } .client-author-image { width: 100%; max-width: 120px; margin: 0 auto; } .client-testimonial-content { width: 100%; } .client-testimonial-info p { font-size: 16px; } .client-author-content { gap: 15px; } .client-author-title, .client-author-logo { width: 100%; text-align: center; } .client-author-title h3 { font-size: 18px; } .page-faq-accordion { margin-bottom: 30px; } .faq-catagery-list { margin-bottom: 30px; } .faq-catagery-list ul { padding: 20px; } .contact-info-box .info-box-1, .contact-info-box .info-box-2 { padding: 20px; gap: 40px; } .contact-info-box .info-box-1 .contact-info-item::before { top: auto; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 20px); -ms-transform: translate(-50%, 20px); transform: translate(-50%, 20px); height: 1px; width: 100%; } .contact-info-box .info-box-1 .contact-info-item:nth-child(2n + 2):before { display: block; } .contact-info-box .info-box-1 .contact-info-item:last-child:before { display: none; } .contact-info-box .info-box-1 .contact-info-item { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .contact-info-item .icon-box img { max-width: 32px; } .contact-info-box .info-box-1 .icon-box, .contact-info-box .info-box-2 .icon-box { margin: 0 25px 0 0; } .contact-info-box .info-box-1 .contact-item-content, .contact-info-box .info-box-2 .contact-item-content { width: calc(100% - 57px); text-align: left; } .contact-item-content h3 { font-size: 18px; } .contact-us-form { padding: 20px; } .google-map-iframe, .google-map-iframe iframe { height: 350px; } } .navbar-brand img { height: 50px; } .footer-logo img { height: 70px; } .hero-bg-video { position: relative; } .hero-bg-video::before { position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(43%, rgba(255, 255, 255, 1)), color-stop(55%, rgba(0, 0, 0, .1)), color-stop(72%, rgba(0, 0, 0, .1))); background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 43%, rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .1) 72%); background: linear-gradient(90deg, rgba(255, 255, 255, 1) 43%, rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .1) 72%); } .brainsec { background: -webkit-gradient(linear, left top, right top, color-stop(5%, rgba(8, 35, 38, 1)), color-stop(60%, rgba(8, 35, 38, 1)), to(rgba(0, 0, 0, 1))); background: -o-linear-gradient(left, rgba(8, 35, 38, 1) 5%, rgba(8, 35, 38, 1) 60%, rgba(0, 0, 0, 1) 100%); background: linear-gradient(90deg, rgba(8, 35, 38, 1) 5%, rgba(8, 35, 38, 1) 60%, rgba(0, 0, 0, 1) 100%); padding-left: 0px !important; } .text-right { text-align: right; } .brainsec .section-title h2 { width: 80%; position: relative; } .brainsec .hero-bg-video { position: absolute; top: 0; right: 0; /* left: 0; */ bottom: 0; width: 100%; height: 100%; z-index: 0; } .hero-bg-video::before { position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(46%, rgba(255, 255, 255, 1)), color-stop(85%, rgba(0, 0, 0, .1)), color-stop(70%, rgba(0, 0, 0, .1))); background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 46%, rgba(0, 0, 0, .1) 85%, rgba(0, 0, 0, .1) 70%); background: linear-gradient(90deg, rgba(255, 255, 255, 1) 46%, rgba(0, 0, 0, .1) 85%, rgba(0, 0, 0, .1) 70%); } /* Flip Card Container */ .flip-card { height: 100%; } .service-item-body p { height: 200px; } .testimonial-slider1 .service-item-body p { height: 220px; } /* Inner wrapper */ .flip-card-inner { width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.8s ease; transition: -webkit-transform 0.8s ease; -o-transition: transform 0.8s ease; transition: transform 0.8s ease; transition: transform 0.8s ease, -webkit-transform 0.8s ease; } /* Back Side */ /* .flip-card-back { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; align-items: center; background: transparent; color: #111; } .flip-card-inner.flipped { transform: rotateY(180deg); } */ .flip-card-back a { color: #1e8a8a !important; } .top-in li { list-style: none; /* display: inline-block; */ text-transform: lowercase; padding: 0px 0px; } .topheader { background: #082326; padding: 10px 0px; display: flex; border-bottom: 1px solid #0e3033; height: 48px; align-items: center } .top-in { display: flex; margin-bottom: 0px; gap: 40px; justify-content: end; } .top-in li select { background: transparent; color: #fff; border: none; outline: none; padding: 0px 0px 0px 0px; font-size: 14px; font-family: "helvetica-neue-lt-pro", sans-serif; font-weight: 400; } .top-in li a { color: #fff !important; font-family: "helvetica-neue-lt-pro", sans-serif; font-size: 16px; font-weight: 400; } .top-in li option { background: transparent; color: #000; border: none; outline: none; font-family: "helvetica-neue-lt-pro", sans-serif; font-size: 13px; } .top-icon-gap { display: flex; gap: 8px; } #chcp_font_size button { border: none; background-color: transparent; /*background-color:#eee;*/ text-shadow: none; /*+box-shadow: none;*/ -webkit-box-shadow: none; box-shadow: none; padding: 0px 0px; margin: 0px 0px; } /*#chcp_font_size button:hover {*/ /* color: #fff ;*/ /*}*/ .font-increase-waber { display: flex; gap: 40px; } #btn-decrease { font-size: 12px; } #btn-orig { font-size: 14px; } #btn-increase { font-size: 12px; } .top-in .btn-default::before { display: none; } .custom-select1 { position: relative; display: inline-block; } .custom-select { position: relative; display: inline-block; } /* Remove default arrow */ .custom-select select { appearance: none; /* for most browsers */ -webkit-appearance: none; /* for Safari */ -moz-appearance: none; /* for Firefox */ padding: 8px 30px 8px 10px; /* space on right for arrow */ font-size: 16px; border: 1px solid #ccc; border-radius: 8px; background-color: #fff; cursor: pointer; } /* Our dotted arrow */ .custom-select::after { /*content: '';*/ position: absolute; right: -15px; top: 12%; width: 30px; height: 30px; background-image: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16.8' cy='10.8' r='1.2' transform='rotate(90 16.8 10.8)' fill='white'/%3E%3Ccircle cx='19.2004' cy='8.4' r='1.2' transform='rotate(90 19.2004 8.4)' fill='white'/%3E%3Ccircle cx='12.0002' cy='15.6' r='1.2' transform='rotate(90 12.0002 15.6)' fill='white'/%3E%3Ccircle cx='9.5998' cy='13.2' r='1.2' transform='rotate(90 9.5998 13.2)' fill='white'/%3E%3Ccircle cx='7.20039' cy='10.8' r='1.2' transform='rotate(90 7.20039 10.8)' fill='white'/%3E%3Ccircle cx='4.8' cy='8.4' r='1.2' transform='rotate(90 4.8 8.4)' fill='white'/%3E%3Ccircle cx='14.3996' cy='13.2' r='1.2' transform='rotate(90 14.3996 13.2)' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; /* border-left: 3px dotted #ffffff; border-bottom: 3px dotted #ffffff; transform: translateY(-50%) rotate(-45deg); */ pointer-events: none; } /* .custom-select::after { content: ''; position: absolute; right: -3px; top: 40%; width: 15px; height: 15px; border-left: 3px dotted #ffffff; border-bottom: 3px dotted #ffffff; transform: translateY(-50%) rotate(-45deg); pointer-events: none; } */ .search-box { position: relative; display: inline-block; } .btn-search { width: 32px; height: 32px; padding: 0px; border: none; outline: none; background: transparent; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .btn-search svg { -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .input-search { position: absolute; top: 60px; /* below the button */ left: 0; width: 200px; height: 0; opacity: 0; padding: 0 10px; border: none; border-radius: 8px; background-color: rgb(8 35 38 .5); color: #fff; font-size: 16px; letter-spacing: 1px; outline: none; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } /* when focused, slide open */ .search-box.active .input-search { height: 40px; opacity: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .darp-1 { display: flex; gap: 8px; align-items: center; } /* icon animation */ .search-box.active .btn-search svg { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .top-in li a {} .topbar_text_slider .bx-wrapper { background: transparent !important; -webkit-box-shadow: none !important; box-shadow: none !important; margin-bottom: 0px !important; line-height: 1.5; } .bxslider { background: transparent !important; color: #fff; text-align: left; padding: 0; margin: 0; border: 0px !important; line-height: 1.5; font-weight: 300; } .bxslider li { font-size: 60px; padding: 0px 0; font-weight: 100; color: #000; font-family: "Raleway", sans-serif; font-weight: 300; -webkit-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; } .topbar_text_slider { visibility: hidden; /* Hide before slider initializes */ } .bx-wrapper { visibility: visible !important; /* Reveal once bxSlider wraps it */ } /* .final-text { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 70px; color: #000; line-height: 1.2; margin-top: -90px !important; font-family: 'Raleway', sans-serif; } */ .hero-content .section-title h1 span { color: #000 !important; font-weight: 400 !important; } .final-line { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; font-size: 43px; font-family: 'Raleway', sans-serif; line-height: 1.3; color: #000; width: 100%; margin-top: 30px; word-break: break-word; } .final-line .word { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0px; } .final-line .divider { font-weight: bold; color: #000; opacity: 0.7; } .final-line .letter { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); display: inline-block; -webkit-animation: slideUp 0.4s forwards; animation: slideUp 0.4s forwards; } @-webkit-keyframes slideUp { to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideUp { to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .mainbannerh1 { display: inline-block; overflow: hidden; height: 100%; vertical-align: middle; } .mainbannerh1 .bxslider.text, .mainbannerh1 .bx-wrapper, .mainbannerh1 .bx-viewport { height: 100% !important; } .mainbannerh1 .bxslider.text li { display: -webkit-box; display: -ms-flexbox; display: flex; } /* .topbar_text_slider1 { position: relative; overflow: hidden; } .vertical-reveal { list-style: none; margin: 0; padding: 0; transform: translateY(100%); animation: moveUpMarquee 6s ease-out forwards; } .vertical-reveal li { font-size: 60px; font-weight: 300; font-family: "Raleway", sans-serif; color: #000 !important; line-height: 80px; } @keyframes moveUpMarquee { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } */ .topbar_text_slider { position: relative; overflow: hidden; } .vertical-reveal { list-style: none; margin: 0; padding: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-animation: moveUpHold 6s ease-out forwards; animation: moveUpHold 6s ease-out forwards; } .vertical-reveal li { font-size: 60px; font-weight: 300; font-family: "Raleway", sans-serif; color: #000 !important; line-height: 80px; } @-webkit-keyframes moveUpHold { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 20% { -webkit-transform: translateY(66%); transform: translateY(66%); } 35% { -webkit-transform: translateY(66%); transform: translateY(66%); } 50% { -webkit-transform: translateY(33%); transform: translateY(33%); } 65% { -webkit-transform: translateY(33%); transform: translateY(33%); } 80% { -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes moveUpHold { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 20% { -webkit-transform: translateY(66%); transform: translateY(66%); } 35% { -webkit-transform: translateY(66%); transform: translateY(66%); } 50% { -webkit-transform: translateY(33%); transform: translateY(33%); } 65% { -webkit-transform: translateY(33%); transform: translateY(33%); } 80% { -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } .footer-main .firstrow { padding: 20px 0px 0px; } .footer-main .firstrow p { margin-bottom: 16px !important; font-family: 'Helvetica', 'Arial', sans-serif; } .bx-wrapper { border: 0px !important; margin-bottom: 0px; } .hero { padding-left: 0px; } /* .hero-bg-video1{ position: absolute; top: 0px; right: 0px; height: 800px; object-fit: cover; } */ .hero { position: relative; margin-top: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero::before { position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; background: linear-gradient(90deg, #082326 0%, #082326 50%, rgba(8, 35, 38, 0.4) 70%, rgba(8, 35, 38, 0) 100%); z-index: -1; } .learn-more-circle span { position: absolute; top: 40px; left: 40px; text-align: center; color: #1e8a8a; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); font-size: 30px; } .learn-more-circle { position: relative; } .our-services { position: relative; overflow: hidden; background: #082326; z-index: 0; } .our-services #myVideo { position: absolute; left: -35%; top: -11%; -o-object-fit: cover; object-fit: cover; width: 80%; height: 90%; z-index: -2; } /* Overlay to control opacity */ .our-services::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(8 35 38 / 80%); z-index: -1; } .ser-btn a { background: #fff; padding: 0px 24px 0px 24px; border-radius: 60px; font-size: 16px; color: #082326; font-weight: 400; font-family: 'helvetica-neue-lt-pro'; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 48px; gap: 5px; } .thepath .ser-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .ser-btn span { /* line-height: 24px !important; */ padding-left: 5px; } .anabtn a { background: transparent !important; padding: 0px 0px 0px 0px !important; border-radius: 0px !important; font-size: 16px; line-height: 24px !important; color: #fff !important; font-weight: 500; font-family: 'helvetica-neue-lt-pro'; } .ser-btn { margin-top: 25px; } .ser-btn1 a { color: #fff !important; font-family: 'helvetica-neue-lt-pro'; font-size: 16px; font-weight: 400; line-height: 24px; } .thepathsec .ser-btn1 a { color: #fff !important; font-family: 'helvetica-neue-lt-pro'; font-size: 16px; font-weight: 700; line-height: 24px; } .ser-btn2 a { background: #082326; padding: 0px 24px 0px 24px; border-radius: 60px; line-height: 24px; font-size: 16px; font-weight: 400; color: #fff; font-family: 'helvetica-neue-lt-pro'; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 48px; } .serbtn1 a { background: transparent !important; color: #000; padding: 0px 0px; } .serbtn1 { margin-top: 0px; } .agency-item-content p { color: #000; margin-bottom: 24px; } .success-counter-item h2, .success-counter-item p { color: #082326; } .success-counter-item p { font-family: 'helvetica-neue-lt-pro' !important; font-weight: 400; font-size: 20px; } .countingss .col-sm-2 { border-top: 1px solid #000; border-left: 1px solid #000; /* border-right: .5px solid #000; */ border-bottom: 1px solid #000; padding: 0px 0px; } .countingss .success-counter-box1 { padding: 10px 20px; height: 290px; } .countingss .success-counter-box1 h2 { height: 225px; font-family: "Inter", sans-serif; font-size: 60px; } .firstbox { background: url(../images/countbg.png) no-repeat 110% 0% / contain; } .firstbox:hover { background: url(../images/countbg.png) no-repeat 110% 0% / contain; } .countingss .success-counter-box1:not(.firstbox):hover { background: url(../images/countbg.png) no-repeat 110% 0% / contain; } .countingss .success-counter-box1:not(.firstbox):hover~.firstbox, .countingss:hover .firstbox:not(:hover) { background: none !important; } .agency-benefits { position: relative; padding: 80px 0 50px; /* background: linear-gradient(90deg,rgba(8, 35, 38, 1) 0%, rgba(8, 35, 38, 1) 69%, rgba(0, 0, 0, 1) 86%); */ z-index: 9; } .agency-benefits::before { content: ''; position: absolute; right: 0px; top: 0px; background: -webkit-gradient(linear, left top, right top, from(rgba(8, 35, 38, 1)), color-stop(69%, rgba(8, 35, 38, 1)), color-stop(86%, rgba(0, 0, 0, 1))); background: -o-linear-gradient(left, rgba(8, 35, 38, 1) 0%, rgba(8, 35, 38, 1) 69%, rgba(0, 0, 0, 1) 86%); background: linear-gradient(90deg, rgba(8, 35, 38, 1) 0%, rgba(8, 35, 38, 1) 69%, rgba(0, 0, 0, 1) 86%); background-position: left center; /* opacity: 50%; */ width: 100%; height: 100%; z-index: -1; } .agency-benefits { position: relative; } .agency-benefits .hero-bg-video1 { position: absolute; top: 0px; right: 0px; z-index: -1; } .brainsec .hero-bg-video { position: relative; } .brainsec .hero-bg-video::before { position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgba(8, 35, 38, 1)), color-stop(55%, rgba(0, 0, 0, .1)), color-stop(72%, rgba(0, 0, 0, .1))); background: -o-linear-gradient(left, rgba(8, 35, 38, 1) 20%, rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .1) 72%); background: linear-gradient(90deg, rgba(8, 35, 38, 1) 20%, rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .1) 72%); } .brainsec .hero-bg-video video { width: 140%; height: 100%; -o-object-fit: cover; object-fit: cover; } .brainsec { padding: 100px 0px 1px; } .swiper-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; width: 100%; } .our-testimonial h2 { color: #000; } .our-testimonial p { color: #000 !important; } .carousel-section { max-width: 1200px; margin: auto; } .testimonial-slider .flip-card-inner { padding: 20px; min-height: 280px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .testimonial-slider .flip-card-inner h3 { font-size: 20px; margin-bottom: 24px; line-height: 32px; } .testimonial-slider .flip-card-inner .ser-btn1 a { color: #000 !important; } .testimonial-slider .flip-card-inner h3 { color: #000 !important; /* height: 65px; */ margin-bottom: 24px; line-height: 25px; } .testimonial-slider .flip-card-inner p { font-size: 16px; margin-bottom: 15px; font-weight: 400; color: #555; height: 160px; font-family: Helvetica; line-height: 24px; } .testimonial-slider .service-item-header { margin-bottom: 30px; } .testimonial-slider .flip-card-inner a { font-weight: bold; text-decoration: none; color: #082326; font-family: "Radio Canada", sans-serif; font-size: 16px; font-weight: 400; height: 100%; } .testimonial-slider .flip-card-inner .ser-btn { margin-top: 20px; margin-bottom: 0px; } .testimonial-slider .flip-card-inner:hover a { color: #fff !important; } /* Custom navigation */ .custom-navigation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 20px; gap: 20px; } .swiper-button-prev, .swiper-button-next { position: static; width: 25px; height: 25px; color: #0b2e2e; border: 1px solid #ccc; border-radius: 50%; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; } .swiper-pagination { position: static; font-size: 14px; font-weight: bold; color: #333; } /* ---------------------- */ /* Smooth Gradient Hover */ /* ---------------------- */ .testimonial-slider .service-item { position: relative; border-radius: 8px; background: #fff; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); -webkit-transition: transform 0.6s ease, box-shadow 0.6s ease; transition: transform 0.6s ease, box-shadow 0.6s ease; cursor: pointer; overflow: hidden; height: 449px; } /* Gradient overlay fade */ .testimonial-slider .service-item::before { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(180deg, #d9f1f1 0%, #0b2e2e 100%); opacity: 0; -webkit-transition: opacity 0.6s ease-in-out; -o-transition: opacity 0.6s ease-in-out; transition: opacity 0.6s ease-in-out; z-index: 0; } /* Hover – smooth gradient appear */ .testimonial-slider .service-item:hover::before { opacity: 1; } /* Smooth color change */ .testimonial-slider .service-item h3, .testimonial-slider .service-item p, .testimonial-slider .service-item a { position: relative; z-index: 1; color: #000; -webkit-transition: color 0.6s ease; -o-transition: color 0.6s ease; transition: color 0.6s ease; } .testimonial-slider .service-item:hover h3, .testimonial-slider .service-item:hover p, .testimonial-slider .service-item:hover a { color: #fff !important; } /* Hover animation with lift */ .testimonial-slider .service-item:hover { /*background: -webkit-gradient(linear, left top, left bottom, from(#d9f1f1), to(#0b2e2e));*/ /*background: -o-linear-gradient(top, #d9f1f1 0%, #0b2e2e 100%);*/ color: #fff; box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.15); /*background: linear-gradient(180deg, rgb(217, 241, 241) 0%, rgb(11, 46, 46) 100%);*/ /* transform: translateY(-8px); */ -webkit-transition: all 1s cubic-bezier(0.4, 0, 1, 1) 1s; -o-transition: all 1s cubic-bezier(0.4, 0, 1, 1) 1s; transition: all 1s cubic-bezier(0.4, 0, 1, 1) 1s; } .testimonial-slider .testspace { -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; -o-transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; display: inline-block; } .testimonial-slider .testspace.fade-out { opacity: 0; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } .testimonial-slider .testspace.fade-in { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* .testimonial-slider .active .ser-btn1 a { color: #fff !important; } */ .testimonial-slider .service-item:hover { border: none; } .testimonial-slider .service-item { padding: 0px 0px; /*transition: background 1s ease, color 0.5s ease, box-shadow 0.5s ease;*/ border: 1px solid #08232680; border-radius: 8px; } .testimonial-slider .service-item .ser-btn1 a { color: #000; } .testimonial-slider .service-item::before { content: ''; position: absolute; top: -4px; bottom: 0; left: 0; right: 0; width: 103%; height: 102%; background: linear-gradient(180deg, rgb(217, 241, 241) 0%, rgb(11, 46, 46) 100%); opacity: 0; transition: opacity 0.9s ease-in-out; } .testimonial-slider .service-item:hover::before { opacity: 1; } /* .icon-box{ background: url(../images/bbg.webp); background-position: center; background-size: contain; } */ .testspace { padding: 0px 5px; } .testimonial-slider .service-item-header { position: relative; display: block; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 32px; } .testimonial-slider .service-item-header .icon-box img { max-width: 230px; } .hero-bg-video1 video { -o-object-fit: cover; object-fit: cover; } .mt-50 { margin-top: 70px !important; } .partner .section-title p { width: 1084px; margin: 16px auto !important; font-family: 'Helvetica', 'Arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; } .partner .section-title h2 { margin-bottom: 15px; } .logo-carousel .item { padding: 20px; } .logo-carousel img { max-width: 140px; max-height: 60px; -o-object-fit: contain; object-fit: contain; -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .logo-carousel img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .logo-carousel .owl-dots, .logo-carousel .owl-nav { display: none !important; /* hide nav */ } /* Hide navigation arrows for skew carousels */ .skew-carousel .owl-nav, .skew-carousel1 .owl-nav, .skew-carousel .owl-nav button, .skew-carousel1 .owl-nav button { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .agency-supports-slider1 { position: relative; } .agency-supports-slider1::before { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: 0; background: -o-linear-gradient(170deg, #030709 -50%, rgba(3, 7, 9, 0) 26.97%); background: linear-gradient(280deg, #030709 -50%, rgba(3, 7, 9, 0) 26.97%); width: 215px; height: 100%; z-index: 2; } .agency-supports-slider1::after { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; background: -webkit-gradient(linear, left top, right top, color-stop(-50%, #030709), color-stop(26.97%, rgba(3, 7, 9, 0))); background: -o-linear-gradient(left, #030709 -50%, rgba(3, 7, 9, 0) 26.97%); background: linear-gradient(90deg, #030709 -50%, rgba(3, 7, 9, 0) 26.97%); width: 215px; height: 100%; z-index: 2; } .logo-marquee { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; /* space between rows */ } .logo-slider { overflow: hidden; white-space: nowrap; width: 100%; position: relative; /* Fade effect on edges */ -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.3)), color-stop(10%, #000), color-stop(90%, #000), to(rgba(0, 0, 0, 0.3))); -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), #000 10%, #000 90%, rgba(0, 0, 0, 0.3)); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.3)), color-stop(10%, #000), color-stop(90%, #000), to(rgba(0, 0, 0, 0.3))); mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), #000 10%, #000 90%, rgba(0, 0, 0, 0.3)); mask-repeat: no-repeat; mask-size: 100% 100%; } .logos { display: inline-block; } .logos img { height: 80px; margin: 0 40px; display: inline-block; } /* Row 1 - Left to Right */ .logo-slider.ltr .logos { -webkit-animation: marquee-ltr 25s linear infinite; animation: marquee-ltr 25s linear infinite; } /* Row 2 - Right to Left */ .logo-slider.rtl .logos { -webkit-animation: marquee-rtl 25s linear infinite; animation: marquee-rtl 25s linear infinite; } /* Animations */ @-webkit-keyframes marquee-ltr { from { -webkit-transform: translateX(-50%); transform: translateX(-50%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes marquee-ltr { from { -webkit-transform: translateX(-50%); transform: translateX(-50%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes marquee-rtl { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes marquee-rtl { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .projects { background: #082326; } .projects .service-item { border: none; border-radius: 8px; } .projects .service-item-body { background: url(../images/pr1.jpg); background-position: 99% 5%; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 0; padding: 24px 24px; height: 449px; border-radius: 8px; } .projects .secondser { background: url(../images/pr2.jpg); background-position: 99% 5%; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 0; padding: 17px 24px; height: 449px; border-radius: 8px; } .projects .thirdser { background: url(../images/pr3.jpg); background-position: 99% 5%; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 0; padding: 20px 20px; height: 449px; border-radius: 8px; } .projects .fourthser { background: url(../images/pr4.jpg); background-position: 99% 5%; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 0; padding: 20px 20px; height: 449px; border-radius: 8px; } .projects .service-item-body::before { position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), color-stop(40%, rgba(0, 128, 128, .5)), color-stop(62%, rgba(22, 128, 139, .98))); background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 128, 128, .5) 40%, rgba(22, 128, 139, .98) 62%); background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(0, 128, 128, .5) 40%, rgba(22, 128, 139, .98) 62%); z-index: -1; border-radius: 8px; /* background-color: rgb(22, 128, 139); */ } .mega-menu .service-item-body p { height: auto; color: #fff; font-size: 16px !important; line-height: 24px !important; font-weight: 600; font-family: "Raleway", sans-serif; margin-bottom: 15px; } .projects .service-item-body p { height: auto; color: #fff; font-size: 24px; line-height: 32px; font-weight: 600; font-family: "Raleway", sans-serif; padding: 16px 0px; margin-bottom: 0px !important; } .projects h3 span { background: rgba(255, 255, 255, 0.4); color: #fff; border-radius: 60px; padding: 4px 16px; font-size: 12px; font-weight: 400; /* line-height: 16px; */ font-family: 'helvetica-neue-lt-pro'; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 24px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .projects h3 { margin-bottom: 0px !important; } .mega-menu h3 span { background: rgba(255, 255, 255, 0.4); color: #fff; border-radius: 60px; padding: 4px 16px; font-size: 12px; line-height: 16px; font-weight: 400; /* line-height: 16px; */ font-family: 'helvetica-neue-lt-pro'; height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .testimonial-btn1 { position: absolute; bottom: 0px; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; margin-top: 30px; z-index: 2; } .testimonial-slider1 .testimonial-button-next, .testimonial-slider1 .testimonial-button-prev { position: relative; width: 50px; /* height: 50px; */ /* background: var(--secondary-color); */ border-radius: 8px; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .testimonial-slider1 .testimonial-button-next { margin-left: 5px; } .testimonial-slider1 .testimonial-button-next:hover, .testimonial-slider1 .testimonial-button-prev:hover { /* background: var(--accent-color); */ } /* .testimonial-slider1 .testimonial-button-next::before, .testimonial-slider1 .testimonial-button-prev::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url("../images/Dotted\ Arrow1.svg") no-repeat center center; background-size: 30px auto; display: flex; align-items: center; justify-content: center; transform: rotate(0deg); transition: all 0.4s ease-in-out; } .testimonial-slider1 .testimonial-button-prev::before { transform: rotate(180deg); } .testimonial-slider1 .testimonial-button-next:hover:before, .testimonial-slider1 .testimonial-button-prev:hover:before { filter: brightness(1) invert(1); } */ .testimonial-slider1 .testimonial-button-prev { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .testimonial-slider1 .swiper-wrapper { cursor: none; padding: 0px 0px 50px; } .testimonial-slider1 .service-item { border-radius: 8px; background: #082326; padding: 20px 20px; } .testimonial-slider1 .service-item-body p { color: #fff !important; font-size: 14px; } .testspace1 { font-size: 16px; font-weight: 300 !important; font-family: "Radio Canada", sans-serif; color: #fff ; line-height: 32px; padding: 2px 5px; font-size: 24px; } .testimonial-slider1 .swiper-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; width: 100%; } .testimonial-slider1 .service-item-header { margin-bottom: 10px; } .testimonial-slider1 .author-content p { height: auto; } .our-testimonial .headingss { width: 1000px; margin: auto; } .our-testimonial .section-row { margin-bottom: 20px; } .main-footer { background: #082326; } .firstrow h2 { margin-bottom: 20px; } .places li { display: inline-block; padding: 0px 10px 16px; font-size: 24px; line-height: 32px; font-weight: 400; font-family: 'helvetica-neue-lt-pro'; } .phone a { color: #fff; font-size: 24px; font-family: 'helvetica-neue-lt-pro'; line-height: 32px; font-weight: 400; } .phone img { height: 25px; } .pd60 { padding: 50px 0px; } .about-footer .footer-logo img { height: auto; width: 210px; } .about-footer .header-social-links ul li { line-height: normal; margin-right: 40px; padding: 0; } .parent { background: -webkit-gradient(linear, right top, left top, color-stop(80%, rgba(255, 255, 255, 0)), color-stop(77%, rgb(8 35 38)), to(rgb(8 35 38))); background: -o-linear-gradient(right, rgba(255, 255, 255, 0) 80%, rgb(8 35 38) 77%, rgb(8 35 38) 100%); background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 80%, rgb(8 35 38) 77%, rgb(8 35 38) 100%); /* position: relative; */ } /* .parent::before{ position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(0, 0, 0, .6); } */ .bg-image { width: 240%; mix-blend-mode: screen; margin-left: -320px; } .footer-links h3 { font-size: 16px; font-weight: 200 !important; line-height: 24px; font-family: "Raleway", sans-serif; font-style: normal; } .footer-links ul li a { font-weight: 300 !important; font-family: 'helvetica-neue-lt-pro'; font-style: normal; font-size: 16px; line-height: 24px; font-style: normal; } .footer-links ul li span { font-weight: 500 !important; font-family: 'helvetica-neue-lt-pro'; font-style: normal; font-size: 16px; line-height: 24px; } .rights li a { font-size: 16px; color: #fff !important; } .arrow img { height: 20px; } .arrow1 img { height: 20px; } /* .ser-btn .arrow1 { display: none; } .ser-btn span{ padding-left: 10px; } .ser-btn:hover .arrow { display: none; } .ser-btn:hover .arrow1 { display: inline-block; } .ser-btn .arrow, .ser-btn .arrow1 { transition: opacity 0.3s ease; } .ser-btn .arrow1 { opacity: 0; } .ser-btn:hover .arrow { opacity: 0; } .ser-btn:hover .arrow1 { opacity: 1; } .ser-btn span { position: relative; display: inline-block; } .ser-btn:hover .arrow { animation: fadeOutArrow 1s forwards; } .ser-btn:hover .arrow1 { animation: fadeInArrow 1s forwards; } @keyframes fadeOutArrow { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 0; } } @keyframes fadeInArrow { 0% { opacity: 0.2; background-position: 0% 25%; } 50% { opacity: 0.5; background-position: 25% 50%;} 100% { opacity: 1; background-position: 50% 100%; } } */ /* .ser-btn{ position: relative; } .dotted-arrow { display: flex; align-items: center; gap: 3px; position: absolute; top: 11px; left: 53.7%; } .dotted-arrow > span { width: 3.2px; height: 3.2px; border-radius: 50%; background: #bbbbbb; transition: background 0.3s ease; } .arrow-head { display: flex; flex-direction: column; gap: 6px; margin-left: 6px; } .arrow-head .row { display: flex; justify-content: center; gap: 4px; } .arrow-head .s1 { width: 3.2px; height: 3.2px; border-radius: 50%; background: #bbbbbb; transition: background 0.3s ease; position: absolute; top: -9px; left: 16px; padding: 0px !important; } .arrow-head .s2 { width: 3.2px; height: 3.2px; border-radius: 50%; background: #bbbbbb; transition: background 0.3s ease; position: absolute; top: -5px; left: 19px; padding: 0px; } .arrow-head .s3 { width:3.2px; height:3.2px; border-radius: 50%; background: #bbbbbb; transition: background 0.3s ease; position: absolute; top: -2px; left: 23px; padding: 0px !important; } .arrow-head .s4 { width:3.2px; height:3.2px; border-radius: 50%; background: #bbbbbb; transition: background 0.3s ease; position: absolute; top: 5px; left: 23px; padding: 0px !important; } .arrow-head .s5 { width:3.2px; height:3.2px; border-radius: 50%; background: #bbbbbb; transition: background 0.3s ease; position: absolute; top:8px; left: 19px; padding: 0px !important; } .arrow-head .s6 { width:3.2px; height:3.2px; border-radius: 20px; background: #bbbbbb; transition: background 0.3s ease; position: absolute; top: 12px; left: 16px; padding: 0px !important; } @keyframes glowBlue { 0% { background: #082326; } 50% { background: #082326; } 100% { background: #082326; } } .know-more:hover .dotted-arrow span:nth-child(1) { animation: glowBlue 0.6s ease forwards; } .know-more:hover .dotted-arrow span:nth-child(2) { animation: glowBlue 0.6s ease forwards 0.1s; } .know-more:hover .dotted-arrow span:nth-child(3) { animation: glowBlue 0.6s ease forwards 0.2s; } .know-more:hover .dotted-arrow span:nth-child(4) { animation: glowBlue 0.6s ease forwards 0.3s; } .know-more:hover .dotted-arrow span:nth-child(5) { animation: glowBlue 0.6s ease forwards 0.4s; } .know-more:hover .arrow-head .top span:nth-child(1) { animation: glowBlue 0.6s ease forwards 0.5s; } .know-more:hover .arrow-head .top span:nth-child(2) { animation: glowBlue 0.6s ease forwards 0.6s; } .know-more:hover .arrow-head .top span:nth-child(3) { animation: glowBlue 0.6s ease forwards 0.7s; } .know-more:hover .arrow-head .bottom span:nth-child(1) { animation: glowBlue 0.6s ease forwards 0.8s; } .know-more:hover .arrow-head .bottom span:nth-child(2) { animation: glowBlue 0.6s ease forwards 0.9s; } .know-more:hover .arrow-head .bottom span:nth-child(3) { animation: glowBlue 0.6s ease forwards 1s; } @keyframes glowGray { 0% { background: #082326; } 100% { background: #bbbbbb; } } .know-more .dotted-arrow span:nth-child(1) { animation: glowGray 0.6s ease forwards 1s; } .know-more .dotted-arrow span:nth-child(2) { animation: glowGray 0.6s ease forwards 0.9s; } .know-more .dotted-arrow span:nth-child(3) { animation: glowGray 0.6s ease forwards 0.8s; } .know-more .dotted-arrow span:nth-child(4) { animation: glowGray 0.6s ease forwards 0.7s; } .know-more .dotted-arrow span:nth-child(5) { animation: glowGray 0.6s ease forwards 0.6s; } .know-more .arrow-head .top span:nth-child(1) { animation: glowGray 0.6s ease forwards 0.5s; } .know-more .arrow-head .top span:nth-child(2) { animation: glowGray 0.6s ease forwards 0.4s; } .know-more .arrow-head .top span:nth-child(3) { animation: glowGray 0.6s ease forwards 0.3s; } .know-more .arrow-head .bottom span:nth-child(1) { animation: glowGray 0.6s ease forwards 0.2s; } .know-more .arrow-head .bottom span:nth-child(2) { animation: glowGray 0.6s ease forwards 0.1s; } .know-more .arrow-head .bottom span:nth-child(3) { animation: glowGray 0.6s ease forwards 0s; } .ser-btn1{ position: relative; } .ser-btn1 .dotted-arrow{ left: 29%; } .ser-btn2{ position: relative; } .ser-btn2 .dotted-arrow{ left: 39.5%; } .ser-btn3{ position: relative; } .ser-btn3 .dotted-arrow{ left: 19.2%; } .ser-btn4{ position: relative; } .ser-btn4 .dotted-arrow{ left: 18%; } .ser-btn6 .dotted-arrow{ left: 53%; } .btn5 .dotted-arrow{ left: 44%; } .btn6 .dotted-arrow{ left: 37%; } .ser-btn7 .dotted-arrow{ left: 53.8%; } .btn8 .dotted-arrow{ left: 90.8%; } .ser-btn8 .dotted-arrow{ left: 54.7%; } .ser-btn1 .dotted-arrow > span{ color: #535353 !important; } .ser-btn1 .arrow-head .s1, .ser-btn1 .arrow-head .s2, .ser-btn1 .arrow-head .s3, .ser-btn1 .arrow-head .s4, .ser-btn1 .arrow-head .s5, .ser-btn1 .arrow-head .s6{ color: #535353 !important; } @keyframes glowBlue1 { 0% { background: #fff; } 50% { background: #fff; } 100% { background: #fff; } } .know-more1:hover .dotted-arrow span:nth-child(1) { animation: glowBlue1 0.6s ease forwards; } .know-more1:hover .dotted-arrow span:nth-child(2) { animation: glowBlue1 0.6s ease forwards 0.1s; } .know-more1:hover .dotted-arrow span:nth-child(3) { animation: glowBlue1 0.6s ease forwards 0.2s; } .know-more1:hover .dotted-arrow span:nth-child(4) { animation: glowBlue1 0.6s ease forwards 0.3s; } .know-more1:hover .dotted-arrow span:nth-child(5) { animation: glowBlue1 0.6s ease forwards 0.4s; } .know-more1:hover .arrow-head .top span:nth-child(1) { animation: glowBlue1 0.6s ease forwards 0.5s; } .know-more1:hover .arrow-head .top span:nth-child(2) { animation: glowBlue1 0.6s ease forwards 0.6s; } .know-more1:hover .arrow-head .top span:nth-child(3) { animation: glowBlue1 0.6s ease forwards 0.7s; } .know-more1:hover .arrow-head .bottom span:nth-child(1) { animation: glowBlue1 0.6s ease forwards 0.8s; } .know-more1:hover .arrow-head .bottom span:nth-child(2) { animation: glowBlue1 0.6s ease forwards 0.9s; } .know-more1:hover .arrow-head .bottom span:nth-child(3) { animation: glowBlue1 0.6s ease forwards 1s; } @keyframes glowGray1 { 0% { background: #fff; } 100% { background: #fff; } } .know-more1 .dotted-arrow span:nth-child(1) { animation: glowGray 0.6s ease forwards 1s; } .know-more1 .dotted-arrow span:nth-child(2) { animation: glowGray 0.6s ease forwards 0.9s; } .know-more1 .dotted-arrow span:nth-child(3) { animation: glowGray 0.6s ease forwards 0.8s; } .know-more1 .dotted-arrow span:nth-child(4) { animation: glowGray 0.6s ease forwards 0.7s; } .know-more1 .dotted-arrow span:nth-child(5) { animation: glowGray 0.6s ease forwards 0.6s; } .know-more1 .arrow-head .top span:nth-child(1) { animation: glowGray 0.6s ease forwards 0.5s; } .know-more1 .arrow-head .top span:nth-child(2) { animation: glowGray 0.6s ease forwards 0.4s; } .know-more1 .arrow-head .top span:nth-child(3) { animation: glowGray 0.6s ease forwards 0.3s; } .know-more1 .arrow-head .bottom span:nth-child(1) { animation: glowGray 0.6s ease forwards 0.2s; } .know-more1 .arrow-head .bottom span:nth-child(2) { animation: glowGray 0.6s ease forwards 0.1s; } .know-more1 .arrow-head .bottom span:nth-child(3) { animation: glowGray 0.6s ease forwards 0s; } */ /* @keyframes glowTeal { to { fill: #082326; opacity: 1; } } @keyframes fadeToGray { from { fill: #082326; opacity: 1; } to { fill: #535353; opacity: 1; } } .animated-svg-link circle { fill: #082326; transition: fill 0.3s ease; } .animated-svg-link:hover #dot-4 { animation: glowTeal 0.3s forwards; } .animated-svg-link:hover #dot-5 { animation: glowTeal 0.3s forwards 0.05s; } .animated-svg-link:hover #dot-6 { animation: glowTeal 0.3s forwards 0.1s; } .animated-svg-link:hover #dot-7 { animation: glowTeal 0.3s forwards 0.15s; } .animated-svg-link:hover #dot-1 { animation: glowTeal 0.3s forwards 0.2s; } .animated-svg-link:hover #dot-2 { animation: glowTeal 0.3s forwards 0.25s; } .animated-svg-link:hover #dot-3 { animation: glowTeal 0.3s forwards 0.3s; } .animated-svg-link:hover #dot-11 { animation: glowTeal 0.3s forwards 0.35s; } .animated-svg-link:hover #dot-8 { animation: glowTeal 0.3s forwards 0.4s; } .animated-svg-link:hover #dot-9 { animation: glowTeal 0.3s forwards 0.45s; } .animated-svg-link:hover #dot-10 { animation: glowTeal 0.3s forwards 0.5s; } #dot-10 { animation: fadeToGray 0.3s forwards; } #dot-9 { animation: fadeToGray 0.3s forwards 0.05s; } #dot-8 { animation: fadeToGray 0.3s forwards 0.1s; } #dot-11 { animation: fadeToGray 0.3s forwards 0.15s; } #dot-3 { animation: fadeToGray 0.3s forwards 0.2s; } #dot-2 { animation: fadeToGray 0.3s forwards 0.25s; } #dot-1 { animation: fadeToGray 0.3s forwards 0.3s; } #dot-7 { animation: fadeToGray 0.3s forwards 0.35s; } #dot-6 { animation: fadeToGray 0.3s forwards 0.4s; } #dot-5 { animation: fadeToGray 0.3s forwards 0.45s; } #dot-4 { animation: fadeToGray 0.3s forwards 0.5s; } .animated-svg-link:hover #dot-4 { animation: glowTeal 0.3s forwards; } @keyframes glowWhite1 { to { fill: #fff; opacity: 1; } } @keyframes fadeToGray1 { from { fill: #fff; opacity: 1; } to { fill: #bbbbbb; opacity: .5; } } .animated-svg-link1 { display: inline-block; } .animated-svg-link1:hover #dot-4 { animation: glowWhite1 0.3s forwards; } .animated-svg-link1:hover #dot-5 { animation: glowWhite1 0.3s forwards 0.05s; } .animated-svg-link1:hover #dot-6 { animation: glowWhite1 0.3s forwards 0.1s; } .animated-svg-link1:hover #dot-7 { animation: glowWhite1 0.3s forwards 0.15s; } .animated-svg-link1:hover #dot-1 { animation: glowWhite1 0.3s forwards 0.2s; } .animated-svg-link1:hover #dot-2 { animation: glowWhite1 0.3s forwards 0.25s; } .animated-svg-link1:hover #dot-3 { animation: glowWhite1 0.3s forwards 0.3s; } .animated-svg-link1:hover #dot-11 { animation: glowWhite1 0.3s forwards 0.35s; } .animated-svg-link1:hover #dot-8 { animation: glowWhite1 0.3s forwards 0.4s; } .animated-svg-link1:hover #dot-9 { animation: glowWhite1 0.3s forwards 0.45s; } .animated-svg-link1:hover #dot-10 { animation: glowWhite1 0.3s forwards 0.5s; } #dot-10 { animation: fadeToGray1 0.3s forwards; } #dot-9 { animation: fadeToGray1 0.3s forwards 0.05s; } #dot-8 { animation: fadeToGray1 0.3s forwards 0.1s; } #dot-11 { animation: fadeToGray1 0.3s forwards 0.15s; } #dot-3 { animation: fadeToGray1 0.3s forwards 0.2s; } #dot-2 { animation: fadeToGray1 0.3s forwards 0.25s; } #dot-1 { animation: fadeToGray1 0.3s forwards 0.3s; } #dot-7 { animation: fadeToGray1 0.3s forwards 0.35s; } #dot-6 { animation: fadeToGray1 0.3s forwards 0.4s; } #dot-5 { animation: fadeToGray1 0.3s forwards 0.45s; } #dot-4 { animation: fadeToGray1 0.3s forwards 0.5s; } */ /* white arrow */ .right svg { width: 24px; } /* Dot default state */ .right .dot { fill: #082326 !important; opacity: 0.5; -webkit-transition: fill 0.3s ease, opacity 0.3s ease; -o-transition: fill 0.3s ease, opacity 0.3s ease; transition: fill 0.3s ease, opacity 0.3s ease; } /* Hover animation */ .animated-svg-link:hover .right .dot { fill: #000000 !important; opacity: 1; } .animated-svg-link:hover .right .dot:nth-child(4) { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .animated-svg-link:hover .right .dot:nth-child(5) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .animated-svg-link:hover .right .dot:nth-child(6) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .animated-svg-link:hover .right .dot:nth-child(2) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .animated-svg-link:hover .right .dot:nth-child(10) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .animated-svg-link:hover .right .dot:nth-child(1) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .animated-svg-link:hover .right .dot:nth-child(7) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .animated-svg-link:hover .right .dot:nth-child(9) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .animated-svg-link:hover .right .dot:nth-child(8) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .animated-svg-link:hover .right .dot:nth-child(11) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .animated-svg-link:hover .right .dot:nth-child(3) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } /* Unhover animation (reverse) */ .right:not(:hover) .right .dot:nth-child(3) { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .right:not(:hover) .right .dot:nth-child(8) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .right:not(:hover) .right .dot:nth-child(11) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .right:not(:hover) .right .dot:nth-child(1) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .right:not(:hover) .right .dot:nth-child(7) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .right:not(:hover) .right .dot:nth-child(9) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .right:not(:hover) .right .dot:nth-child(2) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .right:not(:hover) .right .dot:nth-child(10) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .right:not(:hover) .right .dot:nth-child(6) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .right:not(:hover) .right .dot:nth-child(5) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .right:not(:hover) .right .dot:nth-child(4) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .svg-container { cursor: pointer; padding-left: 5px; } .svg-container svg { width: 22px; height: 22px; } .dot { -webkit-transition: fill 0.4s ease-in-out, opacity 0.4s ease-in-out; -o-transition: fill 0.4s ease-in-out, opacity 0.4s ease-in-out; transition: fill 0.4s ease-in-out, opacity 0.4s ease-in-out; } .svg-container:hover .dot:nth-child(4) { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } /* cx="1.6" */ .svg-container:hover .dot:nth-child(5) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } /* cx="6.4" */ .svg-container:hover .dot:nth-child(6) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } /* cx="11.1" */ .svg-container:hover .dot:nth-child(2) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } /* cx="12.7" */ .svg-container:hover .dot:nth-child(10) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } /* cx="12.7" */ .svg-container:hover .dot:nth-child(1) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } /* cx="16.0" */ .svg-container:hover .dot:nth-child(7) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } /* cx="16.0" */ .svg-container:hover .dot:nth-child(9) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } /* cx="16.0" */ .svg-container:hover .dot:nth-child(8) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } /* cx="19.1" */ .svg-container:hover .dot:nth-child(11) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } /* cx="19.1" */ .svg-container:hover .dot:nth-child(3) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } /* cx="22.4" */ .svg-container:not(:hover) .dot:nth-child(3) { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } /* cx="22.4" */ .svg-container:not(:hover) .dot:nth-child(8) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } /* cx="19.1" */ .svg-container:not(:hover) .dot:nth-child(11) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } /* cx="19.1" */ .svg-container:not(:hover) .dot:nth-child(1) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } /* cx="16.0" */ .svg-container:not(:hover) .dot:nth-child(7) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } /* cx="16.0" */ .svg-container:not(:hover) .dot:nth-child(9) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } /* cx="16.0" */ .svg-container:not(:hover) .dot:nth-child(2) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } /* cx="12.7" */ .svg-container:not(:hover) .dot:nth-child(10) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } /* cx="12.7" */ .svg-container:not(:hover) .dot:nth-child(6) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } /* cx="11.1" */ .svg-container:not(:hover) .dot:nth-child(5) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } /* cx="6.4" */ .svg-container:not(:hover) .dot:nth-child(4) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } /* cx="1.6" */ /* btn 3 */ .btn-style-3 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; font-weight: 400; /* background-color:#082326; */ border-radius: 60px; /* color:white; */ padding: 12px 0px; text-decoration: none; } /* Dot default state */ .btn-style-3 .dot { fill: #ffffff !important; opacity: 0.5; -webkit-transition: fill 0.3s ease, opacity 0.3s ease; -o-transition: fill 0.3s ease, opacity 0.3s ease; transition: fill 0.3s ease, opacity 0.3s ease; } /* Hover animation */ .btn-style-3:hover .svg-container .dot { fill: #020c0e; opacity: 1; } .btn-style-3:hover .svg-container .dot:nth-child(4) { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .btn-style-3:hover .svg-container .dot:nth-child(5) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .btn-style-3:hover .svg-container .dot:nth-child(6) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .btn-style-3:hover .svg-container .dot:nth-child(2) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .btn-style-3:hover .svg-container .dot:nth-child(10) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .btn-style-3:hover .svg-container .dot:nth-child(1) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .btn-style-3:hover .svg-container .dot:nth-child(7) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .btn-style-3:hover .svg-container .dot:nth-child(9) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .btn-style-3:hover .svg-container .dot:nth-child(8) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .btn-style-3:hover .svg-container .dot:nth-child(11) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .btn-style-3:hover .svg-container .dot:nth-child(3) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } /* Unhover animation (reverse) */ .btn-style-3:not(:hover) .svg-container .dot:nth-child(3) { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .btn-style-3:not(:hover) .svg-container .dot:nth-child(8) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .btn-style-3:not(:hover) .svg-container .dot:nth-child(11) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .btn-style-3:not(:hover) .svg-container .dot:nth-child(1) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .btn-style-3:not(:hover) .svg-container .dot:nth-child(7) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .btn-style-3:not(:hover) .svg-container .dot:nth-child(9) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .btn-style-3:not(:hover) .svg-container .dot:nth-child(2) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .btn-style-3:not(:hover) .svg-container .dot:nth-child(10) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .btn-style-3:not(:hover) .svg-container .dot:nth-child(6) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .btn-style-3:not(:hover) .svg-container .dot:nth-child(5) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .btn-style-3:not(:hover) .svg-container .dot:nth-child(4) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } /* When service-item (whole card) is hovered, trigger arrow animation */ .testianimdot .service-item:hover .animated-svg-link1 .dot { fill: #fff; opacity: 1; -webkit-transition: fill 0.3s ease, opacity 0.3s ease; -o-transition: fill 0.3s ease, opacity 0.3s ease; transition: fill 0.3s ease, opacity 0.3s ease; } /* Animate in sequence */ .testianimdot .service-item:hover .animated-svg-link1 .dot:nth-child(4) { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .testianimdot .service-item:hover .animated-svg-link1 .dot:nth-child(5) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .testianimdot .service-item:hover .animated-svg-link1 .dot:nth-child(6) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .testianimdot .service-item:hover .animated-svg-link1 .dot:nth-child(2) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .testianimdot .service-item:hover .animated-svg-link1 .dot:nth-child(10) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .testianimdot .service-item:hover .animated-svg-link1 .dot:nth-child(1), .testianimdot .service-item:hover .animated-svg-link1 .dot:nth-child(7), .testianimdot .service-item:hover .animated-svg-link1 .dot:nth-child(9) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .testianimdot .service-item:hover .animated-svg-link1 .dot:nth-child(8), .testianimdot .service-item:hover .animated-svg-link1 .dot:nth-child(11) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .testianimdot .service-item:hover .animated-svg-link1 .dot:nth-child(3) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } /* Reverse animation when hover leaves */ .testianimdot .service-item:not(:hover) .animated-svg-link1 .dot { fill: #082326 !important; opacity: 0.5; -webkit-transition: fill 0.3s ease, opacity 0.3s ease; -o-transition: fill 0.3s ease, opacity 0.3s ease; transition: fill 0.3s ease, opacity 0.3s ease; } .testianimdot .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(3) { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .testianimdot .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(8), .testianimdot .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(11) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .testianimdot .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(1), .testianimdot .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(7), .testianimdot .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(9) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .testianimdot .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(2), .testianimdot .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(10) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .testianimdot .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(6) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .testianimdot .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(5) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .testianimdot .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(4) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } /* When service-item (whole card) is hovered, trigger arrow animation */ .enterslide .service-item:hover .animated-svg-link1 .dot { fill: #fff; opacity: 1; -webkit-transition: fill 0.3s ease, opacity 0.3s ease; -o-transition: fill 0.3s ease, opacity 0.3s ease; transition: fill 0.3s ease, opacity 0.3s ease; } /* Animate in sequence */ .enterslide .service-item:hover .animated-svg-link1 .dot:nth-child(4) { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .enterslide .service-item:hover .animated-svg-link1 .dot:nth-child(5) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .enterslide .service-item:hover .animated-svg-link1 .dot:nth-child(6) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .enterslide .service-item:hover .animated-svg-link1 .dot:nth-child(2) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .enterslide .service-item:hover .animated-svg-link1 .dot:nth-child(10) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .enterslide .service-item:hover .animated-svg-link1 .dot:nth-child(1), .enterslide .service-item:hover .animated-svg-link1 .dot:nth-child(7), .enterslide .service-item:hover .animated-svg-link1 .dot:nth-child(9) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .enterslide .service-item:hover .animated-svg-link1 .dot:nth-child(8), .enterslide .service-item:hover .animated-svg-link1 .dot:nth-child(11) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .enterslide .service-item:hover .animated-svg-link1 .dot:nth-child(3) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } /* Reverse animation when hover leaves */ .enterslide .service-item:not(:hover) .animated-svg-link1 .dot { fill: #082326 !important; opacity: 0.5; -webkit-transition: fill 0.3s ease, opacity 0.3s ease; -o-transition: fill 0.3s ease, opacity 0.3s ease; transition: fill 0.3s ease, opacity 0.3s ease; } .enterslide .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(3) { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .enterslide .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(8), .enterslide .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(11) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .enterslide .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(1), .enterslide .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(7), .enterslide .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(9) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .enterslide .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(2), .enterslide .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(10) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .enterslide .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(6) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .enterslide .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(5) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .enterslide .service-item:not(:hover) .animated-svg-link1 .dot:nth-child(4) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } /* white arrow */ .footer-links b { font-family: 'Helvetica', 'Arial', sans-serif; font-weight: 700 !important; } .card-top-border { position: absolute; top: 0; left: 0; width: 100%; /* height: 4px; */ /* background-color: #35a7ff; */ } .card-graphic-container { position: relative; height: 121px; /* Match the height of your SVG */ margin-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* ============================================== UPDATED SVG & ANIMATION STYLES ============================================== */ /* 1. Style the new SVG container and its elements */ .card-svg { /* Ensure the SVG scales properly */ width: 100%; height: 100%; } .card-svg>path[id^="line-"] { stroke: #082326; stroke-width: 1.3; opacity: 0.7; } .card-svg>path[id^="line-"], .card-svg>line { stroke: #082326; stroke-width: 1.3; opacity: 0.7; } /* 2. Style the dots */ .anim-dot { fill: #0eac6d; /* A bright, visible color */ opacity: 0; /* This property is the magic that allows animation along an SVG path */ offset-path: none; } /* 3. Define the animation */ @-webkit-keyframes travel-along-path { 0% { /* Start at the beginning of the path and be visible */ offset-distance: 0%; opacity: 1; } 80% { /* Stay visible for most of the journey */ opacity: 1; } 100% { /* Arrive at the end and fade out */ offset-distance: 100%; opacity: 0; } } @keyframes travel-along-path { 0% { /* Start at the beginning of the path and be visible */ offset-distance: 0%; opacity: 1; } 80% { /* Stay visible for most of the journey */ opacity: 1; } 100% { /* Arrive at the end and fade out */ offset-distance: 100%; opacity: 0; } } /* 4. On hover, trigger the animation */ .testianimdot .service-item:hover .anim-dot { /* Play the animation. 'forwards' keeps it at the end state */ -webkit-animation: travel-along-path 2s ease-out forwards; animation: travel-along-path 2s ease-out forwards; r: 2.8px; /* increase from 1.5px to 3px */ -webkit-transition: r 0.3s ease; -o-transition: r 0.3s ease; transition: r 0.3s ease; /* smooth scaling */ } /* 4. On hover, trigger the animation */ .enterslide .service-item:hover .anim-dot { /* Play the animation. 'forwards' keeps it at the end state */ -webkit-animation: travel-along-path 2s ease-out forwards; animation: travel-along-path 2s ease-out forwards; r: 2.8px; /* increase from 1.5px to 3px */ -webkit-transition: r 0.3s ease; -o-transition: r 0.3s ease; transition: r 0.3s ease; /* smooth scaling */ } /* 5. Assign each dot to its specific path USING YOUR NEW SVG PATH DATA */ /* NOTE: The path data is copied DIRECTLY from your SVG for perfect accuracy */ /* Left Side Paths (animating inwards) */ .service-card .anim-dot:nth-of-type(1) { offset-path: path('M1.4209 2L34.7821 2C46.3801 2 55.7821 11.402 55.7821 23V39.5752C55.7821 51.1732 65.1841 60.5752 76.7821 60.5752H84.859'); } .service-card .anim-dot:nth-of-type(2) { offset-path: path('M0.999367 60.6538 H 84.4375'); } .service-card .anim-dot:nth-of-type(3) { offset-path: path('M1.4209 119.15L34.7821 119.15C46.3801 119.15 55.7821 109.748 55.7821 98.1504V81.5752C55.7821 69.9772 65.1841 60.5751 76.7821 60.5751H84.859'); } /* Right Side Paths (animating inwards) */ .service-card .anim-dot:nth-of-type(4) { offset-path: path('M249.578 2L216.217 2C204.619 2 195.217 11.402 195.217 23V39.5752C195.217 51.1732 185.815 60.5752 174.217 60.5752H166.14'); } .service-card .anim-dot:nth-of-type(5) { offset-path: path('M250 60.1538 H 166.562'); } .service-card .anim-dot:nth-of-type(6) { offset-path: path('M249.578 119.15L216.217 119.15C204.619 119.15 195.217 109.748 195.217 98.1504V81.5752C195.217 69.9772 185.815 60.5751 174.217 60.5751H166.14'); } /* Default */ .testimonial-slider .service-item .icns { fill: #008080; /* transition: fill 0.3s cubic-bezier(0.4, 0, 1, 1); */ } /* Active, Active slide, OR Hovered card */ .testimonial-slider .service-item:hover .icns { fill: #ffffff; /* transition: all 1s ease-in-out; */ } /* .testimonial-slider .service-item.active .icns, .testimonial-slider .swiper-slide-active .icns, .testimonial-slider .service-item:hover .icns { fill: #ffffff; } */ .routes { background: #082326; } .input-group button { font-family: "helvetica-neue-lt-pro", sans-serif; font-weight: 400; font-size: 16px !important; line-height: 24px; } .brainsec .hero-bg-video2 { position: absolute; width: 60%; height: 100%; top: 0%; left: 0px; } .brainsec .hero-bg-video2::before { position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(40%, rgba(0, 0, 0, .1)), color-stop(34%, rgba(0, 0, 0, .1)), color-stop(80%, rgba(8, 35, 38, 1))); background: -o-linear-gradient(left, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .1) 34%, rgba(8, 35, 38, 1) 80%); background: linear-gradient(90deg, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .1) 34%, rgba(8, 35, 38, 1) 80%); } .brainsec .hero-bg-video2 video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* Default nav buttons */ .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { background: none; border: none; font-size: 0; width: 40px; height: 40px; cursor: pointer; position: relative; } .owl-carousel .owl-nav button.owl-prev { background: url("data:image/svg+xml;utf8,") no-repeat center; background-size: 24px; width: 40px; height: 40px; border: none; } .owl-carousel .owl-nav button.owl-next { background: url("data:image/svg+xml;utf8,") no-repeat center; background-size: 24px; width: 40px; height: 40px; border: none; } .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot { background: none !important; } /* Counter text */ .owl-carousel .owl-nav .owl-counter { color: #fff; font-size: 14px; font-weight: 600; margin: 0 10px; display: inline-block; min-width: 40px; text-align: center; } @media(max-width:768px) { .topheader { text-align: left; } .topheader .col-12 { padding: 0px 0px; } .top-in { padding-left: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 0px; } .top-in li select { padding: 0px 5px 0px 5px !important; font-size: 14px !important; } .font-increase-waber { gap: 20px !important; } .input-group button { font-size: 14px !important; } .top-in li { padding: 0px 5px; } .custom-select::after { width: 13px; height: 13px; } .top-in li a { font-size: 13px; } .navbar-brand img { height: 45px; } .navbar { padding: 10px 0; } .header-social-links { display: inline-block; } .btn-search { width: 50px; height: 50px; position: absolute; right: 0px; top: -28px; } .slicknav_btn { background: transparent; color: #fff; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 38px; height: 38px; margin: 0; border-radius: 8px; margin-top: 5px; } .slicknav_icon { visibility: hidden !important; position: absolute; top: 12px; right: -31px; } .custom-menu-icon svg { display: block; width: 26px; height: 18px; } .slicknav_btn { width: 38px; height: 38px; margin: 0; border-radius: 8px; margin-top: 5px; position: absolute; top: 15px; right: 10px; } .hero-bg-video::before { position: absolute; content: ''; bottom: 0px; left: 0px; height: 100%; width: 100%; background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, rgba(255, 255, 255, 1)), color-stop(90%, rgba(0, 0, 0, .1)), color-stop(48%, rgba(0, 0, 0, .1))); background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 70%, rgba(0, 0, 0, .1) 90%, rgba(0, 0, 0, .1) 48%); background: linear-gradient(180deg, rgba(255, 255, 255, 1) 70%, rgba(0, 0, 0, .1) 90%, rgba(0, 0, 0, .1) 48%); z-index: 0; } .hero .hero-bg-video { position: absolute; bottom: 0 !important; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; } .hero { text-align: center; padding: 40px 20px; } .hero h1 { font-size: 28px; } .hero p { font-size: 14px; } .hero-content-body { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero-bg-video { margin-top: 0px; } .video-play-button svg { width: 70px; height: 70px; padding: 10px; } .bxslider li { font-size: 50px; } .hero-content .section-title { margin-top: 0px !important; } .vertical-reveal li { font-size: 40px; font-weight: 300; font-family: "Raleway", sans-serif; color: #000 !important; line-height: 48px; } .banner .section-title p { font-size: 16px !important; font-weight: 300; margin-bottom: 20px; line-height: 24px; } .hero-content { height: 520px; } .hero .hero-bg-video video { width: 100%; height: 170%; -o-object-fit: contain; object-fit: contain; } .learn-more-circle span { position: absolute; top: 24px; left: 24px; text-align: center; color: #1e8a8a; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); font-size: 17px; /*-webkit-animation: infiniterotate 30s infinite linear !important;*/ /*animation: infiniterotate 30s infinite linear !important;*/ } .thepath .section-title h2 { line-height: 40px; font-size: 32px !important; } .thepath .section-title { text-align: left !important; } .thepath .section-title p { margin: 16px 0px !important; } .thepath .ser-btn { display: block !important; } .testimonial-slider3 .testimonial-button-next::before, .testimonial-slider3 .testimonial-button-prev::before { display: none !important; } .thepath .testimonial-btn .btn-style-3 { padding: 2px 0px !important; } .thepath .testimonial-btn .testimonial-button-next { right: 4px; top: 2px !important; } .thepath .testimonial-btn .testspace { padding: 0px 8px 0px 10px; } .thepath .testimonial-btn .testimonial-button-prev { left: 4px; top: 0px !important; } .testimonial-slider3 .service-item-body p { font-size: 14px; height: 250px; } .learn-more-circle { margin-left: -20px; } /*.testimonial-slider3 .swiper-slide{*/ /* width:297px !important;*/ /* left:0px !important;*/ /*}*/ .learn-more-circle span svg { height: 35px !important; width: 35px !important; } .mobileview { display: block !important; } .systemview { display: none !important; } .thepath .bgvideo { display: none !important; } .thepath .service-item { position: relative; border: 1px solid #ffffff; border-radius: 8px; } .about-agency-content .section-title h2 { width: 100%; color: #000 !important; line-height: 40px; font-size: 30px !important; } .agency-item-content p { color: #000; margin-bottom: 16px; } .about-agency-list { padding-left: 0px !important; margin-left: 0px; } .countingss .success-counter-box1 { padding: 10px 20px; height: 171px; /*width: 171px;*/ } .prine-title { flex-direction: column; display: flex; width: 100% !important; text-align: left; gap: 32px; } .brine-waper-padding { padding: 60px 0px !important; } .brainbgsec { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 0%, rgba(8, 35, 38, 1) 61%, rgba(0, 0, 0, 1) 80%) !important; } .bg-image { width: 169% !important; mix-blend-mode: screen; margin-left: -130px !important; filter: sepia(70%) saturate(100%) hue-rotate(90deg); } .section-title h2 { font-size: 32px !important; line-height: 40px !important; } .our-testimonial .section-row .testidescription { max-width: 100% !important; } .our-testimonial .testidescription p { padding: 16px 0px !important; } .brine-waper-padding { padding: 50px 0px 0px !important; } .brainsec .benefits-steps-content { width: 100%; } .pd-50 { padding: 50px 0px; } .partner .ser-btn2 { justify-content: start !important; } .logos img { height: 80px; margin: 0 25px !important; } .projects .ser-btn { justify-content: start !important; } .our-testimonial .headingss .ser-btn2 { justify-content: start !important; } .testimonial-slider .flip-card-inner p { height: 150px !important; } .footer-main .ser-btn { justify-content: start !important; margin-top: 10px !important; } .footer-main .firstrow { padding: 35px 0px 0px !important; } .firsthr { margin-top: 25px !important; } .parentban svg { width: 100%; height: 100%; } .bluebg { padding: 30px 0px 0px !important; } .buildsection .row { display: flex; } .buildsection .order2 { order: 2; padding: 0px 0px; } .buildsection .hero-bg-video { position: relative; /*height: 350px;*/ } .buildsection::before { background: #fff !important; } .buildsection .buildsec video { width: 100% !important; } .buildsection .hero-content { height: 100%; } .buildsec::before { background: linear-gradient(0deg, rgb(8 33 36 / 0%) 0%, rgb(8 35 38 / 0%) 66%, rgba(255, 255, 255, 1) 100%) !important; } .buildsection { padding: 40px 0px 0px !important; } .skew-carousel1 { -webkit-transform: skewY(0deg) !important; -ms-transform: skewY(0deg) !important; transform: skewY(0deg) !important; overflow: hidden; width: 100%; padding: 50px 0px; } .skew-carousel1 .item .inner { position: relative; z-index: 2; -webkit-transform: skewY(0deg) !important; -ms-transform: skewY(0deg) !important; transform: skewY(0deg) !important; margin-left: 5px !important; } .grid-section1 { background: #082326; } .skew-carousel1 .owl-stage { animation: none !important; } .skew-carousel1 .item { height: auto !important; width: 234px !important; } .grid-section1 .testspace { padding: 2px 10px; } .grid-section1 .testimonial-btn { position: relative; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: center !important; margin-left: 14px; width: max-content !important; } .testimonial-btn .testimonial-button-prev { left: 4px; top: 18px; } .grid-section1 .testimonial-btn .testimonial-button-next { right: 4px; top: -8px; } .skew-carousel1 .owl-stage-outer { padding: 0px 0px 0px !important; } .skew-carousel1 { padding: 25px 0px !important; } .text-left { text-align: left; width: 100% !important; } .skew-carousel1 .owl-item.active-slide .inner::before { background: linear-gradient(-90deg, rgb(0 128 128 / 30%) 0%, #05272bcc 100%) !important; transition: all 1s linear; } .skew-carousel1 .item .inner p { height: 90px; } .entersolser .testimonial-btn .testimonial-button-prev { left: 4px; top: -19px; } .parent2 { position: relative !important; top: 0; right: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; order: 2 !important; } .approachmblsec { display: grid; } .approachmblsec .parent2::before { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 0%, rgba(8, 35, 38, 1) 15%, rgb(8 35 38 / 10%) 70%) !important; } .approachmblsec .parent2 video { height: 300px; margin-bottom: -7px; } .benefits-steps-item { padding: 0px; text-align: left; height: auto; } .ourapp .icon-box img { margin-bottom: 10px; } .section-title h2 { font-size: 32px !important; line-height: 40px !important; width: 100% !important; } .testimonial-slider3 .swiper { overflow: hidden !important; } .mobilecapab .testimonial-btn .testimonial-button-prev { left: 4px; top: 9px !important; } .advantage .service-item-body1 svg { width: 100%; height: 300px; } .platdesc { padding: 0px 10px 0px 15px !important; } .systemview1 { display: none; } .gridsec .section-title .hero-video-content { width: 100% !important; margin: auto; text-align: left !important; margin-top: 0px !important; } .platimg { bottom: 15px !important; } .dnone { visibility: hidden; position: absolute; opacity: 0; pointer-events: none; } .advantage .section-title { max-width: 100% !important; margin-bottom: 0px; text-align: left !important; } .indexwhatdo .testimonial-btn .testimonial-button-prev { left: 4px; top: -19px !important; } .indexprojectsmobile .testimonial-btn .testimonial-button-prev { left: 0px; top: 7px !important; } .thepathindex .service-item-body p { font-size: 14px; height: 190px !important; } .digiban svg{ height:100%; width:100%; } .advantage .mt-5 { margin-top: 0rem !important; } .digi1 .digitalsec { padding: 0px 0px 0px !important; } .mobiledigi .hero-content{ height:auto !important; }.mobiledigi .buildsec video { width: 100% !important; height: 100%; -o-object-fit: cover; /* object-fit: cover; */ mix-blend-mode: luminosity !important; z-index: -1 !important; position: relative !important; } .mobiledigi .buildsec { position: relative; } .mobiledigi::before { background: linear-gradient(180deg, #fff 0%, #fff 50%, rgba(255, 255, 255, 0.4) 77%, rgb(14 79 87 / 80%) 65%) !important; } .mobiledigi .pd50 { padding: 0px 0px; }.digital2section .section-row .testidescription { max-width: 100%; text-align: left !important; }.swiper-slide-active .MeRLIN-service { box-shadow: 0 16px 40px rgba(0, 77, 92, 0.12); background: linear-gradient(180deg, #0c6a6ade 0%, #082326de 100%); }.swiper-slide-active .MeRLIN-service .icns { stroke: #fff !important; } .digitalmobilesec .swiper-slide-active .icns { stroke: #ffffff !important; }.swiper-slide-active .MeRLIN-service h3, .swiper-slide-active .MeRLIN-service li { color: #fff !important; }.digitalmobilesec .MeRLIN-service { height: 410px !important; text-align: left; } .digitalmobilesec .testimonial-btn .testimonial-button-prev { left: 4px; top: -19px; } .digitalmobilesec .MeRLIN-service h3 { font-size: 24px !important; line-height: 32px; font-weight: 600; } .digitalmobilesec .testimonial-btn .testimonial-button-prev { left: 4px; top: -19px; } .mobileapproach{ position: relative; padding: 0px 0px; } .mobileapproach::before { position: absolute; content: ''; top: 0px; left: 0px; height: 100%; background: linear-gradient(0deg, rgb(8 33 36 / 0%) 0%, rgb(8 35 38 / 0%) 39%, rgba(255, 255, 255, 1) 95%) !important; z-index: 2; width: 100%; } .mobileapproach img{ position: relative; left: 0px; }.mobileturn .container{ padding: 0px 0px; } .mobileturn .appro{ padding: 0px 15px; } .mobileturn .section-title{ padding: 0px 15px; } .mobileturn { padding: 60px 0px 0px !important; }.optimisation svg{ height: 100%; width: 100%; }.outcomes svg{ height: 100%; width: 100%; }.outcomesmobile{ display: flex; }.customer .section-title { width: 100%; padding: 0px 0px; margin-bottom: 0px; }.outcomesmobile{ padding: 50px 0px 20px !important; } .digital2section { padding: 40px 0; border-bottom: 1px solid #0823267d; } .digiexperience .service-item svg{ height:100%; width:100%; }.digiexperience .firstmobile:first-child { margin-bottom: 50px !important; }.digiexperience .sersec .col-lg-6{ margin-bottom:20px !important; }.digisec .digitalexp { width: 100% !important; }.customer .service-item-body svg{ height:100%; width:100%; }.optimiz .section-title p { width: 100% !important; }.optimiz .section-title h2 { margin-bottom: 16px; } .section-title { width: 100% !important; } .dnone { visibility: visible !important; position: relative !important; opacity:1 !important; pointer-events: none; } .section-title p { margin: 16px 0px !important; }.section-title .mt-5 { margin-top: 0rem !important; } .epicormobile .videopd0{ padding:0px 0px; }.epicormobile{ display:flex; }.mobilescale .hero-content { height: 100%; }.mobilescale .pd50 { padding: 20px 0px 0px; }.pillers{ padding-bottom:40px; }.card-graphic-container svg{ width: 100%; height: 100%; } .gridmobilsec .MeRLIN-service { background-color: transparent !important; padding: 20px; border-radius: 0px !important; /* box-shadow: 0 8px 30px rgba(0, 77, 92, 0.08); */ height: auto !important; text-align: left; border: none !important; border-left: 4px solid #499A9A !important; } .gridmobilsec .MeRLIN-service img{ margin-bottom: 15px; } .gridmobilsec .swiper-slide-active .MeRLIN-service { box-shadow: 0 16px 40px rgba(0, 77, 92, 0.12); /* background: linear-gradient(180deg, #0c6a6ade 0%, #082326de 100%); */ background: linear-gradient(180deg, rgba(8, 35, 38, 0) 0%, rgba(0, 128, 128, 50) 50%, rgb(8, 35, 38) 100%); } .gridmobilsec .testimonial-btn .testimonial-button-prev { left: 4px; top: 17px; } .gridmobilsec .testimonial-btn .testimonial-button-next { right: 4px; top: -10px; } .grid-section1 .testimonial-btn { margin-left: 0px !important; } .gridmobilsec .swiper-horizontal { padding: 0px 0px 50px !important; } .gridmobilsec .testimonial-btn { position: absolute; bottom: -5px; left: 3px !important; } .mobileonly .testspace{ display:block !important; }.parentban img { position: absolute; bottom: 1%; left: 5%; height: 200px !important; width: auto; }.brouchure p { font-size: 16px; font-weight: 300; width: 100% !important; } .mobileself .hero-content { height: 100% !important; }.mobileaddit .service-item-body1 { height: auto !important; }.mobileaddit{ padding-bottom:0px !important; }.mobileaddit img{ position:relative !important; } .mobileself .hero-bg-video { position: relative !important; }.mobileself .buildsec video { width: 100% !important; position: relative !important; mix-blend-mode: normal !important; }.mobileself::before { background: linear-gradient(180deg, #fff 0%, #fff 50%, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0) 100%) !important; } .mobileself .pd50 { padding: 0px 0px !important; }.mobileself .section-title h2 { color: #000; margin-bottom: 0px !important; }.mobileself .mt-4 { margin-top: 0rem !important; }.mobileself .self-service { margin: 15px 0px !important; } .mobilefeatures .testimonial-btn .testimonial-button-prev { left: 0px !important; top: 0px !important ; }.mobilefeatures .swiper-slide-active .mds-waber { border: 0 !important; background: linear-gradient(180deg, rgba(0, 128, 128, 0.534) 0%, #082326 100%) !important; } .mobilefeatures .swiper-slide-active .mds-waber p { display: block !important; color: #fff; } .mobilefeatures .mds-waber:hover h6 { margin-bottom: 10px !important; }.retailsection { padding: 30px 0px !important; min-height: 100% !important; text-align: left; } .corushrbanner1::before { background: #082326 !important; z-index: -1 !important; } .mobileapproach1{ position:relative; } .mobileapproach1::before { position: absolute; content: ''; top: 0px; left: 0px; height: 100%; background: linear-gradient(0deg, rgb(8 33 36 / 0%) 0%, rgb(8 35 38 / 0%) 39%, rgb(8 35 38) 95%) !important; z-index: 2; width: 100%; } .corushrbanner1::before { padding: 30px 0px 0px !important; } .corushrbanner1 { padding:30px 0px !important; } .additional1 .imgadd1 img { position: absolute; right: 0px !important; bottom: -26px !important; } .additional1 .w80 p { width: 100% !important; margin-bottom: 5px; }.additional1 .imgadd1{ padding: 20px 20px 0px 20px !important; } .additional1 .mobileimgadd img { position: absolute !important; right: 0px; bottom: -12px !important; height: 300px !important; } .mobileaddit .mobileimgadd{ height:570px !important; } .testimonial-slider1 .service-item-body .desc { height: 350px !important; } .parentban img { height: 300px !important; width: auto; }.self1 .self-service img { padding-right: 10px; height: 40px; width: 40%; }.self1 .mblself .self-service{ height: auto !important; display: block !important; gap: 10px; width: 100% !important; }.self1 .mblself .challenge-point-waber img { margin-top: 5px; margin-bottom: 10px; } .aboutvaluemobile .valueslide{ height:auto !important; }.biimp-tabs .tabcontent { padding: 0px 0px !important; } .mobileanimation .swiper-slide.swiper-slide-active .service-item { background: linear-gradient(180deg, #082326 0%, rgba(0, 128, 128, 0.8) 50%, #082326 100%) !important; color: #fff !important; transition: 0.3s ease; border:none !important; } /* All text inside active slide → white */ .mobileanimation .swiper-slide.swiper-slide-active .service-item *, .mobileanimation .swiper-slide.swiper-slide-active h3, .mobileanimation .swiper-slide.swiper-slide-active p, .mobileanimation .swiper-slide.swiper-slide-active a { color: #fff !important; }.testslide1 .swiper-slide-active .service-item .anim-dot { animation: travel-along-path 2s ease-out forwards; -webkit-animation: travel-along-path 2s ease-out forwards; r: 2.8px; /* increase from 1.5px to 3px */ transition: r 0.3s ease; -webkit-transition: r 0.3s ease; -o-transition: r 0.3s ease; } /* SVG icons also white */ .mobileanimation .swiper-slide.swiper-slide-active .icns { stroke: #fff !important; /* fill: #fff !important; */ } .mobileanimation .testimonial-btn { justify-content: start; margin-top: 0px; width: max-content; }.mobileanimation .testspace { padding: 2px 10px; } .mobileanimation .testimonial-btn .testimonial-button-next { right: 4px; top: -6px !important; } .mobileanimation .card-graphic-container svg{ width: 100% !important; height: 100% !important; } .mobileanimation .service-item { padding: 15px 10px !important; }.mobileanimation .service-item-body p { height: 120px !important; } .mobileanimation .btn-style-3{ padding: 0px 0px !important; margin-top: 10px !important; }.epicormobile1 { padding: 50px 0px !important; }.epicadv2 .w80 h3 { width: 100% !important; } /*.additional1 .service-item-body1 {*/ /* min-height: 100% !important;*/ /*}*/ .additional1 .col-lg-6 { margin-bottom: 20px !important; }.additional1 .col-lg-4 { margin-bottom: 20px !important; }.additional1 .service-item-body1.firstmobilebox{ height: auto !important; } .epicright1 img { height: 280px !important; width: auto; }.mobilesecpd30{ padding: 40px 0px 30px !important; } .width50 { width: 100% !important; text-align: left; }.epicsecslide .valueslide { height: 400px !important; width: auto !important; padding: 24px !important; } .mobilecabsec .testimonial-btn .testimonial-button-prev { left: -2px !important; top: 0px !important; }.mobilecabsec .swiper-slide-active .valueslide { background: linear-gradient(180deg, rgba(0, 128, 128, 0.534) 0%, #082326 100%) !important; border: none !important; } .mobilecabsec .swiper-slide-active .valueslide p { color: #fff !important; }.mobilecabsec{ padding: 30px 0px 10px !important; } .our-faq-section .section-title{ text-align: left !important; } .our-testimonial .testianimdot .service-item-header { position: relative; display: flex; justify-content: center !important; align-items: center; margin-bottom: 30px; }.our-testimonial .service-item-header { position: relative; display: flex; justify-content: space-between !important; align-items: center; margin-bottom: 15px; } .enterslide .service-item-header { display: block !important; } .builtsec .section-title p { font-size: 16px !important; line-height: 24px; margin: 16px 0px !important; }.buildsection .buildsecont .section-title h2{ text-align: left !important; }.buildsection .buildsecont .section-title p{ text-align: left !important; }.buildsection .dynamics-advantage-waber { /* margin-bottom: 30px; */ margin: 0px; }.buildsection .text-center{ text-align: left !important; } .mobiletesti5 .testimonial-btn .testimonial-button-prev { left: 0px !important; top: 0px !important; } .mobiletesti5 .swiper-slide-active .mds-waber { border: 0 !important; background: linear-gradient(180deg, rgba(0, 128, 128, 0.534) 0%, #082326 100%) !important; } .mobiletesti5 .swiper-slide-active .mds-waber p { display: block !important; color: #fff; } .mobiletesti5 .mds-waber:hover h6 { margin-bottom: 10px !important; }.mobileapprochslide .testimonial-btn .testimonial-button-prev { left: 0px !important; top: -19px !important; }.mobileapprochslide .swiper-slide-active .service-item .anim-dot { animation: travel-along-path 2s ease-out forwards; -webkit-animation: travel-along-path 2s ease-out forwards; r: 2.8px; /* increase from 1.5px to 3px */ transition: r 0.3s ease; -webkit-transition: r 0.3s ease; -o-transition: r 0.3s ease; }.mobileapprochslide .service-item{ height: 390px !important; } .mobileapprochslide .testimonial-slider .flip-card-inner h3 { font-size: 20px; margin-bottom: 15px; height: 80px !important; }.mobileapprochslide .oa-para-waber { gap: 30px !important; }.msadvmobile .imgpos3 img { position: absolute; bottom: 0px; left: 0px; height: 220px; }.industries .swiper-wrapper { padding: 0px 0px 70px !important; }.msdtestmobile .testimonial-btn1 .testimonial-button-prev { left: 0px !important; top: 6px !important; } .msdtestmobile .swiper-wrapper { padding: 0px 0px 0px !important; }.msdtestmobile .testimonial-btn1 { position: absolute; bottom: -15px !important; } .msdtestmobile .our-testimonial .enterslide .service-item-header { justify-content: center !important; } .width80{ width:100% !important; } .mobilesap2 .dynamics-advantage-waber { display: flex !important; gap: 20px !important; align-items: stretch; margin-bottom:15px !important; }.mobilesap2 .mt-4 { margin-top: 0rem !important; } .mobilesap2 { padding: 30px 0px 30px !important; } .mobilesap2 .dynamics-advantage-waber img { height: 70px !important; } .whyrhienmobile .testimonial-btn .testimonial-button-prev { left: 0px; top: 0px !important; } .whyrhienmobile .testimonial-btn .testimonial-button-next { right: 0px; top: 0px !important; } .whyrhienmobile .swiper-wrapper { cursor: none; padding: 0px 0px 0px !important; }.whyrhienmobile .valueslide { margin-bottom: 25px !important; }.capabilities { padding: 20px 0px !important; } .saptest .testimonial-btn .testimonial-button-prev { left: 3px; top: -19px !important; }.saptest .swiper-slide-active .service-item .anim-dot { animation: travel-along-path 2s ease-out forwards; -webkit-animation: travel-along-path 2s ease-out forwards; r: 2.8px; /* increase from 1.5px to 3px */ transition: r 0.3s ease; -webkit-transition: r 0.3s ease; -o-transition: r 0.3s ease; }.saptest .swiper-slide-active .service-item ellipse{ fill:#fff !important; } .whyrhienmobile .swiper-slide-active .valueslide { border: 0 !important; background: linear-gradient(180deg, rgba(0, 128, 128, 0.534) 0%, #082326 100%) !important; } .whyrhienmobile .swiper-slide-active .valueslide p { display: block !important; color: #fff; }.enterslide .swiper-slide-active .service-item .anim-dot { animation: travel-along-path 2s ease-out forwards; -webkit-animation: travel-along-path 2s ease-out forwards; r: 2.8px; /* increase from 1.5px to 3px */ transition: r 0.3s ease; -webkit-transition: r 0.3s ease; -o-transition: r 0.3s ease; } .enterslide .swiper-slide-active .service-item .icns2{ fill:#fff !important; } .enterslide .flip-card-inner h3 { font-size: 20px; margin-bottom: 15px; height: 70px !important; }.enterslide .swiper-wrapper { cursor: none; padding: 0px 0px 0px; }.indexwhatdo .testimonial-slider .service-item{ height:470px !important; } .indexwhatdo .testimonial-slider .flip-card-inner p { height: 155px !important; } .indexwhatdo .swiper-slide-active .service-item .anim-dot { animation: travel-along-path 2s ease-out forwards; -webkit-animation: travel-along-path 2s ease-out forwards; r: 2.8px; /* increase from 1.5px to 3px */ transition: r 0.3s ease; -webkit-transition: r 0.3s ease; -o-transition: r 0.3s ease; }.Awards { padding-bottom: 0px !important; } .enterintsec .mobileonly { position: absolute; bottom: 15px !important; left: 23% !important; }.aboutbanner::before { background: #fff !important; } .aboutbanner .hero-content { height: 100% !important; } .aboutbanner .hero .hero-bg-video { position: relative !important; }.aboutbanner .hero-bg-video::before { background: linear-gradient(-180deg, rgba(255, 255, 255, 1) 3%, rgba(0, 0, 0, .1) 64%, rgba(0, 0, 0, .1) 48%) !important; }.aboutbanner .hero-bg-video video { width: 100%; height: 100%; object-fit: contain !important; right: 0% !important; position: relative; /* z-index: -1; */ } .aboutbanner .hero-bg-video { position: relative !important; top: 5px !important; }.aboutbanner .col-sm-6{ padding:0px 0px; }.aboutbanner{ padding-bottom:0px !important; }.aboutbanner .section-title h1 { font-size: 40px !important; font-family: "Raleway", sans-serif; line-height: 48px !important; }.aboutbanner .hero-video-content { width: 100% !important; }.mapsection svg{ height:100%; width:100%; }.mission .mission-left h2 { font-size: 32px !important; line-height: 40px !important; }.mission .mission-left p { font-size: 24px !important; line-height: 32px !important; }.mission .mission-left h5 { color: #499A9A; font-family: "Raleway", sans-serif; font-size: 24px; line-height: 40px; top: 27px !important; left: 0px; }.missionhead img{ height:80px !important; margin-bottom:0px !important; }.mission #myVideo { position: absolute; top: 15% !important; left: 0px; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; z-index: 0; transform: scale(1.8); }.mission-leftpd{ padding-top:60px; }.pd80 { padding: 40px 0px !important; }.aboutretail { padding: 40px 0px !important; }.retail-baner-11::before { position: absolute !important; }.aboutvaluemobile .valueslide { margin-bottom: 0px !important; } .aboutvaluemobile .testimonial-btn .testimonial-button-prev { left: 0px !important; top: 0px !important; } .aboutvaluemobile .swiper-slide-active .valueslide { border: 0 !important; background: linear-gradient(180deg, rgba(0, 128, 128, 0.534) 0%, #082326 100%) !important; } .aboutvaluemobile .swiper-slide-active .valueslide p { display: block !important; color: #fff; }.sociaimp1::before { position: absolute !important; background-image: url(../images/child.jpg) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-attachment: inherit !important; }.mds-section .hero-video-content1{ margin-top: 0px !important; }.mobilesocial .socialcont{ padding-bottom: 240px; }.mobilesocial::after { position: absolute !important; background: linear-gradient(0deg, rgb(255, 255, 255, .1) 14%, rgb(255, 255, 255) 17%, rgb(255, 255, 255) 29%) !important; left: 0px; }.sociaimp1::before { left: 0% !important; } .pe-chellange-content-waber1 .section-title h2 { font-size: 32px !important; line-height: 40px !important; width: 100% !important; color: #000 !important; }.pe-chellange-content-waber1 { width: 100%; color: #000; padding-top: 40px; }.mobileresults .retail-chellange-bg-img{ padding: 0px 15px 15px; border-radius: 8px; } .leadermobile ul{ padding-left:0px !important; } .leder-waber-hight { padding: 20px !important; min-height: auto !important; }.success-main1 { padding: 40px 0px !important; } .webhero .baner-img1 { position: relative !important; right: 0px !important; top: 0px !important; width: 100% !important; height: 100%; content: ""; z-index: -1 !important; } .webinarimg1 img { position: relative !important; right: 0px; bottom: 0% !important; width:100% !important; /* height: 760px; */ }.webhero .col-sm-7{ padding:0px 0px; }.webhero::after { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 40%, rgba(8, 35, 38, 0) 88%) !important; width: 100%; height: 100%; }.webhero1 .col-sm-7{ padding:0px 0px; }.webhero1::after { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 50%, rgba(8, 35, 38, 0) 88%) !important; width: 100%; height: 100%; } .webhero1 .baner-img1 { position: relative !important; right: 0px !important; top: 0px !important; width: 100% !important; height: 100%; content: ""; z-index: -1 !important; } .testimonial-sliders11 .col-sm-4 { margin-bottom: 0px !important; } .cuccess-story-waber { padding: 20px 20px 20px 20px !important; } .successsec { padding:40px 0px !important; } .aboutvaluemobile .swiper { padding-bottom:50px; }.retailparent2 .bg-image1 { bottom: 0px; width: 100% !important; height: 100%; object-fit: cover; opacity: 1 !important; position: relative !important; right: 0px; } .bg-video-waber { display: flex; flex-direction: column; } .bg-video-waber-content { order: 1; /* content first */ } .bg-video-waber .parent2 { order: 2; /* video second */ }.mobilewaber::before { content: ""; position: absolute; top: 0; left: 0px !important; width: 100% !important; height: 100%; background: linear-gradient(180deg, rgba(8, 35, 38, 1) 72%, rgba(8, 35, 38, 1) 70%, rgba(8, 35, 38, 0.81) 75%, rgb(10 83 91 / 10%) 80%, rgba(255, 255, 255, 0) 84%) !important; }.mobilewaber .retailparent2::before { content: ""; position: absolute; top: 0; left: 0px !important; width: 120%; height: 100%; background: transparent !important; z-index: 2; pointer-events: none; }.erpexcel.pdb0{ padding-top:40px !important; }.erpexcel .section-title{ text-align:left; }.erpexcel .col-sm-7{ padding:0px 0px; }.erpexcel .retailparent2::before { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 0%, rgba(8, 35, 38, 1) 0%, rgb(8 35 38 / 0%) 50%, rgb(10 83 91 / 10%) 100%, rgba(255, 255, 255, 0) 100%) !important; }.erpexcel .retailparent2 .bg-image1 { filter: none !important; height: 300px; margin-bottom: -10px; }.mobileerpsecond{ padding:40px 0px !important; }.mobileerpsecond .erpabout h2 { width: 100% !important; margin: auto; }.mobileerpsecond .erpabout p { width: 100% !important; margin: auto; }.erpcustomer .testimonial-btn .testimonial-button-prev { left: 0px; top: 1px !important; }.erpbenefits::before{ background:none !important; }.erpbenefits .pd0{ padding:0px 0px; }.erpbenefits { padding-bottom:0px !important; }.mobileelevate .erpexp .col-sm-4{ margin-bottom:15px; }.mobileelevate .eslh-waber { width: 100% ; gap: 10px; }.erpexp .eslh-waber p{ margin-bottom:0px; }.mobileelevate .btn-style-3{ padding:6px 0px; }.mobilecusexp .section-title p { width: 100% !important; }.excelimg .Customer-Speak-title { display: -webkit-box; display: -ms-flexbox; display: block !important; -webkit-box-align: start; -ms-flex-align: center; align-items: start; margin-bottom: 0px !important; } .mobilecusexp .micfabric { padding: 0px 0px !important; }.excelimg .micfabric .Customer-Speak-title img { width: 100% !important; height: auto !important; }.excelimg .exppara { width: 100% !important; padding:15px 10px 10px !important; }.Customer-Speak-title>div { margin-left: 0px !important; }.exppara .ser-btn{ margin:0px 0px !important; } .biimp-tabs .tab { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; /* smooth scroll */ /* Hide scrollbar (Chrome, Safari) */ scrollbar-width: none; /* Firefox */ } .biimp-tabs .tab::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } .biimp-tabs .tab button { flex: 0 0 auto; margin:20px 10px 10px 0px; } .tab-cards { display: block !important; margin-top: 0px !important; }.tab-cards .card-left { width: 100% !important; padding: 15px 15px !important; }.tab-cards .card-right { width: 100% !important; }.corimg ul{ padding-left:0px !important; }.pdt50 { padding-top: 40px !important; }.mobilevideo{ display:none; }.pd0{ padding:0px 0px !important; }.mobilecasestudy{ padding-bottom:40px !important; }.mobilecasestudy .section-title{ text-align:left; }.additional1 img { height: 250px !important; }.advantage .service-item-body1 { height: 350px ; margin-bottom: 15px; }.biadv{ padding:40px 0px !important; }.advant .imgadd h3 { width: 100%; }.mobilecasestudy .retailparent2::before { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 2%, rgba(8, 35, 38, 1) 4%, rgb(8 35 38 / 0%) 50%, rgb(10 83 91 / 10%) 100%, rgba(255, 255, 255, 0) 100%) !important; } .mobilecasestudy .retailparent2 .bg-image1 { bottom: -8px !important; } .mobileself1 .hero-bg-video { position: relative !important; }.mobileself1::before { background: #fff !important; z-index: -1; }.mobileself1 .buildsecont { padding-top: 0px !important; }.mobileself1 .hero-video-content { margin-top:0px !important; }.self1 .buildsec video { width: 100% !important; mix-blend-mode: normal !important; } .digi2 .buildsec video { width: 100% !important; position: relative !important; }.advant .imgadd h3 { width: 100% !important; }.advant .imgadd p { width: 100% !important; } .mobileself1 .hero-content { height: auto !important; } .mobileself1 .pd50 { padding: 0px 0px; }.biservice { padding: 40px 0px !important; }.biservice .section-title { margin-bottom: 10px; }.biservice .section-title h2 { margin-bottom: 5px !important; }.biimp-tabs .tab { margin-bottom: 16px !important; }.amlmobileindex{ padding-top:40px !important; } .aimlcase .testimonial-btn .testimonial-button-prev { left: 4px; top: -19px !important; } .aimlcase .our-testimonial .enterslide .service-item-header { justify-content: start !important; } .aimlcase .testimonial-btn { position: absolute; bottom: 0px; left: -10px !important; } .aimlcase .enterslide .swiper-wrapper { padding: 0px 0px 30px !important; }.retailsection1{ padding:40px 0px !important; }.enter .section-title { max-width: 100% !important; }.mobilecomm{ padding-bottom:0px !important; } .mobileecommcap .testimonial-btn .testimonial-button-prev { left: 0px !important; top: 0px !important; } .epictechnology .testimonial-btn .testimonial-button-prev { left: 4px; top: -19px !important; } .epictechnology .enterslide .flip-card-inner h3 { height: 25px !important; }.epictechnology .testimonial-slider .service-item { height: 350px !important; }.erpexcel { padding-bottom:0px !important; }.mobilearchit .mobileonly .testimonial-button-prev { left: 0px !important; top: 2px !important; } .mobilearchit .mobileonly .testimonial-button-next { right: 0px !important; top: 0px !important; } .mobilearchit .buildsection { padding: 40px 0px 40px !important; }.mobilearchit .mt-4 { margin-top: 0rem !important; }.mobilegolf::before{ background:none !important; }.mobilegolf{ padding-bottom:0px !important; }.digitalsolsec { padding-top:40px !important; }.dew-arrow-animet svg{ height:100% !important; width:100% !important; }.dew-schorrol .testimonial-btn .testimonial-button-prev { left: 4px; top: -19px !important; }.dew-schorrol .mds-waber2{ margin-bottom:0px !important; }.wcu-video { position: relative !important; right: 0px !important; z-index: -2; top: 0px; height: 100%; }.wcu-1 .wcu-video video { height: 250px !important; margin-bottom: -8px; }.wcu-1::after { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 75%, rgba(8, 35, 38, 0.18) 100%) !important; } .wcu-1 { padding: 40px 0px 0px !important; }.dataengg svg{ padding-bottom:20px !important; padding-top:10px !important; }.mobilebuild{ padding: 40px 0px 20px !important; }.testimonial-slider1 .swiper-wrapper { cursor: none; padding: 0px 0px 25px !important; }.dataengg .builtsec .section-title p { margin: 16px 0px !important; }.dataengg .builtsec .section-title h2 { margin-bottom: 16px !important; }.mobilewcu .platdesc { padding: 0px 10px 0px 0px !important; }.mobilewcu .wcu-waber-1 { padding: 0px !important; }.amsbanner{ padding-bottom:0px !important; }.amsbanner .retailparent2 .bg-image1 { bottom: -8px !important; height: 300px; }.amsbanner .retailparent2::before { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 5%, rgba(8, 35, 38, 1) 0%, rgb(8 35 38 / 0%) 50%, rgb(10 83 91 / 10%) 100%, rgba(255, 255, 255, 0) 100%) !important; z-index: 2; } .mobileamslide .amslide .testimonial-btn .testimonial-button-prev { left: 4px; top: -9px !important; } .mobileamslide .amslide .testimonial-btn .testimonial-button-next { right: 4px; top: -10px !important; }.mobilemethod::before{ background-image:none !important; background-attachment: inherit !important; position:relative !important; }.mobilemethod{ padding:40px 0px 0px !important; }.amsmethod1 .hero-video-content{ margin-top:0px !important; }.amsmethod1{ padding:40px 0px !important; }.amsmethod1 .mstechsolutions .height600 { min-height: auto !important; }.mobileamslide .valueslide p { font-size: 20px !important; line-height: 28px !important; }.mobileuiux{ padding-bottom:0px !important; }.mobileuiux .retailparent2::before { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 5%, rgba(8, 35, 38, 1) 0%, rgb(8 35 38 / 0%) 50%, rgb(10 83 91 / 10%) 100%, rgba(255, 255, 255, 0) 100%) !important; z-index: 2; }.mobileuiux video{ margin-bottom:-8px; height:300px !important; }.mobileuiux .section-title{ text-align:left !important; }.mobileuiux .section-title p { margin: 16px 0px !important; }.mobileuiux .section-title h2 { margin-bottom: 16px !important; }.hero video{ height:300px !important; margin-bottom:-8px; }.mobilesself1 .buildsecont .mobileh2 h2 { margin-bottom: 0px !important; }.mobilecommpd0{ padding:40px 0px 0px !important; }.mobilecommpd0 .retailparent2::before { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 0%, rgba(8, 35, 38, 1) 0%, rgb(8 35 38 / 0%) 50%, rgb(10 83 91 / 10%) 100%, rgba(255, 255, 255, 0) 100%) !important; }.mobilecommpd0 .section-title{ text-align:left !important; }.mobilecommpd0 .section-title p { margin: 16px 0px !important; }.mobilecommpd0 .builtsec p { margin-bottom: 16px !important; }.testbtnposition { position: absolute; bottom: -15px !important; left: 19%; }.mobilefluent{ padding:40px 0px 0px !important; }.mobilefluent .section-title{ text-align:left !important; }.mobilefluent .section-title p { margin: 16px 0px !important; }.mobilefluent .builtsec p { margin-bottom: 16px !important; }.mobilefluent .retailparent2::before { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 0%, rgba(8, 35, 38, 1) 0%, rgb(8 35 38 / 0%) 50%, rgb(10 83 91 / 10%) 100%, rgba(255, 255, 255, 0) 100%) !important; }.mobilewhyfc .dynamics-advantage-waber{ display:flex; gap:10px; align-items: center; }.mobilewhyfc .col-12{ padding:0px 0px; }.mobilewhyfc{ padding-bottom:40px !important; }.mobilewhyfc img{ height:60px; width:120px; } .mobilecommexpert .testimonial-btn .testimonial-button-prev { left: 0px !important; top: 0px !important; } .mobilecommexpert .swiper-slide-active .valueslide { border: 0 !important; background: linear-gradient(180deg, rgba(0, 128, 128, 0.534) 0%, #082326 100%) !important; } .mobilecommexpert .swiper-slide-active .valueslide p { color: #fff; } .agency-supports-logo img { max-height: 60px; }.msmobilecap .mstechapproach .valueslide { height: 270 !important; /* width: 300px; */ padding: 16px !important; }.mstechapproach .valueslide p { font-size: 20px; line-height: 28px; }.mstechapproach .swiper-slide-active .valueslide { border: 0 !important; background: linear-gradient(180deg, rgba(0, 128, 128, 0.534) 0%, #082326 100%) !important; } .mstechapproach .swiper-slide-active .valueslide p { color: #fff; } .msmobilecap .testimonial-btn .testimonial-button-prev { left: 0px !important; top: 0px !important; }.mobilemssol .hero-content{ height:auto !important; }.mobilemssol .hero-content .section-title h2{ text-align:left !important; }.mobilemssol .hero-content .section-title p{ text-align:left !important; }.mobilemssol .mstechsolutions .benifet-content-waber { margin-top: 0px !important; }.mobilemssol .mstechsolutions .height600 { min-height: auto !important; }.deliver::after{ background:#fff !important; } .mobilexplore .service-item-body1 { height: 250px !important; } .mobilexplore .imgpos1 img { height: 200px !important; }.blog-waber-one { margin: 20px 0px !important; }.blog-content-waber { padding: 15px !important; margin:0px 0px !important; width: 100% !important; gap: 16px !important; }.blog-baner-title { font-size: 32px !important; line-height: 40px !important; }.blog-baner { margin: 0px 0px 25px !important; }.testimonial-btn77 { left: 15% !important; transform: translate(0%, 0%) !important; }.bolg-filter-waber .filter-controls { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; /* smooth scroll */ /* Hide scrollbar (Chrome, Safari) */ scrollbar-width: none; /* Firefox */ } .bolg-filter-waber .filter-controls::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } .bolg-filter-waber .filter-controls button { flex: 0 0 auto; margin:0px 10px 0px 0px; }.page-nate-waber { display: flex; gap: 5px !important; margin-top: 0px !important; margin-bottom: 15px !important; }.page-nate-waber span { font-size: 18px !important; } .webinarhero::after { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 34%, rgba(8, 35, 38, 0) 88%) !important; }.mobileimg img{ display:none; } .webinarhero::after { position: absolute; content: ""; z-index: -1; top: 0px; left: 0px; background: #082326; background: linear-gradient(180deg, rgba(8, 35, 38, 1) 35%, rgba(8, 35, 38, 0) 88%) !important; width: 100%; height: 100%; }.collatpage .filter-controls { width: 100% !important; }.collattabsec .video-gallery-image { height: auto !important; margin-bottom: 0px !important; }.collattabsec .ser-btn a { height: 100% !important; }.newcollat .mey-fucher-tab-waber-content1 h4 { margin: 16px 0px 16px !important; }.newsmobile .retailparent2::before { left: 0px !important; width: 100% !important; height: 100%; background: linear-gradient(180deg, rgb(255 255 255) 0%, rgb(255 255 255) 0%, rgb(8 35 38 / 0%) 50%, rgb(10 83 91 / 10%) 100%, rgba(255, 255, 255, 0) 100%) !important; }.chat-main-waber { display: block !important; margin-top: 30px !important; gap: 20px; } .chat-btn-1 { display: flex !important; align-items: center; width: 100% !important; margin-bottom:10px !important; }.contect-waber { padding: 40px 0px !important; }.capabilities .section-title{ margin-bottom:15px; margin-top:10px; } .whyrhienmobile .testimonial-btn { bottom: 20px !important; }.mobilepd40{ padding:40px 0px 0px !important; } .testslide1 .swiper-slide-active .service-item { border: none !important; } .mobileanimation .testimonial-btn .testimonial-button-prev { left: 4px; top: 5px !important; position: relative; } .mobileanimation .testimonial-btn .testimonial-button-next { right: 4px; top: -6px !important; position: relative; }.testimonial-slider5 { margin: 5px 0 !important; } .epiccomp .testimonial-btn .testimonial-button-prev { left: 4px; top: -19px !important; } .epiccomp .flip-card-inner p { height: 100px !important; }.epiccomp .flip-card-inner h3 { height: 40px !important; } .mobilecarwabe::after { background: #082326; background: linear-gradient(180deg, rgba(8, 35, 38, 1) 70%, rgba(255, 255, 255, 0) 85%) !important; } .mobilemployee .testimonial-btn1 { position: absolute; bottom: -10px !important; left: 15% !important; } .mobilefeatures .mds-waber { min-height: 270px !important; }.MeRLIN-service .service-icon1 img { margin-bottom: 15px; } .erpcustomer .swiper-slide.swiper-slide-active .mds-waber { border: 0 !important; background: linear-gradient(180deg, rgba(0, 128, 128, 0.534) 0%, #082326 100%) !important; } .erpcustomer .swiper-slide.swiper-slide-active .mds-waber h6 { color: #fff !important; } .erpcustomer .swiper-slide.swiper-slide-active .mds-waber p { color: #fff !important; display:block !important; }.erpcustomer .mds-waber { padding: 20px 20px; min-height: 300px !important; }.mobilepdb40{ padding-bottom:40px !important; }.mobilepdb40 .hero-video-content{ margin-top:0px !important; }.epictechnology .enterslide .swiper-slide-active .ser-btn .animated-svg-link1 .dot{ fill:#fff !important; }.dew-schorrol .swiper-slide-active .mds-waber2 { border: 0 !important; background: linear-gradient(180deg, rgba(0, 128, 128, 0.534) 55%, #082326 100%) !important; } .dew-schorrol .swiper-slide-active .mds-waber2 p { display: block !important; color: white !important; } .dew-schorrol .swiper-slide-active .mds-waber2 h6 { color: white !important; } .filtermbl button{ border: 1px solid #082326 !important; border-radius: 60px; position: relative; height: 48px; width: 48px; line-height: 25px; padding: 10px; text-align: center; background:#fff; margin: auto; } .search-row { display: flex; align-items: center; gap: 10px; padding: 10px 0px; } .search-input { flex: 1; padding: 10px 12px; border: 1px solid #082326; border-radius: 25px; } /*.mobile-blog-top .filter-btn {*/ /* width: 40px;*/ /* height: 40px;*/ /* border-radius: 50%;*/ /* border: 1px solid #ccc;*/ /* background: #fff;*/ /* display: flex;*/ /* align-items: center;*/ /* justify-content: center;*/ /*}*/ .mobile-filter { width: 100%; background: #fff; padding: 15px 0px; display: none; transition: max-height 0.35s ease, padding 0.35s ease; /*border-top: 1px solid #e5e5e5;*/ } .mobile-filter label { display: block; margin-bottom: 12px; } .page-video-gallery{ padding-top:30px !important; }.webinarbtn .video-gallery-image { margin-bottom: 0px !important; height: auto !important; }.webinarbtn .filtermbl{ padding-bottom:20px !important; }.scrollspy-nav-container .nav-pills { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; /* smooth scroll */ /* Hide scrollbar (Chrome, Safari) */ scrollbar-width: none; /* Firefox */ } .scrollspy-nav-container .nav-pills::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } .scrollspy-nav-container .nav-pills li { flex: 0 0 auto; margin:0px 10px 0px 0px; }.case-study-main-title { font-size: 32px !important; line-height: 40px !important; }.timeline-item:nth-child(odd) { padding-right: 0px !important; }.timeline-item:nth-child(even) { padding-left: 40px !important; left: 50%; }.aboutbanner video{ height:100% !important; }.indexbanner .hero-bg-video video{ height:170% !important; }.trsutedtesti .testimonial-slider1 .testimonial-btn1 { position: absolute; bottom: -10px !important; left: 15% !important; }.indexwhatdo .testimonial-btn { bottom: 30px !important; left: -15px !important; } .success-company img { width: auto; height: 70px !important; } .main-dark-title-waber { gap: 32px; height: auto !important; }.mobileresults{ padding-bottom:30px; }.corussecond .section-title{ margin-bottom:10px !important; }.mobilefeatures .testimonial-slider5 { margin: 5px 0 !important; } .pd0{ padding-bottom:0px !important; }.mobiletesti5 .testspace { display: block !important; }.mobileapprochslide .microinner-icon svg { height: 55px !important; }.testslide1 .service-item-body h3 { height: 70px; } .mobileanimation .service-item { padding: 20px 10px; } .swiper-slide-active .ser-btn .dot { fill: #fff !important; transition: fill 0.3s ease; } .testianimdot .swiper-slide-active .service-item .animated-svg-link1 .dot { fill: #fff !important; opacity: 1 !important; }.merlinbenefit .mobile-onley-show{ margin-bottom:-10px !important; } .mobilecabsec .epicsecslide .valueslide { height: 300px !important; }.epiccompanion .epiccomp .flip-card { height: 300px !important; }.epiccompanion .epiccomp .oa-para-waber { gap: 5px !important; }.capabilities .whyrhienmobile .valueslide { min-height: 210px !important; }.mobileself1{ padding-bottom:0px !important; }.biservice { padding: 40px 0px !important; } .enterslide .swiper-slide-active .icns1{ stroke: #fff !important; }.collatmodal .modal-dialog { max-width: 100% !important; top: 0% !important; }.blog-content-waber2 { height: 100% !important; max-width: 100% !important; } .order2{ order:2; padding:0px 0px; } .imgpos img { height: auto !important; } .platimg svg { width: 100% !important; height: 100% !important; } .mobileonly { display: flex !important; } .industries .testimonial-btn1 { position: absolute; bottom: 0px !important; left: 18% !important; } .mobileonly .testimonial-button-prev { left: -5px !important; top: -9px !important; } .mobileonly .testimonial-button-next { right: -5px !important; top: 9px !important; } .industries .service-item-body h3 { bottom: 15px !important; left: 24px; } .places { margin-top: 20px; } .success-counter-item p { font-family: 'helvetica-neue-lt-pro' !important; font-weight: 400; font-size: 16px; line-height: 24px; } .countingss { padding: 5px; } .countingss .success-counter-box1 { border: 1px solid #000; padding: 15px 15px; } .countingss .success-counter-box1 h2 { height: 105px; font-family: "Inter", sans-serif; font-size: 40px; line-height: 48px; } .countingss .col-sm-2 { border: none !important; padding: 5px 5px; } .success-counter-item p { font-size: 16px; } .benefits-steps-item { padding: 0px; text-align: left; height: auto; } .brainsec { position: relative; } .brainsec::before { position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; /* background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%); */ background: #082326 !important; z-index: -1; } .bg-image { width: 247%; mix-blend-mode: screen; margin-left: -290px; height: 380px; -o-object-fit: cover; object-fit: cover; } .brainsec { background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 35, 38, 1)), color-stop(80%, rgba(8, 35, 38, 1)), to(rgba(0, 0, 0, 1))); background: -o-linear-gradient(top, rgba(8, 35, 38, 1) 0%, rgba(8, 35, 38, 1) 80%, rgba(0, 0, 0, 1) 100%); background: linear-gradient(-180deg, rgba(8, 35, 38, 1) 0%, rgba(8, 35, 38, 1) 80%, rgba(0, 0, 0, 1) 100%); padding-left: 0px !important; } .parent { background: -webkit-gradient(linear, left bottom, left top, color-stop(80%, rgba(255, 255, 255, 0)), color-stop(77%, rgb(8 35 38)), to(rgb(8 35 38))); background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0) 80%, rgb(8 35 38) 77%, rgb(8 35 38) 100%); background: linear-gradient(0deg, rgba(255, 255, 255, 0) 80%, rgb(8 35 38) 77%, rgb(8 35 38) 100%); /* position: relative; */ } .hero { text-align: center; padding: 40px 0px 20px; } .brainsec { padding: 60px 0px 0px; } .swiper-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; width: 100%; } .testimonial-slider .testspace { padding: 0px 10px; margin-top: -19px; } .testimonial-slider3 .testimonial-controls .testspace { padding: 0px 10px; margin-top: -5px; } .testimonial-btn { position: relative; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; margin-top: 0px; } .hero-bg-video2 { position: relative !important; width: 110% !important; height: 100% !important; top: 0% !important; left: -15px !important; } .section-row .section-title { max-width: 100%; text-align: left; } .brainsec .hero-bg-video2::before { position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; background: -webkit-gradient(linear, left bottom, left top, color-stop(35%, rgba(0, 0, 0, .2)), color-stop(70%, rgb(8 35 38 / 90%)), color-stop(98%, rgba(8, 35, 38, 1))); background: -o-linear-gradient(bottom, rgba(0, 0, 0, .2) 35%, rgb(8 35 38 / 90%) 70%, rgba(8, 35, 38, 1) 98%); background: linear-gradient(0deg, rgba(0, 0, 0, .2) 35%, rgb(8 35 38 / 90%) 70%, rgba(8, 35, 38, 1) 98%); } .brainsec .hero-bg-video2 video { width: 135%; height: 100%; -o-object-fit: cover; object-fit: cover; margin-bottom: -8px; } .partner .section-title p { width: 100%; margin: 15px 0px !important; } .partner .section-title { text-align: left !important; } .logos img { height: 60px; margin: 0 10px; display: inline-block; } .projects { padding: 60px 0px 60px; } .projectslider .testimonial-btn { position: relative; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; margin-top: 35px; } .projectslider .testimonial-btn .testspace { color: #fff !important; } .testimonial-slider1 .swiper-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; width: 100%; } .testimonial-slider1 .service-item-body .desc { height: 300px; } .testimonial-slider3 .service-item-body h3 { font-size: 24px; margin-bottom: 15px; } .service-item-body h3 { font-size: 18px; line-height: 24px; margin-bottom: 5px; } .testimonial-btn1 { position: absolute; bottom: 5px; left: 18%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; margin-top: 30px; z-index: 2; } .testimonial-btn1 .testspace { padding: 0px 5px; margin-top: 0px; } .footer-main .firstrow .text-right { text-align: left; } .firsthr { display: block; margin-top: 50px; } .firstrow p { margin-bottom: 0px; } .firstrow { margin-bottom: 20px; } .secondrow { text-align: center; padding: 20px 0px 10px !important; } .about-footer .header-social-links ul li { line-height: normal; margin-right: 0px; padding: 0; } .header-social-links ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .secondrow .header-social-links { display: inline; } .about-footer { margin-bottom: 0px; } .places li { display: inline-block; padding: 0px 5px; font-size: 15px; font-weight: 400; } .secondrow ul { padding-left: 0px; text-align: left; } .places li:first-child { padding-left: 0px; } .places li:last-child { padding-right: 0px; } .secondrow .phone { text-align: left; } .pd60 { padding: 40px 0px 10px; } .footer-links .row { display: -webkit-box; display: -ms-flexbox; display: flex; } .mb20 { margin-bottom: 20px; } .footer-links ul li a { font-weight: 300; font-family: "helvetica", sans-serif; font-size: 14px; } .mt-30 { margin-top: 30px; } .footer-copyright .places { text-align: left !important; } .footer-copyright .places ul { padding-left: 0px; } .footer-work-together { padding: 0px 0; } .footimg img { margin-bottom: 0px !important; height: 100%; } .pd30 { padding: 30px 0px !important; } .parent::before { content: ""; position: absolute; top: 0; left: -20px !important; width: 120%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(8, 35, 38, 1)), color-stop(0%, rgba(8, 35, 38, 1)), color-stop(25%, rgba(0, 0, 0, .1))) !important; background: -o-linear-gradient(top, rgba(8, 35, 38, 1) 1%, rgba(8, 35, 38, 1) 0%, rgba(0, 0, 0, .1) 25%) !important; background: linear-gradient(180deg, rgba(8, 35, 38, 1) 1%, rgba(8, 35, 38, 1) 0%, rgba(0, 0, 0, .1) 25%) !important; z-index: 2; pointer-events: none; } .testimonial-slider3 { padding-top: 16px; } .brainsec .section-title h2 { width: 100%; } .pdb0 { padding-bottom: 0px !important; } .our-testimonial .section-row { margin-bottom: 20px; } .testimonial-slider .service-item { background: #fff; color: #000; border: 1px solid #919191; -webkit-transition: background 0.6s ease, color 0.6s ease, border 0.6s ease; -o-transition: background 0.6s ease, color 0.6s ease, border 0.6s ease; transition: background 0.6s ease, color 0.6s ease, border 0.6s ease; } .testimonial-slider .service-item h3, .testimonial-slider .service-item p, .testimonial-slider .service-item a { -webkit-transition: color 0.6s ease; -o-transition: color 0.6s ease; transition: color 0.6s ease; } .testimonial-slider .service-item .icns { fill: #008080; -webkit-transition: fill 0.6s ease; -o-transition: fill 0.6s ease; transition: fill 0.6s ease; } .testimonial-slider .swiper-slide-active .service-item, .testimonial-slider .service-item.active { background: -webkit-gradient(linear, left top, left bottom, from(#d9f1f1), to(#0b2e2e)) !important; background: -o-linear-gradient(top, #d9f1f1 0%, #0b2e2e 100%) !important; background: linear-gradient(180deg, #d9f1f1 0%, #0b2e2e 100%) !important; color: #fff; border: none; } .testimonial-slider .swiper-slide-active .service-item h3, .testimonial-slider .swiper-slide-active .service-item p, .testimonial-slider .swiper-slide-active .service-item a, .testimonial-slider .service-item.active h3, .testimonial-slider .service-item.active p, .testimonial-slider .service-item.active .know-more { color: #fff !important; } .testimonial-slider .swiper-slide-active .icns, .testimonial-slider .service-item.active .icns, .testimonial-slider .service-item:hover .icns { fill: #ffffff; } .projects .service-item-body p { height: auto; color: #fff; font-size: 18px; line-height: 1.5; font-weight: 600; font-family: "Raleway", sans-serif; margin-top: 10px; margin-bottom: 15px; } .headingss { text-align: left !important; } .footer-main .firstrow p { margin-bottom: 15px; font-size: 16px; } .places ul { padding-left: 0px; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .testimonial-slider .flip-card-inner h3 { font-size: 20px; margin-bottom: 15px; height: 50px; } } .dnone { visibility: hidden; position: absolute; opacity: 0; pointer-events: none; } .mobileview { display: none; } .footimg { margin-bottom: 0px; } .parent { position: relative; } .overlay { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(0, 0, 0, .6); } .bg-image { -webkit-filter: sepia(70%) saturate(100%) hue-rotate(90deg); filter: sepia(70%) saturate(100%) hue-rotate(90deg); } .parent { background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 80%, rgb(8 35 38) 77%, rgb(8 35 38) 100%); } .bg-image { width: 240%; mix-blend-mode: screen; margin-left: -320px; filter: sepia(70%) saturate(100%) hue-rotate(90deg); } .parent { position: relative; } .overlay { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(0, 0, 0, .6); } .brainbgsec { background: linear-gradient(90deg, rgba(8, 35, 38, 1) 0%, rgba(8, 35, 38, 1) 61%, rgba(0, 0, 0, 1) 80%); padding: 80px 0px 20px; } .bg-image { filter: sepia(70%) saturate(100%) hue-rotate(90deg); } .parent { position: relative; /* overflow: hidden; */ } .bg-video { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; position: relative; z-index: 1; } .parent::before { content: ""; position: absolute; top: 0; left: 0; width: 120%; height: 100%; background: linear-gradient(90deg, rgba(8, 35, 38, 1) 5%, rgba(8, 35, 38, 1) 4%, rgba(0, 0, 0, .1) 54%); z-index: 2; pointer-events: none; } .testimonial-slider1 .icon-box1 img { height: 70px; width: auto; } /* enterprise */ .boxshadow { -webkit-box-shadow: 10px 14px 24px 0px #00000026; box-shadow: 10px 14px 24px 0px #00000026; position: sticky; width: 100%; } .main-header { position: sticky; top: 0; z-index: 9999; transition: all 0.3s ease-in-out; /* keeps it above other elements */ } .main-header.is-sticky { position: fixed; top: 0; left: 0; width: 100%; background: #000; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); animation: slideDown 0.3s ease-in-out; z-index: 9999; } @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } header.boxshadow { border-bottom: none !important; } .bluebg { background: #082326; padding-left: 0px !important; } .buildsec::before { position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(13%, rgb(8 33 36 / 66%)), color-stop(31%, rgb(8 35 38 / 46%)), color-stop(50%, rgba(255, 255, 255, .99))); background: -o-linear-gradient(left, rgb(8 33 36 / 66%) 13%, rgb(8 35 38 / 46%) 31%, rgba(255, 255, 255, .99) 50%); background: linear-gradient(90deg, rgb(8 33 36 / 66%) 13%, rgb(8 35 38 / 46%) 31%, rgba(255, 255, 255, .99) 50%); } .hero .buildsec video { width: 55%; height: 100%; -o-object-fit: cover; object-fit: cover; } .digi2 .buildsec video { width: 55%; height: 100%; -o-object-fit: cover; object-fit: cover; mix-blend-mode: luminosity; z-index: -1 !important; position: absolute; } .buildsecont .section-title h2 { color: #000; margin-bottom: 30px; } .buildsecont .hero-video-content { width: 100%; } .buildsecont .section-title p { font-size: 16px !important; line-height: 24px !important; font-weight: 400; margin: 16px 0px !important; } .grid-section { background: #082326; } .grid-section { position: relative; margin: 0; height: auto; background-color: #082326; color: white; background-image: -o-linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), -o-linear-gradient(left, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 120px 150px; overflow: hidden; } /* invisible hover grid */ .grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fill, 120px); grid-auto-rows: 150px; } .cell { -webkit-transition: background 0.5s ease-in-out, -webkit-transform 0.3s ease; transition: background 0.5s ease-in-out, -webkit-transform 0.3s ease; -o-transition: background 0.5s ease-in-out, transform 0.3s ease; transition: background 0.5s ease-in-out, transform 0.3s ease; transition: background 0.5s ease-in-out, transform 0.3s ease, -webkit-transform 0.3s ease; } .cell:hover { background: rgba(0, 200, 255, 0.15); } .content { position: relative; z-index: 2; text-align: center; } .gridsec .hero-video-content { width: 616px !important; margin: auto; } .gridsec .hero-video-content p { color: #fff; font-size: 16px; line-height: 24px; font-weight: 400; } .gridsec .hero-video-content h2 { margin-bottom: 32px; pointer-events: auto !important; } /* .slick-slide .inner { margin: 0 0px; } .marqss .slick-slide { width: 300px; border-left: 4px solid rgba(0, 200, 255, 0.15); padding-left: 25px; height: auto; position: relative; } .marqss .slick-slide img { height: 70px; width: auto; margin-bottom: 15px; } .marquee-container { width: 100%; height: 100%; position: relative; } .marquee-track { display: flex; position: absolute; top: 0; left: 0; will-change: transform; } .box { width: 300px; height: 220px; margin-right: 30px; padding: 10px 10px 10px 20px; border-left: 4px solid #0f3c4c; background: transparent; } */ .skew-carousel { -webkit-transform: skewY(12deg); -ms-transform: skewY(12deg); transform: skewY(12deg); overflow: hidden; width: 100%; padding: 50px 0px; } /* Each slide */ .skew-carousel .item { width: 100% !important; height: 300px; margin: 0 0px; position: relative; overflow: visible; /* important */ } .skew-carousel .item .inner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: -1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; pointer-events: none; } .skew-carousel .item:hover .inner::before { background: -webkit-gradient(linear, right top, left top, from(rgb(0 128 128 / 30%)), to(#05272bcc)); background: -o-linear-gradient(right, rgb(0 128 128 / 30%) 0%, #05272bcc 100%); background: linear-gradient(-90deg, rgb(0 128 128 / 30%) 0%, #05272bcc 100%); -webkit-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; } /* Undo skew for content */ .skew-carousel .item .inner { position: relative; z-index: 2; -webkit-transform: skewY(-12deg); -ms-transform: skewY(-12deg); transform: skewY(-12deg); background: transparent; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-left: 4px solid #499A9A; /* padding-left: 20px; */ overflow: visible; padding: 15px 5px 15px 25px; } .skew-carousel .item .inner p { will-change: transform; letter-spacing: 1px; font-family: 'helvetica-neue-lt-pro'; font-size: 16px; font-weight: 400; } .skew-carousel:hover .owl-stage { -webkit-animation-play-state: paused; animation-play-state: paused; } .skew-carousel .item .inner img { height: 70px; width: auto; margin-bottom: 15px; } .skew-carousel .item .inner p { font-size: 16px; } /* Continuous marquee animation on Owl stage */ .skew-carousel .owl-stage { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-animation: marquee 30s linear infinite; animation: marquee 30s linear infinite; } .skew-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px); padding: 60px 0px 30px; } @-webkit-keyframes marquee { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes marquee { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .skew-carousel1 { -webkit-transform: skewY(12deg); -ms-transform: skewY(12deg); transform: skewY(12deg); overflow: hidden; width: 100%; padding: 50px 0px; } /* Each slide */ .skew-carousel1 .item { width: 100% !important; height: 300px; margin: 0 0px; position: relative; overflow: visible; /* important */ } .skew-carousel1 .item .inner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: -1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; pointer-events: none; } .skew-carousel1 .item:hover .inner::before { background: -webkit-gradient(linear, right top, left top, from(rgb(0 128 128 / 30%)), to(#05272bcc)); background: -o-linear-gradient(right, rgb(0 128 128 / 30%) 0%, #05272bcc 100%); background: linear-gradient(-90deg, rgb(0 128 128 / 30%) 0%, #05272bcc 100%); -webkit-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; } /* Undo skew for content */ .skew-carousel1 .item .inner { position: relative; z-index: 2; -webkit-transform: skewY(-12deg); -ms-transform: skewY(-12deg); transform: skewY(-12deg); background: transparent; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-left: 4px solid #499A9A; /* padding-left: 20px; */ overflow: visible; padding: 15px 5px 15px 25px; } .skew-carousel1 .item .inner p { will-change: transform; letter-spacing: 1px; font-family: 'helvetica-neue-lt-pro'; font-size: 16px; font-weight: 400; margin-top:16px; } .skew-carousel1:hover .owl-stage { -webkit-animation-play-state: paused; animation-play-state: paused; } .skew-carousel1 .item .inner img { height: 70px; width: auto; margin-bottom: 15px; } .skew-carousel1 .item .inner p { font-size: 16px; } /* Continuous marquee animation on Owl stage */ .skew-carousel1 .owl-stage { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-animation: marquee 30s linear infinite; animation: marquee 30s linear infinite; } .skew-carousel1 .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px); padding: 60px 0px 30px; } @keyframes marquee { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } /*.skew-carousel,*/ /*.item,*/ /*.inner,*/ /*p {*/ /* pointer-events: none;*/ /*}*/ .item .inner { pointer-events: none; } .text-left { text-align: left; width: 45%; } .grid-section .container { pointer-events: none !important; } .grid-section .content { pointer-events: none !important; } .grid-section .container .content { pointer-events: none !important; } .pd-50 { padding: 60px 0px; } .pd50 { padding: 60px 0px; } .testimonial-slider .service-item:hover .icns { /* stroke: #fff; */ -webkit-transition: fill 0.3s ease; -o-transition: fill 0.3s ease; transition: fill 0.3s ease; } .grid-overlay .cell { -webkit-transition: background 0.4s ease; -o-transition: background 0.4s ease; transition: background 0.4s ease; pointer-events: auto; /* re-enable hover on cells */ } /* 🔥 Each cell lights up on hover */ .grid-overlay .cell:hover { background: rgba(0, 200, 255, 0.25); } .enter .section-title h2 { width: 100% !important; } .enter .section-title { max-width: 520px; } .parent2 { background: -webkit-gradient(linear, right top, left top, color-stop(80%, rgba(255, 255, 255, 0)), color-stop(77%, rgb(8 35 38)), to(rgb(8 35 38))); background: -o-linear-gradient(right, rgba(255, 255, 255, 0) 80%, rgb(8 35 38) 77%, rgb(8 35 38) 100%); background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 80%, rgb(8 35 38) 77%, rgb(8 35 38) 100%); /* position: relative; */ } .parent2::before { content: ""; position: absolute; top: 0; left: -20px !important; width: 120%; height: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(37%, rgba(8, 35, 38, 1)), color-stop(15%, rgba(8, 35, 38, 1)), color-stop(70%, rgb(8 35 38 / 10%))) !important; background: -o-linear-gradient(left, rgba(8, 35, 38, 1) 37%, rgba(8, 35, 38, 1) 15%, rgb(8 35 38 / 10%) 70%) !important; background: linear-gradient(90deg, rgba(8, 35, 38, 1) 37%, rgba(8, 35, 38, 1) 15%, rgb(8 35 38 / 10%) 70%) !important; z-index: 2; pointer-events: none; } .bg-image1 { -webkit-filter: sepia(70%) saturate(100%) hue-rotate(90deg); filter: sepia(70%) saturate(100%) hue-rotate(90deg); } .hero.brainsec.enter { position: relative; background: #082326; /* fallback color */ overflow: hidden; } .parent2 { position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .parent2 .bg-image1 { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; /* ensures video covers section */ opacity: 0.6; /* optional: gives overlay effect */ } .hero.brainsec.enter .container, .hero.brainsec.enter .section-row { position: relative; z-index: 2; /* keeps text above video */ } .text-black h2 { color: #000; } .text-black p { color: #000; } .advantage .section-title { max-width: 100% !important; margin-bottom: 20px; } .advantage .service-item-body1 { background: #e6edec; border: 1px solid #e6edec; background-position: 99% 5%; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 0; padding: 20px 20px; border-radius: 8px; z-index: 9; height: 380px; margin-bottom: 25px; } /* .advantage .service-item-body1::after{ position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; background: rgb(0, 57, 51,.3); } */ .advantage .service-item-body1 h3 { font-size: 24px; font-family: 'helvetica-neue-lt-pro'; line-height: 32px; font-weight: 400; color: #003933; } /* .advantage .service-item-body1::before{ position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; background: rgb(8, 35, 38, 1); z-index: -1; } */ .imgpos3 img { position: absolute; bottom: 0px; left: 0px; height: 263px; } .imgpos1 img { position: absolute; bottom: 0px; right: 0px !important; height: 280px; } .imgpos img { position: absolute; top: 60%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 260px; } .imgpos2 img { position: absolute; top: 60%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 200px; width: auto; } .platforms { background: #082326; } /* .plat-in img { margin-bottom: 15px; } */ .plat-in p { margin: 20px 0px !important; } .mb50 { margin-bottom: 50px; } .mt150 { margin-top: 160px; } .platimg img { height: 400px; } .platimg { position: relative; bottom: -25px; } .plath2 h2 { font-size: 32px; line-height: 40px; } .platdesc .section-title h2 { width: 80%; } .platdesc { padding: 0px 10px 0px 50px; } .pdt50 { padding-top: 50px; } .industries .service-item-body { height: 419px; position: relative; border-radius: 8px; } .industries .service-item-body.in1 { background: url(../images/int1.jpg); background-size: cover; background-repeat: no-repeat; } .industries .service-item-body.in2 { background: url(../images/int2.jpg); background-size: cover; background-repeat: no-repeat; } .industries .service-item-body.in3 { background: url(../images/int3.jpg); background-size: cover; background-repeat: no-repeat; } .industries .service-item-body.in4 { background: url(../images/int4.jpg); background-size: cover; background-repeat: no-repeat; } .industries .service-item-body.in5 { background: url(../images/int5.jpg); background-size: cover; background-repeat: no-repeat; } .industries .service-item-body::before { position: absolute; content: ''; left: 0px; top: 0px; height: 100%; width: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 35, 38, 0)), color-stop(87.81%, #16808B)); background: -o-linear-gradient(top, rgba(8, 35, 38, 0) 0%, #16808B 87.81%); background: linear-gradient(180deg, rgba(8, 35, 38, 0) 0%, #16808B 87.81%); border-radius: 8px; } .industries .service-item-body h3 { font-size: 20px; position: absolute; bottom: 0px; left: 24px; font-family: 'Raleway'; width: 70%; line-height: 28px; font-weight: 600; } .mt-10 { margin-top: 60px; } .industries .swiper-wrapper { cursor: none; padding: 20px 0px 70px; } .industries .testimonial-btn1 { position: absolute; bottom: -35px; left: 42%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; margin-top: 30px; z-index: 2; } .enterslide .service-item .icns { fill: #008080; -webkit-transition: fill 0.3s ease; -o-transition: fill 0.3s ease; transition: fill 0.3s ease; } /* Active, Active slide, OR Hovered card */ .enterslide .service-item.active .icns, .enterslide .swiper-slide-active .icns, .enterslide .service-item:hover .icns { fill: #ffffff; } .enterslide .service-item .icns1 { stroke: #008080; -webkit-transition: fill 0.3s ease; -o-transition: fill 0.3s ease; transition: fill 0.3s ease; } .enterslide .service-item .icns { stroke: #008080 !important; -webkit-transition: fill 0.3s ease; -o-transition: fill 0.3s ease; transition: fill 0.3s ease; } /* Active, Active slide, OR Hovered card */ .enterslide .service-item:hover .icns1 { stroke: #ffffff !important; } /* Active, Active slide, OR Hovered card */ .enterslide .service-item:hover .icns { stroke: #ffffff !important; } .bluebg { /* background-color: rgb(8, 31, 5); */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; overflow: hidden; padding: 0px 0px; } .bluebg .section-row { margin-bottom: 0px !important; } .animated-svg .logo-group>g { opacity: 0.3; } .animated-svg .main-paths { opacity: 1; } .animated-svg .bottom-elements { opacity: 1; } .animated-svg .animated-arrows>path { opacity: 0; } @-webkit-keyframes reveal { to { opacity: 1; } } @keyframes reveal { to { opacity: 1; } } .animated-svg .logo-1 { -webkit-animation: reveal 0.5s forwards 0.5s; animation: reveal 0.5s forwards 0.5s; } .animated-svg .logo-2 { -webkit-animation: reveal 0.5s forwards 2.5s; animation: reveal 0.5s forwards 2.5s; } .animated-svg .logo-3 { -webkit-animation: reveal 0.5s forwards 4.5s; animation: reveal 0.5s forwards 4.5s; } .animated-svg .logo-4 { -webkit-animation: reveal 0.5s forwards 1.5s; animation: reveal 0.5s forwards 1.5s; } .animated-svg .logo-5 { -webkit-animation: reveal 0.5s forwards 3.5s; animation: reveal 0.5s forwards 3.5s; } .mtt50 { margin-top: -10px !important; } /* digital emterprise */ .digiban img { /* position: absolute; top: 5%; */ position: relative; bottom: -60px; } .digi1 .digitalsec { padding: 30px 0px 50px; } .digi1 .section-title h2 { width: 100%; position: relative; } .digi1 .section-title p { font-size: 15px; } .digi1 { min-height: 100% !important; } .digi1::before { display: none; } .digi2 .section-title { width: 100%; margin-bottom: 0px; margin-top: 0px; } .digi2 { min-height: 100% !important; } .digi2 p { margin-bottom: 15px; } .digiexperience .service-item { padding: 0px 0px; height: 100%; margin-bottom: 0px !important; } .digiexperience .service-item:first-child { margin-bottom: -8px; } /* .digiexperience .service-item img { height: 450px !important; width: 100%; margin-bottom: -40px; } */ .digiexperience .service-item-body h3 { padding: 24px 24px 10px; font-size: 24px; line-height: 32px; font-weight: 600; margin-bottom: 0px !important; } .digiexperience .service-item-body p { height: auto !important; padding: 0px 0px 0px 24px; font-family: 'Raleway' !important; } .digisec .digitalexp { width: 682px; } .digisec .digitalexp h2 { color: #fff ; } .digisec .digitalexp p { color: #fff ; } .digiexperience .service-item-body p { color: #fff !important; } .customer { padding: 60px 0px; } .customer .section-title h2 { color: #000 !important; } .customer .section-title p { color: #000 !important; font-family: 'Helvetica' !important; } .cussec .service-item h3 { padding: 24px 24px 0px; color: #000; font-size: 24px; line-height: 32px; font-weight: 600; font-family: 'Raleway'; margin-bottom: 0px !important; } .cussec .service-item p { color: #000; height: auto !important; padding: 16px 24px 16px; } .cussec .service-item { border: 1px solid #082326; border-radius: 8px; padding: 0px; margin-bottom: 20px; } .optimiz .section-title h2 { margin-bottom: 32px; } .optimiz .section-title h5 { margin-bottom: 0px; font-size: 24px; line-height: 32px; font-weight: 600; } .optimiz .section-title p { margin: 0px !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400; width: 510px; padding: 16px 0px !important; } .optimiz .section-title h2 { width: 90%; position: relative; } .optimiz { padding: 40px 0px; } .optimiz .section-row { margin-bottom: 0px; } .outcomes img { height: 600px; } .outcomes2 { padding: 20px 0px; } .outcomes2 h2 { margin-bottom: 32px; } .outcomes2 p { margin: 16px 0px; } .enterban { min-height: auto !important; } /* German */ .gertcont p { font-size: 19px !important; } .gertcont { width: 80% !important; } .germanpath .service-item-body p { height: 280px !important; } .gerslider .flip-card-inner p { font-size: 15px; color: #555; height: 190px !important; } .gerslider .flip-card-inner h3 { color: #000 !important; height: 70px; margin-bottom: 15px; line-height: 25px; } .gertrans .benefits-steps-content h3 { font-size: 21px; font-weight: 600; } .platimg img { height: 800px; width: auto; } .small-circle { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-animation: pulse 2s infinite ease-in-out; animation: pulse 2s infinite ease-in-out; } @-webkit-keyframes pulse { 0%, 100% { r: 2.3; opacity: 0.8; } 50% { r: 4.5; opacity: 1; } } @keyframes pulse { 0%, 100% { r: 2.3; opacity: 0.8; } 50% { r: 4.5; opacity: 1; } } .agency-item-content { width: 520px; } .testidescription p { font-family: 'Helvetica', 'Arial', sans-serif; ; } @media (min-width:1300px) and (max-width:1500px){ .testianimdot h3{ height:50px !important; }.testianimdot .flip-card-inner p { height: 140px; }.mobilecomm{ min-height:500px !important; height:500px !important; } .epictechnology .testimonial-slider .service-item { height: 400px; } } @media (min-width:1500px) and (max-width:2400px){ .mobilecomm{ min-height:500px !important; height:500px !important; }.retailparent2 .bg-image1 { width: 50% !important; height: 100%; } } @media (min-width:769px) and (max-width:1300px) { .container { max-width: 1100px; } .main-menu .mega-menu .projects .service-item-body { height: 320px !important; } .section-title h2 { font-size: 31px; } .digiexperience .service-item img { height: auto !important; width: 100%; margin-bottom: -50px; } .banner .section-title p { font-size: 20px !important; font-weight: 400; margin-bottom: 20px; } .testimonial-slider .flip-card-inner p { font-size: 14.5px; height: 160px; } .service-item-body p { height: 250px; } .projects .service-item-body p { /* height: 140px; */ font-size: 16px; line-height: 24px; } .testimonial-slider1 .service-item-body p { height: 250px; } .mt-50 { margin-top: 40px !important; } .pd60 { padding: 30px 0px; } .our-testimonial { position: relative; padding: 40px 0; } .hero-content .section-title { width: 100%; margin-bottom: 0px; margin-top: -20px; } .final-line { gap: 5px; font-size: 37px; } .section-title h1 { font-size: 75px; /* font-weight: 600; */ } .bxslider li { font-size: 55px; padding: 0px 0; } .testidesc .service-item-body p { height: auto !important; } .testidesc .service-item-body .desc { height: 250px !important; } .main-menu ul li.nav-item a { font-size: 14px; font-weight: 400; padding: 0px 0px !important; } .main-menu ul li.submenu>a:after { /*content: '';*/ position: absolute; right: 5px; top: 38%; width: 20px; height: 20px; } .our-services .section-title { width: 100%; max-width: 750px; margin: auto; } .top-in li a { font-size: 14px; } .top-in li select { padding: 0px 22px 0px 15px; font-size: 14px; } .custom-select::after { /*content: '';*/ position: absolute; right: -5px; top: 12%; width: 20px; height: 20px; pointer-events: none; } #btn-decrease { font-size: 12px; } #btn-increase { font-size: 12px; } .hero-video-content { width: 95%; } .success-counter-item p { font-family: 'helvetica-neue-lt-pro' !important; font-weight: 400; font-size: 18px; } .brainsec .builtsec p { font-size: 16px !important; } .partner .section-title p { width: 882px; margin: 15px auto !important; font-family: 'Helvetica', 'Arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; } .testimonial-slider1 .service-item-body .author-content p { height: auto; } .swiper-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; width: 100%; } } @media (min-width:1700px) { .hero { position: relative; padding: 0px 0 0px; /*z-index: 1;*/ min-height: 900px; }.container { max-width: 1400px; } .top-in li a { font-size: 16px; } .top-in li select { font-size: 16px; } .hero-content { margin-bottom: 50px; } .bxslider li { font-size: 65px; padding: 0px 0; } /* .mainbannerh1 .bxslider.text, .mainbannerh1 .bx-wrapper, .mainbannerh1 .bx-viewport { height: 1.5em !important; }.mainbannerh1 { display: inline-block; overflow: hidden; height: 1.15em; vertical-align: middle; } */ .hero-video-content { width: 90%; } .hero-video-content p { font-size: 24px; visibility: visible; font-family: 'helvetica-neue-lt-pro'; font-weight: 300; } .final-line { gap: 8px; font-size: 45px !important; } .hero-content .section-title { width: 102%; /* margin-bottom: 40px; */ margin-top: 0px; } .hero .section-title p { margin-top: 32px; margin-bottom: 32px; font-size: 24px; line-height: 32px; } .digitalsec p { font-size: 16px !important; font-weight: 400 !important; font-family: 'Raleway', 'Arial', sans-serif; font-style: normal; line-height: 24px !important; margin: 24px 0px !important; } .digitalsec .section-title { width: 566px; } .digiban { text-align: right; } .ser-btn { margin-top: 25px; margin-bottom: 15px; } .thepath .service-item-body p { font-size: 16px; line-height: 24px; font-weight: 400 !important; font-family: 'Helvetica', 'Arial', sans-serif; font-style: normal; } .service-item { padding: 25px 36px; } .service-item-body p { height: 230px; } .thepath .service-item-body p { height: 200px; } .our-services #myVideo { position: absolute; left: -28%; top: -10%; -o-object-fit: cover; object-fit: cover; width: 80%; height: 95%; z-index: -2; } .ser-btn2 { margin: 10px 0px; } .countingss .success-counter-box1 h2 { font-size: 80px; } .success-counter-item p { font-family: 'helvetica-neue-lt-pro' !important; font-weight: 400; font-size: 24px; line-height: 32px; position: relative; bottom: -115px !important; } .ser-btn2 a { font-size: 16px; } .agency-item-content { width: 520px; } .pd30 { padding: 80px 0px 50px; } .pd40 { padding: 80px 0px 0px; } .swiper-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; width: 100%; } .testidescription p { font-family: 'Helvetica', 'Arial', sans-serif; margin-top: 30px; margin-bottom: 35px; font-size: 16px; } .testimonial-slider .flip-card-inner h3 { font-size: 24px; margin-bottom: 20px; line-height: 32px; height: 70px; } .bg-image { width: 300%; mix-blend-mode: screen; margin-left: -320px; filter: sepia(70%) saturate(100%) hue-rotate(90deg); } .testimonial-slider .flip-card-inner p { height: 120px; font-family: Helvetica; line-height: 24px; } .routes { min-height: 100% !important; padding: 90px 0px 30px; } .pd-50 { padding: 80px 70px; } .countingss .success-counter-box1 { padding: 10px 20px; height: 370px !important; } .countingss .success-counter-box1 h2 { height: 180px; font-family: "Inter", sans-serif; font-size: 80px; font-weight: 600; } .skew-carousel .item .inner p { font-size: 16px; line-height: 24px; font-weight: 400; font-style: normal; margin-top:16px; } .hero-video-content1 p { font-size: 16px; line-height: 24px; font-weight: 400; font-family: 'helvetica-neue-lt-pro'; font-style: normal; } .gridsec .hero-video-content p { font-size: 16px; visibility: visible; font-family: 'helvetica-neue-lt-pro'; font-weight: 400; letter-spacing: 0; } .digiexperience .service-item:first-child { margin-bottom: -20px !important; } .vertical-reveal li { font-size: 80px; font-weight: 300 !important; font-family: "Raleway", sans-serif; color: #082326 !important; line-height: 100px; } .tab-contents h3 { margin-bottom: 10px; color: #499A9A; font-weight: 700; /*font-size: 20px !important;*/ } .main-menu ul li.nav-item .tabcont a { font-size: 16px; font-weight: 400; padding: 30px 50px !important; font-family: "helvetica-neue-lt-pro", sans-serif; line-height: 24px; } .testimonial-slider1 .swiper-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; width: 100%; } .testimonial-btn111 { position: absolute; bottom: 0px; left: 39% !important; } .mega-menu .tabcont h3 span { padding: 0px 0px 0px 3px !important; } .mega-menu .tabcont .service-item-body p { font-size: 16px !important; line-height: 24px !important; } .retailsection::before { background: -webkit-gradient(linear, left top, right top, color-stop(48%, rgba(8, 35, 38, 1)), color-stop(3%, rgba(8, 35, 38, 1)), color-stop(57%, rgba(8, 35, 38, 0.81)), color-stop(70%, rgb(10 83 91 / 10%)), color-stop(84%, rgba(255, 255, 255, 0))); background: -o-linear-gradient(left, rgba(8, 35, 38, 1) 48%, rgba(8, 35, 38, 1) 3%, rgba(8, 35, 38, 0.81) 57%, rgb(10 83 91 / 10%) 70%, rgba(255, 255, 255, 0) 84%); background: linear-gradient(90deg, rgba(8, 35, 38, 1) 48%, rgba(8, 35, 38, 1) 3%, rgba(8, 35, 38, 0.81) 57%, rgb(10 83 91 / 10%) 70%, rgba(255, 255, 255, 0) 84%); } .industries .service-item-body { height: 449px; position: relative; border-radius: 8px; } .industries .service-item-body h3 { font-size: 24px; bottom: 0px; left: 24px; font-family: 'Raleway'; width: 70%; line-height: 32px; font-weight: 600; } .corushrbanner::before { background: -webkit-gradient(linear, left top, right top, color-stop(48%, rgba(8, 35, 38, 1)), color-stop(3%, rgba(8, 35, 38, 1)), color-stop(57%, rgba(8, 35, 38, 0.81)), color-stop(70%, rgb(10 83 91 / 10%)), color-stop(84%, rgba(255, 255, 255, 0))) !important; background: -o-linear-gradient(left, rgba(8, 35, 38, 1) 48%, rgba(8, 35, 38, 1) 3%, rgba(8, 35, 38, 0.81) 57%, rgb(10 83 91 / 10%) 70%, rgba(255, 255, 255, 0) 84%) !important; background: linear-gradient(90deg, rgba(8, 35, 38, 1) 40%, rgba(8, 35, 38, 1) 0%, rgba(8, 35, 38, 0.81) 45%, rgb(10 83 91 / 10%) 55%, rgba(255, 255, 255, 0) 84%) !important; /* background: linear-gradient(270deg, #133FA4 25.85%, rgba(13, 44, 115, 0.21) 44.99%, rgba(7, 24, 62, 0) 54.91%); */ z-index: 2; pointer-events: none; } } .pr0 { padding-right: 0px; padding-left: 0px; } .svg-box path { -webkit-transition: fill 0.3s ease; -o-transition: fill 0.3s ease; transition: fill 0.3s ease; } .svg-box path[fill^="url(#paint10"] { fill: #489999; } .svg-box:hover path[fill^="url(#paint10"] { fill: #fff; } .svg-box path[fill^="url(#paint12"] { fill: #489999; } .svg-box:hover path[fill^="url(#paint12"] { fill: #fff; } .svg-box path[fill^="url(#paint14"] { fill: #489999; } .svg-box:hover path[fill^="url(#paint14"] { fill: #fff; } .svg-box path[fill^="url(#paint10"] { -webkit-transition: fill 0.5s ease, stop-color 0.5s ease; -o-transition: fill 0.5s ease, stop-color 0.5s ease; transition: fill 0.5s ease, stop-color 0.5s ease; } .svg-box path[fill^="url(#paint12"] { -webkit-transition: fill 0.5s ease, stop-color 0.5s ease; -o-transition: fill 0.5s ease, stop-color 0.5s ease; transition: fill 0.5s ease, stop-color 0.5s ease; } .svg-box path[fill^="url(#paint14"] { -webkit-transition: fill 0.5s ease, stop-color 0.5s ease; -o-transition: fill 0.5s ease, stop-color 0.5s ease; transition: fill 0.5s ease, stop-color 0.5s ease; } /* Default colors stay as they are */ .hover-text, .hover-text1, .hover-text2 { -webkit-transition: fill 0.3s ease; -o-transition: fill 0.3s ease; transition: fill 0.3s ease; } /* On hover of the SVG container, change path colors */ .svg-container:hover .hover-text { fill: red; /* or any desired color */ } .svg-container:hover .hover-text1 { fill: blue; } .svg-container:hover .hover-text2 { fill: green; } .buildsection { min-height: 100% !important; padding: 50px 0px; } .digi2 .buildsecont { margin-bottom: 0px !important; } .optimiz { min-height: 100% !important; } .enterban .section-title p { font-family: "Raleway", sans-serif !important; } .buildsecont p { font-family: 'Helvetica', 'Arial', sans-serif; } .enterslide .service-item-body p { font-family: 'helvetica-neue-lt-pro' !important; } .builtsec .section-title p { font-size: 16px !important; line-height: 24px; margin: 32px 0px !important; } .builtsec .section-title .ser-btn { margin: 0px 0px; } .enter .benefits-steps-content p { font-family: 'helvetica-neue-lt-pro' !important; } .blink-light { -webkit-animation: softBlink 2s infinite ease-in-out; animation: softBlink 2s infinite ease-in-out; } @-webkit-keyframes softBlink { 0%, 100% { opacity: 1; -webkit-filter: drop-shadow(0 0 3px #6ccccc) drop-shadow(0 0 6px #6ccccc); filter: drop-shadow(0 0 3px #6ccccc) drop-shadow(0 0 6px #6ccccc); } 50% { opacity: 0.9; -webkit-filter: drop-shadow(0 0 9px #6ccccc) drop-shadow(0 0 12px #6ccccc); filter: drop-shadow(0 0 9px #6ccccc) drop-shadow(0 0 12px #6ccccc); } } @keyframes softBlink { 0%, 100% { opacity: 1; -webkit-filter: drop-shadow(0 0 3px #6ccccc) drop-shadow(0 0 6px #6ccccc); filter: drop-shadow(0 0 3px #6ccccc) drop-shadow(0 0 6px #6ccccc); } 50% { opacity: 0.9; -webkit-filter: drop-shadow(0 0 9px #6ccccc) drop-shadow(0 0 12px #6ccccc); filter: drop-shadow(0 0 9px #6ccccc) drop-shadow(0 0 12px #6ccccc); } } .wave-circle { -webkit-animation: waveExpand 3s ease-in-out infinite; animation: waveExpand 3s ease-in-out infinite; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } @-webkit-keyframes waveExpand { 0% { -webkit-transform: scale(.8); transform: scale(.8); opacity: 1; } 70% { -webkit-transform: scale(.9); transform: scale(.9); opacity: 0.5; } 100% { -webkit-transform: scale(.8); transform: scale(.8); opacity: 1; } } @keyframes waveExpand { 0% { -webkit-transform: scale(.8); transform: scale(.8); opacity: 1; } 70% { -webkit-transform: scale(.9); transform: scale(.9); opacity: 0.5; } 100% { -webkit-transform: scale(.8); transform: scale(.8); opacity: 1; } } .outcomes { text-align: center; } /* .industries .testimonial-btn1 { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 15px; } .industries .testimonial-button-prev, .industries .testimonial-button-next { cursor: pointer; font-size: 22px; color: #333; user-select: none; transition: 0.3s; } .industries .testimonial-button-prev:hover, .industries .testimonial-button-next:hover { color: #499A9A; } .industries .testspace { font-weight: 500; transition: opacity 0.3s ease; } .industries .fade-out { opacity: 0; } .industries .fade-in { opacity: 1; } */ /* Draws the strokes of the paths by animating the dash offset */ @-webkit-keyframes draw { to { stroke-dashoffset: 0; } } @keyframes draw { to { stroke-dashoffset: 0; } } /* Fades in the fill colors and inner elements */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Creates the 'pop-in' effect for entire icon groups */ @-webkit-keyframes pop-in { from { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes pop-in { from { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /* --- Base Animation Classes --- */ /* Base class for the hexagonal icon groups */ /* --- Keyframe Animations --- */ @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pop-in { from { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /* --- Base Element States (Before Animation) --- */ #looping-animation .icon-group { opacity: 0; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } #looping-animation .animate-stroke { stroke-dasharray: 2500; stroke-dashoffset: 2500; } #looping-animation .animate-fill { opacity: 0; } /* --- Applying Animations when .animate class is present --- */ #looping-animation.animate .icon-group { -webkit-animation: pop-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation: pop-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } #looping-animation.animate .animate-stroke { -webkit-animation: draw 2.5s cubic-bezier(0.47, 0, 0.745, 0.715) forwards; animation: draw 2.5s cubic-bezier(0.47, 0, 0.745, 0.715) forwards; } #looping-animation.animate .animate-fill { -webkit-animation: fadeIn 1.5s ease-in forwards; animation: fadeIn 1.5s ease-in forwards; } /* --- Interaction --- */ .icon-group.interactive:hover { -webkit-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); cursor: pointer; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; -o-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } /* --- Animation Sequencing & Delays --- */ #looping-animation.animate .seq-1 { -webkit-animation-delay: 0s; animation-delay: 0s; } #looping-animation.animate .seq-1 .animate-stroke { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } #looping-animation.animate .seq-1 .animate-fill { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } #looping-animation.animate .seq-2 { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } #looping-animation.animate .seq-2 .animate-stroke { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } #looping-animation.animate .seq-2 .animate-fill { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } #looping-animation.animate .seq-3 { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } #looping-animation.animate .seq-3 .animate-stroke { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } #looping-animation.animate .seq-3 .animate-fill { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } #looping-animation.animate .seq-4 { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } #looping-animation.animate .seq-4 .animate-stroke { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } #looping-animation.animate .seq-4 .animate-fill { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } #looping-animation.animate .seq-5 { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } #looping-animation.animate .seq-5 .animate-stroke { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } #looping-animation.animate .seq-5 .animate-fill { -webkit-animation-delay: 2.1s; animation-delay: 2.1s; } #looping-animation.animate .seq-6 { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } #looping-animation.animate .seq-6 .animate-stroke { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } #looping-animation.animate .seq-6 .animate-fill { -webkit-animation-delay: 2.3s; animation-delay: 2.3s; } #looping-animation.animate .seq-7 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } #looping-animation.animate .seq-7 .animate-stroke { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } #looping-animation.animate .seq-7 .animate-fill { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } #looping-animation.animate .seq-8 { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } #looping-animation.animate .seq-8 .animate-stroke { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } #looping-animation.animate .seq-8 .animate-fill { -webkit-animation-delay: 2.7s; animation-delay: 2.7s; } /* seq-9 is not in your SVG, but including just in case */ #looping-animation.animate .seq-9 { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } #looping-animation.animate .seq-9 .animate-stroke { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } #looping-animation.animate .seq-9 .animate-fill { -webkit-animation-delay: 2.7s; animation-delay: 2.7s; } .main-menu ul li.mega-menu a { position: relative; } .navbar { position: relative; height: 82px; align-items: center; } .mega-menu-content.full-width { position: absolute; top: 100%; left: 0; width: 100vw; background: #fff; padding: 0px 0; z-index: 999; -webkit-box-shadow: 0px 24px 44px 20px #499A9A36; box-shadow: 0px 24px 44px 20px #499A9A36; -webkit-box-shadow: 0px -8px 34px 0px #499A9A52; box-shadow: 0px -8px 34px 0px #499A9A52; visibility: hidden; opacity: 0; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .mega-menu:hover .mega-menu-content, .mega-menu.is-hovered .mega-menu-content, .mega-menu-content:hover { visibility: visible; opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } /* .mega-menu .container{ display: flex; } */ .mega-menu-content .tab-buttons { /* border-right: 1px solid #545454; */ padding-right: 15px; width: 100%; } .aboutbtns { border-right: 1px solid #545454; } .mega-menu-content .tab-buttons button { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding: 16px 24px; border: none; background: transparent; cursor: pointer; text-align: left; font-size: 16px; font-weight: 700 !important; line-height: 24px; -webkit-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; font-family: "helvetica-neue-lt-pro", sans-serif; } .tabcont { width: 410px; } /* Arrow icon after each tab */ .mega-menu-content .tab-buttons button::after { content: ""; position: absolute; right: 6px; top: 50%; width: 24px; height: 24px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: 24px 24px; opacity: 0.6; -webkit-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } /* On hover or active tab */ .mega-menu-content .tab-buttons button:hover::after, .mega-menu-content .tab-buttons button.active::after { -webkit-transform: translateY(-50%) translateX(3px); -ms-transform: translateY(-50%) translateX(3px); transform: translateY(-50%) translateX(3px); opacity: 1; -webkit-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } /* Active tab background and color */ .mega-menu-content .tab-buttons1 button:hover, .mega-menu-content .tab-buttons button.active { background: #082326; color: white; -webkit-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; font-weight: 500; } .mega-menu-content .tab-buttons button.active::before { display: none !important; opacity: 0 !important; } .mega-menu-content .tab-buttons button:hover { margin-left: 2px; } .mega-menu-content .tab-buttons button:hover::before { display: block; opacity: 1; left: 10px; } .mega-menu-content .tab-buttons button::before { position: absolute; content: ''; top: 50%; left: 5px; -webkit-transform: translateY(-50%) translateX(-8px); -ms-transform: translateY(-50%) translateX(-8px); transform: translateY(-50%) translateX(-8px); /* start slightly hidden left */ height: 7px; width: 7px; background: #499A9A; border-radius: 50%; opacity: 0; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .mega-menu-content .tab-contents { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding-left: 0px; /* position: relative; */ height: auto; -webkit-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; padding-left: 25px; } .mega-menu-content .tab-content { position: relative; margin-bottom: 20px; } .mega-menu-content .tab-content::before { content: ''; position: absolute; top: 0; left: -35px; width: 1px; background: #595959; height: 100%; -webkit-transition: height 0.4s ease; -o-transition: height 0.4s ease; transition: height 0.4s ease; /* smooth adjust */ } .mega-menu-content .tab-content { display: none; } .mega-menu-content .tab-content.active { display: block; } .mega-menu-content .tab-content ul { list-style: none; padding: 0; } .mega-menu-content .tab-content ul li { margin-bottom: 16px; } .mega-menu .pd0 { padding: 0px 0px !important; } .mega-menu .projects { background: transparent; text-align: left; position: relative; top: -40px; } .mega-menu .projects h3 span { font-size: 12px; } .mega-menu .service-item-body { text-align: left; } .mega-menu .ser-btn { text-align: left; } .main-menu .mega-menu .col-lg-6 { background: #f2f2f2; } .main-menu .mega-menu .col-lg-4 { background: #f2f2f2; } .mega-menu .mega-menu-content .aboutnav { position: relative; } .main-menu .mega-menu .projects .ser-btn1 a { text-align: left; padding: 0px 0px !important; color: #fff !important; } .main-menu .mega-menu .projects .service-item-body { height: 370px; } .main-menu .mega-menu .ser-btn .svg-container { padding-left: 5px; } .main-menu .mega-menu h1 { text-align: left; color: #082326; margin-bottom: 40px; margin-top: 40px; font-family: "Raleway", sans-serif; font-weight: 600; font-style: normal; font-size: 40px; line-height: 48px; letter-spacing: 0; } .tab-content ul li a { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; width: 100%; text-decoration: none; background: transparent; color: #000; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; font-size: 16px; font-weight: 400; font-family: "helvetica-neue-lt-pro", sans-serif; /* padding-right: 28px; */ } /* Add SVG icon at the end */ /* .tab-content ul li a::after { content: ""; position: absolute; right: 0; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: 24px 24px; transition: transform 0.3s ease; } */ /* On hover: move slightly to right */ /* .tab-content ul li a:hover::after { transform: translateY(-50%) translateX(3px); } */ .main-menu ul li.mega-menu .mega-menu-content a { color: #000; padding: 0px 0px 0px !important; position: relative; -webkit-transition: padding 0.4s ease; -o-transition: padding 0.4s ease; transition: padding 0.4s ease; /* smooth padding animation */ } /*.main-menu ul li.mega-menu .mega-menu-content a::before {*/ /* position: absolute;*/ /* content: '';*/ /* top: 50%;*/ /* left: 2px;*/ /* -webkit-transform: translateY(-50%) translateX(-8px);*/ /* -ms-transform: translateY(-50%) translateX(-8px);*/ /* transform: translateY(-50%) translateX(-8px);*/ /* start slightly hidden left */ /* height: 7px;*/ /* width: 7px;*/ /* background: #499A9A;*/ /* border-radius: 50%;*/ /* opacity: 0;*/ /* -webkit-transition: all 0.4s ease;*/ /* -o-transition: all 0.4s ease;*/ /* transition: all 0.4s ease;*/ /*}*/ .main-menu ul li.mega-menu .mega-menu-content a:hover::before { opacity: 1; -webkit-transform: translateY(-50%) translateX(0); -ms-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); /* slide into place */ } .main-menu ul li.mega-menu .mega-menu-content a:hover { padding: 0px 2px 0px 15px !important; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .main-menu ul li.mega-menu .mega-menu-content h3>a:hover { padding: 0px 0px !important; } .main-menu ul li.mega-menu .mega-menu-content:hover .ser-btn1 a { padding: 0px 0px 0px 0px !important; /* transition: all .5s ease-in-out; */ } .main-menu ul li.mega-menu .mega-menu-content:hover .ser-btn1 a::before { display: none; } /* .tabcont{ border-left: 1px solid #545454; padding-left: 20px; } */ /* .mega-menu .mega-menu-content{ position: relative; } */ .tab-contents h3 { margin-bottom: 16px; color: #499A9A; font-weight: 700; font-size: 24px; text-align: left; font-family: "helvetica-neue-lt-pro", sans-serif; line-height: 32px; } .tab-content .tabcont .ser-btn { margin-top: 0px !important; } .tab-content h3 a { margin-bottom: 10px; color: #499A9A !important; font-weight: 700 !important; font-size: 20px !important; text-align: left !important; font-family: "helvetica-neue-lt-pro", sans-serif; } .mega-menu .mega-menu-content::before { position: absolute; content: ''; top: 0px; right: 0px; height: 100%; width: 45%; background: #f3f3f3; } .mega-menu .mega-menu-content .aboutnav::before { position: absolute; content: ''; top: 0px; right: 0px; height: 100%; width: 68%; background: #f3f3f3; } .aboutnav { padding: 30px 0px; } .mega-menu .aboutnav .projects { top: 0px !important; } .mega-menu .aboutnav ul { padding-left: 0rem !important; } /* .aboutnav .tabcont1 li { padding: 10px 0px; } */ /* .aboutnav .projects .service-item-body{ width: 250px; } */ .main-menu .mega-menu .aboutnav h1 { margin-top: 0px; } /* .aboutnav .row{ display: flex; align-items: center; justify-content: center; } */ .aboutnav1 { padding: 30px 0px; } .mega-menu .aboutnav1 .projects { top: 0px !important; } .mega-menu .aboutnav1 ul { padding-left: 0rem !important; } /* .aboutnav1 .tabcont1 li { padding: 10px 0px; } */ /* .aboutnav1 .projects .service-item-body{ width: 250px; } */ .main-menu .mega-menu .aboutnav1 h1 { margin-top: 0px; } /* .aboutnav1 .row{ display: flex; align-items: center; justify-content: center; } */ .aboutnav1 .row { display: -webkit-box; display: -ms-flexbox; display: flex; } .aboutnav1 .row .width60 { width: 56%; } .aboutnav1 .row .width40 { width: 44%; } .aboutnav1 .width60 .verline { position: relative; } .aboutnav1 .width60 .verline::before { position: absolute; content: ''; top: 0px; right: 15px; height: 100%; width: 1px; background: #000; } .pdl0 { padding-left: 0px; } /* Responsive for mobile */ @media (max-width: 768px) { .mega-menu-content.full-width { position: static; width: 100%; } .tab-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 10px; } .tab-buttons { width: 100%; border-right: none; } .tab-content { padding: 10px 0; } } .menu-item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } .content-box { padding: 0px 0px; /* background: #f9f9f9; */ /* border-left: 3px solid #499A9A; */ margin-top: 15px; padding-left: 15px; } .aboutbanner .hero-bg-video video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; right: -30%; position: relative; z-index: -1; } .aboutbanner .section-title { margin-bottom: 0px; } .aboutbanner .section-title h1 { font-size: 65px; font-family: "Raleway", sans-serif; line-height: 80px; font-weight: 300; color: #082326; width: 100%; } .aboutbanner .section-title p { font-size: 24px; line-height: 32px; font-family: 'helvetica-neue-lt-pro'; font-weight: 300; } .aboutbanner .hero-video-content { width: 85%; } .aboutbanner .hero-bg-video::before { position: absolute; content: ''; top: 0px; left: 0px; height: 100%; width: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(40%, rgba(255, 255, 255, 1)), color-stop(70%, rgba(0, 0, 0, .1)), color-stop(56%, rgba(0, 0, 0, .1))); background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 40%, rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, .1) 56%); background: linear-gradient(90deg, rgba(255, 255, 255, 1) 40%, rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, .1) 56%); } .aboutbanner { padding: 50px 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .aboutmap .section-title { width: 1050px; } .aboutmap .section-title p { font-family: 'Helvetica', 'Arial', sans-serif; font-weight: 400; } .mapsection h5 { font-size: 24px; color: #499A9A; font-weight: 700; font-family: 'Helvetica', 'Arial', sans-serif; } .blink-bg { -webkit-animation: bgBlink 1.2s infinite ease-in-out; animation: bgBlink 1.2s infinite ease-in-out; } @-webkit-keyframes bgBlink { 0%, 100% { fill: white; opacity: 0.78; } 50% { fill: white; /* light transparent shade */ opacity: 0.5; } } @keyframes bgBlink { 0%, 100% { fill: white; opacity: 0.78; } 50% { fill: white; /* light transparent shade */ opacity: 0.5; } } .blink-bg1 { -webkit-animation: bgBlink 2s infinite ease-in-out; animation: bgBlink 2s infinite ease-in-out; } @keyframes bgBlink { 0%, 100% { fill: white; opacity: .5; } 50% { fill: white; opacity: 0.78; } } .mission { position: relative; overflow: hidden; z-index: 1; color: #082326; } .mission #myVideo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; z-index: 0; } .mission .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); /* adjust darkness */ z-index: 1; } .mission .container { position: relative; z-index: 2; } .mission .mission-left .missionhead { position: relative; } .mission .mission-left h5 { color: #499A9A; font-family: "Raleway", sans-serif; font-size: 40px; font-weight: 600; position: absolute; top: 55px; left: 0px; } .mission .mission-left p { font-size: 32px; font-family: "Raleway", sans-serif; color: #082326; /* white text over video */ font-weight: 400; margin-top: 15px; line-height: 48px; margin-bottom: 0px; } .mission .mission-left h2 { font-size: 55px; font-family: "Raleway", sans-serif; color: #082326; font-weight: 400; line-height: 72px; } .width80 { width: 85%; } .pd80 { padding: 80px 0px; } .aboutwork .section-title h2 { width: 100% !important; } .aboutwork .benefits-steps-content h3 { font-family: "Parkinsans", sans-serif !important; line-height: 32px; font-weight: 600; } .retail-baner1 { position: relative; z-index: 1; } .retail-baner-11::before { position: absolute; content: ""; width: 50%; background-image: url('../images/aboutretail.jpg'); background-position: right; background-size: cover; height: 100%; right: 0%; top: 0px; background-repeat: no-repeat; z-index: -2; } .retail-baner-11::after { position: absolute; content: ""; width: 100%; top: 0px; left: 0px; height: 100%; z-index: -1; background: -webkit-gradient(linear, left top, right top, from(#ffffff), color-stop(50%, rgb(255 255 255 / 100%)), color-stop(65%, rgb(0 0 0 / 0%))); background: -o-linear-gradient(left, #ffffff, rgb(255 255 255 / 100%) 50%, rgb(0 0 0 / 0%) 65%); background: linear-gradient(90deg, #ffffff, rgb(255 255 255 / 100%) 50%, rgb(0 0 0 / 0%) 65%); } .aboutretail h2 { color: #082326; font-size: 40px; font-weight: 600; font-family: "Raleway", sans-serif; line-height: 48px; } .aboutretail p { color: #082326; font-size: 16px; font-weight: 400; font-family: "Helvetica", sans-serif; line-height: 24px; margin-bottom: 0px !important; } .aboutretail { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 100px 0px; } .aboutretail .section-title { margin-bottom: 0px; } .width50 { width: 60%; text-align: left; } .valueslide { padding: 15px !important; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 70px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 440px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-radius: 8px; border: 1px solid white; } .valueslide p { margin-bottom: 0px; display: block !important; font-size: 16px; font-weight: 400; line-height: 24px; } .valueslide h6 { margin-bottom: 15px; } .valueslide img { margin-bottom: 15px; width: 70px; /* height: 80px; */ } .testimonial-slider5 { margin: 40px 0px; } /* .swiper-slide-active .valueslide p { margin-bottom: 0px; display: block; } */ /* .valueslide:hover.valueslide p { margin-bottom: 0px; display: block; } */ .valueslide p { font-family: "Raleway", sans-serif; } .valueslide:hover { border: 0px; padding: 15px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 128, 128, 0.534)), to(#082326)); background: -o-linear-gradient(top, rgba(0, 128, 128, 0.534) 0%, #082326 100%); background: linear-gradient(180deg, rgba(0, 128, 128, 0.534) 0%, #082326 100%); } .testimonial-slider5 .testimonial-btn .btn-style-3 { padding: 0px 0px !important; } .testimonial-slider5 .testimonial-btn .testspace { color: #fff !important; } .testimonial-slider5 .testimonial-btn { position: absolute; bottom: 0px; left: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; margin-top: 30px; z-index: 2; } .testimonial-slider5 .testimonial-button-next, .testimonial-slider5 .testimonial-button-prev { position: relative; width: 50px; /* height: 50px; */ /* background: var(--secondary-color); */ border-radius: 8px; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .testimonial-slider5 .testimonial-button-next { margin-left: 5px; } .testimonial-slider5 .testimonial-button-next:hover, .testimonial-slider5 .testimonial-button-prev:hover { /* background: var(--accent-color); */ } .testimonial-slider5 .testimonial-button-prev { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .aboutwork { position: relative; overflow: hidden; } /* 🎥 Video wrapper */ .aboutwork .hero-bg-video2 { position: absolute; /* not fixed */ top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; will-change: transform; -webkit-transform: translateZ(0); transform: translateZ(0); } /* Make video fill the section */ .aboutwork .hero-bg-video2 video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -webkit-transform: translateY(calc(var(--scrollY, 0px) * -0.2)); -ms-transform: translateY(calc(var(--scrollY, 0px) * -0.2)); transform: translateY(calc(var(--scrollY, 0px) * -0.2)); /* optional parallax look */ } /* 🟣 Gradient overlay */ .aboutwork::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(0, 0, 0, .1)), color-stop(11%, rgba(0, 0, 0, .1)), color-stop(48%, rgba(8, 35, 38, 1))); background: -o-linear-gradient(left, rgba(0, 0, 0, .1) 8%, rgba(0, 0, 0, .1) 11%, rgba(8, 35, 38, 1) 48%); background: linear-gradient(90deg, rgba(0, 0, 0, .1) 8%, rgba(0, 0, 0, .1) 11%, rgba(8, 35, 38, 1) 48%); z-index: 1; pointer-events: none; } .aboutwork .section-row { position: relative; z-index: 2; } .aboutwork .hero-bg-video2::before { background: none !important; } .social { padding: 60px 0px; position: relative; z-index: 1; } .sociaimp1::before { position: absolute !important; content: ""; top: 0px; left: -10%; background-image: url(../images/child.jpg) !important; background-position: left; background-repeat: no-repeat; background-size: contain; width: 100%; z-index: -2; height: 100%; background-attachment: fixed; /* background: cyan; */ /* background: antiquewhite; */ /* background-attachment: local; */ background-repeat: round; } .sociaimp1::after { position: absolute !important; top: 0px; content: ""; width: 100%; height: 100%; z-index: -1; background: -webkit-gradient(linear, left top, right top, color-stop(35%, rgb(255, 255, 255, .1)), color-stop(49%, rgb(255, 255, 255)), to(rgb(255, 255, 255))); background: -o-linear-gradient(left, rgb(255, 255, 255, .1) 35%, rgb(255, 255, 255) 49%, rgb(255, 255, 255) 100%); background: linear-gradient(90deg, rgb(255, 255, 255, .1) 35%, rgb(255, 255, 255) 49%, rgb(255, 255, 255) 100%); left: 0px; } .socialcont p { color: #000 !important; font-size: 16px; font-weight: 400; font-family: 'Helvetica', 'Arial', sans-serif; line-height: 24px; } .socialcont h5 { color: #000000; font-size: 16px; font-weight: 700; font-family: 'Helvetica', 'Arial', sans-serif; line-height: 24px; margin-bottom: 15px; } .retailsection { background: none !important; position: relative; background: url(../images/chorus.jpg) !important; background-size: contain !important; background-repeat: no-repeat !important; z-index: 0; background-position: right !important; } .retailsection::before { content: ""; position: absolute; top: 0; left: -20px !important; width: 120%; height: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(35%, rgba(8, 35, 38, 1)), color-stop(2%, rgba(8, 35, 38, 1)), color-stop(44%, rgba(8, 35, 38, 0.81)), color-stop(60%, rgb(10 83 91 / 10%)), color-stop(84%, rgba(255, 255, 255, 0))); background: -o-linear-gradient(left, rgba(8, 35, 38, 1) 35%, rgba(8, 35, 38, 1) 2%, rgba(8, 35, 38, 0.81) 44%, rgb(10 83 91 / 10%) 60%, rgba(255, 255, 255, 0) 84%); background: linear-gradient(90deg, rgba(8, 35, 38, 1) 40%, rgba(8, 35, 38, 1) 2%, rgba(8, 35, 38, 0.81) 48%, rgb(10 83 91 / 10%) 64%, rgba(255, 255, 255, 0) 84%); /* background: linear-gradient(270deg, #133FA4 25.85%, rgba(13, 44, 115, 0.21) 44.99%, rgba(7, 24, 62, 0) 54.91%); */ z-index: 2; pointer-events: none; } .retailsection1 { /* background: none !important; */ position: relative; /* background: url(../images/chorus.jpg) !important; */ background-size: contain !important; background-repeat: no-repeat !important; z-index: 0; background-position: right !important; min-height: auto !important; padding: 100px 0px; } .retailsection1::before { content: ""; position: absolute; top: 0; left: -20px !important; width: 120%; height: 100%; background: linear-gradient(90deg, rgba(8, 35, 38, 1) 24%, rgba(8, 35, 38, 1) 32%, rgba(8, 35, 38, 1.81) 43% 44%, rgb(8 35 38 / 14%) 48%, rgb(10 83 91 / 0%) 58%, rgba(255, 255, 255, 0) 84%); z-index: 2; pointer-events: none; } .corusimg-5{ position: relative; z-index: -1; } .corusimg-5::after{ position: absolute; z-index: 11; content: ""; width: 100%; background: #ffffff; background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.34) 20%, rgba(255, 255, 255, 0) 100%); height: 100%; top: 0%; left: 0px; } .retailsection1 .section-title p:last-child { margin-bottom: 10px !important; } .retailsection1 .section-title { margin-bottom: 0px !important; } .corussecond .section-title h2 { margin-bottom: 25px !important; } .features1 p { font-family: 'Helvetica', 'Arial', sans-serif; } .self-service { margin: 25px 0px !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } .self-service p { font-family: "helvetica-neue-lt-pro"; font-size: 16px; margin-bottom: 0px; } .self1 .self-service img { padding-right: 10px; } .self1 .buildsec video { width: 50%; height: 100%; -o-object-fit: cover; object-fit: cover; } .corusolution p { font-size: 16px !important; line-height: 24px !important; font-weight: 400; } .additional1 .imgadd img { position: absolute; right: 0px; bottom: 0px; } .additional1 .imgadd1 img { position: absolute; right: 0px; bottom: 0px; } .corusolsec .benefits-steps-item h3 { margin-bottom: 0px !important; font-size: 18px; } /* .additional1 .imgadd2 img{ position: absolute; right: 10%; bottom:0%; } */ .additional1 .service-item-body1 h3 { font-size: 24px; line-height: 32px; margin-bottom: 10px; } .additional1 .service-item-body1 { min-height: 390px; } .additional1 .w80 p { width: 80%; margin-bottom: 5px; } .benefitssec .benefits-steps-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } .benefitssec .benefits-steps-item img { height: 80px; margin-right: 15px; } .benefitssec .benefits-steps-item h3 { font-size: 16px; font-weight: 500; line-height: 24px; font-family: 'helvetica-neue-lt-pro'; margin-bottom: 10px; } .benefitssec .benefits-steps-item p { font-size: 16px; font-weight: 300; line-height: 24px; font-family: 'helvetica-neue-lt-pro'; } .benefitssec .benefits-steps-item .icon-box { margin-bottom: 0px; } .posrelative { position: relative !important; } .parentban { position: relative; } .parentban img { position: absolute; bottom: 1%; left: 5%; height: 450px; width: auto; } .brouchure .w100 { width: 100%; } .brouchure input { border: 1px solid #fff; border-radius: 60px; height: 60px; color: #fff; background: transparent; width: 100% !important; padding: 10px 20px; margin-bottom: 20px; } .brouchure { padding: 60px 0px !important; } .brouchure h2 { font-size: 40px; } .brouchure p { font-size: 16px; font-weight: 300; width: 400px; } .phone-input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: transparent; border: 1px solid #fff; border-radius: 60px; overflow: hidden; width: 100%; /* max-width: 400px; */ height: 60px; margin-bottom: 20px; } .country-code select { background: transparent; border: none; color: #fff; font-size: 14px; padding: 10px 30px 10px 10px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .country-code select option { background-color: rgba(10, 31, 31, 0.7); /* semi-transparent dark */ color: #fff; } .country-code { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* border-right: 1px solid #fff; */ height: 100%; padding-left: 10px; position: relative; } .country-code::after { position: absolute; content: ''; top: 9px; right: 0px; height: 40px; width: 1px; background: #fff; } .phone-input input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: transparent; border: none; outline: none; color: #fff; font-size: 14px; padding: 18px 20px 0px !important; } .phone-input input::-webkit-input-placeholder { color: #fff; margin-top: 10px; } .phone-input input::-moz-placeholder { color: #fff; margin-top: 10px; } .phone-input input:-ms-input-placeholder { color: #fff; margin-top: 10px; } .phone-input input::-ms-input-placeholder { color: #fff; margin-top: 10px; } .phone-input input::placeholder { color: #fff; margin-top: 10px; } .brouchure input::-webkit-input-placeholder { color: #fff; } .brouchure input::-moz-placeholder { color: #fff; } .brouchure input:-ms-input-placeholder { color: #fff; } .brouchure input::-ms-input-placeholder { color: #fff; } .brouchure input::placeholder { color: #fff; } .country-code .arrow { position: absolute; right: 12px; pointer-events: none; color: #ffffff; font-size: 15px; font-weight: 100; } .rotatecircle { position: relative; width: 886px; height: 754px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .rotating-path { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation: spin 10s linear infinite; animation: spin 10s linear infinite; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Default logo appearance */ .logos img { height: 80px; margin: 0 40px; display: inline-block; -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.8; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } /* On hover — color + slight zoom */ .logos img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } /* Pause marquee animation on hover */ .logo-slider:hover .logos { -webkit-animation-play-state: paused; animation-play-state: paused; } .biimp-tabs .tab { /* overflow: hidden; */ /* border: 1px solid #ccc; */ color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 10px; } /* Buttons inside tab */ .biimp-tabs .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; /* padding: 10px 18px 10px 0px; */ -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; font-size: 15.6px; position: relative; color: #fff; } /* Hover effect */ .biimp-tabs .tab button:hover { color: #499A9A; } /* Active tab */ .biimp-tabs .tab button.active { color: #499A9A; /* text-decoration: underline; */ } .biimp-tabs .tab button.active { color: #499A9A; } .biimp-tabs .tab button.active::after { content: ""; position: absolute; bottom: -5px; left: 3px; width: 96%; height: 2px; background-color: #499A9A; } /* Tab content */ .biimp-tabs .tabcontent { display: none; padding: 6px 12px; /* border: 1px solid #ccc; */ border-top: none; } .biservice { padding: 80px 0px !important; } .biservice h2 { color: #fff; } #cards { list-style: none; display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: ; grid-template-rows: repeat(var(--numcards), var(--card-height)); gap: var(--card-margin); 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 { position: sticky; top: 0; padding-top: calc(var(--index) * var(--card-top-offset)); } /* .card-content { box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1); background: #fffaf2; color: #131212; border-radius: 2rem; overflow: hidden; display: grid; grid-template-areas: "text img"; grid-template-columns: 1fr 1fr; grid-template-rows: auto; align-items: stretch; padding: 1.4em; } */ /* .card-content > div { grid-area: text; width: 95%; max-width: 800px; place-self: center; text-align: left; display: grid; gap: 1em; place-items: start; } */ .card-content>figure { grid-area: img; overflow: hidden; } .card-content>figure>img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 8px; } /* Animation */ @supports (animation-timeline: works) { @scroll-timeline cards-element-scrolls-in-body { source: selector(body); scroll-offsets: selector(#cards) start 1, selector(#cards) start 0; start: selector(#cards) start 1; end: selector(#cards) start 0; time-range: 4s; } .card { --index0: calc(var(--index) - 1); --reverse-index: calc(var(--numcards) - var(--index0)); --reverse-index0: calc(var(--reverse-index) - 1); } .card__content { -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; will-change: transform; --duration: calc(var(--reverse-index0) * 1s); --delay: calc(var(--index0) * 1s); -webkit-animation: var(--duration) linear scale var(--delay) forwards; animation: var(--duration) linear scale var(--delay) forwards; animation-timeline: cards-element-scrolls-in-body; } @-webkit-keyframes scale { to { -webkit-transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index)))); transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index)))); } } @keyframes scale { to { -webkit-transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index)))); transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index)))); } } } .tab-cards { display: -webkit-box; display: -ms-flexbox; display: flex; background: #fff; margin-top: 30px; border-radius: 8px; } .tab-cards .card-left { width: 50%; padding: 30px 30px; } .tab-cards .card-right { width: 50%; } .tab-cards .card-right img { border-radius: 0px 8px 8px 0px; -o-object-fit: cover; object-fit: cover; height: -webkit-fill-available; } .tab-cards .card-left p { color: #000; font-family: 'Raleway'; font-size: 16px; font-weight: 400; line-height: 24px; } .li-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } .li-content p { color: #000; font-family: 'Raleway'; font-size: 16px; font-weight: 400; line-height: 24px; } .li-content img { margin-top: 5px; margin-right: 10px; } .card-left h5 { color: #499A9A; font-family: 'Raleway'; font-size: 24px; font-weight: 600; line-height: 24px; margin-bottom: 15px; } .micfabric { padding: 30px 30px; } .micfabric h2 { color: #000000 !important; font-family: 'helvetica-neue-lt-pro'; font-size: 24px; font-weight: 400; line-height: 24px; margin-bottom: 20px; } .micfabric p { color: #000000 !important; font-family: 'helvetica-neue-lt-pro'; font-size: 16px; font-weight: 400; line-height: 24px; margin-bottom: 15px; } .card-content .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .corimg .card11 { margin-bottom: 20px; min-height: 600px; } .corimg .card11 .hidden { display: none; } /* Global hidden utility class for read more/less functionality */ .hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; } /* Ensure more-text is visible when not hidden */ #more:not(.hidden), .more-text:not(.hidden) { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; } .readmore span { color: #fff; cursor: pointer; padding-left: 0px; } .integration .section-title p { margin-bottom: 5px; font-family: "Helvetica"; } .integration .section-title h2 { font-family: "Raleway"; } .integration .section-title { width: 800px; margin: auto; } .advant .imgadd p { width: 70%; font-family: "helvetica-neue-lt-pro"; font-size: 16px; line-height: 24px; } .advant .imgadd h3 { width: 70%; font-family: "helvetica-neue-lt-pro"; font-size: 24px; line-height: 32px; } .advant .imgadd { position: relative; z-index: 9; } .advant .imgadd img::before { position: absolute; content: ''; top: 0px; right: 0px; height: 100%; width: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(100%, rgba(8, 35, 38, 1)), color-stop(107%, rgba(0, 0, 0, 1)), color-stop(31%, rgba(8, 35, 38, .8))); background: -o-linear-gradient(left, rgba(8, 35, 38, 1) 100%, rgba(0, 0, 0, 1) 107%, rgba(8, 35, 38, .8) 31%); background: linear-gradient(90deg, rgba(8, 35, 38, 1) 100%, rgba(0, 0, 0, 1) 107%, rgba(8, 35, 38, .8) 31%); z-index: -1; } .casetitle p { font-family: "Helvetica"; } .pdt50 { padding-top: 80px; } .advatagesect .section-title { width: 1122px; margin: auto; } /*.advatagesect .imgadd {*/ /* position: relative;*/ /* z-index: 1;*/ /* overflow: hidden;*/ /*}*/ /*.advatagesect .imgadd::after {*/ /* position: absolute;*/ /* content: "";*/ /* width: 100%;*/ /* right: -30%;*/ /* bottom: 0%;*/ /* height: 100%;*/ /* z-index: -1;*/ /* background: RGBA(73, 154, 154, 1);*/ /* background: -o-radial-gradient(circle, rgba(73, 154, 154, 0.72) 0%, rgba(0, 0, 0, 0) 77%);*/ /* background: radial-gradient(circle, rgba(73, 154, 154, 0.72) 0%, rgba(0, 0, 0, 0) 77%);*/ /*}*/ .epicorfst p { padding-bottom: 10px; } .pill-points .pill-cont h5 { font-family: "Raleway"; font-size: 24px; line-height: 32px; color: #000; margin-bottom: 15px; } .pill-points .pill-cont p { font-family: "Helvetica"; font-size: 16px; line-height: 24px; margin-left: 0px; } .pill-points .pill-cont { padding-left: 10px; } .testslide1 .service-item-body h3 { font-family: "Raleway"; font-size: 24px; line-height: 32px; margin-bottom: 15px; height: 100px; } .testslide1 .service-item-body p { font-family: "Helvetica"; font-size: 16px; line-height: 24px; margin-left: 0px; color: #fff !important; } .testslide1 .service-item-body { color: #fff !important; } .epicoroffer .swiper-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; width: 100%; } .testslide1 .service-item:not(:hover) .animated-svg-link1 .dot { fill: #6d6d6d !important; opacity: 0.5; -webkit-transition: fill 0.3s ease, opacity 0.3s ease; -o-transition: fill 0.3s ease, opacity 0.3s ease; transition: fill 0.3s ease, opacity 0.3s ease; } .epicoroffer .section-title h2 { color: #fff !important; } .epicoroffer .section-title p { color: #fff !important; } .epicoroffer { padding: 80px 0px !important; } .epicoroffer .service-item-body p { height: 150px; } /* 1. Style the new SVG container and its elements */ .testslide1 .card-svg { /* Ensure the SVG scales properly */ width: 100%; height: 100%; } .testslide1 .card-svg>path[id^="line-"] { stroke: #585858 !important; stroke-width: 1.3; opacity: 0.7; } .testslide1 .card-svg>path[id^="line-"], .testslide1 .card-svg>line { stroke: #585858 !important; stroke-width: 1.3; opacity: 0.7; } /* 2. Style the dots */ .testslide1 .anim-dot { fill: #0eac6d; /* A bright, visible color */ opacity: 0; /* This property is the magic that allows animation along an SVG path */ offset-path: none; } /* 3. Define the animation */ @keyframes travel-along-path { 0% { /* Start at the beginning of the path and be visible */ offset-distance: 0%; opacity: 1; } 80% { /* Stay visible for most of the journey */ opacity: 1; } 100% { /* Arrive at the end and fade out */ offset-distance: 100%; opacity: 0; } } /* 4. On hover, trigger the animation */ .testslide1 .service-item:hover .anim-dot { /* Play the animation. 'forwards' keeps it at the end state */ -webkit-animation: travel-along-path 2s ease-out forwards; animation: travel-along-path 2s ease-out forwards; r: 2.8px; /* increase from 1.5px to 3px */ -webkit-transition: r 0.3s ease; -o-transition: r 0.3s ease; transition: r 0.3s ease; /* smooth scaling */ } /* 4. On hover, trigger the animation */ .testslide1 .service-item:hover .anim-dot { /* Play the animation. 'forwards' keeps it at the end state */ -webkit-animation: travel-along-path 2s ease-out forwards; animation: travel-along-path 2s ease-out forwards; r: 2.8px; /* increase from 1.5px to 3px */ -webkit-transition: r 0.3s ease; -o-transition: r 0.3s ease; transition: r 0.3s ease; /* smooth scaling */ } /* 5. Assign each dot to its specific path USING YOUR NEW SVG PATH DATA */ /* NOTE: The path data is copied DIRECTLY from your SVG for perfect accuracy */ /* Left Side Paths (animating inwards) */ .testslide1 .service-card .anim-dot:nth-of-type(1) { offset-path: path('M1.4209 2L34.7821 2C46.3801 2 55.7821 11.402 55.7821 23V39.5752C55.7821 51.1732 65.1841 60.5752 76.7821 60.5752H84.859'); } .testslide1 .service-card .anim-dot:nth-of-type(2) { offset-path: path('M0.999367 60.6538 H 84.4375'); } .testslide1 .service-card .anim-dot:nth-of-type(3) { offset-path: path('M1.4209 119.15L34.7821 119.15C46.3801 119.15 55.7821 109.748 55.7821 98.1504V81.5752C55.7821 69.9772 65.1841 60.5751 76.7821 60.5751H84.859'); } /* Right Side Paths (animating inwards) */ .testslide1 .service-card .anim-dot:nth-of-type(4) { offset-path: path('M249.578 2L216.217 2C204.619 2 195.217 11.402 195.217 23V39.5752C195.217 51.1732 185.815 60.5752 174.217 60.5752H166.14'); } .testslide1 .service-card .anim-dot:nth-of-type(5) { offset-path: path('M250 60.1538 H 166.562'); } .testslide1 .service-card .anim-dot:nth-of-type(6) { offset-path: path('M249.578 119.15L216.217 119.15C204.619 119.15 195.217 109.748 195.217 98.1504V81.5752C195.217 69.9772 185.815 60.5751 174.217 60.5751H166.14'); } .testslide1 .service-item.active { background: -webkit-gradient(linear, left top, left bottom, from(#d9f1f1), to(#0b2e2e)); background: -o-linear-gradient(top, #d9f1f1 0%, #0b2e2e 100%); background: linear-gradient(180deg, #d9f1f1 0%, #0b2e2e 100%); color: #fff; -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); } /*.testslide1 .swiper-slide-active .service-item {*/ /* border: none !important;*/ /*}*/ .testslide1 .service-item.active h3, .testslide1 .service-item.active p, .testslide1 .service-item.active .know-more { color: #fff !important; } .testslide1 .active .ser-btn1 a { color: #fff !important; } .testslide1 .service-item:hover { /* background: linear-gradient(180deg, rgba(0, 128, 128, 0) 0%, #082326 95%); */ /* background: linear-gradient(180deg, #d9f1f1 0%, #0b2e2e 100%) !important; */ background: -webkit-gradient(linear, left top, left bottom, from(#082326), color-stop(50%, rgba(0, 128, 128, 0.8)), to(#082326)) !important; background: -o-linear-gradient(top, #082326 0%, rgba(0, 128, 128, 0.8) 50%, #082326 100%) !important; background: linear-gradient(180deg, #082326 0%, rgba(0, 128, 128, 0.8) 50%, #082326 100%) !important; color: #fff; -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); -webkit-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; /* border: 1px solid transparent !important; */ } /* .swiper-slide-active .service-item { border: 1px solid transparent !important; } */ .testslide1 .service-item:hover h3, .testslide1 .service-item:hover p, .testslide1 .service-item:hover a { color: #fff !important; } .testslide1 .testspace { -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; -o-transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; display: inline-block; } .testslide1 .testspace.fade-out { opacity: 0; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } .testslide1 .testspace.fade-in { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* .testslide1 .active .ser-btn1 a { color: #fff !important; } */ .testslide1 .service-item:hover { border: none; } .appro img { height: 70px; } .appro .challenge-point-waber { margin-bottom: 15px; } .approachh::before { background-image: url(../images/approach.jpg); } .erpbenefits::before { background-image: url(../images/excbenefit.webp); background-attachment: fixed; background-position: top; } .epicadv .w80 p { width: 60%; } .epicright img { position: absolute; right: 0px; bottom: 0px; } .epicright1 img { position: absolute; right: 0px; bottom: 0px; height: 380px; width: auto; } .epicleft img { position: absolute; left: 0px; bottom: 0px; } .epicadv .service-item-body1 { position: relative; z-index: 9; } .epicadv .service-item-body1 img::before { position: absolute; content: ''; top: 0px; right: 0px; height: 100%; width: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(100%, rgba(8, 35, 38, 1)), color-stop(107%, rgba(0, 0, 0, 1)), color-stop(31%, rgba(8, 35, 38, .8))); background: -o-linear-gradient(left, rgba(8, 35, 38, 1) 100%, rgba(0, 0, 0, 1) 107%, rgba(8, 35, 38, .8) 31%); background: linear-gradient(90deg, rgba(8, 35, 38, 1) 100%, rgba(0, 0, 0, 1) 107%, rgba(8, 35, 38, .8) 31%); z-index: -1; } .epicorserve .service-item-body.in1 { background: url(../images/episer1.jpg); background-size: cover; background-repeat: no-repeat; } .epicorserve .service-item-body.in2 { background: url(../images/episer2.jpg); background-size: cover; background-repeat: no-repeat; } .epicorserve .service-item-body.in3 { background: url(../images/episer3.jpg); background-size: cover; background-repeat: no-repeat; } .epicorserve .service-item-body.in4 { background: url(../images/episer4.jpg); background-size: cover; background-repeat: no-repeat; } .epicorserve .service-item-body.in5 { background: url(../images/episer5.jpg); background-size: cover; background-repeat: no-repeat; } .epicorserve .testimonial-btn1 { position: absolute; bottom: -10px; left: 45%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; margin-top: 30px; z-index: 2; } .capabilities .valueslide { min-height: 250px; } body.no-scroll { overflow: hidden; position: fixed; width: 100%; } /* body.search-open *:not(.search-full):not(.search-full *) { pointer-events: none; } */ .search-box { position: relative; /* **MUST HAVE** for absolute positioning of children */ } .search-full { position: fixed; top: 0; left: 0; width: 100%; height: 0; background: #fff; overflow: hidden; z-index: 9999; -webkit-transition: height 0.35s ease; -o-transition: height 0.35s ease; transition: height 0.35s ease; pointer-events: none; -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .search-full.active { height: 120px; pointer-events: auto; } .search-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; max-width: 1350px; margin: 0 auto; padding: 0 40px; position: relative; } .search-bar input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none; border-bottom: 1px solid #000; font-size: 16px; padding: 15px 40px; outline: none; color: #333; background: transparent; } .search-bar input::-webkit-input-placeholder { color: #B9B9B9 !important; } .search-bar input::-moz-placeholder { color: #B9B9B9 !important; } .search-bar input:-ms-input-placeholder { color: #B9B9B9 !important; } .search-bar input::-ms-input-placeholder { color: #B9B9B9 !important; } .search-bar input::placeholder { color: #B9B9B9 !important; } .search-icon-left { position: absolute; left: 45px; font-size: 18px; color: #999; } .icon-close { font-size: 24px; color: white; /* always white */ cursor: pointer; position: absolute; right: 18px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 10001; display: none; } .search-box.active .icon-close { display: inline-block; } .search-box.active .icon-search { display: none; } .width100 h2 { width: 100% !important; } .width80 { width: 80%; margin: auto; } .bggray { background: #e6e9e9; } .page-faqs .section-title h2 { color: #082326; } .page-faqs .accordion-item { background: #082326; margin-bottom: 15px; border-radius: 8px; } .page-faqs .accordion-item button { padding: 10px 15px; font-family: 'Raleway'; border-radius: 8px; } .page-faqs .accordion-item .collapsein { padding: 10px 15px 10px 15px; } .page-faqs .accordion-item button.collapsed { background: #fff; color: #082326 !important; font-weight: 700; border-radius: 8px; } .page-faqs .accordion-body { padding: 0px 15px 10px; } .page-faqs .accordion-body p { margin-bottom: 0px; font-family: 'helvetica-neue-lt-pro'; font-weight: 400; margin-top: -10px; } .our-faq-section .accordion-item .accordion-button::after, .our-faq-section .accordion-item .accordion-button.collapsed::after { content: '\f068'; font-family: "FontAwesome"; position: absolute; right: 20px; top: 50%; bottom: auto; -webkit-transform: translate(0px, -12px); -ms-transform: translate(0px, -12px); transform: translate(0px, -12px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 14px; font-weight: 400; line-height: normal; width: 24px; height: 24px; color: #fff; /* background-color: var(--primary-color); */ border-radius: 50%; } .our-faq-section .accordion-item .accordion-button.collapsed::after { content: '\2b'; color: #082326; /* background-color: var(--accent-color); */ } .kineticsec::before { background-attachment: fixed !important; background: url(../images/Kinetic.jpg); background-size: contain; background-repeat: no-repeat; background-position: right top; } .iscalasec::before { background-attachment: fixed !important; background: url(../images/iScala.jpg); background-size: contain; background-repeat: no-repeat; background-position: right top; } .iscalasec::before { background-attachment: fixed !important; background: url(../images/iScala.jpg); background-size: contain; background-repeat: no-repeat; background-position: right top; } .kineticsec1::before { background-attachment: fixed !important; background: url(../images/epicorscala.jpg); background-size: contain; background-repeat: no-repeat; background-position: right top; } .epiccomp .flip-card { height: 360px !important; } .epiccomp h3 { height: 70px !important; } .epiccomp p { height: auto !important; } .epiccompanion { background: #f9f9f9; } .saptest .microinner-icon img { height: 50px !important; } .pdt0 { padding-top: 0px !important; } .mstechadv .agency-supports-logo { padding: 10px 10px !important; background: transparent !important; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .5); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .5); height: 210px !important; border: 1px solid #333; } .mstechadv .agency-supports-logo p { margin: 15px 0px 0px 0px; color: #fff; } .digital-features-item { position: relative; padding: 30px; border: none !important; backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px); border-radius: 8px; overflow: hidden; } .mstechchallenge { height: 250px !important; } .agency-supports-slider2 .agency-supports-logo { height: 250px !important; } .ullist { padding-left: 50px !important; } .ullist li { color: #082326; line-height: 1.5; } .mstechsolutions p { margin-bottom: 20px !important; } .mstechsolutions .bf-content img { margin-top: 5px; } .mstechsolutions .height500 { min-height: 370px !important; } .mstechsolutions .height600 { min-height: 480px !important; } .mstechsolutions .benifet-content-waber { margin-top: 20px !important; } .slidebefore::before { background: none !important; } .slidebefore::after { background: none !important; } .mscap .service-item-body1 { border: 1px solid #333; } .deliver { position: relative; z-index: 1; } .deliver::before { position: absolute; content: ""; width: 50%; background-image: url('../images/delivering.jpg') !important; background-position: right; background-size: cover; height: 100%; right: 0%; top: 0px; background-repeat: no-repeat; z-index: -2; } .deliver::after { position: absolute; content: ""; width: 100%; top: 0px; left: 0px; height: 100%; z-index: -1; background: -webkit-gradient(linear, left top, right top, from(#ffffff), color-stop(53%, rgb(255 255 255 / 100%)), color-stop(89%, rgb(0 0 0 / 0%))); background: -o-linear-gradient(left, #ffffff, rgb(255 255 255 / 100%) 53%, rgb(0 0 0 / 0%) 89%); background: linear-gradient(90deg, #ffffff, rgb(255 255 255 / 100%) 53%, rgb(0 0 0 / 0%) 89%); } .faqpage p { margin-bottom: 25px !important; margin-top: 25px; } .faqpage .accordion-item button.accordion-button { background: #082326 !important; color: #fff !important; font-weight: 500; border-radius: 8px !important; font-size: 17px; font-family: 'helvetica-neue-lt-pro' !important; /* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .5); */ } .faqpage .accordion-body { padding-top: 15px; } .faqpage .accordion-body p { font-family: "Raleway", sans-serif; font-weight: 300; } .faqpage .accordion-body li { font-family: "Raleway", sans-serif; font-weight: 300; } .faqpage .accordion-item .accordion-button.collapsed::after { content: '\2b'; color: #fdfdfd; /* background-color: var(--accent-color); */ } .faqpage .headin { margin-top: 10px; margin-bottom: 0px; } .faqpage .faq-accordion h4 { color: #082326 !important; margin-bottom: 10px; margin-top: 20px; } .accordion-body ul { padding-left: 25px; } .page-video-gallery { padding: 50px 0 50px; } .video-gallery-image { border-radius: 8px; overflow: hidden; height: calc(100% - 30px); margin-bottom: 30px; } .video-gallery-image a { position: relative; display: block; cursor: none; } .video-gallery-image a::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #082326; border-radius: 8px; opacity: 0%; visibility: hidden; width: 100%; height: 100%; z-index: 1; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .video-gallery-image:hover a::before { opacity: 80%; visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .video-gallery-image a::after { content: '\f04b'; font-family: 'FontAwesome'; position: absolute; top: 50%; left: 50%; right: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 20px; background: #fff; color: #082326; border-radius: 50%; height: 60px; width: 60px; cursor: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 1; visibility: visible; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; z-index: 1; } /* .video-gallery-image:hover a::after{ opacity: 1; visibility: visible; } */ .video-gallery-image img { aspect-ratio: 1 / 0.8; -o-object-fit: cover; object-fit: cover; border-radius:8px; } .video-gallery-image h4 { color: #000; font-size: 17px; margin: 20px 0px; line-height: 25px; } .webinarbtn .filter-controls { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; } .webinarbtn .filter-controls { padding: 10px; border-radius: 60px; margin-bottom: 30px; background-color: #082326; width: 100%; } .webinarbtn .filter-btn { padding: 7px 30px; margin-right: 10px; border: 0px solid #082326; background-color: #082326; color: #fff; cursor: pointer; -webkit-transition: background-color 0.3s; -o-transition: background-color 0.3s; transition: background-color 0.3s; border-radius: 60px; } .webinarbtn .filter-btn.active { background-color: #fff; color: #000; border-radius: 60px; border-color: #fff; } .webinarbtn .item>div { padding: 0px !important; border: none !important; border-radius: 8px; background-color: #fff; min-height: 100px; } .webinarbtn .item p { color: #000; margin-bottom: 0px; } .webinarbtn .item p b { padding-right: 10px; } .webinarbtn .item h4 b { padding-right: 10px; } .width90 .section-title h2 { width: 90% !important; } .amslide .testimonial-button-prev, .amslide .testimonial-button-next { height: 50px !important; } .amslide .testimonial-btn { position: absolute; bottom: 20px; left: 0px !important; } .challenges-waber { padding: 60px 0px; position: relative; z-index: 1; } .amsmethod::before { position: absolute; content: ""; top: 0px; left: -10%; background-image: url('../new/ams-2.jpg') !important; background-position: left; background-repeat: no-repeat; background-size: contain; width: 100%; z-index: -2; height: 100%; background-attachment: fixed; } .mobilemethod::before{ background-attachment: local !important; } .amsmethod::after { position: absolute; top: 0px; content: ""; width: 100%; height: 100%; z-index: -1; background: -webkit-gradient(linear, left top, right top, from(#ffffff00), color-stop(50%, rgb(255, 255, 255)), to(rgb(255, 255, 255))); background: -o-linear-gradient(left, #ffffff00, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%); background: linear-gradient(90deg, #ffffff00, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%); left: 0px; } .amsmethod p { color: #000; } .challenge-point-waber img { margin-top: 5px; } .erpcustomer .mds-waber { padding: 20px 20px; min-height: 370px !important; } .erpexp .eslh-waber p { font-size: 20px !important; font-family: 'Raleway'; color: white !important; } .erpexp .eslh-waber:hover { background: RGBA(8, 35, 38, 1); border: 0px; background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 35, 38, 1)), color-stop(45%, rgba(0, 128, 128, 1)), to(rgba(255, 255, 255, 1))) !important; background: -o-linear-gradient(bottom, rgba(8, 35, 38, 1) 0%, rgba(0, 128, 128, 1) 45%, rgba(255, 255, 255, 1) 100%) !important; background: linear-gradient(0deg, rgba(8, 35, 38, 1) 0%, rgba(0, 128, 128, 1) 45%, rgba(255, 255, 255, 1) 100%) !important; } .erpexp .eslh-waber { gap: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; border: none !important; border-radius: 8px; margin-bottom: 20px; height: 100%; padding: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: RGBA(8, 35, 38, 1); /* background: linear-gradient(0deg, rgba(8, 35, 38, 1) 0%, rgba(0, 128, 128, 1) 45%, rgba(255, 255, 255, 1) 100%) !important; */ } .cusexp { background: #082326; } .cusexp .section-title h2 { width: 70%; margin: auto; color: #fff; } .cusexp .section-title p { width: 70%; margin: auto; color: #fff !important; } .stackimg .excelimg li { background: #fff; list-style: none; min-height: -webkit-max-content !important; min-height: -moz-max-content !important; min-height: max-content !important; border: 1px solid #fff !important; min-height: 300px !important; border-radius: 8px; } .excelimg .cs p { color: #000 !important; } .bgnone a { padding: 0px 0px !important; } .excelimg .Customer-Speak-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0px !important; } .excelimg .Customer-Speak-title img { height: 200px !important; width: auto; border: 1px solid white; background-color: white; border-radius: 8px; } .excelimg .Customer-Speak-title h4 { color: #000; margin-bottom: 15px; font-size: 20px; } .excelimg .exppara { width: 60%; } .excelimg ul { padding-left: 0px !important; } .excelimg p { color: #fff !important; } .erpabout h2 { width: 70% !important; margin: auto; } .erpabout p { width: 90% !important; margin: auto; } .collatab .nav-tabs { border-bottom: none !important; display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; margin-top: 20px; } .collatab .nav-tabs .nav-link { font-size: 17px; } .collatab .nav-tabs .nav-link.active::before { position: absolute; content: ''; bottom: 0px; left: 0px; height: 1px; width: -webkit-max-content; width: -moz-max-content; width: max-content; background: #008080; } .collatab .nav-tabs .nav-item.show .nav-link { color: #499a9a !important; border: none !important; border-bottom: 0px solid #fff !important; background-color: var(--bs-nav-tabs-link-active-bg); } .collatab .nav-tabs .nav-link.active { color: #499a9a !important; border: none !important; border-bottom: 0px solid #fff !important; background-color: var(--bs-nav-tabs-link-active-bg); } .collatab .nav-tabs .nav-link:focus, .collatab .nav-tabs .nav-link:hover { isolation: isolate; border-bottom: none !important; border-color: rgba(255, 255, 255, 0) !important; } .collatab .nav-link { padding: 0px 15px 5px 0px !important; font-size: 15.6px; margin-right: 20px; font-weight: 500; color: black; } .collatab .nav-tabs .nav-link { margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width)); border: none !important; border-top-left-radius: var(--bs-nav-tabs-border-radius); border-top-right-radius: var(--bs-nav-tabs-border-radius); } .collatab-content { margin: 30px 0px 0px 0px; background-color: #082326; border-radius: 8px; padding: 40px 30px; color: white; } .tab-con-title { margin-bottom: 20px; } .collatab-content ul li { margin-bottom: 10px; } .mey-fucher-tab-waber-content1 { padding-top: 40px; } .collatfilter .video-gallery-image a::after { display: none !important; } .collatfilter .video-gallery-image img { aspect-ratio: 1 / 0.8; -o-object-fit: contain !important; object-fit: contain !important; border-radius: 8px; height: 415px; margin-top: -1px; } .collatfilter .video-gallery-image .ser-btn a { padding: 0px 0px !important; background: transparent !important; } .collatfilter .video-gallery-image .ser-btn a:hover { padding: 0px 0px !important; background: transparent !important; } .collatfilter .video-gallery-image a::before { display: none; } .brofilter .filter-btn { padding: 7px 20px !important; } .brofilter .filter-controls { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-flow: wrap; flex-flow: wrap; gap: 5px !important; } .brofilter .filter-controls { padding: 10px; border-radius: 8px !important; margin-bottom: 30px; background-color: #f3f3f3 !important; width: 100%; } .mey-fucher-tab-waber-content1 h4 { color: #000; text-align: center; margin: 20px 0px 30px; font-weight: 600; font-size: 20px; } .collat .section-title h2 { width: 100% !important; font-size: 30px; color: #fff; } .testimonial-sliders11 .flip-card-inner { /* background: #fff; */ padding: 20px; /* min-height: 280px; */ -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .testimonial-sliders11 .flip-card-inner h3 { font-size: 20px; margin-bottom: 10px; line-height: 32px; } .testimonial-sliders11 .flip-card-inner .ser-btn1 a { color: #000 !important; } .testimonial-sliders11 .flip-card-inner h3 { color: #000 !important; height: auto; margin-bottom: 15px; line-height: 25px; } .testimonial-sliders11 .flip-card-inner h6 { color: #000 !important; height: 50px; font-weight: 600; margin-bottom: 15px; line-height: 25px; } .testimonial-sliders11 .flip-card-inner p { font-size: 16px; margin-bottom: 15px; font-weight: 400; color: #555; height: auto !important; font-family: Helvetica; line-height: 24px; } .testimonial-sliders11 .service-item-header { margin-bottom: 30px; } .testimonial-sliders11 .flip-card-inner a { font-weight: bold; text-decoration: none; color: #082326; font-family: "Radio Canada", sans-serif; font-size: 16px; font-weight: 400; } .testimonial-sliders11 .flip-card-inner:hover a { color: #fff !important; } .testimonial-sliders11 .service-item { /* border: 1px solid #e5e5e5; */ border-radius: 8px; background: #fff; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; margin-bottom: 0px !important; } .testimonial-sliders11 .active .ser-btn1 a { color: #fff !important; } .testimonial-sliders11 .service-item:hover { /* background: linear-gradient(180deg, rgba(0, 128, 128, 0) 0%, #082326 95%); */ background: -webkit-gradient(linear, left top, left bottom, from(#082326), to(#0c464ceb)) !important; background: -o-linear-gradient(top, #082326 0%, #0c464ceb 100%) !important; background: linear-gradient(180deg, #082326 0%, #0c464ceb 100%) !important; color: #fff; -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); -webkit-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; /* border: 1px solid transparent !important; */ } .testimonial-sliders11 .service-item:hover h3, .testimonial-sliders11 .service-item:hover h6, .testimonial-sliders11 .service-item:hover p, .testimonial-sliders11 .service-item:hover a { color: #fff !important; } .testimonial-sliders11 .testspace { -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; -o-transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; display: inline-block; } .testimonial-sliders11 .testspace.fade-out { opacity: 0; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } .testimonial-sliders11 .testspace.fade-in { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .testimonial-sliders11 .service-item:hover { border: none; } .testimonial-sliders11 .service-item { padding: 0px 0px; border: 1px solid #08232680; border-radius: 8px; } .testimonial-sliders11 .service-item .ser-btn1 a { color: #000; } .testimonial-sliders11 .service-item::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: transparent; opacity: 40%; } .testimonial-sliders11 .testspace { padding: 0px 15px; } .testimonial-sliders11 .service-item-header { position: relative; display: block; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; } .testimonial-sliders11 .service-card img { height: 100px; /* padding: 5px 5px; */ background: #fff; -webkit-box-shadow: 0px 0px 3px 3px rgb(213 222 223 / 54%); box-shadow: 0px 0px 3px 3px rgb(213 222 223 / 54%); border-radius: 60px; } .testimonial-sliders11 .service-item-header .icon-box img { max-width: 130px; } .testimonial-sliders11 .col-sm-4 { margin-bottom: 30px; } .testimonial-sliders11 .col-sm-6 { margin-bottom: 30px; } .card11 { margin-bottom: 20px; border-radius: 8px; background: #e6edec; border: 1px solid #e6edec; } .card11 img { height: 350px; border-radius: 8px; } .card11 .micfabric h6 { margin-bottom: 20px !important; color: #000; line-height: 24px; font-weight: 400; font-family: 'helvetica-neue-lt-pro'; } .card11 .micfabric p { padding: 8px 0px 8px; color: #000 !important; line-height: 24px; font-family: 'Helvetica'; font-weight: 400; } .card11 .micfabric h2 { margin-bottom: 10px !important; color: #082326 !important; line-height: 32px; font-size: 28px; font-family: 'Raleway'; font-weight: 600; } .card11 .ser-btn span { /* line-height: 24px !important; */ padding-right: 5px !important; } .testimonial-sliders11 .flip-card { height: auto !important; margin-bottom: 20px !important; } .testimonial-sliders11 .author-content { margin-top: 20px; } .leaderbtn span { color: #000; } .video-gallery-image img { aspect-ratio: 1 / 0.8; -o-object-fit: cover; object-fit: cover; border-radius: 8px; background: #e8e9e7 !important; } .video-gallery-image { background: transparent !important; border-radius: 8px; } .video-gallery-image h4 { padding: 15px 0px 10px; color: #000; font-weight: 400 !important; margin: 5px 0px; text-align: left; } .corvideosec .video-gallery-image h4 { padding: 15px 0px 10px; color: #000; font-weight: 600 !important; font-size:24px; line-height:32px; margin: 5px 0px; text-align: left; } .video-gallery-image p { padding: 0px 0px 15px; color: #000 !important; font-weight: 400 !important; } .video-gallery-image p b { font-weight: 400 !important; } .collatab .ser-btn { margin-top: 10px !important; padding: 0px 0px 0px; margin-bottom: 0px !important; } .collatab .ser-btn a { color: #000 !important; } .collatab .video-gallery-image { background: #008080 !important; border-radius: 8px; } @media (min-width:1500px) and (min-width:1950px) {} /* button{ padding: 12px 24px !important; } */ .section-title .helveticafont { font-family: 'Helvetica', 'Arial', sans-serif; font-weight: 400; line-height: 24px; font-size: 16px; } .our-testimonial .testidescription p { margin-top: 0px !important; margin-bottom: 0px !important; padding: 32px 0px !important; line-height: 24px; font-weight: 400; font-family: "helvetica-neue-lt-pro"; } .partner .ser-btn2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .our-testimonial .headingss .ser-btn2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /*.index-benefit .benefits-steps-content h3 {*/ /* font-family: 'Parkinsans';*/ /*}*/ .index-benefit .benefits-steps-content p { padding-right: 10px; font-family: 'Radio Canada'; font-weight: 300; } .mega-menu .ser-btn a { height: auto !important; } .mega-menu .ser-btn2 a { height: auto !important; } .footer-main .ser-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .header-social-links li a>i:hover { color: #008080; -webkit-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; } .footer-main a:hover { color: #008080; -webkit-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .projects .section-title p { font-size: 16px; line-height: 24px; } .projects .ser-btn { margin: 0px 0px !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .footer-copyright .places a { font-size: 16px !important; line-height: 24px; font-family: 'Radio Canada'; font-weight: 400; } .footer-main .ser-btn a:hover { color: #000; -webkit-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* Popup Overlay */ .video-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 999999; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: fadeIn 0.3s ease; animation: fadeIn 0.3s ease; } /* Fade-in animation */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Video Wrapper (so we can position close button relative to it) */ .video-popup .video-wrapper { position: relative; width: 80%; height: 80%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* Popup Video Frame */ .video-popup iframe { width: 100%; height: 100%; border: none; border-radius: 8px; z-index: 9999999; position: relative; -webkit-box-shadow: 0 0 25px rgba(255, 255, 255, 0.3); box-shadow: 0 0 25px rgba(255, 255, 255, 0.3); } /* Close Button inside video frame corner */ .video-popup .close-popup { position: absolute; top: 4%; right: 18%; background: transparent; color: #000; width: 50px; height: 50px; line-height: 38px; color: #fff; text-align: center; font-size: 30px; /* font-weight: bold; */ cursor: pointer; z-index: 10000000; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .video-popup .close-popup:hover { /* background: #ff4444; */ color: #f2f2f2; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } /* Prevent scroll when popup is open */ body.popup-open { overflow: hidden; } .video-popup iframe { width: 60% !important; height: 80% !important; } body.popup-open { overflow: hidden; /* 🚫 disable scroll */ } body.popup-open .main-header.is-sticky { position: relative !important; /* makes it non-sticky */ z-index: -1 !important; /* pushes it behind popup */ background: transparent !important; /* optional: hide bg */ } body.popup-open .main-header { position: relative !important; /* makes it non-sticky */ z-index: -1 !important; /* pushes it behind popup */ background: transparent !important; /* optional: hide bg */ } .topheader .input-group { z-index: 0; } .ourapp .icon-box img { margin-bottom: 24px; } .w-320 { width: 320px !important; } .parawidth p { width: 510px; margin: 24px 0px !important; } .hero-video-content1 p { margin: 32px 0px !important; } .plath2 p { margin: 24px 0px !important; } .empower .section-title { width: 682px; } .pd80 { padding: 80px 0px !important; } .mb0 { margin-bottom: 0px !important; } .customer .section-title { width: 508px; } .msdynamics h2 { margin-bottom: 32px; } .msdynamics p { margin: 16px 0px !important; } .partner .section-row .section-title { max-width: 100% !important; } .brin-main-waber-2 { position: relative; z-index: 1; padding: 90px 0px; background: #030406; overflow: hidden; } .brin-main-waber-2::after { position: absolute; width: 100%; height: 100%; content: ""; background: linear-gradient(90deg, #082326 0%, #082326 40%, #0304066e 100%); top: 0px; left: 0px; z-index: -1; } .brin-bg-video-waber { position: absolute; height: 75%; top: 50%; background-color: #52c3a8; right: -10%; transform: translateY(-50%); z-index: -2; } .brin-bg-video-waber video { height: 100%; mix-blend-mode: multiply; } .our-testimonial .section-row .testidescription { max-width: 100%; } .our-testimonial .section-row .headingss { max-width: 100%; } .successsec .service-item-body1 { background: #e6edec; border: 1px solid #e6edec; } .successsec p { color: #000; } .successsec .row>div:nth-child(1) .service-item-body1:hover { background-image: none !important; } .successsec .service-item-body1:hover { transform: translateY(0px) !important; box-shadow: none !important; } .successsec .service-item-body1:hover::before { opacity: 0 !important; } .successsec .service-item-body1:hover img { opacity: 1 !important; } .successsec .service-item-body1:hover p { color: #000; } .epicadv h3 { color: #082326 !important; } .epicadv .w80 h3 { width: 80% !important; } .kineticsec .challenge-point-waber { width: 100% !important; } .testimonial-btn-08 .testspace { padding: 0px 10px; } .merlinbenefit .why-6-waber h3 { position: relative; padding-left: 0px; } /*.merlinbenefit .why-6-waber h3::before {*/ /* font-family: 'bootstrap-icons';*/ /* content: '\f26a';*/ /* position: absolute;*/ /* left: 0;*/ /* top: 3px;*/ /* color: #fff;*/ /* font-size: 1.1rem;*/ /* transition: color 0.4s */ /*ease;*/ /*}*/ .merlinbenefit .bb-title { position: relative; padding-left: 0px; } /*.merlinbenefit .bb-title::before {*/ /* font-family: 'bootstrap-icons';*/ /* content: '\f26a';*/ /* position: absolute;*/ /* left: 0;*/ /* top: 2px;*/ /* color: #082326;*/ /* font-size: 1.1rem;*/ /* transition: color 0.4s */ /*ease;*/ /*}*/ .msadv .service-item-body1 { /* background-color: #20393b !important; */ /*background: #0039331A;*/ /* border: 1px solid #0039331A;*/ background: #e6edec !important; border: 1px solid #e6edec !important; } .tab-7-wabe ul { padding-left: 0px !important; } .coreoffer p { font-size: 16px !important; line-height: 24px !important; font-weight: 400; } .whysugar .testidescription { width: 80%; margin: auto; } .erpexcel .section-title h2 { color: #fff !important; } .erpexcel .section-title p { color: #fff !important; } .biadv .service-item-body1 p { color: #000; } .enter .casetitle { max-width: 802px !important; } .dataengg .builtsec .section-title p { margin: 16px 0px; } .dataengg .builtsec .section-title h2 { margin-bottom: 32px !important; } .amsbanner .container { position: relative; z-index: 9; } .serprovide .testimonial-btn1 { position: absolute; bottom: -20px !important; } .amsmethod .challenge-point-waber { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; } .socialcont .challenge-point-waber { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; } .amsmethod .paramb32 { margin: 32px 0px; } .amsmethod1 .benifit-title { margin-bottom: 32px; } .amsmethod1 .mstechsolutions .height600 { min-height: 480px !important; } .amsmethod1 .mstechsolutions .benifet-content-waber { margin: 0px 0px 20px 0px !important; } .amsmethod1 .benifet-content-waber { background: #e6edec; border: 1px solid #e6edec; } .testbtnposition { position: absolute; bottom: -15px !important; left: 42%; } .careerbanner .br-0 { gap: 32px !important; } .whysugar .MeRLIN-service { height: 390px !important; } .MeRLIN-service:hover path { stroke: #fff; } .MeRLIN-service svg { margin-bottom: 20px; } @media (min-width:900px) and (max-width: 1700px) { .main-menu .nav-menu-wrapper>ul { gap: 60px !important; } .navbar-expand-lg .navbar-collapse { gap: 60px !important; } .darp-1 { display: flex; gap: 5px; align-items: center; } .top-in li select { padding: 0px 0px 0px 0px !important; font-size: 14px; } .top-in { gap: 20px !important; } .font-increase-waber { gap: 20px !important; } } .leder-waber-hight { padding: 60px; min-height: 500px !important; } .leder-waber-hight .micfabric { padding: 0px !important; } .brine-waper-padding { padding: 90px 0px; } .brin-p-tag { font-family: Helvetica; font-weight: 400; font-style: Regular; font-size: 16px; leading-trim: NONE; line-height: 24px; letter-spacing: 0%; } .prine-title h2 { font-family: Raleway; font-weight: 600; width: 100% !important; font-style: SemiBold; font-size: 40px; leading-trim: NONE; line-height: 48px; letter-spacing: 0%; } .prine-title { flex-direction: column; display: flex; width: 698px; gap: 32px; } .prine-title h2 { font-family: Raleway; font-weight: 600; width: 560px; font-style: SemiBold; font-size: 40px; leading-trim: NONE; line-height: 48px; letter-spacing: 0%; } .testslide1 .service-item:hover ellipse { fill: #008080 !important; } .testslide1 .service-item:hover path { stroke: #fff !important; } .epicadv2 h2 { color: #fff; } .epicadv2 .service-item-body1 { background: rgb(32, 57, 59); border: none; } .epicadv2 .w80 h3 { width: 386px; font-size: 24px; line-height: 32px; font-weight: 400; margin-bottom: 10px; } .epicadv2 h3 { color: #fff !important; } .collateralssec { background: #082326 !important; padding: 70px 0px 30px; } .baner-img1 { position: absolute; right: -20%; top: -60%; width: 106%; height: 100%; content: ""; z-index: -2; } .success-main1 { padding: 170px 0px; } .success-main1 .section-title { margin-bottom: 0px; } .webinarleftimg::after { position: absolute; content: ""; z-index: -1; top: 0px; left: 0px; background: #082326; background: linear-gradient(90deg, rgba(8, 35, 38, 0) 1%, rgba(8, 35, 38, 1) 50%) !important; width: 100%; height: 100%; } .webinarleftimg .baner-img1 { position: absolute; left: 0% !important; top: -60%; width: 106%; height: 100%; content: ""; z-index: -2; } .webinarleftimg .baner-img2 { position: absolute; left: 0% !important; top: 0%; width: 65%; height: 100%; content: ""; z-index: -2; } .epic16 { font-weight: 500 } .digital2section .testidescription p { padding: 0px 0px 16px !important; } .digital2section .testidescription h2 { margin-bottom: 32px; } .digital2section .MeRLIN-service { height: 370px !important; text-align: left; } .digital2section { padding-bottom: 50px; } .digitalexp { max-width: 682px !important; } .digisolbtn a { padding: 0px 0px !important; } .epicsecslide .valueslide p { font-family: "Raleway"; font-size: 24px; line-height: 32px; font-weight: 600; } .epicsecslide .valueslide { height: 344px; width: 100%; padding: 24px !important; } .entersolser .enterslide h3 { height: 90px !important; margin-bottom: 32px; } .mds-section1 .section-title h2 { color: #000; } .mds-section1 .section-title p { color: #000; } .mds-section1 p { color: #000; } .mds-section1 .dynamics-advantage-waber p { color: #000; } .mds-section1 .dynamics-advantage-waber { margin-bottom: 10px; box-shadow: none !important; } .graybg { background: #f2f2f2; } .mstechsolutions .benifet-content-waber { background: #e6edec; border: 1px solid #e6edec; } .mstechapproach .valueslide p { font-family: "Raleway"; font-size: 24px; line-height: 32px; font-weight: 600; } .mstechapproach .valueslide { height: 344px; /*width: 300px;*/ padding: 24px !important; } .mobile-nav { display: none; } .desktop-nav { display: block; } @media (max-width: 991.98px) { /* --- Basic Layout Toggles --- */ .desktop-nav { display: none; } .mobile-nav { display: block; position: sticky; z-index: 9999; top: 0; } /* --- Mobile Header Bar (Top Bar) --- */ .mobile-header { background-color: #082326; padding: 15px 0; /*position: fixed;*/ top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 10px 14px 24px 0px #00000026; } .mobile-header .container { display: flex; justify-content: space-between; align-items: center; padding: 0 15px; } .mobile-logo img { height: 40px; } .hamburger-btn { background: none; border: none; cursor: pointer; } /* --- Slide-in Navigation Panel --- */ .mobile-nav-panel { position: fixed; top: 0; right: -100%; /* Start off-screen */ width: 280px; height: 100vh; background-color: #0a2d31; z-index: 1002; overflow-y: auto; padding-top: 60px; transition: left 0.3s ease-in-out; } .mobile-nav-panel.open { right: 0; /* Slide in */ } .close-btn { position: absolute; top: 15px; right: 20px; font-size: 30px; color: white; background: none; border: none; cursor: pointer; } /* --- Menu & Submenu Links --- */ .mobile-nav-panel ul { list-style: none; padding: 0; margin: 0; } .mobile-nav-panel li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav-panel .menu-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; } .mobile-nav-panel a { color: white; text-decoration: none; font-size: 16px; flex-grow: 1; } .submenu-toggle { color: white; /* font-size: 24px; */ font-weight: bold; } .submenu { display: none; background-color: rgba(0, 0, 0, 0.2); padding-left: 20px; } .submenu .submenu { padding-left: 0px; background-color: rgba(0, 0, 0, 0.3); } .submenu li:last-child { border-bottom: none; } .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1001; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .menu-overlay.open { opacity: 1; visibility: visible; } .submenu-card-item { border-bottom: none !important; padding: 15px 0 0 0; } .submenu-swiper { padding: 0 10px 0px 10px !important; } .submenu-swiper .service-item-body { /* background-color: red; */ /* padding: 20px; */ border-radius: 8px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; text-align: left; } .submenu-swiper .service-item-body h3 { font-size: 14px; color: white; } .submenu-swiper .service-item-body p { font-size: 15px; color: #f0f0f0; margin: 10px 0 20px 0; } .submenu-swiper .swiper-pagination { bottom: 0px !important; } .submenu-swiper .swiper-pagination-bullet { background-color: rgba(255, 255, 255, 0.5); } .submenu-swiper .swiper-pagination-bullet-active { background-color: #ffffff; } .submenu-toggle { cursor: pointer; padding: 10px; display: flex; align-items: center; justify-content: center; } .submenu-arrow { color: white; transition: transform 0.3s ease; } .submenu-toggle.active .submenu-arrow { transform: rotate(180deg); } .submenu li>a { display: inline-block; font-size: 14px; padding: 10px 20px; } .submenu-card-item .swiper-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; width: 100% !important; } .nave-bar-card-waber { position: relative; z-index: 1; padding: 15px; margin: 0px 10px; overflow: hidden; border-radius: 8px; height: 300px; } .nave-bar-card-content-waber p { height: auto !important; margin: 0px !important; } .nave-bar-card-content-waber .ser-btn1 a { padding: 0px !important; font-size: 14px; } .nave-bar-card-waber>img { position: absolute; width: 100%; top: 0px; object-fit: cover; left: 0px; z-index: -2; } .nave-bar-card-waber::after { content: ""; width: 100%; position: absolute; height: 100%; top: 0px; left: 0px; z-index: -1; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(0, 128, 128, .5) 40%, rgba(22, 128, 139, .98) 62%); } .nave-bar-card-content-waber { display: flex; flex-direction: column; gap: 16px; } .nave-bar-card-content-waber>div>span { display: inline-block; background-color: #ffffff66; padding: 3px 8px; line-height: 16px; border-radius: 8px; font-size: 12px; } .tag-logo { position: absolute; top: 10px; left: 10px; } .tag-logo img { width: 100px; } .search-box .search-full, .search-box .icon-close { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } /* Position the close icon. Adjust top/right values if needed. */ .search-box .icon-close { position: absolute; top: 0px; right: 10px; cursor: pointer; z-index: 1001; /* Make sure it's on top of the search bar */ display: none; /* Hide it completely by default */ } /* When the parent .search-box is active... */ .search-box.search-active .search-full, .search-box.search-active .icon-close { opacity: 1; visibility: visible; display: block; /* Show the elements */ pointer-events: auto; } /* Also, hide the search magnifying glass icon when the bar is open */ .search-box.search-active .btn-search { display: none; } /* Intha puthu class, search bar-a mobile header-ku keezha sariya kaatum */ .mobile-search-overlay { top: 72px !important; /* Unga mobile header height yevalo iruko, antha alavukku maathikonga */ } /* --- General Search Bar Styles (No changes needed if you added my previous code) --- */ .search-full { position: fixed; left: 0; width: 100%; background: #fff; z-index: 9999; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Visibility Control */ opacity: 0; visibility: hidden; height: 80px; /* Set a fixed height */ overflow: hidden; /* Hide content when not active */ transition: opacity 0.3s ease; } /* When the search is active, show the overlay */ .search-box.search-active .search-full { opacity: 1; visibility: visible; } } .mobiletesti5 .testspace{ display:none; } .mobileonly { display: none; } .mobileonly .testspace{ display:none; } .pt50{ padding: 50px 0px; } .epicoroffer .testslide1 .swiper-slide-active .service-item { border: 1px solid #ffffff; } .epicoroffer .testslide1 .swiper-slide:hover .service-item { border: 1px solid transparent; } @media (max-width: 410px) { .digitalmobilesec .MeRLIN-service h3 { line-height: 28px; font-weight: 600; font-size: 18px !important; }.MeRLIN-service { padding: 15px 12px !important; }.digital2section .MeRLIN-service { height: 420px !important; text-align: left; }.MeRLIN-service h3 { margin-bottom: 15px; } .mobiledigi .buildsec { position: relative; margin-bottom: 15px; } .top-in li select { padding: 0px 0px 0px 0px !important; font-size: 13px !important; } .top-icon-gap svg{ height: 20px; width: 20px; } .entersolser .enterslide h3 { height: 90px !important; margin-bottom: 15px !important; }.industries .testimonial-btn1 { position: absolute; bottom: -10px !important; left: 20% !important; }.imgpos1 img { height: auto !important; }.imgpos2 img { height: auto !important; }.imgpos3 img { height: auto !important; }.testimonial-slider1 .service-item-body .desc { height: 340px !important; } .thepathindex .service-item-body p { font-size: 14px; height: 310px !important; } .countingss .success-counter-box1 h2 { height: 100px; }.indexwhatdo .testimonial-slider .service-item{ height:470px !important; } .indexwhatdo .testimonial-slider .flip-card-inner p { height: 155px !important; }.entersolser .testimonial-slider .service-item{ height:480px !important; } .enterintsec .mobileonly { position: absolute; bottom: 15px !important; left: 23% !important; }.digitalmobilesec .testimonial-btn{ margin-top:20px !important; } .mobileanimation .swiper-slide.swiper-slide-active .service-item { background: linear-gradient(180deg, #082326 0%, rgba(0, 128, 128, 0.8) 50%, #082326 100%) !important; color: #fff !important; transition: 0.3s ease; border:none !important; }.testimonial-slider1 .service-item-body .desc { min-height:320px !important; } .msdtestmobile .testimonial-btn1 { position: absolute; bottom: -20px !important; }.testimonial-slider1 .service-item-body p { color: #fff !important; font-size: 13px; }.additional1 .mobileimgadd{ height:650px !important; } .additional1 .mobileimgadd img { position: absolute !important; right: 0px; bottom: -50px !important; height: 300px !important; } .parentban img { height: 210px !important; width: auto; } .swiper-slide-active .icns { stroke: #ffffff !important; }.sociaimp1::after { position: absolute !important; top: 0px; content: ""; width: 100%; height: 100%; z-index: -1; background: linear-gradient(0deg, rgb(255, 255, 255, .1) 10%, rgb(255, 255, 255) 14%, rgb(255, 255, 255, .5) 73%) !important; left: 0px; } .mobileresults::after { background: linear-gradient(180deg, #ffffff, rgb(255 255 255 / 100%) 67%, rgb(0 0 0 / 0%) 75%) !important; }.aboutvaluemobile .valueslide { height: auto !important; }.webhero::after { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 40%, rgba(8, 35, 38, 0) 88%) !important; width: 100%; height: 100%; } .additional1 img { height: 200px !important; }.advantage .service-item-body1 { padding: 10px !important; }.corussecond .micfabric { padding: 15px 10px; } .mobileindustriems .industries .testimonial-btn1 { position: absolute; bottom: -10px !important; left: 20% !important; } .webhero1::after { background: linear-gradient(180deg, rgba(8, 35, 38, 1) 65%, rgba(8, 35, 38, 0) 88%) !important; width: 100%; height: 100%; }.success-company img { width: auto; height: 70px !important; }.marlin-baner::after { content: ""; background: linear-gradient(180deg, rgba(8, 35, 38, 1) 68%, rgb(8 35 38) 65%, rgb(8 35 38 / 0%) 72%, rgba(255, 255, 255, 0) 100%) !important; }.mobileanimation .service-item-body p { height: 180px !important; } .epiccomp .flip-card-inner p { height: 140px !important; }.epiccomp .flip-card-inner h3 { height: 50px !important; }.epiccomp .flip-card { height: 385px !important; } .testimonial-slider1 .service-item-body .desc { height: 450px !important; } .trsutedtesti .testimonial-slider1 .testimonial-btn1 { position: absolute; bottom: -10px !important; left: 20% !important; } .mobilecarwabe::after { background: #082326; background: linear-gradient(180deg, rgba(8, 35, 38, 1) 79%, rgba(255, 255, 255, 0) 85%) !important; } .mobilefeatures .mds-waber { min-height: 320px !important; }.erpcustomer .mds-waber { padding: 20px 20px; min-height: 300px !important; } } @media (min-width: 769px) and (max-width:1299px){ .main-menu .nav-menu-wrapper > ul { gap: 40px !important; }.testimonial-slider .flip-card-inner h3 { height: 60px; }.testimonial-slider .flip-card-inner p { height: 135px; }.testimonial-slider .service-item{ height: 460px; }.brainsec .benefits-steps-content { width: 100%; }.mega-menu-content .tab-buttons { /* border-right: 1px solid #545454; */ padding-right: 25px; width: 275px; } } .collatpage .filter-controls { padding: 10px; border-radius: 60px; display: flex; margin-bottom: 30px; background-color: #e7e9ea; width: 75%; } .collatpage .filter-controls button{ color: #082326; line-height: 24px; font-size: 16px; padding: 12px 24px; } .collatpage .nav-tabs .nav-link { border-radius: 60px; } .collatpage .nav-tabs .nav-link.active { border-radius: 60px; background: #082326; border: 1px solid #082326; color: #fff; }.newcollat h2{ margin-bottom: 32px; } .newcollat .mey-fucher-tab-waber-content1 { padding-top: 0px; } .newcollat .mey-fucher-tab-waber-content1 h4 { color: #000; text-align: left; margin: 32px 0px 32px; font-weight: 600; font-size: 24px; line-height: 32px; padding: 0px 0px; } .newcollat .mey-fucher-tab-waber-content1 .video-gallery-image h4 { margin: 16px 0px 16px; } .newcollat .filter-controls { margin-bottom: 0px; } .newcollat form{ margin-top: 32px; }.newcollat .video-gallery-image { height: auto !important; background: transparent !important; } .newcollat a{ cursor: pointer; } .pt40{ padding-top: 60px !important; } .webinarimg img{ position: absolute; right: 0px; top: 0px; /* height: 760px; */ } .webhero::after { position: absolute; content: ""; z-index: -1; top: 0px; left: 0px; background: #082326; background: linear-gradient(90deg, rgba(8, 35, 38, 1) 47%, rgba(8, 35, 38, 0) 100%); width: 100%; height: 100%; } .webinarimg1 img{ position: absolute; right: 0px; top: 20%; width: 70%; /* height: 760px; */ } .msadvmobile .w80 h3{ width:75%; } .msadvmobile h3{ color:#082326 !important; } /* Default state for the arrow */ .arrow-icon { transition: transform 0.3s ease; /* Smooth animation */ } /* Class to add when 'Read Less' is active */ .rotate-180 { transform: rotate(180deg); } .amslide .valueslide { min-height:330px; } .amslide .valueslide p{ font-size:24px; line-height:32px; } .aboutvaluemobile .valueslide{ height:485px; } .aimlcase h3 { height: 50px !important; } .aimlcase .oa-para-waber { gap: 10px; } .epictechnology .testimonial-slider .service-item { height: 380px; }.epictechnology .service-item-body p { height: 130px !important; }.epictechnology .oa-para-waber { gap: 10px; }.epictechnology .testimonial-slider .flip-card-inner .ser-btn { margin-top: 0px; margin-bottom: 0px; } .ser-btn .content-box a { margin-top: 0px; margin-bottom:16px } .mobileapprochslide .microinner-icon svg{ height: 50px; width: auto; padding:2px; } .testimonial-slider .service-item:hover .icns2 { fill: #fff !important; transition: fill 0.3s ease; } .epicicn svg{ height:100px; width:auto; } .epicicn{ display:flex; align-items:start; } .epicicn1 svg{ height:90px; width:auto; } .epicicn1{ display:flex; align-items:start; } .mobilegolf::before { background-image: url(../new/am-g.jpg) !important; } .mobileself1 .mobileux img{ position:relative; z-index:-1; width: 65%; height: 100%; object-fit: cover; } .mobileself1 .mobileux::before { background: linear-gradient(90deg, rgb(8 33 36 / 0%) 10%, rgb(8 35 38 / 0%) 44%, rgba(255, 255, 255, .99) 50%) !important; } .mobilecommimg::before { background-image: url(../images/aboutretail.jpg) !important; width: 60%; } .mobilecommimg::after { background: linear-gradient(90deg, #ffffff, rgb(255 255 255 / 100%) 42%, rgb(0 0 0 / 0%) 65%); } .mobilemsimg::before { background-image: url(../new/ms-7.jpg) !important; } .collatmodal .contect-enq-waber { padding: 0px 15px !important; } .collatmodal .modal-header h4{ color: #000; } .collatmodal .modal-dialog { max-width: 600px; /* Important */ top:20% } .dataengg .mds-waber2:hover .swiper-slide-active{ background:linear-gradient(180deg, rgba(0, 128, 128, 0.534) 35%, #082326 100%) !important; border:inherit !important; } .contect-call li{ list-style-type:none; padding-right:16px; } .contect-call li i{ font-size:35px; } .approachmblsec .icon-box svg{ margin-bottom:15px; } .digialserpage .service-item-body img{ height: 420px; margin-bottom: -5px; } .digiupgradesec .MeRLIN-service{ height: 450px !important; } .digitalservice .MeRLIN-service{ height:350px !important; } .oursolutionsec .service-item-body ul li{ list-style-type: none; padding: 8px 0px; color: #000; } .oursolutionsec .service-item-body ul{ padding: 30px 0px; margin-bottom: 0px !important; } .oursolutionsec .service-item-body{ padding: 24px; }.oursolutionsec .service-item h3{ padding: 0px 0px; } .oursolutionsec .service-item .ser-btn{ margin-bottom: 0px !important; } .oursolutionsec .service-item .ser-btn a{ height: auto !important; } .oursolutionsec .service-item img{ height: 20px; } .oursol .section-row{ margin-bottom: 0px; } .oursolself .challenge-point-waber img{ height: 60px; } .oursolutionsec .service-item h3{ width:80% } .ptd50{ padding:50px 0px !important } .bluebg1 { background: #082326; } .webvideo .video-gallery-image img{ height: 100%; width: 100%; } .equitywhy .matters-content-waber img{ height:80px !important; } @media (max-width: 768px) { .digialserpage .digiexperience .firstmobile:first-child { margin-bottom: 0px !important; }.pdb0{ padding-bottom:0px !important; }.advantage .service-item-body1 { margin-bottom: 0px !important; } .cuccess-story-waber { display:block !important; } } .cuccess-story-waber { padding:0px 0px !important; } .cuccess-story-waber .flex2{ padding: 20px 40px; width:70%; } .cuccess-story-waber .flex1 img{ height:350px; width:100%; margin:auto; text-align:center; object-fit: cover; } .cuccess-story-waber .flex1{ width:30%; /*display: flex;*/ } .cuccess-story-waber .ser-btn{ text-align:right; } .corussecond .card-content figure{ text-align:center; } .epiccompanion h2{ margin-bottom:32px; } .ric-slider-img img{ height:400px; width:100%; object-fit:cover; } .accordion-item:first-of-type>.accordion-header .accordion-button { border-top-left-radius: 8px; border-top-right-radius: 8px; } .epictechnology .testimonial-slider .flip-card-inner h3 { height: auto; } .epiccomp .service-card img{ height:75px; } .merlinicon .MeRLIN-service svg{ height:75px; } .merlinicon .MeRLIN-service:hover path { fill: #fff; } .merlinicon .MeRLIN-service:hover .icns { stroke: #fff !important; } .merlinicon .MeRLIN-service { height: 450px; } /* FINAL OVERRIDE: Hide all OwlCarousel navigation arrows for skew carousels */ .skew-carousel .owl-nav, .skew-carousel1 .owl-nav, .owl-carousel.skew-carousel .owl-nav, .owl-carousel.skew-carousel1 .owl-nav { display: none !important; } .skew-carousel .owl-nav button, .skew-carousel1 .owl-nav button, .skew-carousel .owl-prev, .skew-carousel .owl-next, .skew-carousel1 .owl-prev, .skew-carousel1 .owl-next { display: none !important; visibility: hidden !important; opacity: 0 !important; }