@import url(https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,800,900&display=swap); body, h1, h2, h3, h4, h5, h6 { font-family: Poppins, sans-serif } body, p { color: #8a8a8a } .main-btn, .section-title .title { line-height: 55px; text-transform: capitalize } .bg_cover, .preloader { height: 100%; width: 100% } #loader span, .about-area .about-content ul li, .banner-area-2 .banner-flex .banner-content ul li, .banner-area-2.banner-area-3 .banner-content-3 ul li, .banner-area.page-title .banner-bg .page-title-content nav, .blog-standard-area .blog-sidebar .blog-list .blog-tag ul li, .blog-standard-area .blog-standard .blog-item .blog-content .item .blog-social ul li, .blog-standard-area .blog-standard .blog-sharing .blog-tag ul li, .case-details-area .case-share .case-social ul li, .case-details-area .case-share .case-tag ul li, .faq-area.about-faq .company-content .company-item ul li, .footer-3-area .footer-item-1 ul li, .footer-area .footer-widget .footer-items-1 ul li, .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li a .sub-nav-toggler i, .header-top .header-top-item .header-right-social ul li, .main-btn, .product-details-area .product-details-content .product-details-content-item ul li, .product-details-area .product-details-content .product-icons-item-1 ul li, .product-details-area .product-details-content .product-social-icon ul li, .services-area .services-active .slick-dots li, .shop-area .shop-item .shop-thumb ul li, .shop-area .shop-sidebar .shop-tag .shop-tag-list ul li, .shop-item-area .shop-item .shop-thumb ul li, .solutions-area .solutions-content-area .solutions-list .solutions-btn ul li, .team-2-area .team-item .team-thumb ul li, .team-area .team-item .team-overlay .team-contet ul li, .testimonial-area .testinonials-active .slick-dots li, .testimonials-area-3 .testinonials-3-active .testimonials-content img, a, i, span { display: inline-block } body { font-weight: 400; font-style: normal; overflow-x: hidden } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } img { max-width: 100%; object-fit: cover } a:focus, button:focus, input:focus, textarea:focus { text-decoration: none; outline: 0 } a:focus, a:hover { text-decoration: none } h1, h2, h3, h4, h5, h6 { font-weight: 600; color: #404040; margin: 0 } h1 { font-size: 48px } h6 { font-size: 16px } ol, ul { margin: 0; padding: 0; list-style-type: none } p { font-size: 14px; font-weight: 400; line-height: 26px; margin: 0 } .bg_cover { background-position: center center; background-size: cover; background-repeat: no-repeat } .slick-slide { outline: 0 } .main-btn { text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid #393185; padding: 0 38px; font-size: 15px; font-weight: 600; border-radius: 5px; color: #fff; cursor: pointer; z-index: 5; -webkit-transition: .4s ease-out; -moz-transition: .4s ease-out; -ms-transition: .4s ease-out; -o-transition: .4s ease-out; transition: .4s ease-out; background-color: #393185; position: relative } .main-btn::after, .main-btn::before { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; position: absolute; content: '' } .main-btn::before { right: 13px; bottom: 11px; height: 10px; width: 10px; border: 2px solid #fff; border-radius: 50%; transition: .3s ease-out } .main-btn::after { left: 13px; top: 11px; height: 8px; width: 8px; border: 2px solid #fff; border-radius: 50%; transition: .3s ease-out } .main-btn.main-btn-2, .main-btn:hover { background-color: #00a0e3; border-color: #00a0e3; color: #fff } .main-btn.main-btn-2:hover { background-color: #393185; border-color: #393185; color: #fff } .section-title .title { color: #8a8a8a; font-weight: 300; font-size: 40px } @media only screen and (min-width:992px) and (max-width:1200px) { .section-title .title { font-size: 38px } } @media (max-width:767px) { .section-title .title { font-size: 24px } } .section-title .title span { font-weight: 600; color: #222; font-size: 50px } @media only screen and (min-width:992px) and (max-width:1200px) { .section-title .title span { font-size: 40px } } @media (max-width:767px) { .section-title .title span { font-size: 34px; line-height: 45px } .header-top { padding-left: 0; padding-right: 0 } } .section-title .title span span { color: #00a0e3; font-weight: 400 } .section-title p { font-weight: 500; color: #8a8a8a; font-size: 20px; padding-top: 17px; padding-bottom: 50px } .section-title.section-title-2 .title { color: #c4c4c4 } .about-history-area .history-tab-btn .nav li a.active, .about-history-area .section-title .title span, .blog-area-2 .blog-item .blog-overlay .blog-content .title a, .featires-2-area .featires-item:hover .featires-content .title, .featires-2-area .featires-item:hover .featires-content a, .features-area .features-item:hover .title, .features-area .features-item:hover a, .header-area.header-area-3 .header-top-2 .header-top-item .header-left-side ul li span, .header-area.header-area-3 .header-top-2 .header-top-item .header-left-side ul li span i, .header-area.header-area-3 .header-top-2 .header-top-item .header-right-social ul li a, .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li:hover .sub-nav-toggler, .section-title.section-title-2 .title span, .services-3-area .section-title .title span, .services-area .section-title .title, .services-area .section-title .title span, .services-area .section-title p, .services-area .services-item a, .working-process .section-title .title, .working-process .section-title .title span { color: #fff } .features-area .features-item.item-2 a, .section-title.section-title-2 .title span span { color: #00a0e3 } .section-title.section-title-2 p { color: #c3c3c3 } .preloader { position: fixed; left: 0; top: 0; background: #fff; z-index: 9999999999 } .category-area .category-thumb .play-overlay, .preloader .three { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) } #loader span { width: 20px; height: 20px; border-radius: 100%; background-color: #3498db; margin: 35px 5px; opacity: 0 } #loader span:first-child { animation: 1s ease-in-out infinite opacitychange } #loader span:nth-child(2) { animation: 1s ease-in-out .33s infinite opacitychange } #loader span:nth-child(3) { animation: 1s ease-in-out .66s infinite opacitychange } @keyframes opacitychange { 0%, 100% { opacity: 0 } 60% { opacity: 1 } } .header-top { position: relative; background: #393185 } .brand-area.about-brand, .header-nav, .header-top.header-top-2, .services-area.services-about .services-item::before { background: #fff } .header-top .header-top-item { height: 55px; align-items: center } .header-top .header-top-item .header-left-side p { font-size: 14px; color: #fff } .header-top .header-top-item .header-left-side p i { padding-right: 5px } .header-top .header-top-item .header-right-social ul li a { color: #fff; margin-left: 5px; font-size: 14px; height: 35px; width: 35px; background: #393185; text-align: center; line-height: 35px; border-radius: 50%; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .features-area .features-item.item-2>i, .header-top .header-top-item .header-right-social ul li a:hover { background: #00a0e3 } .header-top .header-top-item .header-right-social ul li p { color: #fff; margin-right: 20px; font-size: 14px; cursor: pointer } .blog-area-2 .blog-item .blog-overlay .blog-content ul li i, .header-top .header-top-item .header-right-social ul li p i { padding-right: 6px } .header-top.header-top-2 .header-top-item { line-height: 60px; height: 60px; align-items: center } .header-top.header-top-2 .header-top-item .header-left-side ul li { display: inline-block; margin-right: 38px } @media (max-width:767px) { .header-top .header-top-item .header-left-side p { line-height: 20px } .header-top.header-top-2 .header-top-item .header-left-side ul li { margin-right: 5px } } .header-top.header-top-2 .header-top-item .header-left-side ul li span { font-size: 14px; color: #8a8a8a; font-weight: 500 } .counter-area.about-counter .counter-item span, .header-top.header-top-2 .header-top-item .header-left-side ul li span a, .services-area.services-about .services-item p { color: #8a8a8a } @media (max-width:767px) { .header-top.header-top-2 .header-top-item .header-left-side ul li span { font-size: 11px } .header-nav { padding: 15px 0 } } .blog-area .blog-item .blog-content ul li i, .blog-standard-area .blog-standard .blog-item .blog-content .item .blog-date ul li i, .header-top.header-top-2 .header-top-item .header-left-side ul li span i { color: #393185; padding-right: 6px } .header-top.header-top-2 .header-top-item .header-right-social ul li a { background-color: transparent; color: #8a8a8a } .features-area .features-item.item-3 a, .header-top.header-top-2 .header-top-item .header-right-social ul li a:hover { color: #393185 } .header-nav { position: absolute; top: 50px; right: 0; left: 0; z-index: 99 } .header-nav.sticky { position: fixed; top: 0; left: 0; right: 0; background: #fff; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .04); z-index: 999; animation: 1.2s sticky } .header-nav.sticky .navbar .navbar-nav .nav-item a { line-height: 80px !important } .header-nav.sticky .navbar .navbar-nav .nav-item .sub-menu li a { line-height: 30px !important } .header-nav .navigation .navbar { position: relative; padding: 0 } .header-nav .navigation .navbar .country-flag img { border: 5px solid #fff; border-radius: 6px; box-shadow: 0 8px 16px 0 rgba(60, 110, 203, .2) } .header-nav .navigation .navbar .navbar-toggler { border: 0 } .header-nav .navigation .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #383084; margin: 5px 0; display: block; position: relative; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .header-nav .navigation .navbar .navbar-toggler.active .toggler-icon:first-of-type { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px } .header-nav .navigation .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0 } .header-nav .navigation .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li:hover .sub-menu, .header-nav .navigation .navbar .navbar-nav .nav-item:hover .sub-menu { top: 100%; opacity: 1; visibility: visible } .blog-3-area .blog-item .blog-thumb, .blog-area .blog-item.item-2 .blog-thumb, .blog-area-2 .blog-item, .blog-standard-area .blog-sidebar .blog-add-area, .blog-standard-area .blog-sidebar .blog-search .input-box, .blog-standard-area .blog-standard .blog-item .blog-thumb, .case-details-area .case-thumb, .contact-info-area .contact-info-border .contact-info-item.active, .contact-info-area .contact-massage-area form .input-box, .counter-area .counter-play, .footer-3-area .footer-item-2.footer-item-3 .input-box, .header-nav .navigation .navbar .navbar-nav .nav-item, .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li, .quote-area .quote-content form .input-box, .team-2-area .team-item .team-thumb, .working-process .working-item { position: relative } .header-nav .navigation .navbar .navbar-nav .nav-item a { font-size: 18px; font-weight: 500; color: #393185; text-transform: capitalize; position: relative; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out; margin: 0 12px; line-height: 120px; padding: 0 } .header-nav .navigation .navbar .navbar-nav .nav-item a span { padding-left: 5px; font-size: 15px } .header-nav .navigation .navbar .navbar-nav .nav-item:first-child a { margin-left: 0 } .header-nav .navigation .navbar .navbar-nav .nav-item:last-child a { margin-right: 0 } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu { position: absolute; left: 0; top: 110%; width: 275px; background-color: #fff; opacity: 0; visibility: hidden; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out; z-index: 99; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .16) } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li .sub-nav-toggler { color: #404040; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li a { display: block; padding: 6px 11px; position: relative; color: #7e7e7e; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out; border-radius: 0; margin: 0; line-height: 30px } .features-area .features-item, .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li .sub-menu { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li a i { float: right; font-size: 14px; margin-top: 5px } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; transition: .3s ease-out } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li:hover>a { background-color: #393185; color: #fff !important } #page, .banner-area.page-title::after, .blog-standard-area .blog-sidebar .blog-add-area .add-overlay a::after, .blog-standard-area .blog-sidebar .blog-add-area .add-overlay a::before, .counter-area.about-counter::before, .header-nav .navigation .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none } .header-nav .navigation .navbar .navbar-btn a { background: #393185; color: #fff; position: relative; font-size: 14px; font-weight: 700; border-color: #fff } .header-nav .navigation .navbar .navbar-btn a:hover { color: #fff; background: #393185; border-color: #393185 } .header-nav .navigation .navbar .navbar-btn a:hover::after, .header-nav .navigation .navbar .navbar-btn a:hover::before { border-color: #fc5546 } .header-nav .navigation .navbar .navbar-btn a::before { position: absolute; content: ''; right: 13px; bottom: 11px; height: 10px; width: 10px; border: 2px solid #fff; border-radius: 50% } .header-nav .navigation .navbar .navbar-btn a::after { position: absolute; content: ''; height: 0; width: 0 } .header-nav.header-nav-2 { top: 60px } .header-nav.header-nav-2.sticky { top: 0 } @-webkit-keyframes sticky { 0% { top: -200px } 100% { top: 0 } } @keyframes sticky { 0% { top: -200px } 100% { top: 0 } } .header-area.header-area-3 .header-top-2 { position: absolute; top: 0; left: 0; right: 0; z-index: 99; background-color: transparent } .header-area.header-area-3 .header-nav-2 { padding-left: 30px; padding-right: 30px; background: #fc5546 } .header-area.header-area-3 .header-nav-2 .navigation .navbar .navbar-nav .nav-item>a { line-height: 100px } .header-area.header-area-3 .header-nav-2 .navigation .navbar .navbar-nav .nav-item .sub-menu>li:hover>a { background: #fc5546 } .banner-area { margin-top: 115px; position: relative; z-index: 10; background-position-y: top; overflow: hidden } .banner-area::before { position: absolute; content: ''; left: -310px; top: 0; height: 100%; width: 75%; background: #eef3f9; transform: skewX(10deg); z-index: -1 } @media only screen and (min-width:1200px) and (max-width:1600px) { .banner-area::before { width: 82% } .banner-area .banner-content .title span { font-size: 62px } } .banner-area .banner-bg { height: 457px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center } .banner-area.page-title .banner-bg, .footer-area .footer-copyright, .shop-collection-area .shop-collection-input .shop-input .nice-select { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex } .banner-area .banner-content, .case-study-area .case-item .case-thumb, .featires-2-area .featires-item .featires-thumb { overflow: hidden } .banner-area .banner-content .title { font-size: 63px; font-weight: 400; color: #fff; line-height: 80px } @media only screen and (min-width:992px) and (max-width:1200px) { .header-nav .navigation .navbar .navbar-nav .nav-item a { font-size: 14px; padding: 0 5px; margin: 0 6px } .banner-area::before { width: 90% } .banner-area .banner-content .title { font-size: 50px; line-height: 70px } } @media only screen and (min-width:768px) and (max-width:991px) { .header-nav { padding: 15px 0 } .header-nav.sticky .navbar .navbar-nav .nav-item a { line-height: 40px !important } .header-nav .navigation .navbar .navbar-collapse { position: absolute; top: 130%; left: 0; width: 100%; background-color: #393185; z-index: 8; padding: 10px 16px; box-shadow: 0 26px 48px 0 rgba(0, 0, 0, .15) } .header-nav .navigation .navbar .navbar-nav { margin-right: 0 } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li a i, .header-nav .navigation .navbar .navbar-nav .nav-item a span, .header-nav .navigation .navbar .navbar-nav .nav-item a>i { display: none } .header-nav .navigation .navbar .navbar-nav .nav-item a { padding: 0; display: block; border: 0; margin: 0; line-height: 40px } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0 } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li .sub-menu { padding-left: 30px } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: 0 0; border: 0; color: #fff } .header-nav .navigation .navbar .navbar-btn { position: absolute; right: 70px; top: 50%; transform: translateY(-50%) } .header-area.header-area-3 .header-nav-2 .navigation .navbar .navbar-nav .nav-item>a { line-height: 40px } .banner-area { margin-top: 70px } .banner-area::before { width: 106% } .banner-area::after { background-position: -240px 0 } .banner-area .banner-content .title { font-size: 46px; line-height: 60px } } @media (max-width:767px) { .header-nav.sticky .navbar .navbar-nav .nav-item a { line-height: 40px !important } .header-nav .navigation .navbar .navbar-collapse { position: absolute; top: 130%; left: 0; width: 100%; background-color: #393185; z-index: 8; padding: 10px 16px; box-shadow: 0 26px 48px 0 rgba(0, 0, 0, .15) } .header-nav .navigation .navbar .navbar-nav { margin-right: 0 } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li a i, .header-nav .navigation .navbar .navbar-nav .nav-item a span, .header-nav .navigation .navbar .navbar-nav .nav-item a>i { display: none } .header-nav .navigation .navbar .navbar-nav .nav-item a { padding: 0; display: block; border: 0; margin: 0; line-height: 40px } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0 } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu>li .sub-menu { padding-left: 30px } .header-nav .navigation .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: 0 0; border: 0; color: #fff } .header-nav .navigation .navbar .navbar-btn { position: absolute; right: 70px; top: 50%; transform: translateY(-50%) } .header-area.header-area-3 .header-nav-2 .navigation .navbar .navbar-nav .nav-item>a { line-height: 40px } .banner-area { margin-top: 70px } .banner-area::before { width: 100%; transform: skewX(0); left: 0 } .banner-area .banner-content .title { font-size: 29px; line-height: 40px } } .banner-area .banner-content .title span { font-weight: 600; text-transform: uppercase } .banner-area .banner-content .title span span { font-weight: 500; text-transform: capitalize; color: #00a0e3 } .banner-area .banner-content>span { font-size: 30px; color: #fff; text-transform: capitalize; letter-spacing: 6px; padding-top: 15px; font-weight: 300 } @media only screen and (min-width:992px) and (max-width:1200px) { .banner-area .banner-content>span { font-size: 24px } } @media (max-width:767px) { .banner-area .banner-content>span { font-size: 14px } .banner-area .banner-bg { height: 720px } .header-nav .navigation .navbar .navbar-nav .nav-item a { color: #fff } .navigation1 li.active a::before { background-color: #fff !important } } .banner-area .banner-content p { font-weight: 500; color: #fff; line-height: 26px; padding-right: 35px; padding-top: 25px; padding-bottom: 30px } .banner-area .banner-content ul li { display: inline-block; margin-right: 18px } @media (max-width:767px) { .banner-area .banner-content p { padding-right: 0; font-size: 15px } .banner-area .banner-content ul li { margin-top: 30px } .banner-area.page-title { background-position: 66% } } .banner-area .banner-shape-1 { height: 80px; width: 80px; border-radius: 50%; position: absolute; left: 56%; bottom: 0; z-index: 1; background: #393185; transform: translateX(-50%); animation: 15s linear infinite scale-up-three } .banner-area .banner-shape-2 { position: absolute; left: 35%; top: 100px; z-index: -1; animation: 15s linear infinite animationFramesOne } .banner-area .banner-shape-3 { position: absolute; left: 50px; bottom: 100px; z-index: -1; animation: 15s linear infinite animationFramesThree } .banner-area.page-title .banner-bg { height: 457px; display: flex; align-items: center } .banner-area.page-title .banner-bg .page-title-content .title { font-size: 37px; font-weight: 700; color: #222; padding-bottom: 12px } .banner-area.page-title .banner-bg .page-title-content nav .breadcrumb { background-color: transparent; padding: 0 } .banner-area.page-title .banner-bg .page-title-content nav .breadcrumb li { color: #00a0e3; font-weight: 500; font-size: 24px; padding-left: 0 } .banner-area.page-title .banner-bg .page-title-content nav .breadcrumb li a { color: #222; padding-right: 23px } .banner-area.page-title::before { transform: skewX(0); width: 100%; background: linear-gradient(90deg, #fff 0, rgb(0 0 0 / 37%) 100%); left: 0 } .breadcrumb-item+.breadcrumb-item::before { content: "|"; color: #00a0e3; padding-right: 23px } @keyframes animationFramesOne { 0%, 100% { transform: translate(0, 0) rotate(0) } 20% { transform: translate(73px, -1px) rotate(36deg) } 40% { transform: translate(141px, 72px) rotate(72deg) } 60% { transform: translate(83px, 122px) rotate(108deg) } 80% { transform: translate(-40px, 72px) rotate(144deg) } } @-webkit-keyframes animationFramesOne { 0%, 100% { -webkit-transform: translate(0, 0) rotate(0) } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg) } 40% { -webkit-transform: translate(141px, 72px) rotate(72deg) } 60% { -webkit-transform: translate(83px, 122px) rotate(108deg) } 80% { -webkit-transform: translate(-40px, 72px) rotate(144deg) } } @keyframes animationFramesThree { 0% { transform: translate(165px, -179px) } 100% { transform: translate(-346px, 617px) } } @-webkit-keyframes animationFramesThree { 0% { -webkit-transform: translate(165px, -179px) } 100% { -webkit-transform: translate(-346px, 617px) } } @-webkit-keyframes scale-up-three { 0%, 100% { -webkit-transform: scale(1); transform: scale(1) } 40% { -webkit-transform: scale(.4); transform: scale(.4) } } @keyframes scale-up-three { 0%, 100% { -webkit-transform: scale(1); transform: scale(1) } 40% { -webkit-transform: scale(.4); transform: scale(.4) } } .banner-area-2 { height: 880px; margin-top: 120px; position: relative } .banner-area-2::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(1, 84, 247, .2) } .banner-area-2 .banner-flex .banner-content { max-width: 665px; background: #fff; padding: 65px 40px 65px 65px } @media only screen and (min-width:768px) and (max-width:991px) { .banner-area-2 { margin-top: 75px } .banner-area-2 .banner-flex .banner-content { max-width: 500px } } @media (max-width:767px) { .banner-area.page-title .banner-bg .page-title-content .title { font-size: 36px } .banner-area.page-title .banner-bg .page-title-content nav .breadcrumb li { font-size: 18px } .banner-area.page-title .banner-shape-1 { display: none } .banner-area-2 { margin-top: 75px } .banner-area-2 .banner-flex .banner-content { max-width: 100%; padding: 20px } } .banner-area-2 .banner-flex .banner-content .title { font-size: 90px; color: #222; font-weight: 700; line-height: 90px; position: relative } @media only screen and (min-width:768px) and (max-width:991px) { .banner-area-2 .banner-flex .banner-content .title { font-size: 70px; line-height: 80px } } @media (max-width:767px) { .banner-area-2 .banner-flex .banner-content .title { font-size: 42px; line-height: 52px } .banner-area-2 .banner-flex .banner-content p { font-size: 13px } } .banner-area-2 .banner-flex .banner-content .title::before { position: absolute; content: ''; left: -65px; top: 0; height: 100%; width: 8px; background: #00a0e3 } .banner-area-2 .banner-flex .banner-content p { font-weight: 500; color: #8a8a8a; line-height: 26px; padding-top: 26px; padding-bottom: 45px } .banner-area-2 .banner-flex .banner-content ul li:last-child a { color: #222; margin-left: 35px; text-decoration: underline; font-size: 15px; font-weight: 600 } @media (max-width:767px) { .banner-area-2 .banner-flex .banner-content ul li:last-child a { margin-top: 20px } } .about-area .about-content ul li:last-child a i, .banner-area-2 .banner-flex .banner-content ul li:last-child a i, .blog-3-area .blog-item .blog-content>a i, .blog-area .blog-item .blog-content>a i, .blog-area-2 .blog-item .blog-overlay .blog-content>a i, .blog-standard-area .blog-sidebar .blog-add-area .add-overlay a i, .case-study-area .case-item .case-content a i, .case-study-area .case-item-2 .case-overlay .case-content a i, .faq-area.about-faq .company-content .company-item ul li .link i, .features-area .features-item a i, .project-2-area .project-item .project-content a i, .project-case-area .project-case-item .project-case-content a i, .services-3-area .services-item a i, .services-area.services-about .services-item a i, .solutions-area .solutions-content-area .solutions-list .solutions-btn ul li a.link i { padding-left: 6px } .banner-area-2.banner-area-3 { margin-top: 0; position: relative; height: 950px; z-index: 10 } .banner-area-2.banner-area-3::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(14, 43, 92, .86); z-index: -2 } .banner-area-2.banner-area-3 .banner-content-3 .title { color: #fff; font-size: 85px; line-height: 95px; font-weight: 700 } @media only screen and (min-width:992px) and (max-width:1200px) { .banner-area-2.banner-area-3 .banner-content-3 .title { font-size: 62px; line-height: 72px } } @media only screen and (min-width:768px) and (max-width:991px) { .banner-area-2.banner-area-3 .banner-content-3 .title { font-size: 64px; line-height: 74px } } @media (max-width:767px) { .banner-area-2.banner-area-3 .banner-content-3 .title { font-size: 28px; line-height: 38px } } .banner-area-2.banner-area-3 .banner-content-3 .title span { font-style: italic } .banner-area-2.banner-area-3 .banner-content-3 p { color: #fff; font-size: 20px; font-weight: 500; padding-right: 100px; line-height: 32px; padding-top: 33px; padding-bottom: 40px } @media (max-width:767px) { .banner-area-2.banner-area-3 .banner-content-3 p { padding-right: 0; font-size: 16px } .banner-area-2.banner-area-3 .banner-content-3 ul li .play-btn { margin-top: 20px } } .banner-area-2.banner-area-3 .banner-content-3 ul li:first-child { margin-right: 40px } .banner-area-2.banner-area-3 .banner-content-3 ul li .play-btn { text-decoration: underline; font-size: 15px; font-weight: 600; color: #fff } .banner-area-2.banner-area-3 .banner-content-3 ul li .play-btn i { padding-left: 8px } .banner-area-2.banner-area-3 .banner-thumb { position: absolute; right: 0; bottom: 0; text-align: right; z-index: -1 } .banner-area-2.banner-area-3 .banner-thumb img { width: 90% } @media only screen and (min-width:992px) and (max-width:1200px) { .banner-area-2.banner-area-3 .banner-thumb img { width: 75% } } @media only screen and (min-width:768px) and (max-width:991px) { .banner-area-2.banner-area-3 .banner-thumb img { width: 48% } .about-area .about-content { margin-top: 40px } } @media (max-width:767px) { .banner-area-2.banner-area-3 .banner-thumb img { display: none } } .banner-play { width: 80px; height: 80px; background: #00a0e3; text-align: center; border-radius: 50%; line-height: 80px; z-index: 1; position: relative } .banner-play::before, .category-area .category-thumb .play-overlay a::before, .video-play-area .video-play-item a::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; border: 1px solid #fff; -webkit-animation: 1s linear infinite ripple-white; -moz-animation: 1s linear infinite ripple-white; -o-animation: 1s linear infinite ripple-white; animation: 1s linear infinite ripple-white; border-radius: 50% } .banner-play::after { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; border: 1px solid #fff; -webkit-animation: 1.5s linear infinite ripple-white; -moz-animation: 1.5s linear infinite ripple-white; -o-animation: 1.5s linear infinite ripple-white; animation: 1.5s linear infinite ripple-white; border-radius: 50% } .banner-play a { font-size: 18px; position: relative; z-index: 9; color: #fff } @keyframes ripple-white { 0% { opacity: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } 40% { opacity: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2) } 100% { opacity: 0; -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -ms-transform: scale(1.4); -o-transform: scale(1.4); transform: scale(1.4) } } .about-area .about-content { padding-left: 30px } .about-area .about-content .title { font-size: 40px; text-transform: capitalize; font-weight: 300; color: #8a8a8a; line-height: 55px } @media only screen and (min-width:992px) and (max-width:1200px) { .about-area .about-content .title { font-size: 36px } .about-area .about-content .title span { font-size: 40px } } @media (max-width:767px) { .about-area .about-content { margin-top: 40px; padding-left: 0 } .about-area .about-content .title { font-size: 24px; line-height: 46px } .about-area .about-content .title span { font-size: 40px } } .about-area .about-content .title span { font-weight: 600; color: #222; font-size: 40px } .about-area .about-content .title span span, .quote-area .quote-content .title span span { font-weight: 400; color: #00a0e3 } .about-area .about-content>span { font-size: 20px; font-weight: 500; padding-top: 18px } .about-area .about-content p { font-size: 14px; line-height: 26px; padding-top: 30px; margin-top: 30px; border-top: 1px solid #ddd } .about-area .about-content ul { padding-top: 35px } .about-area .about-content ul li:last-child a { padding-left: 38px; font-size: 15px; font-weight: 600; color: #00a0e3 } @media (max-width:767px) { .about-area .about-content ul li:last-child a { padding-left: 0; margin-top: 30px } } .about-3-area { position: relative; padding-bottom: 111px } @media only screen and (min-width:992px) and (max-width:1200px) { .about-area .about-content>span { font-size: 18px } .about-3-area .section-title .title, .about-3-area .section-title .title span { font-size: 36px } } @media (max-width:767px) { .about-3-area .section-title .title span { font-size: 28px } } .about-3-area .section-title .title span span, .achievement-area .section-title .title span span, .blog-3-area .blog-item .blog-content>a:hover, .case-study-area .case-item .case-content a:hover { color: #fc5546 } .about-3-area .section-title>span { font-size: 14px; color: #8a8a8a; line-height: 26px; padding-right: 40px; padding-bottom: 35px } @media only screen and (min-width:992px) and (max-width:1200px) { .about-3-area .section-title>span { padding-right: 18px } .about-3-area .section-title p { font-size: 18px } } @media (max-width:767px) { .about-3-area .section-title>span { padding-right: 0 } } .about-3-area .section-title>span span { color: #fc5546; display: inline } .about-3-area .section-title p, .blog-3-area .section-title p, .services-business .section-title p { padding-bottom: 30px } @media (max-width:767px) { .about-3-area .section-title p { font-size: 14px } } .about-3-area .section-title a, .achievement-area .achievement-text a, .blog-3-area .section-title a, .category-area .category-misson .misson-item a { background: #fc5546; border-color: #fc5546 } .about-3-area .section-title a:hover, .achievement-area .achievement-text a:hover, .blog-3-area .section-title a:hover { background: #393185; border-color: #393185 } .about-3-area .about-thumb img, .about-history-area .history-tab-btn .tab-content .history-thumb img, .blog-standard-area .blog-sidebar .blog-add-area img, .case-details-area .case-thumb img, .category-area .category-thumb img, .contact-info-area .contact-thumb img, .counter-area .counter-play img, .product-details-area .product-details-slide-item ul li img, .project-2-area .project-item img, .quote-area .quote-thumb img, .services-business .bussiness-thumb img, .shop-item-area .shop-item .shop-thumb img, .solutions-area .solutions-thumb img, .team-area .team-item img { width: 100% } .about-history-area { background: #101e3b; padding-top: 117px } .about-history-area .section-title, .case-study-area .section-title .title, .services-pricing-area .section-title { padding-bottom: 50px } .about-history-area .section-title .title { color: #8499c3 } .about-history-area .history-tab-btn .nav { border-bottom: 2px solid #1a2c50 } .about-history-area .history-tab-btn .nav li a { padding: 0 18px; background-color: transparent; line-height: 80px; font-size: 20px; font-weight: 600; color: #8499c3; position: relative } @media only screen and (min-width:992px) and (max-width:1200px) { .about-history-area .history-tab-btn .nav li a { padding: 0 16px } } @media only screen and (min-width:768px) and (max-width:991px) { .about-history-area .history-tab-btn .nav li a { padding: 0 10px; font-size: 15px } .about-history-area .history-tab-btn .tab-content .history-content { padding-left: 0; margin-top: 30px } } @media (max-width:767px) { .about-history-area .history-tab-btn .nav li a { padding: 0 10px; font-size: 14px } .about-history-area .history-tab-btn .tab-content .history-content { padding-left: 0; margin-top: 30px } } .about-history-area .history-tab-btn .nav li a::before { position: absolute; content: ''; left: 0; bottom: -2px; height: 0; width: 100%; background: #fff } .about-history-area .history-tab-btn .nav li a.active::before, .shop-tab-area .nav .nav-item .nav-link.active::before { height: 2px } .about-history-area .history-tab-btn .tab-content .history-content .title { color: #fff; font-size: 30px; line-height: 40px; padding-bottom: 30px } @media (max-width:767px) { .about-history-area .history-tab-btn .tab-content .history-content .title { font-size: 24px } } .about-history-area .history-tab-btn .tab-content .history-content p { color: #a6b7d8 } .about-history-area .history-tab-btn .tab-content .history-content p.text { padding-top: 17px } .features-area { position: relative; padding-top: 117px } .features-area::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(44, 47, 80, .5) } .features-area .features-item { padding: 50px 8px; border-radius: 10px; transition: .3s ease-out; height: 100% } .features-area .features-item .title, .features-area .features-item>i { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out } @media only screen and (min-width:992px) and (max-width:1200px) { .features-area .features-item { padding: 50px 0 } } @media only screen and (min-width:768px) and (max-width:991px) { .features-area .features-item { padding: 50px 38px } } .featires-2-area, .project-2-area, .project-area, .project-case-area.project-home { padding-top: 117px } .features-area .features-item>i { height: 70px; width: 70px; text-align: center; line-height: 70px; border-radius: 50%; font-size: 30px; color: #fff; background: #3b7eff; transition: .3s ease-out } .features-area .features-item .title { font-size: 19px; line-height: 30px; font-weight: 600; color: #222; padding: 25px 10px 0; transition: .3s ease-out } .features-area .features-item a { font-size: 15px; color: #3b7eff; font-weight: 600; margin-top: 24px; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .features-area .features-item.item-3>i { background: #393185 } .features-area .features-item.item-4>i { background: #ef5b51 } .features-area .features-item.item-4 a { color: #ef5b51 } .featires-2-area .featires-item:hover .featires-content, .features-area .features-item:hover { background: #3b7eff } .features-area .features-item:hover>i { background: #fff; color: #3b7eff } .features-area .features-item:hover.item-2 { background: #00a0e3 } .features-area .features-item:hover.item-2>i { color: #00a0e3 } .features-area .features-item:hover.item-3 { background: #393185 } .features-area .features-item:hover.item-3>i { color: #393185 } .features-area .features-item:hover.item-4 { background: #ef5b51 } .features-area .features-item:hover.item-4>i { color: #ef5b51 } .blog-area-2 .section-title p, .faq-area .section-title p, .featires-2-area .section-title p { padding-bottom: 48px } .featires-2-area .title-text p { font-size: 14px; line-height: 26px; color: #8a8a8a; padding-top: 20px } .case-study-area .case-item .case-thumb img, .featires-2-area .featires-item .featires-thumb img { width: 100%; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .featires-2-area .featires-item .featires-content, .featires-2-area .featires-item .featires-content>i { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; text-align: center } .featires-2-area .featires-item .featires-content { box-shadow: 0 14px 28px 0 rgba(42, 121, 241, .1); border-radius: 7px; margin-left: 20px; margin-right: 20px; margin-top: -50px; background: #fff; z-index: 99; position: relative; padding: 48px 25px 22px; transition: .3s ease-out } @media only screen and (min-width:992px) and (max-width:1200px) { .features-area .features-item .title { font-size: 20px } .featires-2-area .featires-item .featires-content { padding: 48px 0 22px } } @media only screen and (min-width:768px) and (max-width:991px) { .featires-2-area .featires-item .featires-content { padding: 48px 55px 22px } } .featires-2-area .featires-item .featires-content>i { height: 60px; width: 60px; border-radius: 50%; background: #3b7eff; line-height: 60px; font-size: 24px; color: #fff; position: absolute; left: 50%; top: -28px; transform: translateX(-50%); transition: .3s ease-out } .featires-2-area .featires-item .featires-content .title, .featires-2-area .featires-item .featires-content a { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out } .featires-2-area .featires-item .featires-content .title { font-size: 18px; font-weight: 600; color: #222; line-height: 24px; transition: .3s ease-out } .featires-2-area .featires-item .featires-content a { margin-top: 12px; font-size: 15px; font-weight: 500; color: #393185; transition: .3s ease-out } .featires-2-area .featires-item.item-2 .featires-content>i { background: #00a0e3 } .featires-2-area .featires-item.item-2 .featires-content a { color: #00a0e3 } .featires-2-area .featires-item.item-3 .featires-content>i { background: #393185 } .featires-2-area .featires-item.item-3 .featires-content a { color: #393185 } .featires-2-area .featires-item.item-4 .featires-content>i { background: #ef5b51 } .featires-2-area .featires-item.item-4 .featires-content a { color: #ef5b51 } .case-study-area .case-item:hover .case-thumb img, .featires-2-area .featires-item:hover .featires-thumb img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1) } .featires-2-area .featires-item:hover .featires-content>i { color: #3b7eff; background: #fff } .featires-2-area .featires-item:hover.item-2 .featires-content { background: #00a0e3 } .featires-2-area .featires-item:hover.item-2 .featires-content i { color: #00a0e3 } .featires-2-area .featires-item:hover.item-3 .featires-content { background: #393185 } .featires-2-area .featires-item:hover.item-3 .featires-content i { color: #393185 } .featires-2-area .featires-item:hover.item-4 .featires-content { background: #ef5b51 } .featires-2-area .featires-item:hover.item-4 .featires-content i { color: #ef5b51 } .project-area { padding-bottom: 122px; border-bottom: 1px solid #dfdfdf } .project-area .project-item .project-thumb { box-shadow: 0 10px 80px 0 rgba(167, 167, 167, .65); border-radius: 12px; overflow: hidden } .blog-area .blog-item .blog-thumb img, .project-area .project-item .project-thumb img { width: 100%; transform: scale(1); -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .project-area .project-item .project-content .title { font-size: 30px; font-weight: 600; color: #222; padding-top: 44px } @media (max-width:767px) { .features-area .features-item { padding: 50px 20px } .project-area .project-item .project-content .title { font-size: 26px } } .project-area .project-item .project-content span { font-size: 18px; font-weight: 500; color: #8a8a8a; padding-top: 10px; padding-bottom: 18px } @media (max-width:767px) { .project-area .project-item .project-content span { font-size: 15px } } .project-area .project-item .project-content p { padding: 0 30px } .project-area .project-item .project-content a { font-size: 15px; font-weight: 600; color: #393185; margin-top: 20px; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .project-2-area .project-item .project-content, .project-2-area .project-item .project-content p { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out } .case-study-area .case-item-2 .case-overlay .case-content a:hover, .case-study-area .case-item:hover .case-content .title, .counter-area.about-counter .counter-item i, .footer-3-area .footer-item-2 .links-list ul li a:hover, .project-area .project-item .project-content a:hover, .project-case-area .project-case-item .project-case-content a:hover, .project-case-area .project-case-item:hover .project-case-content .title { color: #00a0e3 } .case-study-area .case-item-2:hover img, .project-area .project-item:hover .project-thumb img, .project-case-area .project-case-item:hover .project-case-thumb img { transform: scale(1.1) } .project-area.project-4-area { padding-top: 94px } .fact-area { padding-bottom: 127px } .blog-standard-area.blog-details-area, .project-2-area, .requst-quote-area.services-quote, .team-2-area.about-team { padding-bottom: 130px } .fact-area .fact-item .title { font-size: 60px; font-weight: 700; color: #393185 } .fact-area .fact-item>span { font-weight: 600; color: #8a8a8a; padding-top: 12px } .project-2-area .project-item { position: relative; overflow: hidden; margin-left: 2px; margin-right: 2px } .project-2-area .project-item::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-color: #1b69ff; opacity: .8 } .project-2-area .project-item .project-content { position: absolute; bottom: -103px; left: 50%; width: 65%; transform: translateX(-50%); transition: .3s ease-out } @media only screen and (min-width:992px) and (max-width:1200px) { .project-area .project-item .project-content p { padding: 0 26px } .project-2-area .project-item .project-content { width: 90% } } @media (max-width:767px) { .project-area .project-item .project-content p { padding: 0 } .project-2-area .project-item .project-content { width: 92% } .project-case-area .project-case-item .project-case-content span { font-size: 14px } } .project-2-area .project-item .project-content .title { color: #fff; font-size: 30px } .project-2-area .project-item .project-content span { color: #fff; font-size: 18px; font-weight: 500; padding-top: 4px } .project-2-area .project-item .project-content p { color: #fff; font-size: 18px; font-weight: 500; line-height: 28px; padding-top: 18px; padding-bottom: 20px; opacity: 0; transition: .3s ease-out } .project-2-area .project-item .project-content a, .project-case-area .project-case-item .project-case-thumb img { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out } .project-2-area .project-item .project-content a { color: #fff; font-weight: 600; opacity: 0; transition: .3s ease-out } .project-2-area .project-item.active .project-content, .project-2-area .project-item:hover .project-content { bottom: 48px } .project-2-area .project-item.active .project-content a, .project-2-area .project-item.active .project-content p, .project-2-area .project-item:hover .project-content a, .project-2-area .project-item:hover .project-content p, .team-2-area .team-item:hover .team-thumb ul { opacity: 1 } .project-case-area .project-case-item .project-case-thumb { border-radius: 12px; overflow: hidden; position: relative; z-index: 10 } .project-case-area .project-case-item .project-case-thumb::after { position: absolute; content: ''; right: 0; bottom: 0; width: 0; height: 0; border-bottom: 120px solid #00a0e3; border-left: 120px solid transparent; z-index: 1 } .project-case-area .project-case-item .project-case-thumb img { width: 100%; transform: scale(1); transition: .3s ease-out; height: 250px } .project-case-area .project-case-item .project-case-thumb i { position: absolute; right: 20px; bottom: 20px; color: #fff; font-size: 35px; z-index: 2 } .project-case-area .project-case-item .project-case-content .title { font-size: 18px; color: #222; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .project-case-area .project-case-item .project-case-content span { font-weight: 500; color: #8a8a8a; padding-top: 8px; padding-bottom: 19px } .project-case-area .project-case-item .project-case-content a { font-size: 15px; font-weight: 600; color: #393185; padding-top: 18px; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .team-area .team-item .team-overlay, .team-area .team-item .team-overlay .team-contet { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; position: absolute; width: 100% } .team-area { padding-bottom: 128px; position: relative } .team-area::before { position: absolute; content: ''; bottom: 0; left: 0; height: 100%; width: 100%; background: #101e3b } .team-area .team-title .title { color: #fff; font-size: 40px; font-weight: 300 } .team-area .team-title .title span { font-size: 50px; font-weight: 600 } .team-area .team-title .title span span { font-weight: 400 } .team-area .team-title>span { color: #fff; font-weight: 500; font-size: 20px; padding-top: 15px } .team-area .team-item { position: relative; z-index: 10; margin-left: 25px; margin-right: 25px; margin-bottom: 30px } .team-area .team-item .team-overlay { top: 0; left: 0; height: 100%; background-color: rgba(34, 34, 34, .5); transition: .3s ease-out } .team-area .team-item .team-overlay .team-contet { left: 50%; bottom: 0; transform: translateX(-50%); opacity: 0; transition: .3s ease-out } .team-area .team-item .team-overlay .team-contet ul li a, .team-area .team-item::before { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out } .team-area .team-item .team-overlay .team-contet ul li a { height: 35px; width: 35px; line-height: 35px; text-align: center; color: #fff; font-size: 14px; background: #393185; border-radius: 50%; margin: 0 3px; transition: .3s ease-out } .team-area .team-item .team-overlay .team-contet ul li a:hover, .team-area .team-item:hover::before { background: #ef5b51 } .team-area .team-item .team-overlay .team-contet .title { color: #fff; font-size: 24px; font-weight: 600; text-transform: capitalize; padding-top: 10px; padding-bottom: 4px } .team-area .team-item .team-overlay .team-contet span { font-size: 14px; font-weight: 500; color: #fff } .team-area .team-item::before { position: absolute; content: ''; left: -30px; bottom: -30px; height: 100%; width: 100%; background: #182a51; z-index: -1; transition: .3s ease-out } .team-2-area .team-item .team-thumb ul, .team-area .team-active .slick-arrow { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; position: absolute } .team-area .team-item:hover .team-overlay { background-color: rgba(239, 91, 81, .62) } .team-area .team-item:hover .team-overlay .team-contet { opacity: 1; bottom: 37px } .team-area .team-active .slick-arrow { left: -400px; bottom: 30px; font-size: 20px; color: #fff; transition: .3s ease-out; cursor: pointer } .team-area .team-active .slick-arrow:hover { color: #00a0e3; transform: scale(1.3) } .team-area .team-active .slick-arrow.prev { left: -485px } .team-area .team-active .slick-arrow.next { left: -450px } .team-2-area { padding-top: 70px; padding-bottom: 127px } .solutions-area .solutions-content-area .section-title p, .team-2-area .section-title p { padding-bottom: 40px } .team-2-area .section-title p.text { font-size: 14px; font-weight: 500; padding-top: 0; padding-bottom: 45px; line-height: 26px; color: #8a8a8a; padding-right: 70px } .team-2-area .team-item .team-thumb img { height: 250px; width: 250px; border-radius: 50% } .team-2-area .team-item .team-thumb ul { left: 50%; bottom: -10px; transform: translateX(-50%); white-space: nowrap; opacity: 0; transition: .3s ease-out } .team-2-area .team-item .team-thumb ul li a, .testimonial-area .testinonials-active .slick-dots li button { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out } .team-2-area .team-item .team-thumb ul li a { height: 35px; width: 35px; background: #393185; border-radius: 50%; text-align: center; line-height: 35px; color: #fff; font-size: 14px; margin: 0 4px; transition: .3s ease-out } .achievement-area .achievement-counter.item-2, .faq-area.about-faq .faq-content, .team-2-area .team-item .team-thumb ul li a:hover { background: #00a0e3 } .team-2-area .team-item .team-content { padding-top: 25px } .team-2-area .team-item .team-content .title { font-size: 24px } .team-2-area .team-item .team-content span { font-size: 14px; font-weight: 600; color: #00a0e3 } .team-2-area.about-team.team-page { padding-top: 90px } .working-process { background: #3b7eff; padding-top: 117px; padding-bottom: 125px; position: relative; z-index: 10 } .working-process::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/working-line.png); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; opacity: .07 } .working-process .section-title p { color: #fff; padding-bottom: 47px } .working-process .working-item i { height: 120px; width: 120px; border-radius: 50%; text-align: center; line-height: 120px; border: 2px dashed #fff; color: #fff; font-size: 50px } .working-process .shape-1, .working-process .shape-2 { position: absolute; border-radius: 50%; height: 60px; width: 60px } .working-process .working-item .title { color: #fff; font-size: 24px; font-weight: 600; padding-top: 25px } .working-process .working-item p { color: #fff; font-size: 14px; line-height: 28ox; padding-top: 7px } .working-process .working-item.item-1 { margin-top: 80px } .working-process .working-item.item-2 { margin-top: 240px } .star, .working-process .working-item.item-3 { margin-top: 30px } .working-process .working-item.item-4 { margin-top: 190px } .working-process .working-item .dot-1 { position: absolute; right: -140px; top: 0 } .working-process .working-item .dot-2 { position: absolute; right: -70px; top: -160px } .working-process .working-item .dot-3 { position: absolute; top: -140px; left: -60px } .working-process .shape-1 { top: 150px; left: 100px; background: #fff; animation: 15s linear infinite scale-up-three } .working-process .shape-2 { bottom: 50px; right: 100px; border: 5px solid #fff; animation: 15s linear infinite rotatey } .working-process .shape-3, .working-process .shape-4 { height: 5px; transform: rotate(-18deg); animation: 30s linear infinite rotated; position: absolute; background: #fff } .working-process .shape-3 { top: 150px; right: 100px; width: 60px } .working-process .shape-3::before { position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 60px; width: 5px; background: #fff } .working-process .shape-4 { bottom: 150px; left: 100px; width: 50px; opacity: .7 } .working-process .shape-4::before { position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 50px; width: 5px; background: #fff; opacity: .7 } @keyframes rotatey { 0% { transform: rotateY(-360deg) rotateX(-90deg) } 100% { transform: rotateY(360deg) rotateX(90deg) } } @-webkit-keyframes rotatey { 0% { transform: rotateY(-360deg) rotateX(-90deg) } 100% { transform: rotateY(360deg) rotateX(90deg) } } @keyframes rotated { 0% { transform: rotate(-360deg) } 100% { transform: rotate(360deg) } } @-webkit-keyframes rotated { 0% { transform: rotate(-360deg) } 100% { transform: rotate(360deg) } } .quote-area { padding-top: 124px } .quote-area .quote-content .title { font-weight: 300; font-size: 40px; color: #8a8a8a; line-height: 55px } .quote-area .quote-content .title span { color: #222; font-weight: 600; font-size: 46px } @media only screen and (min-width:992px) and (max-width:1200px) { .team-area .team-title .title span { font-size: 42px } .team-area .team-active .slick-arrow.prev { left: -380px } .team-area .team-active .slick-arrow.next { left: -350px } .team-2-area .section-title p.text { padding-right: 0 } .quote-area .quote-content .title span { font-size: 38px } } @media (max-width:767px) { .team-area .team-title .title { font-size: 30px } .team-area .team-title .title span { font-size: 32px } .team-area .team-title>span { padding-bottom: 30px; font-size: 16px } .team-2-area .section-title p.text { padding-right: 0 } .quote-area .quote-content, .working-process .working-item.item-1, .working-process .working-item.item-2, .working-process .working-item.item-3, .working-process .working-item.item-4 { margin-top: 30px } .working-process .working-item .dot-1, .working-process .working-item .dot-2, .working-process .working-item .dot-3 { display: none } .working-process .shape-1 { left: 20px; top: 30px } .working-process .shape-2 { right: 30px; bottom: 30px } .working-process .shape-3 { right: 20px; top: 50px } .working-process .shape-4 { left: 20px; bottom: 50px } .quote-area .quote-content .title span { font-size: 40px } } .quote-area .quote-content form .input-box label { font-size: 18px; font-weight: 600; color: #222 } .quote-area .quote-content form .input-box input { width: 100%; background: #eef3f9; border: 2px solid #eef3f9; line-height: 70px; padding-left: 30px; color: #8a8a8a } .quote-area .quote-content form .input-box input::placeholder { color: #8a8a8a; opacity: 1 } .quote-area .quote-content form .input-box input:focus, .quote-area .quote-content form .input-box textarea:focus { border-color: #00a0e3; background-color: transparent } .quote-area .quote-content form .input-box textarea { background: #eef3f9; width: 100%; height: 130px; border: 2px solid #eef3f9; padding-left: 30px; padding-top: 20px; color: #8a8a8a; resize: none } .quote-area .quote-content form .input-box textarea::placeholder { opacity: 1; color: #8a8a8a } .quote-area .quote-content form .input-box i { color: #00a0e3; position: absolute; right: 30px; top: 65px; font-size: 14px } .testimonial-area { padding-top: 117px; padding-bottom: 203px; background: #eef3f9 } .testimonial-area .testimonial-item { padding: 0 40px 50px; position: relative; margin-bottom: 25px } @media only screen and (min-width:992px) and (max-width:1200px) { .testimonial-area .testimonial-item { padding: 0 10px 50px } .testimonials-2-area .section-title p { font-size: 18px } } @media only screen and (min-width:768px) and (max-width:991px) { .project-area .project-item .project-content p { padding: 0 } .team-area .team-title>span { padding-bottom: 30px } .quote-area .quote-content, .working-process .working-item.item-1, .working-process .working-item.item-2, .working-process .working-item.item-3, .working-process .working-item.item-4 { margin-top: 30px } .working-process .working-item .dot-1, .working-process .working-item .dot-2, .working-process .working-item .dot-3 { display: none } .testimonial-area .testimonial-item { padding: 0 30px 50px } } @media (max-width:767px) { .testimonial-area .testimonial-item { padding: 0 10px 50px } } .testimonial-area .testimonial-item img { margin-top: -40px; display: inline-block; width: 80px; height: 80px } .testimonial-area .testimonial-item p { font-size: 14px; line-height: 26px; padding-top: 12px } .testimonial-area .testimonial-item .title { font-weight: 600; color: #222; padding-top: 14px } .testimonial-area .testimonial-item>i { height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50%; color: #fff; font-size: 18px; background: #00a0e3; position: absolute; left: 50%; bottom: -25px; transform: translateX(-50%) } .testimonial-area .testinonials-active .slick-dots { position: absolute; left: 50%; bottom: -78px; transform: translateX(-50%) } .testimonial-area .testinonials-active .slick-dots li button { font-size: 0; background-color: #b1becd; border: 0; height: 5px; width: 20px; margin: 0 3px; border-radius: 10px; transition: .3s ease-out } .blog-area-2 .blog-item .blog-overlay .blog-content .title, .pagination-area nav ul li a { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out } .testimonial-area .testinonials-active .slick-dots li.slick-active button { background: #00a0e3; width: 50px } .star span { font-size: 28px; color: #8a8a8a; font-weight: 500 } .star ul { padding-left: 10px; padding-right: 10px; line-height: 35px } .star ul li { display: inline-block; color: #00a0e3; margin: 0 3px } .testimonials-2-area { background: #eef3f9; padding-top: 119px; padding-bottom: 130px } .testimonials-2-area .section-title p { padding-bottom: 0 } .testimonials-2-area .section-title p.text { font-size: 14px; font-weight: 400; color: #8a8a8a; padding-right: 55px; padding-top: 40px; padding-bottom: 24px } .testimonials-2-area .testimonials-item { padding: 45px 40px 32px; position: relative; margin-bottom: 24px } @media only screen and (min-width:992px) and (max-width:1200px) { .testimonials-2-area .section-title p.text { padding-right: 0 } .testimonials-2-area .testimonials-item { padding: 45px 20px 32px } } @media (max-width:767px) { .testimonial-area .testinonials-active .slick-dots li button { width: 15px } .testimonials-2-area .testimonials-item { padding: 45px 10px 32px } } .testimonials-2-area .testimonials-item .testimonials-info { padding-left: 80px; position: relative } .blog-standard-area .blog-sidebar .blog-news .blog-news-item .item img, .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item img, .testimonials-2-area .testimonials-item .testimonials-info img { position: absolute; left: 0; top: 50%; transform: translateY(-50%) } .testimonials-2-area .testimonials-item .testimonials-info .title { font-size: 20px } .testimonials-2-area .testimonials-item .testimonials-info span { font-size: 14px; font-weight: 500; color: #00a0e3 } .testimonials-2-area .testimonials-item .testimonials-content p { font-size: 14px; color: #8a8a8a; line-height: 26px; padding-top: 30px } .testimonials-2-area .testimonials-item .quote { position: absolute; bottom: -24px; right: 40px } .testimonials-2-area .testimonials-item .quote i { height: 50px; width: 50px; background: #00a0e3; text-align: center; line-height: 50px; border-radius: 50%; font-size: 18px; color: #fff } .testimonials-area-3 { padding-top: 117px; padding-bottom: 125px } .testimonials-area-3 .testinonials-3-active .testimonials-content p { font-size: 24px; font-weight: 600; color: #222; line-height: 42px; padding: 35px 40px 0 } @media only screen and (min-width:992px) and (max-width:1200px) { .testimonials-area-3 .testinonials-3-active .testimonials-content p { padding: 35px 0 0; font-size: 23px } } @media only screen and (min-width:768px) and (max-width:991px) { .testimonials-area-3 .testinonials-3-active .testimonials-content p { padding: 35px 0 0; font-size: 17px; line-height: 32px } } .testimonials-area-3 .testinonials-3-active .testimonials-content .user { border: 5px solid #fff; border-radius: 50%; box-shadow: 0 0 49.5px .5px rgba(189, 189, 189, .5); margin-top: 38px } .testimonials-area-3 .testinonials-3-active .testimonials-content span { font-size: 18px; font-weight: 700; color: #fc5546; padding-top: 15px } .testimonials-area-3 .testinonials-3-active .testimonials-content span span { font-size: 14px; font-weight: 500; color: #8a8a8a; padding-top: 0 } .blog-area { padding-top: 116px; padding-bottom: 124px } .blog-area .blog-item .blog-thumb { position: relative; overflow: hidden; z-index: 10 } .blog-area .blog-item .blog-thumb::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(1, 84, 247, .6); z-index: 5 } .blog-area .blog-item .blog-content { padding: 20px } .blog-area .blog-item .blog-content ul li, .blog-standard-area .blog-standard .blog-item .blog-content .item .blog-date ul li { display: inline-block; font-size: 14px; font-weight: 500; color: #8a8a8a; margin-right: 26px } .blog-area .blog-item .blog-content .title { font-size: 20px; font-weight: 600; line-height: 28px; padding-top: 11px } @media (max-width:767px) { .testimonials-area-3 .testinonials-3-active .testimonials-content p { padding: 35px 3px 0; font-size: 16px; line-height: 32px } .blog-area .blog-item .blog-content ul li { margin-right: 20px } .blog-area .blog-item .blog-content .title { font-size: 18px } } .blog-3-area .blog-item .blog-content .title a, .blog-area .blog-item .blog-content .title a, .blog-standard-area .blog-standard .blog-item .blog-content .title a, .blog-standard-area .blog-standard .blog-story .blog-story-1.blog-story-2 .title, .counter-area.about-counter .counter-item .title, .services-area.services-about .services-item .title { color: #222 } .blog-area .blog-item .blog-content p { font-size: 14px; line-height: 26px; color: #8a8a8a; font-weight: 400; padding-top: 15px } .blog-area .blog-item .blog-content>a { font-size: 15px; font-weight: 600; color: #393185; margin-top: 18px } .blog-area .blog-item.item-2 .blog-thumb::before { background-color: rgba(239, 91, 81, .6) } .blog-area .blog-item.item-2 .blog-thumb i { position: absolute; top: 15px; right: 15px; height: 60px; width: 55px; background: #fff; text-align: center; line-height: 60px; color: #00a0e3; font-size: 36px; border-radius: 5px; z-index: 6 } .blog-area .blog-item:hover .blog-thumb img { transform: scale(1.2) } .blog-area.blog-masonry { padding-top: 100px; padding-bottom: 128px } .blog-area.blog-masonry .blog-item.blog-item-1 .blog-thumb::before { background-color: rgba(60, 208, 25, .6) } .blog-area.blog-masonry .blog-item.blog-item-2 .blog-thumb::before { background-color: rgba(1, 84, 247, .6) } .blog-area.blog-masonry .blog-item.blog-item-3 .blog-content { background: #eef3f9; padding: 30px } .blog-area.blog-masonry .blog-item.blog-item-3 .blog-content span { color: #393185; font-size: 15px; font-weight: 600; padding-left: 40px; position: relative; margin-top: 15px } .blog-area.blog-masonry .blog-item.blog-item-3 .blog-content span::before { position: absolute; content: ''; left: 0; top: 50%; height: 2px; width: 30px; transform: translateY(-50%); background: #393185 } .blog-area.blog-masonry .blog-item.blog-item-4 .blog-thumb::before { background-color: rgba(25, 34, 208, .522) } .blog-area.blog-masonry .blog-item.blog-item-5 .blog-thumb::before { background-color: #d222e7; opacity: .522 } .pagination-area nav ul li a { height: 60px; width: 60px; border-radius: 50% !important; text-align: center; line-height: 54px; padding: 0; margin: 0 5px; font-size: 18px; font-weight: 500; color: #859aaa; background: #fff; border: 2px solid #e4e4e5; transition: .3s ease-out } .pagination-area nav ul li a span i { font-size: 22px } .pagination-area nav ul li a.active, .pagination-area nav ul li a:hover { background: #393185; color: #fff; border-color: #393185; box-shadow: 0 10px 49.5px .5px rgba(59, 126, 255, .78) } .pagination-area.pagination-area-2 nav ul li a.active, .pagination-area.pagination-area-2 nav ul li a:hover { background: #fc5546; border-color: #fc5546; box-shadow: 0 10px 49.5px .5px rgba(239, 91, 81, .78) } .blog-area-2 { margin-top: -15px } .blog-area-2 .blog-item .blog-overlay { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: rgb(16 30 59 / 68%) } .blog-area-2 .blog-item .blog-overlay .blog-tag { position: absolute; left: 30px; top: 30px; background: #00a0e3 } @media (max-width:767px) { .pagination-area nav ul li a { margin: 0 2px; height: 50px; width: 50px; line-height: 46px } .blog-area-2 .blog-item .blog-overlay .blog-tag { left: 5px } } .blog-area-2 .blog-item .blog-overlay .blog-tag span { color: #fff; font-size: 14px; font-weight: 600; line-height: 26px; padding: 0 12px } .blog-area-2 .blog-item .blog-overlay .blog-content { position: absolute; bottom: 25px; left: 50%; width: 100%; transform: translateX(-50%); padding: 0 30px } .footer-3-area::before, .footer-area::before, .requst-quote-area::after, .requst-quote-area::before { left: 0; width: 100%; position: absolute; top: 0; content: '' } @media only screen and (min-width:992px) and (max-width:1200px) { .blog-area .blog-item .blog-content .title { font-size: 18px } .blog-area-2 .blog-item .blog-overlay .blog-content { padding: 0 15px } .blog-area-2 .blog-item .blog-overlay .blog-content ul li { font-size: 14px } } @media (max-width:767px) { .blog-area-2 .blog-item .blog-overlay .blog-content { padding: 0 5px } .blog-area-2 .blog-item .blog-overlay .blog-content ul li { font-size: 14px } } .blog-area-2 .blog-item .blog-overlay .blog-content ul li { display: inline-block; color: #fff; font-weight: 500 } .blog-area-2 .blog-item .blog-overlay .blog-content ul li:first-child { margin-right: 25px } .blog-area-2 .blog-item .blog-overlay .blog-content .title { color: #fff; font-size: 20px; line-height: 28px; padding-top: 10px; transition: .3s ease-out } .blog-3-area .blog-item .blog-content>a, .blog-area-2 .blog-item .blog-overlay .blog-content p { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out } @media only screen and (min-width:992px) and (max-width:1200px) { .blog-area-2 .blog-item .blog-overlay .blog-content .title { font-size: 18px } } @media (max-width:767px) { .blog-area-2 .blog-item .blog-overlay .blog-content .title { font-size: 17px } } .blog-area-2 .blog-item .blog-overlay .blog-content p { color: #fff; font-size: 14px; font-weight: 500; line-height: 26px; padding-bottom: 18px; padding-top: 10px; transition: .3s ease-out } @media only screen and (min-width:992px) and (max-width:1200px) { .blog-area-2 .blog-item .blog-overlay .blog-content p { font-size: 12px } } @media (max-width:767px) { .blog-area-2 .blog-item .blog-overlay .blog-content p { font-size: 13px } } .blog-area-2 .blog-item .blog-overlay .blog-content>a { font-size: 15px; font-weight: 600; color: #fff } .blog-area-2 .blog-item .blog-overlay:hover .blog-content .title { margin-bottom: 0 } .blog-area-2 .blog-item .blog-overlay:hover .blog-content p { opacity: 1; visibility: visible } .blog-3-area { background: #eceff3; padding-top: 87px; padding-bottom: 123px } .blog-3-area .section-title>span { font-size: 14px; color: #8a8a8a; line-height: 26px; padding-right: 15px; padding-bottom: 35px } .blog-3-area .blog-item .blog-thumb img { width: 100%; padding-top: 13px } .blog-3-area .blog-item .blog-thumb span { position: absolute; left: 20px; top: 20px; background: #393185; border: 1px solid; font-size: 12px; font-weight: 600; color: #fff; line-height: 26px; padding: 0 12px } .blog-3-area .blog-item .blog-content { padding-top: 24px } .blog-3-area .blog-item .blog-content ul li { display: inline-block; font-size: 14px; font-weight: 500; color: #8a8a8a } .blog-3-area .blog-item .blog-content ul li i { color: #fc5546; padding-right: 6px } .blog-3-area .blog-item .blog-content ul li:first-child { margin-right: 30px } .blog-3-area .blog-item .blog-content .title { font-size: 18px; font-weight: 700; line-height: 26px; padding-top: 10px; padding-bottom: 15px } .blog-3-area .blog-item .blog-content p { font-size: 14px; font-weight: 500; color: #8a8a8a; line-height: 26px; padding-bottom: 15px } .blog-3-area .blog-item .blog-content>a { font-size: 15px; font-weight: 600; color: #8a8a8a; transition: .3s ease-out } .requst-quote-area { position: relative; z-index: 10; padding-bottom: 90px; padding-top: 84px } .requst-quote-area::before { height: 100%; background-color: #2b2b2b; opacity: .702; z-index: -2 } .requst-quote-area::after { height: 100%; background-image: url(../images/request-dot.png); z-index: -1 } .requst-quote-area .requst-content span { color: #fff; font-size: 35px } .requst-quote-area .requst-content .title { font-size: 60px; color: #fff; line-height: 60px; padding-bottom: 40px } @media (max-width:767px) { .requst-quote-area .requst-content .title { font-size: 28px } } .requst-quote-area .requst-content a { width: 215px } .requst-quote-area.about-quote { padding-top: 115px } .newaletter-area { margin-bottom: 130px; position: relative; margin-top: -100px; z-index: 11 } @media (max-width:767px) { .newaletter-area { margin-top: 0; margin-bottom: 200px } } .newaletter-area .newaletter-item { height: 200px } .newaletter-area .newaletter-item .newaletter-content { width: 370px; background: #ef5b51; height: 200px } @media only screen and (min-width:768px) and (max-width:991px) { .newaletter-area .newaletter-item .newaletter-content { width: 200px } .newaletter-area .newaletter-item .newaletter-content .item { padding-left: 40px } } @media (max-width:767px) { .newaletter-area .newaletter-item .newaletter-content { width: 100%; height: 150px } } .newaletter-area .newaletter-item .newaletter-content .item span { color: #fff; font-weight: 300; font-size: 24px } .newaletter-area .newaletter-item .newaletter-content .item .title { color: #fff; font-size: 40px; line-height: 45px } .newaletter-area .newaletter-item .newaletter-input { background: #eef3f9; width: 67%; position: relative; z-index: 10 } .newaletter-area .newaletter-item .newaletter-input::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/newsletter-dot.png); opacity: .1; z-index: -1 } .newaletter-area .newaletter-item .newaletter-input input { width: 400px; background: #fff; border: 0; opacity: 1; line-height: 60px; padding-left: 30px; border-radius: 5px; margin-right: 10px; font-size: 14px; color: #8a8a8a } @media only screen and (min-width:992px) and (max-width:1200px) { .newaletter-area .newaletter-item .newaletter-input input { width: 300px } .footer-area .footer-widget { margin-left: 0 } } @media only screen and (min-width:768px) and (max-width:991px) { .newaletter-area .newaletter-item .newaletter-content .item span { font-size: 16px } .newaletter-area .newaletter-item .newaletter-content .item .title { font-size: 26px } .newaletter-area .newaletter-item .newaletter-input input { width: 240px } } @media (max-width:767px) { .newaletter-area .newaletter-item .newaletter-content .item { padding-left: 20px } .newaletter-area .newaletter-item .newaletter-input { width: 100%; height: 200px; padding: 20px } .newaletter-area .newaletter-item .newaletter-input input { width: 100%; margin-bottom: 20px } .footer-area .footer-widget { margin-left: 0 } } .newaletter-area .newaletter-item .newaletter-input input::placeholder { opacity: 1; color: #8a8a8a } .brand-area { padding: 50px 0 } .brand-area .brand-item img { width: 200px; height: 100px; object-fit: contain; padding: 10px } .footer-area { background: #101e3b; position: relative; padding-top: 41px } .footer-3-area::before, .footer-area::before { height: 100%; background-image: url(../images/working-line.png); opacity: .02 } .footer-area .footer-widget .footer-title .title { color: #fff; font-size: 18px; font-weight: 600 } .footer-area .footer-widget .footer-items-1 { padding-top: 32px } .footer-area .footer-widget .footer-items-1 p { color: #aeb7ca; font-size: 14px; line-height: 26px; padding-bottom: 35px } .footer-area .footer-widget .footer-items-1 ul li a { height: 40px; width: 40px; text-align: center; line-height: 36px; border-radius: 5px; border: 2px solid #2d416a; color: #556a96; font-size: 14px; margin-right: 5px; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .footer-area .footer-widget .footer-items-1 ul li a:hover { background: #393185; color: #fff; border-color: #393185 } .faq-accordion, .footer-area .footer-widget .footer-items-2, .solutions-area .solutions-content-area .solutions-list .solutions-btn { padding-top: 30px } .footer-3-area .footer-item-2 .links-list ul li a, .footer-area .footer-widget .footer-items-2 ul li a { font-size: 14px; color: #aeb7ca; line-height: 32px; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .blog-standard-area .blog-sidebar .blog-list .blog-list-item ul li a:hover, .blog-standard-area .blog-standard .blog-item .blog-content .item .blog-social ul li a:hover, .contact-info-area .contact-info-border .contact-info-item.active i, .footer-area .footer-widget .footer-items-2 ul li a:hover, .services-area.services-about .services-item a:hover, .services-area.services-about .services-item>i, .shop-tab-area .nav .nav-item .nav-link.active { color: #393185 } .footer-area .footer-widget .footer-items-3 { margin-top: 37px } .footer-area .footer-widget .footer-items-3 .News-item .News-thumb { width: 140px } .footer-area .footer-widget .footer-items-3 .News-item .News-thumb img { width: 100%; border-radius: 5px } .footer-area .footer-widget .footer-items-3 .News-item .News-content { padding-left: 18px } .footer-area .footer-widget .footer-items-3 .News-item .News-content .title { font-size: 16px; font-weight: 700; color: #fff; line-height: 28px; margin-top: -5px } .footer-area .footer-widget .footer-items-3 .News-item .News-content span { font-size: 14px; color: #aeb7ca } .footer-area .footer-copyright { height: 85px; display: flex; align-items: center; justify-content: space-between; border-top: 2px solid #2b3c60; margin-top: 30px } @media (max-width:767px) { .footer-area .footer-copyright { display: block; text-align: center } .footer-area .footer-copyright span { padding: 20px 0 5px } } .footer-area .footer-copyright span { color: #aeb7ca } .footer-area .footer-copyright span i { padding-right: 6px; font-size: 24px } .footer-area .footer-copyright p { color: #aeb7ca; font-size: 14px } .back-top .back-to-top { position: absolute; left: 50%; transform: translateX(-50%); bottom: 60px; height: 50px; width: 50px; background: #393185; text-align: center; border-radius: 50%; color: #fff; line-height: 50px; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out; z-index: 99; cursor: pointer; display: none; font-size: 24px } .back-top .back-to-top i { transition: .3s linear; color: #fff } .footer-3-area .footer-info i, .footer-3-area .footer-item-1 ul li a { background: #14346b; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; text-align: center } .back-top.back-top-2 .back-to-top { position: fixed; right: 30px; bottom: 30px; left: auto; z-index: 9999999 } .footer-3-area { background: #041d47; padding-top: 50px; position: relative } .footer-3-area .footer-item-1 p { color: #aeb7ca; padding-top: 30px; padding-bottom: 30px } .footer-3-area .footer-item-1 ul li a { height: 40px; width: 40px; border-radius: 5px; color: #4a70b1; line-height: 40px; margin-right: 5px; transition: .3s ease-out } .footer-3-area .footer-info:hover i, .footer-3-area .footer-item-1 ul li a:hover { background: #fc5546; color: #fff } .footer-3-area .footer-item-2 { margin-left: 50px } .footer-3-area .footer-item-2 .title { color: #fff; font-size: 18px; font-weight: 700; text-transform: capitalize; padding-bottom: 28px } .footer-3-area .footer-item-2 p { color: #aeb7ca; padding-bottom: 24px } .footer-3-area .footer-item-2 .links-list { display: flex } .footer-3-area .footer-item-2.footer-item-3 { margin-left: -30px } .footer-3-area .footer-item-2.footer-item-3 .input-box input { width: 100%; height: 60px; background: #fff; border: 0; color: #8a8a8a; padding-left: 30px; font-size: 14px } .footer-3-area .footer-item-2.footer-item-3 .input-box input::placeholder { color: #8a8a8a; opacity: 1 } .footer-3-area .footer-item-2.footer-item-3 .input-box button { position: absolute; right: 0; top: 0; height: 100%; width: 60px; border: 0; background: #fc5546; color: #fff } .footer-3-area .footer-info { position: relative; padding-left: 80px } .footer-3-area .footer-info .title { font-size: 18px; color: #fff } .footer-3-area .footer-info span { font-size: 14px; color: #aeb7ca; padding-top: 4px } .footer-3-area .footer-info i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 60px; width: 60px; border-radius: 50%; line-height: 60px; color: #3e63a4; font-size: 24px; transition: .3s ease-out } .services-area .services-active .slick-dots li button, .services-area .services-item::before { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out } .footer-3-area .footer-copy { border-top: 2px solid #14346b } .footer-3-area .footer-copy p { line-height: 75px; color: #aeb7ca } .services-area { background: #3b7eff; padding-top: 117px; padding-bottom: 225px; position: relative } .services-area::before { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background-image: url(../images/services-map.png); opacity: .06; background-repeat: no-repeat; background-size: cover; background-position: center } .services-area .services-item { background: center/cover no-repeat #fff; position: relative; z-index: 10; padding: 40px 71px 45px } @media only screen and (min-width:992px) and (max-width:1200px) { .footer-area .footer-widget .footer-items-3 .News-item .News-content .title { font-size: 14px; line-height: 26px } .footer-3-area .footer-item-2 { margin-left: 0 } .footer-3-area .footer-info { padding-left: 60px } .footer-3-area .footer-info i { height: 40px; width: 40px; line-height: 40px; font-size: 18px } .services-area .services-item { padding: 40px 10px 45px } } @media only screen and (min-width:768px) and (max-width:991px) { .footer-3-area .footer-item-2, .footer-3-area .footer-item-2.footer-item-3 { margin-left: 0 } .services-area .services-item { padding: 40px 45px 45px } } @media (max-width:767px) { .footer-3-area .footer-item-2, .footer-3-area .footer-item-2.footer-item-3 { margin-left: 0 } .services-area .services-item { padding: 40px 0 45px } } .services-area .services-item::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-color: #2972ff; opacity: 1; z-index: -1; transition: .3s ease-out } .services-area .services-item .title { color: #fff; font-size: 24px; line-height: 32px } .services-area .services-item>i { font-size: 60px; color: #fff; padding-top: 35px; padding-bottom: 22px } .services-area .services-item p { font-size: 14px; font-weight: 500; color: #fff; line-height: 26px; padding-bottom: 15px } .services-area .services-active .slick-center .services-item::before { background-color: #0250e8; opacity: .859 } .services-area .services-active .slick-dots { position: absolute; bottom: -95px; left: 50%; transform: translateX(-50%) } .services-area .services-active .slick-dots li button { background-color: transparent; border: 3px solid #fff; border-radius: 50%; height: 15px; width: 15px; font-size: 0; margin: 0 6px; transition: .3s ease-out } .case-study-area .case-item .case-content .title, .services-area.services-about .services-item a { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out } .services-area .services-active .slick-dots li.slick-active button { height: 20px; width: 20px } .services-area.services-about { background: #eef3f9; padding-top: 100px; padding-bottom: 130px } #loading, .services-3-area::before { background-repeat: no-repeat; background-position: center } .services-area.services-about::before { background-image: url(../images/services-map-2.png); opacity: .08 } @media only screen and (min-width:1200px) and (max-width:1600px) { .services-area.services-about .services-item { padding: 20px } } @media only screen and (min-width:992px) and (max-width:1200px) { .services-area.services-about .services-item { padding: 40px 31px 45px } } @media only screen and (min-width:768px) and (max-width:991px) { .services-area.services-about .services-item { padding: 40px 45px 45px } } @media (max-width:767px) { .services-area.services-about .services-item { padding: 40px 0 45px } } .services-area.services-about .services-item a { color: #8a8a8a; font-size: 15px; font-weight: 600; transition: .3s ease-out } .services-3-area { background: #041d47; padding-top: 116px; position: relative; padding-bottom: 123px } .services-3-area::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/working-line-2.png); background-size: cover; opacity: .03 } .services-3-area .section-title .title { color: #a8b5cc } .services-3-area .section-title p { color: #a8b5cc; padding-bottom: 48px } .services-3-area .services-item>i { font-size: 60px; color: #1a3d77 } .services-3-area .services-item span { font-size: 18px; color: #b9aecb; text-transform: capitalize; padding-top: 32px; padding-bottom: 3px } .services-3-area .services-item .title { font-size: 22px; color: #fff; padding-bottom: 25px } .services-3-area .services-item p { font-size: 14px; color: #a8b5cc; line-height: 26px; padding: 0 25px 14px } .services-3-area .services-item a { color: #a8b5cc; font-size: 15px; font-weight: 600 } .services-business { margin-top: -29px } .services-business .container::before { position: absolute; content: ''; left: 50%; transform: translateX(-50%); top: -115px; width: 110%; height: 145px; background: #fff; padding-left: 115px; padding-right: 115px } .services-business .section-title>span { font-size: 14px; color: #8a8a8a; line-height: 28px; padding-right: 30px } .services-business .section-title>span.text { padding-top: 27px } .services-business .section-title a { margin-top: 35px } .services-pricing-area { background: #eef3f9; padding-top: 117px; padding-bottom: 130px } .services-pricing-area .pricing-tab { margin-right: 2px; margin-left: 2px; padding: 50px 20px 250px 30px; position: relative } .services-pricing-area .pricing-tab .nav li a { padding: 0 24px; background-color: #fef0e5; line-height: 50px; color: #222; border-radius: 0; font-size: 15px; font-weight: 600 } .services-pricing-area .pricing-tab .nav li a.active { background: #00a0e3; color: #fff } .services-pricing-area .pricing-tab p { font-size: 16px; padding-top: 15px } .services-pricing-area .pricing-tab img { position: absolute; right: 0; bottom: 0 } .services-pricing-area .pricing-item { margin-left: 2px; margin-right: 2px; padding-top: 44px } .services-pricing-area .pricing-item .title { font-size: 30px; color: #222 } .services-pricing-area .pricing-item p { padding: 8px 30px 30px } @media only screen and (min-width:992px) and (max-width:1200px) { .services-3-area .services-item .title { font-size: 20px } .services-3-area .services-item p { padding: 0 0 14px } .services-pricing-area .pricing-tab .nav li a { padding: 0 17px } .services-pricing-area .pricing-tab p { font-size: 14px } .services-pricing-area .pricing-item p { padding: 8px 10px 30px } } @media only screen and (min-width:768px) and (max-width:991px) { .services-business .section-title>span { padding-right: 0 } .services-business .bussiness-thumb { margin-top: 30px } .services-pricing-area .pricing-item p { padding: 8px 80px 30px } .counter-area .counter-play { margin-right: 0 } } .services-pricing-area .pricing-item ul { padding-top: 28px; padding-bottom: 15px } .services-pricing-area .pricing-item ul li { line-height: 35px; font-size: 16px; font-weight: 500; color: #8a8a8a } .services-pricing-area .pricing-item>span { font-size: 40px; color: #393185; font-weight: 700; padding-bottom: 35px } .services-pricing-area .pricing-item>span span { font-size: 24px; line-height: 0 } .services-pricing-area.priceing-page { background: #0e2b5c; padding-top: 100px } .counter-area { padding-top: 130px; padding-bottom: 128px; background: #101e3b; position: relative } .counter-area::before { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background-image: url(../images/counter-dot.png); opacity: .6 } .counter-area .counter-play::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(16, 30, 59, .65) } .counter-area .counter-play a { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 50px; width: 50px; text-align: center; line-height: 50px; background: #fff; border-radius: 50%; color: #00a0e3; font-size: 14px } .counter-area .counter-item { padding-left: 120px; position: relative } .counter-area .counter-item i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #fff; font-size: 70px } .counter-area .counter-item .title { font-size: 45px; color: #00a0e3 } .counter-area .counter-item span { font-size: 18px; color: #91a5ce; font-weight: 500 } .counter-area.about-counter { padding-top: 0; background-color: transparent; padding-bottom: 130 } .faq-area { padding-top: 117px; padding-bottom: 115px } @media (max-width:767px) { .services-business .section-title>span { padding-right: 0 } .counter-area .counter-item, .faq-area .faq-thumb, .services-business .bussiness-thumb { margin-top: 30px } .counter-area .counter-play { margin-right: 0 } .counter-area .counter-item .title { font-size: 32px } .faq-area.about-faq .company-content { margin-top: 30px; padding-left: 0; padding-right: 0 } } .faq-area .faq-thumb img { width: 100%; height: 241px } .faq-area .faq-content { background: #ef5b51; padding: 40px 20px 45px } .faq-area .faq-content .title { color: #fff; font-size: 24px } .faq-area .faq-content p { color: #fff; font-size: 14px; line-height: 28px; padding-top: 17px; padding-bottom: 27px } .faq-area .faq-content a { background: #d24238; border-color: #d24238 } .faq-area.about-faq { padding-top: 100px; padding-bottom: 130px } .faq-area.about-faq .faq-content a { background: #d15b00; border-color: #d15b00 } .faq-area.about-faq .company-content .section-title p { border-bottom: 1px solid #ddd; padding-bottom: 38px } .faq-area.about-faq .company-content .company-item p { padding-top: 30px; padding-bottom: 35px } @media (max-width:767px) { .faq-area.about-faq .company-content .company-item ul li { display: block } } .faq-area.about-faq .company-content .company-item ul li .link { font-size: 15px; font-weight: 600; color: #00a0e3; margin-left: 35px } @media (max-width:767px) { .faq-area.about-faq .company-content .company-item ul li .link { margin-left: 0; margin-top: 20px } } .faq-area.faq-page { padding-top: 100px } .faq-accordion .accordion { border: 2px solid transparent } .faq-accordion .accordion .card { border-radius: 0 !important; border: 0; border-top: 2px solid transparent; margin-bottom: 30px; background: #eef3f9 } .faq-accordion .accordion .card:first-child { border-top: 0 } .faq-accordion .accordion .card .card-header { border-bottom: 0; padding: 0; margin: 0; background-color: transparent } .faq-accordion .accordion .card .card-header a { line-height: 70px; padding: 0 0 0 40px; text-decoration: none; font-weight: 600; font-size: 18px; width: 100%; color: #fff; position: relative; background: #3b7eff } @media only screen and (min-width:992px) and (max-width:1200px) { .counter-area .counter-item .title { font-size: 32px } .counter-area .counter-item span { font-size: 15px } .faq-area .faq-content p { font-size: 13px } .faq-accordion .accordion .card .card-header a { padding: 0 0 0 40px; font-size: 18px } } @media (max-width:767px) { .faq-accordion .accordion .card .card-header a { line-height: 28px; padding: 10px 0 10px 26px } } .faq-accordion .accordion .card .card-header a i { color: #393185; padding-right: 20px } .faq-accordion .accordion .card .card-header a.collapsed { color: #8a8a8a; background-color: transparent; font-weight: 600 } .faq-accordion .accordion .card .card-header a.collapsed::before { content: '\f105'; color: #666 } .faq-accordion .accordion .card .card-header a::before { position: absolute; content: '\f105'; right: 36px; font-size: 16px; font-family: 'Font Awesome 5 Pro'; color: #fff } .faq-accordion .accordion .card .card-body { padding: 0 30px 20px 40px !important; background: #3b7eff } .case-study-area, .case-study-area.case-page-1 .case-item .case-content { background: #eceff3 } @media (max-width:767px) { .faq-accordion .accordion .card .card-header a::before { right: 18px } .faq-accordion .accordion .card .card-body { padding: 0 30px 20px 26px !important } } .category-area .category-goals .goals-item .title, .category-area .category-misson .misson-item .title { line-height: 34px; padding-top: 25px; font-size: 24px; font-weight: 700 } .faq-accordion .accordion .card .card-body p { font-size: 14px; color: #fff; font-weight: 500; line-height: 28px } .accordion-area { padding-top: 97px } .accordion-area .faq-accordion .accordion .card { margin-bottom: 15px } .category-area .category-thumb { position: relative; height: 590px } .category-area .category-thumb::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-color: #fc5546; opacity: .8 } .category-area .category-thumb .play-overlay a { color: #fff; height: 100px; width: 100px; border-radius: 50%; text-align: center; line-height: 100px; border: 2px solid #fff; font-size: 20px } .category-area .category-thumb .play-overlay a::after, .video-play-area .video-play-item a::after { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; border: 1px solid #fff; -webkit-animation: 1.3s linear infinite ripple-white; -moz-animation: 1.3s linear infinite ripple-white; -o-animation: 1.3s linear infinite ripple-white; animation: 1.3s linear infinite ripple-white; border-radius: 50% } .category-area .category-misson { background: #eceff3; padding: 50px 30px } .category-area .category-misson .misson-item p { font-weight: 500; color: #8a8a8a; line-height: 26px; padding: 18px 0 25px } @media only screen and (min-width:992px) and (max-width:1200px) { .faq-accordion .accordion .card .card-header a i { padding-right: 10px } .faq-accordion .accordion .card .card-header a.collapsed { padding: 0 0 0 40px; font-size: 15px } .category-area .category-goals .goals-item p, .category-area .category-misson .misson-item p { font-size: 12px } } @media (max-width:767px) { .category-area .category-misson .misson-item p { font-size: 11px } } .category-area .category-misson .misson-item a:hover { color: #222; background: #fff; border-color: #fff } .category-area .category-goals .goals-item a::after, .category-area .category-goals .goals-item a::before, .category-area .category-misson .misson-item a:hover::after, .category-area .category-misson .misson-item a:hover::before { border-color: #393185 } .category-area .category-goals { background: #393185; padding: 50px 20px } .case-study-area.case-page-1, .case-study-area.case-page-2 { background: #fff; padding-top: 100px } .category-area .category-goals .goals-item .title { color: #fff } .category-area .category-goals .goals-item p { font-weight: 500; color: #fff; line-height: 26px; padding: 18px 0 25px } @media (max-width:767px) { .category-area .category-goals .goals-item p { font-size: 11px } } .category-area .category-goals .goals-item a { background: #fff; color: #222; border-color: #fff } .category-area .category-goals .goals-item a:hover { color: #fff; background: #fc5546; border-color: #fc5546 } .category-area .category-goals .goals-item a:hover::after, .category-area .category-goals .goals-item a:hover::before { border-color: #fff } .case-study-area { padding-top: 117px } .case-study-area .case-item .case-content { padding: 34px 40px } @media only screen and (min-width:992px) and (max-width:1200px) { .case-study-area .case-item .case-content { padding: 34px 20px } } @media (max-width:767px) { .case-study-area .case-item .case-content { padding: 10px } } .case-study-area .case-item .case-content .title { font-size: 24px; color: #222; transition: .3s ease-out } .case-study-area .case-item .case-content a, .case-study-area .case-item-2 img { -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out } .case-study-area .case-item .case-content p { font-size: 14px; color: #8a8a8a; padding-top: 13px } .case-study-area .case-item .case-content a { color: #8a8a8a; font-weight: 600; font-size: 15px; margin-top: 15px; transition: .3s ease-out } .case-study-area .case-item-2, .shop-area .shop-item .shop-thumb, .shop-item-area .shop-item .shop-thumb { position: relative; overflow: hidden } .case-study-area .case-item-2 img { width: 100%; transition: .3s ease-out; transform: scale(1) } .case-study-area .case-item-2 .case-overlay { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: -moz-linear-gradient(90deg, #061f49 0, rgba(12, 39, 86, .5) 70%, rgba(14, 43, 92, .01) 99%, #0e2b5c 100%); background-image: -webkit-linear-gradient(90deg, #061f49 0, rgba(12, 39, 86, .5) 70%, rgba(14, 43, 92, .01) 99%, #0e2b5c 100%); background-image: -ms-linear-gradient(90deg, #061f49 0, rgba(12, 39, 86, .5) 70%, rgba(14, 43, 92, .01) 99%, #0e2b5c 100%); background-image: -o-linear-gradient(90deg, #061f49 0, rgba(12, 39, 86, .5) 70%, rgba(14, 43, 92, .01) 99%, #0e2b5c 100%); background-size: cover } .case-study-area .case-item-2 .case-overlay .case-content { position: absolute; left: 30px; bottom: 25px } .case-study-area .case-item-2 .case-overlay .case-content .title { color: #fff; font-size: 20px; text-transform: capitalize; padding-bottom: 6px } .case-study-area .case-item-2 .case-overlay .case-content a { color: #fff; font-size: 15px; font-weight: 600; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .achievement-area .achievement-counter { background: #3b7eff; border-radius: 10px } .achievement-area .achievement-counter i { font-size: 70px; color: #fff; padding-top: 60px } .achievement-area .achievement-counter span { font-size: 45px; font-weight: 700; color: #fff; padding-top: 45px } .achievement-area .achievement-counter .title { font-size: 18px; font-weight: 500; color: #fff; padding-bottom: 60px } .achievement-area .achievement-counter.item-3 { background: #ef5b51; margin-left: 30px; margin-right: -30px; position: relative } .achievement-area .achievement-counter.item-4 { background: #393185; margin-left: 30px; margin-right: -30px; position: relative } .achievement-area .section-title .title span { font-size: 46px } @media only screen and (min-width:992px) and (max-width:1200px) { .achievement-area .achievement-counter.item-3, .achievement-area .achievement-counter.item-4 { margin-left: 0; margin-right: 0 } .achievement-area .section-title .title, .achievement-area .section-title .title span { font-size: 36px } .achievement-area .section-title p { font-size: 18px } } @media (max-width:767px) { .achievement-area .achievement-counter.item-3, .achievement-area .achievement-counter.item-4 { margin-left: 0; margin-right: 0 } .achievement-area .section-title { margin-top: 40px } .achievement-area .section-title .title span { font-size: 28px } } .achievement-area .section-title p { color: #c3c3c3; padding-bottom: 30px } .achievement-area .achievement-text p { color: #8a8a8a; font-size: 14px; padding-bottom: 33px } .video-play-area { height: 895px; position: relative; background-attachment: fixed } .video-play-area::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-color: #0e2b5c; opacity: .749 } .video-play-area .video-play-item a { color: #fff; height: 80px; width: 80px; border-radius: 50%; text-align: center; line-height: 80px; border: 2px solid #fc5546; background: #fc5546; font-size: 20px; position: relative } .video-play-area .video-play-item .title { color: #fff; font-size: 100px; font-weight: 700; padding-top: 65px; padding-bottom: 5px } @media (max-width:767px) { .video-play-area .video-play-item .title { font-size: 40px } } .video-play-area .video-play-item span { font-size: 30px; font-weight: 500; color: #fff } @media (max-width:767px) { .video-play-area .video-play-item span { font-size: 18px } } .product-details-area .product-item-slide, .solutions-area .solutions-thumb { margin-right: -30px } .solutions-area .solutions-thumb .solutions-content { background: #00a0e3; text-align: center; margin-top: 30px } .solutions-area .solutions-thumb .solutions-content span { color: #fff; font-size: 35px; font-weight: 700; line-height: 45px; padding: 55px 30px 65px } @media only screen and (min-width:992px) and (max-width:1200px) { .solutions-area { padding-top: 117px } .solutions-area .solutions-thumb .solutions-content span { font-size: 28px; line-height: 38px } .case-details-area .case-content { padding-left: 15px } } .solutions-area .solutions-content-area .solutions-list .item { position: relative; padding-left: 110px; padding-top: 15px } @media (max-width:767px) { .solutions-area .solutions-thumb { margin-right: 0 } .solutions-area .solutions-thumb .solutions-content span { font-size: 22px; line-height: 32px; padding: 55px 10px 65px } .solutions-area .solutions-content-area { padding-left: 0; padding-top: 30px } .solutions-area .solutions-content-area .solutions-list .item { padding-left: 50px } } .solutions-area .solutions-content-area .solutions-list .item .title { font-size: 24px; font-weight: 600; color: #222 } .solutions-area .solutions-content-area .solutions-list .item p { padding-right: 30px; padding-top: 11px } .solutions-area .solutions-content-area .solutions-list .item i { position: absolute; left: 0; top: 0; height: 60px; width: 60px; border-radius: 50%; background: #fef0e5; text-align: right; font-size: 40px; color: #00a0e3; padding-left: 28px; padding-top: 30px } @media (max-width:767px) { .solutions-area .solutions-content-area .solutions-list .item .title { font-size: 20px } .solutions-area .solutions-content-area .solutions-list .item i { height: 30px; width: 30px; font-size: 22px; padding-left: 15px; padding-top: 15px } } .solutions-area .solutions-content-area .solutions-list .solutions-btn ul li a.link { padding-left: 30px; color: #00a0e3; font-size: 15px; font-weight: 600 } @media (max-width:767px) { .solutions-area .solutions-content-area .solutions-list .solutions-btn ul li a.link { margin-top: 20px; padding-left: 0; margin-right: 20px } } .case-details-area .case-thumb .play { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .case-details-area .case-thumb .play a { font-size: 24px; height: 120px; width: 120px; text-align: center; line-height: 120px; border-radius: 50%; background: #393185; color: #fff } .case-details-area .case-list { border-bottom: 2px solid #efefef; padding-bottom: 40px; margin-bottom: 25px } .case-details-area .case-list .item span { font-size: 16px; font-weight: 700; color: #8a8a8a; letter-spacing: 2px } @media only screen and (min-width:768px) and (max-width:991px) { .counter-area .counter-item { margin-top: 30px } .faq-area .faq-content { padding: 40px 50px 45px } .faq-area.about-faq .company-content { margin-top: 30px; padding-left: 0; padding-right: 0 } .achievement-area .achievement-counter.item-3, .achievement-area .achievement-counter.item-4 { margin-left: 0; margin-right: 0 } .achievement-area .section-title { margin-top: 40px } .solutions-area .solutions-content-area { padding-left: 0; padding-top: 30px } .case-details-area .case-list .item span { font-size: 14px } } .case-details-area .case-list .item .title { font-size: 24px; color: #222 } @media only screen and (min-width:768px) and (max-width:991px) { .case-details-area .case-list .item .title { font-size: 20px } } .case-details-area .case-content .title { font-size: 36px; font-weight: 700; color: #222; padding-bottom: 17px } @media only screen and (min-width:992px) and (max-width:1200px) { .case-details-area .case-content .title { font-size: 30px } } @media (max-width:767px) { .case-details-area .case-content { padding-left: 0 } .case-details-area .case-content .title { font-size: 24px } } .case-details-area .case-content p { padding-right: 10px } .case-details-area .case-content p.text { font-size: 16px; padding-bottom: 40px } .case-details-area .case-share { border-top: 2px solid #efefef; margin-top: 30px; padding-top: 25px } .case-details-area .case-share .case-tag ul li span { font-weight: 700; color: #222; font-size: 16px; padding-right: 6px } .case-details-area .case-share .case-tag ul li a { font-weight: 500; color: #8a8a8a } .case-details-area .case-share .case-social ul li span { color: #222; font-weight: 700; padding-right: 6px } .case-details-area .case-share .case-social ul li a { height: 35px; width: 35px; text-align: center; line-height: 35px; border-radius: 50%; background: #393185; color: #fff; font-size: 14px; margin-left: 5px } .blog-standard-area { background: #eef3f9; padding-bottom: 128px } .blog-standard-area .blog-sidebar .blog-search .input-box input { width: 100%; background: #fff; border: 0; line-height: 70px; padding-left: 30px; font-size: 14px; color: #8a8a8a } .blog-standard-area .blog-sidebar .blog-search .input-box input::placeholder { color: #8a8a8a; opacity: 1 } .blog-standard-area .blog-sidebar .blog-search .input-box button { position: absolute; right: 0; top: 0; height: 100%; width: 70px; text-align: center; line-height: 70px; color: #393185; border: 0; background-color: transparent } .blog-standard-area .blog-sidebar .blog-list, .blog-standard-area .blog-sidebar .blog-news { padding: 30px } @media only screen and (min-width:992px) and (max-width:1200px) { .case-details-area .case-content p { padding-right: 0 } .blog-standard-area .blog-sidebar .blog-news { padding: 12px } } @media (max-width:767px) { .case-details-area .case-content p { padding-right: 0 } .case-details-area .case-share .case-social ul li span, .case-details-area .case-share .case-tag ul li span { font-size: 14px } .case-details-area .case-share .case-social { margin-top: 30px } .blog-standard-area .blog-sidebar .blog-news { padding: 30px 10px } } .blog-standard-area .blog-sidebar .blog-list .blog-title, .blog-standard-area .blog-sidebar .blog-news .blog-title { margin-bottom: 40px } .blog-standard-area .blog-sidebar .blog-list .blog-title .title, .blog-standard-area .blog-sidebar .blog-news .blog-title .title { font-size: 24px; color: #222; position: relative } .blog-standard-area .blog-sidebar .blog-list .blog-title .title::before, .blog-standard-area .blog-sidebar .blog-news .blog-title .title::before, .blog-standard-area .blog-standard .blog-comments .blog-title .title::before, .blog-standard-area .blog-standard .blog-massage .blog-title .title::before { position: absolute; content: ''; bottom: -15px; left: 0; height: 2px; width: 10px; background: #393185 } .blog-standard-area .blog-sidebar .blog-list .blog-title .title::after, .blog-standard-area .blog-sidebar .blog-news .blog-title .title::after, .blog-standard-area .blog-standard .blog-comments .blog-title .title::after, .blog-standard-area .blog-standard .blog-massage .blog-title .title::after { position: absolute; content: ''; bottom: -15px; left: 17px; height: 2px; width: 25px; background: #393185 } .blog-standard-area .blog-sidebar .blog-news .blog-news-item { border-bottom: 1px solid #d7d7d7; padding-bottom: 26px; margin-bottom: 25px } .blog-standard-area .blog-sidebar .blog-news .blog-news-item .item { padding-left: 90px; position: relative } @media (max-width:767px) { .blog-standard-area .blog-sidebar .blog-news .blog-news-item .item { padding-left: 80px } } .blog-standard-area .blog-sidebar .blog-news .blog-news-item .item .title { font-size: 18px; font-weight: 600; line-height: 26px; color: #222 } @media (max-width:767px) { .blog-standard-area .blog-sidebar .blog-news .blog-news-item .item .title { font-size: 16px } } .blog-standard-area .blog-sidebar .blog-news .blog-news-item .item span { font-size: 14px } .blog-standard-area .blog-sidebar .blog-news .blog-news-item.none { margin-bottom: 0; padding-bottom: 0; border: 0 } .blog-standard-area .blog-sidebar .blog-list .blog-list-item ul li a { display: flex; justify-content: space-between; line-height: 30px; font-size: 17px; color: #8a8a8a; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out; margin: 20px 0 } .blog-standard-area .blog-sidebar .blog-list .blog-tag ul li a { font-size: 14px; color: #8a8a8a; background: #eef3f9; line-height: 40px; padding: 0 17px; border-radius: 5px; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } @media only screen and (min-width:992px) and (max-width:1200px) { .blog-standard-area .blog-sidebar .blog-news .blog-news-item .item .title { font-size: 16px } .blog-standard-area .blog-sidebar .blog-list { padding: 12px } .blog-standard-area .blog-sidebar .blog-list .blog-tag ul li a { font-size: 13px; padding: 0 13px } } @media (max-width:767px) { .blog-standard-area .blog-sidebar .blog-list { padding: 30px 10px } .blog-standard-area .blog-sidebar .blog-list .blog-tag ul li a { padding: 0 12px; font-size: 13px } } .blog-standard-area .blog-sidebar .blog-list .blog-tag ul li a:hover, .shop-area .shop-sidebar .shop-tag .shop-tag-list ul li a:hover { background: #393185; color: #fff } .blog-standard-area .blog-sidebar .blog-list .blog-tag ul li:nth-child(2) a { margin: 0 6px } .blog-standard-area .blog-sidebar .blog-add-area .add-overlay { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(59, 126, 255, .85); text-align: center; padding-top: 109px } @media only screen and (min-width:992px) and (max-width:1200px) { .blog-standard-area .blog-sidebar .blog-add-area .add-overlay { padding-top: 60px } } @media (max-width:767px) { .blog-standard-area .blog-sidebar .blog-add-area .add-overlay { padding-top: 50px } } .blog-standard-area .blog-sidebar .blog-add-area .add-overlay .title { color: #fff; font-size: 45px; font-weight: 700; line-height: 45px } .blog-standard-area .blog-sidebar .blog-add-area .add-overlay p { font-size: 14px; font-weight: 500; color: #fff; line-height: 32px; padding: 30px 50px 35px } @media (max-width:767px) { .blog-standard-area .blog-sidebar .blog-add-area .add-overlay p { padding: 30px 0 35px } } .blog-standard-area .blog-sidebar .blog-add-area .add-overlay a { border-radius: 30px } .blog-standard-area .blog-standard .blog-item .blog-thumb img, .product-details-area .product-item-slide .item img { width: 100%; height: 400px } .blog-standard-area .blog-standard .blog-item .blog-thumb a { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 100px; width: 100px; text-align: center; line-height: 100px; background: #00a0e3; border-radius: 50%; color: #fff; font-size: 18px } .blog-standard-area .blog-standard .blog-item .blog-content { padding: 35px 30px 40px } @media (max-width:767px) { .blog-standard-area .blog-standard .blog-item .blog-content { padding: 35px 10px 40px } .blog-standard-area .blog-standard .blog-item .blog-content .item .blog-date ul li { margin-right: 20px; font-size: 13px } } @media (max-width:767px) { .blog-standard-area .blog-standard .blog-item .blog-content .item .blog-social { margin-top: 15px } } .blog-standard-area .blog-standard .blog-item .blog-content .item .blog-social ul li span { font-weight: 500; color: #8a8a8a; text-transform: capitalize; padding-right: 5px } .blog-standard-area .blog-standard .blog-item .blog-content .item .blog-social ul li a { font-size: 14px; color: #8a8a8a; margin-left: 12px; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .blog-standard-area .blog-standard .blog-item .blog-content .title { font-size: 28px; font-weight: 600; line-height: 38px; padding-top: 11px } @media only screen and (min-width:992px) and (max-width:1200px) { .blog-standard-area .blog-sidebar .blog-add-area .add-overlay p { padding: 30px 0 35px } .blog-standard-area .blog-standard .blog-item .blog-content .title { font-size: 23px; line-height: 33px } } @media only screen and (min-width:768px) and (max-width:991px) { .case-details-area .case-content { padding-left: 0 } .case-details-area .case-content p { padding-right: 0 } .case-details-area .case-share .case-tag ul li a { font-size: 14px } .blog-standard-area .blog-standard .blog-item .blog-content .title { font-size: 25px; line-height: 35px } } @media (max-width:767px) { .blog-standard-area .blog-standard .blog-item .blog-content .title { font-size: 16px; line-height: 26px } } .blog-standard-area .blog-standard .blog-item .blog-content p { font-size: 14px; line-height: 26px; color: #8a8a8a; font-weight: 400; padding-top: 15px; margin-bottom: 18px } .blog-standard-area .blog-standard .blog-quote { background: #fff; padding: 0 30px; border-left: 5px solid #393185; margin-top: -20px } @media (max-width:767px) { .blog-standard-area .blog-standard .blog-quote { padding: 0 10px } } .blog-standard-area .blog-standard .blog-quote p { font-size: 20px; font-weight: 600; color: #222; line-height: 28px; padding-right: 15px } @media only screen and (min-width:992px) and (max-width:1200px) { .blog-standard-area .blog-standard .blog-quote p { font-size: 18px } } @media only screen and (min-width:768px) and (max-width:991px) { .blog-standard-area .blog-standard .blog-quote p { font-size: 18px } } @media (max-width:767px) { .blog-standard-area .blog-standard .blog-quote p { font-size: 15px; padding-right: 0 } } .blog-standard-area .blog-standard .blog-quote span { font-size: 16px; font-weight: 700; color: #222; padding-top: 10px } .blog-standard-area .blog-standard .blog-sharing { background: #fff; padding: 38px 30px 0 } @media (max-width:767px) { .blog-standard-area .blog-standard .blog-sharing { padding: 38px 10px 0 } } .blog-standard-area .blog-standard .blog-sharing .blog-tag ul li span { font-size: 14px; color: #222; font-weight: 600; padding-right: 6px } .blog-standard-area .blog-standard .blog-sharing .blog-tag ul li a { font-size: 14px; color: #8a8a8a } .blog-standard-area .blog-standard .blog-story { padding: 55px 30px 75px; background: #fff } @media (max-width:767px) { .blog-standard-area .blog-standard .blog-story { padding: 55px 10px 75px } } .blog-standard-area .blog-standard .blog-story .blog-story-1 { background: #393185; padding: 27px 36px } @media only screen and (min-width:992px) and (max-width:1200px) { .blog-standard-area .blog-standard .blog-story .blog-story-1 { padding: 27px 10px } } @media (max-width:767px) { .blog-standard-area .blog-standard .blog-story .blog-story-1 { padding: 15px 10px } } .blog-standard-area .blog-standard .blog-story .blog-story-1 .title { color: #fff; font-size: 20px; font-weight: 600; line-height: 28px } @media (max-width:767px) { .blog-standard-area .blog-standard .blog-story .blog-story-1 .title { font-size: 18px } } .blog-standard-area .blog-standard .blog-story .blog-story-1.blog-story-2 { background: #e7f1fd } .blog-standard-area .blog-standard .blog-comments { background: #fff; padding: 0 30px 30px } .blog-standard-area .blog-standard .blog-comments .blog-title, .blog-standard-area .blog-standard .blog-massage .blog-title { padding-bottom: 10px } .blog-standard-area .blog-standard .blog-comments .blog-title .title, .blog-standard-area .blog-standard .blog-massage .blog-title .title { font-size: 30px; font-weight: 600; position: relative; color: #222 } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item { padding-left: 130px; position: relative } @media (max-width:767px) { .blog-standard-area .blog-standard .blog-comments { padding: 0 10px 30px } .blog-standard-area .blog-standard .blog-comments .blog-title .title { font-size: 22px } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item { padding-left: 40px } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item img { width: 13%; top: 23px } } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item .title { font-size: 18px; font-weight: 700; color: #222 } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item .title span { color: #393185; padding-left: 15px; font-size: 13px; font-weight: 500 } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item p { line-height: 26px; padding-right: 60px; padding-top: 13px; padding-bottom: 6px } @media (max-width:767px) { .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item p { padding-right: 0 } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item.item-2 { margin-left: 30px } } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item>span { font-size: 14px; font-weight: 600 } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item.item-2 p { padding-right: 0 } .blog-standard-area .blog-standard .blog-massage { background: #fff; padding: 40px 30px 30px } @media (max-width:767px) { .blog-standard-area .blog-standard .blog-massage { padding: 40px 10px 30px } .blog-standard-area .blog-standard .blog-massage .blog-title .title { font-size: 22px } } .blog-standard-area .blog-standard .blog-massage .blog-form .input-box input { width: 100%; line-height: 70px; background: #fff; border: 2px solid #e9ebef; padding-left: 20px; font-size: 14px; color: #8a8a8a } .blog-standard-area .blog-standard .blog-massage .blog-form .input-box input::placeholder { opacity: 1; color: #8a8a8a } .blog-standard-area .blog-standard .blog-massage .blog-form .input-box textarea { width: 100%; height: 140px; border: 2px solid #e9ebef; padding-left: 20px; font-size: 14px; background: #fff; color: #8a8a8a; resize: none; margin-bottom: 20px; padding-top: 15px } .blog-standard-area .blog-standard .blog-massage .blog-form .input-box textarea::placeholder { opacity: 1 } .shop-collection-area .shop-collection { height: 500px } .shop-collection-area .shop-collection .shop-collection-content { margin-right: 170px } @media only screen and (min-width:768px) and (max-width:991px) { .shop-collection-area .shop-collection .shop-collection-content { margin-right: 70px } .product-details-area .product-item-slide { margin-right: 0 } } @media (max-width:767px) { .shop-collection-area .shop-collection .shop-collection-content { margin-right: 0 } } .shop-collection-area .shop-collection .shop-collection-content .title { font-size: 45px; color: #222; font-weight: 700; line-height: 55px; padding-bottom: 28px } .shop-collection-area .shop-collection-input .input-box { width: 270px; position: relative } .shop-collection-area .shop-collection-input .input-box input { width: 100%; line-height: 65px; background: #fff; border: 2px solid #eaedf4; border-radius: 5px; padding-left: 20px; font-size: 16px; color: #8a8a8a } @media (max-width:767px) { .shop-collection-area .shop-collection .shop-collection-content .title { font-size: 32px; line-height: 42px } .shop-collection-area .shop-collection-input .input-box input { margin-bottom: 20px } .product-details-area .product-item-slide { margin-right: 0 } } .shop-collection-area .shop-collection-input .input-box input::placeholder { opacity: 1 } .shop-collection-area .shop-collection-input .input-box button { position: absolute; right: 0; top: 0; height: 100%; width: 65px; text-align: center; line-height: 65px; border: 0; background-color: transparent; color: #393185; font-size: 16px } .shop-collection-area .shop-collection-input .shop-input .nice-select { width: 150px; padding: 0; height: 55px; line-height: 55px; border: 2px solid #eaedf4; border-radius: 0; text-align: center; display: flex; justify-content: center } .shop-collection-area .shop-collection-input .shop-input .nice-select .list { margin-top: 0; width: 100% } .shop-area .shop-sidebar .shop-category, .shop-area .shop-sidebar .shop-range, .shop-area .shop-sidebar .shop-tag { padding: 32px; border: 2px solid #eaedf4 } .shop-area .shop-sidebar .shop-category .shop-category-list ul li a { color: #8a8a8a; line-height: 35px } .shop-area .shop-sidebar .shop-tag .shop-tag-list ul { margin-top: 10px } .shop-area .shop-sidebar .shop-tag .shop-tag-list ul li a { background: #eef3f9; color: #8a8a8a; font-size: 14px; line-height: 40px; padding: 0 17px; border-radius: 5px; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out } .shop-area .shop-sidebar .shop-tag .shop-tag-list ul li:last-child a { margin-left: 4px } .shop-area .shop-sidebar .shop-range .shop-range-item p { font-size: 14px; font-weight: 500; color: #8a8a8a; padding-top: 10px } .shop-area .shop-sidebar .shop-range .shop-range-item p span { font-weight: 700; color: #666 } .shop-area .shop-sidebar .shop-title .title { font-size: 22px; font-weight: 700; color: #222; position: relative; margin-bottom: 31px } .shop-area .shop-sidebar .shop-title .title::before { position: absolute; content: ''; left: 0; bottom: -15px; height: 2px; width: 10px; background: #393185 } .shop-area .shop-sidebar .shop-title .title::after { position: absolute; content: ''; left: 18px; bottom: -15px; height: 2px; width: 25px; background: #393185 } .shop-area .shop-item .shop-thumb img { width: 100%; height: 290px } .shop-area .shop-item .shop-thumb::before, .shop-item-area .shop-item .shop-thumb::before { position: absolute; content: ''; left: 0; bottom: -200px; height: 100%; width: 100%; background-color: rgba(1, 84, 247, .6); opacity: 0; transition: .3s linear } .shop-area .shop-item .shop-thumb ul, .shop-item-area .shop-item .shop-thumb ul { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); transition: .3s linear; opacity: 0 } .shop-area .shop-item .shop-thumb ul li a, .shop-item-area .shop-item .shop-thumb ul li a { height: 40px; width: 40px; background: #fff; color: #393185; border-radius: 50%; text-align: center; line-height: 40px } .shop-area .shop-item .shop-content a, .shop-item-area .shop-item .shop-content a { font-size: 18px; font-weight: 600; color: #222; margin-top: 23px } .shop-area .shop-item .shop-content span, .shop-item-area .shop-item .shop-content span { font-size: 14px; font-weight: 700; color: #3b7eff; padding-bottom: 13px } .shop-area .shop-item:hover .shop-thumb::before, .shop-item-area .shop-item:hover .shop-thumb::before { bottom: 0; opacity: 1 } .shop-area .shop-item:hover .shop-thumb ul, .shop-item-area .shop-item:hover .shop-thumb ul { top: 50%; opacity: 1 } .shop-area .pagination-area nav ul li a.active, .shop-area .pagination-area nav ul li a:hover { background: #3b7eff; border-color: #3b7eff; box-shadow: none } @media only screen and (min-width:992px) and (max-width:1200px) { .blog-standard-area .blog-standard .blog-story .blog-story-1 .title { font-size: 18px } .shop-collection-area .shop-collection-input .input-box { width: 210px } .shop-area .shop-sidebar .shop-category, .shop-area .shop-sidebar .shop-range, .shop-area .shop-sidebar .shop-tag { padding: 32px 15px } .shop-area .shop-sidebar .shop-tag .shop-tag-list ul li a { padding: 0 13px; font-size: 13px } .product-details-area .product-item-slide { margin-right: 0 } .product-details-area .product-details-content { margin-left: 0 } } .product-details-area .product-details-content .product-details-content-item .title { font-size: 24px; font-weight: 700; line-height: 30px; color: #222; padding-top: 17px; padding-bottom: 20px } .product-details-area .product-details-content .product-details-content-item ul li i { color: #00a0e3; margin-right: 6px } .product-details-area .product-details-content .product-details-content-item span { color: #222; font-size: 18px; font-weight: 700; padding-top: 15px; padding-bottom: 25px } .product-details-area .product-details-content .product-btns a { line-height: 40px; padding: 0 30px; margin-left: 20px } @media (max-width:767px) { .product-details-area .product-details-content { margin-left: 0 } .product-details-area .product-details-content .product-btns a { margin-left: 0; margin-top: 20px } } @media only screen and (min-width:576px) and (max-width:767px) { .section-title .title { font-size: 40px } .section-title .title span { font-size: 42px } .header-top { padding-left: 30px; padding-right: 30px } .header-top .header-top-item .header-left-side p { line-height: 20px; font-size: 12px } .header-top .header-top-item .header-right-social ul li a { height: 30px; width: 30px; line-height: 30px; font-size: 12px } .header-top.header-top-2 .header-top-item .header-left-side ul li { margin-right: 38px } .blog-area-2 .blog-item .blog-overlay .blog-content p, .category-area .category-goals .goals-item p, .category-area .category-misson .misson-item p, .header-top.header-top-2 .header-top-item .header-left-side ul li span { font-size: 14px } .banner-area .banner-content .title, .banner-area-2.banner-area-3 .banner-content-3 .title { font-size: 50px; line-height: 60px } .banner-area .banner-content>span, .newaletter-area .newaletter-item .newaletter-content .item .title { font-size: 26px } .banner-area .banner-content ul li, .banner-area-2 .banner-flex .banner-content ul li:last-child a, .banner-area-2.banner-area-3 .banner-content-3 ul li .play-btn, .blog-standard-area .blog-standard .blog-item .blog-content .item .blog-social { margin-top: 0 } .banner-area.page-title { background-position: 60% } .banner-area-2 .banner-flex .banner-content { max-width: 450px; padding: 65px 40px 65px 65px } .banner-area-2 .banner-flex .banner-content .title { font-size: 60px; line-height: 70px } .banner-area-2 .banner-flex .banner-content p, .blog-standard-area .blog-standard .blog-story .blog-story-1 .title { font-size: 15px } .banner-area-2.banner-area-3 .banner-content-3 p { padding-right: 100px } .banner-area-2.banner-area-3 .banner-thumb img { width: 55%; display: inline-block } .about-area .about-content .title { font-size: 40px; line-height: 55px } .about-area .about-content .title span, .achievement-area .section-title .title span, .quote-area .quote-content .title span { font-size: 46px } .about-area .about-content ul li:last-child a { padding-left: 30px; margin-top: 0 } .about-3-area .section-title .title span, .case-details-area .case-content .title { font-size: 36px } .about-3-area .section-title>span { padding-right: 40px } .about-3-area .section-title p, .blog-area .blog-item .blog-content .title, .blog-area-2 .blog-item .blog-overlay .blog-content .title { font-size: 20px } .about-history-area .history-tab-btn .nav li a { padding: 0 8px; font-size: 15px } .about-history-area .history-tab-btn .tab-content .history-content .title, .project-area .project-item .project-content .title, .video-play-area .video-play-item span { font-size: 30px } .features-area .features-item { padding: 50px 20px } .featires-2-area .featires-item .featires-content { padding: 48px 35px 22px } .blog-standard-area .blog-sidebar .blog-news .blog-news-item .item .title, .project-area .project-item .project-content span { font-size: 18px } .project-2-area .project-item .project-content { width: 65% } .project-2-area .project-item .project-content p { font-size: 17px } .blog-area-2 .blog-item .blog-overlay .blog-content ul li, .case-details-area .case-list .item .title, .newaletter-area .newaletter-item .newaletter-content .item span, .project-case-area .project-case-item .project-case-content span { font-size: 16px } .testimonial-area .testimonial-item { padding: 0 40px 50px } .testimonials-2-area .testimonials-item { padding: 45px 40px 32px } .blog-area-2 .blog-item .blog-overlay .blog-tag { left: 30px } .blog-area-2 .blog-item .blog-overlay .blog-content, .blog-standard-area .blog-standard .blog-quote { padding: 0 30px } .requst-quote-area .requst-content .title { font-size: 50px } .newaletter-area { margin-top: -110px; margin-bottom: 130px } .newaletter-area .newaletter-item .newaletter-content { width: 170px; height: 200px } .newaletter-area .newaletter-item .newaletter-input input { width: 170px; margin-bottom: 0 } .footer-area .footer-copyright { display: flex } .services-area .services-item { padding: 40px 120px 45px } .services-area.services-about .services-item { padding: 40px 70px 45px } .services-pricing-area .pricing-item p { padding: 8px 70px 30px } .faq-area .faq-thumb { margin-top: 60px } .faq-area.about-faq .company-content .company-item ul li { display: inline-block } .faq-area.about-faq .company-content .company-item ul li .link { margin-left: 35px; margin-top: 0 } .faq-accordion .accordion .card .card-header a { line-height: 70px; padding: 0 0 0 40px } .faq-accordion .accordion .card .card-body { padding: 0 30px 20px 40px !important } .case-study-area .case-item .case-content { padding: 34px 40px } .video-play-area .video-play-item .title { font-size: 70px } .solutions-area .solutions-content-area .solutions-list .item { padding-left: 110px } .solutions-area .solutions-content-area .solutions-list .item i { height: 60px; width: 60px; font-size: 40px; padding-left: 28px; padding-top: 30px } .solutions-area .solutions-content-area .solutions-list .solutions-btn ul li a.link { margin-top: 0; padding-left: 30px; margin-right: 0 } .case-details-area .case-list .item span { font-size: 13px } .blog-standard-area .blog-sidebar .blog-news { padding: 30px } .blog-standard-area .blog-sidebar .blog-news .blog-news-item .item { padding-left: 90px } .blog-standard-area .blog-sidebar .blog-list .blog-tag ul li a { padding: 0 14px; font-size: 17px } .blog-standard-area .blog-sidebar .blog-add-area .add-overlay { padding-top: 100px } .blog-standard-area .blog-sidebar .blog-add-area .add-overlay p { padding: 30px 50px 35px } .blog-standard-area .blog-standard .blog-item .blog-content { padding: 35px 30px 40px } .blog-standard-area .blog-standard .blog-item .blog-content .title { font-size: 18px; line-height: 28px } .blog-standard-area .blog-standard .blog-quote p { font-size: 18px; padding-right: 0 } .blog-standard-area .blog-standard .blog-sharing { padding: 38px 30px 0 } .blog-standard-area .blog-standard .blog-story { padding: 55px 30px 75px } .blog-standard-area .blog-standard .blog-story .blog-story-1 { padding: 15px 30px } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item { padding-left: 130px } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item img { width: 20%; top: 50% } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item p { padding-right: 60px } .blog-standard-area .blog-standard .blog-comments .blog-comments-area .blog-comments-item.item-2 { margin-left: 60px } .blog-standard-area .blog-standard .blog-massage { padding: 40px 30px 30px } .shop-collection-area .shop-collection .shop-collection-content { margin-right: 50px } .shop-collection-area .shop-collection-input .input-box input { margin-bottom: 0 } .product-details-area .product-details-content .product-btns a { margin-left: 20px; margin-top: 0 } } .product-details-area .product-details-content .product-icons-item-1 { padding-top: 40px } .product-details-area .product-details-content .product-icons-item-1 ul li a { font-size: 20px; color: #8a8a8a } .product-details-area .product-details-content .product-icons-item-1 ul li:first-child a { padding: 0 15px; border-left: 1px dashed #393185; border-right: 1px dashed #393185; line-height: 20px; margin-right: 9px } .product-details-area .product-details-content .product-social-icon { padding-top: 22px } .product-details-area .product-details-content .product-social-icon ul li a { color: #8a8a8a; margin-right: 8px } .shop-tab-area .nav { border-bottom: 2px solid #ddd } .shop-tab-area .nav .nav-item .nav-link { background-color: transparent; color: #8a8a8a; font-size: 18px; font-weight: 600; line-height: 60px; padding: 0; margin-right: 40px; position: relative } .shop-tab-area .nav .nav-item .nav-link::before { position: absolute; content: ''; left: 0; bottom: -2px; height: 0; width: 100%; background: #393185 } .shop-tab-area .tab-content .tab-pane p.text { padding-top: 20px; padding-bottom: 20px } .shop-item-area { padding-top: 113px; padding-bottom: 112px } .shop-item-area .section-title { padding-bottom: 25px } .product-quantity button { width: 43px; height: 33px; padding: 0; background-color: #fff; font-size: 18px; color: #838b97; border: 1px solid #ddd } .product-quantity input { width: 43px; height: 33px; border: 1px solid #ddd; padding: 0 10px; text-align: center; margin: 0; color: #838b97; border-left: 0; border-right: 0 } .contact-info-area .contact-info-border { border: 10px solid #f1f1f1; margin-bottom: 50px } .contact-info-area .contact-info-border .contact-info-item { padding: 59px 0 55px } .contact-info-area .contact-info-border .contact-info-item i { font-size: 40px; color: #393185; padding-bottom: 6px } .contact-info-area .contact-info-border .contact-info-item ul li { font-size: 18px; font-weight: 500; color: #8a8a8a; line-height: 28px } .contact-info-area .contact-info-border .contact-info-item.active .item-1 { position: absolute; right: -5px; top: 50%; transform: translateY(-50%) } .contact-info-area .contact-info-border .contact-info-item.active .item-2 { position: absolute; left: -5px; top: 50%; transform: translateY(-50%) } .contact-info-area .contact-thumb { margin-right: -30px; position: relative } .contact-info-area .contact-thumb::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(1, 84, 247, .7) } .contact-info-area .contact-thumb .contact-text { position: absolute; left: 40px; bottom: 50px } .contact-info-area .contact-thumb .contact-text .title { color: #fff; font-size: 40px; font-weight: 600; line-height: 40px; border-left: 5px solid #fff; padding-left: 25px } .contact-info-area .contact-massage-area .contact-massage-content .title { font-size: 30px; color: #222; font-weight: 600; position: relative } .contact-info-area .contact-massage-area .contact-massage-content .title::before { position: absolute; content: ''; left: 48%; bottom: -19px; width: 10px; height: 2px; background: #393185 } .contact-info-area .contact-massage-area .contact-massage-content .title::after { position: absolute; content: ''; left: 50%; bottom: -19px; width: 25px; height: 2px; background: #393185 } .contact-info-area .contact-massage-area .contact-massage-content p { font-size: 18px; font-weight: 500; line-height: 28px; padding-top: 42px; padding-bottom: 11px } .contact-info-area .contact-massage-area form .input-box input { width: 100%; line-height: 70px; padding-left: 20px; border: 2px solid #e9ebef; font-size: 14px; color: #8a8a8a } .contact-info-area .contact-massage-area form .input-box input::placeholder { opacity: 1 } .contact-info-area .contact-massage-area form .input-box textarea { width: 100%; height: 140px; border: 2px solid #e9ebef; padding-left: 20px; padding-top: 20px; font-size: 14px; color: #8a8a8a; margin-bottom: 20px } .contact-info-area .contact-massage-area form .input-box textarea::placeholder { opacity: 1 } .contact-info-area .contact-massage-area form .input-box i { position: absolute; right: 20px; top: 30px; color: #393185; font-size: 14px } .contact-map-area .contact-map { position: relative; height: 400px } @media only screen and (min-width:768px) and (max-width:991px) { .product-details-area .product-details-content { margin-left: 0 } .contact-info-area .contact-info-border .contact-info-item ul li { font-size: 14px } .contact-info-area .contact-thumb { margin-right: 0 } .contact-info-area .contact-thumb .contact-text .title { font-size: 30px; line-height: 30px } .contact-info-area .contact-massage-area { padding-left: 0 } .contact-map-area .contact-map { height: 500px } } @media (max-width:767px) { .shop-tab-area .nav .nav-item .nav-link { margin-right: 20px } .product-quantity button { width: 40px; height: 40px } .product-quantity input { height: 40px } .contact-info-area .contact-thumb { margin-right: 0 } .contact-info-area .contact-thumb .contact-text .title { font-size: 40px; line-height: 40px } .contact-info-area .contact-massage-area { padding-left: 0 } .contact-map-area .contact-map { height: 400px } } .contact-map-area .contact-map iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100% } .contact-map-area .contact-map i { position: absolute; left: 50%; top: 45%; transform: translate(-50%); color: #fc5546; font-size: 100px } .banner-area .banner-shape-2 img { filter: brightness(0) saturate(100%) invert(19%) sepia(34%) saturate(900%) hue-rotate(215deg) brightness(95%) contrast(95%) } .text-justify { text-align: justify } .footer-logo img { filter: brightness(0) invert(1) } .blog-sidebar { position: sticky; top: 130px } .solution-img img { height: 230px } .blog-content li, .ul-product { list-style: circle } .navigation1 li.active a::before { content: ''; display: inline-block; width: 6px; height: 6px; background-color: #393185; border-radius: 50%; margin-right: 8px; vertical-align: middle } .whatsapp-float { position: fixed; bottom: 30px; left: 30px; display: flex; align-items: center; gap: 0; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; padding: 12px 18px; border-radius: 50px; text-decoration: none; font-size: 15px; font-weight: 500; box-shadow: 0 8px 25px rgba(0, 0, 0, .2); z-index: 999; overflow: hidden; transition: .3s; animation: 3s ease-in-out infinite float } .whatsapp-icon { font-size: 30px; display: flex; color: #fff; align-items: center; justify-content: center } .whatsapp-float i { margin-left: 10px } .whatsapp-text { max-width: 0; opacity: 0; white-space: nowrap; transition: .4s; color: #fff; padding-left: 10px } .whatsapp-float:hover { padding: 12px 22px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3) } .whatsapp-float:hover .whatsapp-text { max-width: 150px; opacity: 1 } .whatsapp-float::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50px; background: rgba(37, 211, 102, .5); animation: 2s infinite pulse; z-index: -1 } .vision-box::after, .vision-box::before { content: "" !important; width: 50px !important; height: 50px !important; background: #393185 !important } @keyframes pulse { 0% { transform: scale(1); opacity: .7 } 70% { transform: scale(1.5); opacity: 0 } 100% { transform: scale(1); opacity: 0 } } @keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } } .vision-box::before { border-radius: 0 0 14px } .vision-box::after { border-radius: 14px 0 0; position: absolute; right: 0; bottom: 0 } #loading { display: block; position: fixed; top: 0; left: 0; z-index: 1000000; width: 100%; height: 100vh; background-color: #fff; background-image: url("../images/preloader.gif"); background-size: 230px } @media (max-width:500px) { .navbar-brand img { width: 150px } } .blog-content ul { padding-left: 2rem } .service-detail-content h1, h2, h3, h4, h5 { font-size: 14px; color: #8a8a8a; font-weight: 700; line-height: 28px; margin-top: 13px } .features-item:hover p { color: #fff !important } .features-item:hover img { filter: invert(47%) sepia(94%) saturate(2357%) hue-rotate(203deg) brightness(101%) contrast(101%) !important } .title-solution { font-weight: 500 !important; color: #393185 !important; font-size: 39px !important } .solution-row:nth-child(odd) { flex-direction: row } .solution-row:nth-child(2n) { flex-direction: row-reverse } .solu-cat-img { height: 350px } .text-category-solution { font-size: 20px; font-weight: 600; background: #393185; color: #fff; margin-top: 10px; padding: 10px; border-radius: 6px } @media(max-width:700px) { .title-solution { font-size: 23px !important } .solution-row { border-bottom: 1px solid; padding-bottom: 20px } } .error { color: red !important }