/* ..........Fonts.......... */ @font-face { font-family: "DM Sans 36pt"; src: url("./font/DMSans36pt-Bold.woff2") format("woff2"), url("./font/DMSans36pt-Bold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans 24pt"; src: url("./font/DMSans24pt-Regular.woff2") format("woff2"), url("./font/DMSans24pt-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans 24pt"; src: url("./font/DMSans24pt-Medium.woff2") format("woff2"), url("./font/DMSans24pt-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans"; src: url("./font/DMSans-Regular.woff2") format("woff2"), url("./font/DMSans-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Epilogue"; src: url("./font/Epilogue-Regular.woff2") format("woff2"), url("./font/Epilogue-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Epilogue"; src: url("./font/Epilogue-Medium.woff2") format("woff2"), url("./font/Epilogue-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Epilogue"; src: url("./font/Epilogue-SemiBold.woff2") format("woff2"), url("./font/Epilogue-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Epilogue"; src: url("./font/Epilogue-Bold.woff2") format("woff2"), url("./font/Epilogue-Bold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("./font/Poppins-Bold.woff2") format("woff2"), url("./font/Poppins-Bold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("./font/Poppins-Regular.woff2") format("woff2"), url("./font/Poppins-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("./font/Poppins-Medium.woff2") format("woff2"), url("./font/Poppins-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("./font/Poppins-Light.woff2") format("woff2"), url("./font/Poppins-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("./font/Poppins-SemiBold.woff2") format("woff2"), url("./font/Poppins-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } * { margin: 0; padding: 0; } :root { --bg-color: #090909; --primary-color: #e21016; --primary-font-color: #ef3434; --secondary-color: #141418; --bs-grey: #c1c1c1; --bs-white: #fff; --bs-light-grey: #d9d9d9; } body { background-color: var(--bg-color); color: var(--bs-white); text-transform: capitalize; } p { font-family: "Poppins"; font-weight: 300; font-size: 18px; color: var(--bs-grey); line-height: 38px; } h3, .value-better h3, .exoerties-info h3, .hiring-process-sec h3, .career-path-content h3, .our-value-info h3 { font-family: "Poppins"; font-weight: 300; font-size: 18px; color: var(--bs-grey); line-height: 38px; } #content { margin-bottom: 0; height: 30px; } #content .subtext { margin-bottom: 0; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .show-flex { display: block !important; } .hide { display: none !important; } ::selection { color: var(--bs-white); background-color: var(--primary-color); } .red-text { color: var(--primary-color) !important; } .white-text { color: var(--bs-white) !important; } .para-text { color: var(--bs-light-grey) !important; font-weight: 300 !important; } .light-white { color: var(--bs-grey) !important; } .custom-bg-grey { background-color: var(--secondary-color); } .text-small { font-family: "Poppins"; font-weight: 300; font-size: 1.125rem; color: var(--bs-grey); line-height: 1.625rem; } .text-justify { text-align: justify; } .line-height-32 { line-height: 32px; } section { margin-top: 100px !important; } .normal-text { font-family: "poppins"; font-size: 1.625rem; font-weight: 500; line-height: 1.3; color: white; white-space: normal; word-wrap: break-word; flex-shrink: 1; } .top-header { background-color: var(--secondary-color); padding: 10px 0; height: 48px; width: 100%; display: flex; align-items: center; height: 100%; transition: transform 0.4s ease; } .top-header .info-header { font-family: "Poppins"; font-weight: normal; } .top-header span { color: var(--primary-font-color); font-size: 14px; } .top-header span a { color: var(--bs-white); text-decoration: none; font-size: 12px; } .vertical-line { width: 1px; height: 20px; background-color: var(--bs-white); margin: 0 20px; } .banner-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; transition: top 0.3s ease; } .main-header { background: transparent; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .sticky .main-header { position: fixed; top: 0; left: 0; /* height: 90px; */ width: 100%; animation: slideDown 0.3s ease; background: rgba(0, 0, 0, 0.7); padding: 0px; /* border-bottom: 2px solid var(--bs-white); */ border-bottom: 2px solid #666666d1; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } .hide-top .top-header { transform: translateY(-100%); } .navbar-brand img { /* height: 50px; */ transition: opacity 0.3s ease; } .logo-sticky { display: none; width: 100%; height: 60px; } .sticky .logo-default { display: none; } .sticky .logo-sticky { display: inline; } .sticky .main-header .navbar { padding: 0; } .about-client-testimonial { height: 640px; } .about-client-testimonial img { object-fit: cover; } .sticky .main-header .navbar .navbar-nav .nav-item.dropdown:hover .outer-dropdown { top: 60px !important; } .header-image { background-image: url("../images/hero-bg.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: auto; padding-top: 130px; overflow: hidden; } .without-bg { width: 100%; height: auto; padding-top: 130px; overflow: hidden; } .navbar-nav .nav-item .nav-link { color: var(--bs-white); transition: color ease-in-out 200ms; padding: 0.5rem 1.7rem 0.5rem 1.7rem; font-family: "Poppins"; font-weight: normal; font-size: 20px; } .navbar-nav .nav-item .nav-link:hover, .navbar-nav .nav-item .nav-link:focus { color: var(--primary-color) !important; } .navbar-nav .nav-item .nav-link.active { color: var(--primary-color) !important; } .navbar-nav .nav-item:last-child .nav-link { padding: 0.5rem 0rem 0.5rem 1.7rem; } .navbar-toggler { background-color: var(--bs-white) !important; } .hero-title { word-break: break-all; } .hero-title h1 { color: var(--bs-white); font-size: 5.75rem; font-family: "Epilogue"; font-weight: 500; line-height: 100px; /* display: block; */ white-space: normal; word-break: normal; overflow-wrap: normal; } .hero-title span.heighlight { color: var(--primary-color); } .heighlight { color: var(--primary-color); } .rbt-btn.rounded-player-2 { width: 101px; height: 101px; line-height: 70px; border-radius: 50%; } .rbt-btn.rounded-player-2 { background-color: var(--bs-white); } .hero-video { margin-bottom: 1rem; } .hero-video .hero-main { width: 100%; height: auto; } .hero-video .position-to-top { position: absolute; top: 38%; left: 45%; /* transform: translate(-50%, -50%); */ margin: 0; display: flex; justify-content: center; align-items: center; } .sliding-text { /* display: flex; width: 100%; */ position: relative; } .arrow-down { display: flex; justify-content: center; } .subtext { color: var(--bs-white); font-size: 2rem; /* margin: 0px 0px 0px 100px; */ padding: 0px; width: auto; position: absolute; font-family: "poppins"; font-weight: 300; letter-spacing: 8px; line-height: 40px; top: -5px; } .company-info .company-info-title { width: 90%; } .bold-title { font-family: Poppins; font-weight: 600; color: var(--bs-white); font-size: 46px; line-height: 60px; letter-spacing: 1px; } .know-more { /* padding: 12px 85px 12px 85px; */ border-radius: 1px; background-color: var(--primary-color); color: var(--bs-white); text-decoration: none; font-family: "DM Sans 24pt"; font-size: 1rem; width: 300px; height: 69px; font-weight: 700; display: flex; justify-content: center; align-items: center; transition: background-color 0.3s ease, color 0.3s ease, font-size 0.3s ease; letter-spacing: 1.92px; border: unset; } .know-more:hover { background-color: var(--bs-white); color: var(--primary-color); font-size: 19px; transition: background-color 0.5s ease, color 0.5s ease, font-size 0.5s ease; letter-spacing: 3.84px; } .company-perform { width: 100%; height: auto; background-color: var(--secondary-color); padding: 5rem 0rem; } .count-round .round { position: relative; width: 155px; min-height: 155px; height: auto; border: 8px solid var(--primary-color); border-radius: 50%; /* text-align: center; */ display: flex; justify-content: center; align-items: center; } .count-round .round .count { font-family: "DM Sans 24pt"; font-weight: 700; font-size: 68px; z-index: 2; } .count-round .content { position: relative; z-index: 1; } .count-round .content span { font-family: "poppins"; font-size: 1.625rem; font-weight: 500; line-height: 1.3; position: absolute; top: -90px; left: -25px; background: var(--secondary-color); color: white; padding: 0px 1.375rem 1.375rem 1.813rem; border-radius: 2px; } .our-services { /* padding: 80px 0px 0px 0px; */ /* padding-bottom: 7rem; */ background: var(--secondary-color); } .our-services.home { /* padding: 80px 0px 0px 0px; */ /* padding-bottom: 7rem; */ background: unset; } .our-service-title { /* display: flex; */ text-align: center; } .title { font-size: 1.75rem; font-family: "poppins"; font-weight: 400; color: var(--primary-color); text-align: center; display: inline-flex; align-items: center; position: relative; } .title::before { content: ""; width: 20px; height: 3px; background: var(--primary-color); margin-right: 15px; } .title-2 { font-size: 1.75rem; font-family: "poppins"; font-weight: 400; color: var(--primary-color); text-align: center; } .title-2::after { content: ""; display: inline-block; width: 20px; height: 3px; background: var(--primary-color); margin-left: 15px; vertical-align: middle; } .title-same { font-size: 1.75rem; font-family: "poppins"; font-weight: 600; color: var(--primary-color); text-align: center; overflow-wrap: break-word; } .service-content { top: 0; padding: 70px 52px 0px 136px; } .our-service-main-title { text-align: center; } .our-service-main-title .main-title { font-size: 46px; font-family: "poppins"; font-weight: 600; color: var(--bs-white); line-height: 60px; letter-spacing: 1px; } .our-services-main-des { margin-top: 1rem; margin-bottom: 5rem; font-family: "poppins"; font-weight: 300; font-size: 1.375rem; color: #d9d9d9; line-height: 38px; } .all-services-sec { /* width: 100%; height:585px; background-image: url('../images/service_bg.webp'); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 4rem 8rem; */ } .all-service-title { font-size: 42px; font-family: "poppins"; font-weight: 500; color: var(--bs-white); line-height: 50px; letter-spacing: 1px; } .all-service-des { font-size: 1.375rem; font-family: "poppins"; font-weight: 300; color: var(--bs-grey); line-height: 38px; /* letter-spacing: 1px; */ } .custom-link { color: var(--bs-white); text-decoration: none; position: relative; transition: color 0.3s ease; font-size: 1.125rem; /* font-family: 'Poppins'; */ font-weight: bold; color: var(--bs-white); line-height: 60px; letter-spacing: 5px; font-family: "DM Sans 36pt"; padding: 26px 0; z-index: 999; } .custom-link::after { content: url("../images/svg/Arrow 2.svg"); display: inline-block; margin-left: 15px; vertical-align: middle; transition: transform 0.3s ease; transform-origin: center; } .custom-link:hover { /* background: linear-gradient(260.27deg, var(--primary-color) 7.32%, #EF3434 92.68%, #EE2B2B 92.68%); */ -webkit-background-clip: text; background-clip: text; color: var(--primary-font-color); text-decoration: underline; font-family: "DM Sans 36pt"; line-height: 60px; letter-spacing: 5px; font-weight: bold; font-size: 1.125rem; } .custom-link:hover::after { content: url("../images/svg/Hover_Arrow.svg"); } .our-services.mySwiper2 .swiper-slide { width: 100%; height: auto; } .our-services.mySwiper2 .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .our-services.mySwiper .swiper-slide { width: 50% !important; height: 346px; background-color: var(--secondary-color); padding: 37px 50px; cursor: none; } .our-services.mySwiper .swiper-slide-thumb-active { animation: slideIn 0.5s ease-in-out forwards; background-color: #000; border: 0.5px solid #898282; box-shadow: 10px 5px 40px 2px #28282bad; opacity: 1; } @keyframes slideIn { from { transform: translateY(0%); opacity: 0; } to { transform: translateY(-15%); opacity: 1; } } .our-services.mySwiper .swiper-slide:hover { background-color: #000; transition: none; } .our-services.mySwiper .slide-wrapper .slide-title { font-size: 2rem; font-family: "poppins"; font-weight: 600; color: var(--bs-white); line-height: 57px; letter-spacing: 0.32px; } .our-services.mySwiper { position: absolute !important; bottom: -40%; left: 0; width: 100%; height: auto; box-sizing: border-box; padding: 100px 60px 0px 140px !important; z-index: 10; overflow: hidden; display: flex; justify-content: center; align-items: center; } .services-list .lists { text-align: justify; } .lists-items { display: flex; align-items: center; } .services-list .lists li { list-style: none; border-left: 4px solid; border-image: linear-gradient(260.27deg, var(--primary-color) 7.32%, var(--primary-font-color) 92.68%, #ee2b2b 92.68%) 1; padding-left: 10px; margin-bottom: 1.375rem; line-height: 2rem; font-size: 24px; font-family: "poppins"; font-weight: 400; color: var(--bs-grey); } .swiper { width: 100%; height: 585px; } .services-slider.swiper-button-prev { width: 65px !important; height: 65px !important; background-color: var(--bs-white); border-radius: 50%; line-height: 65px; position: absolute; left: 54px !important; top: 130% !important; z-index: 99; } .services-slider.swiper-button-next { border-radius: 50%; line-height: 65px; width: 65px !important; height: 65px !important; background-color: var(--bs-white); position: absolute; right: 54px !important; top: 130% !important; } .swiper-button-next::after { display: none; } .swiper-button-prev::after { display: none; } .services-slider.swiper-button-prev:hover, .services-slider.swiper-button-next:hover { background-color: var(--bs-grey); } /*------------ our-purpose section ------------- */ .our-purpose { width: 100%; height: 712px; background-image: url("../images/purpose-bg.webp"); background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: 22rem !important; position: relative; display: flex; align-items: center; } .our-purpose .purpose-content { position: relative; z-index: 1; } /* .purpose-content p { line-height: 42px; } */ .our-services .our-value-info { margin-top: 5rem; } .our-value-info p { line-height: 38px; } .our-purpose .purpose-img { /* opacity: 0.5; */ z-index: 1; position: relative; display: flex; justify-content: end; } .purpose-img img { width: 100%; height: auto; } .value-des-left { background-image: url("../images/left-round.webp"); background-repeat: no-repeat; background-position: center; width: auto; height: 250px; position: relative; /* margin:1rem 0rem; */ /* z-index: 1; */ } .value-des-left .value-content { position: absolute; /* z-index: 2; */ width: 100%; } .value-des-left .value-icons { width: 100%; height: auto; position: relative; } .value-des-left .icon { width: 175px; height: 175px; background-color: var(--primary-color); border-radius: 50%; position: absolute; left: 110px; top: 37px; box-shadow: 1px 1px 1px 16px var(--bg-color); display: flex; justify-content: center; align-items: center; } .value-des-left .icon-content { /* position: absolute; */ width: auto; height: 230px; display: flex; align-items: center; } .value-des-left .our-value-info { margin-bottom: 5rem; } .value-des-right { background-image: url("../images/right-round.webp"); background-repeat: no-repeat; background-position: center; width: auto; height: 250px; position: relative; /* margin:1rem 0rem; */ /* z-index: 1; */ } .value-des-right .value-content { position: absolute; /* z-index: 2; */ width: 100%; } .value-des-right .value-icons { width: 100%; height: auto; position: relative; } .value-des-right .icon { width: 175px; height: 175px; background-color: var(--primary-color); border-radius: 50%; position: absolute; right: 115px; top: 37px; box-shadow: 1px 1px 1px 15px var(--bg-color); display: flex; justify-content: center; align-items: center; } .value-des-right .icon-content { /* position: absolute; */ width: auto; height: 230px; display: flex; align-items: center; text-align: end; } .value-des-right .our-value-info { margin-bottom: 5rem; } .formula { width: auto; height: 100%; background-image: url("../images/formula.jpg"); background-position: left; background-repeat: no-repeat; background-size: contain; } .fromula-info { padding-top: 3rem; } .formula-title { width: 100%; /* display: flex; justify-content: center; */ } .btn-with-icon { border-radius: 1px; background-color: var(--primary-color); color: var(--bs-white); text-decoration: none; font-family: "DM Sans 24pt"; font-size: 17px; width: 300px; font-weight: 700; display: inline-flex; justify-content: center; transition: all 0.3s ease-in; align-items: center; letter-spacing: 1.92px; line-height: 50px; position: relative; } .btn-with-icon::after { content: url("../images/svg/left-arrow-icon.svg"); display: inline-block; margin-left: 15px; vertical-align: middle; transition: all 2 ease-in; transform-origin: center; opacity: 1; margin-top: 4px; } .btn-with-icon:hover { background-color: var(--bs-white); color: var(--primary-color); } .btn-with-icon:hover::after { content: url("../images/svg/Hover_Arrow.svg"); /* transform: scaleX(1.1); */ transform-origin: left; opacity: 1; animation: redArrow 0.7s ease-in; margin-top: 4px; } @keyframes redArrow { 0% { opacity: 0; width: 0; /* margin-left: 0; */ /* transform: scaleX(0); */ } 50% { width: 20%; opacity: 0; } 60% { width: 20%; opacity: 0; } 100% { width: 20%; opacity: 1; /* margin-left: 30px; */ /* transform: scaleX(1); */ } } .btn-with-icon::before { content: url("../images/svg/left-arrow-icon.svg"); position: absolute; right: 30px; opacity: 0; transition: opacity 0.7s ease; } .btn-with-icon:hover::before { opacity: 0; } .btn-wrappers { margin-top: auto; } .btn-with-icon-contact { border-radius: 1px; background-color: var(--primary-color); color: var(--bs-white); text-decoration: none; font-family: "DM Sans 24pt"; font-size: 17px; width: 250px; font-weight: 700; display: inline-flex; justify-content: center; align-items: center; transition: background-color 1s ease, color 0.3s ease, font-size 0.7s ease; letter-spacing: 1.92px; line-height: 50px; position: relative; } .btn-with-icon-contact::after { content: url("../images/svg/left-arrow-icon.svg"); display: inline-block; margin-left: 15px; vertical-align: middle; transition: transform 0.7s ease, opacity 0.7s ease; transform-origin: center; opacity: 1; margin-top: 4px; } .btn-with-icon-contact:hover { background-color: var(--bs-white); color: var(--primary-color); } .btn-with-icon-contact:hover::after { content: url("../images/svg/Hover_Arrow.svg"); transform: scaleX(1.1); opacity: 1; margin-top: 4px; } .btn-with-icon-contact::before { content: url("../images/svg/left-arrow-icon.svg"); position: absolute; right: 30px; opacity: 0; transition: opacity 0.7s ease; } .btn-with-icon-contact:hover::before { opacity: 0; } .title-3 { font-size: 2rem; font-family: "poppins"; font-weight: 600; color: var(--bs-white); line-height: 57px; letter-spacing: 0.2px; } .formula-content li { position: relative; /* padding-left: 20px; */ border-left: 2px solid var(--primary-color); } .formula-content li p { margin-bottom: 0; text-align: start; } .custom-list { list-style: none; } .dot { width: 15px; height: 15px; background-color: var(--bs-white); border-radius: 50%; position: absolute; left: -8px; } .dot:hover, .contemt-wrapper:hover+.dot { background-color: var(--primary-color); box-shadow: 0px 0px 8px 1px var(--primary-color); } .why-hyvikk-info .container { padding-left: 0px; margin-left: 0; } .why-hyvikk-info .row { padding-left: 0px; } .why-hyvikk-info .col-7 { padding-right: 0; } .why-img { background-image: url("../images/why-hyvikk.webp"); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 398px; } .why-list { width: auto; height: 100%; /* display: flex; */ align-items: center; } .why-list-container { padding-left: 100px; } .why-list-item { padding-left: 4rem; } .why-list-item .lists { display: flex; align-items: center; } .bg-opacity.img-hvr { position: relative; height: 355px; overflow: hidden; width: 355px; display: flex; justify-content: center; flex-direction: column; } .bg-opacity .image-container { position: relative; overflow: hidden; } .bg-opacity .image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180.03deg, rgba(0, 0, 0, 0.24) 0.02%, rgba(0, 0, 0, 0.74) 55.14%, #000000 99.94%); z-index: 2; opacity: 1; transition: background 0.6s ease, opacity 0.6s ease; } .bg-opacity.img-hvr:hover .image-container::before { background: linear-gradient(180.03deg, rgba(239, 52, 52, 0) 0.02%, rgba(239, 52, 52, 0.48) 39.57%, #eb3737 99.94%); opacity: 1; width: 100%; height: 355px; max-height: 100%; } .bg-opacity.img-hvr img { max-width: 100%; height: 100%; position: relative; z-index: 0; transition: opacity 0.5s ease; } .bg-opacity.img-hvr .text-overlay { position: absolute; bottom: 0em; left: 0; width: 100%; } .bg-opacity.img-hvr .text .title-3 { position: absolute; bottom: 1em; /* text-align: center; */ z-index: 3; color: white; transition: bottom 1s ease, transform 1s ease; min-height: 50px; transform: translateY(0); padding: 1.5rem 1.5rem 0rem 1.2rem; } .bg-opacity.img-hvr .text-overlay .hover-text { opacity: 0; height: 0; transition: opacity 0.9s ease, height 1s ease; } .bg-opacity.img-hvr:hover .text-overlay .hover-text { opacity: 1; height: auto; position: absolute; bottom: 2.2em; z-index: 2; padding: 0px 20px; transition: opacity 0.6s ease, height 0.6s ease; } .bg-opacity.img-hvr:hover .text .title-3 { bottom: 1em; transform: translateY(-1.6em); } .bg-opacity.img-hvr .text .title-3, .bg-opacity.img-hvr .image-container::before { transition: all 0.6s ease; } .bg-opacity .hover-text { font-family: "poppins"; font-size: 16px; font-weight: 500; line-height: 24px; text-align: justify; color: var(--bs-grey); position: relative; z-index: 1; } .hide { display: none !important; } .product-img { width: 100%; height: auto; } .product-img img { width: 100%; height: auto; position: relative; z-index: 0; } .without-bg-opacity.img-hvr { position: relative; height: 355px; /* overflow: hidden; */ width: 557px; display: flex; justify-content: center; } .without-bg-opacity .image-container { position: relative; overflow: hidden; } .without-bg-opacity .image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 355px; text-align: center; /* background: linear-gradient(180.03deg, rgba(0, 0, 0, 0.24) 0.02%, rgba(0, 0, 0, 0.74) 55.14%, #000000 99.94%); */ z-index: 2; opacity: 1; transition: opacity 0.5s ease; } .without-bg-opacity.fleet.img-hvr:hover .image-container::before { background-color: #37e162; opacity: 1; width: 100%; height: 355px; } .without-bg-opacity.jr.img-hvr:hover .image-container::before { background-color: #85b737; opacity: 1; width: 100%; height: 355px; } .without-bg-opacity.fleet-flow.img-hvr:hover .image-container::before { background-color: #f7bf04; opacity: 1; width: 100%; height: 355px; } .without-bg-opacity.fleet-trans.img-hvr:hover .image-container::before { background-color: #5d0084; opacity: 1; width: 100%; height: 355px; } .without-bg-opacity.eon.img-hvr:hover .image-container::before { background-color: #252364; opacity: 1; width: 100%; height: 355px; } .without-bg-opacity.academik.img-hvr:hover .image-container::before { background-color: #aa00ff; opacity: 1; width: 100%; height: 355px; } .without-bg-opacity.academik.img-hvr:hover .image-container::before { background-color: #002f4c; opacity: 1; width: 100%; height: 355px; } .without-bg-opacity.fish-pond.img-hvr:hover .image-container::before { background-color: #002f4c; opacity: 1; width: 100%; height: 355px; } .without-bg-opacity.architect.img-hvr:hover .image-container::before { background-color: #7ac943; opacity: 1; width: 100%; height: 355px; } .without-bg-opacity.fleet-branch.img-hvr:hover .image-container::before { background-color: #ff5000; opacity: 1; width: 100%; height: 355px; } .without-bg-opacity.equicare.img-hvr:hover .image-container::before { background-color: #440754; opacity: 1; width: 100%; height: 355px; } .without-bg-opacity.archile.img-hvr:hover .image-container::before { background-color: #1a1a1a; opacity: 1; width: 100%; height: 355px; } .without-bg-opacity.img-hvr img { max-width: 100%; height: auto; position: relative; z-index: 0; transition: opacity 0.5s ease; } .without-bg-opacity.img-hvr .text { position: absolute; bottom: 2em; left: 0; width: 100%; z-index: 3; color: white; transition: bottom 0.6s ease; min-height: 50px; transform: translateY(0); } .without-bg-opacity.img-hvr .text .hover-text-show { opacity: 0; } .without-bg-opacity.img-hvr:hover .text .hover-text-show { opacity: 1; height: auto; text-align: center; } .without-bg-opacity.img-hvr:hover .text { bottom: 18%; transform: translateY(2em); } .without-bg-opacity .hover-text-show { font-family: "poppins"; font-size: 16px; font-weight: 500; line-height: 24px; text-align: justify; } .title-4 { font-size: 2.25rem; font-family: "poppins"; font-weight: 500; color: var(--bs-white); line-height: 40px; letter-spacing: 0.2px; } .title-1 { font-size: 1.375rem; font-family: "poppins"; font-weight: 300; color: var(--bs-white); line-height: 42px; text-shadow: 0px 0px 1px #000040; } .product-btn { display: flex; justify-content: center; } .recommendations .swiper-pagination { max-width: 497px; left: 0; right: 0; margin: 0 auto; /* display: flex; */ position: absolute; list-style: none; text-align: center; padding: 0; display: flex; bottom: -55px; } .recommendations-slider { height: auto; } .recommendations-slide { height: 100%; width: 100%; } .recommendations .swiper-pagination-bullet { flex: 1 1 auto; max-width: 100%; height: 3px; width: 100%; background-color: var(--bs-white); border-radius: unset; opacity: unset; } /* Active bullet */ .recommendations .swiper-pagination-bullet-active { background-color: var(--primary-color); } .recommendations .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0px; } .recommendations-client-content { width: auto; height: 100%; background-color: var(--secondary-color); display: flex; flex-direction: column; justify-content: space-evenly; } .title-5 { font-size: 1.625rem; font-family: "poppins"; font-weight: 500; color: var(--bs-white); line-height: 2.25rem; } .divider { border: 3px solid transparent; border-image: linear-gradient(270.68deg, #e21016 0.58%, #ee2b2b 95.21%); border-image-slice: 1; width: 25px !important; display: block !important; line-height: 1.6em !important; } .recommendations-client-name .client-info { font-weight: 500 !important; font-size: 16px !important; } .recommendations-client-name .title-5 { transition: color 0.3s ease; } .recommendations-client-playbtn { position: relative; bottom: 0px; } .recommendations-client-playbtn a { display: flex; align-items: center; text-decoration: none; } .play-btn { width: 42px; height: 42px; background-color: var(--bs-white); border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: background 0.6s ease-out; } .play-btn .default-play-btn { display: flex; width: 20px; height: 20px; } .play-btn .hover-play-btn { display: none; } .recommendations-client-playbtn a:hover .play-btn .default-play-btn { display: none; } .recommendations-client-playbtn a:hover .play-btn .hover-play-btn { display: flex; width: 20px; height: 20px; } .recommendations-client-playbtn a:hover .play-btn { background: var(--primary-color); } .recommendations-client-playbtn a:hover .watch-video { letter-spacing: 1px; } .recommendations-client-playbtn a:hover .title-5 { color: var(--primary-color) !important; } .watch-video { font-family: "DM Sans 24pt"; font-weight: 500 !important; font-size: 16px !important; color: var(--primary-color); margin-left: 10px; } .get-in-touch { width: 100%; height: 550px; background-image: url("../images/mask-bg.webp"); background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; } .get-in-touch.work { width: 100%; height: 520px; background-image: url("../images/get-touch.webp"); background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; } .get-in-touch-content { text-align: center; /* padding: 95px 0px; */ } .heading-1 { font-family: "poppins"; font-size: 46px !important; line-height: 60px; font-weight: 600; color: var(--primary-color); } .get-touch-btn { border-radius: 1px; background-color: var(--primary-color); color: var(--bs-white); text-decoration: none; font-family: "DM Sans 24pt"; font-size: 1.125rem; width: 413px; height: 74px; font-weight: 700; display: flex; justify-content: center; align-items: center; transition: background-color 0.3s ease, color 0.3s ease, font-size 0.3s ease; letter-spacing: 1.92px; border: none; } .get-touch-btn:hover { background-color: var(--bs-white); color: var(--primary-color); font-size: 20px; transition: background-color 0.3s ease, color 0.3s ease, font-size 0.3s ease; letter-spacing: 3.84px; } .updated-post-item { width: 362px; height: auto; position: relative; } .updated-post-item img { width: 100%; height: auto; } .update-date-content { position: relative; top: -30px; background-color: #141418; /* background-color: var(--bg-color); */ width: 80%; margin: 0px auto; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .post-description { font-family: "Poppins"; font-weight: 400; font-size: 11px; line-height: 20px; color: var(--bs-grey); text-align: justify; transition: max-height 0.5s ease; margin-top: 5px; } .post-description.expanded { max-height: 100em; } .short-text { display: inline; } .full-text { display: none; } .short-text, .full-text { transition: opacity 0.5s ease; } .toggle-content { color: var(--bs-grey); cursor: none; text-decoration: none; font-weight: bold; } .toggle-content:hover { text-decoration: none; } .update-date { background-color: var(--primary-color); height: 20px; display: flex; align-items: center; justify-content: center; padding: 0 5px; position: relative; top: -10px; } .update-date .date { font-family: "DM Sans 36pt"; font-weight: bold !important; font-size: 10px !important; line-height: 1.625rem; color: var(--bs-white); padding: 0px 10px; } .update-content { padding: 0px 17px; } .post-title { font-family: "Poppins"; font-weight: 600; font-size: 17px; line-height: 1.625rem; color: var(--bs-white); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .career-sec { background-color: #141418; padding: 80px 0px; } .contact-link { font-family: "Poppins"; font-weight: 400; font-size: 19px; line-height: 40px; color: var(--bs-white); } .contact-link:hover, .contact-link:focus, .contact-link:active { color: var(--primary-font-color); } .career-img { width: auto; height: 100%; } .career-img img { width: 100%; height: auto; object-fit: cover; } .question-img { width: auto; height: 100%; display: flex; } .question-img img { width: 100%; height: auto; object-fit: cover; } footer { margin-top: 100px; } .footer { background-color: var(--secondary-color); padding: 50px 0px 0px 0px; } .platform-img { display: flex; justify-content: center; } .widgets-links h4 { font-family: "DM Sans 24pt"; font-weight: 500; font-size: 1.375rem; line-height: 40px; color: var(--bs-white); } .footer-link-group ul { padding-left: 0px; } .footer-link-group ul li { list-style-type: none; } .footer-link-group ul li a { color: var(--bs-grey); text-decoration: none; font-family: "DM Sans"; font-weight: normal; font-size: 14px; line-height: 35px; } .footer-link-group ul li a:hover { text-decoration: underline; } .footer-link-services ul { display: flex; padding-left: 0px; } .footer-link-services ul li { list-style-type: none; } .footer-link-services ul li:first-child a { padding-left: 0; padding-right: 30px; } .footer-link-services ul li:last-child a { padding-right: 0; padding-left: 30px; border-right: unset; } .footer-link-services ul li a { color: var(--bs-grey); text-decoration: none; font-family: "DM Sans"; font-weight: normal; font-size: 14px; line-height: 35px; border-right: 1px solid var(--bs-grey); padding-left: 30px; padding-right: 30px; } .footer-link-services ul li a:hover { text-decoration: underline; } .copyright { padding: 10px 0px; display: flex; justify-content: space-between; } .copyright-img img { width: 100%; height: auto; } .social-media-footer { display: flex; align-items: center; } .social-media-footer ul li { list-style: none; padding-right: 1.375rem; } .social-media-footer ul li:last-child { padding-right: 0; } .social-media-footer ul { display: flex; margin-bottom: 0px; } .social-media-icon { background-color: var(--bs-white); width: 22px; height: 22px; border-radius: 50%; line-height: 1.375rem; display: flex; align-items: center; justify-content: center; } .social-media-icon:hover, .social-media-icon:active, .social-media-icon:focus { background-color: var(--primary-color); } .copyright-reserve { color: var(--bs-grey); text-decoration: none; font-family: "DM Sans"; font-weight: 500; font-size: 13px; line-height: 50px; margin-bottom: 0px; } .copyright-reserve a { color: var(--bs-grey); text-decoration: none; } /*------------------- about page -------------------*/ .hero-caption { font-family: "poppins"; font-weight: 300; font-size: 2rem; line-height: 46px; margin-bottom: 0px; letter-spacing: 5.3px; } .hero-image img { width: 100%; height: auto; } .professional-btn { border-radius: 1px; background-color: var(--primary-color); color: var(--bs-white); text-decoration: none; font-family: "DM Sans", sans-serif; font-size: 1.125rem; font-weight: 700; display: inline-flex; justify-content: center; align-items: center; padding: 12px 85px; transition: background-color 0.3s ease, color 0.3s ease, font-size 0.3s ease; letter-spacing: 1.92px; text-transform: uppercase; white-space: nowrap; /* Prevents the text from wrapping */ box-sizing: border-box; /* Ensure padding and border are included in the width */ height: 69px; max-width: 423px; } .professional-btn:hover { background-color: var(--bs-white); color: var(--primary-color); font-size: 20px; letter-spacing: 3.84px; } .mission-vision-tabs.nav.nav-tabs { border: unset; } .mission-vision-tabs.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link { color: var(--bs-white); font-family: "DM Sans 24pt"; font-weight: 500; font-size: 2rem; line-height: 46px; margin-bottom: 0px; letter-spacing: 3.28px; } .mission-vision-tabs.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { background-color: unset; color: var(--bs-white); border: unset; border-bottom: 3px solid var(--primary-color); } .mission-vision-tabs.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { border: unset; border-bottom: 3px solid var(--primary-color); outline: none; } .mission-vision-tabs.nav-tabs .nav-link:focus-visible { outline: none; } .navtabs { display: flex; position: relative; } .navtab { margin: 0 30px; padding: 10px 20px; cursor: none; color: #333; transition: color 0.3s; color: #fff; text-transform: uppercase; font-family: "DM Sans 24pt"; font-weight: 500; font-size: 25px; line-height: 40px; letter-spacing: 0.2px; } .navtab.first { margin-left: 0px !important; } .navtab:hover { color: #fff; } .underline { position: absolute; bottom: 0; height: 2px; background: var(--primary-color); transition: left 0.3s ease, width 0.3s ease; } .content.active { display: block; } .tab-mission-title { font-family: "poppins"; font-weight: 600; font-size: 2rem; line-height: 57px; letter-spacing: 0.2px; color: var(--primary-color); } .tab-vision-title { font-family: "poppins"; font-weight: 600; font-size: 2rem; line-height: 57px; letter-spacing: 0.2px; color: var(--primary-color); } .mission-tab-content { font-family: "poppins"; font-weight: 500; font-size: 16px; line-height: 1.625rem; color: var(--bs-grey); text-align: justify; } .tab-pane img { width: 100%; height: auto; } #sideTab .nav-item .nav-link { font-family: "Poppins"; font-weight: 500; font-size: 24px; line-height: 40px; color: var(--bs-grey); position: relative; padding-left: 20px; } #sideTab .nav-item .nav-link::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 0; width: 4px; background: linear-gradient(270.68deg, #e21016 0.58%, #ee2b2b 95.21%); height: 26px; transform: scaleY(0); transition: transform 0.3s ease; } #sideTab .nav-item .nav-link:focus::before, #sideTab .nav-item .nav-link:active::before, #sideTab .nav-item .nav-link.active::before { transform: scaleY(1); } #sideTab .nav-item .nav-link:focus, #sideTab .nav-item .nav-link:active, #sideTab .nav-item .nav-link.active { color: var(--bs-white); } .our-core-value-title { position: relative; text-align: center; } .our-core-value { padding: 90px 0px; background-color: var(--secondary-color); } .our-core-value-title { display: flex; align-items: center; justify-content: center; position: relative; } .our-core-value-title .bold-title { position: relative; z-index: 9; color: var(--primary-color); } .quote-before img, .quote-after img { width: 100%; height: auto; opacity: 0.5; } .quote-before { position: absolute; left: 18%; top: -21px; } .quote-after { position: absolute; right: 18%; top: -21px; } .our-core-value-swiper { width: 100%; height: 300px; margin: 20px auto; } .our-core-value-swiper .swiper-slide { text-align: center; font-size: 1.125rem; background: #ddd; display: flex; justify-content: center; align-items: center; } .append-buttons { text-align: center; margin-top: 20px; } .append-buttons a { font-family: "DM Sans 24pt"; font-weight: 500; font-size: 25px; color: var(--bs-white); text-decoration: none; margin-right: 100px; } .append-buttons a:last-child { margin-right: 0px; } .value-better.mySwiper { position: relative !important; padding: 0px !important; } .value-make-better-content { position: relative; height: 100%; margin-top: 5rem; } .fraction-pagination.swiper-pagination { position: absolute !important; text-align: start; transition: 0.3s opacity; transform: translate3d(0, 0, 0); z-index: 10; top: 0 !important; margin-bottom: 55px !important; font-family: "Poppins"; font-weight: 500; font-size: 16px; line-height: 1.625rem; color: var(--primary-color); } .value-better.swiper-container { width: 100%; height: 100%; position: relative; overflow: hidden; } .value-better .swiper-slide { display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 1.125rem; width: 100%; } .value-better .swiper-slide .content, .swiper-slide img { width: 100%; } .value-better .content { padding: 20px 0px; position: relative; z-index: 1; } .value-better .content h2 { margin-bottom: 10px; font-family: "Poppins"; font-weight: 500; font-size: 42px; line-height: 50px; color: var(--bs-white); } .value-better .swiper-pagination { position: absolute; top: 10px; left: 0; text-align: left; color: #ff0000; z-index: 0; padding-left: 10px; } .value-better .swiper-button-next, .value-better .swiper-button-prev { color: #ff0000; position: absolute; bottom: 10px; z-index: 1; } .value-better .swiper-button-prev { left: 10px; } .value-better .swiper-button-next { right: 10px; } .value-better .content-wrapper { display: flex; flex-direction: column; justify-content: center; padding: 20px 0px; position: relative; height: 100%; } .pagination-and-buttons { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .pagination-and-buttons .swiper-button-prev { top: 95% !important; left: 0 !important; width: 35px !important; height: 35px !important; background-color: var(--bs-white); border-radius: 50%; line-height: 35px !important; } .pagination-and-buttons .swiper-button-prev:hover { background-color: var(--bs-grey); } .pagination-and-buttons .swiper-button-next { top: 95% !important; left: 50px !important; right: unset !important; width: 35px !important; height: 35px !important; background-color: var(--bs-white); border-radius: 50%; line-height: 35px !important; } .pagination-and-buttons .swiper-button-next:hover { background-color: var(--bs-grey); } .pagination-and-buttons .swiper-button-next img, .pagination-and-buttons .swiper-button-prev img { width: auto; } .value-better-thumb.mySwiper { overflow: hidden; margin: 60px 0px 90px 0px; } .value-better-thumb .swiper-wrapper .swiper-slide { cursor: none; pointer-events: auto; width: auto !important; margin-right: 100px !important; } .value-better-thumb .swiper-wrapper .swiper-slide:last-child { margin-right: 0px !important; } .value-better-thumb .swiper-wrapper .swiper-slide a { font-family: "DM Sans 24pt"; font-size: 25px; font-weight: 500; text-transform: uppercase; padding: 0px 15px; text-decoration: unset; color: var(--bs-white); } .value-better-thumb .swiper-wrapper .swiper-slide a { border-bottom: 3px solid transparent; transition: border-bottom 0.3s; } .value-better-thumb .swiper-wrapper .swiper-slide a:hover, .value-better-thumb .swiper-wrapper .swiper-slide a:active, .value-better-thumb .swiper-wrapper .swiper-slide a:focus { border-bottom: 3px solid var(--primary-color); } .value-better-thumb .swiper-wrapper .swiper-slide.active a { border-bottom: 3px solid var(--primary-color); } .value-better.swiper-pagination { font-family: "poppins"; font-size: 16px; font-weight: 500; line-height: 1.625rem; color: var(--primary-color); } .owners { padding-bottom: 50px; } .team-member { text-align: center; padding: 0px 40px; } .team-member figure { margin-bottom: 2rem; } .team-member h4 { font-family: "poppins"; font-size: 1.625rem; font-weight: 500; /* line-height: 36px; */ color: var(--bs-white); margin-bottom: 0px; } .team-member p { color: #898282; } .employees { background-color: var(--secondary-color); padding: 70px 0px; } .employer { text-align: center; padding: 0px 20px; } .employer figure { padding: 0px 40px; margin-bottom: 2rem; } .employer h4 { font-family: "poppins"; font-size: 24px; font-weight: 400; /* line-height: 32px; */ color: var(--bs-white); margin-bottom: 0px; } .employer p { font-size: 16px; font-weight: 300; color: #898282; } .honor-img { width: 100%; height: auto; background-color: var(--bs-white); display: flex; justify-content: center; align-items: center; padding: 35px 64px; } .honor-img img { width: 100%; height: auto; } .honor-details { display: flex; /* align-items: center; */ flex-direction: column; justify-content: center; width: auto; height: 100%; margin: auto 0px; padding-left: 20px; } .honor-details h3 { font-size: 26px; font-family: "DM Sans"; font-weight: 500; } .honor-details span { font-size: 16px; font-family: "poppins"; font-weight: 500; } .client-testimonials-sec { position: relative; } .client-testimonials { display: flex; justify-content: center; height: 100%; } .testimonials.swiper.mySwipe { position: relative; } .testimonials .swiper-wrapper .swiper-slide { width: 100% !important; } .testimonial.swiper-button-next { top: 55% !important; transform: translateY(-50%); background: #fff; /* right: 32%; */ right: 32.4%; width: 45px; height: 45px; line-height: 45px; border-radius: 50%; } .testimonial.swiper-button-prev { top: 65% !important; left: 64.5%; transform: translateY(-50%); background: #fff; right: 33%; width: 45px; height: 45px; line-height: 45px; border-radius: 50%; } .testimonial.swiper-button-prev { z-index: 99; } .testimonial.swiper-button-prev:hover, .testimonial.swiper-button-prev:active, .testimonial.swiper-button-next:hover, .testimonial.swiper-button-next:active { background-color: var(--bs-grey); } .client-testimonials .row { height: 100%; } .client-testimonials .col-5 { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; } .testimonial-details { display: flex; flex-direction: column; justify-content: center; height: 100%; } .client-testimonials .col-7 { display: flex; align-items: center; height: 100%; } /* .client-testimonials img { max-height: 100%; width: auto; } */ .testimonial-content { background: #000; border: 1px solid #898282; position: absolute; width: 680px; left: 7%; padding: 45px 65px; top: 28%; text-align: justify; filter: drop-shadow(0px 0px 35px #28282bbf); } .testimonial-img { min-width: 70px; height: 70px; border-radius: 50%; overflow: hidden; } .testimonial-img img { width: 100%; height: 100%; object-fit: cover; } .testimonial-img-name { display: flex; width: 100%; height: auto; align-items: center; } .testimonial-name { display: flex; flex-direction: column; margin-left: 21px; } .testi-name { font-family: "DM Sans 36pt" !important; font-size: 23px !important; font-weight: 500 !important; line-height: 2.25rem !important; color: var(--primary-color) !important; margin-bottom: 0; line-height: unset; } .testi-role { font-family: "DM Sans 36pt" !important; font-size: 15px !important; font-weight: 400 !important; color: var(--bs-grey) !important; margin-bottom: 0; line-height: unset; } .testimonial-content .testi-content { font-family: "poppins"; font-size: 20px !important; font-weight: 500 !important; color: var(--bs-grey); } .testimonial-bg { width: 100%; height: auto; } .testimonial-heading { /* position: absolute; left: -15px; */ } .company-history { background-color: var(--secondary-color); padding: 80px; } .history-slider { position: relative; display: flex; } .history-slider .swiper-container { position: relative; width: 75%; height: auto; overflow: hidden; } .history-slider .swiper-slide { display: flex; align-items: center; justify-content: center; height: 100%; width: 350px; background: var(--bg-color); transition: all 200ms linear; transform: scale(0.8); padding: 30px; } .history-slider .swiper-slide-active { transform: scale(1); background: var(--bs-white); color: var(--secondary-color); box-shadow: 0px 8px 26px 3px #38383d99; } .years-container { text-align: center; margin-bottom: 20px; display: flex; flex-direction: column; align-items: end; width: 25%; position: absolute; right: 0; top: -70px; } .years-container button { font-family: "poppins"; font-size: 16px !important; font-weight: 500 !important; margin: 0 10px; padding: 10px 40px; background: transparent; color: var(--primary-color); border: none; cursor: none; transition: 200ms; } .years-container button.active { background: linear-gradient(270.68deg, #e21016 0.58%, #ee2b2b 95.21%); box-shadow: 3px 6px 11px 0px #00000040; color: var(--bs-white); } .history-description { text-align: center; } .history-description .title-4 { color: #fff; } .history-slider .swiper-slide-active .history-description .title-4 { color: #000; } .history-description .title-5 { color: var(--primary-color); } .history-description h4 { font-size: 16px !important; font-family: "poppins"; font-weight: 300; color: #c1c1c1; line-height: 1.625rem; } .history-slider .swiper-slide-active .history-description h4 { color: #141418; } .work-colture-bg { width: 100%; height: 430px !important; background-image: url("../images/environment-bg.webp"); background-position: center; background-repeat: no-repeat; background-size: cover; overflow-x: hidden; } .work-culture { /* padding-right: 350px; */ position: absolute; bottom: 0; right: 0; /* left: 125px; */ z-index: 99; width: 95%; margin-left: auto; } .work-culture.swiper { height: auto !important; /* padding-top: 200px; */ } .work-culture-description { width: 100%; max-width: 266px; height: auto; } .work-culture-description img { width: auto; height: auto; } .work-colture-bg { position: relative; height: 100%; } .work-culture .swiper-wrapper { height: auto !important; } .work-culture .swiper-wrapper .swiper-slide { /* width: auto !important; */ height: auto !important; /* margin-right: 40px !important; */ } .work-culture .swiper-slide { text-align: start; font-size: 1.125rem; background: #fff; display: flex; justify-content: center; /* align-items: center; */ padding: 20px 35px; box-sizing: border-box; } .work-culture-img { margin-bottom: 2rem; width: auto; height: 60px; display: flex; align-items: center; } .work-culture-description p { color: #141418; line-height: 1.625rem; font-size: 16px; } .environment-sec { position: relative; overflow: hidden; height: auto; z-index: 0; padding-bottom: 200px; } .our-work-link { transition: all 0.25s; position: relative; border: 1px solid #fff; padding: 45px 65px; width: auto; height: 100%; } /* .our-work-link { transition: all 0.25s; } */ .link-icon { display: none; } .our-work-link .bold-title { color: var(--primary-color); } .our-work-careers a { text-decoration: none; } .our-work-careers a:hover .our-work-link { border: 1px solid var(--primary-color); /* transform: translateX(0px); */ } .our-work-icon img.default-img, .our-work-icon img.hover-img { width: 80px; height: 80px; transition: all 0.25s; } .our-work-icon img.hover-img { display: none; } .slide-in-icon { position: absolute; left: 0px; top: 5%; transform: translateX(-10%); transition: transform 0.9s ease, opacity 0.9s ease; opacity: 0; } .slide-in-icon img { width: auto; height: 100%; } .our-work-careers a:hover .our-work-icon img.default-img { display: none; } .our-work-careers a:hover .our-work-icon img.hover-img { display: inline; } .our-work-careers a .our-work-link .title-4 { color: var(--primary-color); } .our-work-careers a:hover .our-work-link .title-4 { color: #fff; transition: all 0.25s; } .link-icon { display: none; } .our-work-careers a:hover .link-icon { display: flex; position: absolute; right: 26px !important; top: 38px !important; transform: translate(0, -50%); } .our-work-careers a:hover .slide-in-icon { transform: translateX(0); opacity: 1; } .our-work-careers .container .row .position-relative { padding: 0rem 2rem; } .our-work-link p { margin-bottom: 0px; } /* ------------------------------------services page css ----------------------------- */ .our-services-area { background-color: var(--secondary-color); padding: 80px 0px 0px 0px; } .container.no-gutters, .no-gutters { padding-right: 0; margin-right: 0; } .no-gutters .first { padding-right: 0; padding-left: 0; } .sub-services { position: relative; width: 100%; height: 502px; } .img-fluid-services { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; object-fit: cover; } .first .sub-services .gradient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90.15deg, rgba(20, 20, 24, 0) 0.13%, #141418 99.86%); z-index: 2; pointer-events: none; transition: opacity 0.5s ease; opacity: 1; } .sec.service-right-area .sub-services .gradient-overlay { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(270deg, rgba(20, 20, 24, 0) 13%, #141418 99%); z-index: 2; pointer-events: none; transition: opacity 0.5s ease; opacity: 1; } .hover-content .sub-services:hover .gradient-overlay { opacity: 0; } .hover-content .button-container { position: absolute; top: 0; left: -100px; width: 100px; height: 100%; background-color: black; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; transition: opacity 0.8s ease; opacity: 0; } .hover-content .button-container .btn { margin: 10px 0; padding: 10px; color: white; background: none; border: none; cursor: none; } .hover-content .sub-services:hover .button-container { left: 0; opacity: 1; } .sub-services-details { display: flex; align-items: center; height: 100%; padding: 0px 100px 0px 100px; } .second-services.sub-services-details { padding: 0px 50px 0px 100px; } .sub-service-title { font-size: 2.25rem; font-family: "poppins"; font-weight: 600; color: var(--primary-color); line-height: 40px; letter-spacing: 0.2px; } .sub-services-para { font-size: 16px; font-family: "poppins"; font-weight: 500; line-height: 26px; /* text-align: center; */ color: var(--bs-white); } .sub-services-para-service { font-size: 16px; font-family: "poppins"; font-weight: 300; line-height: 26px; text-align: justify; /* color: var(--bs-light-grey); */ } .is-topspace { margin-top: 100px; } .service-right-area { padding-right: 0px; } .breadcrumb { position: relative; /* right:-127px; */ margin-bottom: 0px; display: flex; justify-content: end; } .hover-content-right.service-right-area .gradient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(275deg, rgba(0, 0, 0, 0) 25%, #141418 100%) !important; z-index: 2; pointer-events: none; transition: opacity 0.5s ease; opacity: 1; } .hover-content-right.service-right-area:hover .gradient-overlay { opacity: 0; } .hover-content-right .button-container { position: absolute; top: 0; right: 0px !important; width: 100px; height: 100%; background-color: black; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; transition: opacity 0.8s ease; opacity: 0; } .hover-content-right .button-container .btn { margin: 10px 0; padding: 10px; color: white; background: none; border: none; cursor: none; } .hover-content-right .sub-services:hover .button-container { right: 0 !important; opacity: 1; } .language-name { font-size: 22px; font-family: "poppins"; font-weight: 400; /* text-align: center; */ color: var(--bs-white); } .our-process { display: flex; justify-content: center; position: relative; } .our-process-steps { width: 648px; height: 648px; border-radius: 50%; display: flex; justify-content: center; padding: 106px; border: 2px solid var(--primary-color); } .our-process-steps-img { width: 433px; height: 433px; border-radius: 50%; background-color: var(--secondary-color); display: flex; justify-content: center; padding: 75px; } .our-process-steps-img img { border-radius: 50%; width: 100%; height: auto; object-fit: cover; } .our-purpose-steps-details { position: absolute; left: 0; width: 100%; top: 30px; } .step-number { display: flex; justify-content: center; height: 100%; align-items: center; position: absolute; top: 85px; } .process-steps { position: relative; } .step-number span { width: 25px; height: 25px; background-color: var(--bs-white); color: var(--bg-color); display: flex; justify-content: center; border-radius: 50%; } .steps-icon { display: flex; /* justify-content: center; */ position: absolute; top: 95px; right: 85px; } .steps-icon-img { background-color: var(--primary-color); display: flex; justify-content: center; width: 81px; height: 81px; border-radius: 50%; color: var(--bs-white); align-items: center; } .steps-icon-img img { width: 45px; height: 45px; } .process-steps-content { position: absolute; top: 50px; } .without-icon-title.sub-service-title { color: var(--bs-white) !important; } .without-icon-title.sub-services-para { color: var(--bs-grey) !important; font-size: 16px !important; font-weight: 300; text-align: justify; } .design-expertise-icon-content { text-align: center; } .design-expertise-icon { width: 190px; height: 190px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: var(--bs-white); margin: 0px auto; } .design-expertise-icon img { width: 90px; height: 90px; } .design-expertise-icon-content img.hover-img { width: 90px; height: 90px; display: none; transition: all 0.25s; } .design-expertise-icon-content img.default-img { width: 90px; height: 90px; transition: all 0.25s; } .design-expertise-icon-content:hover .design-expertise-icon { background-color: var(--secondary-color); transition: all 0.25s; } .design-expertise-icon-content:hover .title-5 { color: var(--primary-color); transition: all 0.25s; } .design-expertise-icon-content:hover .design-expertise-icon .default-img { display: none; } .design-expertise-icon-content:hover .design-expertise-icon .hover-img { display: inline; } .contact-info { width: 100%; height: 634px; /* background-color: #f0f0f0; */ background-image: url("../images/contact-bg.webp"); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 90px 0px; overflow: hidden; } .servics-tools { background-color: var(--bs-white); padding: 50px; width: auto; height: 100%; } .servies-tools-icon { display: flex; justify-content: center; } .services-tool-title .space-remove { padding-left: 0px !important; } .tools-title { color: var(--secondary-color); list-style: none; font-size: 26px; font-family: "poppins"; font-weight: 600; line-height: 2.5rem; display: flex; justify-content: center; } .services-links { text-align: center; list-style-type: none; } .services-links a { color: var(--secondary-color); list-style: none; font-size: 18px; font-family: "poppins"; font-weight: 400; line-height: 2.5rem; text-decoration: none; } .services-links { color: var(--secondary-color); list-style: none; font-size: 18px; font-family: "poppins"; font-weight: 400; line-height: 2.5rem; text-decoration: none; } .services-sublinks { color: var(--secondary-color); font-size: 14px; font-family: "poppins"; font-weight: 400; line-height: 2rem; } .about-services-slider { position: relative; } .about-services-slider .sliders { position: absolute; } .about-services-slider-detail .swiper-wrapper { height: auto !important; } .about-services-slider-detail .swiper-slide { width: 300px !important; height: auto; } .about-services-slider-detail .servics-tools { padding: 45px 65px; height: 100%; } .about-services-slider-detail .servics-tools .servies-tools-icon img { width: auto; } .small-size-downimg-content { height: 100%; } .graphics-services { width: 100%; height: 446px; background-image: url("../images/graphics.webp"); background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 5rem; } .subservices-description { position: relative; bottom: 90px; width: 100%; margin-bottom: -90px; } .center-col { position: relative; top: -50px; margin-top: -50px; } .subservice-title-content { width: 360px; height: 100%; padding: 80px 39px; background-color: var(--bs-white); } .subservice-title-content:hover { background-color: var(--primary-font-color); transition: all 0.25s; } /* .subservice-title-content .title-2{ font-weight: 600; line-height: 40px; } */ .subservice-title-content:hover .title-same { color: var(--bs-white); } .subservice-title-content .sub-services-para { text-align: center; } .horizontal-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 40px; } .horizontal-list li { white-space: nowrap; } .only-graphics.horizontal-list li { margin: 0 40px 0px 0px; } .link { text-decoration: none; color: var(--primary-color-2, #fff); text-align: center; font-family: "DM Sans"; font-size: 25px; font-style: normal; font-weight: 500; line-height: 40px; letter-spacing: 0.5px; text-transform: uppercase; } .our-process-img { position: relative; height: 250px; z-index: 0; width: 432px; overflow: hidden; } .our-process-img img { display: block; width: 100%; height: 100%; object-fit: cover; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(9, 9, 9, 0.75); overflow: hidden; } .overlay::before { content: ""; position: absolute; top: 50%; right: -100%; width: 410%; height: 410%; background: radial-gradient(circle, rgba(9, 9, 9, 0.2) 25%, rgba(0, 0, 0, 0.8) 100%); transform: translateY(-50%) translateX(-100%); transition: transform 1.5s cubic-bezier(0.7, 1, 0.5, 1), opacity 1.5s cubic-bezier(0.7, 1, 0.5, 1); border-radius: 50%; transform-origin: center left; opacity: 0; } .our-process-img:hover .overlay::before { transform: translateY(-50%) translateX(0%); opacity: 1; } .our-process-img-overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 20px; z-index: 1; } .our-process-img-overlay-text { position: relative; color: #fff; text-align: center; font-family: Poppins; font-size: 28px; font-style: normal; font-weight: 600; line-height: 40px; letter-spacing: 0.56px; text-transform: capitalize; z-index: 2; width: 70%; } /* .our-process-content-container > .row{ gap: 50px; } */ .space-mr-50 { margin-right: 50px; } .space-ml-50 { margin-left: 50px; } .process-lists { position: absolute; top: -15px; right: -50px; /* right: 30px; */ background-color: var(--primary-color); padding: 3px 29px; z-index: 3; } .even-id.process-lists { /* left: 40px; */ left: -50px; right: unset; } .process-lists span { color: #fff; text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 500; line-height: 26px; text-transform: capitalize; } .our-process-content p { text-align: justify; } .our-process-lists { height: 100%; width: auto; display: flex; align-items: center; } .our-engagement-slide-title { color: var(--bs-white); font-size: 24px; font-family: "poppins"; font-weight: 400; line-height: 2rem; margin-top: 10px; } .our-engagement.swiper { height: auto; } .our-engagement .swiper-slide { position: relative; display: flex; justify-content: center; /* align-items: center; */ } .our-engagement .swiper-slide img { max-width: 100%; height: auto; margin-bottom: 10px; } .our-engagement .swiper-slide { position: relative; width: 250px !important; } .our-engagement .swiper-slide .line { position: absolute; top: 38.5%; right: -75px; width: 90px; height: 1px; background-color: #c1c1c1; transform: translateY(-50%); z-index: -1; } .our-engagement .swiper-slide:last-child .line { display: none; } .our-engagement .swiper-button-next, .swiper-rtl .swiper-button-prev { background-color: #fff !important; opacity: unset; z-index: 9; width: 50px; height: 50px; border-radius: 50%; line-height: 50px; } .our-engagement .swiper-button-prev, .swiper-rtl .swiper-button-next { background-color: #fff !important; opacity: unset !important; z-index: 9; width: 50px; height: 50px; border-radius: 50%; line-height: 50px; } .our-engagement .swiper-button-next { right: 5% !important; } .our-engagement .swiper-button-prev { left: 5%; } .our-engagement .content-wrapper { text-align: center; } .border-img { width: 80px; height: 80px; line-height: 75px; border: 2px solid var(--secondary-color); text-align: center; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .border-img img { width: 60%; height: 60%; object-fit: contain; } .border-img::after { content: ""; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); width: 20px; height: 2px; background-color: var(--secondary-color); } .normal-text { align-self: center; } .filter-btn { display: inline-flex; /* Ensures content alignment */ align-items: center; /* Centers text vertically */ justify-content: center; /* Centers text horizontally */ background-color: var(--primary-color); color: var(--bs-white); text-decoration: unset; text-transform: uppercase; font-size: 18px; font-family: "DM Sans 36pt"; font-weight: 700; letter-spacing: 1.92px; border: unset; min-width: 249px; /* Minimum button width */ height: 70px; /* Set a fixed height */ padding: 0 20px; /* Horizontal padding only */ transition: background-color 0.3s ease, color 0.3s ease, font-size 0.3s ease; } .filter-btn:hover, .filter-btn:focus, .filter-btn:active { background-color: var(--bs-white); color: var(--primary-color); font-size: 19px; transition: background-color 0.5s ease, color 0.5s ease, font-size 0.5s ease; letter-spacing: 3.84px; } /* Filter panel container */ .filter-panel { /* display: none; position: absolute; right: -642px; top: 130px; max-width: 642px; width: auto; height: auto; background-color: white; padding: 20px 60px; transition: right 0.3s ease; z-index: 1000; box-shadow: - 5px 5px 15px 0px #fff7f733; color: #333; overflow-y: auto; */ display: none; position: fixed; /* Fixed position to overlay on top */ top: 30px; /* Align to top of the viewport */ right: -642px; /* Hidden off-screen initially */ bottom: 0; /* Full height */ max-width: 642px; width: auto; background-color: white; /* padding: 20px 30px; */ padding: 30px; transition: right 0.3s ease; z-index: 1000; box-shadow: -5px 5px 15px 0px #fff7f733; color: #333; /* border-radius: 8px; */ /* max-height: 90vh; */ height: 90vh; /* Restrict max height */ /* overflow-y: auto; */ } .filter-panel.open { right: 0; display: block; } .projects-list .filter-panel { overflow-y: auto; } /* Optional: Add a condition when the content is present or not */ .projects-list.no-content .filter-panel { display: block; height: auto; /* Allow it to grow based on content */ max-height: 100vh; /* Limiting max height */ overflow-y: auto; /* Always show vertical scrollbar */ } /* Optional: Hide the filter checkbox when there is no content */ .projects-list.no-content .filter-toggle { display: none; pointer-events: none; /* Disable clicking */ } /* Close button */ .close-btn { font-size: 24px; color: var(--primary-color); cursor: none; float: right; } .close-btn:hover { color: black; } /* .filter-panel.open { right: 70px; } */ .section-subdescription { /* font-size: 20px; */ font-size: 18px; font-family: "Poppins"; font-weight: 300; font-size: 18px; color: var(--bs-grey); line-height: 38px; } .filter-options { margin-top: 20px; } .filter-options h3 { margin-bottom: 10px; } .filter-options label { font-size: 16px; color: #333; cursor: none; } .filter-options input { margin-right: 10px; } .projects.card { background-color: transparent; } .project-title a { color: var(--bs-white); font-size: 42px; font-family: "poppins"; font-weight: 500; line-height: 50px; margin-top: 10px; text-decoration: none; } .project-learn-more-link { color: var(--primary-color); font-size: 18px; font-family: "poppins"; font-weight: 400; /* line-height: ; */ /* margin-top: 10px; */ text-decoration: none; } .project-learn-more-link:hover { color: var(--bs-white); } .badge { background-color: var(--primary-color); padding: 10px 29px; border-radius: unset; color: var(--bs-white); font-family: "poppins"; font-size: 16px; font-weight: 500; text-align: center; margin-top: 10px; } .card-img-top { border-radius: unset; } .rectangle-out { position: relative; height: 420px; width: auto; overflow: hidden; text-align: center; } .background-img { position: absolute; top: 0; left: 0; width: 100%; height: 420px; object-fit: cover; z-index: 0; transition: opacity 0.9s ease-out; } .background-img img { width: 100%; height: 100%; object-fit: cover; } .rectangle-out:hover .background-img { opacity: 0; } .rectangle-out::before { content: ""; position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; background: radial-gradient(circle at center, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; opacity: 1; } .rectangle-out:hover::before { transform: translate(-50%, -50%) scale(1.5); } .hover-logo { position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%); z-index: 2; opacity: 0; transition: bottom 0.7s ease-out, opacity 0.7s ease-out; background-color: #fff; width: 255px; height: 255px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .rectangle-out:hover .hover-logo { bottom: 20%; opacity: 1; } /* Ripple animation */ @keyframes ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } .hover-box { position: relative; width: 100%; height: 100%; background-color: #e0e0e0; overflow: hidden; transition: background-color 0.4s ease; display: flex; justify-content: center; align-items: center; border-radius: 10px; } .hover-box .hover-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .background-img img { transition: transform 0.7s ease-out; } .rectangle-out:hover .background-img img { transform: scale(1.1); } .hover-box .ripple { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: rgba(255, 255, 255); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.6s ease, opacity 0.6s ease; opacity: 0; pointer-events: none; } .hover-box .content { position: absolute; bottom: -40px; font-size: 18px; color: black; opacity: 0; transition: bottom 0.6s ease, opacity 0.6s ease; } .hover-box:hover .ripple { transform: translate(-50%, -50%) scale(15); opacity: 1; } .hover-box:hover .content { bottom: 50%; transform: translateY(50%); opacity: 1; } .hover-box:not(:hover) .ripple { transform: translate(-50%, -50%) scale(0); opacity: 0; } .work-title { font-size: 42px; font-family: "poppins"; font-weight: 500; color: var(--bs-white); text-decoration: none; } .checkbox-group { display: flex; flex-direction: column; gap: 10px; } .checkbox-item label { display: flex; align-items: center; font-size: 16px; color: #777; font-family: "poppins"; font-weight: 500; } .custom-checkbox { display: none; } .checkmark { width: 15px; height: 15px; border: 2px solid #898282; position: relative; border-radius: 1px; margin-right: 15px; } .custom-checkbox:checked+.checkmark::before { content: ""; position: absolute; width: 6px; height: 15px; border: solid var(--primary-color); border-width: 0 2px 2px 0; top: -5px; left: 8px; transform: rotate(45deg); } .custom-checkbox:checked+.checkmark { border: 2px solid #c1c1c1; } .checkmark::before { content: ""; display: none; } .custom-checkbox:checked+.checkmark::before { display: block; } .clear-all { font-size: 18px; color: var(--secondary-color); font-family: "DM Sans 36pt"; font-weight: bold; letter-spacing: 1.5px; } .get-in-touch.work .title-2::after { content: unset; } .technologies { background-color: var(--secondary-color); } .technology-round { background-color: var(--bs-white); border-radius: 50%; width: 96px; height: 96px; display: flex; justify-content: center; align-items: center; } .tech-title { color: var(--primary-color); font-size: 22px; font-family: "poppins"; font-weight: 300; } .tech-detail { color: var(--bs-white); font-size: 26px; font-family: "poppins"; font-weight: 500; } .tech-detail a { color: var(--bs-white); text-decoration: unset; } .product-design-slider.swiper { height: auto; } .product-design-slider .content-wrapper { border-radius: 18px; } .product-design-slider .content-wrapper img { border-radius: 18px; /* Add New Style Border */ /* border: 8px solid #141418; */ } .product-design-slider { position: relative; right: -130px; overflow: hidden; } .product-design-slider .swiper-slide { display: flex; justify-content: center; align-items: center; } .product-design-slider .content-wrapper { width: auto; height: 100%; display: flex; justify-content: center; align-items: center; } .product-design-slider img { width: 100%; height: 100%; /* object-fit: contain; */ } .tab-selector { display: none; } .tab { display: inline-block; padding: 10px 20px; margin: 0 10px; cursor: none; color: #ffffff; } .tab-selector:checked+.tab { border-bottom: 4px solid var(--primary-color); } .content { margin-top: 20px; } .item { display: none; } #tab-1:checked~.content #content-1, #tab-2:checked~.content #content-2 { display: block; color: #fff; padding-top: 40px; } .tabs-sec { background-color: var(--secondary-color); padding: 80px 0px; height: 100%; } .tab.tab-title { margin-left: 0; padding-left: 0; } .tab-title { /* color: var(--bs-white); */ font-size: 42px; font-family: "poppins"; font-weight: 500; letter-spacing: 1px; } .mission-vision-tab-title { font-family: "DM Sans 24pt"; font-weight: 500; font-size: 25px; line-height: 40px; letter-spacing: 0.5px; text-transform: uppercase; } .mission-vision { line-height: 32px; } .frontend-backend-list { background-color: var(--secondary-color); padding: 80px 0px; } .back-front-title { display: flex; align-items: center; } .back-front-lists ul { padding-left: 1.5rem !important; } .back-front-lists li { color: var(--bs-white); /* font-size: 25px; */ margin-bottom: 1rem; } .back-front-lists li span { color: var(--bs-grey); font-size: 22px; font-family: "poppins"; font-weight: 300; text-align: justify; } .related-project { text-decoration: none; } .phone-container { position: relative; width: 100%; height: auto; overflow: hidden; display: flex; justify-content: center; } .phone-container:hover .related-project-img { background-color: rgba(20, 20, 24, 0.7); } .related-project-img { width: auto; height: 100%; overflow: hidden; } .related-project-img img { transition: transform 0.5s ease-out; width: 100%; height: 100%; } .phone-container:hover .related-project-img img { transform: scale(1.2); } .phone-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(20, 20, 24, 0.5); opacity: 0; transition: opacity 0.3s ease; z-index: 1; } .phone-container:hover::before { opacity: 1; } .phone-img { width: 100%; height: auto; display: block; position: relative; z-index: 0; } .related-arrow-img { position: absolute; left: 0; bottom: 0; width: 65px; height: 65px; opacity: 0; background-color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: opacity 0.3s ease, transform 0.5s ease, left 0.5s ease, bottom 0.5s ease; z-index: 9; transform: none; } .phone-container:hover .related-arrow-img { opacity: 1; left: 50%; bottom: 33%; transform: translate(-50%, -50%); } .phone-container .related-arrow-img { left: 0; bottom: 0; transform: none; } .related-project-name { display: flex; flex-direction: column; text-align: center; } .project-type { color: var(--primary-color); font-size: 14px; font-family: "poppins"; font-weight: 300; line-height: 26px; } .icon-hover.hero-image { position: relative; overflow: hidden; } .icon-hover.hero-image::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); animation: bgFade 4s ease-in-out 1s forwards; animation-fill-mode: forwards; } @keyframes bgFade { 0% { background-color: rgba(255, 255, 255, 0); } 50% { background-color: rgba(255, 255, 255, 0.3); } 100% { background-color: rgba(255, 255, 255, 0.3); } } .icon-hover .logo-container { position: absolute; bottom: -35%; left: 50%; width: 410px; height: 410px; background-color: white; border-radius: 50%; transform: translateX(-50%) translateY(100%); animation: logoSlide 4s ease-in-out 1s forwards; animation-fill-mode: forwards; overflow: hidden; padding: 50px; text-align: center; } @keyframes logoSlide { 0% { transform: translateX(-50%) translateY(100%); } 30% { transform: translateX(-50%) translateY(0); } 100% { transform: translateX(-50%) translateY(0); } } .icon-hover.hero-image img { width: 100%; height: auto; } .icon-hover .logo-container img { width: 215px; max-width: 100%; height: auto; object-fit: contain; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; scale: 2; } .content { position: relative; } .screen { display: block; width: 100%; max-width: 893px; height: 634px; overflow: hidden; position: relative; border: 8px solid var(--secondary-color); border-radius: 20px; margin: 0 auto; } .screen img { width: 100%; height: auto; position: absolute; bottom: 0; animation: none; left: 0; } @keyframes scroll-down-continuous { 0% { top: 0; } 100% { top: var(--bottom-value, -100%); } } .contact-us-form { width: 100%; height: auto; position: relative; } .contact-form-details { position: relative; } .contact-form { /* position: absolute; */ background-color: var(--bs-white); padding: 80px 120px; width: 100%; min-height: 100vh; /* top:-50px */ } .contact-content { padding: 80px 80px; background-color: var(--secondary-color); } .contact-para { font-size: 1rem; font-family: "poppins"; font-weight: 300; color: var(--bs-grey); line-height: 26px; } .contact-form-para { color: #898282; font-size: 20px; } .projects-list { position: relative; overflow: hidden; } .custom-dropdown-form { width: 100%; border-bottom: 1px solid var(--bs-grey); } .custom-dropdown.education-dropdown { border-bottom: 2px solid var(--bs-grey); } .dropdown-item.active, .dropdown-item:active { background-color: var(--primary-color); } .dropdown-toggle { font-size: 18px; font-weight: 500; color: #333; width: 100%; text-align: left; background: none; border: none; padding: 10px 0; position: relative; outline: none; font-family: "poppins"; } .custom-dropdown.education-dropdown .dropdown-toggle { color: #fff; } .custom-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--primary-color); } .dropdown-menu { width: 100%; } .dropdown-toggle::after { display: none; } .custom-input { border: none; border-bottom: 1px solid var(--bs-grey); border-radius: 0; box-shadow: none; } .custom-input:focus { border-bottom: 1px solid #000; outline: none; box-shadow: none; } .custom-textarea { border: 1px solid var(--bs-grey); border-radius: 0; resize: none; } .custom-textarea:focus { box-shadow: unset; border: 1px solid #000; } .form-label { font-size: 1rem; font-family: "poppins"; font-weight: 500; color: #898282; line-height: 26px; } .text-danger { color: var(--primary-color); } .empolyee-benefit-sec { background-color: var(--secondary-color); padding: 80px 0px; } .empolyee-benefit-img img { width: 100%; height: auto; } .empolyee-benefit-sec-content { height: 100%; width: 100%; display: flex; align-items: center; justify-content: space-between; flex-direction: column; } .employee-benefit-icons { width: 100px; height: 100%; background-color: var(--primary-color); /* padding: 60px 0px; */ position: absolute; left: 54%; top: -50px; } .employee-icon-container-new { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; margin-top: -50px; /* background-color: red; */ } .benefit-content { display: flex; align-items: center; height: 100%; } .benefit-content h3 { font-size: 26px; font-family: "poppins"; font-weight: 500; color: var(--bs-white); /* line-height: 26px; */ } .employee-benefit-icons { display: flex; align-items: center; /* height: 100%; */ } .employee-icon-content { position: absolute; left: 52.4%; /* top: 0; */ /* top: -65px; */ /* padding: 90px 0px; */ /* padding: 105px 0px; */ /* padding-top: 120px; */ } .benefit-para { font-size: 16px; font-weight: 300; font-family: "poppins"; color: rgba(217, 217, 217, 1); line-height: 26px; } .title-container { height: 80px; display: flex; justify-content: center; margin-top: 2rem; } .work-with-us-circle { position: relative; } .work-with-us-lists { width: 250px; height: 250px; border: 1px solid #fff; padding: 10px; border-radius: 50%; position: relative; margin: 0px auto; } .work-with-us-circle:hover .work-with-us-lists { border: 1px solid var(--primary-color); } .work-with-us-lists img { width: 100%; height: auto; object-fit: cover; border-radius: 50%; } .work-with-icon { width: 100px; height: 100px; background-color: var(--primary-color); border-radius: 50%; position: absolute; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; z-index: 9; } .col-4-adjust .work-with-icon { top: 20%; left: 31%; } .col-4-adjust::before { top: 34%; left: 50%; } .col-6-adjust .work-with-icon { top: 20%; left: 34%; } .col-6-adjust::before { top: 34%; left: 50%; } .work-with-us-circle::before { content: ""; position: absolute; width: 100px; height: 100px; background-color: var(--primary-color); border-radius: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.5s ease, opacity 0.5s ease; z-index: 0; opacity: 0; } .work-with-us-circle:hover::before { background-color: white; transform: translate(-50%, -49%) scale(2.3); opacity: 0.3; z-index: 3; } .work-with-us-circle:not(:hover)::before { background-color: var(--primary-color); transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 9; } .sec-line { margin-top: 5rem; } .hiring-process-sec { background-color: var(--secondary-color); padding: 80px 0px; } .hiring-process-img img { width: 100%; height: auto; } .timeline { list-style: none; padding: 0; position: relative; margin-left: 50px; } .timeline::before { content: ""; position: absolute; left: 20px; top: 45px; bottom: 73px; width: 1px; background-color: var(--bg-color); } .timeline li { position: relative; padding-left: 70px; /* margin-bottom: 30px; */ } .timeline li::before { content: ""; position: absolute; left: 20px; width: 20px; height: 1px; background-color: var(--bg-color); top: 45px; } .timeline li::after { content: ""; position: absolute; left: 16px; width: 10px; height: 10px; background-color: var(--bg-color); border-radius: 50%; top: 40px; transition: background-color 0.3s linear; } .timeline li:hover::after { background-color: #e60000; box-shadow: 0px 0px 8px 0px var(--primary-color); } .timeline .number { font-size: 40px; color: #e60000; font-weight: bold; float: left; margin-right: 10px; } .timeline h3 { font-size: 20px; margin: 0; } .timeline p { margin: 5px 0 0; color: #999; } .hiring-number { font-family: "Epilogue"; font-weight: 500; font-size: 92px; color: var(--primary-color); margin-top: -15px; } .hiring-title { font-family: "DM Sans 24pt"; font-weight: 500; font-size: 25px !important; color: var(--bs-white); } .hiring-steo-content { font-family: "poppins"; font-weight: 300; font-size: 16px !important; color: #898282; line-height: 26px; } .career-path-img img { width: 100%; height: auto; } .open-positions { background: var(--secondary-color); padding: 80px 0px; } .open-position-details { background-color: var(--bs-white); width: 100%; height: auto; padding: 10px 20px; } .job-card .title-4 { font-family: "poppins"; font-size: 36px; color: var(--primary-color); font-weight: 600; } .apply-for-link .custom-link { color: var(--secondary-color); position: relative; transition: color 0.3s ease; font-size: 1.125rem; font-weight: bold; line-height: 60px; letter-spacing: 5px; font-family: "DM Sans", sans-serif; } .apply-for-link .custom-link::after { content: url("../images/svg/Apply-Arrow.svg"); display: inline-block; margin-left: 15px; vertical-align: middle; width: 25px; height: auto; transition: transform 0.3s ease; transform-origin: center; } .apply-for-link .custom-link:hover { color: var(--primary-font-color); font-weight: bold; font-size: 1.125rem; letter-spacing: 5px; } .apply-for-link .custom-link:hover::after { content: url("../images/svg/Hover_Arrow.svg"); width: 25px; } .job-title { font-family: "poppins"; font-size: 18px; color: #898282; font-weight: 400; } .job-des-bold { font-family: "poppins"; font-size: 18px; font-weight: 400; color: var(--secondary-color); } .skills-label { font-family: "poppins"; font-size: 22px; font-weight: 500; color: rgba(20, 20, 24, 1); margin-bottom: 0px; } .form-desc { font-family: "poppins"; font-size: 22px; font-weight: 300; color: var(--bs-grey); line-height: 32px; } .check-lists { display: flex; flex-wrap: wrap; } .check-lists .checkbox-item { margin-right: 25px; } .form-container { border: 2px solid var(--primary-font-color); padding: 60px 100px; } .form-label { color: #898282; } .contact-form-field .form-control { color: var(--secondary-color) !important; } .apply-hero-section { margin-top: 9rem; } .apply-form .form-control { background-color: transparent; border: unset !important; border-bottom: 2px solid #c1c1c1 !important; border-radius: 0; color: #fff !important; } .form-control:focus { border-color: var(--primary-color); box-shadow: none; background-color: transparent; } .form-check-label { color: #fff; } .submit-btn { background-color: var(--primary-color); border: none; padding: 10px 20px; font-size: 16px; color: #fff; border-radius: 0; } .submit-btn:hover { background-color: #ff4d4d; } .custom-radio { appearance: none; width: 15px; height: 15px; border: 2px solid #c1c1c1; border-radius: 50%; position: relative; outline: none; background-color: transparent; cursor: none; background-color: transparent !important; } .custom-radio:checked::before { content: ""; display: block; width: 7px; height: 7px; background-color: var(--primary-color); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .form-check-input:checked { border-color: #fff; box-shadow: unset !important; } .custom-radio:focus, .custom-radio:active { border-color: #fff !important; } .form-check-label { color: #c1c1c1; } .select-container { position: relative; } select { appearance: none; background-color: transparent; color: #fff; font-size: 18px; border: none; padding: 0px 40px 10px 0; border-bottom: 2px solid #898282; width: 100%; box-sizing: border-box; cursor: none; outline: none; } .form-check-inline { margin-right: 2rem; } .custom-dropdown::after { content: ""; background-image: url("../images/svg/dropdown-white.svg"); background-size: 12px 12px; background-repeat: no-repeat; position: absolute; top: 20px; right: 10px; width: 12px; height: 12px; pointer-events: none; } select:focus { border-bottom-color: #fff; } #education option { background-color: var(--bg-color); color: #fff; } .file-upload { display: flex; align-items: center; justify-content: center; } .custom-file-upload { background-color: transparent; color: #c1c1c1; padding: 7px 35px; border: 1px solid #898282; cursor: none; font-family: "DM Sans 36pt"; font-weight: bold; font-size: 10px; text-align: center; } .custom-file-upload:hover { background-color: #444; } input[type="file"] { display: none; } .file-chosen { font-family: "DM Sans 36pt"; font-weight: bold; margin-left: 20px; color: #898282; font-size: 10px; } #address { border: unset; border-bottom: 2px solid #c1c1c1 !important; background-color: transparent; width: 100%; resize: unset; color: #fff; overflow-y: hidden; } #address:focus-visible { outline: unset; } .img-responsive { width: 100%; height: auto; } .feature-image img { /* border: 8px solid #141418; */ border-radius: 18px; } .content-area-title { line-height: 10px; } .our-product { background-color: var(--secondary-color); padding: 5rem 0rem; } vr { position: absolute; top: 25px; right: 50px; width: 1px !important; height: 75%; background: #000; padding: 0 !important; } .is-sub-hero-section { position: absolute; left: -55px; } .design-expertise-details { padding: 0rem 0rem 1rem 0rem; } .modal-content { border: unset; } .slide-right { animation: 2s slide-right; } @keyframes slide-right { from { margin-left: -100%; } to { margin-left: 0%; } } .custom-modal { position: relative; padding-top: 40px; background: transparent; } .custom-close-btn { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: transparent; border: none; cursor: none; outline: none; } .custom-close-btn::before, .custom-close-btn::after { content: ""; position: absolute; width: 100%; height: 2px; background-color: #fff; top: 50%; left: 0; transform-origin: center; transition: transform 0.3s ease; } .custom-close-btn::before { transform: rotate(45deg); } .custom-close-btn::after { transform: rotate(-45deg); } .custom-close-btn:hover::before { transform: rotate(90deg); background: var(--primary-color); } .custom-close-btn:hover::after { transform: rotate(0deg); background: var(--primary-color); } .testimonials.swiper { position: absolute; top: 0; width: 95%; } .remove.no-gutters { /* padding-right: auto; margin-right: auto; */ } .slick-dots li { cursor: none !important; } #scrollToTopBtn { background-color: var(--primary-color); border: none; border-radius: 50%; /* line-height: 60px; */ width: 60px; height: 60px; position: fixed; bottom: 65px; right: 40px; z-index: 999; display: none; } #scrollToTopBtn img { width: auto; height: 40%; } #scrollToTopBtn:hover { /* box-shadow: rgba(255, 255, 255, 0.2) 0px 8px 24px; */ box-shadow: rgba(255, 255, 255, 0.2) 0px 7px 29px 0px; } .nav-item .dropdown-menu .dropdown-item { padding: 10px 5px; color: var(--bs-white); text-decoration: none; display: block; white-space: nowrap; transition: background 0.3s, color 0.3s; font-family: "Poppins"; font-weight: normal; font-size: 14px; } .dropdown-item { font-family: "Poppins"; font-weight: normal; font-size: 16px; } .nav-item .nav-link { color: var(--bs-white); text-decoration: none; padding: 10px; display: inline-block; transition: color 0.3s; } /* .submenu-large .outer-dropdown{ width: calc(100% - 400px); } */ .outer-dropdown { text-align: center; position: fixed; top: 115px; left: 50%; transform: translate(-50%); display: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; z-index: 9999999999; border-radius: 0; } .nav-item.dropdown:hover .services-dropdown { display: block; opacity: 1; visibility: visible; transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in; } .nav-item.dropdown:hover .platforms-dropdown { display: block; opacity: 1; visibility: visible; transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in; } .inner-services { display: flex; flex-direction: column; text-align: start; } .dropdown-content-box li { list-style: none; } .dropdown-content-box { padding: 0 8px; border-right: 1px solid var(--bg-color); } .dropdown-content-box:last-child { border-right: unset; } .inner-services a { padding: 12px 0; display: flex; align-items: center; width: 100%; color: var(--bs-white); font-family: "Poppins"; font-weight: normal; font-size: 14px; border-radius: 16px; transition: var(--transition); text-decoration: none; } .dropdown-single-item a { text-decoration: none; } .submenu-dropdown-title { color: var(--primary-color); font-family: "DM Sans 24pt"; font-weight: 500; font-size: 16px; text-align: start; display: flex; justify-content: start; margin-bottom: 0; } .submenu-dropdown-title:hover { color: var(--bs-white); } /* .submenu-dropdown-title.active{ color:var(--bs-white) } */ .inner-services a:hover, .inner-services a:focus { color: var(--primary-color); } .inner-services a.active { color: var(--primary-color); } .login-card { border: 2px solid var(--primary-color); width: 60%; padding: 70px 100px; } .toggle-password { position: absolute; right: 0; z-index: 9; } .toggle-password1 { position: absolute; right: 0; z-index: 9; } .forgot-password { text-decoration: none; color: var(--primary-color); font-family: "Poppins"; font-weight: 500; font-size: 16px; } .links-red { color: var(--primary-color); } .priacy-contact-link { color: var(--bs-white); text-decoration: none; text-align: start; } .paragraph-white p { color: var(--bs-white); line-height: 42px; text-align: start; } .paragraph-white .title-3 { color: var(--primary-color); margin-bottom: 1rem; line-height: 85px; } .outer-dropdown { width: calc(100% - 40%); /* top: 85px; */ } .our-container { padding-left: 100px; } /* New Page CSS -Graphics Page _logoFolio Page _Reel Page */ .graphics-software-title::after { content: ""; width: 20px; height: 3px; background: var(--primary-color); margin-left: 15px; } .graphics-software-title { font-family: poppins; font-weight: 500; font-size: 26px; display: flex; align-items: center; color: var(--primary-color); } .graphics-logo-container { display: flex; align-items: center; gap: 30px; margin-top: 26px; } .grahpics-logo-card { width: 95px; height: 95px; background-color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .graphics-logo-img { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } .graphics-logo-img img { width: 100%; } .custom-width { width: 33px; } .creative-feild-list { margin-top: 20px; font-family: poppins; font-size: 22px; font-weight: 300; padding-left: 25px; } .creative-feild-list li { margin: 10px 0; } .creative-grahics-section, .logofolio-section, .social-media-section, .software-creative-section { padding: 100px 0; background-color: #141418; } .graphics-creative-solutions-card { margin-bottom: 80px; } .graphics-creative-solutions-card .background-img, .graphics-creative-solutions-card .rectangle-out { height: 500px; } .graphics-creative-solutions-card .background-img img { object-fit: fill; } .logofolio-title { font-size: 46px; font-weight: 600; font-family: poppins; } .logo-card { height: 296px; background-color: white; margin-bottom: 25px; display: flex; justify-content: center; align-items: center; } .logo-card:hover { background-color: #141418; } /* Show default image initially */ .logo-card-img { display: block; } /* Hide hover image initially */ .hover-card-img { display: none; } /* On hover, swap images */ .logo-card:hover .logo-card-img { display: none; } .logo-card:hover .hover-card-img { display: block; } .logo-card-img, .hover-card-img { transform: scale(0.5); } .social-media-card { margin-bottom: 80px; } .social-media-card-img { height: 500px; } .social-media-card-img img { width: 100%; height: 100%; object-fit: cover; } .social-media-content { margin-top: 40px; } .reel-card { height: 530px; position: relative; } .reel-card img { width: 100%; height: 100%; object-fit: cover; } .reel-card-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #141418; opacity: 20%; z-index: 999; } .reel-play-button { position: absolute; width: 70px; height: 70px; background-color: white; border-radius: 50%; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; } .reel-play-button img { padding-left: 12px; /* padding-top: 12px; */ transform: scale(0.3); } .view-reel-all-titile { font-family: "DM Sans"; font-weight: 700; font-size: 18px; } .reel-card.view-all-card { display: flex; /* justify-content: center; */ padding-left: 50px; align-items: center; } .graphics-software-title::after { content: ""; width: 20px; height: 3px; background: var(--primary-color); margin-left: 15px; } .graphics-software-title { font-family: poppins; font-weight: 500; font-size: 26px; display: flex; align-items: center; color: var(--primary-color); } .graphics-logo-container { display: flex; align-items: center; gap: 30px; margin-top: 26px; } .grahpics-logo-card { width: 95px; height: 95px; background-color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .graphics-logo-img { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } .graphics-logo-img img { width: 100%; } .custom-width { width: 33px; } .creative-feild-list { margin-top: 20px; font-family: poppins; font-size: 22px; font-weight: 300; padding-left: 25px; } .creative-grahics-section, .software-creative-section { padding: 100px 0; background-color: #141418; } .logofolio-title { font-size: 46px; font-weight: 600; font-family: poppins; } .logo-card { height: 296px; background-color: white; margin-bottom: 25px; display: flex; justify-content: center; align-items: center; } .logo-card:hover { background-color: #141418; } .logo-card-img { transform: scale(0.5); } .social-media-card { margin-bottom: 80px; } .social-media-card-img { height: 500px; } .social-media-card-img img { width: 100%; height: 100%; object-fit: cover; } .social-media-content { margin-top: 40px; } .reel-card { height: 530px; position: relative; } .reel-card img { width: 100%; height: 100%; object-fit: cover; } .reel-card-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #141418; opacity: 20%; z-index: 999; } .reel-play-button { position: absolute; width: 70px; height: 70px; background-color: white; border-radius: 50%; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; } .reel-play-button img { transform: scale(0.3); } .view-reel-all-titile { font-family: "DM Sans"; font-weight: 700; font-size: 18px; } .reel-card.view-all-card { display: flex; /* justify-content: center; */ padding-left: 50px; align-items: center; } .group-logo-container { margin-top: 80px; } .product-feature-highlight { display: flex; justify-content: center; align-items: center; gap: 10px; font-family: poppins; font-size: 16px; font-weight: 500; } .product-feature-highlight::after { content: ""; width: 4px; height: 22px; display: block; background-color: var(--primary-color); } .product-logo { height: auto; width: 200px; } .product-logo img { height: 100%; width: 100%; } /* Swiper js */ .product-fleet-swiper-Slider, .product-jr-swiper-Slider, .product-swiper-Slider { padding: 10px 0; width: 100%; height: 100%; position: relative; margin-top: 60px; } .product-swiper-wrapper { width: 100%; height: 100%; } .product-swiper-slide { text-align: center; font-size: 18px; background: #444; width: 100%; height: 100%; } /* Navigation buttons */ .product-swiper-button-next, .product-fleet-swiper-button-next, .product-jr-swiper-button-next, .product-fleet-swiper-button-prev, .product-jr-swiper-button-prev, .product-swiper-button-prev { color: white; } .product-fleet-swiper-button-next svg, .product-jr-swiper-button-next svg, .product-fleet-swiper-button-prev svg, .product-jr-swiper-button-prev svg, .product-swiper-button-next svg, .product-swiper-button-prev svg { width: 20px; height: 20px; } /* Position navigation buttons at the bottom center */ .product-swiper-button-next, .product-swiper-button-next, .product-fleet-swiper-button-next, .product-jr-swiper-button-next, .product-fleet-swiper-button-prev, .product-jr-swiper-button-prev, .product-swiper-button-prev { bottom: 10px; top: auto; width: 40px; height: 40px; border-radius: 50%; background-color: white; display: flex; justify-content: center; align-items: center; cursor: none; } .product-swiper-button-prev { left: 30%; right: auto; } .product-swiper-button-next { right: 30%; left: auto; } .product-post-image { border: 1px solid white; height: 215px; border-radius: 10px; overflow: hidden; margin-bottom: 20px; } .product-post-image img { width: 100%; height: 100%; object-fit: cover; } .social-media-section { padding-top: 100px; } .product-container { /* margin: 100px 0; */ } @media (max-width: 1599px) { .dropdown-single-item { padding: 0 20px; } .platforms-dropdown ul li .dropdown-single-item { padding: 0 0; } } .dropdown-box { padding: 32px 16px; display: flex; background-color: var(--secondary-color); border-radius: 0px; border: 1px solid var(--border-color-gray); } .dropdown-content-box>li { padding: 0 8px; border-right: 1px solid var(--border-color-gray2); } .adjust-dropdown-position { position: relative; z-index: 99; } .odd-div { padding-right: 1rem; } .even-div { padding-left: 1rem; } .our-work-careers-para { font-size: 1.25rem; line-height: 32px; } /* all media query here */ @media only screen and (max-width: 1920px) { .breadcrumb { transform: translateX(calc((100vw - 1320px) / 2)); } } @media (min-width: 1500px) and (max-width: 1920px) { #scrollToTopBtn { bottom: 85px; } } /*----------------------------------------------- 1400px----------------------------------------------- */ @media only screen and (max-width: 1400px) { .paragraph-white .title-3 { font-size: 1.9rem; } .paragraph-white p { font-size: 1.27rem; line-height: 36px; } .our-services.mySwiper { padding: 70px 33px 0px 40px !important; } .our-services.mySwiper .swiper-slide { width: 48% !important; } .employee-icon-content { padding: 45px 0px; } .why-list-item { padding-left: 0rem; } .process-lists { right: -40px; } /* .horizontal-list li { margin: 0 55px 0px 0px; } */ .servics-tools { padding: 35px 20px; } .even-id.process-lists { left: -35px; } .logo-container { bottom: -50%; } .testimonial.swiper-button-next { /* top: 49% !important; */ right: 22%; } .testimonial.swiper-button-prev { /* top: 62% !important; */ left: unset; right: 22%; } .quote-before { left: 14%; } .quote-after { right: 14%; } vr { right: 35px; } .is-sub-hero-section { left: -120px; } .hero-title span { font-size: 5rem; } .without-bg-opacity.img-hvr { height: auto; width: 525px; } .service-content { padding: 70px 52px 0px 35px; } .breadcrumb { transform: translateX(calc((100vw - 1140px) / 2)); } .employee-benefit-icons { left: 53.2%; } .tree-nation-button { padding-right: 0 !important; } } /* @media (min-width: 1200px) { .breadcrumb { transform: translateX(calc((100vw - 1140px) / 2)); } } */ @media only screen and (max-width: 1399.98px) { .value-des-left .icon { left: 60px; top: 36px; } .value-des-right .icon { right: 61px; } .tree-nation-button { padding-right: 0 !important; } } @media only screen and (max-width: 1300px) { .is-sub-hero-section { left: -30px; } .hero-title span { font-size: 4.75rem; } } /*----------------------------------------------- 1200px----------------------------------------------- */ @media only screen and (max-width: 1200px) { .count-round .round { width: 125px; min-height: 125px; } .count-round .round .count { font-size: 49px; } .count-round .content span { font-size: 20px; top: -63px; left: -15px; padding: 0px 1.125rem 1.125rem 1.125rem; } .all-service-title { font-size: 35px; line-height: 45px; } .our-services.mySwiper { bottom: -35%; padding: 84px 10px 0px 10px !important; } .our-services.mySwiper .swiper-slide { width: auto !important; } .our-purpose { height: auto; padding: 30px 0px; } .text .title-3 { font-size: 1.625rem; } #sideTab .nav-item .nav-link { font-size: 20px; line-height: 25px; text-align: start; } .tab-mission-title { font-size: 1.625rem; } .tab-vision-title { font-size: 1.625rem; } .design-expertise-icon { width: 150px; height: 150px; } .design-expertise-icon-content img.default-img { width: 70px; height: 70px; } .design-expertise-icon-content img.hover-img { width: 70px; height: 70px; } .design-expertise-title .title-5 { font-size: 1.375rem; } .our-process-cotent p { font-size: 20px; } .logo-container { width: 370px; height: 370px; padding: 39px 55px; } .employee-benefit-icons { /* height: 420px */ top: -40px; } .benefit-para { margin-bottom: 0; } .icon-with-bg img { width: 50px; height: 50px; } .benefit-para { font-size: 12px; line-height: 20px; } .employee-icon-content { left: 54%; } .benefit-content h3 { font-size: 20px; } .employee-icon-content { padding: 65px 0px; } .timeline { margin-left: 0; } .hiring-number { font-size: 70px; } .honor-img { padding: 18px 32px; } .testimonial.swiper-button-next { /* top: 49% !important; */ right: 12%; } .testimonial.swiper-button-prev { /* top: 62% !important; */ left: unset; right: 12%; } .team-member h4 { font-size: 1.6rem; } .employer h4 { font-size: 18px; } .bg-opacity.img-hvr:hover .text .title-3 { bottom: 2em; } .our-work-link { padding: 30px; } .without-bg-opacity.img-hvr { width: 445px; } .service-content { padding: 70px 52px 0px 10px; } .normal-text { font-size: 1.4rem; word-break: break-word; } .border-img { width: 60px; height: 60px; line-height: 55px; border: 2px solid var(--secondary-color); } .quote-before { left: 6%; } .quote-after { right: 6%; } .is-sub-hero-section { left: -15px; } .hero-title span { font-size: 4rem; line-height: 60px; } .outer-dropdown { width: calc(100% - 25%); /* top: 85px; */ } .navbar-brand img { height: 60px; } .inner-services a { padding: 8px 0; } .formula { background-image: unset; } .fromula-info { width: auto; height: 100%; background-image: url("../images/formula.webp"); background-position: left; background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; flex-direction: column; align-items: center; } .fromula-info .formula-title { display: flex; justify-content: center; } .breadcrumb { transform: translateX(calc((100vw - 960px) / 2)); } .employee-benefit-icons { left: 53.8%; } .paragraph-white .title-3 { line-height: 50px; } .group-logo-container { margin-top: 60px; } } @media only screen and (max-width: 1199.98px) { .value-des-left .icon { left: 120px; top: 37px; } .value-des-right .icon { right: 128px; } } @media only screen and (min-width: 1024px) and (max-width: 1200px) { .navbar-nav .nav-item .nav-link { font-size: 18px; } .odd-div { padding-right: 1rem; } .even-div { padding-left: 1rem; } } /* @media (min-width: 992px) { .breadcrumb { transform: translateX(calc((100vw - 960px) / 2)); } } */ /*--------------------------------------- 992px to 1200px----------------------------------------- */ @media only screen and (min-width: 992px) and (max-width: 1200px) { .navbar-nav .nav-item .nav-link { padding: 0.5rem 1rem 0.5rem 1rem; } .hero-caption { font-size: 1.5rem; } .back-front-lists li span { font-size: 20px; } .tech-title { font-size: 18px !important; } .tech-detail { font-size: 19px !important; } .location-details { padding: 15px 15px !important; } .location-title { font-size: 22px !important; } .office-title { font-size: 24px !important; } .project-title a { font-size: 36px; } .odd-div { padding-right: 1rem; } .even-div { padding-left: 1rem; } .testimonial_slide_content { width: auto !important; } .testimonial-feedback { padding: 0px 25px !important; } } /*----------------------------------------------- 992px----------------------------------------------- */ @media only screen and (max-width: 992px) { .paragraph-white p { font-size: 1.25rem; line-height: 32px; } .title-2 { font-size: 1.5rem; } .heading-1 { font-size: 36px !important; } .tech-title { font-size: 20px; } .tech-detail { font-size: 22px; } .navbar-collapse { position: absolute; z-index: 2; background: rgba(0, 0, 0, 0.8); width: 100%; top: 72px; } .platform-list { display: flex; justify-content: space-between; width: 100%; } .platform-img { width: auto; height: 80%; } .platform-img img { width: auto; height: 100%; } .hero-caption { font-size: 1.875rem; } .hero-title span { font-size: 3.6rem; line-height: 75px; word-break: break-word; } .subtext { width: 100%; font-size: 1.5rem; left: 0; } .why-list-container { padding-left: 60px; } .count-round .round { width: 100px; min-height: 100px; } .count-round .round .count { font-size: 40px; } .count-round .content span { font-size: 20px; top: -63px; left: -15px; padding: 0px 0px 13px 14px; } .bold-title { font-size: 36px !important; line-height: 50px; } .service-content { padding: 25px 0px 0px 0px; } .our-services.mySwiper .swiper-slide { width: 100% !important; } .all-service-title { font-size: 24px; line-height: 25px; } .all-service-des { font-size: 1.125rem !important; line-height: 25px; } .swiper { height: 475px; } .recommendations-slider { height: auto; } .value-des-left .icon { left: 85px; top: 37px; } .value-des-right .icon { right: 90px; top: 37px; } .fromula-info { padding-top: 0rem; height: auto; } .custom-list { padding-left: 0px; } .normal-text { font-size: 1.375rem; } .bg-opacity.img-hvr { width: 100%; height: auto; } .text .title-3 { font-size: 1.375rem; line-height: 30px; } section { margin-top: 40px !important; } .our-purpose { margin-top: 14rem !important; } .testimonial-single-item { width: 100% !important; } .testimonial-feedback { top: 25px !important; padding: 0px 16px !important; } .get-in-touch { height: auto !important; } .get-in-touch-content { padding: 50px 0px; } #sideTab .nav-item .nav-link { font-size: 14px; line-height: 15px; text-align: start; } .tab-mission-title { font-size: 1.625rem; } .tab-vision-title { font-size: 1.625rem; } .sub-service-title { font-size: 1.8rem; } .design-expertise-icon { width: 130px; height: 130px; } .design-expertise-icon-content img.default-img { width: 50px; height: 50px; } .design-expertise-icon-content img.hover-img { width: 50px; height: 50px; } .contact-info { width: 100%; height: auto; } .about-services-slider .sliders { position: unset; margin-top: 5rem; } .our-process-lists { justify-content: center; } .even-id.process-lists { left: 80px; } .process-lists { right: 75px; } .horizontal-list { flex-wrap: wrap; /* justify-content: center; */ } .sub-services-link { /* display: flex; justify-content: center; align-items: center; flex-direction: column; */ margin-left: 1rem; } .center-col { top: unset !important; } p { line-height: 34px; } .back-front-lists li span { font-size: 14px; } .tab-title { font-size: 26px; } .tabs-sec { padding: 30px 0px; } #tab-1:checked~.content #content-1, #tab-2:checked~.content #content-2 { padding-top: 15px; } .feature { padding-bottom: 20px !important; } .frontend-backend-list { padding: 30px 0px; } footer { margin-top: 70px; } .get-in-touch.work { padding: 2rem 0rem; } .logo-container { width: 270px; height: 270px; padding: 35px 44px; } .location-details { padding: 10px !important; } .location-title { font-size: 17px !important; } .location-title::after { width: 15px !important; height: 2px !important; right: -24px !important; } .address-detail-title { font-size: 14px !important; } .address-detail-content a { font-size: 14px !important; } .icon-with-bg { background-color: var(--primary-color); display: flex; align-items: center; height: 100%; padding: 15px 20px; } .sec-line { margin-top: 0rem !important; } .title-container .title-4 { font-size: 1.7rem !important; } .col-6-adjust .work-with-icon { top: 20%; left: 30%; } .hiring-step { margin-top: 3rem; } .hiring-number { font-size: 92px; } .form-container { padding: 60px 30px; } .value-better .content { text-align: start; } .value-better .content h2 { font-size: 30px; } .value-better-thumb .swiper-wrapper .swiper-slide { margin-right: 40px !important; } .value-better-thumb .swiper-wrapper .swiper-slide a { font-size: 20px; } .honor-img { padding: 0px 9px; } .history-slider .swiper-slide { padding: 10px; } .testimonial-content { position: unset !important; width: 80% !important; padding: 35px; } .testimonial.swiper-button-next { top: 49% !important; right: 20px; } .testimonial.swiper-button-prev { top: 62% !important; left: unset; right: 17px; } .link { word-wrap: break-word; /* Allows words to break if needed */ white-space: normal; font-size: 20px; } .icon-hover .logo-container { bottom: -50% !important; width: 330px !important; height: 330px !important; } .home-content { line-height: 29px !important; } .purpose-img img { width: 50%; height: auto; } .our-purpose .purpose-img { justify-content: center; } .purpose-content p { line-height: 30px; font-size: 1.3rem; } .quote-before { left: 0%; } .quote-after { right: 0%; } vr { display: none; } .testimonial-content { padding: 18px; } .testimonial-content .testi-content { font-size: 16px !important; line-height: 32px; } .testimonial-heading { /* position: absolute; left: -23px; */ } .testimonial-heading.bold-title { font-size: 32px !important; } .team-member h4 { font-size: 1.2rem; } .nav-item.dropdown:hover .platforms-dropdown { display: none; } .nav-item.dropdown:hover .services-dropdown { display: none; } .bg-opacity.img-hvr:hover .text .title-3 { bottom: 1.5em; } .bg-opacity.img-hvr:hover .text-overlay .hover-text { bottom: 0.5em; } .bg-opacity .hover-text { line-height: 19px; font-size: 14px; } .bg-opacity.img-hvr .text .title-3 { padding: 1.5rem 1.5rem 0rem 0.8rem; } .our-work-careers .container .row .position-relative { padding: 0rem 1rem; } .is-sub-hero-section { left: -80px; } .hero-caption { font-size: 1.4rem; line-height: 35px; } .contact-info { padding: 50px 0px; } .our-process-cotent p { text-align: justify; } .odd-div { padding-right: 0rem; } .even-div { padding-left: 0rem; } .years-container button { padding: 5px 20px; } .years-container { top: -45px; } .our-work-icon img.default-img, .our-work-icon img.hover-img { width: 60px; height: 60px; } .updated-post-item { width: 500px; } .arrow-down { display: none; } .second-services.sub-services-details { padding: 0px 50px 0px 50px; } .sub-services-details { padding: 0px 50px 0px 50px; } .empolyee-benefit-sec { padding: 40px 0px; } .hiring-process-sec { padding: 40px 0px; } .open-positions { padding: 40px 0px; } .our-work-careers-para { font-size: 1.1rem; } .breadcrumb { transform: unset; } .breadcrumb { justify-content: center; } .product-design-slider { right: 0; } } @media only screen and (max-width: 850px) { .is-sub-hero-section { left: -35px; } } @media only screen and (max-width: 769px) { .is-sub-hero-section { left: -18px; } .subservice-title-content { padding: 52px 30px; } .hero-caption { font-size: 1.2rem; } .form-desc { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 992px) { .rectangle-out::before { width: 570px; } .about-client-testimonial { height: 360px; } } /*----------------------------------------------- 768px----------------------------------------------- */ @media only screen and (max-width: 768px) { .heading-1 { font-size: 30px !important; line-height: 35px; } .technology-round { width: 60px; height: 60px; } .technology-round img { width: 100%; } .title-2 { font-size: 1.3rem; } .get-touch-btn { width: 350px !important; height: 65px !important; } .know-more { width: 250px; height: 55px; } .filter-btn { padding: 10px 0px; } .hero-caption { font-size: 1.2rem; letter-spacing: 3.3px; line-height: 26px; } .count-round .round { width: 80px; min-height: 80px; } .count-round .round .count { font-size: 2.25rem; } .count-round .content span { font-size: 14px; top: -63px; left: -15px; padding: 0px 0px 13px 14px; } .hero-title span { font-size: 2.75rem; line-height: 40px; } section { margin-top: 50px !important; } .value-des-left .icon { left: 10px; top: 37px; } .value-des-right { background-image: unset; background-color: var(--secondary-color); } .value-des-left { background-image: unset; background-color: var(--secondary-color); display: flex; align-items: center; } .value-des-right .icon { right: 10px; } .why-hyvikk-info .container { margin-left: auto; } .why-img { height: 300px; } .all-service-des { font-size: 14px !important; line-height: 20px; } .custom-link { font-size: 13px; line-height: 30px; letter-spacing: 1px; } .without-bg-opacity.img-hvr { width: 100%; height: auto; } .recommendations-client-img { display: flex; justify-content: center; align-items: center; overflow: hidden; width: 100%; height: 100%; } .recommendations-client-img img { width: 100%; height: 100%; object-fit: cover; } .get-in-touch-content { padding: 30px 0px; } .bold-title { font-size: 30px !important; line-height: 35px; } p { font-size: 1.125rem; line-height: 30px; } .culture-image img { height: 180px !important; /* height: auto !important; */ } .career-sec { padding: 20px 0px; } .footer-link-services ul li a { padding-left: 10px; padding-right: 10px; border-right: 0px; } .footer-link-services ul li:first-child a { padding-right: 10px; } .footer-link-services ul li:last-child a { padding-left: 10px; } .footer-customer-services { padding-top: 30px; } .sub-services { height: 350px; } .sub-service-title { font-size: 1.875rem; } .servics-tools { padding: 20px; } .our-work-link { padding: 15px 20px; } .process-lists { right: -9px; } .even-id.process-lists { left: -9px; } .horizontal-list { justify-content: start; } .link { font-size: 16px; line-height: 22px; } .center-col { top: unset; } .product-design-slider { right: 0px; } .mission-vision-tab-title { font-size: 18px; } .tab { padding: 10px 0px !important; } .frontend-img { width: 50px; height: 50px; } .logo-container { width: 200px; height: 200px; padding: 28px 32px; } .screen { height: 400px; } .contact-form { padding: 50px 50px; } .contact-content { padding: 50px 50px; } .form-label { margin-bottom: 0px; } .work-with-us-lists { width: 200px; height: 200px; } .col-4-adjust .work-with-icon { top: 16%; left: 26%; } .col-4-adjust::before { top: 32%; left: 50%; } .col-6-adjust .work-with-icon { top: 16%; left: 25%; } .work-with-us-circle:hover::before { transform: translate(-50%, -49%) scale(1.8); } .title-container .title-4 { font-size: 1.3rem !important; } .col-6-adjust::before { top: 32%; left: 50%; } .job-card .title-4 { font-size: 30px !important; } .form-container { padding: 40px 40px; } .company-history { padding: 20px; } .testimonial-content .testi-content { font-size: 16px !important; } .years-container button { padding: 3px 17px !important; } .professional-btn { max-width: 100%; /* Allow the button to shrink */ padding: 10px 20px; /* Adjust padding for smaller screens */ font-size: 15px; /* Adjust font size for better readability */ height: auto; /* Allow height to adjust */ } .professional-btn:hover { background-color: var(--bs-white); color: var(--primary-color); font-size: 16px; letter-spacing: 3px; } .our-work-link { padding: 35px 15px; } .our-process-cotent p { font-size: 16px; } .icon-hover .logo-container { bottom: -70% !important; width: 250px !important; height: 270px !important; padding: 20px !important; } .icon-hover .logo-container img { width: 137px !important; } .filter-panel.open { right: 0px !important; } .our-service-main-title .main-title { font-size: 32px !important; line-height: 40px; } .our-services-main-des { font-size: 1.1rem; line-height: 30px; } .content-area-title.title-3 { line-height: 30px !important; } .why-list-item-img { width: 15%; height: auto; } .purpose-content p { line-height: 25px; font-size: 1.1rem; } .value-better .swiper-pagination { bottom: 38%; top: unset; left: -10px; } .value-better-thumb.mySwiper { overflow: hidden; margin: 36px 0px 30px 0px; } .value-better-thumb .swiper-wrapper .swiper-slide a { padding: 0px 1px; } .sub-services-link { margin-left: 3rem; } .is-sub-hero-section { left: -100px; } .testimonials.swiper { position: unset; } .testimonial-bg { display: none; } .testimonial-heading { position: unset; } /* .second-services.sub-services-details{ padding:0px 20px; } */ .title-4 { font-size: 2rem; } .is-sub-hero-section { position: unset; padding-top: 2rem; } .container.no-gutters { padding-right: calc(var(--bs-gutter-x) * 0.5); margin-right: auto; } .title-5 { font-size: 1.3rem; } .paragraph-white .title-3 { font-size: 1.5rem; } .paragraph-white p { line-height: 30px; } .project-title a { font-size: 30px; } .filter-btn { min-width: 180px; height: 50px; } .our-honors { padding: 50px 0px !important; } .bg-opacity.img-hvr.reponsive { flex-direction: unset; margin-bottom: 1rem; } .our-services.mySwiper .slide-wrapper .slide-title { font-size: 1.8rem; } .services-list .lists li { font-size: 20px; } .hero-video .position-to-top { left: 43%; } .rbt-btn.rounded-player-2 { width: 80px; height: 80px; } .our-value-info p { line-height: 30px; } .career-describe { margin-top: 1rem; } .is-topspace { margin-top: 50px; } .sub-services-details { padding: 0px 20px; } .second-services.sub-services-details { padding: 0px 20px; } .contact-info { padding: 30px 0px; } .graphics-services { padding-top: 2rem; height: 280px; } .border-img::after { right: -11px; width: 10px; } .subservices-description { bottom: 60px; } .tab-title { font-size: 18px; } .paragraph-white .title-3 { line-height: 32px; } .our-container { padding-left: 70px; } .footer-customer-services { flex-direction: column !important; align-items: start !important; } } /*----------------------------------------------- 576px----------------------------------------------- */ @media only screen and (max-width: 576px) { .recommendations-client-img { background-color: var(--secondary-color); } .recommendations-client-img img { object-fit: contain !important; } p { font-size: 0.9rem; line-height: 26px; } .heading-1 { font-size: 24px !important; } .title-2 { font-size: 1.2rem; } .hero-caption { font-size: 1rem; line-height: 20px; letter-spacing: 2.3px; } .hero-title span { line-height: 55px; } .subtext { width: 100%; font-size: 1rem; display: flex; /* justify-content: center; */ line-height: 20px; letter-spacing: 3px; } .count-round .round { width: 100px; min-height: 100px; } .count-round .round .count { font-size: 40px; } .count-round .content span { font-size: 20px; top: -63px; left: -15px; padding: 0px 0px 13px 14px; } .value-des-left .icon { width: 120px; height: 120px; } .value-des-right .icon { width: 120px; height: 120px; } .normal-text { font-size: 18px; } .text-small { font-size: 14px; } .sub-services-link { margin-left: 0rem; } .our-services.mySwiper .swiper-slide { padding: 15px 12px; } .our-services.mySwiper { bottom: -30%; } .services-list .lists li { font-size: 18px; } .our-services.mySwiper .slide-wrapper .slide-title { font-size: 1.425rem; } .testimonial_slide_content { height: 450px !important; } .bg-opacity.img-hvr:hover .text { bottom: 3rem; padding: 0.5rem 0.5rem 0rem 0.5rem; } .bg-opacity.img-hvr .text { padding: 0.5rem 0.5rem 0rem 0.5rem; } .bg-opacity.img-hvr .text .hover-text { font-size: 14px; font-weight: 500; line-height: 16px; } .company-perform { padding: 2rem 0rem; } .our-services { padding: 40px 0px 0px 0px; } .sub-services { height: 250px; } /* .sub-services-details { padding: 0px 20px; } */ .sub-service-title { font-size: 1.5rem; } .design-expertise-icon { width: 100px; height: 100px; } .design-expertise-icon-content img.default-img { width: 50px; height: 50px; } .design-expertise-icon-content img.hover-img { width: 50px; height: 50px; } .design-expertise-title .title-5 { font-size: 1.1rem; } .sub-services-link { display: flex; flex-direction: column; align-items: center; /* margin-left: 0rem; */ } .graphics-services { height: 280px; } .mission-vision-tab-title { font-size: 16px; } .tabs-sec { padding: 0px 0px; } .tab { padding: 10px 0px !important; } .logo-container { width: 210px; height: 210px; padding: 20px 30px; } .screen { height: 300px; } .map-address-details { padding: 30px !important; } .timeline li { margin-bottom: 1rem; } .form-container { padding: 20px 20px; } .value-better-thumb .swiper-wrapper .swiper-slide a { font-size: 16px; } .value-better-thumb .swiper-wrapper .swiper-slide a { padding: 0px 3px; } .value-better-thumb.mySwiper { margin: 30px 0px 40px 0px; } .testimonial-content { width: 85% !important; } .our-core-value-title .bold-title::before, .our-core-value-title .bold-title::after { content: unset; } /* .work-culture { left: 50px; } */ .bold-title { font-size: 22px !important; } .title { font-size: 1.4rem; } .btn-with-icon { width: 250px !important; font-size: 14px !important; } .filter-panel.open { right: 0px !important; } .filter-panel { padding: 11px 8px; top: 0; overflow-y: auto; max-height: 100vh; } .project-title a { font-size: 28px; } .purpose-content p { line-height: 28px !important; /* font-size: 1.180rem; */ } .our-value-info p { line-height: 24px; } .section-subdescription { font-size: 16px; } .is-sub-hero-section { left: 15px; } .our-services .our-value-info { margin-top: 0rem; } .title-same { font-size: 1.5rem; } .tab-mission-title { line-height: 30px; font-size: 1.3rem; } .value-better .content h2 { font-size: 22px; line-height: 35px; } .testimonial-heading.bold-title { font-size: 22px !important; } .testi-name { font-size: 18px !important; line-height: 1.25rem !important; } .testi-role { font-size: 14px !important; } .footer { padding: 30px 0px 0px 0px; margin-top: 40px; } .title-4 { font-size: 1.8rem; } /* .years-container button { padding: 3px 17px !important; } */ .work-culture-img { margin-bottom: 1rem; } /* .work-culture .swiper-slide { padding: 20px 20px !important; } */ .work-culture-img { margin-bottom: 1rem; } .text-small { font-size: 0.9rem !important; } .our-product { padding: 2rem 0rem 5rem 0rem; } .value-better .swiper-pagination { bottom: 32%; } .subservice-title-content { padding: 35px 25px; } .tab-title { font-size: 16px; } .empolyee-benefit-sec { padding: 30px 0px; } .hiring-process-sec { padding: 30px 0px; } .open-positions { padding: 30px 0px; } .footer-link-services ul { flex-wrap: wrap; } .why-list-container { padding-left: 20px; } .recommendations .swiper-pagination { max-width: 350px; } .our-container { padding-left: 40px; } .group-logo-container { margin-top: 40px; } .contact-address { width: 90%; } .contact-us-swiper { top: 340px !important; } } .app-screenshot { height: 500px; } /*----------------------------------------------- 480px----------------------------------------------- */ @media only screen and (max-width: 480px) { .top-header span { font-size: 12px; } .formula-content { padding-left: 20px; } .top-header span a { color: var(--bs-white); text-decoration: none; font-size: 10px; } .hero-caption { font-size: 0.8rem; line-height: 19px; letter-spacing: 1.3px; } .get-touch-btn { width: 250px !important; height: 54px !important; font-size: 0.8rem !important; } .get-touch-btn:hover { font-size: 14px !important; } .know-more { width: 200px; height: 50px; font-size: 0.8rem; } .filter-btn { font-size: 0.8rem; } .platform-img { width: auto; height: 65%; } .service-content { padding: 7px 0px 0px 0px; } .all-service-title { font-size: 1.125rem; line-height: 0px; } .our-services.mySwiper { /* bottom: -22%; */ bottom: -30%; } .culture-event-date { flex-direction: column; } .count-round .content span { font-size: 16px; } .hero-title span { font-size: 1.55rem; line-height: 30px; } .heading-1 { font-size: 24px !important; line-height: 40px; } .our-process-img-overlay-text { font-size: 24px; line-height: 34px; } .our-process-img-overlay-text { width: 85%; } .tech-title { font-size: 18px; } .tech-detail { font-size: 20px; } .logo-container { width: 165px; height: 166px; padding: 15px 24px; } .screen { height: 250px; } .contact-form { padding: 30px 30px; } .contact-content { padding: 30px 30px; } .office-title { font-size: 20px !important; } .icon-with-bg { padding: 10px 10px; } .benefit-content h3 { font-size: 14px; } .hiring-number { font-size: 50px; } .apply-for-link .custom-link { font-size: 1rem !important; } .job-card .title-4 { font-size: 25px !important; } .our-core-value-title .bold-title::before, .our-core-value-title .bold-title::after { display: none; } .our-core-value { padding: 50px 0px; } .testimonial-content { padding: 10px; } .testimonial-content .testi-content { font-size: 12px; } /* .years-container button { padding: 6px 7px; } */ .icon-hover .logo-container { bottom: -94% !important; } .content-area-title.title-3 { line-height: 35px !important; font-size: 1.375rem; } .services-list .lists li { font-size: 17px; } .services-slider.swiper-button-next { width: 50px !important; height: 50px !important; top: 120% !important; } .services-slider.swiper-button-prev { width: 50px !important; height: 50px !important; top: 120% !important; } .our-purpose { margin-top: 10rem !important; } .question-img img { /* width: 60%; */ width: 100%; height: auto; } .services-list .lists li { font-size: 17px; } .value-des-left .icon { top: 65px; width: 90px; height: 90px; } .value-des-left .icon img { width: 65%; height: auto; } .value-des-right .icon { top: 65px; width: 90px; height: 90px; } .value-des-right .icon img { width: 65%; height: auto; } .value-des-left { height: 210px; } .value-des-right { height: 210px; } .heading-1 { line-height: 30px; } p { line-height: 22px; } .sub-services-details { text-align: center; } .sub-services-para-service { text-align: center; } .our-services-area { padding: 35px 0px 0px 0px; } .years-container { right: -11px; top: -32px; } .second-services.sub-services-details { padding: 0px; } .value-better .swiper-pagination { bottom: 37%; } .bg-opacity .hover-text { line-height: 13px; } .bg-opacity.img-hvr:hover .text .title-3 { bottom: 2em; } .bg-opacity.img-hvr:hover .text-overlay .hover-text { padding: 0px 10px; } .bg-opacity.img-hvr .text .title-3 { padding: 1.5rem 1.5rem 0rem 0.2rem; } .form-desc { font-size: 16px; line-height: 20px; } .form-label { font-size: 0.8rem; } .forgot-password { font-size: 14px; } .navbar-brand img { width: 70%; height: auto; } .services-sub-icon { width: 60px; height: auto; } section { margin-top: 30px !important; } .owners { padding-bottom: 20px; } .employees { padding: 30px 0px; } .years-container { top: -22px; } .text .title-3 { font-size: 1rem; line-height: 20px; } .bg-opacity .hover-text { font-size: 12px; } .hero-video .position-to-top { left: 41%; } .rbt-btn.rounded-player-2 { width: 55px; height: 55px; } .play-btn-banner { width: 20px; height: 30px; } .hiring-title { font-size: 20px !important; } .job-title { font-size: 14px; } .paragraph-white .title-3 { line-height: 30px; } .paragraph-white .title-3 { font-size: 1.3rem; } .navbar-collapse { top: 56px; } .our-container { padding-left: 20px; } /* ----Graphics Page-----*/ .creative-grahics-section, .software-creative-section { padding: 30px 0; } .creative-grahics-section, .logofolio-section, .social-media-section, .software-creative-section { padding: 30px 0; } .grahpics-logo-card { width: 55px; height: 55px; } .graphics-logo-img img { width: 60%; } .creative-feild-list { margin-top: 0; } .graphics-logo-container { gap: 10px; margin-top: 6px; } .group-logo-container { margin-top: 20px; } .social-media-content { margin-top: 20px; } .social-media-card { margin-bottom: 30px; } .work-title { font-size: 24px; } .graphics-software-title { font-size: 20px; } .product-container { margin: 30px 0; } .product-feature-highlight { font-size: 12px; } .product-logo { width: 150px; } .product-swiper-Slider { margin-top: 20px; } } /*----------------------------------------------- 400px----------------------------------------------- */ @media only screen and (max-width: 400px) { .our-services.mySwiper2 .swiper-slide img { width: 100%; height: 200px; } .our-services.mySwiper .slide-wrapper .slide-title { line-height: 30px; } .testimonial_slide_content { height: 500px !important; } .design-expertise-icon { width: 80px; height: 80px; } .design-expertise-icon-content img.default-img { width: 40px; height: 40px; } .design-expertise-icon-content img.hover-img { width: 40px; height: 40px; } .design-expertise-title .title-5 { font-size: 0.938rem; } .logo-container { width: 130px; height: 130px; padding: 15px 24px; } .icon-hover .logo-container img { width: 102px !important; } .icon-hover .logo-container { bottom: -127% !important; width: 210px !important; height: 255px !important; } .value-better .swiper-pagination { bottom: 45%; } .normal-text { font-size: 16px; } } /* 20-09 */ .main_content, .sub_content { position: relative; display: flex; justify-content: center; align-items: center; } .round_1, .circle_1 { display: flex; justify-content: center; align-items: center; width: 648px; height: 648px; border: 2px solid var(--primary-color); border-radius: 50%; } .round_2, .circle_2 { display: flex; justify-content: center; width: 433px; height: 433px; padding: 75px; border-radius: 50%; background-color: var(--secondary-color); } .round_2 img, .circle_2 img { width: 100%; height: auto; border-radius: 50%; object-fit: cover; } .our-process-content { position: absolute; width: 100%; left: 0; top: 0; } .step { position: relative; color: #fff; } .step_info_4 { position: absolute; top: 100px; left: 10px; } .step_info_1 { position: absolute; top: 100px; left: 32px; } .step_info_2 { position: absolute; top: 513px; left: 10px; } .step_info_3 { position: absolute; top: 513px; /* left: 100px; */ } .step_info_4 { text-align: end; } .step_info_1 { text-align: start; } .step_info_2 { text-align: start; } .step_info_3 { text-align: end; } .step_num_4, .step_num_1, .step_num_2, .step_num_3 { position: absolute; display: flex; justify-content: center; align-items: center; background-color: #fff; color: #000; width: 24px; height: 24px; border-radius: 50%; } .step_info_4 h3, .step_info_1 h3, .step_info_2 h3, .step_info_3 h3 { font-size: 32px; color: var(--bs-white); font-family: "poppins"; font-weight: 600; /* letter-spacing: 2px; */ } .step_info_4 h4, .step_info_1 h4, .step_info_2 h4, .step_info_3 h4 { font-size: 18px; color: var(--bs-white); font-family: "poppins"; font-weight: 300; /* letter-spacing: 2px; */ line-height: 26px; } .step_num_4 span, .step_num_1 span, .step_num_2 span, .step_num_3 span { font-size: 16px; color: #000; font-family: "poppins"; font-weight: 500; /* letter-spacing: 2px; */ line-height: 26px; } .step_num_4 { top: 103px; } .step_num_1 { top: 103px; right: 11px; } .step_num_2 { top: 522px; right: 11px; } .step_num_3 { top: 522px; } .step_icon_4, .step_icon_1, .step_icon_2, .step_icon_3 { position: absolute; display: flex; justify-content: center; align-items: center; width: 81px; height: 81px; border-radius: 50%; background: linear-gradient(270.68deg, #e21016 0.58%, #ee2b2b 95.21%); } .step_icon_4 { top: 130px; left: 0; } .step_icon_1 { top: 130px; right: 0; } .step_icon_2 { top: 440px; right: 0; } .step_icon_3 { top: 440px; left: 0; } .main-container { position: relative; /* display: none; */ } .sub-section { display: none; } .sub-content { position: absolute; left: 50%; width: 100%; } .sub-step { position: absolute; width: 100%; color: #fff; } .sub_step_info, .sub_step_num, .sub_step_icon { position: absolute; } .sub_step_icon { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background-color: var(--primary-color); border-radius: 50%; } .sub_step_icon img { width: 25px; height: 25px; } .sub_step_num { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; color: #000; } .sub_step_icon_1 { top: -120px; left: 27px; } .sub_step_icon_2 { top: -65px; left: 85px; } .sub_step_icon_3 { top: 25px; left: 85px; } .sub_step_icon_4 { top: 80px; left: 27px; } .sub_step_num_1 { top: -150px; left: 90px; } .sub_step_num_2 { top: -50px; left: 160px; } .sub_step_num_3 { top: 25px; left: 160px; } .sub_step_num_4 { top: 133px; left: 90px; } .sub_step_info_1 { top: -170px; left: 150px; } .sub_step_info_2 { top: -86px; left: 190px; } .sub_step_info_3 { top: 15px; left: 190px; } .sub_step_info_4 { top: 120px; left: 150px; } .location-of-city { display: flex; flex-direction: column; height: 100%; /* Make the container take up the full height */ } .location-img { width: 100%; height: auto; overflow: hidden; position: relative; } .location-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease-out; } .location-img:hover img { transform: scale(1.2); } .location-details { padding: 30px 30px; background-color: var(--bs-white); flex-grow: 1; /* Make this section grow to fill available space */ display: flex; flex-direction: column; } .location-title { font-size: 26px; font-family: "poppins"; font-weight: 500; color: var(--primary-color); display: inline-flex; position: relative; } .location-title::after { content: ""; position: absolute; width: 20px; height: 3px; background-color: var(--primary-color); right: -30px; top: 50%; } .address-detail-title { font-size: 16px; font-family: "poppins"; font-weight: 300; color: #898282; } .address-detail-content a { font-size: 16px; font-family: "poppins"; font-weight: 300; color: var(--secondary-color); text-decoration: none; } .address-detail-content-time { font-size: 16px; font-family: "poppins"; font-weight: 300; color: var(--secondary-color); text-decoration: none; } .map-img { width: 100%; height: auto; } .map-img img { width: 100%; height: auto; } .map-address-details { padding: 60px; background-color: var(--secondary-color); } .office-title { font-size: 28px; font-family: "poppins"; font-weight: 400; color: var(--primary-color); display: inline-flex; position: relative; } .office-title::after { content: ""; position: absolute; width: 20px; height: 3px; background-color: var(--primary-color); right: -30px; top: 50%; } .office-name { font-size: 18px; font-family: "poppins"; font-weight: 400; color: var(--bs-white); } .office-address-title { font-size: 16px; font-family: "poppins"; font-weight: 300; color: var(--bs-white); } .office-address { font-size: 16px; font-family: "poppins"; font-weight: 300; color: #898282; } .hiring-timing-sec { background-color: rgba(20, 20, 24, 1); padding: 80px 0px; } .hire-talent-details { background-color: var(--bs-white); padding: 30px; height: 100%; display: flex; flex-direction: column; } .availablity { font-size: 20px; font-family: "poppins"; font-weight: 500; color: var(--primary-color); } .position-label span { background-color: var(--bg-color); color: var(--bs-white); padding: 5px 22px; } .hire-now-link { font-size: 18px; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: 3px; text-decoration: none; line-height: 60px; margin-top: auto; } .hire-now-link:hover { text-decoration: underline; } .hire-now-link:after { content: url("../images/svg/right-hire.svg"); display: inline-block; margin-left: 15px; vertical-align: middle; transition: transform 0.3s ease; transform-origin: center; } .hire-now-link:hover::after { content: url("../images/svg/Hover_Arrow.svg"); transition: transform 0.3s ease; } .hire-content { font-size: 22px; font-weight: 400; color: rgba(137, 130, 130, 1); } .hiring-timing-details { background-color: var(--bs-white); padding: 40px; display: flex; flex-direction: column; position: relative; height: 100%; } .timing-title { font-size: 36px; font-family: "poppins"; font-weight: 600; color: var(--primary-color); } .hiring-timing-details ul { font-family: "poppins"; margin-top: 40px; } .hiring-timing-details ul li { color: var(--secondary-color); font-size: 24px; font-weight: 400; margin-bottom: 10px; } .hiring-timing-details ul li:last-child { font-weight: 500; } .hiring-timing-details ul li::marker { color: rgba(193, 193, 193, 1); } .hiring-timing-details:hover { background-color: var(--bg-color); transition: all 0.1s ease; } .hiring-timing-details:hover ul li { color: rgba(193, 193, 193, 1); } .hiring-timing-details:hover ul li:last-child { color: var(--bs-white); } .hiring-timing-details:hover .btn-with-icon { background-color: var(--bs-white); color: var(--primary-color); } .work-process-img { width: auto; height: 100%; display: flex; justify-content: center; align-items: center; } .workprocess-para { font-weight: 300; font-size: 16px; color: #898282; line-height: 26px; } .work-process-img img { width: 100%; height: auto; object-fit: cover; } .content-area-title-hiring { line-height: 10px; } .content-area-title-hiring.title-3 { font-weight: 500; font-size: 25px; } @media only screen and (max-width: 1400px) { .step_info_4 { position: absolute; top: 100px; left: -100px; } .step_info_1 { position: absolute; top: 100px; left: 80px; } .step_info_2 { position: absolute; top: 513px; left: 55px; } .step_info_3 { position: absolute; top: 513px; left: -50px; width: auto; } .step_num_4 { top: 110px; left: -33px; } .step_num_1 { top: 110px; right: -33px; } .step_num_2 { top: 513px; right: -33px; } .step_num_3 { top: 513px; left: -33px; } .step_icon_4 { top: 130px; left: -30px; } .step_icon_1 { top: 130px; right: -30px; } .step_icon_2 { top: 440px; right: -30px; } .step_icon_3 { top: 440px; left: -30px; } } @media only screen and (max-width: 1400px) and (min-width: 1200px) { .sub-services-link { padding-left: 4rem !important; } } @media only screen and (max-width: 1300px) and (min-width: 1200px) { .step_info_4 h3, .step_info_1 h3, .step_info_2 h3, .step_info_3 h3 { font-size: 28px; } .step_info_4 { left: -55px; } } @media only screen and (max-width: 1200px) { .hiring-timing-details { padding: 15px; } } @media only screen and (max-width: 1199.5px) { .round_1, .circle_1 { width: 500px; height: 500px; } .round_2, .circle_2 { width: 333px; height: 333px; } .step_info_4 h3, .step_info_1 h3, .step_info_2 h3, .step_info_3 h3 { font-size: 20px; } .step_info_4 h4, .step_info_1 h4, .step_info_2 h4, .step_info_3 h4 { font-size: 14px; } .step_icon_4, .step_icon_1, .step_icon_2, .step_icon_3 { width: 65px; height: 65px; } .step_icon_4 img, .step_icon_1 img, .step_icon_2 img, .step_icon_3 img { width: 60%; height: auto; } .step_info_4 { position: absolute; top: 100px; left: -20px; } .step_info_1 { position: absolute; top: 100px; left: 55px; } .step_info_2 { position: absolute; top: 370px; left: 55px; } .step_info_3 { position: absolute; top: 370px; left: -33px; } .step_num_4 { top: 110px; left: -33px; } .step_num_1 { top: 110px; right: -33px; } .step_num_2 { top: 370px; right: -33px; } .step_num_3 { top: 370px; left: -33px; } .step_icon_4 { top: 130px; left: -38px; } .step_icon_1 { top: 130px; right: -38px; } .step_icon_2 { top: 310px; right: -38px; } .step_icon_3 { top: 310px; left: -38px; } } @media only screen and (max-width: 992px) { .hire-talent-details { padding: 10px; } .skills-label { font-size: 20px; } .hire-content { font-size: 18px; } .last-child-hiring { margin: 0px auto; } .hiring-timing-details { justify-content: center; align-items: center; text-align: center; } .step_info_3, .step_info_4 { width: 100%; } .step_info_3 { top: 260px; left: -40px; } .group-logo-container { margin-top: 50px; } .contact-us-swiper { top: 276px !important; } } @media only screen and (max-width: 991.5px) { .round_1, .circle_1 { width: 350px; height: 350px; } .round_2, .circle_2 { width: 230px; height: 230px; padding: 50px; } .step_info_4, .step_info_1, .step_info_2, .step_info_3, h3 { font-size: 18px; } .sub_step_info p { font-size: 12px !important; line-height: 14px; } .step_icon_4, .step_icon_1, .step_icon_2, .step_icon_3 { width: 40px; height: 40px; } .step_icon_4 svg { width: 25px; height: 25px; } .step_icon_1 svg { width: 25px; height: 25px; } .step_icon_2 svg { width: 25px; height: 25px; } /* .step_icon_3,step_info_4{ width: 100%; } */ .step_icon_3 svg { width: 25px; height: 25px; } .step_info_4 { top: 70px; left: -47px; } .step_info_1 { top: 70px; left: 35px; } .step_info_2 { top: 260px; left: 35px; } .step_num_4 { top: 70px; left: -15px; } .step_num_1 { top: 70px; right: -15px; } .step_num_2 { top: 260px; right: -15px; } .step_num_3 { top: 260px; left: -15px; } .step_icon_4 { top: 95px; left: -18px; } .step_icon_1 { top: 95px; right: -18px; } .step_icon_2 { top: 220px; right: -18px; } .step_icon_3 { top: 220px; left: -18px; } } @media (max-width: 768px) { .our-process-section { position: relative; left: -50%; } .sub-section { display: flex; justify-content: center; align-items: center; } .main-container { display: none; } .hire-talent-details { padding: 20px; } .contact-us-swiper { top: 400px !important; } } .services-listing { text-align: center; max-width: 300px; margin: 0 auto; } .service-section span { margin: 0; } .service-section span a { color: var(--secondary-color); list-style: none; font-size: 18px; font-family: "poppins"; font-weight: 400; line-height: 2.5rem; text-decoration: none; } .sub-services-1 { list-style: none; padding-left: 0; /* margin-top: 10px; */ display: inline-block; text-align: left; padding-left: 15px; margin-bottom: 0; } .sub-services-1 li { /* margin-bottom: 8px; */ position: relative; color: var(--secondary-color); font-size: 14px; font-weight: 400; font-family: "poppins"; } .sub-services-1 li::before { content: "•"; position: absolute; left: -15px; color: var(--secondary-color); } .updated-post-item:hover .post-title { color: var(--primary-color); } .recommendations-client-img { height: 360px; } .recommendations-client-img img { object-position: top; height: 100%; width: 100%; object-fit: cover; } /* Update Header on Scroll */ .banner-header.sticky #navbarSupportedContent { height: 70px; /* background-color: red; */ } .banner-header.sticky #navbarSupportedContent .navbar-nav { height: 70px; } .banner-header.sticky #navbarSupportedContent .nav-item { height: 70px; } .banner-header.sticky #navbarSupportedContent .nav-link { height: 70px; display: flex; align-items: center; font-size: 16px; } .project_link_hover:hover { color: var(--primary-color); } .fancybox__slide { position: relative; /* right: 60px; */ } .f-caption { right: 10px; } .swiper-button-disabled, button[disabled] { opacity: 0.5; pointer-events: none; cursor: not-allowed; } .app-screenshot .gallery-list { height: 100%; } .reel-view-all-button { color: white; text-decoration: none; text-transform: uppercase; } .contact-us-swiper { width: 45px; /* border: 2px var(--primary-color) solid; */ visibility: visible; height: 45px; border-radius: 50%; top: 325px; background: white; } .contact-us-right { right: 10px; } .contact-us-left { left: 10px; } .location-highlight { color: var(--primary-color); font-weight: 400; font-size: 16px; font-family: "poppins"; } @media screen and (max-width:576px) { .contact-us-swiper { top: 340px !important; } } @media screen and (max-width:480px) { .contact-us-swiper { top: 280px !important; } } .content-area p { font-size: 22px !important; } .get-in-touch-content p { font-size: 20px !important; } p.all-service-des { font-size: 18px; } .our-work-careers-para { font-size: 18px; } .sub-services-para-service { font-size: 18px; } .visual-identity-card { text-decoration: none; } .visual-identity-card:hover .work-title { color: var(--primary-color); } /* Wrapper for all images .img-wrapper { position: relative; overflow: hidden; background: #141418; } Placeholder (blurred background) .img-wrapper::before { content: ""; position: absolute; inset: 0; background: #141418; filter: blur(20px); transition: opacity 0.4s ease; z-index: 1; } Hide placeholder once loaded .img-wrapper.loaded::before { opacity: 0; } Image fade-in .img-wrapper img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity 0.6s ease; position: relative; z-index: 2; } .img-wrapper.loaded img { opacity: 1; } */ /* @media screen and (max-width:768px) { .container{ padding: 0 20px; } } */