/* ============================================= Brand Colors & CSS Custom Properties ============================================= */ :root { /* Brand colors from logo */ --td-red: #E74C3C; --td-orange: #F39C12; --td-yellow: #F1C40F; --td-green: #4CB849; --td-green-dark: #399837; --td-blue: #2980B9; --td-dark: #1A1A2E; /* Functional colors */ --td-primary: var(--td-blue); --td-secondary: var(--td-green); --td-accent: var(--td-orange); --td-text: #333333; --td-text-light: #595959; --td-bg-light: #F8F9FA; --td-bg-dark: var(--td-dark); --td-border: #E0E0E0; /* Header */ --header-bg: #FFFFFF; --header-text: var(--td-dark); --header-height: 70px; --header-top-bar-bg: var(--td-dark); --header-top-bar-text: #FFFFFF; /* Footer */ --footer-bg: var(--td-dark); --footer-text: #CCCCCC; --footer-heading: #FFFFFF; --footer-link: #AAAAAA; --footer-link-hover: var(--td-green); --footer-border: rgba(255,255,255,0.1); } * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box } aside, footer, header, nav, section { display: inline-block } body { font-size: 18px; color: #4a4a4a; background: #fff; overflow-x: hidden; padding: 0; overflow-x: hidden; font-weight: 400; line-height: 1.3; font-family: 'DM Sans', 'Inter', sans-serif; } body, html { height: 100%; margin: 0; padding: 0px; } h1, h2, h3, h4, h5, h6 { line-height: normal; margin: 0 0 15px 0; font-weight: 700; color: #090f1e; } h1 { font-size: 37px } h2 { font-size: 26px } h3 { font-size: 22px } h3 { font-size: 20px } h5 { font-size: 16px } label { font-weight: 400; font-size: 14px } img { border: 0; max-width: 100%; height: auto } p { margin: 0 0 20px 0; line-height: 1.5; color: #4a4a4a; font-weight: 400 } b, strong { font-weight: 500 } a { color: #333; cursor: pointer; text-decoration: none } a:hover { color: #000 } .chosen-results li, .floating_label label, .form_control, .icon, .icons:before, .nav-tabs>li>a:after, .site_menu ul li a:after, .transition, .transitions, .transitions *, a, button, input, input[type=reset], input[type=submit], label, label:after, label:before, select, textarea { -moz-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; -webkit-transition: all .25s ease } .btn .fa, a .fa, button .fa { -moz-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease; -webkit-transition: all 0s ease } a:focus, button:focus, input:focus, input[type=button], input[type=reset]:focus, input[type=submit]:focus, select:focus, textarea:focus { outline: 0 } button, input[type=reset], input[type=submit] { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; outline: 0 } .form_control, button, input, input[type=reset], input[type=submit], select, textarea { font-size: 14px; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { display: none } ul.reset { margin: 0; padding: 0; list-style: none } .banner { position: relative; padding: 200px 0 80px 0; background: #04050a url(../images/home/td-banner.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; display: flex; align-items: center; min-height: 100vh; overflow: hidden; } .page_banner { position: relative; padding: 210px 0 170px 0; background-image: url(../images/home/td-banner.jpg); background-size: cover; display: inline; width: 100%; background-repeat: no-repeat; background-position: center; } .overlay_blue:before { content: ''; } .page_banner h1 { font-weight: 500 } .banner .btn { font-weight: 700 } .btn { display: inline-block; text-align: center; padding: 0 25px 0 25px; background: #4bb749; min-width: 100px; text-decoration: none; color: #fff; font-weight: 400; border: 0; cursor: pointer; border-radius: 4px; height: 44px; line-height: 44px; font-size: 18px; font-weight: 700; text-transform: uppercase; font-family: inherit; } .btn:hover { background: #2d952c; color: #fff; text-decoration: none; box-shadow: 0 0 0 5px rgb(66 163 70 / 27%); } .btn:focus { color: #fff; outline-offset: 0; outline: 0; outline: 0; border: 0 } .btn.shadow { box-shadow: 0 4px 5px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .2); -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .2) } .btn.line { border: 1px solid #fff; background: 0 0 } .btn.line:hover { background: #fff; border-color: #fff; color: #333; box-shadow: 0 0 0 4px rgba(255, 255, 255, .3); -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, .3) } .btn.grey { background: #20303a; color: #fff } .btn.grey:focus, .btn.grey:hover { background: #349533; color: #fff; box-shadow: 0 0 0 4px rgba(53, 70, 80, .3); -webkit-box-shadow: 0 0 0 5px rgba(53, 70, 80, .3) } .btn.green { background: #4cb849; color: #fff } .btn.green:focus, .btn.green:hover { background: #399837; color: #fff; box-shadow: 0 0 0 4px rgba(70, 181, 68, .3); -webkit-box-shadow: 0 0 0 5px rgba(70, 181, 68, .3) } .btn .fa { margin-right: 5px; position: relative; top: 1px } .btn.full { width: 100% } .clear { clear: both; float: left; width: 100% } .form_group, .full_row { float: left; width: 100% } .container { max-width: 1300px; margin: 0 auto; padding: 0 15px; width: 100% } .container.md { max-width: 1100px } .md { max-width: 940px; margin-left: auto; margin-right: auto } .relative { position: relative; z-index: 99 } section { float: left; width: 100%; padding: 80px 0; position: relative } section.grey { background: #eee } section.grey1 { background: #efefef } section.blue { background: #4c4c4c } section.green { background: #4cb849 } section.dark { background: #2a2a2a } .hide { display: none } [class^=col_] { float: left; padding: 0 15px } .row { margin: 0 -15px } .col_2 { width: 16.6% } .col_3 { width: 25% } .col_4 { width: 33.3% } .col_5 { width: 40% } .col_6 { width: 50% } .col_7 { width: 60% } .col_8 { width: 65% } .pull_left { float: left } .pull_right { float: right } .form_group { margin-bottom: 15px; position: relative } .form_control { height: 44px; padding: 0 10px; line-height: 44px; border-radius: 0; border: 0; width: 100%; color: #090f1e; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; border: 0; border-radius: 4px; font-size: 18px; font-weight: 400; background: #fff; position: relative; z-index: 9; font-family: inherit; } textarea.form_control { height: 100px; line-height: normal; width: 100%; white-space: normal; overflow: auto; padding: 10px; font-size: 18px } .text-center { text-align: center } .text-left { text-align: left } .text-right { text-align: right } .center .col_6 { float: none; width: 50%; } .float_form .form_group { margin-bottom: 25px } .float_form label { float: left; width: 100%; position: relative; color: #666 } .float_form label .form_control { border-bottom: 1px solid #ccc; border-radius: 0; padding: 0; height: 40px; line-height: 40px; padding-left: 35px; color: #333 } .float_form label i { position: absolute; left: 0; line-height: 41px; text-align: center; bottom: 0; width: 25px; color: #333; z-index: 10 } .float_form label i.fa-mobile { font-size: 21px; display: none; } label.error { font-weight: 500; display: inline-block; text-align: right; font-size: 13px; color: red; width: 100%; position: absolute; z-index: 11; left: 0; padding: 0 20px; bottom: -17px; } .boxes .box.android.greyfont a, ul.boxes .box.android.greyfont h3 { color: #555 } .boxes .box.android.greyfont h3:after { background-color: #555 } .boxes .box.android.bluefont h3:after { background-color: #05a5d1 } table.xdebug-error.xe-notice { display: none } .site_header { animation: none !important; position: fixed; padding: 20px 0; left: 0; right: 0; width: 100%; z-index: 9999; float: left; top: 0 } .site_header.fixed { box-shadow: 0 0 8px rgba(0, 0, 0, .25); background: #fff; height: 70px; padding: 15px 0 } .site_header.fixed .top_info { margin-top: -60px } .site_logo img { object-fit: cover } .stickyactive { background-color: rgb(255 255 255 / 80%); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%); backdrop-filter: blur(100px); } #header.stickyactive a { color: #000; transition: none } .sticky-logo { object-fit: cover } .logo-sticky { object-fit: cover } .sticky-logo { opacity: 0 } .stickyactive .logo-sticky { display: none; opacity: 0; transition: all ease 2s } .stickyactive .sticky-logo { opacity: 1; transition: all ease .2s } .stickyactive .site_logo { margin-top: 0 } .stickyactive ul.reset.top_info { display: none } .stickyactive .site_menu { margin-top: 5px } #header .navbar-default .nav>li>a { padding: 10px 5px; color: #fff; margin-top: 8px } .stickyactive .collapse .top_info a { color: #000 } #header.stickyactive .navbar-default .nav>li>a { padding: 10px 5px; color: #000 } .top_info { text-align: right; font-size: 15px; transition: all .3s ease; float: left; width: 100%; padding-right: 180px } .top_info li { display: inline-block; margin-left: 20px } .top_info a { display: inline-block; line-height: 26px; margin-left: 20px; color: #fff; text-decoration: none; opacity: 200 } .top_info a:hover { color: #fff; opacity: 1 } .top_info .contact .fa { font-size: 16px; float: left; line-height: 26px; margin-right: 7px } .top_info .contact .fa-envelope-o { font-size: 14px } .top_info .contact .fa-skype { font-size: 15px } .site_logo { float: left; margin-top: -10px; width: 225px; height: 46px } #sidebar .close, .site_logo .toggle { height: 40px; line-height: 40px; text-align: center } .site_logo .toggle { display: none; width: 40px; color: #fff; position: absolute; top: 50%; right: 20px; margin-top: -20px } .site_logo .toggle .fi { font-size: 28px } #sidebar { max-width: 400px; width: 100%; background: #fff } #sidebar .close.amp-sidebar-toggle { width: 35px; display: inline-block; float: right; position: absolute; top: 16px; right: 10px; background: #a7a7a7; border-radius: 50%; height: 35px; color: #fff; line-height: 35px; cursor: pointer; } #sidebar .close .fi { font-size: 14px; line-height: inherit; } #sidebar ul { margin-bottom: 80px; float: left; width: 100% } #sidebar ul ul { margin-bottom: 0; display: none; } #sidebar .open, #sidebar .open>ul { display: inline-block; } #sidebar ul li { float: left; width: 100%; line-height: 0; margin: 1px 0 } #sidebar h3, #sidebar ul a { font-size: 18px; position: relative; line-height: 50px; letter-spacing: normal; font-weight: 500; display: block; padding: 0 20px; color: #090f1e; background: 0 0; border: 0; cursor: pointer; } #sidebar h3 { margin: 0px; } #sidebar .services, #sidebar ul ul a { background: #f0f0f0 } #sidebar ul ul a, #sidebar ul ul h3 { line-height: normal; padding: 12px 15px 12px 45px; font-size: 16px; font-weight: normal; } #sidebar ul ul li { margin: 0 } #sidebar ul ul li:last-child a { padding-bottom: 15px } #sidebar ul .fa { position: absolute; left: 10px; line-height: 20px; margin-top: -10px; top: 50%; font-size: 24px; color: #4fb84b; } #sidebar ul .fa-smile-o { font-size: 18px } #sidebar ul a span { display: block; margin-top: 3px; font-weight: 400; font-size: 13px; color: #202020 } #sidebar ul a span.icon_round, #sidebar ul a img { position: absolute; left: 0; top: 0; transform: scale(0.7); background-color: inherit; margin: 0px; } #sidebar ul a img { transform: scale(0.5); top: -8px; left: -3px; } #sidebar section { padding: 0 } #sidebar h3:after { content: "\f107"; font-family: FontAwesome; position: absolute; line-height: 30px; right: 20px; top: 50%; margin-top: -15px; font-size: 18px; color: #090f1e } #sidebar h3.open-icon:after { content: "\f106" } #sidebar .services { padding: 0px; display: none; width: 100% } #sidebar .services.open { display: inline-block; } #sidebar .services a { padding: 12px 15px 12px 45px; font-weight: normal; font-size: 16px; } #sidebar .services ul li:first-child a { padding-top: 8px } #sidebar .services ul li:last-child a { padding-bottom: 8px } .site_menu { float: right; margin-top: 20px; transition: all .3s ease; font-size: 17px; } .site_menu li { float: left; margin-left: 30px; position: relative } .site_menu ul li a { display: block; line-height: 36px; font-weight: 600; border-radius: 4px; font-size: 18px; padding: 0 0; color: #fff; text-decoration: none; position: relative; } .site_menu ul li a.active { padding: 0 15px; background: rgba(253, 253, 253, .15) } .site_menu ul li a .fa { margin: 0 0 0 3px } .site_menu ul li a:hover { opacity: .6 } .site_menu .sub_menu { position: absolute; left: 50%; margin-left: -140px; top: 100%; width: 280px; z-index: -99; padding-top: 15px; display: none; transition: all .3s ease; z-index: 99 } .site_menu ul li:hover .sub_menu { display: block } .fixed .site_menu .sub_menu:before { content: ""; position: absolute; left: 0; top: -5px; height: 5px; width: 100%; background: #fff } .site_menu ul ul { list-style: none; position: relative; margin: 0; float: left; width: 100%; border-radius: 4px } .site_menu ul ul:before { left: 50%; content: ""; border: 8px solid transparent; border-bottom-color: #fff; font-size: 0; line-height: 0; display: inline-block; top: -16px; margin-left: -8px; position: absolute; background-color: transparent } .site_menu ul ul a:after { display: none } .site_menu ul ul li { margin: 0; width: 100% } .site_menu ul ul a { color: #202020; text-transform: none; padding: 10px 15px; line-height: normal; border-radius: 0 } .site_menu ul ul a:hover { background: #e0e1e4; color: #000; opacity: 1 } .sub_menu .sublink { display: none } .site_menu .arrow:after { content: "\f107"; font-family: FontAwesome; margin-left: 6px; font-size: 13px } .site_menu ul.icon li a { font-size: 15px; padding-left: 50px; position: relative } .site_header.active { background-color: #fff } .site_menu ul.icon li img { position: absolute; left: 13px; width: 24px; height: 24px; line-height: 24px; font-size: 16px; top: 10px; color: #4cb849; margin-left: 0; text-align: center } .site_menu ul.icon .fa { position: absolute; left: 13px; width: 24px; height: 24px; line-height: 24px; font-size: 16px; top: 17px; color: #4cb849; margin-left: 0; text-align: center } .site_menu ul.icon li a span { text-transform: capitalize; display: block; color: #505050; font-size: 13px; padding-top: 3px; font-weight: 400 } .site_menu ul.icon li a:hover span { color: #333 } .site_menu ul.icon .fa-smile-o { font-size: 20px } .site_menu .custom { position: static } .site_menu .custom .sub_menu { width: 100%; margin: 0; left: auto; right: 0; top: 82px; } .stickyactive .site_menu .custom .sub_menu { top: 45px; } .stickyactive .site_menu .custom .sub_menu section { } .site_menu .custom .sub_menu section { position: static; padding: 0px; } .site_menu .custom ul.last { width: 28% } .site_menu .custom ul li a { background: 0 0; color: #000; padding: 7px 0 7px 18px; font-weight: 400 } .site_menu .custom ul li a:hover { color: #4cb849 } .site_menu .custom ul li.head a { color: #333; font-size: 16px; text-transform: uppercase; padding-left: 10px; margin-bottom: 10px } .site_menu .custom ul li.head a:before { display: none } .site_menu .custom ul li.head a:after { height: 2px; content: ""; width: 50px; background: #aece4e; position: absolute; left: 10px; bottom: 0; display: block } .site_menu .custom ul li a:before { height: 100%; content: "\f105"; position: absolute; left: 5px; top: 50%; margin-top: -7px; line-height: 14px; font-size: 12px; font-family: FontAwesome } .site_menu .custom ul:before { display: none } .site_menu .sub_menu_list { background: #fff; box-shadow: 0 2px 7px rgba(0, 0, 0, .2); float: left; width: 100%; border-radius: 4px; padding: 0 } .site_menu .sub_menu_list_ser { background: #fff; box-shadow: 0 2px 7px rgba(0, 0, 0, .2); float: left; width: 100%; border-radius: 4px; padding: 0 } .site_menu .sub_menu_list:before { left: 38%; content: ""; border: 8px solid transparent; border-bottom-color: #f3f3f3; font-size: 0; line-height: 0; display: inline-block; top: -1px; margin-left: 28px; position: absolute; background-color: transparent } .site_menu .sub_menu_list_ser:before { left: 10%; content: ""; border: 8px solid transparent; border-bottom-color: #f3f3f3; font-size: 0; line-height: 0; display: inline-block; top: -1px; margin-left: 28px; position: absolute; background-color: transparent } .site_menu h3 { font-size: 16px; font-weight: 500; margin-bottom: 10px } .site_menu h3 .fa { display: inline-block; margin-right: 3px; width: 34px; line-height: 34px; text-align: center; border-radius: 100px; background: #4cb849; color: #fff } .site_menu h3 .fa-mobile { font-size: 21px } .site_menu .custom .center { background: #f3f3f3; border-radius: 0 } .strech-img img { object-fit: contain } body section.Proactive { background: #eff3ff; } .Proactivebtn h3 { font-size: 26px; font-weight: 600; font-family: inherit; } .Proactivebtn { justify-content: center; align-items: center; display: inline-block; width: 100%; text-align: center; height: auto; padding: 40px 0 0px } button.btnproactive { border: none; margin-left: 12px; font-size: 18px; padding: 10px 30px; text-transform: capitalize; cursor: pointer; transition: all .3s; position: relative; font-family: inherit; background: #fff; } button.btnproactive:before { content: ""; position: absolute; width: 24px; height: 24px; top: -5px; left: -4px; border-top: 3px solid #399837; border-left: 3px solid #399837; transition: all .25s } button.btnproactive:hover:after, button.btnproactive:hover:before { width: 103%; height: 115% } button.btnproactive:after { content: ""; position: absolute; width: 24px; height: 24px; bottom: -5px; right: -5px; border-bottom: 3px solid #399837; border-right: 3px solid #399837; transition: all .3s } @media (min-width:1600px) { .site_header .container { max-width: 95%; position: relative; } } @media screen and (-webkit-min-device-pixel-ratio:0) { .site_menu .sub_menu { -webkit-transform: scale(0); -webkit-transform-origin: 50% 0; -webkit-transition: 350ms; -moz-transition: 350ms; -o-transition: 350ms; transition: 350ms; max-height: 0; display: block } .site_menu ul li:hover .sub_menu { max-height: 1000px; -webkit-transform: scale(1) } } .top_info .contact .fa-skype.onscrol { display: none } .site_header.active .top_info .contact .fa-skype.onscrol { display: block } .site_header.active .top_info a img { display: none } .site_header.active a.btn.line.head-btn { background: #399837; color: #fff } .learn_about { text-align: center } .read_more_wrapper a span:nth-child(1) { position: absolute; top: 0; right: 0; width: 100%; height: 2px; background: linear-gradient(to right, #f7590a, #399837); animation: animate1 2s linear infinite } @keyframes animate1 { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } } .read_more_wrapper a span:nth-child(2) { position: absolute; top: 0; right: 0; height: 100%; width: 2px; background: linear-gradient(to bottom, #14fdf2, #399837); animation: animate2 2s linear infinite; animation-delay: 1s } @keyframes animate2 { 0% { transform: translateY(-100%) } 100% { transform: translateY(100%) } } .read_more_wrapper a span:nth-child(3) { position: absolute; bottom: 0; right: 0; width: 100%; height: 2px; background: linear-gradient(to left, #8c3bde, #399837); animation: animate3 2s linear infinite } @keyframes animate3 { 0% { transform: translateX(100%) } 100% { transform: translateX(-100%) } } .read_more_wrapper a span:nth-child(4) { position: absolute; top: 0; left: 0; height: 100%; width: 2px; background: linear-gradient(to top, #f81212, #399837); animation: animate4 2s linear infinite; animation-delay: 1s } @keyframes animate4 { 0% { transform: translateY(100%) } 100% { transform: translateY(-100%) } } #header.stickyactive .read_more_wrapper a { color: #399837; font-weight: 800 } .stickyactive .btn.head-btn:focus, .stickyactive .btn.head-btn:hover { box-shadow: 0 0 0 4px rgb(70 181 68 / 30%); background-color: #399837 } .stickyactive .site_menu ul.reset li a.btn.line.head-btn { color: #fff !important; background: #4bb749; border-color: #4bb749 } div#company { display: inline-block !important } div#services { display: inline-block !important } div#industries { display: inline-block !important } div#hiredev { display: inline-block !important } #services .fa:before { font-size: 25px } #hiredev .fa:before { font-size: 25px } #hiredev i.fa { color: #399837 } #header a.btn.line.head-btn { padding: 0 25px; height: 38px; text-transform: capitalize; } .top_info a img { margin-right: 7px; vertical-align: middle } .flex_wrapper.infographic_wrapper { padding-right: 30px } div#company { position: absolute; width: 100%; right: 0; top: 0; border-top: 1px solid #399837; margin-top: 20px; } #company .flex_wrapper .cl-50:nth-child(1) { padding: 0 60px 0 0 } #company .cl-50.comp-padding { padding: 40px 0 } .dropdown-inner { background: #fff; box-shadow: 0px 30px 50px 0px rgb(4 5 60 / 10%) } .dropdown-inner .flex_wrapper { justify-content: center; display: -webkit-inline-box } .cl-50 { width: 50%; display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; flex-wrap: wrap } .cl-50 .cl-2 { width: calc(50% - 20px) } .cl-inner-flex { display: flex; display: -webkit-flex; display: -ms-flex; display: -moz-flex; padding: 0 10px 15px 0; align-items: center } .dropdown-inner .left_icon_wrapper { padding-right: 15px } .icon_round { background-color: #ecfbef; border-radius: 50%; width: 40px; height: 40px; background-image: url(../images/webp/menu-icons.webp); background-repeat: no-repeat; background-size: 32px; background-position: 5px 0; display: flex; align-items: center; justify-content: center; } .e-book-wrapper { background: #ecfbef; padding: 0; display: flex } .e-book-wrapper .flex_wrapper.align_center { align-items: center; display: flex } .cl-list a, .dropdown-inner .right_text_wrapper .heading4 a { font-weight: 400; position: relative; color: #000; display: inline-block; } .cl-list a:hover, .dropdown-inner .right_text_wrapper .heading4 a:hover { color: #399837 } .dropdown-inner .flex_wrapper { justify-content: center } .dropdown-inner .flex_wrapper { margin: 0 } div#about { display: inline-block; width: 100% } .abt .book_wraper { padding-left: 20px } .e-book-wrapper.abt .right-detail { width: calc(100% - 285px); padding-left: 20px; padding-right: 30px } .right-detail .heading4 { font-size: 23px; padding-bottom: 15px; font-weight: 500 } .book-detail { line-height: 1.6; margin-bottom: 15px; position: relative; display: inline-block } .cl-list a:hover:before, .dropdown-inner .right_text_wrapper .heading4 a:hover:before { transform: scaleX(1) translateZ(0); transform-origin: 0 0 } .cl-list a:before, .dropdown-inner .right_text_wrapper .heading4 a:before { position: absolute; left: 0; bottom: -1; width: 100%; height: 1px; background: #399837; content: ""; transform: scaleX(0) translateZ(0); transform-origin: 100% 100%; -webkit-transition: transform .5s cubic-bezier(.19, 1, .22, 1); transition: transform .5s cubic-bezier(.19, 1, .22, 1) } .menu-wrapper>ul>li a.current:after, .menu-wrapper>ul>li a.current:before, .menu-wrapper>ul>li>a:hover:after, .menu-wrapper>ul>li>a:hover:before { opacity: 1 } div#hiredev { position: absolute; width: 100%; right: 0; top: 0; border-top: 1px solid #399837; margin-top: 20px; } #hiredev .cl-50.rt { padding: 0 60px 0 0 } .learnmore { display: flex; justify-content: space-around; padding: 10px 0; } .learn_more_wrapper.clearfix { border-top: 1px solid #00800061; border-bottom: 1px solid #00800061 } #services i.fa { color: #399837 } #services .boldfont a:hover:before { transform: scaleX(1) translateZ(0); transform-origin: 0 0 } #services .boldfont a:before { top: 15% } #services .boldfont a:before { position: absolute; left: 0; bottom: -1; width: 100%; height: 1px; background: #399837; content: ""; transform: scaleX(0) translateZ(0); transform-origin: 100% 100%; -webkit-transition: transform .5s cubic-bezier(.19, 1, .22, 1); transition: transform .5s cubic-bezier(.19, 1, .22, 1) } .cl-list a:before, .dropdown-inner .right_text_wrapper .heading4 a:before { top: 15% } .site_header.active .logo-sticky { display: none } .site_header.active .sticky-logo { opacity: 1 } .site_header.active .site_menu ul li a { color: #000 } .site_header.active .top_info a { color: #000 } #header .boldfont a { color: #399837; font-size: 18px; font-weight: 600; padding: 0 } .boldfont a:before { display: none } div#services { position: absolute; width: 100%; left: 0; right: 0; top: 0; border-top: 1px solid #399837; margin-top: 20px; } #services .learn_more_wrapper.clearfix { position: absolute; bottom: -90px; left: 0; right: 0; background: #fff; padding-bottom: 10px } #header .heading4.side_heading a.current { padding: 0 0 0; font-weight: 600; margin-top: 10px } #header.stickyactive .read_more_wrapper a { color: #399837; font-weight: 600 } #header .learn_about span.lm { font-size: 16px; color: #000; font-weight: 300; } #header .learn_about a { color: #399837; font-weight: 700; text-align: center; padding: 0 10px } .d_flex { display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; flex-wrap: wrap } .full-menu-left { width: 70% } .grid { list-style: none; display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; flex-wrap: wrap } .gc { box-sizing: border-box; display: inline-block; min-height: 1px; vertical-align: top } .full-menu-wrapper .right_text_wrapper .para { margin: 12px 0 0; } .full-menu-right { width: 30%; background: #f3faff; padding: 20px 20px 50px } .dropdown-inner .rem_rght .flex_wrapper { justify-content: left; display: flex } .rem_rght .cl-2 { width: 50% } .rem_rght+.full-menu-right { display: none } .full-menu-right { width: 30%; background: #f3faff; padding: 20px 20px 50px } .full-menu-left.rem_rght { width: 100% } .flex_wrapper.infographic_wrapper { display: flex } .dropdown-inner .appi-cta.read_more_wrapper a { font-size: 18px; margin: 0 } .read_more_wrapper a { color: #399837; font-size: 16px; margin-top: 15px; font-weight: 500; display: inline-block; position: relative; overflow: hidden } .read_more_wrapper .fa { margin-left: 5px } .read_more_wrapper a:hover .fa { margin-left: 10px; transition: all ease .5s } :not(:hover) .fa { transition: .5s } .rem_rght .gc--1-of-3 { width: 18% } .rem_rght .gc--2-of-3 { width: 82% } .cl-list a, .dropdown-inner .right_text_wrapper .heading4.side_heading a { font-weight: 500 } #header .right_text_wrapper .heading4 a { padding: 0; font-weight: 500; opacity: 1; } .full-menu-left.rem_rght { width: 100% } .flex_wrapper.infographic_wrapper { display: flex } .dropdown-inner .appi-cta.read_more_wrapper a { font-size: 18px; margin: 0 } .read_more_wrapper a { color: #399837; font-size: 16px; margin-top: 15px; font-weight: 500; display: inline-block } .read_more_wrapper .fa { margin-left: 5px } .read_more_wrapper a:hover .fa { margin-left: 10px; transition: all ease .5s } :not(:hover) .fa { transition: .5s } .cl-list a, .dropdown-inner .right_text_wrapper .heading4.side_heading a { font-weight: 500 } #industries .right_text_wrapper .heading4 a:hover { color: #399837; font-weight: 600 } #industries .right_text_wrapper .heading4 a { padding: 0; line-height: 32px; color: #000; font-weight: 500 } #industries .cl-inner-flex { padding-bottom: 10px } div#industries { position: absolute; right: 0px; top: 0; width: 100%; border-top: 1px solid #399837; margin-top: 10px; } .lt-clo3 .cl-50 .cl-2 { width: 33.3% } .lt-clo3 .cl-50 { width: 55%; padding: 30px 0 0 } .lt-clo3 .cl-50.rt { width: 45% } #industries .flex_wrapper .cl-50:nth-child(1) { padding: 0 60px 0 0 } #industries .e-book-wrapper { padding: 30px 0 } #industries .flex_wrapper .cl-50 { padding-top: 10px } p.sub_menu_p { margin: 0; font-size: 16px; color: #444; padding: 0 0 0 } @media screen and (max-width:1440px) { .learn_more_wrapper { padding: 0 20px 20px } .dropdown-inner .left_icon_wrapper { padding-right: 10px } .dropdown-inner .left_icon_wrapper { padding-right: 25px } .full-menu-wrapper .left_icon_wrapper { padding-right: 20px; text-align: center } } .head { font-size: 35px; color: #090f1e; margin-bottom: 40px; line-height: 1.3; position: relative; float: left; width: 100%; } .head span { color: #4bb749 } .head.style1 { margin-bottom: 30px; letter-spacing: .02em } .head.style2 { margin-bottom: 15px; font-size: 22px; line-height: normal } .value:after { content: ""; position: absolute; left: 560px; top: 55px; width: 50px; height: 2px; background: #4cb849; border-radius: 10px } .head_desc { margin-bottom: 10px; font-weight: 400 } .banner * { } ul.col_3 { margin: 0 -15px; width: auto } ul.col_3 li { float: left; width: 33.3%; padding: 15px 15px; } ul.col_3 li p:last-child { margin: 0 } .col_4:nth-child(3n+1), ul.col_3 li:nth-child(3n+1) { clear: both } .col_4:nth-child(3n), ul.col_3 li:nth-child(3n) { clear: none } ul.col_6 li { float: left; width: 16.6%; padding: 15px 15px } .clients { text-align: center; } .clients.home.pt25 { padding-bottom: 25px; } .clients.style1 { padding-top: 20px } .clients ul { margin: 0 -10px !important } ul.reset.home { display: flex; justify-content: space-between } .clients.home li:hover { filter: none; transition: all .3s ease; background: #fff } .clients li { float: left; text-align: center; width: 15.6%; padding: 10px } .clients.home li { filter: grayscale(1); padding: 0px; } .clients img { max-width: 100%; margin: 0 auto; height: auto; } .site_footer .clients ul { display: flex; align-items: center; } .clients img { border-radius: 10px 0 10px 0; -webkit-transition: all .3s ease; object-fit: contain; transition: all .3s ease } .clients li:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); opacity: 1 } .clients li:hover img { background: 0 0 } .clients .head { margin-bottom: 10px } ul.boxes { margin: 0 -15px; display: flex; flex-wrap: wrap; } .boxes li { padding: 0 15px; margin-bottom: 30px } .boxes.col2 li { float: left; width: 50% } .boxes.col3 li { float: left; width: 33.3% } .boxes.col4 li { float: left; width: 25% } .boxes.col2 li:nth-child(2n+1), .boxes.col3 li:nth-child(3n+1) { clear: both } .boxes.col2 li:nth-child(2n), .boxes.col3 li:nth-child(3n) { clear: none } .boxes .box_col { display: table-cell; vertical-align: middle; width: 50%; padding-left: 30px } .boxes .box { float: left; width: 100%; border-radius: 5px; position: relative; background: #fff; padding: 20px; box-shadow: 0 3px 8px rgb(0 0 0 / 8%); transition: .3s; min-height: 100%; } .boxes .box:hover { box-shadow: 0 3px 8px rgb(0 0 0 / 20%) } .boxes .box p { margin: 0; } .boxes .box h3 { font-size: 20px; color: #090f1e; font-weight: 500; margin-bottom: 10px; position: relative } .boxes .box h3.mb0 { margin-bottom: 0px; padding-bottom: 0px; } .boxes .box .icon { display: inline-block; margin-bottom: 12px; position: relative; left: 8px; background: url(../../images/triangle-white.svg) no-repeat; height: 54px; width: 62px } .boxes .box .icon:before { content: ""; background: url(../images/sprites.png) no-repeat; width: 44px; height: 44px; position: absolute; left: -10px; top: 16px } .boxes .box .icon.apple:before { background-position: -176px 0 } .boxes .box .icon.android:before { background-position: -220px 0 } .boxes .box .icon.react:before { background-position: -88px 0 } .boxes .box .icon.anguar:before { background-position: 0 0 } .boxes .box .icon.yii:before { background-position: -44px 0 } .boxes .box .icon.stack:before { background-position: -308px 0 } .boxes .box .icon.laravel:before { background-position: -132px 0 } .boxes .box .icon.nodejs:before { background-position: -264px 0 } .boxes .box .icon.jquery:before { background-position: -528px 0 } .boxes .box .icon.bootstrap:before { background-position: -572px 0 } .boxes .box .icon.apache:before { background-position: 0 -44px } .boxes .box .icon.linux:before { background-position: -44px -44px } .boxes .box .icon.nginx:before { background-position: -88px -44px } .boxes .box .icon.google:before { background-position: -132px -44px } .boxes .box .icon.aws:before { background-position: -176px -44px } .boxes .box .icon.php:before { background-position: -220px -44px } .boxes .box a { font-weight: 500; color: #555; display: flex; margin-top: 20px; align-items: center; } .boxes.text-center .box a { justify-content: center } .boxes.icons .box a i { margin-bottom: 0px; font-size: 20px; margin-left: 20px; } .boxes .box a:hover { opacity: .6 } .boxes .box a .fa { margin-left: 10px; font-size: 12px; color: inherit; } .boxes .box.ios .icon { background-color: rgba(85, 85, 85, .18) } .boxes .box.android .icon { background-color: rgba(119, 193, 89, .22) } .boxes .box.react .icon { background-color: rgba(5, 165, 209, .18) } .boxes .box.bootstrap .icon { background-color: rgba(121, 82, 179, .2) } .boxes .box.jquery .icon { background-color: rgba(30, 111, 170, .18) } .boxes .box.php a, .boxes .box.php h3 { color: #4f5b93 } .boxes .box.php h3:after { background: #4f5b93 } .boxes .box.php .icon { background-color: rgba(79, 91, 147, .2) } .boxes .box.angular h3:after { background: #c31f33 } .boxes .box.angular .icon { background-color: rgba(195, 31, 51, .18) } .boxes .box.yii a, .boxes .box.yii h3 { color: #eb6d2d } .boxes .box.yii h3:after { background: #eb6d2d } .boxes .box.yii .icon { background-color: rgba(235, 109, 45, .18) } .boxes .box.stack a, .boxes .box.stack h3 { color: #0abab5 } .boxes .box.stack h3:after { background: #0abab5 } .boxes .box.stack .icon { background-color: rgba(10, 186, 181, .18) } .boxes .box.laravel h3:after { background: #fa503a } .boxes .box.laravel .icon { background-color: rgba(250, 80, 58, .18) } .boxes .box.nodejs .icon { background-color: rgba(102, 159, 100, .18) } .boxes .box.apache a, .boxes .box.apache h3 { color: #c62234 } .boxes .box.apache h3:after { background: #c62234 } .boxes .box.apache .icon { background-color: rgba(198, 34, 52, .2) } .boxes .box.apache a, .boxes .box.linux h3 { color: #b17e05 } .boxes .box.linux h3:after { background: #b17e05 } .boxes .box.linux .icon { background-color: rgba(177, 126, 5, .2) } .boxes .box.nginx a, .boxes .box.nginx h3 { color: #0d974d } .boxes .box.nginx h3:after { background: #0d974d } .boxes .box.nginx .icon { background-color: rgba(13, 151, 77, .2) } .boxes .box.google a, .boxes .box.google h3 { color: #3a7cec } .boxes .box.google h3:after { background: #3a7cec } .boxes .box.google .icon { background-color: rgba(58, 124, 236, .2) } .boxes .box.aws a, .boxes .box.aws h3 { color: #f90 } .boxes .box.aws h3:after { background: #f90 } .boxes .box.aws .icon { background-color: rgba(255, 153, 0, .2) } .boxes.style1 li { float: left; width: 100%; margin-bottom: 15px } .boxes.style1 li:last-child { margin: 0 } .boxes.style1 .icon { position: absolute; left: 30px; top: 20px } .boxes.style1 h3 { width: 100%; margin: 0; font-size: 20px; font-weight: 700; letter-spacing: normal; padding: 0 0 5px 85px; height: 65px; display: table-cell; vertical-align: middle } .boxes.style1 .box h3:after { display: none } .boxes.icons .box i { display: block; margin-bottom: 15px; font-size: 34px } .boxes.icons .box i.blue { color: #333 } .boxes.icons .box i.green { color: #4cb849 } .white, .white .head, .white p { color: #fff } .center_img { display: block; margin: 0 auto } section.half .bg { content: ""; width: 50%; height: 100%; position: absolute; top: 0; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; background-repeat: no-repeat } section.half .bg.left { left: 0 } section.half .bg.right { right: 0 } section.half .container { position: relative; z-index: 9 } section.half .pull_left { padding-right: 50px } section.half .pull_right { padding-left: 50px } .page_banner { position: relative; z-index: 9; overflow: hidden; padding: 205px 0 105px 0; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; display: inline; text-align: center; } .overlay_blue:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: 0.7; content: ""; background: #000000; } .overlay_blue .container { position: relative; z-index: 9; text-align: center; color: #fff; max-width: 1020px } .page_banner * { color: #fff; } .page_banner .fa { font-family: FontAwesome } .page_banner.cms { padding: 230px 0 225px 0 } .page_banner h1 { font-size: 44px; margin-bottom: 25px; letter-spacing: normal; line-height: 60px } .page_banner .btns .btn { min-width: 160px; margin: 5px 5px } .page_banner .desc { font-size: 24px; } .footer_form { text-align: center; background: #f5f5f5; } .footer_form .head { margin-bottom: 15px } .footer_form .head_desc { width: 100%; float: left; margin-bottom: 35px } .footer_form .content { float: left; width: 65%; padding: 20px } .footer_form .contact { float: left; width: 100%; margin-top: 15px; margin-bottom: 10px } .footer_form .contact a { font-weight: 500; color: #333; font-size: 18px; display: inline-block; margin-right: 40px; margin-bottom: 10px } .footer_form .contact .fa { font-size: 20px; display: inline-block; border-radius: 100px; margin-right: 5px; height: 40px; text-align: center; line-height: 38px; width: 40px; color: #fff; background: #4cb849 } .footer_form .contact .fa-mobile { font-size: 24px } .footer_form .form_group { width: 33.3%; padding: 0 15px; position: relative; margin-bottom: 25px } .footer_form .form_group .form_group { margin: 0 0 25px 0; width: 100%; padding: 0 } .footer_form .form_group .form_group .error { padding: 2px 0 } .footer_form .form_group.full { width: 66.6% } .footer_form .form_group.action { width: 33.3% } .footer_form .form_control { border: 2px solid #d0d2d4; padding-left: 35px } .footer_form .form_control:focus { border-color: #999c9e } .footer_form textarea.form_control { height: 115px; padding: 10px } .footer_form .btn { width: 100% } .footer_form select { margin-bottom: 15px; padding: 10px } .footer_form .action .form_control { margin-bottom: 0; padding: 0 10px } .footer_form .form_group .fa { position: absolute; z-index: 10; color: #788092; top: 0; left: 17px; height: 44px; width: 35px; line-height: 44px } .footer_form .form_group .fa-mobile { font-size: 21px } .tech_mob { display: flex } .site_footer { background: #0e0e0e url(../images/webp/map-bg1.webp); color: #fff; overflow: hidden; width: 100%; } .footer_menu h3 { font-size: 20px; padding-bottom: 13px; position: relative; color: #fff } .footer_menu h3:after { content: ""; position: absolute; left: 0; bottom: 0; width: 35px; height: 2px; background: #4cb849; border-radius: 10px } .footer_menu li a { color: #fff; opacity: .8; margin: 5px 0; padding-left: 15px; display: inline-block; position: relative } .footer_menu li a:before { content: "\f105"; font-family: FontAwesome; position: absolute; left: 0; color: #fff; font-size: 12px; top: 50%; margin-top: -6px; line-height: normal } .copyright a:hover, .footer_menu li a:hover { opacity: 1 } .footer_menu li a .fa, .footer_menu li a span { display: none } .col_3footer { width: 260px } .footer_menu .contact li a:before { display: none } .footer_menu .contact li { float: left; width: 100%; line-height: 20px; color: #fff; opacity: .8; margin: 7px 0 5px 0; position: relative; padding-left: 30px; -moz-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; -webkit-transition: all .25s ease } .footer_menu .contact li a { padding: 0; margin: 0; opacity: 1 } .footer_menu .contact li.phone, .footer_menu .contact li:hover { opacity: 1 } .footer_menu .contact li.phone .fa, .footer_menu .contact li.phone a { opacity: .5 } .footer_menu .contact li.phone a:hover, .footer_menu .contact li.phone:hover .fa { opacity: 1 } .footer_menu .contact .fa { position: absolute; left: 0; top: 1px; font-size: 15px } .footer_menu .contact .hr { position: absolute; left: 0; top: 1px; font-size: 12px; opacity: 1; font-style: normal; color: #646779; font-weight: 500 } .footer_menu .contact .hr:hover { color: #fff } .footer_form .btn { top: 25px } .action span { color: #333 } .testimonial-button { padding: 10px 0 0 } .site_footer .footer-carousel .first_half:before { content: "\f10d"; font-family: FontAwesome; position: absolute; left: 333px; font-size: 80px; color: #9d9d9d5e; top: 120px } .site_footer .footer-carousel .first_half:after { content: "\f10e"; font-family: FontAwesome; position: absolute; font-size: 80px; color: #9d9d9d5e; bottom: 20px; right: 350px } button.slider-preview.preview3 img { width: 50px !important; height: 50px !important } button.slider-preview.preview4 img { width: 50px !important; height: 50px !important } button.slider-preview.preview1 img { width: 50px !important; height: 50px !important } .flex1 h4 span { color: #464545; font-size: 16px; font-weight: 400 } .carousel_width { width: 330px; display: inline-grid; padding: 10px 15px; justify-items: center; box-shadow: 0 2px 30px rgb(0 0 0 / 18%); background: #fff; margin: 0 15px; border-radius: 20px 0 } .first_half.container { padding: 50px; padding-bottom: 0; border-radius: 20px; position: relative } .first_half amp-carousel { height: 400px } .first_half .i-amphtml-carousel-arrows { display: none !important } .widthpart { display: -webkit-box; text-align: center } p.first_part { text-align: center; color: #000; padding-top: 0; width: 100%; max-width: 550px; margin: 0 auto } .widthpart h2.head { margin-bottom: 15px } button.slider-preview { border: 0; padding: 0; border-radius: 50%; outline: 0; position: absolute } button.slider-preview img { border-radius: 50%; width: 60px; height: 60px !important; box-shadow: 0 1px 6px rgb(0 0 0) } button.slider-preview.preview3 { left: 230px; background: 0 0; top: 25px } button.slider-preview.preview2 { top: 190px; left: 100px; background: 0 0 } button.slider-preview.preview4 { bottom: 20px; left: 200px; background: 0 0 } button.slider-preview.preview6 { right: 230px; background: 0 0; top: 25px } button.slider-preview.preview1 { right: 100px; top: 190px; background: 0 0 } button.slider-preview.preview5 { bottom: 20px; right: 200px; background: 0 0 } .f_contact { background: url(../images/webp/pattern.webp) no-repeat left top #3d8d40; text-align: center; color: #fff; font-size: 18px; position: relative } .f_contact .head { margin-bottom: 20px } .f_contact .btn { background: #fff; margin: 10px 10px 0 10px; color: #000; text-align: left; text-transform: none; font-size: 18px; position: relative; max-width: 300px; width: 100%; padding: 15px 10px 15px 65px; box-shadow: 0 3px 4px rgba(0, 0, 0, .25); line-height: normal; height: auto } .f_contact .btn span { display: block; color: #222; font-size: 16px; margin-top: 0; font-weight: 300; } .f_contact .btn .fa { position: absolute; left: 15px; width: 40px; height: 40px; text-align: center; line-height: 40px; top: 50%; margin-top: -22px; font-size: 32px } .f_contact .btn.skype i { color: #00aaf2 } .f_contact .btn.whatsapp i { color: #4cb849 } .f_contact .btn:hover { background: #eee; box-shadow: 0 0 10px rgba(0, 0, 0, .3) } .f_contact .f_contact_btn_pages { width: 100%; max-width: 250px; padding: 15px 10px; text-align: center; } .copyright { padding-bottom: 30px; font-size: 16px; } .copyright ul { border-top: 1px solid rgba(255, 255, 255, .2); float: left; width: 100%; padding-top: 25px; margin-bottom: 15px } .copyright li { float: left } .copyright a { color: #fff; opacity: .8; display: inline-block; padding: 0 15px; position: relative; line-height: 26px } .copyright a:before { background: #9eacb4; height: 12px; width: 1px; position: absolute; content: ""; left: 0; top: 8px } .copyright li.social a:before, .copyright ul li:first-child a:before { display: none } .copyright ul li:first-child a { padding-left: 0 } .copyright p { color: #fff; opacity: .8; } .copyright li.social { float: right } .copyright li.social a { padding: 0; margin-left: 3px; display: inline-block; width: 35px; height: 35px; text-align: center; border: 1px solid #fff; line-height: 35px; border-radius: 100px; font-size: 18px; } .copyright li.social a i { line-height: inherit; } .copyright li.social a:hover { background: #fff; color: #0e152e } .diagram img { margin: 0 auto; max-width: 100%; } section.half_bg:after { content: ""; position: absolute; right: 0; top: 0; height: 100%; width: 50% } .sub_head { font-size: 28px; letter-spacing: .02em; margin-bottom: 20px } .white * { color: #fff } .col_6 .grey { background: #eeeff0 } .head.line.white:after { background: #fff } .ampTabContainer { display: flex; flex-wrap: wrap } .tabButton { list-style: none; border: 0; position: relative; flex-grow: 1; padding: 10px 5px 12px 5px; text-align: center; cursor: pointer; text-transform: uppercase; font-weight: 500; opacity: .4; transition: all .25s ease; -webkit-transition: all .25s ease } .tabButton:hover { opacity: 1 } .tabButton:after { content: ""; position: absolute; left: 50%; top: 100%; width: 0; height: 2px; background: #333; transition: all .25s ease; -webkit-transition: all .25s ease } amp-selector .tabButton[selected]:after { width: 100%; left: 0 } amp-selector .tabButton[selected] { outline: 0; opacity: 1; color: #333 } .tabContent { display: none; width: 100%; order: 1; float: left; padding-top: 20px; border-top: 2px solid #ddd } .tabButton[selected]+.tabContent { display: block } .itemCustom { height: 280px; width: 380px; margin: 10px; text-align: center; padding-top: 140px } body * { outline: 0 } .page_banner.not_found { background: url(../images/company-banner.jpg) no-repeat center; padding: 200px 0 150px 0; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover } .page_banner.not_found:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: .75; content: ""; background: #0c1e5d } .page_banner.not_found:after { display: none } .page_banner.not_found h1 { margin: 0; font-weight: 500; font-size: 80px } .page_banner.not_found .desc { margin-top: 25px; font-size: 26px } .not_found .content { float: left; width: 100%; padding: 30px; text-align: center; border-radius: 10px; margin-bottom: 30px; background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, .2); min-height: 280px; margin-top: -120px; position: relative; z-index: 99; overflow: hidden } .not_found .container.md { max-width: 600px } .not_found .content .fa { font-size: 66px; display: block; color: #333; margin-bottom: 10px } .not_found h2 { color: #333; font-weight: 500; font-size: 25px; text-transform: uppercase } .not_found p { font-size: 18px; color: #666 } form .btn { position: relative } form .btn:before { content: ""; visibility: hidden; transform: scale(0); position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -13px; width: 26px; height: 26px; background: url(../images/loader-blue.gif) no-repeat center; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; -webkit-transition: all .3s ease } form .btn.grey:before { background: url(../images/loader-dark.gif) no-repeat center } form .btn.green:before { background: url(../images/loader-green.gif) no-repeat center } form.amp-form-submitting .btn:before { display: block; visibility: visible; transform: scale(1) } form.amp-form-submitting .btn { text-align: center; font-size: 0 } .mb5 { margin-bottom: 5px } .head.mb10, .head.style1.mb10, .mb10 { margin-bottom: 10px } .head.mb15, .head.style1.mb15, .mb15 { margin-bottom: 15px } .head.mb20, .head.style1.mb20, .mb20 { margin-bottom: 20px } .mb30 { margin-bottom: 30px } .mb40 { margin-bottom: 40px } .mb50 { margin-bottom: 50px } .mt10 { margin-top: 10px } .mt20 { margin-top: 20px } .mt30 { margin-top: 30px } .mt40 { margin-top: 40px } .mt50 { margin-top: 50px } .mt0 { margin-top: 0 } .head.mb0, .mb0 { margin-bottom: 0 } .mar0 { margin: 0 } .pad0 { padding: 0 } .pb0 { padding-bottom: 0 } .pt0 { padding-top: 0 } .pt20 { padding-top: 20px } .pt25 { padding-top: 25px } .pt40 { padding-top: 40px } .pr0 { padding-right: 0 } .pr30 { padding-right: 30px } .pl0 { padding-left: 0 } .pl30 { padding-left: 30px } .pb10 { padding-bottom: 10px } .pr35 { padding-right: 35px } .pb20 { padding-bottom: 20px } .pb30 { padding-bottom: 30px } .pb200 { padding-bottom: 200px } .plr0 { padding-left: 0; padding-right: 0 } .plr15 { padding-left: 15px; padding-right: 15px } .bt0 { border-top: 0 } .head .offer { color: #4fbd50 } #chat_box { bottom: 135px; right: 20px; z-index: 999; position: fixed; } #chat_box a { height: 48px; display: inline-block; width: 48px; border-radius: 50%; background: url(../images/chat.png) no-repeat center #4cb849; position: relative; transition: all .3s ease; box-shadow: 0 0 20px rgba(0, 0, 0, .4); text-indent: -99999px; } #chat_box:hover a { background: url(../images/chat.png) no-repeat center #399837 } #chat_box a:after, #chat_box a:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; border: 1px solid #63dc60 } #chat_box a:before { -webkit-animation: ripple 1.8s linear infinite; animation: ripple 1.8s linear infinite } #chat_box a:after { -webkit-animation: ripple 1.8s linear 1s infinite; animation: ripple 1.8s linear 1s infinite } #chat_box a:hover:after, #chat_box:hover a:before { -webkit-animation: none; animation: none } @-webkit-keyframes ripple { 0% { -webkit-transform: scale(1) } 75% { -webkit-transform: scale(1.75); opacity: 1 } 100% { -webkit-transform: scale(2); opacity: 0 } } @keyframes ripple { 0% { transform: scale(1) } 75% { transform: scale(1.75); opacity: 1 } 100% { transform: scale(2); opacity: 0 } } @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { .banner:after, .page_banner::after, .products .img::after { display: none } body .web .bg { width: 40% } body .banner { padding-bottom: 100px } body .products .img { height: auto; padding: 13px 0 } body .home.clients { padding-top: 40px } body .page_banner, body .page_banner.web { padding-bottom: 110px; min-height: inherit } } .row.footer_row { position: relative; width: 100%; display: flex; margin: 0; justify-content: space-between; align-items: flex-start; padding: 80px 0 20px; font-size: 16px; } .footer_menu .contact .hr { position: absolute; left: 0; top: 1px; font-size: 12px; opacity: 1; font-style: normal; color: #646779; font-weight: 500 } .footer_menu .contact .hr:hover { color: #fff } .footer_form .btn { top: 25px } .action span { color: #333 } .multi.web.page_banner .content { width: 100%; position: relative; min-height: 230px; text-align: center; padding-left: 0; float: none } section.multi-h.half .bg1 { background-image: url(../images/multi-demant-app-left.png) } .trusted-dev-company { margin: 20px 0 } .footer_form .action input { width: 150px; position: relative; left: -10px } .site_menu li:nth-child(5) .sub_menu .sub_menu_list:before { content: ''; left: 52% } .site_footer .client li { float: left; text-align: center; padding: 0 15px 30px; width: 11.5%; } section.grey ul.features .child4 { height: 160px } .banner_alt_image { margin-bottom: 30px; } body section.tech_stacks_section { background: #f5f5f5; padding-bottom: 20px; } .tech_stacks_section ul.features.style1 .box { padding: 15px; } .footer-carousel { background: #fafafa } .index-client { padding: 40px 0 40px } /* menu icons */ .icon_round.i-custom-software { background-position: 5px -859px } .icon_round.i-software-product-modernization { background-position: 5px -2228px; } .icon_round.i-mvp { background-position: 5px -1889px; } .icon_round.i-offshore { background-position: 5px -1988px; } .icon_round.i-camera-drone { background-position: 5px -438px; } .icon_round.i-about { background-position: 3px 7px; } .icon_round.i-career { background-position: 5px -490px; } .icon_round.i-integration { background-position: 5px -1402px; } .icon_round.i-tech-stack { background-position: 5px -2593px; } .icon_round.i-testimonials { background-position: 5px -2641px; } .icon_round.i-incentive { background-position: 5px -1299px; } .icon_round.i-on-demand { background-position: 5px -2093px; } .icon_round.i_retail { background-position: 3px -2386px; } .icon_round.i-restaurant { background-position: 5px -2337px; } .icon_round.i-health-care { background-position: 4px -1157px; } .icon_round.i-manufacturing { background-position: 5px -1640px; } .icon_round.i-bank { background-position: 5px -333px; } .icon_round.i-house { background-position: 4px -1207px; } .icon_round.i-warehouse { background-position: 4px -2750px; } .icon_round.i-logistics { background-position: 5px -1589px; } .icon_round.i-oil-drum { background-position: 5px -2043px; } .icon_round.i-graduation { background-position: 5px -1109px; } .icon_round.i-insurance { background-position: 5px -1352px; } .icon_round.no_bg_image { background-image: inherit; } .icon_round.i-microsoft-dot-net { background-position: 5px -1786px; } .icon_round.i-atom { background-position: 5px -276px; } .icon_round.i-angularjs { background-position: 4px -107px; } .icon_round.i-apple { background-position: 5px -163px; } .icon_round.i-android { background-position: 5px -52px; } .icon_round.i-php { background-position: 5px -2136px } .icon_round.i-laravel { background-position: 5px -1544px; } .icon_round.i-python { background-position: 5px -2281px; } .icon_round.i-java { background-position: 5px -1498px; } .icon_round.i-mean { background-position: 3px -1690px; } .icon_round.i-mern { background-position: 3px -1743px; } .icon_round.i-html { background-position: 3px -1250px; } .icon_round.i-cell-phone { background-position: 5px -545px; } .icon_round.i-computer { background-position: 4px -765px; } .icon_round.i-power-bi { background-position: 4px -2177px; } .icon_round.i-cloud { background-position: 4px -711px; } .icon_round.i-servers { background-position: 4px -2493px; } .icon_round.i-shopping-cart { background-position: 5px -2542px; } .icon_round.i-nft { background-position: 5px -1937px; } .icon_round.i-enterprise { background-position: 5px -1012px; } .icon_round.i-fintech { background-position: 5px -1062px; } .icon_round.i-iot { background-position: 5px -1449px; } .icon_round.i-chip { background-position: 5px -657px; } .icon_round.i-ar-vr { background-position: 4px -219px; } .icon_round.i-robot { background-position: 4px -2440px; } .icon_round.i-blockchain { background-position: 4px -391px; } .icon_round.i-chatbot { background-position: 4px -599px; } .icon_round.i-devops { background-position: 4px -959px; } .icon_round.i-testing { background-position: 4px -2694px; } .icon_round.i-migration { background-position: 4px -1830px; } .icon_round.i-data { background-position: 4px -910px; } .center-text-line { text-align: center; } .head.line.center-text-line:after { left: 50%; margin-left: -25px; } .banner .container { position: relative; z-index: 9; text-align: center; color: #fff; max-width: 900px; } .banner * { color: #fff } .banner h1 { font-size: 50px; margin-bottom: 20px; font-weight: 700; line-height: 1.5; } .banner .desc { font-size: 26px; margin-bottom: 30px; font-weight: 300 } .banner p { font-size: 22px; margin-bottom: 40px; padding: 0 20px; line-height: 1.8; } .banner .btn { margin-left: 10px; min-width: 170px; height: 50px; line-height: 50px; font-size: 18px; min-width: 200px } .banner .action .btn:first-child { margin-left: 0; margin-right: 10px } .mobile { background: #212841; position: relative; color: #fff; background: url(../images/mobile-development.jpg) no-repeat bottom center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover } .mobile:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: .8; content: ""; background: #081338 } .mobile .container { position: relative; z-index: 9 } .mobile .head { color: #fff; margin-bottom: 20px; position: relative; padding-bottom: 20px } .mobile .head_desc { color: #fff } .mobile .head:after { content: "" } .mobile .content { display: table-cell; width: 40%; vertical-align: middle } .mobile .content p { color: #fff; opacity: .7; font-weight: 300 } .mobile .boxes { display: table-cell; width: 60%; padding-left: 20px } .web { min-height: 500px; position: relative; padding-bottom: 0px } .web .boxes { margin: 0 -15px } .products { text-align: center; background: #eeeff0 } .products .container { max-width: 1100px } .products .content_head { background: #0e152e; padding-top: 50px; padding-bottom: 120px; position: relative; overflow: hidden } .products .content_head:before { content: ""; width: 300px; height: 244px; position: absolute; left: 0; top: 0 } .products .content_head * { color: #fff } .products .head_desc { opacity: .5 } .products img { max-width: 180px; margin: 0 auto } .products .box.cropla h3:after { background: #fab10a } .products .box.deligo h3:after { background: #de4e3a } .products .box.foodpurby h3:after { background: #4fbd50 } .products .box.grobino h3:after { background: #006d4d } .products .box.cropla a { color: #fab10a } .products .box.deligo a { color: #de4e3a } .products .box.foodpurby a { color: #4fbd50 } .products .box.grobino a { color: #006d4d } .products .img { height: 140px; float: left; width: 100%; padding-top: 10px; position: relative } .products .content { float: left; width: 100%; padding: 20px; background: #fff } .find_us { text-align: center; background: #f5f5f5 url(../images/map-bg.png) no-repeat center; padding: 90px 0; } .years span { display: table-cell; vertical-align: middle } .years span.year { padding: 50px 80px 0 80px; width: 10%; font-size: 150px; color: #090f1e; background: -webkit-linear-gradient(#29ff24, #136a38); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .years span:first-child, .years span:last-child { width: 45%; padding: 50px 0 0 0 } .years span:first-child { font-size: 38px; color: #090f1e; font-weight: 300; text-align: right } .years span:last-child { text-align: left; font-weight: 400; color: #000; line-height: 30px } .facts b { display: block; font-size: 18px } .facts span { position: relative; display: inline-block; margin-bottom: 15px; line-height: 80px; font-weight: 600; font-size: 27px; width: 84px; height: 84px; border-radius: 100%; border: 3px solid #189232; color: #07516d; box-shadow: 0 0 0 8px rgba(71, 188, 140, .2); background: #fff } .banner h1 span { color: #4cb84a } .year { position: relative; display: inline-block; margin-bottom: 60px; line-height: 80px; font-weight: 600; font-size: 200px; width: 250px; height: 125px; border-radius: 10px; color: #07516d; box-shadow: 7 0 0 8px rgb(71 188 140 / 20%); background: #fff; margin-top: 90px } .desk-only ul.features.col4 li { float: left; width: 33.33%; padding: 3px 4px 10px } .desk-only ul.features.col4 { display: flex; flex-wrap: wrap; } .index-service .boxes .box h3:after { left: 45% } .product-engg-tab ul.features.style1 .box { background: #fff; box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%); min-height: 100%; display: flex; align-items: center; } .product-engg-tab ul.features .box { padding: 15px 20px } section.grey ul.features.col2 li { float: left; width: 33.33%; padding: 10px } section.grey ul.features.col-td-2 li { width: 50%; } .clients.find_us ul.boxes .box h3:after { left: 42% } ul.features.col2 li { float: left; width: 50%; padding: 10px } section.grey ul.features.style1 .box { background: #fff; box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%) } section.grey ul.features .box span { font-weight: 400; display: table-cell; width: 100%; vertical-align: middle; padding: 5px 12px 5px 0; text-align: left } section.grey ul.features .box { float: left; width: 100%; position: relative; border-radius: 5px; background: hsla(0, 0%, 100%, .12) } section.grey ul.features h2 { text-align: center; padding-top: 20px; font-weight: 500; font-size: 20px; margin-bottom: 20px } .grey ul.features.reset h3 { font-size: 16px; margin-top: 5px; color: #090f1e; font-weight: 400 } section.grey ul.features.col2 li ul.reset.technology.text-center li { width: 33%; padding: 0; } section.grey ul.features.style1 .box:hover { box-shadow: 0 2px 25px rgb(0 0 0 / 30%); transition: all ease .8s } h3.homedo { color: #000; font-size: 20px; font-weight: 500 } section.doyou .discus_sec { max-width: 900px; margin: auto; border-radius: 20px; padding: 35px 0 20px; background-color: #fff; box-shadow: 0 0 30px rgb(76 184 73 / 55%) } img.borderradiusimgtwo { border-radius: 20px; margin-bottom: 20px } section.services-button { padding-top: 0px; background: #f5f5f5 } section.doyou { padding: 10px 0 25px } section.grey ul.features .child4 { height: auto } section.new-case .col-md-6 { max-width: 33.33%; width: 100%; padding: 0 15px; } section.new-case .row { display: flex; } .geeks { width: auto; height: auto; overflow: hidden; margin: 0 auto; border-radius: 5px; } .geeks img { width: 100%; transition: .5s all ease-in-out; object-fit: cover } .geeks:hover img { transform: scale(1.1) } h2.case-h2 { margin-bottom: 10px; margin-top: -8px; letter-spacing: .02em; font-size: 46px; font-weight: 600 } section.new-case .portfolio-heading { margin-bottom: 25px } h3.case-h3 { font-size: 20px; margin: 0 0 5px; font-weight: 700; } p.case-detail { margin-bottom: 10px; font-size: 16px } p.case-dis { margin-top: 10px; margin-bottom: 0; line-height: 23px; font-weight: 400; font-size: 16px; } p.case-dis b { font-weight: 500 } .white { color: #fff } h3.case-h3.m-height { min-height: 50px } .img-details { position: relative; padding: 20px 0; } p.case_p { margin-bottom: 20px; margin-top: 30px; } section.single-case { padding: 10px 0 } .new_color { background-color: #ccc; display: inline-block; border-radius: 5px; padding: 30px; display: flex; align-items: center; } .new_color img { object-fit: contain } h3.singe-h { font-size: 28px } .new_color img { height: 400px } .new_color.color-one-index { background: #f3eff9 } h2.weight { font-weight: 500 } section.new-case { padding-bottom: 30px; } .case_btn { padding-top: 40px; } /*tech stacks*/ .row-12 { margin: 0 -15px; display: flex; flex-wrap: wrap; } .row-12 .col-md-41 { width: 33.33%; padding: 0px 15px; margin-bottom: 30px; } .tech_box { display: inline-block; width: 100%; background: #fff; box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%); padding: 0px; min-height: 100%; overflow: hidden; border-radius: 5px; } .tech_box h2 { text-align: center; font-weight: 500; font-size: 20px; margin-bottom: 0; background: #e3e3e3; padding: 13px 0; border-bottom: 1px solid #ddd; } .tech_box_ul { display: flex; flex-wrap: wrap; width: 100%; padding: 0px; list-style: none; margin: 0 0 10px; } .tech_box_ul li { display: inline-block; padding: 10px 10px; width: 33.33%; text-align: center; } .tech_box_ul li h3 { margin: 0; font-size: 18px; font-weight: 400; } /*tech stacks*/ /*star*/ .star-bg { float: left; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; opacity: 0.5 } #stars { width: 1px; height: 1px; background: transparent; box-shadow: 1800px 451px #FFF, 1918px 538px #FFF, 1292px 689px #FFF, 1346px 793px #FFF, 350px 773px #FFF, 1420px 741px #FFF, 175px 222px #FFF, 710px 1366px #FFF, 1732px 112px #FFF, 898px 751px #FFF, 35px 422px #FFF, 197px 882px #FFF, 1907px 501px #FFF, 570px 815px #FFF, 751px 859px #FFF, 1865px 1327px #FFF, 1328px 873px #FFF, 1661px 478px #FFF, 436px 830px #FFF, 726px 859px #FFF, 489px 1787px #FFF, 1151px 1051px #FFF, 1160px 304px #FFF, 137px 1149px #FFF, 1210px 701px #FFF, 1428px 1365px #FFF, 213px 1065px #FFF, 1032px 1961px #FFF, 721px 552px #FFF, 679px 303px #FFF, 515px 1988px #FFF, 1780px 1100px #FFF, 894px 1534px #FFF, 1788px 1208px #FFF, 1883px 1989px #FFF, 398px 849px #FFF, 1238px 1520px #FFF, 749px 428px #FFF, 1210px 1456px #FFF, 1765px 349px #FFF, 1934px 780px #FFF, 572px 1601px #FFF, 1770px 1279px #FFF, 1520px 1298px #FFF, 1757px 487px #FFF, 1842px 931px #FFF, 253px 383px #FFF, 967px 195px #FFF, 1368px 729px #FFF, 1303px 209px #FFF, 1392px 1241px #FFF, 95px 410px #FFF, 629px 1454px #FFF, 1991px 1182px #FFF, 1321px 1928px #FFF, 1176px 300px #FFF, 707px 1335px #FFF, 1293px 1324px #FFF, 1354px 1394px #FFF, 1730px 988px #FFF, 761px 852px #FFF, 562px 846px #FFF, 1806px 1285px #FFF, 991px 1430px #FFF, 1198px 617px #FFF, 916px 91px #FFF, 692px 767px #FFF, 1664px 80px #FFF, 1832px 1319px #FFF, 1840px 1241px #FFF, 872px 1483px #FFF, 202px 1973px #FFF, 24px 365px #FFF, 692px 1420px #FFF, 1880px 1182px #FFF, 116px 1802px #FFF, 1474px 10px #FFF, 386px 1404px #FFF, 1386px 224px #FFF, 504px 786px #FFF, 735px 710px #FFF, 600px 1267px #FFF, 973px 917px #FFF, 176px 1336px #FFF, 153px 792px #FFF, 1236px 627px #FFF, 1889px 1820px #FFF, 1069px 331px #FFF, 1779px 1883px #FFF, 1598px 51px #FFF, 1579px 898px #FFF, 763px 1972px #FFF, 1077px 1375px #FFF, 1861px 883px #FFF, 341px 1125px #FFF, 1163px 1251px #FFF, 1473px 1811px #FFF, 1310px 1082px #FFF, 631px 1552px #FFF, 189px 1146px #FFF, 870px 1923px #FFF, 1201px 1586px #FFF, 69px 1094px #FFF, 442px 1535px #FFF, 1645px 1448px #FFF, 711px 953px #FFF, 1300px 1027px #FFF, 1181px 373px #FFF, 1857px 1513px #FFF, 842px 1520px #FFF, 1943px 1439px #FFF, 1616px 1216px #FFF, 907px 1608px #FFF, 1874px 939px #FFF, 1191px 614px #FFF, 942px 1736px #FFF, 893px 997px #FFF, 1691px 1962px #FFF, 1940px 1229px #FFF, 469px 1573px #FFF, 388px 1122px #FFF, 476px 1882px #FFF, 426px 185px #FFF, 217px 1546px #FFF, 647px 324px #FFF, 677px 1825px #FFF, 712px 23px #FFF, 337px 1361px #FFF, 1161px 350px #FFF, 536px 931px #FFF, 1209px 1891px #FFF, 592px 1155px #FFF, 448px 1126px #FFF, 1909px 806px #FFF, 877px 860px #FFF, 1038px 295px #FFF, 759px 395px #FFF, 1576px 1733px #FFF, 1467px 335px #FFF, 79px 262px #FFF, 683px 472px #FFF, 643px 1365px #FFF, 333px 1482px #FFF, 1026px 1230px #FFF, 168px 1153px #FFF, 417px 624px #FFF, 246px 1517px #FFF, 824px 547px #FFF, 1475px 133px #FFF, 1884px 186px #FFF, 1367px 222px #FFF, 1084px 927px #FFF, 1875px 232px #FFF, 574px 1847px #FFF, 1570px 1598px #FFF, 988px 307px #FFF, 1422px 194px #FFF, 1053px 1875px #FFF, 974px 388px #FFF, 562px 655px #FFF, 1895px 658px #FFF, 1030px 1748px #FFF, 1820px 970px #FFF, 1745px 595px #FFF, 1843px 762px #FFF, 1080px 991px #FFF, 337px 816px #FFF, 1653px 897px #FFF, 591px 722px #FFF, 1007px 1895px #FFF, 265px 725px #FFF, 482px 1386px #FFF, 1300px 1208px #FFF, 1247px 1704px #FFF, 1133px 801px #FFF, 1747px 584px #FFF, 636px 388px #FFF, 1949px 1779px #FFF, 682px 1880px #FFF, 1010px 850px #FFF, 1424px 1949px #FFF, 643px 906px #FFF, 710px 1391px #FFF, 1501px 1913px #FFF, 1611px 29px #FFF, 450px 553px #FFF, 321px 1490px #FFF, 485px 1451px #FFF, 383px 752px #FFF, 1343px 253px #FFF, 255px 56px #FFF, 1046px 860px #FFF, 1725px 1501px #FFF, 650px 1736px #FFF, 335px 437px #FFF, 68px 1982px #FFF, 118px 713px #FFF, 818px 1042px #FFF, 1362px 787px #FFF, 521px 189px #FFF, 1544px 1780px #FFF, 1425px 1993px #FFF, 504px 1243px #FFF, 191px 318px #FFF, 1974px 780px #FFF, 1187px 1802px #FFF, 1072px 981px #FFF, 1236px 798px #FFF, 1706px 911px #FFF, 1585px 1377px #FFF, 490px 929px #FFF, 100px 599px #FFF, 1860px 885px #FFF, 1664px 1945px #FFF, 745px 814px #FFF, 862px 1182px #FFF, 3px 1778px #FFF, 1355px 1008px #FFF, 1215px 321px #FFF, 660px 1601px #FFF, 264px 1139px #FFF, 696px 1357px #FFF, 403px 1209px #FFF, 43px 633px #FFF, 1717px 1480px #FFF, 5px 619px #FFF, 1545px 295px #FFF, 1000px 468px #FFF, 468px 1224px #FFF, 851px 1650px #FFF, 295px 435px #FFF, 158px 1795px #FFF, 837px 552px #FFF, 1178px 1389px #FFF, 99px 1916px #FFF, 185px 1648px #FFF, 813px 1228px #FFF, 856px 384px #FFF, 354px 406px #FFF, 668px 1714px #FFF, 1764px 1011px #FFF, 1896px 1480px #FFF, 1134px 1941px #FFF, 363px 1782px #FFF, 1571px 1048px #FFF, 232px 1554px #FFF, 1565px 1925px #FFF, 349px 262px #FFF, 1922px 1865px #FFF, 1010px 862px #FFF, 1176px 641px #FFF, 359px 1661px #FFF, 1711px 1511px #FFF, 1554px 1964px #FFF, 37px 801px #FFF, 1275px 568px #FFF, 1902px 1419px #FFF, 776px 1544px #FFF, 1382px 237px #FFF, 1255px 778px #FFF, 1877px 1858px #FFF, 46px 598px #FFF, 1894px 67px #FFF, 1514px 105px #FFF, 660px 1181px #FFF, 308px 1566px #FFF, 1655px 1882px #FFF, 1686px 1525px #FFF, 157px 1985px #FFF, 1359px 1439px #FFF, 449px 1631px #FFF, 346px 1566px #FFF, 451px 1460px #FFF, 806px 511px #FFF, 842px 1132px #FFF, 569px 1740px #FFF, 1305px 819px #FFF, 1986px 1316px #FFF, 975px 726px #FFF, 663px 819px #FFF, 1493px 1832px #FFF, 1987px 797px #FFF, 951px 881px #FFF, 1998px 1901px #FFF, 472px 1829px #FFF, 1493px 1858px #FFF, 1756px 1647px #FFF, 652px 1903px #FFF, 863px 1794px #FFF, 63px 1984px #FFF, 379px 799px #FFF, 501px 1582px #FFF, 793px 292px #FFF, 190px 1846px #FFF, 620px 1776px #FFF, 234px 349px #FFF, 453px 1860px #FFF, 99px 1756px #FFF, 715px 1290px #FFF, 1957px 134px #FFF, 1099px 1030px #FFF, 1051px 1093px #FFF, 613px 500px #FFF, 955px 196px #FFF, 242px 976px #FFF, 1020px 191px #FFF, 370px 347px #FFF, 1481px 621px #FFF, 1959px 1450px #FFF, 743px 1178px #FFF, 73px 597px #FFF, 499px 645px #FFF, 769px 1635px #FFF, 1663px 291px #FFF, 1738px 1729px #FFF, 646px 832px #FFF, 1750px 609px #FFF, 1047px 1379px #FFF, 127px 1893px #FFF, 1949px 1890px #FFF, 1347px 914px #FFF, 323px 361px #FFF, 918px 1330px #FFF, 347px 184px #FFF, 1262px 1201px #FFF, 1563px 906px #FFF, 1996px 1168px #FFF, 1302px 1251px #FFF, 148px 247px #FFF, 38px 1523px #FFF, 1706px 1070px #FFF, 1031px 758px #FFF, 656px 201px #FFF, 473px 1830px #FFF, 1292px 1445px #FFF, 1807px 589px #FFF, 929px 157px #FFF, 1936px 569px #FFF, 762px 1469px #FFF, 55px 435px #FFF, 260px 428px #FFF, 1945px 1411px #FFF, 103px 224px #FFF, 998px 1164px #FFF, 1479px 1757px #FFF, 302px 741px #FFF, 1895px 15px #FFF, 11px 801px #FFF, 565px 1178px #FFF, 1628px 1464px #FFF, 99px 1357px #FFF, 563px 569px #FFF, 1359px 376px #FFF, 1420px 1723px #FFF, 821px 1851px #FFF, 1860px 429px #FFF, 1947px 132px #FFF, 1236px 1380px #FFF, 906px 593px #FFF, 1320px 1689px #FFF, 100px 1529px #FFF, 1292px 258px #FFF, 934px 1482px #FFF, 1779px 1205px #FFF, 1378px 1429px #FFF, 1563px 816px #FFF, 852px 1084px #FFF, 1292px 1200px #FFF, 1996px 611px #FFF, 1249px 971px #FFF, 114px 1272px #FFF, 1557px 1495px #FFF, 693px 22px #FFF, 1937px 873px #FFF, 364px 1909px #FFF, 1012px 471px #FFF, 982px 1606px #FFF, 426px 1px #FFF, 703px 687px #FFF, 1488px 230px #FFF, 1876px 209px #FFF, 839px 558px #FFF, 670px 840px #FFF, 1242px 1302px #FFF, 207px 558px #FFF, 721px 186px #FFF, 451px 1318px #FFF, 119px 1877px #FFF, 106px 898px #FFF, 1552px 463px #FFF, 132px 1475px #FFF, 1466px 1324px #FFF, 1731px 1849px #FFF, 1039px 1978px #FFF, 1321px 977px #FFF, 915px 1681px #FFF, 272px 1057px #FFF, 550px 1983px #FFF, 1167px 1119px #FFF, 1413px 320px #FFF, 1809px 929px #FFF, 1659px 621px #FFF, 742px 321px #FFF, 343px 624px #FFF, 1280px 1491px #FFF, 873px 1367px #FFF, 810px 1664px #FFF, 1382px 1856px #FFF, 1220px 622px #FFF, 1151px 780px #FFF, 1391px 1235px #FFF, 1203px 461px #FFF, 1304px 8px #FFF, 1208px 464px #FFF, 375px 1838px #FFF, 1483px 875px #FFF, 1964px 1785px #FFF, 776px 1544px #FFF, 1542px 1320px #FFF, 403px 1694px #FFF, 576px 159px #FFF, 484px 1528px #FFF, 1390px 150px #FFF, 509px 106px #FFF, 888px 20px #FFF, 173px 305px #FFF, 1671px 379px #FFF, 1452px 437px #FFF, 417px 1255px #FFF, 1818px 31px #FFF, 465px 476px #FFF, 1583px 196px #FFF, 1242px 657px #FFF, 156px 1903px #FFF, 912px 382px #FFF, 482px 1693px #FFF, 1720px 390px #FFF, 361px 800px #FFF, 163px 326px #FFF, 1289px 317px #FFF, 65px 1625px #FFF, 114px 421px #FFF, 1918px 1745px #FFF, 1997px 198px #FFF, 1718px 255px #FFF, 1595px 685px #FFF, 1601px 1724px #FFF, 28px 730px #FFF, 1566px 200px #FFF, 1171px 1332px #FFF, 44px 599px #FFF, 1803px 676px #FFF, 1875px 41px #FFF, 904px 1204px #FFF, 1135px 1468px #FFF, 1654px 353px #FFF, 1682px 535px #FFF, 1269px 1329px #FFF, 706px 944px #FFF, 1246px 304px #FFF, 1946px 313px #FFF, 750px 1843px #FFF, 1345px 1531px #FFF, 1980px 757px #FFF, 494px 907px #FFF, 639px 1370px #FFF, 815px 1939px #FFF, 1765px 1469px #FFF, 385px 1976px #FFF, 1144px 983px #FFF, 1805px 246px #FFF, 976px 1018px #FFF, 655px 460px #FFF, 1910px 1428px #FFF, 1607px 1641px #FFF, 239px 1189px #FFF, 18px 1601px #FFF, 1338px 570px #FFF, 1677px 1050px #FFF, 1133px 1502px #FFF, 1465px 350px #FFF, 1411px 1289px #FFF, 274px 554px #FFF, 412px 448px #FFF, 870px 1878px #FFF, 1483px 590px #FFF, 776px 1902px #FFF, 698px 1905px #FFF, 43px 685px #FFF, 309px 1607px #FFF, 1085px 182px #FFF, 344px 693px #FFF, 1389px 114px #FFF, 927px 1087px #FFF, 758px 1904px #FFF, 1401px 1327px #FFF, 492px 1391px #FFF, 1994px 566px #FFF, 1098px 724px #FFF, 266px 1360px #FFF, 28px 841px #FFF, 1482px 1893px #FFF, 126px 1045px #FFF, 1772px 648px #FFF, 1427px 1769px #FFF, 870px 1946px #FFF, 1804px 1215px #FFF, 368px 910px #FFF, 1267px 1371px #FFF, 1589px 857px #FFF, 1265px 1830px #FFF, 1286px 1388px #FFF, 1962px 794px #FFF, 452px 53px #FFF, 431px 1582px #FFF, 715px 951px #FFF, 1495px 17px #FFF, 1772px 1807px #FFF, 639px 747px #FFF, 1427px 1832px #FFF, 1300px 7px #FFF, 443px 1536px #FFF, 516px 1367px #FFF, 106px 303px #FFF, 671px 807px #FFF, 248px 1800px #FFF, 735px 689px #FFF, 101px 596px #FFF, 923px 978px #FFF, 1076px 454px #FFF, 1774px 1542px #FFF, 1427px 1867px #FFF, 479px 920px #FFF, 985px 684px #FFF, 1673px 1274px #FFF, 322px 889px #FFF, 1572px 1996px #FFF, 437px 1673px #FFF, 550px 800px #FFF, 1489px 1049px #FFF, 247px 1977px #FFF, 1076px 85px #FFF, 393px 429px #FFF, 644px 571px #FFF, 1487px 55px #FFF, 552px 1523px #FFF, 1468px 506px #FFF, 1593px 1524px #FFF, 581px 1055px #FFF, 249px 1300px #FFF, 703px 583px #FFF, 775px 1468px #FFF, 383px 636px #FFF, 689px 1764px #FFF, 19px 1601px #FFF, 1031px 27px #FFF, 818px 106px #FFF, 1690px 155px #FFF, 1132px 927px #FFF, 119px 122px #FFF, 1694px 1171px #FFF, 1187px 1560px #FFF, 606px 159px #FFF, 621px 765px #FFF, 331px 200px #FFF, 1369px 1099px #FFF, 1717px 1396px #FFF, 1303px 986px #FFF, 473px 1555px #FFF, 1697px 1078px #FFF, 444px 543px #FFF, 1078px 1828px #FFF, 374px 1115px #FFF, 494px 958px #FFF, 24px 1568px #FFF, 1178px 436px #FFF, 22px 1518px #FFF, 1536px 1973px #FFF, 217px 597px #FFF, 204px 214px #FFF, 792px 1090px #FFF, 1176px 491px #FFF, 1674px 1342px #FFF, 1367px 911px #FFF, 1640px 357px #FFF, 1522px 1889px #FFF, 331px 1337px #FFF, 1522px 1448px #FFF, 1749px 940px #FFF, 1176px 203px #FFF, 966px 1962px #FFF, 58px 574px #FFF, 912px 1839px #FFF, 515px 363px #FFF, 529px 895px #FFF, 762px 1649px #FFF, 1512px 180px #FFF, 1808px 1238px #FFF, 1090px 671px #FFF, 699px 1107px #FFF, 887px 145px #FFF, 1335px 1808px #FFF, 589px 523px #FFF, 1759px 1498px #FFF, 1544px 1444px #FFF, 667px 279px #FFF, 1757px 1501px #FFF, 793px 222px #FFF, 391px 1244px #FFF, 332px 761px #FFF, 1271px 490px #FFF, 1991px 1408px #FFF, 719px 1917px #FFF, 1180px 659px #FFF, 275px 1634px #FFF, 1763px 471px #FFF, 144px 757px #FFF, 668px 12px #FFF, 1291px 912px #FFF, 62px 422px #FFF, 93px 1577px #FFF, 860px 664px #FFF, 1283px 787px #FFF, 964px 1635px #FFF, 1249px 1324px #FFF, 30px 179px #FFF, 1548px 1082px #FFF, 1436px 1868px #FFF, 1409px 245px #FFF, 709px 1101px #FFF, 248px 676px #FFF, 97px 187px #FFF, 1329px 1010px #FFF, 1919px 1489px #FFF, 1589px 1912px #FFF, 1966px 1939px #FFF, 273px 559px #FFF, 291px 1433px #FFF, 1632px 1763px #FFF, 829px 1701px #FFF, 1174px 799px #FFF, 1046px 1379px #FFF, 1353px 68px #FFF, 268px 1594px #FFF, 425px 797px #FFF, 58px 29px #FFF, 1776px 345px #FFF, 1839px 1854px #FFF, 970px 145px #FFF, 1258px 1298px #FFF, 1006px 1872px #FFF, 896px 1752px #FFF, 992px 1633px #FFF, 888px 183px #FFF, 1218px 587px #FFF, 1253px 1366px #FFF, 1689px 65px #FFF, 686px 80px #FFF, 1243px 1797px #FFF, 1460px 493px #FFF, 1731px 40px #FFF, 1050px 36px #FFF, 1948px 1379px #FFF, 307px 1941px #FFF, 359px 1065px #FFF, 1620px 592px #FFF, 1832px 1368px #FFF, 1764px 1005px #FFF, 1818px 1368px #FFF, 1381px 164px #FFF, 941px 387px #FFF, 148px 105px #FFF, 1116px 801px #FFF, 638px 1562px #FFF, 1228px 1712px #FFF, 1130px 1201px #FFF, 79px 413px #FFF, 978px 1741px #FFF, 1479px 211px #FFF, 1634px 507px #FFF, 691px 1992px #FFF, 718px 1061px #FFF, 1131px 1152px #FFF, 896px 1523px #FFF, 1932px 858px #FFF, 1644px 221px #FFF, 1236px 816px #FFF, 1056px 1897px #FFF, 1323px 1406px #FFF, 298px 770px #FFF, 542px 1897px #FFF, 834px 443px #FFF, 610px 14px #FFF, 379px 47px #FFF, 1681px 1412px #FFF, 1546px 281px #FFF, 248px 411px #FFF, 919px 436px #FFF, 1865px 1255px #FFF, 198px 711px #FFF; animation: animStar 50s linear infinite; } #stars:after { content: " "; position: absolute; top: 2000px; width: 1px; height: 1px; background: transparent; box-shadow: 1800px 451px #FFF, 1918px 538px #FFF, 1292px 689px #FFF, 1346px 793px #FFF, 350px 773px #FFF, 1420px 741px #FFF, 175px 222px #FFF, 710px 1366px #FFF, 1732px 112px #FFF, 898px 751px #FFF, 35px 422px #FFF, 197px 882px #FFF, 1907px 501px #FFF, 570px 815px #FFF, 751px 859px #FFF, 1865px 1327px #FFF, 1328px 873px #FFF, 1661px 478px #FFF, 436px 830px #FFF, 726px 859px #FFF, 489px 1787px #FFF, 1151px 1051px #FFF, 1160px 304px #FFF, 137px 1149px #FFF, 1210px 701px #FFF, 1428px 1365px #FFF, 213px 1065px #FFF, 1032px 1961px #FFF, 721px 552px #FFF, 679px 303px #FFF, 515px 1988px #FFF, 1780px 1100px #FFF, 894px 1534px #FFF, 1788px 1208px #FFF, 1883px 1989px #FFF, 398px 849px #FFF, 1238px 1520px #FFF, 749px 428px #FFF, 1210px 1456px #FFF, 1765px 349px #FFF, 1934px 780px #FFF, 572px 1601px #FFF, 1770px 1279px #FFF, 1520px 1298px #FFF, 1757px 487px #FFF, 1842px 931px #FFF, 253px 383px #FFF, 967px 195px #FFF, 1368px 729px #FFF, 1303px 209px #FFF, 1392px 1241px #FFF, 95px 410px #FFF, 629px 1454px #FFF, 1991px 1182px #FFF, 1321px 1928px #FFF, 1176px 300px #FFF, 707px 1335px #FFF, 1293px 1324px #FFF, 1354px 1394px #FFF, 1730px 988px #FFF, 761px 852px #FFF, 562px 846px #FFF, 1806px 1285px #FFF, 991px 1430px #FFF, 1198px 617px #FFF, 916px 91px #FFF, 692px 767px #FFF, 1664px 80px #FFF, 1832px 1319px #FFF, 1840px 1241px #FFF, 872px 1483px #FFF, 202px 1973px #FFF, 24px 365px #FFF, 692px 1420px #FFF, 1880px 1182px #FFF, 116px 1802px #FFF, 1474px 10px #FFF, 386px 1404px #FFF, 1386px 224px #FFF, 504px 786px #FFF, 735px 710px #FFF, 600px 1267px #FFF, 973px 917px #FFF, 176px 1336px #FFF, 153px 792px #FFF, 1236px 627px #FFF, 1889px 1820px #FFF, 1069px 331px #FFF, 1779px 1883px #FFF, 1598px 51px #FFF, 1579px 898px #FFF, 763px 1972px #FFF, 1077px 1375px #FFF, 1861px 883px #FFF, 341px 1125px #FFF, 1163px 1251px #FFF, 1473px 1811px #FFF, 1310px 1082px #FFF, 631px 1552px #FFF, 189px 1146px #FFF, 870px 1923px #FFF, 1201px 1586px #FFF, 69px 1094px #FFF, 442px 1535px #FFF, 1645px 1448px #FFF, 711px 953px #FFF, 1300px 1027px #FFF, 1181px 373px #FFF, 1857px 1513px #FFF, 842px 1520px #FFF, 1943px 1439px #FFF, 1616px 1216px #FFF, 907px 1608px #FFF, 1874px 939px #FFF, 1191px 614px #FFF, 942px 1736px #FFF, 893px 997px #FFF, 1691px 1962px #FFF, 1940px 1229px #FFF, 469px 1573px #FFF, 388px 1122px #FFF, 476px 1882px #FFF, 426px 185px #FFF, 217px 1546px #FFF, 647px 324px #FFF, 677px 1825px #FFF, 712px 23px #FFF, 337px 1361px #FFF, 1161px 350px #FFF, 536px 931px #FFF, 1209px 1891px #FFF, 592px 1155px #FFF, 448px 1126px #FFF, 1909px 806px #FFF, 877px 860px #FFF, 1038px 295px #FFF, 759px 395px #FFF, 1576px 1733px #FFF, 1467px 335px #FFF, 79px 262px #FFF, 683px 472px #FFF, 643px 1365px #FFF, 333px 1482px #FFF, 1026px 1230px #FFF, 168px 1153px #FFF, 417px 624px #FFF, 246px 1517px #FFF, 824px 547px #FFF, 1475px 133px #FFF, 1884px 186px #FFF, 1367px 222px #FFF, 1084px 927px #FFF, 1875px 232px #FFF, 574px 1847px #FFF, 1570px 1598px #FFF, 988px 307px #FFF, 1422px 194px #FFF, 1053px 1875px #FFF, 974px 388px #FFF, 562px 655px #FFF, 1895px 658px #FFF, 1030px 1748px #FFF, 1820px 970px #FFF, 1745px 595px #FFF, 1843px 762px #FFF, 1080px 991px #FFF, 337px 816px #FFF, 1653px 897px #FFF, 591px 722px #FFF, 1007px 1895px #FFF, 265px 725px #FFF, 482px 1386px #FFF, 1300px 1208px #FFF, 1247px 1704px #FFF, 1133px 801px #FFF, 1747px 584px #FFF, 636px 388px #FFF, 1949px 1779px #FFF, 682px 1880px #FFF, 1010px 850px #FFF, 1424px 1949px #FFF, 643px 906px #FFF, 710px 1391px #FFF, 1501px 1913px #FFF, 1611px 29px #FFF, 450px 553px #FFF, 321px 1490px #FFF, 485px 1451px #FFF, 383px 752px #FFF, 1343px 253px #FFF, 255px 56px #FFF, 1046px 860px #FFF, 1725px 1501px #FFF, 650px 1736px #FFF, 335px 437px #FFF, 68px 1982px #FFF, 118px 713px #FFF, 818px 1042px #FFF, 1362px 787px #FFF, 521px 189px #FFF, 1544px 1780px #FFF, 1425px 1993px #FFF, 504px 1243px #FFF, 191px 318px #FFF, 1974px 780px #FFF, 1187px 1802px #FFF, 1072px 981px #FFF, 1236px 798px #FFF, 1706px 911px #FFF, 1585px 1377px #FFF, 490px 929px #FFF, 100px 599px #FFF, 1860px 885px #FFF, 1664px 1945px #FFF, 745px 814px #FFF, 862px 1182px #FFF, 3px 1778px #FFF, 1355px 1008px #FFF, 1215px 321px #FFF, 660px 1601px #FFF, 264px 1139px #FFF, 696px 1357px #FFF, 403px 1209px #FFF, 43px 633px #FFF, 1717px 1480px #FFF, 5px 619px #FFF, 1545px 295px #FFF, 1000px 468px #FFF, 468px 1224px #FFF, 851px 1650px #FFF, 295px 435px #FFF, 158px 1795px #FFF, 837px 552px #FFF, 1178px 1389px #FFF, 99px 1916px #FFF, 185px 1648px #FFF, 813px 1228px #FFF, 856px 384px #FFF, 354px 406px #FFF, 668px 1714px #FFF, 1764px 1011px #FFF, 1896px 1480px #FFF, 1134px 1941px #FFF, 363px 1782px #FFF, 1571px 1048px #FFF, 232px 1554px #FFF, 1565px 1925px #FFF, 349px 262px #FFF, 1922px 1865px #FFF, 1010px 862px #FFF, 1176px 641px #FFF, 359px 1661px #FFF, 1711px 1511px #FFF, 1554px 1964px #FFF, 37px 801px #FFF, 1275px 568px #FFF, 1902px 1419px #FFF, 776px 1544px #FFF, 1382px 237px #FFF, 1255px 778px #FFF, 1877px 1858px #FFF, 46px 598px #FFF, 1894px 67px #FFF, 1514px 105px #FFF, 660px 1181px #FFF, 308px 1566px #FFF, 1655px 1882px #FFF, 1686px 1525px #FFF, 157px 1985px #FFF, 1359px 1439px #FFF, 449px 1631px #FFF, 346px 1566px #FFF, 451px 1460px #FFF, 806px 511px #FFF, 842px 1132px #FFF, 569px 1740px #FFF, 1305px 819px #FFF, 1986px 1316px #FFF, 975px 726px #FFF, 663px 819px #FFF, 1493px 1832px #FFF, 1987px 797px #FFF, 951px 881px #FFF, 1998px 1901px #FFF, 472px 1829px #FFF, 1493px 1858px #FFF, 1756px 1647px #FFF, 652px 1903px #FFF, 863px 1794px #FFF, 63px 1984px #FFF, 379px 799px #FFF, 501px 1582px #FFF, 793px 292px #FFF, 190px 1846px #FFF, 620px 1776px #FFF, 234px 349px #FFF, 453px 1860px #FFF, 99px 1756px #FFF, 715px 1290px #FFF, 1957px 134px #FFF, 1099px 1030px #FFF, 1051px 1093px #FFF, 613px 500px #FFF, 955px 196px #FFF, 242px 976px #FFF, 1020px 191px #FFF, 370px 347px #FFF, 1481px 621px #FFF, 1959px 1450px #FFF, 743px 1178px #FFF, 73px 597px #FFF, 499px 645px #FFF, 769px 1635px #FFF, 1663px 291px #FFF, 1738px 1729px #FFF, 646px 832px #FFF, 1750px 609px #FFF, 1047px 1379px #FFF, 127px 1893px #FFF, 1949px 1890px #FFF, 1347px 914px #FFF, 323px 361px #FFF, 918px 1330px #FFF, 347px 184px #FFF, 1262px 1201px #FFF, 1563px 906px #FFF, 1996px 1168px #FFF, 1302px 1251px #FFF, 148px 247px #FFF, 38px 1523px #FFF, 1706px 1070px #FFF, 1031px 758px #FFF, 656px 201px #FFF, 473px 1830px #FFF, 1292px 1445px #FFF, 1807px 589px #FFF, 929px 157px #FFF, 1936px 569px #FFF, 762px 1469px #FFF, 55px 435px #FFF, 260px 428px #FFF, 1945px 1411px #FFF, 103px 224px #FFF, 998px 1164px #FFF, 1479px 1757px #FFF, 302px 741px #FFF, 1895px 15px #FFF, 11px 801px #FFF, 565px 1178px #FFF, 1628px 1464px #FFF, 99px 1357px #FFF, 563px 569px #FFF, 1359px 376px #FFF, 1420px 1723px #FFF, 821px 1851px #FFF, 1860px 429px #FFF, 1947px 132px #FFF, 1236px 1380px #FFF, 906px 593px #FFF, 1320px 1689px #FFF, 100px 1529px #FFF, 1292px 258px #FFF, 934px 1482px #FFF, 1779px 1205px #FFF, 1378px 1429px #FFF, 1563px 816px #FFF, 852px 1084px #FFF, 1292px 1200px #FFF, 1996px 611px #FFF, 1249px 971px #FFF, 114px 1272px #FFF, 1557px 1495px #FFF, 693px 22px #FFF, 1937px 873px #FFF, 364px 1909px #FFF, 1012px 471px #FFF, 982px 1606px #FFF, 426px 1px #FFF, 703px 687px #FFF, 1488px 230px #FFF, 1876px 209px #FFF, 839px 558px #FFF, 670px 840px #FFF, 1242px 1302px #FFF, 207px 558px #FFF, 721px 186px #FFF, 451px 1318px #FFF, 119px 1877px #FFF, 106px 898px #FFF, 1552px 463px #FFF, 132px 1475px #FFF, 1466px 1324px #FFF, 1731px 1849px #FFF, 1039px 1978px #FFF, 1321px 977px #FFF, 915px 1681px #FFF, 272px 1057px #FFF, 550px 1983px #FFF, 1167px 1119px #FFF, 1413px 320px #FFF, 1809px 929px #FFF, 1659px 621px #FFF, 742px 321px #FFF, 343px 624px #FFF, 1280px 1491px #FFF, 873px 1367px #FFF, 810px 1664px #FFF, 1382px 1856px #FFF, 1220px 622px #FFF, 1151px 780px #FFF, 1391px 1235px #FFF, 1203px 461px #FFF, 1304px 8px #FFF, 1208px 464px #FFF, 375px 1838px #FFF, 1483px 875px #FFF, 1964px 1785px #FFF, 776px 1544px #FFF, 1542px 1320px #FFF, 403px 1694px #FFF, 576px 159px #FFF, 484px 1528px #FFF, 1390px 150px #FFF, 509px 106px #FFF, 888px 20px #FFF, 173px 305px #FFF, 1671px 379px #FFF, 1452px 437px #FFF, 417px 1255px #FFF, 1818px 31px #FFF, 465px 476px #FFF, 1583px 196px #FFF, 1242px 657px #FFF, 156px 1903px #FFF, 912px 382px #FFF, 482px 1693px #FFF, 1720px 390px #FFF, 361px 800px #FFF, 163px 326px #FFF, 1289px 317px #FFF, 65px 1625px #FFF, 114px 421px #FFF, 1918px 1745px #FFF, 1997px 198px #FFF, 1718px 255px #FFF, 1595px 685px #FFF, 1601px 1724px #FFF, 28px 730px #FFF, 1566px 200px #FFF, 1171px 1332px #FFF, 44px 599px #FFF, 1803px 676px #FFF, 1875px 41px #FFF, 904px 1204px #FFF, 1135px 1468px #FFF, 1654px 353px #FFF, 1682px 535px #FFF, 1269px 1329px #FFF, 706px 944px #FFF, 1246px 304px #FFF, 1946px 313px #FFF, 750px 1843px #FFF, 1345px 1531px #FFF, 1980px 757px #FFF, 494px 907px #FFF, 639px 1370px #FFF, 815px 1939px #FFF, 1765px 1469px #FFF, 385px 1976px #FFF, 1144px 983px #FFF, 1805px 246px #FFF, 976px 1018px #FFF, 655px 460px #FFF, 1910px 1428px #FFF, 1607px 1641px #FFF, 239px 1189px #FFF, 18px 1601px #FFF, 1338px 570px #FFF, 1677px 1050px #FFF, 1133px 1502px #FFF, 1465px 350px #FFF, 1411px 1289px #FFF, 274px 554px #FFF, 412px 448px #FFF, 870px 1878px #FFF, 1483px 590px #FFF, 776px 1902px #FFF, 698px 1905px #FFF, 43px 685px #FFF, 309px 1607px #FFF, 1085px 182px #FFF, 344px 693px #FFF, 1389px 114px #FFF, 927px 1087px #FFF, 758px 1904px #FFF, 1401px 1327px #FFF, 492px 1391px #FFF, 1994px 566px #FFF, 1098px 724px #FFF, 266px 1360px #FFF, 28px 841px #FFF, 1482px 1893px #FFF, 126px 1045px #FFF, 1772px 648px #FFF, 1427px 1769px #FFF, 870px 1946px #FFF, 1804px 1215px #FFF, 368px 910px #FFF, 1267px 1371px #FFF, 1589px 857px #FFF, 1265px 1830px #FFF, 1286px 1388px #FFF, 1962px 794px #FFF, 452px 53px #FFF, 431px 1582px #FFF, 715px 951px #FFF, 1495px 17px #FFF, 1772px 1807px #FFF, 639px 747px #FFF, 1427px 1832px #FFF, 1300px 7px #FFF, 443px 1536px #FFF, 516px 1367px #FFF, 106px 303px #FFF, 671px 807px #FFF, 248px 1800px #FFF, 735px 689px #FFF, 101px 596px #FFF, 923px 978px #FFF, 1076px 454px #FFF, 1774px 1542px #FFF, 1427px 1867px #FFF, 479px 920px #FFF, 985px 684px #FFF, 1673px 1274px #FFF, 322px 889px #FFF, 1572px 1996px #FFF, 437px 1673px #FFF, 550px 800px #FFF, 1489px 1049px #FFF, 247px 1977px #FFF, 1076px 85px #FFF, 393px 429px #FFF, 644px 571px #FFF, 1487px 55px #FFF, 552px 1523px #FFF, 1468px 506px #FFF, 1593px 1524px #FFF, 581px 1055px #FFF, 249px 1300px #FFF, 703px 583px #FFF, 775px 1468px #FFF, 383px 636px #FFF, 689px 1764px #FFF, 19px 1601px #FFF, 1031px 27px #FFF, 818px 106px #FFF, 1690px 155px #FFF, 1132px 927px #FFF, 119px 122px #FFF, 1694px 1171px #FFF, 1187px 1560px #FFF, 606px 159px #FFF, 621px 765px #FFF, 331px 200px #FFF, 1369px 1099px #FFF, 1717px 1396px #FFF, 1303px 986px #FFF, 473px 1555px #FFF, 1697px 1078px #FFF, 444px 543px #FFF, 1078px 1828px #FFF, 374px 1115px #FFF, 494px 958px #FFF, 24px 1568px #FFF, 1178px 436px #FFF, 22px 1518px #FFF, 1536px 1973px #FFF, 217px 597px #FFF, 204px 214px #FFF, 792px 1090px #FFF, 1176px 491px #FFF, 1674px 1342px #FFF, 1367px 911px #FFF, 1640px 357px #FFF, 1522px 1889px #FFF, 331px 1337px #FFF, 1522px 1448px #FFF, 1749px 940px #FFF, 1176px 203px #FFF, 966px 1962px #FFF, 58px 574px #FFF, 912px 1839px #FFF, 515px 363px #FFF, 529px 895px #FFF, 762px 1649px #FFF, 1512px 180px #FFF, 1808px 1238px #FFF, 1090px 671px #FFF, 699px 1107px #FFF, 887px 145px #FFF, 1335px 1808px #FFF, 589px 523px #FFF, 1759px 1498px #FFF, 1544px 1444px #FFF, 667px 279px #FFF, 1757px 1501px #FFF, 793px 222px #FFF, 391px 1244px #FFF, 332px 761px #FFF, 1271px 490px #FFF, 1991px 1408px #FFF, 719px 1917px #FFF, 1180px 659px #FFF, 275px 1634px #FFF, 1763px 471px #FFF, 144px 757px #FFF, 668px 12px #FFF, 1291px 912px #FFF, 62px 422px #FFF, 93px 1577px #FFF, 860px 664px #FFF, 1283px 787px #FFF, 964px 1635px #FFF, 1249px 1324px #FFF, 30px 179px #FFF, 1548px 1082px #FFF, 1436px 1868px #FFF, 1409px 245px #FFF, 709px 1101px #FFF, 248px 676px #FFF, 97px 187px #FFF, 1329px 1010px #FFF, 1919px 1489px #FFF, 1589px 1912px #FFF, 1966px 1939px #FFF, 273px 559px #FFF, 291px 1433px #FFF, 1632px 1763px #FFF, 829px 1701px #FFF, 1174px 799px #FFF, 1046px 1379px #FFF, 1353px 68px #FFF, 268px 1594px #FFF, 425px 797px #FFF, 58px 29px #FFF, 1776px 345px #FFF, 1839px 1854px #FFF, 970px 145px #FFF, 1258px 1298px #FFF, 1006px 1872px #FFF, 896px 1752px #FFF, 992px 1633px #FFF, 888px 183px #FFF, 1218px 587px #FFF, 1253px 1366px #FFF, 1689px 65px #FFF, 686px 80px #FFF, 1243px 1797px #FFF, 1460px 493px #FFF, 1731px 40px #FFF, 1050px 36px #FFF, 1948px 1379px #FFF, 307px 1941px #FFF, 359px 1065px #FFF, 1620px 592px #FFF, 1832px 1368px #FFF, 1764px 1005px #FFF, 1818px 1368px #FFF, 1381px 164px #FFF, 941px 387px #FFF, 148px 105px #FFF, 1116px 801px #FFF, 638px 1562px #FFF, 1228px 1712px #FFF, 1130px 1201px #FFF, 79px 413px #FFF, 978px 1741px #FFF, 1479px 211px #FFF, 1634px 507px #FFF, 691px 1992px #FFF, 718px 1061px #FFF, 1131px 1152px #FFF, 896px 1523px #FFF, 1932px 858px #FFF, 1644px 221px #FFF, 1236px 816px #FFF, 1056px 1897px #FFF, 1323px 1406px #FFF, 298px 770px #FFF, 542px 1897px #FFF, 834px 443px #FFF, 610px 14px #FFF, 379px 47px #FFF, 1681px 1412px #FFF, 1546px 281px #FFF, 248px 411px #FFF, 919px 436px #FFF, 1865px 1255px #FFF, 198px 711px #FFF; } #stars2 { width: 2px; height: 2px; background: transparent; box-shadow: 553px 1424px #FFF, 612px 376px #FFF, 722px 680px #FFF, 1821px 146px #FFF, 589px 459px #FFF, 500px 1533px #FFF, 1715px 68px #FFF, 1171px 1048px #FFF, 1642px 1470px #FFF, 1580px 819px #FFF, 1753px 210px #FFF, 334px 1893px #FFF, 1765px 1321px #FFF, 1035px 1064px #FFF, 539px 1028px #FFF, 619px 572px #FFF, 912px 643px #FFF, 733px 1134px #FFF, 1357px 1725px #FFF, 949px 1311px #FFF, 1577px 1767px #FFF, 1135px 730px #FFF, 839px 26px #FFF, 716px 735px #FFF, 1898px 446px #FFF, 1469px 1366px #FFF, 674px 785px #FFF, 914px 618px #FFF, 1500px 632px #FFF, 1697px 1392px #FFF, 152px 1994px #FFF, 1854px 1805px #FFF, 1791px 237px #FFF, 839px 844px #FFF, 282px 1377px #FFF, 993px 1847px #FFF, 1181px 926px #FFF, 1445px 183px #FFF, 1537px 1770px #FFF, 1930px 1512px #FFF, 1954px 676px #FFF, 963px 116px #FFF, 1190px 504px #FFF, 954px 841px #FFF, 697px 1318px #FFF, 1914px 107px #FFF, 1833px 8px #FFF, 746px 647px #FFF, 147px 299px #FFF, 937px 948px #FFF, 1529px 539px #FFF, 26px 1175px #FFF, 730px 384px #FFF, 230px 1073px #FFF, 660px 1012px #FFF, 682px 625px #FFF, 1005px 921px #FFF, 1973px 503px #FFF, 284px 1995px #FFF, 629px 851px #FFF, 275px 364px #FFF, 1848px 49px #FFF, 1009px 1775px #FFF, 1594px 1779px #FFF, 323px 853px #FFF, 1330px 1089px #FFF, 365px 259px #FFF, 360px 232px #FFF, 443px 1478px #FFF, 1455px 489px #FFF, 1096px 742px #FFF, 1156px 861px #FFF, 628px 430px #FFF, 1352px 705px #FFF, 1637px 19px #FFF, 1736px 1671px #FFF, 419px 1146px #FFF, 732px 576px #FFF, 1506px 1891px #FFF, 1466px 1546px #FFF, 545px 805px #FFF, 1439px 1422px #FFF, 418px 452px #FFF, 1041px 1372px #FFF, 629px 196px #FFF, 1428px 1400px #FFF, 711px 1986px #FFF, 157px 892px #FFF, 1759px 1305px #FFF, 1257px 1844px #FFF, 1910px 1694px #FFF, 1667px 590px #FFF, 1180px 1098px #FFF, 261px 1727px #FFF, 714px 1995px #FFF, 1307px 1216px #FFF, 1957px 577px #FFF, 1675px 1819px #FFF, 1722px 1376px #FFF, 685px 1749px #FFF, 1748px 1113px #FFF, 1100px 564px #FFF, 1502px 970px #FFF, 425px 9px #FFF, 824px 619px #FFF, 1972px 755px #FFF, 1358px 529px #FFF, 931px 980px #FFF, 280px 1872px #FFF, 1912px 753px #FFF, 1095px 1233px #FFF, 47px 1095px #FFF, 161px 417px #FFF, 407px 371px #FFF, 1131px 985px #FFF, 452px 772px #FFF, 1961px 1578px #FFF, 671px 1950px #FFF, 270px 597px #FFF, 926px 1592px #FFF, 1275px 1054px #FFF, 1403px 692px #FFF, 1310px 193px #FFF, 895px 110px #FFF, 1290px 113px #FFF, 1165px 545px #FFF, 1295px 1553px #FFF, 1679px 273px #FFF, 624px 792px #FFF, 357px 1497px #FFF, 981px 1895px #FFF, 593px 999px #FFF, 982px 1310px #FFF, 1543px 1365px #FFF, 1577px 649px #FFF, 126px 739px #FFF, 1637px 1066px #FFF, 93px 1269px #FFF, 1927px 70px #FFF, 519px 272px #FFF, 1630px 806px #FFF, 1707px 1579px #FFF, 1679px 1560px #FFF, 710px 473px #FFF, 1398px 795px #FFF, 1669px 1633px #FFF, 1904px 407px #FFF, 915px 575px #FFF, 856px 777px #FFF, 182px 541px #FFF, 81px 1682px #FFF, 1000px 1863px #FFF, 1593px 728px #FFF, 1004px 1795px #FFF, 1342px 1382px #FFF, 22px 51px #FFF, 686px 447px #FFF, 1512px 1316px #FFF, 892px 714px #FFF, 1422px 1516px #FFF, 17px 157px #FFF, 213px 272px #FFF, 1095px 180px #FFF, 1849px 322px #FFF, 1391px 1602px #FFF, 1659px 1684px #FFF, 868px 1428px #FFF, 494px 772px #FFF, 1231px 968px #FFF, 96px 1033px #FFF, 1496px 934px #FFF, 929px 806px #FFF, 1325px 1713px #FFF, 687px 1095px #FFF, 88px 1620px #FFF, 1089px 360px #FFF, 264px 1102px #FFF, 612px 234px #FFF, 641px 943px #FFF, 1330px 1129px #FFF, 231px 366px #FFF, 120px 220px #FFF, 1817px 987px #FFF, 1308px 59px #FFF, 426px 1538px #FFF, 15px 1936px #FFF, 1508px 1854px #FFF, 1847px 1331px #FFF, 1816px 143px #FFF, 1884px 1478px #FFF, 1782px 575px #FFF, 1080px 1522px #FFF, 359px 135px #FFF, 1430px 1642px #FFF, 1391px 1271px #FFF, 127px 743px #FFF, 94px 772px #FFF, 1509px 1894px #FFF, 1258px 1347px #FFF, 482px 582px #FFF; animation: animStar 100s linear infinite; } #stars2:after { content: " "; position: absolute; top: 2000px; width: 2px; height: 2px; background: transparent; box-shadow: 553px 1424px #FFF, 612px 376px #FFF, 722px 680px #FFF, 1821px 146px #FFF, 589px 459px #FFF, 500px 1533px #FFF, 1715px 68px #FFF, 1171px 1048px #FFF, 1642px 1470px #FFF, 1580px 819px #FFF, 1753px 210px #FFF, 334px 1893px #FFF, 1765px 1321px #FFF, 1035px 1064px #FFF, 539px 1028px #FFF, 619px 572px #FFF, 912px 643px #FFF, 733px 1134px #FFF, 1357px 1725px #FFF, 949px 1311px #FFF, 1577px 1767px #FFF, 1135px 730px #FFF, 839px 26px #FFF, 716px 735px #FFF, 1898px 446px #FFF, 1469px 1366px #FFF, 674px 785px #FFF, 914px 618px #FFF, 1500px 632px #FFF, 1697px 1392px #FFF, 152px 1994px #FFF, 1854px 1805px #FFF, 1791px 237px #FFF, 839px 844px #FFF, 282px 1377px #FFF, 993px 1847px #FFF, 1181px 926px #FFF, 1445px 183px #FFF, 1537px 1770px #FFF, 1930px 1512px #FFF, 1954px 676px #FFF, 963px 116px #FFF, 1190px 504px #FFF, 954px 841px #FFF, 697px 1318px #FFF, 1914px 107px #FFF, 1833px 8px #FFF, 746px 647px #FFF, 147px 299px #FFF, 937px 948px #FFF, 1529px 539px #FFF, 26px 1175px #FFF, 730px 384px #FFF, 230px 1073px #FFF, 660px 1012px #FFF, 682px 625px #FFF, 1005px 921px #FFF, 1973px 503px #FFF, 284px 1995px #FFF, 629px 851px #FFF, 275px 364px #FFF, 1848px 49px #FFF, 1009px 1775px #FFF, 1594px 1779px #FFF, 323px 853px #FFF, 1330px 1089px #FFF, 365px 259px #FFF, 360px 232px #FFF, 443px 1478px #FFF, 1455px 489px #FFF, 1096px 742px #FFF, 1156px 861px #FFF, 628px 430px #FFF, 1352px 705px #FFF, 1637px 19px #FFF, 1736px 1671px #FFF, 419px 1146px #FFF, 732px 576px #FFF, 1506px 1891px #FFF, 1466px 1546px #FFF, 545px 805px #FFF, 1439px 1422px #FFF, 418px 452px #FFF, 1041px 1372px #FFF, 629px 196px #FFF, 1428px 1400px #FFF, 711px 1986px #FFF, 157px 892px #FFF, 1759px 1305px #FFF, 1257px 1844px #FFF, 1910px 1694px #FFF, 1667px 590px #FFF, 1180px 1098px #FFF, 261px 1727px #FFF, 714px 1995px #FFF, 1307px 1216px #FFF, 1957px 577px #FFF, 1675px 1819px #FFF, 1722px 1376px #FFF, 685px 1749px #FFF, 1748px 1113px #FFF, 1100px 564px #FFF, 1502px 970px #FFF, 425px 9px #FFF, 824px 619px #FFF, 1972px 755px #FFF, 1358px 529px #FFF, 931px 980px #FFF, 280px 1872px #FFF, 1912px 753px #FFF, 1095px 1233px #FFF, 47px 1095px #FFF, 161px 417px #FFF, 407px 371px #FFF, 1131px 985px #FFF, 452px 772px #FFF, 1961px 1578px #FFF, 671px 1950px #FFF, 270px 597px #FFF, 926px 1592px #FFF, 1275px 1054px #FFF, 1403px 692px #FFF, 1310px 193px #FFF, 895px 110px #FFF, 1290px 113px #FFF, 1165px 545px #FFF, 1295px 1553px #FFF, 1679px 273px #FFF, 624px 792px #FFF, 357px 1497px #FFF, 981px 1895px #FFF, 593px 999px #FFF, 982px 1310px #FFF, 1543px 1365px #FFF, 1577px 649px #FFF, 126px 739px #FFF, 1637px 1066px #FFF, 93px 1269px #FFF, 1927px 70px #FFF, 519px 272px #FFF, 1630px 806px #FFF, 1707px 1579px #FFF, 1679px 1560px #FFF, 710px 473px #FFF, 1398px 795px #FFF, 1669px 1633px #FFF, 1904px 407px #FFF, 915px 575px #FFF, 856px 777px #FFF, 182px 541px #FFF, 81px 1682px #FFF, 1000px 1863px #FFF, 1593px 728px #FFF, 1004px 1795px #FFF, 1342px 1382px #FFF, 22px 51px #FFF, 686px 447px #FFF, 1512px 1316px #FFF, 892px 714px #FFF, 1422px 1516px #FFF, 17px 157px #FFF, 213px 272px #FFF, 1095px 180px #FFF, 1849px 322px #FFF, 1391px 1602px #FFF, 1659px 1684px #FFF, 868px 1428px #FFF, 494px 772px #FFF, 1231px 968px #FFF, 96px 1033px #FFF, 1496px 934px #FFF, 929px 806px #FFF, 1325px 1713px #FFF, 687px 1095px #FFF, 88px 1620px #FFF, 1089px 360px #FFF, 264px 1102px #FFF, 612px 234px #FFF, 641px 943px #FFF, 1330px 1129px #FFF, 231px 366px #FFF, 120px 220px #FFF, 1817px 987px #FFF, 1308px 59px #FFF, 426px 1538px #FFF, 15px 1936px #FFF, 1508px 1854px #FFF, 1847px 1331px #FFF, 1816px 143px #FFF, 1884px 1478px #FFF, 1782px 575px #FFF, 1080px 1522px #FFF, 359px 135px #FFF, 1430px 1642px #FFF, 1391px 1271px #FFF, 127px 743px #FFF, 94px 772px #FFF, 1509px 1894px #FFF, 1258px 1347px #FFF, 482px 582px #FFF; } #stars3 { width: 3px; height: 3px; background: transparent; box-shadow: 571px 173px #FFF, 1732px 143px #FFF, 1745px 454px #FFF, 234px 784px #FFF, 1793px 1123px #FFF, 1076px 504px #FFF, 633px 601px #FFF, 350px 630px #FFF, 1164px 782px #FFF, 76px 690px #FFF, 1825px 701px #FFF, 1646px 578px #FFF, 544px 293px #FFF, 445px 1061px #FFF, 928px 47px #FFF, 168px 1410px #FFF, 777px 782px #FFF, 1235px 1941px #FFF, 104px 1690px #FFF, 1167px 1338px #FFF, 345px 1652px #FFF, 1682px 1196px #FFF, 1995px 494px #FFF, 428px 798px #FFF, 340px 1623px #FFF, 605px 349px #FFF, 1339px 1344px #FFF, 1102px 1745px #FFF, 1592px 1676px #FFF, 419px 1024px #FFF, 630px 1033px #FFF, 1995px 1644px #FFF, 1092px 712px #FFF, 1355px 606px #FFF, 622px 1881px #FFF, 1481px 621px #FFF, 19px 1348px #FFF, 864px 1780px #FFF, 442px 1136px #FFF, 67px 712px #FFF, 89px 1406px #FFF, 275px 321px #FFF, 592px 630px #FFF, 1012px 1690px #FFF, 1749px 23px #FFF, 94px 1542px #FFF, 1201px 1657px #FFF, 1505px 692px #FFF, 1799px 601px #FFF, 656px 811px #FFF, 701px 597px #FFF, 1202px 46px #FFF, 890px 569px #FFF, 1613px 813px #FFF, 223px 252px #FFF, 983px 1093px #FFF, 726px 1029px #FFF, 1764px 778px #FFF, 622px 1643px #FFF, 174px 1559px #FFF, 212px 517px #FFF, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #FFF, 849px 391px #FFF, 228px 1824px #FFF, 1119px 1680px #FFF, 812px 1480px #FFF, 1438px 1585px #FFF, 137px 1397px #FFF, 1080px 456px #FFF, 1208px 1437px #FFF, 857px 281px #FFF, 1254px 1306px #FFF, 987px 990px #FFF, 1655px 911px #FFF, 1102px 1216px #FFF, 1807px 1044px #FFF, 660px 435px #FFF, 299px 678px #FFF, 1193px 115px #FFF, 918px 290px #FFF, 1447px 1422px #FFF, 91px 1273px #FFF, 108px 223px #FFF, 146px 754px #FFF, 461px 1446px #FFF, 1004px 391px #FFF, 1529px 516px #FFF, 1206px 845px #FFF, 347px 583px #FFF, 1102px 1332px #FFF, 709px 1756px #FFF, 1972px 248px #FFF, 1669px 1344px #FFF, 1132px 406px #FFF, 320px 1076px #FFF, 126px 943px #FFF, 263px 604px #FFF, 1546px 692px #FFF; animation: animStar 150s linear infinite; } #stars3:after { content: " "; position: absolute; top: 2000px; width: 3px; height: 3px; background: transparent; box-shadow: 571px 173px #FFF, 1732px 143px #FFF, 1745px 454px #FFF, 234px 784px #FFF, 1793px 1123px #FFF, 1076px 504px #FFF, 633px 601px #FFF, 350px 630px #FFF, 1164px 782px #FFF, 76px 690px #FFF, 1825px 701px #FFF, 1646px 578px #FFF, 544px 293px #FFF, 445px 1061px #FFF, 928px 47px #FFF, 168px 1410px #FFF, 777px 782px #FFF, 1235px 1941px #FFF, 104px 1690px #FFF, 1167px 1338px #FFF, 345px 1652px #FFF, 1682px 1196px #FFF, 1995px 494px #FFF, 428px 798px #FFF, 340px 1623px #FFF, 605px 349px #FFF, 1339px 1344px #FFF, 1102px 1745px #FFF, 1592px 1676px #FFF, 419px 1024px #FFF, 630px 1033px #FFF, 1995px 1644px #FFF, 1092px 712px #FFF, 1355px 606px #FFF, 622px 1881px #FFF, 1481px 621px #FFF, 19px 1348px #FFF, 864px 1780px #FFF, 442px 1136px #FFF, 67px 712px #FFF, 89px 1406px #FFF, 275px 321px #FFF, 592px 630px #FFF, 1012px 1690px #FFF, 1749px 23px #FFF, 94px 1542px #FFF, 1201px 1657px #FFF, 1505px 692px #FFF, 1799px 601px #FFF, 656px 811px #FFF, 701px 597px #FFF, 1202px 46px #FFF, 890px 569px #FFF, 1613px 813px #FFF, 223px 252px #FFF, 983px 1093px #FFF, 726px 1029px #FFF, 1764px 778px #FFF, 622px 1643px #FFF, 174px 1559px #FFF, 212px 517px #FFF, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #FFF, 849px 391px #FFF, 228px 1824px #FFF, 1119px 1680px #FFF, 812px 1480px #FFF, 1438px 1585px #FFF, 137px 1397px #FFF, 1080px 456px #FFF, 1208px 1437px #FFF, 857px 281px #FFF, 1254px 1306px #FFF, 987px 990px #FFF, 1655px 911px #FFF, 1102px 1216px #FFF, 1807px 1044px #FFF, 660px 435px #FFF, 299px 678px #FFF, 1193px 115px #FFF, 918px 290px #FFF, 1447px 1422px #FFF, 91px 1273px #FFF, 108px 223px #FFF, 146px 754px #FFF, 461px 1446px #FFF, 1004px 391px #FFF, 1529px 516px #FFF, 1206px 845px #FFF, 347px 583px #FFF, 1102px 1332px #FFF, 709px 1756px #FFF, 1972px 248px #FFF, 1669px 1344px #FFF, 1132px 406px #FFF, 320px 1076px #FFF, 126px 943px #FFF, 263px 604px #FFF, 1546px 692px #FFF; } #title { position: absolute; top: 50%; left: 0; right: 0; color: #FFF; text-align: center; font-weight: 300; font-size: 50px; letter-spacing: 10px; margin-top: -60px; padding-left: 10px; } #title span { background: -webkit-linear-gradient(white, #38495a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @keyframes animStar { from { transform: translateY(0px); } to { transform: translateY(-2000px); } } /*star*/ .relaiable { position: relative; background: #f5f5f5 } .relaiable h4 { margin-bottom: 0px; font-weight: 300; font-size: 20px; color: inherit; } .relaiable .head { margin-bottom: 20px; } /*angle down*/ @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { .web::before { display: none } } @media (max-width:767px) { section.new-case .col-md-6 { max-width: 385px; width: 100%; margin: 10px auto } section.new-case .row { display: block } .new_color.color-one-index { display: flex; flex-direction: column } .new_color .col_7.pl30 { padding-left: 0 } .banner p { padding: 0px; } h3.case-h3 { font-size: 16px; margin: 0 0 5px; font-weight: 500 } p.case-dis { font-size: 14px } h3.case-h3.m-height { min-height: inherit; } .new_color { padding: 20px 10px; } h3.singe-h { font-size: 25px; } p.case_p { margin-top: 20px; } .row-12 .col-md-41 { width: 100%; } .tech_box h2 { font-size: 16px; } .tech_box_ul li h3 { font-size: 15px; } .tech_box_ul li { padding: 5px 10px; } .providing .row.rating { flex-wrap: nowrap; width: 100%; overflow: auto; justify-content: flex-start; padding-bottom: 30px; margin-top: 10px; } } @media (max-width:320px) { section.new-case .col-md-6 { max-width: 300px; width: 100%; margin: 10px auto } } .tabpanels [role=tabpanel] { display: none; padding: var(--space-4) } .tabpanels [selected] { outline: 0; display: block } amp-selector [option][selected] { outline: 0 } .tabs-with-selector [option] { padding: 11px 30px; width: 100%; cursor: pointer; border: 1px solid #ddd; margin-right: -1px; align-items: center; display: flex; justify-content: center; text-align: center; } .tabs-with-selector [selected] { background: linear-gradient(to right, #d5ffd4, #ffffff); } .tabs-with-selector [option] h3 { margin: 0; font-size: 18px; font-weight: 600; width: auto; text-align: center; font-family: inherit; } .tabs-with-selector [selected] h3 { color: #4cb849 } .tabs-with-selector { display: flex; margin-bottom: 20px; justify-content: center } .tabs-with-selector.bottom { flex-wrap: wrap; background: #f7f7f7; padding: 20px 0; border-radius: 10px; margin: 0; } .tabpanels [role=tabpanel] { display: none; padding: var(--space-4) } .tabpanels [role=tabpanel][selected] { outline: 0; display: block } amp-selector [option][selected] { outline: 0 } amp-selector[role=tablist].tabs-with-selector [role=tab] { padding: 10px 20px; border-bottom: 2px solid transparent } .hometab amp-selector[role=tablist].tabs-with-selector [role=tab][selected] { border-bottom-color: #4cb849 } amp-selector[role=tablist].tabs-with-selector [role=tab] h3 { margin: 0; font-size: 16px; font-weight: 500; } .hometab amp-selector[role=tablist].tabs-with-selector [role=tab][selected] h3 { color: #666 } amp-selector[role=tablist].tabs-with-selector { display: flex; margin-bottom: 20px; justify-content: center } .box_tab h3 { font-weight: 700; } amp-selector.tabpanels [role=tabpanel] { display: none; padding: var(--space-4) } amp-selector.tabpanels [role=tabpanel][selected] { outline: 0; display: block } amp-selector [option][selected] { outline: 0 } amp-selector[role=tablist].tabs-with-selector [role=tab] { padding: 10px 0; border-bottom: 2px solid transparent } amp-selector[role=tablist].tabs-with-selector [role=tab][selected] { border-bottom-color: #4cb849; max-width: 106px } amp-selector[role=tablist].tabs-with-selector [role=tab] h3 { margin: 0; font-size: 18px; font-weight: 500; width: 150px; text-align: left; } amp-selector[role=tablist].tabs-with-selector [role=tab][selected] h3 { color: #4cb849 } amp-selector[role=tablist].tabs-with-selector { display: flex; margin-bottom: 20px; justify-content: left; flex-direction: column } .tab_img { width: 70px } .tab_custom { padding: 40px 0 } img.borderradiusimg { border-radius: 20px; margin-top: 20px } img.borderradiusimgtwo { border-radius: 20px } .box_tab a { color: #4bb749; font-weight: 500 } .box_tab i.fa.fa-arrow-right { margin-left: 5px } .col_10.pt10 { padding-top: 5px } .box_tab a:hover { color: #7bbb69 } .box_tab h3 { font-size: 28px; font-weight: 700; } section.history iframe { width: 100%; height: 650px; border: none; } .tab_custom .col_2 { width: 16.6%; padding-left: 50px } @media (max-width:640px) { .tab_custom .col_2 { width: 100%; padding-left: 15px } .tab_custom .col_10 { width: 100% } .tab_custom .col_8 { width: 100% } .tab_custom .col_4 { width: 100% } amp-selector[role=tablist].tabs-with-selector { flex-direction: row; overflow: auto; white-space: nowrap } amp-selector[role=tablist].tabs-with-selector [role=tab] h3 { font-weight: 500; max-width: 100%; text-align: left; margin: 0 10px } amp-selector [option][selected] { outline: 0 } amp-selector[role=tablist].tabs-with-selector [role=tab][selected] { border-bottom-color: #4cb849; max-width: 100% } } /*contact*/ .contact_page { float: left; width: 100%; border-radius: 10px; margin-bottom: 50px; background: #333; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2); min-height: 400px; margin-top: -50px; position: relative; z-index: 99; overflow: hidden } .contact_page h2 { font-weight: 500; font-size: 24px } .contact_form { float: right; width: 65%; padding: 30px; background: #fff } .contact_form .form_group { width: 50%; padding: 0px 15px; position: relative; margin-bottom: 30px } .contact_form .form_group.full, .contact_form .action { width: 100%; float: left } .contact_form .form_group.action { width: 33.3% } .contact_form .form_control { border: 2px solid #d0d2d4; padding-left: 37px } .contact_form select.form_control { padding-left: 33px } .contact_form .form_control:focus { border-color: #999C9E } .contact_form textarea.form_control { height: 120px; padding: 10px } .contact_form .form_group .fa { position: absolute; z-index: 10; color: rgb(120, 128, 146); top: 0px; left: 18px; height: 44px; width: 35px; text-align: center; line-height: 44px; } .contact_form .form_group .fa-mobile { font-size: 21px; display: none; } .contact_form label.error { padding: 2px 15px } .contact_form .action { padding: 0px 15px; text-align: right; margin-top: -5px } .contact_info { float: left; width: 35%; padding: 30px; } .contact_info * { color: #fff } .contact_info li { margin-bottom: 15px; display: block; position: relative; padding-left: 35px; line-height: 25px } .contact_info li .fa { position: absolute; left: 0px; top: 3px; width: 20px; text-align: center; font-size: 18px } .contact_info li .fa-envelope-o { font-size: 17px } .contact_info li a:hover { color: #fff; text-decoration: underline } .contact_info iframe { border-radius: 4px; overflow: hidden; width: 100%; border: none; height: 230px; } ul.features .box i { color: #4cb849; font-size: 24px; margin-right: 15px; } .same_btn { display: inline-block; width: 100%; margin-top: 17px; } #my-notification>div { padding: 20px; background-color: #fff; position: fixed; left: 35px; bottom: 35px; max-width: 250px; border-radius: 8px; z-index: 99; box-shadow: 0px 0px 40px 0px #0000005c; } #my-notification>div p { margin-bottom: 20px; } #my-notification .ampstart-btn { background: #4bb749; color: #fff; font-size: 20px; font-weight: 900; border: none; min-width: 100px; height: 40px; border-radius: 5px; } #my-notification>div p a { font-weight: 700; color: inherit; } .hide-notify>div { display: none; } /*about us*/ img.content_img { padding-top: 10px } .bg.video::before { position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; background: rgba(6, 17, 41, .4) } .bg.video a { position: absolute; left: 50%; top: 50%; z-index: 9; font-size: 34px; width: 72px; text-align: center; height: 72px; line-height: 74px; border-radius: 100px; background: #4cb849; text-indent: 5px; color: #fff; margin-top: -36px; margin-left: -36px } .bg.video a:hover { background: #399837 } .bg.video a:after { content: ""; position: absolute; left: -7px; top: -7px; width: 80px; height: 80px; border-radius: 100px; border: 3px solid #4cb849; animation: play 1s linear .5s infinite } @keyframes play { 0% { transform: scale(1); opacity: .9 } 100% { transform: scale(1.5); opacity: 0 } } .head_desc { font-size: 18px; opacity: .8; margin-bottom: 20px; font-weight: 400; } .years span { display: table-cell; vertical-align: middle } .years span.year { padding: 20px 80px 30px 80px; width: 10%; font-size: 150px; color: #090f1e; background: -webkit-linear-gradient(#21baff, #0ee917); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .years span:first-child, .years span:last-child { width: 45%; padding: 0px 0 30px 0 } .years span:first-child { font-size: 38px; font-weight: 600; text-align: center; } .years span:last-child { text-align: left; font-weight: 400; color: #000; opacity: 0.8; font-size: 18px; line-height: 30px; } .facts b { display: block; font-size: 20px; font-weight: 400; } .facts span { position: relative; display: inline-block; margin-bottom: 15px; line-height: 94px; font-weight: 600; font-size: 35px; width: 104px; height: 104px; border-radius: 100%; border: 4px solid #4bb749; color: inherit; box-shadow: none; background: rgb(255 255 255 / 45%); } .value_fact span { position: relative; display: inline-block; margin-bottom: 15px; line-height: 50px; font-weight: 600; font-size: 27px; width: 54px; height: 54px; border-radius: 100%; border: 3px solid #47bc8c; color: #07516d; box-shadow: 0 0 0 8px rgba(71, 188, 140, .2); background: #fff } .progress_bar { max-width: 450px } .progress_bar h5 { font-weight: 500; color: #fff; margin-bottom: 5px; margin-top: 20px; font-size: 15px } .progress_bar span { height: 6px; display: block; background: #fff; border-radius: 100px } .progress_bar b { font-weight: 600; display: inline-block; padding: 3px 10px; background: #fff; border-radius: 100px; font-size: 11px; margin-left: 5px; color: #333 } section.vision { padding-top: 40px } section.value_sec { padding-top: 20px } section.value_sec .values { padding-bottom: 20px } h2.join_team { margin-bottom: 20px; padding-top: 20px } .our_team .boxes .box { padding: 0; overflow: hidden } .our_team .boxes .box .content { background: #4cb849; float: left; width: 100%; padding: 15px } .our_team .boxes .box img { max-width: 180px; margin: 0 auto; margin-top: 30px; -moz-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; -webkit-transition: all .25s ease } .our_team .boxes .box h3 { padding-bottom: 0; margin-bottom: 3px; color: #fff } .our_team .boxes .box p { margin: 0; color: #fff; opacity: 0.8 } .our_team .boxes .box h3:after { display: none } .team-spech { height: 200px; margin: 0 0 10px } .team-spechcenter { height: 411px; object-fit: cover; } .team-spech img { object-fit: cover } section.tech_people { padding: 0 0 40px } section.join_our_team { padding: 0 0 20px } section.red { background: #c4002e } .lists.style1 li:before { background: #fff; color: #4CB849 } .lists.style2 li:before { background: #fff; color: #0e152e } section.red { background: #c4002e } section.half_bg:after { background: #eee } .lists li { line-height: 24px; position: relative; padding-left: 30px; margin-bottom: 13px } .lists li:before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; text-align: center; line-height: 18px; background: #4cb849; border-radius: 100px; font-size: 12px; color: #fff } .lists li::marker { display: none } .lists { margin: 0 0 20px; padding: 0; list-style: none } h3.head.line.style1.lessfont { font-size: 22px; padding: 0; margin-bottom: 8px } h2.head.style1.why_tech { margin-bottom: 15px } .googlerating { width: 189px; height: 46px; margin: 0 auto } .partial-iconsparent { position: relative; overflow: hidden } .partial-icons { left: 0; top: 0; position: absolute; overflow: hidden } section.rating_section { background: #f5f5f5 } .box_star { padding-top: 10px } .team-spechcenter img { object-fit: cover } .company-client { background: #fff } /*integrationpage*/ .portfolio .menu { float: left; width: 100%; margin-bottom: 40px; padding: 0px 15px; text-align: center } .portfolio .menu li { display: inline-block; } .portfolio .menu a { display: block; padding: 10px 20px 15px 20px; text-transform: uppercase; font-weight: 500; color: #909090; position: relative } .portfolio .menu a:after { content: ""; position: absolute; left: 50%; top: 100%; width: 0px; height: 2px; background: #333; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; -webkit-transition: all 0.25s ease; } .portfolio .menu a.active:after, .portfolio .menu li:hover a:after { width: 100%; left: 0px; } .portfolio .menu a.active, .portfolio .menu li:hover a:after, .portfolio .menu a:hover { color: #333 } .portfolio li img { border-radius: 4px; display: inline-block; margin-bottom: 12px; background-color: #fff; width: 100%; height: auto; } .portfolio li { float: left; width: 20%; padding: 0 10px; margin-bottom: 25px; text-align: center; } .portfolio li.title:first-child { padding-top: 0; border: 0; } .portfolio li { float: left; width: 20%; padding: 0 10px; margin-bottom: 25px; text-align: center; } .portfolio li.title { height: auto; width: 100%; margin-bottom: 10px; border-top: 2px dashed #ccc; padding-top: 20px; margin-top: 25px; } section.grey.portfolio.integration h5 { color: #000; font-weight: 500; } .portfolio li.title .head.line:after { left: 50%; margin-left: -35px; } /*carrers*/ .careers { padding-top: 30px } .careers .container { max-width: 900px } .careers section { padding: 0px; margin-top: 10px; border-radius: 6px; background: #fff; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2) } .careers amp-accordion section:first-child { margin: 0px } .careers .heading { border: 0px; outline: none; position: relative; padding: 18px 60px 20px 100px; background: none; width: 100%; cursor: pointer; } .careers .heading:after { content: "\f107"; font-family: FontAwesome; position: absolute; width: 30px; height: 30px; text-align: center; line-height: 30px; right: 20px; top: 50%; margin-top: -15px; background: #D9DADB; border-radius: 100px; font-size: 18px; color: #666; cursor: pointer; } .careers .heading+div { display: none; } .careers .heading.aria-expanded+div { display: inline-block; } .careers .heading:hover:after { background: #C2C4C7; color: #000 } .careers .aria-expanded.heading:after { content: "\f106"; } .careers .icon { display: inline-block; position: absolute; left: 20px; top: 20px; background: none; height: 60px; width: 60px; border-radius: 5px } .careers .icon:before { content: ""; background: url(../images/sprites.png) no-repeat; width: 44px; height: 44px; position: absolute; left: 50%; top: 50%; margin: -22px 0px 0px -22px } .careers header h2 { font-size: 20px; font-weight: 500; letter-spacing: 0.02em; } .careers .info span { float: left; margin-right: 35px; padding-left: 35px; font-size: 16px; color: #666; position: relative } .careers .info span:before { height: 26px; width: 1px; background: #C3C3C3; content: ""; position: absolute; left: 0px; top: 50%; margin-top: -13px; } .careers .info span:first-child:before { display: none } .careers .info span:first-child { padding: 0px } .careers .info span b { display: block; margin-top: 5px; font-size: 18px; color: #090f1e; } .careers .info span:last-child { margin: 0px } .careers p.style1 { padding-left: 45px; margin-bottom: 5px } .careers .content { padding: 5px 20px 25px 20px } .careers h3 { font-size: 18px; font-weight: 500; letter-spacing: 0.02em; position: relative; padding-bottom: 10px; margin-bottom: 20px } .careers h3:after { content: ""; position: absolute; left: 0px; bottom: 0px; width: 35px; height: 2px; background: #4cb849; border-radius: 10px; } .careers .icon.react { background-color: rgba(5, 165, 209, 0.18) } .careers .icon.react::before { background-position: -88px 0px; } .careers .icon.angular { background-color: rgba(195, 31, 51, 0.18) } .careers .icon.angular::before { background-position: 0px 0px; } .careers .icon.node { background-color: rgba(102, 159, 100, 0.18) } .careers .icon.node::before { background-position: -264px 0px; } .careers .icon.digital { background-color: rgba(43, 100, 233, 0.15) } .careers .icon.digital::before { background-position: -396px 0px; } .careers .icon.writer { background-color: rgba(43, 100, 233, 0.15) } .careers .icon.writer::before { background-position: -440px 0px; } .careers .icon.php { background-color: rgba(10, 186, 181, 0.18) } .careers .icon.php::before { background-position: -308px 0px; } .careers .icon.android { background-color: rgba(119, 193, 89, 0.22) } .careers .icon.android::before { background-position: -220px 0px; } .careers .icon.apple { background-color: rgba(85, 85, 85, 0.18) } .careers .icon.apple::before { background-position: -176px 0px; } .careers .icon.net { background-color: rgba(84, 29, 102, 0.18) } .careers .icon.net::before { background-position: -352px 0px; } .careers .icon.business { background-color: rgba(43, 100, 233, 0.15) } .careers .icon.business::before { background-position: -484px 0px; } .careers ul.reset { margin-bottom: 5px; float: left; width: 100%; } .careers ul li { float: left; width: 100%; position: relative; padding-left: 45px; margin-bottom: 18px } .careers ul li:before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 15px; width: 18px; height: 18px; text-align: center; line-height: 18px; background: #4CB849; border-radius: 100px; font-size: 9px; color: #fff; } .careers .btn { margin-left: 45px; min-width: 155px; } .careers .btn.green { margin-left: 15px } #careers .dialog_content { padding: 30px 25px } #careers h4, #careers h5 { text-transform: none; } #careers h4 { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 16px; color: #000; line-height: 25px; padding-left: 50px; position: relative } #careers h4 .fa { position: absolute; left: 0px; font-size: 38px; top: 5px; color: #333; } #careers h5 { font-size: 18px; padding-left: 50px; font-weight: 500; line-height: normal; color: #333; font-family: 'Roboto', sans-serif } section.half .bg1 { background-position: center; } section.half .bg1::before { position: absolute; content: ""; left: 0px; top: 0px; height: 100%; width: 100%; background: rgba(6, 17, 41, 0.4); } section.half * { color: #fff } section.half.grey * { color: #000 } .lists { margin: 0px 0px 20px 0px; padding: 0px; list-style: none; float: left; width: 100%; } .lists li { float: left; width: 100%; line-height: 24px; position: relative; padding-left: 30px; margin-bottom: 13px; text-align: left; } .lists li:before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0px; top: 3px; width: 18px; height: 18px; text-align: center; line-height: 18px; background: #4CB849; border-radius: 100px; font-size: 12px; color: #fff; } .lists.col2 li { width: 50%; } .amp-lightbox { height: 100%; width: 100%; z-index: 99999; background: rgba(11, 14, 29, 0.7); text-align: center; display: inline-block; width: 100%; top: 0; left: 0; position: fixed; display: none; } .amp-lightbox.open { display: inline-block; } .amp-lightbox .dialog_main { position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; overflow: auto } .amp-lightbox .dialog_main:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; background: none; position: static; } .amp-lightbox .dialog_inner { display: inline-block; padding: 30px; text-align: center; vertical-align: middle; } .dialog_inner { display: inline-block; width: 100%; text-align: left; vertical-align: middle; text-align: center; } .dialog_inner.sm { max-width: 480px } .dialog_inner.md { max-width: 750px } .dialog_content { background: #fff; float: left; width: 100%; text-align: left; position: relative; padding: 25px; -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .25); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); border-radius: 10px; } .dialog_content a.close { position: absolute; z-index: 99; top: 0px; right: 0px; width: 40px; height: 40px; text-align: center; line-height: 40px; color: #000; opacity: 0.7; } .dialog_content a.close:hover { opacity: 1 } .dialog_content a.close .fi { font-size: 14px } .amp-accordion { } .amp-accordion { } /*tools and technology*/ ul.technology { float: left; width: 100%; margin-bottom: 30px } ul.technology.mb0 { margin: 0 } ul.technology li { width: 20%; display: inline-block; margin-left: -5px; padding: 5px 8px } ul.technology li .content { float: left; width: 100%; background: #fff; border-radius: 4px; padding: 15px 5px; min-height: 110px; box-shadow: 0 1px 6px rgba(0, 0, 0, .2) } ul.technology.style1 li .content { min-height: 195px } ul.technology li span { display: block; margin-top: 5px; color: #404040; font-size: 14px } ul.technology li span.title { font-weight: 500; color: #333; font-size: 16px } ul.technology li i { display: inline-block; height: 80px; width: 90px; margin-bottom: 5px; background: url(../images/technology-tool.png) } ul.technology li i.html { background-position: 0 0 } ul.technology li i.bootstrap { background-position: -90px 0 } ul.technology li i.jquery { background-position: -180px 0 } ul.technology li i.js { background-position: -270px 0 } ul.technology li i.php { background-position: -360px 0 } ul.technology li i.yii { background-position: -450px 0 } ul.technology li i.laravel { background-position: -540px 0 } ul.technology li i.node { background-position: -630px 0 } ul.technology li i.nginx { background-position: -180px -160px } ul.technology li i.sql { background-position: -720px 0 } ul.technology li i.mongo { background-position: -270px -160px } ul.technology li i.solr { background-position: -450px -160px } ul.technology li i.redis { background-position: -810px 0 } ul.technology li i.amazon { background-position: 0 -80px } ul.technology li i.java { background-position: -90px -80px } ul.technology li i.ios { background-position: -180px -80px } ul.technology li i.analytics { background-position: -270px -80px } ul.technology li i.maps { background-position: -360px -80px } ul.technology li i.bitBucket { background-position: -450px -80px } ul.technology li i.android { background-position: -540px -80px } ul.technology li i.xcode { background-position: -630px -80px } ul.technology li i.jenkins { background-position: -720px -80px } ul.technology li i.capistrano { background-position: -810px -80px } ul.technology li i.apps { background-position: 0 -160px } ul.technology li i.css { background-position: -90px -160px } ul.technology li i.payumoney { background-position: -540px -160px } ul.technology li i.ccavenue { background-position: -630px -160px } ul.technology li i.paypal { background-position: -720px -160px } ul.technology li i.laravel { background-position: -810px -160px } ul.technology li i.micro { background-position: 0 -240px } ul.technology li i.dotnet { background-position: -92px -240px } ul.technology li i.mean { background-position: -449px -240px } ul.technology li i.mern { background-position: -543px -230px } ul.technology li i.angular { background-position: -256px -240px } ul.technology li i.react { background-position: -346px -240px } ul.technology li i.web { background-position: -90px -400px } ul.technology li i.androi { background-position: -629px -230px } ul.technology li i.kotlin { background-position: -701px -237px } ul.technology li i.flutter { background-position: -817px -237px } ul.technology li i.xamarin { background-position: -175px -400px } ul.technology li i.firebase { background-position: 0 -323px } ul.technology li i.azure { background-position: -529px -315px } ul.technology li i.ethereum { background-position: -169px -315px } ul.technology li i.hyper { background-position: -451px -308px } ul.technology li i.corda { background-position: -360px -315px } ul.technology li i.multichain { background-position: -259px -315px } ul.technology li i.chat { background-position: -353px -395px } ul.technology li i.crypto { background-position: -257px -400px } ul.technology li i.crypto1 { background-position: -624px -400px } ul.technology li i.powerbi { background-position: -443px -387px } ul.technology li i.rpa { background-position: -531px -400px } ul.technology li i.stellar { background-position: -813px -318px; } ul.technology li i.tron { background-position: -617px -315px; } ul.technology li i.c { background-position: 0 -396px; } ul.technology li i.solidity { background-position: -716px -315px; } ul.technology.style1 li .content { min-height: 140px } .title-tools { font-size: 25px; margin: 25px 0; } @media (max-width:990px) { ul.technology li { width: 25% } } @media (max-width:990px) { ul.technology li { width: 33.3% } } @media (max-width:640px) { .technologies .container { padding: 0 } .technologies .head { padding: 0 15px } ul.technology li { width: 50%; margin: 0; float: left; padding: 0 } ul.technology li .content { box-shadow: none; border-radius: 0; border: 1px solid #ddd; border-left: 0; border-right: 0; margin-top: -1px } ul.technology li:nth-child(2n+1) .content { border-right: 1px solid #ddd } ul.technology li span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .title-tools { font-size: 18px; margin: 25px 0; } } /*tools and technology*/ /*testimonial*/ .testimonial_video { text-align: center; padding-bottom: 20px } .testimonial_video .boxes .box h3 { margin-bottom: 8px; padding: 0px; } .testimonial_video h3:after { display: none } .testimonial_video .boxes .box { padding: 0px; overflow: hidden; background: none } .testimonial_video .boxes .content { padding: 15px; background: #fff } .testimonial_video .box .img { position: relative } .testimonial_video .box .img:before { position: absolute; content: ""; left: 0px; top: 0px; height: 100%; width: 100%; background: rgba(6, 17, 41, 0.2); z-index: 9; transition: all 0.25s ease } .testimonial_video .box:hover .img:before { background: none } .testimonial_video .img a { position: absolute; left: 50%; top: 50%; z-index: 9; width: 48px; text-align: center; height: 48px; line-height: 48px; border-radius: 100px; background: #4cb849; text-indent: 5px; color: #fff; margin-top: -24px; margin-left: -24px; justify-content: center } .testimonial_video .img a:hover { opacity: 1; background: #399837 } .testimonial_video .img a:after { content: ""; position: absolute; left: -5px; top: -5px; width: 52px; height: 52px; border-radius: 100px; border: 3px solid #4cb849; animation: play 1s linear .5s infinite; } .testimonial_video .img a .fa { margin: 0px; font-size: 19px; line-height: 49px; text-indent: 1px; color: #fff; text-align: center; } @keyframes play { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } .testimonials li { float: left; width: 100%; font-weight: 400; margin: 20px 10px; padding: 20px; max-width: 369px; position: relative; background: #fff; border-radius: 20px 0px 20px 0px; box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.18) } .testimonials li:first-child { margin: 20px 10px } .testimonials li p:last-child { margin: 0px } .testimonials li img, .testimonials li h4 { display: table-cell; vertical-align: middle; } .testimonials li img { width: 100px; height: 100px; border-radius: 100px; border: 3px solid #ffffff; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.5); margin-bottom: 20px; } .testimonials li h4 { font-size: 20px; font-weight: 500; letter-spacing: 0.02em; text-align: left; } .testimonials li h4 span { display: block; font-weight: 400; font-size: 17px; } .testimonials .info, .testimonials li p { float: left; width: 100%; margin-bottom: 10px; text-align: left; line-height: 23px; position: relative; } .testimonials li:before { content: "\f10e"; font-family: FontAwesome; position: absolute; right: 10px; font-size: 43px; color: #E5E5E5; } .testimonials ul { display: flex; flex-wrap: wrap; } .amp-lightbox.open-amp-testimonial { display: block; } .iframe-full-testimonial { width: 100%; height: 390px; position: absolute; left: 0; top: 0; height: 100%; object-fit: fill; } .open-amp-testimonial .dialog_content { padding: 0px; overflow: inherit; height: 500px; background: #000; } .open-amp-testimonial .dialog_content a.close { background: #fff; top: -16px; right: -16px; border-radius: 100px; width: 32px; height: 32px; line-height: 32px; } /*testimonial*/ /*cms page*/ .cms_page { padding: 0; background: #eee; } .cms_page .content { float: left; width: 100%; padding: 30px; border-radius: 10px; margin-bottom: 30px; background: #fff; box-shadow: 0 0 30px rgb(0 0 0 / 20%); min-height: 400px; margin-top: -160px; position: relative; z-index: 99; overflow: hidden; } .cms_page h2 { font-size: 24px; letter-spacing: .02em; } .contact-us-page .f_contact, .contact-us-page .footer_form, .contact-us-page .page_banner.contact:after { display: none; } /*single work*/ .web_menu { float: left; width: 100%; background: rgba(255, 255, 255, .1); border-top: 1px solid rgba(255, 255, 255, .3); margin-top: 85px; padding: 0 15px; text-align: center; position: relative; } .web_menu ul { display: flex; justify-content: space-between; align-items: center; } .web_menu li a { color: #fff; padding: 12px 0px; display: block; font-weight: 400; font-size: 16px; font-weight: 500; cursor: default; } .web_menu .fa { display: block; margin-bottom: 10px; height: 20px; line-height: 21px; font-size: 21px; } .web_menu p { margin: 0; font-size: 16px; } .web_menu .container { max-width: 1200px; padding: 0 15px; } .web.banner .banner_logoimg { background: #fff; display: inline-block; padding: 5px 35px; border-radius: 35px; margin-bottom: 25px; } .phone_row ul.reset { display: flex; justify-content: space-between; gap: 30px; } section ul.box_feature { margin-top: 60px; display: flex; flex-wrap: wrap; } .box_feature span { width: 100%; font-weight: 500; padding: 30px 15px; display: inline-block; border-radius: 10px; } .box_feature span .fa { font-size: 44px; height: 40px; margin-bottom: 25px; } .box_feature span h3 { margin: 0; } /*timeline ul*/ .timeline { background: #eee; text-align: center } .timeline ul { text-align: right; position: relative; margin-top: 10px; float: left; width: 100% } .timeline ul:before { content: ""; position: absolute; left: 50%; margin-left: -2px; background: #ccc; top: 0; height: 100%; width: 4px } .timeline ul .right { text-align: left } .timeline ul li { position: relative; float: left; width: 100%; padding-right: 100px } .timeline ul li.right { padding-right: 0; padding-left: 100px } .timeline ul h3 { font-size: 18px; font-weight: 500; margin-bottom: 10px; letter-spacing: normal } .timeline .content { float: left; width: 50%; padding: 20px 80px 20px 20px; border-radius: 20px 0 20px 0; background: #fff; position: relative; box-shadow: 0 2px 30px rgba(0, 0, 0, .18); transition: all .3s ease } .timeline .content:hover { box-shadow: 0 2px 50px rgba(0, 0, 0, .4) } .timeline .content .fa, .timeline .content .fi { position: absolute; right: 10px; top: 50%; color: #4fbd50; width: 50px; height: 50px; line-height: 50px; text-align: center; margin-top: -20px; font-size: 44px } .timeline .right .content { float: right; padding: 15px 15px 15px 80px } .timeline .right .fa, .timeline .right .fi { left: 10px; right: auto } .timeline .right .fa { font-size: 40px } .timeline .step { position: absolute; left: 100%; width: 40px; height: 40px; margin-left: 30px; text-align: center; line-height: 35px; top: 50%; margin-top: -18px; background: #fff; border-radius: 100px; font-weight: 500; font-size: 16px; border: 3px solid #ccc; color: #595959 } .timeline .right .step { right: 100%; left: auto; margin-left: 0; margin-right: 30px } .timeline .content:before { height: 4px; background: #ccc; width: 60px; content: ""; position: absolute; left: 100%; top: 50%; margin-top: -2px } .timeline .right .content:before { left: auto; right: 100% } .timeline .content p:last-child { margin: 0 } /*timeline*/ .boxes .box i { color: #4bb749 } ul.features { margin: 0px -10px; display: flex; flex-wrap: wrap; } ul.features.col2 li { float: left; width: 50%; padding: 10px; } ul.features.col3 li { float: left; width: 33.3%; padding: 10px; } ul.features.col4 li { float: left; width: 25%; padding: 10px; } ul.features .box { padding: 0px 12px 0px 45px; float: left; width: 100%; position: relative; border-radius: 10px 0px 10px 0px; background: hsla(0, 0%, 100%, 0.12); } ul.features.style1 .box { background: #fff; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25); padding: 15px; display: flex; align-items: center; min-height: 100%; } @media (max-width:990px) { .overlay ul.features.col2 li, ul.features.col4 li, .table_feature li { width: 33.3% } } @media (max-width:800px) { ul.features.col3 li, ul.features.col4 li { width: 50% } .features .col_4 { width: 50% } div.features .content.vertical { display: none } .features .content { margin-bottom: 15px } .features .col_4:nth-child(3n), .features .col_4:nth-child(3n+1) { clear: none } } @media (max-width:767px) { .overlay ul.features.col2 li, .features .col_4 { width: 100% } .features .content { margin-bottom: 10px; min-height: inherit } div.features .content { margin-bottom: 15px } } @media (max-width:640px) { ul.features.col3 li, ul.features.col4 li { width: 100% } ul.features.col3 li, ul.features.col4 li, ul.features.col2 li { padding: 5px 10px; } ul.features .box span { padding: 15px 0px; height: auto; } ul.features.col2 li { width: 100% } } section ul.box_feature { margin-top: 60px } .box_feature .fa { display: block; color: #4FBD50; font-size: 30px; height: 30px; line-height: 30px; margin-bottom: 15px; } .box_feature .fa-mobile { font-size: 45px; } .features { padding-bottom: 20px } .features .content { float: left; width: 100%; overflow: hidden; padding: 15px; border-radius: 20px 0px 20px 0px; background: #eee; position: relative; transition: all 0.3s ease; margin: 0px 0px 30px 0px; text-align: left; box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2); } .grey .features .content { background: #fff; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); } /* .grey .features .content:hover{box-shadow:0px 2px 45px rgba(0, 0, 0, 0.2)} */ .features .head { font-size: 18px; margin-bottom: 14px; margin-top: 0px; color: #090F1E; line-height: normal; font-weight: 500; padding-left: 35px; position: relative } .features .content p:last-child { margin-bottom: 0px } .features .content.vertical { box-shadow: none; display: table; width: 100%; float: none; background: none; text-align: center; padding: 0px } .features .content.vertical .fi { display: table-cell; vertical-align: middle; font-size: 90px; position: static; color: #4fbd50; } .features .head .fa { position: absolute; left: -15px; top: -15px; font-size: 20px; width: 44px; text-align: center; height: 44px; line-height: 38px; padding-right: 5px; background: #4fbd50; border-radius: 20px 0px 100px 0px; color: #fff; } .features .head a { color: #4caf50 } section ul.box_feature { margin-top: 60px } .box_feature span { float: left; width: 100%; font-weight: 500; padding: 30px 15px; border-radius: 20px 0px 20px 0px; background: #eee; transition: all 0.3s ease; box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2) } .box_feature span:hover { transform: scale(1.15) } .row.features { display: flex; flex-wrap: wrap; } .row.features .content { min-height: 100%; margin-bottom: 0px; } .row.features .col_4 { margin-bottom: 30px; } .boxes .box>i { font-size: 35px; margin-bottom: 20px; } .app_process { text-align: center; margin-top: 80px; color: #fff; background: #333; padding-bottom: 35px; } .app_process.mt0 { margin: 0; } .app_process *, .app_process .head { color: #fff; letter-spacing: normal; } .app_process ul .fa { display: inline-block; box-shadow: 0 2px 6px rgb(0 0 0 / 20%); color: #333; width: 66px; height: 66px; line-height: 66px; border-radius: 4px; margin-bottom: 15px; font-size: 32px; position: relative; background: #fff; } .form_quote { float: left; width: 100%; padding: 25px 0px; background: #424242; } .form_quote form { position: relative; float: left; width: 100%; margin: 0px; display: flex; gap: 20px; } .form_quote .container { position: relative; z-index: 9 } .form_quote .heading { text-align: center; margin-bottom: 15px; } .form_quote .heading h3 { font-size: 26px; color: #ffffff; letter-spacing: normal; margin: 0px; margin-top: 0px; margin-bottom: 15px; font-weight: 400; } .form_quote .form_group { margin: 0; } .form_quote input { border: 0px; padding-left: 35px; } .form_quote .form_group:first-child:after { display: none } .form_quote .btn { height: 44px; line-height: 44px; min-width: inherit; width: 100%; padding: 0; background: #4bb749 } .form_quote .fa { position: absolute; left: 10px; z-index: 10; top: 14px; margin-top: 0px; text-align: center; width: 15px; } .form_quote .fa-mobile { font-size: 20px; margin-top: -2px; display: none; } .form_quote .error { color: #fff } .amp-carousel { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; width: 100% } .amp-carousel img { max-width: 290px; border: 1px solid #ddd; border-radius: 15px; } .faq-amp-accord section { padding: 0; margin-bottom: 25px; border-radius: 6px; background: #fff; box-shadow: 0 1px 6px rgb(0 0 0 / 20%); } .faq-amp-accord .ap-o-accordion-content { display: none; padding: 30px; padding-top: 10px; } .faq-amp-accord .ap-o-accordion-header { width: 100%; display: inline-block; padding: 20px; position: relative; background: #fff; border-radius: 5px; margin-bottom: 0px; cursor: pointer; padding-right: 70px; } .faq-amp-accord .ap-o-accordion-header h4 { margin: 0; } .faq-amp-accord .faq-open-accordion .ap-o-accordion-content { display: inline-block; width: 100%; } .faq-amp-accord .faq-open-accordion .ap-o-accordion-content p { margin-bottom: 0px; } .faq-amp-accord .ap-o-accordion-header:after { content: "\f107"; font-family: FontAwesome; position: absolute; width: 30px; height: 30px; text-align: center; line-height: 30px; right: 20px; top: 50%; margin-top: -15px; background: #d9dadb; border-radius: 100px; font-size: 18px; color: #666; transition: 0.5s all; } .faq-open-accordion .ap-o-accordion-header:after { transform: rotate(180deg); } .web-img-horizantal .content { display: inline-block; width: 100%; position: relative; padding-left: 360px; text-align: left; min-height: 300px; } .web-img-horizantal .content .img { position: absolute; left: 0; top: 50%; width: 300px; height: 300px; margin-top: -150px; } .web_features { position: relative; min-height: 300px; } .web_features .content { width: 50%; float: left; padding: 0 0 0 180px; text-align: left; } .web_features .content:first-child { padding-left: 0; padding-right: 180px; text-align: right; } .web_features li { float: left; width: 100%; margin: 10px 0; border-radius: 10px; background: #f0f0f0; padding: 18px 20px; border-bottom: 3px solid #d8d8d8; } .web_features li h3 { font-weight: 500; font-size: 18px; letter-spacing: -.01em; margin-bottom: 8px; } .web_features li p { margin: 0; } .web_features .img { position: absolute; width: 300px; left: 50%; top: 50%; margin: -145px 0 0 -150px; } #customers { border-spacing: 30px; width: 100%; } #customers th { text-align: center; color: #fff; width: 30%; padding: 25px; } #customers td, #customers th { padding: 20px; text-align: left; background-color: #eee; } #customers th, .tech-stack h3 { background-color: #4caf50; } .colorbox { background-color: #0c1e5d; padding: 30px; border-radius: 10px; color: #fff; display: inline-block; width: 100%; } section.benefits.portfolio li { text-align: left; } .colorbox .head { font-size: 25px; margin-bottom: 10px; } .green-line { border: 1px solid #4cb849; color: #4cb849; background: #fff } section.rating_section .row.rating { display: flex; justify-content: center; flex-wrap: wrap; } .lists-about { margin: 0 0 20px; padding: 0; list-style: none; float: left; width: 100%; display: flex; flex-wrap: wrap; } .lists-about li { float: left; width: 50%; line-height: 1.5; position: relative; margin-bottom: 20px; display: flex; align-items: center; padding-right: 30px; } .lists-about li i { font-size: 20px; margin-right: 20px; background: #4cb849; min-width: 35px; color: #fff; height: 35px; text-align: center; border-radius: 50%; line-height: 35px; } .industry-icons-set { margin-top: 60px; display: flex; flex-wrap: wrap; justify-content: center; } .industry-icons-set .box { display: inline-block; width: 100%; max-width: 164px; padding: 20px; margin-bottom: 30px; margin-right: 30px; background: #fff; border-radius: 5px; text-align: center; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%); } .industry-icons-set .box .icon { display: inline-block; width: 100%; position: relative; margin-bottom: 15px; } .industry-icons-set .box .icon:before { content: ''; width: 70px; height: 70px; display: inline-block; background: #e6ffe6; border-radius: 50%; position: absolute; left: 10px; top: 0; } .industry-icons-set .box .icon img { max-width: 75px; position: relative; z-index: 1; margin: 0 auto; } .boxes .box .tech p::before, .boxes .box .flex p::before { position: absolute; content: ""; background: #4cb849; width: 8px; height: 8px; left: 2px; top: 14px; } .boxes .box .flex { display: flex; justify-content: flex-start; flex-wrap: wrap; } .boxes .box .flex p { flex: 0 0 50%; width: 50%; position: relative; } .boxes .box .flex p, .boxes .box .tech p { margin: 0; padding-left: 20px; padding-top: 7px; text-align: left; position: relative; } .ar .boxes .box h3 { margin-top: 20px; } .ar .boxes .box img { height: 200px; object-fit: cover; width: 100%; } section.grey ul.features.col-td-2 li { width: 50%; } ul.technology li i.lozad { background-size: cover; background-repeat: no-repeat; background-position: center; width: 140px; } .ap-a-ico { display: none; } section.half .overlay_hide::before { display: none; } .overlay .content { padding-right: 40%; } .overlay.left .content { padding-right: 0; padding-left: 40%; } .overlay img { position: absolute; right: 0; top: 50%; width: 75%; margin-top: -22%; margin-right: -32%; } .overlay.left img { right: auto; left: 0; margin-left: -33%; margin-right: 0; width: 73%; margin-top: -21%; } .overlay { min-height: 640px; } .blue-react { background-color: #05a5d1 } .green-node { background-color: #3a9637 } .purple { background-color: #4b1e98; } section.purple:after { background-color: #4b1e98; } .box-things { background: #fff; padding: 25px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%); border-radius: 5px; } .box-things img { margin-bottom: 10px; } .greydark { background: #4a4a4a; } .boxes .box.foodpurby .img img { filter: brightness(0) saturate(100%) invert(59%) sepia(9%) saturate(2437%) hue-rotate(71deg) brightness(102%) contrast(105%); } .boxes .box.deligo .img img { filter: brightness(0) saturate(100%) invert(46%) sepia(35%) saturate(2998%) hue-rotate(333deg) brightness(86%) contrast(102%); } .boxes .box.grobino .img img { filter: brightness(0) saturate(100%) invert(12%) sepia(99%) saturate(4371%) hue-rotate(164deg) brightness(101%) contrast(101%); } body section.Proactive { background: #ededed; } .head.style3 { font-size: 25px; margin-bottom: 20px; } /*amp side bar*/ .amp-sidebar { display: inline-block; width: 100%; max-width: 300px; position: fixed; left: -99999px; top: 0px; z-index: 9999; transition: 0.5s all; height: 100%; overflow: auto; background: #fff; box-shadow: 0px 0px 50px 0px #000; opacity: 0; visibility: hidden; } .amp-sidebar .logos { display: inline-block; width: 100%; border-bottom: 1px solid #ddd; padding: 15px; padding-right: 80px; margin-bottom: 20px; } .amp-sidebar .logos img { width: 100%; height: auto; max-width: 220px } .amp-sidebar.open { left: 0px; visibility: visible; opacity: 1 } .site_footer .clients img { width: 100%; height: auto; max-width: 100%; } .faq-amp-accord .row { margin: 0px } .thank_you .container.md { max-width: 600px; } .thank_you .content { float: left; width: 100%; padding: 30px; text-align: center; border-radius: 10px; margin-bottom: 30px; background: #fff; box-shadow: 0 0 30px rgb(0 0 0 / 20%); min-height: 280px; margin-top: -120px; position: relative; z-index: 99; overflow: hidden; } .thank_you .content .fa { font-size: 40px; display: inline-block; width: 80px; height: 80px; line-height: 80px; border: 2px solid #4CB849; color: #4CB849; border-radius: 100%; margin-bottom: 10px; } .thank_you h2 { color: #4CB849; font-weight: 700; font-size: 30px; } .thank_you p { font-size: 18px; color: #666; } .boxes .box img { margin-bottom: 10px; } .form_quote .head.style1 { margin-bottom: 10px; margin-top: 0; letter-spacing: .02em; font-size: 23px; color: #fff; } .app_feature { background: #0E152E; color: #fff; text-align: center; position: relative; overflow: hidden; } .head.style1 { margin-bottom: 20px; letter-spacing: .02em; } .app_feature ul li { float: left; position: relative; padding: 40px 80px 40px 0; display: table; width: 100%; min-height: 60px; font-size: 20px; } .app_feature .img, .app_feature ul { display: inline-block; vertical-align: middle; float: none; margin-left: -4px; padding: 0 15px; width: 36.5%; } .app_feature ul .fa { position: absolute; right: -5px; top: 50%; margin-top: -26px; color: #fff; font-size: 25px; text-align: center; line-height: 55px; width: 52px; height: 52px; z-index: 9; } .app_feature ul .fa:after, .app_feature ul li:after { content: ""; position: absolute; } .app_feature .img { width: 27%; } .app_feature ul .fa:after { left: 0; top: 0; width: 52px; height: 52px; border: 1px solid #fff; border-radius: 10px; transform: rotate(45deg); transition: all .3s ease; } .app_feature ul.last li { padding: 40px 0 40px 80px; } .app_feature ul.last .fa { right: auto; left: -5px; } .app_feature .download { float: left; width: 100%; text-align: center; margin-top: 20px; margin-bottom: 0; } .page_banner.web.portfolio .img img { background: #fff; border-radius: 25px; } .page_banner.web.portfolio { padding-bottom: 50px; } .page_banner h1 { margin-bottom: 10px; margin-top: 35px; } .boxes .box a[data-light-box-trigger] { color: #fff; justify-content: center } .boxes .box a[data-light-box-trigger] i { color: #fff; margin-left: 15px; } .clients.page ul { display: flex; flex-wrap: wrap; gap: 15px; } .clients.page ul li { border: 1px solid #ddd; border-radius: 5px; min-height: 100%; display: flex; align-items: center; } .clients.page ul li img { max-width: 120px; } section.half.text-dark p, section.half.text-dark .head, .text-dark .head { color: #000 } .table_step { display: flex; justify-content: space-between; align-items: center; } .table_step li span { display: inline-block; text-align: center; width: 40px; height: 40px; line-height: 40px; border-radius: 100px; background: #fff; margin-right: 10px; color: #0e152e; font-weight: 500; } .table_feature { display: flex; flex-wrap: wrap; width: 100%; } .table_feature li { width: 25%; padding: 0 10px; margin: 10px 0; } .table_feature li span { display: flex; border-radius: 10px 0 10px 0; background: #eee; padding: 15px 15px; font-weight: 500; color: #333; } .table_feature li span:before { content: "\f013"; font-family: FontAwesome; margin-right: 10px; color: #4bb749; } .grey .table_feature li span { background: #fff } .timeline .content ul.lists:before { display: none; } .fw-normal { font-weight: normal; } html br { display: none; } .tabs-with-selector.bottom [option] { border: none; justify-content: flex-start; margin: 0px; } .tabs-with-selector.bottom [selected] { background: #fff } .intl-tel-input { width: 100%; } .footer_form .form_group .fa-mobile { display: none; } .intl-tel-input .flag-container { z-index: 1111; color: #000 } .intl-tel-input .country-list .country { display: flex; justify-content: space-between; align-items: center; color: #333; } .intl-tel-input .country-list .country-name { flex: 1; margin: 0; } .intl-tel-input .country-list { width: 100%; white-space: inherit; } .intl-tel-input .country-list { width: 300px; } .intl-tel-input.separate-dial-code .selected-dial-code { padding-right: 20px; } .intl-tel-input.separate-dial-code .selected-flag { background-color: inherit; } .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input, .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=text], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel] { padding-left: 88px; } .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input, .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel] { padding-left: 102px; } .list-h-3 { display: inline-block; width: 100%; margin-bottom: 20px; } .list-h-3 h3 { font-weight: 500; margin-bottom: 10px; } .list-h-3 h3:before { content: '\f058'; font-family: 'FontAwesome'; margin-right: 15px; color: #4bb749; } .relaiable .row { display: flex; flex-wrap: wrap; } .relaiable .height-strech { height: 100%; object-fit: cover; border-radius: 15px; width: 100%; } .relaiable.left_contents { background: #fff; } .grey-engament-model { background: linear-gradient(to bottom, #fbfbfb, #ffffff) } .tools-integration-one { display: flex; flex-wrap: wrap; margin-top: 50px; justify-content: center; } .box-tools { display: flex; margin-right: 25px; margin-bottom: 25px; border-radius: 10px; overflow: hidden; width: 100px; border: none; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%); align-items: center; } .best_company_cer { display: inline-block; width: 100%; background: #f5f5f5; padding-top: 25px } .rating-design { display: flex; justify-content: space-between; align-items: center; gap: 30px; width: 100%; } .rating-design .rt_box { display: inline-block; background: #ffffff; padding: 25px 10px; border-radius: 7px; width: 100%; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%); } .rating-design .rt_box .star-and-count { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 10px; } .rating-design .rt_box .star-and-count i { color: #ff9f12 } .rating-design .rt_box .img { text-align: center; } .rating-design .rt_box .img img { max-height: 46px; object-fit: cover; max-width: 200px; width: 100%; } .relaiable .boxes .box img { margin-bottom: 0px; filter: invert(54%) sepia(97%) saturate(310%) hue-rotate(70deg) brightness(93%) contrast(93%); max-width: 65px; margin-right: 15px; } .relaiable .boxes .box { display: flex; align-items: center; padding: 5px 10px; } .relaiable .boxes .box h3 { margin-bottom: 0px; font-size: 18px; } .grey-engament-model .row { display: flex; align-items: center; } .half .table td, .half .table th { background-color: #f3f5ef; border: 1px solid #bbb; color: #333; font-size: 100%; padding: 10px; vertical-align: top; } .half .table th { background-color: #eae2cf; color: #333; font-size: 110%; } .table { border-collapse: collapse; } .ul_style { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin-bottom: 30px; margin-top: 20px; } .ul_style_links li, .ul_style { width: 100%; } .ul_style_links li a, .ul_style li { display: flex; align-items: center; color: inherit; font-weight: 400; transition: 0.5s all; } .ul_style li { padding: 5px 0 } .ul_style_links li a:hover { padding-left: 30px; } .ul_style_links li a i, .ul_style li i { margin-right: 15px; font-size: 20px; color: #4bb749; } .sub-color { font-weight: 400; font-size: 22px; margin-bottom: 0; color: #4bb749; } #my-notification>div i { font-size: 115px; position: absolute; right: 0; bottom: 15px; opacity: 0.3; pointer-events: none; color: #37bf35; } /* ============================================= NEW HEADER STYLES (Enterprise Redesign) ============================================= */ /* === HEADER REDESIGN OVERRIDES === */ /* Reset old .site_header styles for new structure */ #header.site_header { padding: 0 !important; background: none !important; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 9999; } #header.site_header.stickyactive { background: none !important; box-shadow: none !important; backdrop-filter: none !important; } #header.site_header.stickyactive a { color: inherit; } #header .site_logo { float: none !important; margin: 0 !important; width: auto !important; height: auto !important; display: flex; align-items: center; } #header .site_logo .toggle { color: var(--td-dark); } /* Top bar - dark slim bar with contact info */ .header-top-bar { background: var(--header-top-bar-bg) !important; color: var(--header-top-bar-text); font-size: 13px; padding: 6px 0 !important; transition: margin-top 0.3s ease; display: block; width: 100%; } .header-top-bar .container { display: flex; justify-content: space-between; align-items: center; } .header-top-bar a { color: rgba(255,255,255,0.82) !important; text-decoration: none; transition: color 0.2s; } .header-top-bar a:hover { color: #fff !important; } .header-top-left { display: flex; align-items: center; } .header-top-left a { margin-right: 25px; } .header-top-left .fa { margin-right: 6px; font-size: 13px; } .header-top-right { display: flex; align-items: center; } .header-top-right a { margin-left: 14px; font-size: 14px; width: 28px; height: 28px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); transition: all 0.2s; } .header-top-right a:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); } /* Main header bar */ .header-main { background: #fff !important; padding: 14px 0 !important; transition: box-shadow 0.3s ease, padding 0.3s ease; display: block; width: 100%; border-bottom: 1px solid rgba(0,0,0,0.06); } .header-main .container { display: flex; align-items: center; justify-content: space-between; } .header-main .site_logo img { height: 38px; width: auto; object-fit: contain; } /* Override old nav styles for new header */ .header-main .site_menu { float: none !important; margin: 0 !important; font-size: 15px; flex: 1; } .header-main .site_menu > ul.reset { display: flex !important; align-items: center; gap: 0; } .header-main .site_menu > ul.reset > li { float: none !important; margin-left: 0 !important; } .header-main .site_menu > ul.reset > li > a { color: var(--td-dark) !important; font-weight: 500; font-size: 15px; padding: 8px 16px; line-height: normal; } .header-main .site_menu > ul.reset > li > a:hover { color: var(--td-primary) !important; opacity: 1; } /* Fix mega menu sections inside header — don't inherit global section padding */ .header-main .site_menu section, .header-main .sub_menu section { padding: 0 !important; } /* Header CTA buttons */ .header-cta { display: flex; align-items: center; gap: 10px; white-space: nowrap; flex-shrink: 0; } .header-cta .btn-outline { border: 1.5px solid var(--td-primary) !important; color: var(--td-primary) !important; background: transparent !important; padding: 8px 22px; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; display: inline-block; line-height: normal; } .header-cta .btn-outline:hover { background: var(--td-primary) !important; color: #fff !important; } .header-cta .btn-primary { background: var(--td-green) !important; color: #fff !important; padding: 8px 22px; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; display: inline-block; line-height: normal; border: 1.5px solid var(--td-green); } .header-cta .btn-primary:hover { background: var(--td-green-dark) !important; border-color: var(--td-green-dark); } /* Sticky behavior */ .site_header.stickyactive .header-main { box-shadow: 0 2px 20px rgba(0,0,0,0.08); padding: 10px 0 !important; } /* ============================================= DROPDOWN NAVIGATION (Enterprise Redesign) ============================================= */ /* Dropdown container - shared */ .has-dropdown { position: relative; float: left; margin-left: 30px; } .has-dropdown > a { display: block; line-height: 36px; font-weight: 600; font-size: 15px; padding: 8px 16px; color: var(--td-dark) !important; text-decoration: none; border-radius: 6px; transition: color 0.2s ease, background-color 0.2s ease; } .has-dropdown > a.arrow::after { content: "\f107"; font-family: FontAwesome; margin-left: 6px; font-size: 11px; transition: transform 0.25s ease; display: inline-block; } .has-dropdown:hover > a.arrow::after { transform: rotate(180deg); } .has-dropdown > a:hover, .has-dropdown:hover > a { color: var(--td-primary) !important; opacity: 1 !important; background-color: rgba(41,128,185,0.08); } /* Smooth open/close with opacity + translateY */ .td-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); padding-top: 12px; z-index: 999; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } .has-dropdown:hover .td-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } .td-dropdown__inner { background: #fff; border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04); overflow: hidden; padding: 12px; } /* Dropdown arrow triangle */ .td-dropdown__inner::before { content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #fff; border: 1px solid rgba(0,0,0,0.06); border-right: none; border-bottom: none; opacity: 0; transition: opacity 0.2s ease 0.05s; } .has-dropdown:hover .td-dropdown__inner::before { opacity: 1; } /* Products dropdown — card style */ .td-dropdown--products { min-width: 440px; } .td-dropdown--products .td-dropdown__inner { padding: 8px; } .td-product-card { display: flex !important; align-items: center; gap: 14px; padding: 16px !important; border-radius: 10px; text-decoration: none !important; color: var(--td-dark) !important; transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease; border: 1px solid transparent; font-weight: 400 !important; font-size: 14px !important; line-height: normal !important; background: transparent; } .td-product-card:hover { background: #f5f8ff !important; border-color: rgba(41,128,185,0.15); box-shadow: 0 2px 8px rgba(41,128,185,0.08); opacity: 1 !important; transform: translateY(-1px); } .td-product-card + .td-product-card { border-top: 1px solid #f0f0f0; } .td-product-card__icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .td-product-card__icon { transition: transform 0.2s ease; } .td-product-card:hover .td-product-card__icon { transform: scale(1.05); } .td-product-card__icon i { color: #fff; font-size: 20px; } .td-product-card__icon--blue { background: linear-gradient(135deg, #2980B9, #1a5276); } .td-product-card__icon--green { background: linear-gradient(135deg, #4CB849, #2d8a2a); } .td-product-card__info { flex: 1; } .td-product-card__info strong { display: block; font-size: 15px; font-weight: 700; color: var(--td-dark); margin-bottom: 2px; } .td-product-card__info span { display: block; font-size: 13px; color: var(--td-primary); font-weight: 500; margin-bottom: 3px; } .td-product-card__info small { display: block; font-size: 12px; color: #595959; line-height: 1.4; } .td-product-card__arrow { color: #767676; font-size: 12px; transition: color 0.2s, transform 0.2s; flex-shrink: 0; } .td-product-card:hover .td-product-card__arrow { color: var(--td-primary); transform: translateX(3px); } /* Services dropdown — grid with icons */ .td-dropdown--services { min-width: 520px; left: 50%; } .td-dropdown--services .td-dropdown__inner { padding: 16px; } .td-dropdown__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .td-dropdown__link { display: flex !important; align-items: center; gap: 10px; padding: 11px 14px !important; border-radius: 8px; text-decoration: none !important; color: var(--td-dark) !important; font-size: 14px !important; font-weight: 500 !important; line-height: normal !important; transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; background: transparent; border-left: 2px solid transparent; } .td-dropdown__link:hover { background: #f5f8ff !important; color: var(--td-primary) !important; opacity: 1 !important; border-left-color: var(--td-primary); padding-left: 18px !important; } .td-dropdown__link i.fa { width: 20px; text-align: center; color: var(--td-primary); font-size: 15px; flex-shrink: 0; transition: transform 0.2s ease; } .td-dropdown__link:hover i.fa { transform: scale(1.15); } /* Company dropdown — simple list */ .td-dropdown--company { min-width: 200px; } .td-dropdown--company .td-dropdown__inner { padding: 8px; } .td-dropdown--company .td-dropdown__link { border-left: none; border-radius: 6px; } .td-dropdown--company .td-dropdown__link:hover { padding-left: 14px !important; } /* Sticky header dropdown adjustments */ #header.stickyactive .has-dropdown > a { color: var(--td-dark) !important; } #header.stickyactive .has-dropdown:hover > a { color: var(--td-primary) !important; background-color: rgba(41,128,185,0.06); } /* ============================================= HOMEPAGE SECTIONS (Enterprise Redesign) ============================================= */ /* --- Hero Section --- */ .td-hero { background: linear-gradient(135deg, var(--td-dark) 0%, #16213E 40%, #0F3460 100%); padding: 120px 0 40px; color: #fff; position: relative; overflow: hidden; width: 100%; float: left; } .td-hero::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(ellipse at 70% 50%, rgba(41,128,185,0.15) 0%, transparent 60%); pointer-events: none; } /* Inner page hero (no floating cards, centered, compact) */ .td-hero.td-hero--inner { padding: 100px 0 60px !important; display: block !important; float: none !important; width: 100% !important; } .td-hero.td-hero--inner .td-hero__content { max-width: 720px; } .td-hero.td-hero--inner h1 { font-size: 40px; } .td-hero.td-hero--inner .td-hero__sub { font-size: 18px; max-width: 640px; } /* Hero layout: left text + right floating cards */ .td-hero__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; } .td-hero__content { text-align: left; } .td-hero__label { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--td-green); margin-bottom: 20px; background: rgba(76,184,73,0.1); padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(76,184,73,0.2); } .td-hero h1 { font-size: 50px; font-weight: 800; line-height: 1.12; margin-bottom: 22px; color: #fff; letter-spacing: -0.5px; } .td-hero__sub { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.82); margin-bottom: 32px; } .td-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; } /* Hero trust badges */ .td-hero__trust { display: flex; gap: 20px; flex-wrap: wrap; } .td-hero__trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.82); font-weight: 500; } .td-hero__trust-item .fa { color: var(--td-green); font-size: 13px; } /* Floating product cards on right */ .td-hero__visual { position: relative; height: 380px; } .td-hero-card { display: flex !important; align-items: center; gap: 12px; background: rgba(255,255,255,0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 18px 22px; position: absolute; text-decoration: none !important; color: #fff !important; font-weight: 400 !important; font-size: 14px !important; line-height: normal !important; transition: transform 0.3s, background 0.3s; box-shadow: 0 8px 32px rgba(0,0,0,0.15); } .td-hero-card:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px) !important; opacity: 1 !important; } .td-hero-card__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .td-hero-card__icon i { color: #fff; font-size: 18px; } .td-hero-card strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 2px; } .td-hero-card span { display: block; font-size: 12px; color: rgba(255,255,255,0.82); } /* Card positions — staggered layout */ .td-hero-card--1 { top: 20px; left: 10%; animation: heroFloat 6s ease-in-out infinite; } .td-hero-card--2 { top: 130px; right: 5%; animation: heroFloat 6s ease-in-out 1.5s infinite; } .td-hero-card--3 { bottom: 40px; left: 20%; animation: heroFloat 6s ease-in-out 3s infinite; } /* Rating card style */ .td-hero-card--rating { flex-direction: column; align-items: flex-start; gap: 8px; } .td-hero-card--rating a { text-decoration: none !important; color: #fff !important; } .td-hero-card--rating img { height: 18px; width: auto; filter: brightness(0) invert(1); opacity: 0.8; } .td-hero-card__stars { display: flex; align-items: center; gap: 2px; } .td-hero-card__stars .fa { color: #f39c12; font-size: 13px; } .td-hero-card__stars span { color: rgba(255,255,255,0.82); font-size: 13px; margin-left: 6px; font-weight: 600; } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Scroll indicator */ .td-hero__scroll { text-align: center; margin-top: 15px; position: relative; z-index: 1; } .td-hero__scroll a { display: inline-block; width: 28px; height: 44px; border: 2px solid rgba(255,255,255,0.25); border-radius: 14px; position: relative; } .td-hero__scroll span { display: block; width: 4px; height: 8px; background: rgba(255,255,255,0.5); border-radius: 2px; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); animation: scrollBounce 2s ease-in-out infinite; } @keyframes scrollBounce { 0% { opacity: 1; top: 8px; } 50% { opacity: 0.3; top: 22px; } 100% { opacity: 1; top: 8px; } } /* --- Trusted By strip (inline logos) --- */ .td-clients__row { display: flex; flex-direction: column; align-items: center; gap: 20px; } .td-clients__row .td-clients__label { margin-bottom: 0; white-space: nowrap; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: #595959; font-weight: 600; } .td-clients__logos { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; } .td-clients__logos img { height: 70px; width: auto; opacity: 0.45; filter: grayscale(100%); transition: opacity 0.3s, filter 0.3s; } .td-clients__logos img:hover { opacity: 0.9; filter: grayscale(0%); } .td-clients__text-logo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #595959; opacity: 1; line-height: 1.3; text-align: center; white-space: nowrap; transition: opacity 0.3s; } .td-clients__text-logo:hover { opacity: 0.9; } /* --- Buttons --- */ .td-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.25s ease; cursor: pointer; border: 2px solid transparent; position: relative; overflow: hidden; } .td-btn--primary { background: var(--td-green); color: #fff; border-color: var(--td-green); box-shadow: 0 4px 14px rgba(76,184,73,0.3); } .td-btn--primary:hover { background: var(--td-green-dark); border-color: var(--td-green-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(76,184,73,0.4); } .td-btn--primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(76,184,73,0.3); } .td-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); backdrop-filter: blur(4px); } .td-btn--outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-2px); } .td-btn--sm { padding: 10px 20px; font-size: 14px; color: var(--td-primary); font-weight: 600; } .td-btn--sm:hover { color: var(--td-dark); } .td-btn--sm .fa { font-size: 12px; transition: transform 0.2s; } .td-btn--sm:hover .fa { transform: translateX(3px); } /* --- Trusted Clients --- */ .td-clients { padding: 40px 0; background: #f9fafb; border-bottom: 1px solid #eee; width: 100%; float: left; } .td-clients__label { text-align: center; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: #595959; font-weight: 600; margin-bottom: 20px; } /* --- Section Header --- */ .td-section-header { text-align: center; max-width: 640px; margin: 0 auto 50px; } .td-section-header__label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--td-primary); margin-bottom: 14px; background: rgba(41,128,185,0.06); padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(41,128,185,0.12); } .td-section-header h2 { font-size: 40px; font-weight: 800; color: var(--td-dark); margin-bottom: 16px; line-height: 1.15; letter-spacing: -0.5px; } .td-section-header p { font-size: 16px; color: #666; line-height: 1.7; } /* --- Products — alternating left/right rows --- */ .td-products { padding: 80px 0 50px; background: #fff; width: 100%; float: left; position: relative; } .td-products::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 10% 20%, rgba(41,128,185,0.03) 0%, transparent 50%), radial-gradient(circle at 90% 80%, rgba(76,184,73,0.03) 0%, transparent 50%); pointer-events: none; } .td-product-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 60px; align-items: center; margin-bottom: 60px; padding-bottom: 60px; border-bottom: 1px solid #eee; } .td-product-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .td-product-row--reverse .td-product-row__content { order: 2; } .td-product-row--reverse .td-product-row__visual { order: 1; } .td-product-row__badge { display: inline-block; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 5px 12px; border-radius: 4px; margin-bottom: 14px; } .td-product-row__content h3 { font-size: 34px; font-weight: 800; color: var(--td-dark); margin-bottom: 14px; line-height: 1.15; letter-spacing: -0.5px; } .td-product-row__content > p { font-size: 15px; color: #555; line-height: 1.8; margin-bottom: 20px; } .td-product-row__features { list-style: none; padding: 0; margin: 0 0 24px; } .td-product-row__features li { font-size: 14px; color: #444; padding: 6px 0; display: flex; align-items: center; gap: 10px; } .td-product-row__features li .fa { color: var(--td-green); font-size: 12px; } .td-btn--blue { background: #2980B9; color: #fff !important; border-color: #2980B9; box-shadow: 0 4px 14px rgba(41,128,185,0.3); } .td-btn--blue:hover { background: #1a5276; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(41,128,185,0.4); } .td-btn--green { background: #4CB849; color: #fff !important; border-color: #4CB849; box-shadow: 0 4px 14px rgba(76,184,73,0.3); } .td-btn--green:hover { background: #399837; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(76,184,73,0.4); } .td-product-row__visual { display: flex; align-items: center; justify-content: center; } /* Mock Dashboard Preview */ .td-mock-dash { width: 100%; max-width: 480px; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06); background: #fff; font-size: 12px; transition: transform 0.4s ease, box-shadow 0.4s ease; position: relative; } .td-product-row:hover .td-mock-dash { transform: translateY(-6px) scale(1.01); box-shadow: 0 28px 70px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06); } .td-mock-dash__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #1e293b; } .td-mock-dash--blue .td-mock-dash__bar { background: #1a3a5c; } .td-mock-dash--green .td-mock-dash__bar { background: #1a3c1a; } .td-mock-dash__dots { display: flex; gap: 5px; } .td-mock-dash__dots i { width: 8px; height: 8px; border-radius: 50%; display: block; } .td-mock-dash__dots i:nth-child(1) { background: #ff5f57; } .td-mock-dash__dots i:nth-child(2) { background: #ffbd2e; } .td-mock-dash__dots i:nth-child(3) { background: #28c840; } .td-mock-dash__title { color: rgba(255,255,255,0.82); font-size: 11px; font-weight: 600; } .td-mock-dash__body { display: flex; min-height: 220px; } .td-mock-dash__sidebar { width: 48px; background: #f1f5f9; padding: 12px 8px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid #e2e8f0; } .td-mock-dash__sidebar span { display: block; width: 32px; height: 32px; background: #e2e8f0; border-radius: 6px; transition: background 0.2s; } .td-mock-dash__sidebar span:first-child { background: var(--td-primary); opacity: 0.4; } .td-mock-dash:hover .td-mock-dash__sidebar span:first-child { opacity: 0.7; } .td-mock-dash__content { flex: 1; padding: 14px; } .td-mock-dash__stat-row { display: flex; gap: 8px; margin-bottom: 14px; } .td-mock-dash__stat { flex: 1; padding: 10px 8px; border-radius: 8px; text-align: center; font-size: 10px; color: #666; font-weight: 500; line-height: 1.3; } .td-mock-dash__stat span { display: block; font-size: 20px; font-weight: 800; margin-bottom: 2px; } .td-mock-dash__table { display: flex; flex-direction: column; gap: 0; } .td-mock-dash__row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 11px; color: #555; } .td-mock-dash__row:last-child { border-bottom: none; } .td-mock-dash__row span { font-weight: 500; } .td-mock-dash__row em { font-style: normal; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; } em.status-green { background: rgba(76,184,73,0.1); color: #2d8a2a; } em.status-orange { background: rgba(243,156,18,0.1); color: #c27d0e; } em.status-blue { background: rgba(41,128,185,0.1); color: #1a5276; } em.status-red { background: rgba(231,76,60,0.1); color: #c0392b; } /* --- Why Us — dark horizontal strip --- */ .td-why { padding: 0; background: var(--td-dark); width: 100%; float: left; } .td-why__strip { display: flex !important; align-items: center; justify-content: center; padding: 40px 0; gap: 0; } .td-why__item { display: flex; align-items: center; gap: 14px; padding: 0 40px; } .td-why__number { font-size: 36px; font-weight: 800; color: var(--td-green); line-height: 1; } .td-why__number .fa { font-size: 28px; } .td-why__text { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.4; font-weight: 500; } .td-why__divider { width: 1px; height: 40px; background: rgba(255,255,255,0.12); } /* --- Services — split layout: intro left, list right --- */ .td-services { padding: 80px 0; background: linear-gradient(180deg, #f0f4f8 0%, #f8fafc 100%); width: 100%; float: left; position: relative; } .td-services__layout { display: grid !important; grid-template-columns: 1fr 1.2fr !important; gap: 60px; align-items: start; } .td-services__intro h2 { font-size: 32px; font-weight: 800; color: var(--td-dark); line-height: 1.2; margin-bottom: 18px; letter-spacing: -0.3px; } .td-services__intro > p { font-size: 15px; color: #666; line-height: 1.7; } .td-services__intro .td-section-header__label { text-align: left; } .td-services__list { display: flex; flex-direction: column; gap: 0; } .td-service-item { display: flex !important; align-items: center; gap: 16px; padding: 22px 16px; border-bottom: 1px solid #e5e7eb; text-decoration: none; transition: all 0.25s ease; border-radius: 0; margin: 0 -16px; } .td-service-item:first-child { border-top: 1px solid #e5e7eb; } .td-service-item:hover { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border-radius: 12px; border-color: transparent; transform: translateX(4px); } .td-service-item:hover + .td-service-item { border-top-color: transparent; } .td-service-item__num { font-size: 13px; font-weight: 800; color: var(--td-primary); opacity: 0.25; flex-shrink: 0; width: 28px; transition: all 0.25s ease; } .td-service-item:hover .td-service-item__num { opacity: 1; color: var(--td-green); } .td-service-item div { flex: 1; } .td-service-item h3 { font-size: 16px; font-weight: 700; color: var(--td-dark); margin-bottom: 3px; transition: color 0.2s; } .td-service-item:hover h3 { color: var(--td-primary); } .td-service-item p { font-size: 13px; color: #888; margin: 0; } .td-service-item > .fa { color: #767676; font-size: 16px; transition: all 0.25s; } .td-service-item:hover > .fa { color: var(--td-primary); transform: translateX(4px); } /* --- Process — timeline with connecting line --- */ .td-process { padding: 70px 0; background: #fff; width: 100%; float: left; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; } .td-process__timeline { display: flex !important; position: relative; gap: 0; } .td-process__timeline::before { content: ''; position: absolute; top: 14px; left: 0; right: 0; height: 2px; background: #e0e0e0; } .td-process__step { flex: 1; text-align: center; padding: 0 16px; position: relative; } .td-process__dot { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--td-primary); margin: 0 auto 16px; position: relative; z-index: 1; } .td-process__step:hover .td-process__dot { background: var(--td-primary); } .td-process__number { display: block; font-size: 12px; font-weight: 700; color: var(--td-primary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; } .td-process__step h3 { font-size: 16px; font-weight: 700; color: var(--td-dark); margin-bottom: 6px; } .td-process__step p { font-size: 13px; color: #888; line-height: 1.5; } /* --- Mid CTA — horizontal bar, not centered block --- */ .td-mid-cta { padding: 40px 0; background: var(--td-green); width: 100%; float: left; } .td-mid-cta__inner { display: flex !important; align-items: center; justify-content: space-between; gap: 30px; } .td-mid-cta h2 { color: #fff; font-size: 24px; font-weight: 800; margin: 0; } .td-mid-cta p { color: rgba(255,255,255,0.8); font-size: 15px; margin: 4px 0 0; } .td-mid-cta .td-btn--primary { background: #fff; color: var(--td-dark) !important; border-color: #fff; white-space: nowrap; flex-shrink: 0; } .td-mid-cta .td-btn--primary:hover { background: rgba(255,255,255,0.9); } /* --- Case Studies — featured + side stack --- */ .td-case-studies { padding: 80px 0; background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%); width: 100%; float: left; } .td-cases__featured { display: grid !important; grid-template-columns: 1.4fr 1fr !important; gap: 24px; } .td-case-featured { display: block; text-decoration: none; border-radius: 16px; overflow: hidden; background: #fff; transition: all 0.35s ease; box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.04); } .td-case-featured:hover { box-shadow: 0 16px 50px rgba(0,0,0,0.12); transform: translateY(-4px); } .td-case-featured__img { overflow: hidden; } .td-case-featured__img img { width: 100%; height: 280px; object-fit: cover; display: block; transition: transform 0.5s ease; } .td-case-featured:hover .td-case-featured__img img { transform: scale(1.05); } .td-case-featured__info { padding: 28px; } .td-case-featured__meta { font-size: 11px; color: var(--td-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; } .td-case-featured__info h3 { font-size: 22px; font-weight: 700; color: var(--td-dark); margin: 10px 0; line-height: 1.3; } .td-case-featured__info p { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 14px; } .td-case-featured__link { font-size: 14px; font-weight: 600; color: var(--td-primary); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s; } .td-case-featured:hover .td-case-featured__link { gap: 10px; } .td-case-side { display: flex; flex-direction: column; gap: 24px; } .td-case-compact { display: flex !important; gap: 16px; align-items: center; text-decoration: none; padding: 16px; border-radius: 12px; background: #fff; transition: all 0.3s ease; flex: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.04); } .td-case-compact:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.08); transform: translateY(-3px); } .td-case-compact__img { width: 120px; height: 90px; border-radius: 8px; overflow: hidden; flex-shrink: 0; } .td-case-compact__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .td-case-compact:hover .td-case-compact__img img { transform: scale(1.08); } .td-case-compact__info span { font-size: 11px; color: #595959; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .td-case-compact__info h3 { font-size: 15px; font-weight: 700; color: var(--td-dark); margin-top: 4px; line-height: 1.3; } /* --- Industries — compact inline tag strip --- */ .td-industries { padding: 30px 0; background: #f8fafc; border-top: 1px solid #eee; border-bottom: 1px solid #eee; width: 100%; float: left; } .td-industries__inner { display: flex !important; align-items: center; gap: 20px; flex-wrap: wrap; } .td-industries__inner h3, .td-industries__heading { font-size: 14px; font-weight: 700; color: var(--td-dark); white-space: nowrap; margin: 0; } .td-industries__tags { display: flex; flex-wrap: wrap; gap: 8px; } .td-tag { display: inline-block; padding: 6px 16px; border-radius: 20px; border: 1px solid #d0d5dd; font-size: 13px; font-weight: 500; color: #555; text-decoration: none; transition: all 0.2s; background: #fff; } .td-tag:hover { border-color: var(--td-primary); color: var(--td-primary); background: rgba(41,128,185,0.04); } /* --- Testimonial — single featured large quote --- */ .td-testimonial-section { padding: 80px 0; background: #fff; width: 100%; float: left; border-top: 1px solid #f0f0f0; } .td-testimonial-featured { max-width: 720px; margin: 0 auto; text-align: center; position: relative; } .td-testimonial-featured__quote { margin-bottom: 20px; } .td-testimonial-featured__quote .fa { font-size: 40px; color: var(--td-primary); opacity: 0.15; } .td-testimonial-featured blockquote { font-size: 20px; line-height: 1.7; color: #333; margin: 0 0 24px; padding: 0; border: none; font-style: italic; font-weight: 400; } .td-testimonial-featured__author { display: flex; align-items: center; justify-content: center; gap: 24px; } .td-testimonial-featured__author strong { font-size: 15px; color: var(--td-dark); display: block; } .td-testimonial-featured__author > div:first-child span { font-size: 13px; color: #595959; } .td-testimonial-featured__rating { display: flex; align-items: center; gap: 6px; } .td-testimonial-featured__rating .fa { color: #f39c12; font-size: 13px; } .td-testimonial-featured__rating span { font-size: 13px; color: #595959; font-weight: 600; } /* --- Stats — dark horizontal bar --- */ .td-stats { padding: 60px 0; background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F3460 100%); color: #fff; width: 100%; float: left; position: relative; overflow: hidden; } .td-stats::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 20% 50%, rgba(76,184,73,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(41,128,185,0.08) 0%, transparent 50%); pointer-events: none; } .td-stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; text-align: center; position: relative; z-index: 1; } .td-stat { position: relative; padding: 16px 0; } .td-stat::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 40px; background: rgba(255,255,255,0.1); } .td-stat:last-child::after { display: none; } .td-stat__number { display: block; font-size: 42px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 8px; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .td-stat__label { display: block; font-size: 12px; color: rgba(255,255,255,0.82); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; } /* --- Recognition --- */ .td-recognition { padding: 45px 0; background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; width: 100%; float: left; } .td-recognition__grid { display: flex; justify-content: center; gap: 50px; flex-wrap: wrap; } .td-recognition__item { text-align: center; } .td-recognition__item img { height: 28px; width: auto; margin-bottom: 8px; opacity: 0.6; } .td-recognition__item:hover img { opacity: 1; } .td-recognition__stars { font-size: 13px; color: #f39c12; } .td-recognition__stars span { color: #666; font-weight: 700; margin-left: 4px; font-size: 13px; } /* --- FAQ Section --- */ .td-faq { padding: 70px 0; background: #f8fafc; width: 100%; float: left; border-top: 1px solid #eee; } .td-faq h2 { font-size: 32px; font-weight: 800; color: var(--td-dark); margin-bottom: 35px; letter-spacing: -0.3px; } .td-faq__list { max-width: 760px; } .td-faq__item { border-bottom: 1px solid #e0e0e0; } .td-faq__item summary { padding: 18px 0; font-size: 16px; font-weight: 600; color: var(--td-dark); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .td-faq__item summary::-webkit-details-marker { display: none; } .td-faq__item summary::after { content: '+'; font-size: 20px; font-weight: 300; color: #595959; transition: transform 0.2s; } .td-faq__item[open] summary::after { content: '−'; color: var(--td-primary); } .td-faq__item p { padding: 0 0 18px; font-size: 15px; color: #555; line-height: 1.7; } /* ============================================= NEW FOOTER STYLES (Enterprise Redesign) ============================================= */ /* Main content wrapper */ main[role="main"] { display: block; width: 100%; float: left; } /* Override global inline-block/float for footer */ footer.site-footer { display: block !important; width: 100%; float: left; } footer.site-footer section.footer-cta-band { display: block !important; width: 100%; float: left; padding: 60px 20px; } footer.site-footer .footer-main { display: block !important; width: 100%; float: none; } footer.site-footer .footer-bottom { display: block !important; width: 100%; float: none; } footer.site-footer .footer-grid { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1fr !important; gap: 40px !important; float: none !important; width: 100% !important; } footer.site-footer .footer-col { display: block !important; float: none !important; width: auto !important; } /* Pre-footer CTA band */ .footer-cta-band { background: linear-gradient(135deg, var(--td-dark) 0%, #16213E 50%, #0F3460 100%); text-align: center; padding: 60px 20px; color: #fff; position: relative; overflow: hidden; } .footer-cta-band::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 50%, rgba(41,128,185,0.15) 0%, transparent 60%); pointer-events: none; } .footer-cta-band h2 { color: #fff; margin-bottom: 12px; font-size: 30px; font-weight: 700; position: relative; } .footer-cta-band p { color: rgba(255,255,255,0.82); margin-bottom: 28px; font-size: 17px; position: relative; } .footer-cta-band .btn-primary { background: var(--td-green); padding: 13px 32px; border-radius: 6px; color: #fff; font-weight: 600; font-size: 15px; margin: 0 8px; text-decoration: none; display: inline-block; transition: all 0.2s; position: relative; border: 1.5px solid var(--td-green); } .footer-cta-band .btn-primary:hover { background: var(--td-green-dark); border-color: var(--td-green-dark); } .footer-cta-band .btn-outline-light { border: 1.5px solid rgba(255,255,255,0.4); color: #fff; padding: 13px 32px; border-radius: 6px; font-weight: 600; font-size: 15px; margin: 0 8px; background: transparent; text-decoration: none; display: inline-block; transition: all 0.2s; position: relative; } .footer-cta-band .btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); } /* Main footer */ .footer-main { background: var(--footer-bg); padding: 60px 0 40px; color: var(--footer-text); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } .footer-brand img { height: 38px; width: auto; margin-bottom: 5px; } .footer-brand p { margin: 15px 0; font-size: 14px; line-height: 1.7; color: var(--footer-link); } .footer-social { margin-top: 15px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--footer-border); border-radius: 50%; color: var(--footer-link); margin-right: 8px; transition: all 0.3s; text-decoration: none; font-size: 15px; } .footer-social a:hover { background: var(--td-green); border-color: var(--td-green); color: #fff; } .footer-col h3 { color: var(--footer-heading); font-size: 16px; font-weight: 600; margin-bottom: 18px; padding-bottom: 10px; position: relative; display: inline-block; } .footer-col h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--td-green); border-radius: 2px; } .footer-col h3.mt-20 { margin-top: 25px; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 10px; } .footer-col li a { color: var(--footer-link); font-size: 14px; transition: color 0.2s, padding-left 0.2s; text-decoration: none; display: inline-block; } .footer-col li a:hover { color: var(--footer-link-hover); padding-left: 4px; } .footer-contact li { color: var(--footer-link); font-size: 14px; } .footer-contact .fa { margin-right: 8px; color: var(--td-green); width: 16px; text-align: center; } /* Footer bottom / copyright */ .footer-bottom { background: #111827; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.08); } .footer-bottom .container { display: flex !important; justify-content: space-between; align-items: center; } .footer-bottom p { color: rgba(255,255,255,0.82); font-size: 13px; margin: 0; } .footer-bottom ul { list-style: none; display: flex; gap: 20px; padding: 0; margin: 0; } .footer-bottom li { float: none; } .footer-bottom a { color: rgba(255,255,255,0.82); font-size: 13px; text-decoration: none; transition: color 0.2s; } .footer-bottom a:hover { color: #fff; } .footer-bottom a::before { display: none; } /* ============================================= Accessibility: Visible focus indicators (WCAG 2.4.7) Overrides the global outline:0 rules with :focus-visible so keyboard users always see where focus is. ============================================= */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--td-blue); outline-offset: 2px; } /* Ensure hero cards and service items show focus clearly */ .td-hero-card:focus-visible, .td-service-item:focus-visible, .td-case-featured:focus-visible, .td-case-compact:focus-visible, .td-tag:focus-visible { outline: 2px solid var(--td-blue); outline-offset: 2px; border-radius: 4px; } /* Dark background sections need a lighter focus ring */ .td-why a:focus-visible, .td-stats a:focus-visible, .td-mid-cta a:focus-visible, .footer-cta-band a:focus-visible, .footer-main a:focus-visible, .footer-bottom a:focus-visible, .footer-social a:focus-visible { outline-color: #fff; } /* Button-specific focus (primary and outline buttons) */ .td-btn:focus-visible, .btn-primary:focus-visible, .btn-outline-light:focus-visible { outline: 2px solid var(--td-blue); outline-offset: 2px; } /* ============================================= Accessibility: Visually-hidden utility class Content is hidden visually but accessible to screen readers. ============================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================= SMOOTH SCROLL & SCROLL OFFSET ============================================= */ html { scroll-behavior: smooth; } section[id], [id].td-section { scroll-margin-top: 90px; } /* ============================================= PRODUCT PAGE — REUSABLE FEATURE CARDS ============================================= */ .td-feature-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; float: none !important; width: 100% !important; } .td-feature-card { background: #fff; border: 1px solid var(--td-border); border-radius: 10px; padding: 32px 22px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; float: none !important; display: block !important; } .td-feature-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.10); transform: translateY(-3px); border-color: rgba(41,128,185,0.2); } .td-feature-card__icon { width: 60px; height: 60px; background: var(--td-bg-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; transition: background 0.25s ease; } .td-feature-card__icon i { font-size: 24px; color: var(--td-primary); transition: color 0.25s ease; } .td-feature-card:hover .td-feature-card__icon { background: var(--td-primary); } .td-feature-card:hover .td-feature-card__icon i { color: #fff; } .td-feature-card h3 { font-size: 18px; font-weight: 600; color: var(--td-dark); margin-bottom: 10px; } .td-feature-card p { font-size: 15px; color: var(--td-text-light); line-height: 1.6; margin-bottom: 0; } /* Persona/audience card grid */ .td-persona-grid { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; justify-content: center !important; float: none !important; width: 100% !important; } .td-persona-card { flex: 1; min-width: 200px; max-width: 280px; padding: 28px; border: 1px solid var(--td-border); border-radius: 10px; text-align: center; background: #fff; transition: box-shadow 0.25s ease, transform 0.25s ease; float: none !important; display: block !important; } .td-persona-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); } .td-persona-card i { font-size: 28px; color: var(--td-primary); margin-bottom: 12px; display: block; } .td-persona-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; } .td-persona-card p { font-size: 14px; margin: 0; color: var(--td-text-light); line-height: 1.5; } /* Benefits card (dark background variant) */ .td-benefits-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 30px !important; float: none !important; width: 100% !important; } .td-benefit-card { flex: 1; min-width: 250px; max-width: 320px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 40px 25px; text-align: center; transition: background 0.25s ease, transform 0.25s ease; float: none !important; display: block !important; } .td-benefit-card:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); } .td-benefit-card i { font-size: 40px; color: var(--td-green); margin-bottom: 16px; display: block; } .td-benefit-card h3 { color: #fff; font-size: 20px; font-weight: 600; margin-bottom: 12px; } .td-benefit-card p { color: rgba(255,255,255,0.82); margin-bottom: 0; font-size: 15px; line-height: 1.6; } /* Product page section helpers */ .td-section--padded { padding: 60px 0 !important; display: block !important; float: none !important; width: 100% !important; clear: both !important; } .td-section--light { background: var(--td-bg-light) !important; } .td-section--dark { background: var(--td-dark) !important; } .td-section__narrow { max-width: 960px !important; margin: 0 auto !important; float: none !important; } /* ============================================= DEMO FORM — ENTERPRISE-GRADE FORM STYLES ============================================= */ .td-form { width: 100%; } .td-form__group { margin-bottom: 18px; } .td-form__label { display: block; font-size: 14px; font-weight: 600; color: var(--td-dark); margin-bottom: 6px; letter-spacing: 0.01em; } .td-form__input, .td-form__select, .td-form__textarea { width: 100%; padding: 11px 14px; border: 1.5px solid #dde1e6; border-radius: 8px; font-size: 15px; font-family: inherit; color: var(--td-text); background: #fff; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; -webkit-appearance: none; appearance: none; } .td-form__input::placeholder, .td-form__textarea::placeholder { color: #aab0b8; } .td-form__input:hover, .td-form__select:hover, .td-form__textarea:hover { border-color: #bcc1c8; } .td-form__input:focus, .td-form__select:focus, .td-form__textarea:focus { outline: none; border-color: var(--td-primary); box-shadow: 0 0 0 3px rgba(41,128,185,0.12); background: #fafcff; } .td-form__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; } .td-form__textarea { resize: vertical; min-height: 80px; } .td-form__submit { width: 100%; padding: 14px 24px; font-size: 16px; font-weight: 700; font-family: inherit; color: #fff; background: var(--td-green); border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; line-height: 1.4; } .td-form__submit:hover { background: var(--td-green-dark); box-shadow: 0 4px 12px rgba(76,184,73,0.3); transform: translateY(-1px); } .td-form__submit:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(76,184,73,0.2); } .td-form__submit:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } /* Form validation states */ .td-form__input:invalid:not(:placeholder-shown) { border-color: #e74c3c; } .td-form__input:valid:not(:placeholder-shown) { border-color: var(--td-green); } /* Form wrapper card */ .td-form-card { background: #fff; border: 1px solid var(--td-border); border-radius: 12px; padding: 35px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .td-form-card h2 { font-size: 22px; margin-bottom: 5px; color: var(--td-dark); } .td-form-card .td-form__subtitle { font-size: 14px; color: var(--td-text-light); margin-bottom: 25px; } .td-form__disclaimer { font-size: 12px; color: #595959; margin-top: 10px; text-align: center; } /* Success / error message */ .td-form__message { display: none; padding: 15px; border-radius: 8px; margin-top: 15px; text-align: center; font-size: 14px; font-weight: 500; } .td-form__message--success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .td-form__message--error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* Demo page layout */ .td-demo-layout { display: flex; flex-wrap: wrap; gap: 40px; } .td-demo-layout__info { flex: 1; min-width: 300px; padding-top: 10px; } .td-demo-layout__form { flex: 1; min-width: 340px; } /* Demo page expect list */ .td-expect-list { list-style: none; padding: 0; margin: 0; } .td-expect-list li { padding: 15px 0; border-bottom: 1px solid var(--td-border); display: flex; gap: 15px; align-items: flex-start; } .td-expect-list li:last-child { border-bottom: none; } .td-expect-list i { color: var(--td-green); font-size: 20px; margin-top: 3px; flex-shrink: 0; } .td-expect-list strong { display: block; color: var(--td-dark); margin-bottom: 4px; } .td-expect-list p { margin: 0; color: var(--td-text-light); font-size: 14px; line-height: 1.5; } /* Demo page trust box */ .td-trust-box { margin-top: 30px; padding: 20px; background: var(--td-bg-light); border-radius: 8px; } .td-trust-box p { margin: 0; font-size: 14px; color: var(--td-text-light); } .td-trust-box strong { color: var(--td-dark); }