body{ font-family: Poppins, sans-serif !important; } /* ##### Why Choose Us Area ##### */ p { font-size: 20px; } .single-why-choose-us { text-align: center; border: 1px solid #ccc; padding: 10px; opacity: 1; } .sec-icon { position: relative; display: inline-block; padding: 0; margin: 0 auto; } .sec-icon::before { content: ""; position: absolute; height: 1px; left: -70px; margin-top: -5.5px; top: 60%; background: #333333; width: 50px; } .sec-icon::after { content: ""; position: absolute; height: 1px; right: -70px; margin-top: -5.5px; top: 60%; background: #333; width: 50px; } .why-choose-us .col { padding: 0 1em 1em 1em; text-align: center; } .why-choose-us .service-card { width: 100%; height: 100%; padding: 2em 1.5em; border-radius: 5px; cursor: pointer; transition: 0.5s; position: relative; z-index: 2; overflow: hidden; background: #fff; } .why-choose-us .service-card:hover { box-shadow: 0 0 35px rgba(0, 0, 0, 0.12); } .why-choose-us .service-card::after { content: ""; width: 100%; height: 100%; background: #083551; position: absolute; left: 0%; top: -99%; z-index: -2; transition: all 0.4s cubic-bezier(0.77, -0.04, 0, 0.99); } .why-choose-us h3 { font-size: 24px; text-transform: capitalize; font-weight: 600; color: #1f194c; margin-bottom: 15px !important; } .why-choose-us p { color: #000; font-size: 18px; line-height: 1.6; letter-spacing: 0.01em; text-align: justify; } .why-choose-us .icon-wrapper { position: relative; margin: auto; font-size: 55px; height: 2em; width: 2em; color: #ffffff; border-radius: 20%; display: grid; place-items: center; transition: 0.5s; z-index: 3; } .why-choose-us .service-card:hover:after { top: 0%; } .service-card .icon-wrapper { background-color: #ffffff; color: #083551; } .awhy-choose-us .service-card:hover .icon-wrapper { color: #0dcaf0; } .why-choose-us .service-card:hover h3 { color: #ffffff; } .why-choose-us .service-card:hover p { color: #f0f0f0; } .ct-counter-inner { text-align: center; background-color: #fff; border-radius: 10px; box-shadow: 0 0 30px #ced2ed; padding: 20px 15px; border: 1px solid #fff; transition: 0.3s cubic-bezier(.24, .74, .58, 1) } .ct-counter-inner .ct-counter-icon img { transition: 0.3s cubic-bezier(.24, .74, .58, 1) } .ct-counter-inner .ct-counter-number { line-height: 1; margin: 15px 0 6px } .ct-counter-inner .ct-counter-number span { font-size: 45px; font-weight: 700; } .why-choose-us-single-container-wrap { margin-top: 50px; } .ct-counter-inner .ct-counter-icon img { transition: 0.3s cubic-bezier(.24, .74, .58, 1); } .ct-counter-inner:hover { border-color: #49b9ff } .ct-counter-inner:hover img { animation: icon-bounce 800ms ease-out infinite } @keyframes icon-bounce { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px) } 60% { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px) } } .ct-counter-title { font-size: 20px; font-weight: 500; } .grid { margin-bottom: 30px !important; } /* .bg-gray { background-color: #f3f3f3 !important; } */ .ios-facilities .icon-bx { display: flex; margin-bottom: 33px; } .ios-facilities .icon-bx p { margin: 22px 0 0 20px; font-weight: 700; font-size: 21px; line-height: 24px; color: #000 !important; } .industries { background: #083551; height: 70px; width: 70px; border-radius: 10px; } .horizontal-scroll-container { overflow-x: auto; overflow-y: hidden } .horizontal-scroll-container::-webkit-scrollbar { display: none } .can-help .tabs { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: center; justify-content: center; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .can-help .tabs__item { padding: 34px 24px 9px; min-width: 164px; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-align: center; align-items: center; cursor: pointer; position: relative; } .can-help .tabs__art { width: 50px; } .can-help .tabs__item.-active:after { transform: scaleX(1); } .can-help .tabs__item:after { display: block; content: ''; border-bottom: 4px solid #8b0000; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(50% 11.49% at 49.74% 100%, rgba(207, 76, 110, .1) 43.75%, rgba(255, 255, 255, 0) 100%); transform: scaleX(0); transition: transform .1s ease-in-out; } .wrap-v4 { padding-left: 40px; padding-right: 40px; width: 100%; max-width: 1380px; margin: 0 auto; } .can-help .content .tabs__content-item { display: none } .can-help .content .tabs__content-item.-active { display: block; } .can-help .content .items { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -6px -21px; margin-bottom: 40px; } .page.-home-v4 .can-help .content .items .item { padding: 6px; -ms-flex: 0 0 50%; flex: 0 0 50%; } .can-help .content .items .item__content { height: 100%; padding: 45px 0px 0px 95px; border-radius: 8px; background: #fff; } .bg-overlay2::after { background-color: rgb(255 255 255 / 85%); position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; content: ""; } .tabs__title { font-size: 20px; font-weight: 500; } .why-image { margin-top: -70px; } .banner_overlay { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(7, 41, 77, 0.4); } .bg-video-wrap { position: relative; overflow: hidden !important; width: 100%; height: 90vh; } .video-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .video-container video { min-width: 100%; min-height: 100%; } .content-box h1 { position: absolute; top: 50%; left: 35%; transform: translate(-28%, -50%); z-index: 2; color: #fff; text-align: center; font-size: 50px; } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible } } .animate__slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } .animate__fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } .category { margin-left: 10px !important; } .explore-more-item { background: #fff; padding: 20px; border-radius: 5px; display: flex; align-items: center; flex-direction: column; row-gap: 24px; width: 187px; transition-duration: 0.4s; -webkit-transition-duration: 0.4s; margin-top: -60px; z-index: 5; margin-right: 25px; box-shadow: 0px 6px 16px 0px rgba(0, 117.00000000000004, 255, 0.33); } .banner-badge { box-shadow: 0px 6px 16px 0px rgba(0, 117.00000000000004, 255, 0.33); display: flex; justify-content: center; /* horizontally center */ align-items: center; /* vertically center */ height: 99px; padding: 10px; } .cards-wrapper .image.gradient { background-image: #fff; background-position: 50%; background-repeat: no-repeat; background-size: cover; border-radius: 10px; height: 7rem } .cards-wrapper .image { align-items: center; display: flex; margin: auto; min-height: 2rem; width: 100%; text-align: center; background-image: #fff; /* box-shadow: 0 0 30px #ced2ed; */ } .cards-wrapper .image img { display: block; margin: auto; } .industries-vertical { margin-bottom: 40px; } .industries-vertical:hover { /* height: 4px; background-image: linear-gradient(to right, #083551, #083551, #083551, #8b0000, #8b0000); transform: translateY(-4px); transition: transform 0.3s ease; */ box-shadow: 0 0 30px 5px #e9e8e8; } .industries-vertical .content { margin: 10px 0px; } .industries-vertical .content .title { font-weight: 600 !important; } .faq li { padding: 20px; } .faq li.q { background: #f3f3f3; font-weight: 500; font-size: 19px; border: 1px #ddd solid; border-radius: 15px; cursor: pointer; margin-top: 15px; } .faq li.a { background: #fff; display: none; color: #000; } .faq li.q i { float: right; transition: transform 0.3s ease-in-out; } .faq li.q.rotate i::before { content: "\f068"; /* Cross icon */ } .faq li.q i::before { content: "\f067"; /* Plus icon */ } /* .gtco-testimonials { position: relative; } */ .gtco-testimonials h2 { font-size: 30px; text-align: center; color: #333; margin-bottom: 50px; } .gtco-testimonials .owl-nav { display: none; } .gtco-testimonials .owl-dots { display: flex; justify-content: center; } .gtco-testimonials .owl-dots span { position: relative; height: 10px; width: 10px; border-radius: 50%; display: block; background: #fff; border: 2px solid #8b0000; margin: 0 5px; } .gtco-testimonials .owl-dots .active { box-shadow: none; } .gtco-testimonials .owl-dots .active span { background: #8b0000; box-shadow: none; height: 12px; width: 12px; margin-bottom: -1px; } .gtco-testimonials .card { background: #fff; box-shadow: 0 8px 30px -7px #c9dff0; margin: 0 20px; padding: 0 10px; border-radius: 20px; border: 0; } .gtco-testimonials .card .card-img-top { max-width: 100px; border-radius: 50%; margin: 15px auto 0; box-shadow: 0 8px 20px -4px #95abbb; width: 100px; height: 100px; } .gtco-testimonials .card h5 { color: #8b0000; font-size: 21px; line-height: 1.3; } .gtco-testimonials .card h5 span { font-size: 18px; color: #666; } .gtco-testimonials .card p { font-size: 18px; color: #555; padding-bottom: 15px; } .gtco-testimonials .active { opacity: 0.5; transition: all 0.3s; } .gtco-testimonials .center { opacity: 1; } .gtco-testimonials .center h5 { font-size: 24px; } .gtco-testimonials .center h5 span { font-size: 20px; } .gtco-testimonials .center .card-img-top { max-width: 100%; height: 120px; width: 120px; } @media (max-width: 767px) { .gtco-testimonials { margin-top: 20px; } } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev { outline: 0; } .owl-carousel button.owl-dot { outline: 0; } .rs-project.style4 .project-item { position: relative; overflow: hidden; border-radius: 5px; z-index: 1; } .rs-project.style4 .project-item .project-img { z-index: 1; } .rs-project.style4 .project-item .project-img img { transform: scale(0.8); transition: 0.6s; border-radius: 5px; } .rs-project.style4 .project-item .project-content { position: absolute; padding: 24px 30px; opacity: 0; z-index: 10; top: 0; visibility: hidden; width: 100%; height: 100%; text-align: center; transform: scale(1.3); transition: 0.4s; } .rs-project.style4 .project-item .project-content .title { font-size: 18px; line-height: 30px; font-weight: 800; margin-bottom: 5px; } .rs-project.style4 .project-item .project-content .title a { color: #fff; font-size: 30px; } .rs-project.style4 .project-item .project-content .title a:hover { color: #8b0000; } .rs-project.style4 .project-item .project-content .category { font-size: 16px; line-height: 26px; font-weight: 400; display: block; } .rs-project.style4 .project-item .project-content .category a { color: #ffffff; } .rs-project.style4 .project-item .project-content .category a:hover { color: #fd6509; } .rs-project.style4 .project-item .project-content:before { content: ''; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); border-radius: 5px; } .rs-project.style4 .project-item:hover .project-img img { transform: scale(1); } .rs-project.style4 .project-item:hover .project-content { visibility: visible; opacity: 1; transform: scale(1); } .rs-project.style4 .project-item:hover .project-content:before { opacity: 1; visibility: visible; } .pheading { text-align: center; color: #8b0000; margin-top: 15px; font-size: 25px; } .project-item .vertical-middle { position: relative; z-index: 9; } .vertical-middle { display: table; height: 100%; width: 100%; } .vertical-middle-cell { display: table-cell; vertical-align: middle; } .more-port { text-align: center; margin: 50px; } .section-heading h2 { font-size: 36px; text-transform: uppercase; background: linear-gradient(to right, #083551, #083551, #083551, #8b0000, #8b0000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tag { padding: 0.25em 0.75em; border-radius: 6px; font-size: 12px; } .tag+.tag { margin-left: .5em; } .tag-blue { background: #083551; color: #fff; } .tag-brown { background: #D1913C; background: linear-gradient(to bottom, #FFD194, #D1913C); color: #fafafa; } .tag-red { background: #cb2d3e; background: linear-gradient(to bottom, #ef473a, #cb2d3e); color: #fafafa; } .card__body h4 { font-size: 1.5rem; text-transform: capitalize; } .card__footer { display: flex; padding: 1rem; margin-top: auto; } .user { display: flex; gap: .5rem; } .user__image { border-radius: 50%; } .user__info>small { color: #666; } .card_case { border-radius: 10px !important; } .card_case:hover { box-shadow: 4px 4px 5px rgba(255, 255, 255, .2); transform: scale(1.03); transition: transform .5s ease-in-out; } .card__body_case { padding: 10px; /* background: #f7f7f7; */ } .case-title { margin-top: 10px !important; } .more-info { font-size: 17px; } .card__image { height: 250px; border-radius: 15px; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 7)); } } .slider { height: 200px; margin: auto; overflow: hidden; position: relative; } .slider::before, .slider::after { /* background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); */ content: ""; height: 100px; position: absolute; width: 200px; z-index: 2; } .slider::after { right: 0; top: 0; transform: rotateZ(180deg); } .slider::before { left: 0; top: 0; } .slider .slide-track { animation: scroll 40s linear infinite; display: flex; width: calc(250px * 14); } .slider .slide { height: 100px; width: 250px; } .industries-vertical { position: relative; display: flex; align-items: flex-end; padding: 1rem; text-align: center; color: whitesmoke; background-color: whitesmoke; align-items: center; height: 280px; } .industries-vertical:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff !important; background-size: cover; background-position: 0 0; transition: transform calc(var(--d)* 1.5) var(--e); pointer-events: none; border-radius: 15px; } .industries-vertical:nth-of-type(1):before { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/home_images/iv1.jpg); background-repeat: no-repeat; background-size: cover; border-right: 4px solid #fff; } .industries-vertical:nth-of-type(1):hover:before { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/home_images/iv1.jpg); background-repeat: no-repeat; background-size: cover } .industries-vertical:nth-of-type(2):before { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/home_images/iv2.webp); background-repeat: no-repeat; background-size: cover; border-right: 4px solid #fff; } .industries-vertical:nth-of-type(2):hover:before { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/home_images/iv2.webp); background-repeat: no-repeat; background-size: cover } .industries-vertical:nth-of-type(3):before { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/home_images/iv3.jpg); background-repeat: no-repeat; background-size: cover; border-right: 4px solid #fff; } .industries-vertical:nth-of-type(3):hover:before { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/home_images/iv3.jpg); background-repeat: no-repeat; background-size: cover } .industries-vertical:nth-of-type(4):before { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/home_images/iv4.jpg); background-repeat: no-repeat; background-size: cover; border-right: 4px solid #fff; } .industries-vertical:nth-of-type(4):hover:before { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/home_images/iv4.jpg); background-repeat: no-repeat; background-size: cover } .industries-vertical:nth-of-type(5):before { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/home_images/iv5.jpg); background-repeat: no-repeat; background-size: cover; border-right: 4px solid #fff; } .industries-vertical:nth-of-type(5):hover:before { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/home_images/iv5.jpg); background-repeat: no-repeat; background-size: cover } .industries-vertical:nth-of-type(6):before { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/home_images/iv6.jpg); background-repeat: no-repeat; background-size: cover; border-right: 4px solid #fff; } .industries-vertical:nth-of-type(6):hover:before { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/home_images/iv6.jpg); background-repeat: no-repeat; background-size: cover } .industries-vertical:nth-of-type(7):before { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/home_images/iv7.jpg); background-repeat: no-repeat; background-size: cover; border-right: 4px solid #fff; } .industries-vertical:nth-of-type(7):hover:before { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/home_images/iv7.jpg); background-repeat: no-repeat; background-size: cover } .industries-vertical:nth-of-type(8):before { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/home_images/iv7.jpg); background-repeat: no-repeat; background-size: cover; border-right: 4px solid #fff; } .industries-vertical:nth-of-type(8):hover:before { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/home_images/iv7.jpg); background-repeat: no-repeat; background-size: cover } .conteent { position: relative; display: flex; align-items: center; width: 100%; padding: 1rem; transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1); z-index: 1; justify-content: center; flex-direction: column; } .conteent img{ height: 150px; } .conteent>*:not(.title) { display: none; transform: translateY(1rem); transition: transform var(--d) var(--e), opacity var(--d) var(--e); } .industries-vertical:hover .conteent > *:not(.title) { display: block; transform: translateY(0); transition-delay: calc(var(--d) / 8); color: #fff; flex-direction: column; } .title { font-size: 24px; font-weight: 600; line-height: 1.2; color: #000; } .industries-vertical:hover .title{ color: #fff !important; } .industries-vertical:hover .conteent { transform: translateY(0) !important; flex-direction: column; }