html{
max-width:1920px;
margin: 0 auto;
font-size:16px;
}
:root {
/* --at-theme-primary: #2048fc; */
--at-theme-primary: #06c;
}
.sec-1-home-7__bg-left {
background: #bcbcbc;
}
.sec-1-home-7 .sec-1-home-7__bg .sec-1-home-7__bg-right {
background: #00082c !important;
}
/* ---header menu start-- */
.at-main-menu.menu-light.style-1 {
background: rgb(21 20 37);
height: 38px;
border-radius: .4rem;
}
@media screen and (min-width: 1280.33px){
.at-header-spacing {
padding: 10px 20px;
}
}
.sharktech-cta-header{
background-color: rgb(107 100 100 / 41%);
}
@media screen and (min-width: 1280.33px){
.at-header-logo {
justify-content: center;
}
}
.at-main-menu.menu-light nav ul li.no-dropdown > a {
color: #fff;
}
.at-main-menu nav ul li.no-dropdown > a::after {
display: none;
filter: invert(1);
}
.at-main-menu.menu-light nav ul li:hover.no-dropdown > a {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.at-main-menu nav ul li a {
/* padding: 10px 12px; */
padding: 10px 7px;
}
.at-main-menu > nav > ul > li > a {
--link-desc-room: 2px;
}
@media screen and (max-width: 576px){
.hamburger1 {
display: none !important;
}
}
/* offcanvas */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li > a {
font-size: 23px;
/* font-size: 30px; */
}
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.at-offcanvas-2-left .at-offcanvas-menu {
margin-bottom: 40px;
}
}
.at-offcanvas-2-left .at-offcanvas-menu {
border-bottom: 1px solid var(--at-neutral-100);
padding-bottom: 24px;
}
.at-offcanvas-social {
margin-top: 20px;
margin-bottom: 20px;
}
/* --offcanvas dropdwon-- */
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .at-submenu{
padding-bottom: 10px;
}
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .at-menu-close i {
font-size: 23px;
}
.at-offcanvas-menu nav ul .has-dropdown .at-menu-close{
top: 0rem;
}
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .submenu > li > a {
font-size: 16px;
font-weight: 400;
line-height: 1;
transition: 0.3s;
color: var(--at-neutral-900);
letter-spacing: -0.02em;
font-family: var(--at-ff-body);
position: relative;
}
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .submenu > li > a::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 5px;
height: 5px;
z-index: -1;
background-color: var(--at-neutral-900);
border-radius: 50%;
transition: 0.3s;
}
@media (max-width: 574.98px) {
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li > a {
font-size: 36px;
}
.at-offcanvas-menu nav ul .has-dropdown .at-menu-close {
top: 0.5rem;
}
}
@media screen and (max-width: 576px){
.at-offcanvas-menu .at-submenu > li > a {
/* font-size: 16px; */
font-weight: 400;
line-height: 1;
transition: 0.3s;
color: var(--at-neutral-900);
letter-spacing: -0.02em;
font-family: var(--at-ff-body);
position: relative;
}
.at-offcanvas-menu .at-submenu > li > a::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 5px;
height: 5px;
z-index: -1;
background-color: var(--at-neutral-900);
border-radius: 50%;
transition: 0.3s;
}
}
/* ---offcanvas extra menu -- */
.at-offcanvas-menu .at-offcanvas-extra-menu {
list-style: none;
padding: 0;
padding-top: 0px !important;
/* margin: 10px 0 0 0;
padding-top: 10px; */
}
.at-offcanvas-menu .at-offcanvas-extra-menu li a {
display: block;
font-size: 23px;
padding: 0;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.04em;
color: var(--at-common-black);
transition: all 1.5s ease-in-out !important;
}
/* @media only screen and (min-width: 1422.33px) {
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li > a {
font-size: 30px !important;
}
} */
@media only screen and (min-width: 1280.33px) {
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li > a {
font-size: 23px;
/* font-size: 30px; */
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.at-offcanvas-menu .at-offcanvas-extra-menu li a{
font-size: 23px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.at-offcanvas-menu .at-offcanvas-extra-menu li a {
font-size: 54px;
}
}
@media (max-width: 574.98px) {
.at-offcanvas-menu .at-offcanvas-extra-menu li a{
font-size: 36px;
}
}
/* dropdown carrot */
.at-main-menu nav ul li.has-dropdown > a::after {
/* bottom: 13px;
right: 2px; */
bottom: 15px;
right: -2px;
width: 5px;
height: 5px;
}
.sec-7-home-7 {
background: #00082c;
}
/* -- */
/* @media screen and (max-width: 768px){
.header-7 #header7Nav,
.header-7.is-menu-open #header7Nav {
display: none !important;
}
} */
@media screen and (max-width: 1199.98px){
.hamburger1 {
display: none !important;
}
}
@media screen and (max-width: 1199.98px){
.header-7 #header7Nav,
.header-7.is-menu-open #header7Nav {
display: none !important;
}
}
/* ---sub-dropdown-- */
/* Nested submenu (2nd level) inside header dropdowns */
.at-main-menu.menu-light nav ul li .submenu li.has-dropdown > a {
color: var(--at-neutral-500);
background: transparent;
padding-right: 36px; /* room for the arrow */
}
.at-main-menu.menu-light nav ul li .submenu li.has-dropdown:hover > a {
color: var(--at-neutral-900);
background: var(--at-neutral-50);
}
/* arrow points right, vertically centred, dark colour */
.at-main-menu.menu-light nav ul li .submenu li.has-dropdown > a::after {
top: 50%;
bottom: auto;
right: 18px;
filter: none;
transform: translateY(-50%) rotate(-45deg);
}
/* small gap so it doesn't touch the parent panel */
.at-main-menu nav ul li .submenu li .submenu {
top: -12px; /* lines up with the parent item (matches the 12px panel padding) */
left: 100%;
}
/* header menu end */
/* HOME PAGE STYLES */
/* home-hero-video */
.hero {
position: relative;
/* width: calc(100% - 40px); */
/* max-width: 1920px; */
height: calc(100vh - 40px);
min-height: 480px;
margin: 0.5rem auto;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.hero__overlay{
position:absolute;
inset:0;
z-index:2;
/* background: linear-gradient(to bottom, rgb(255 255 255), rgb(0 0 0 / 0%), rgb(0 0 0 / 22%)), radial-gradient(circle at center, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, .22)); */
background: linear-gradient(to bottom, rgb(255 255 255), rgb(0 0 0 / 0%), rgb(0 0 0 / 22%)), radial-gradient(circle at center, rgb(0 0 0 / 25%), rgb(0 0 0 / 51%));
}
.hero__content{
position:relative;
z-index:3;
width:100%;
max-width:1200px;
padding:0 40px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
/* -- */
flex-direction: column;
}
.hero-slide{
position:absolute;
opacity:0;
transform:translateY(30px);
transition:all .9s cubic-bezier(.22,.61,.36,1);
pointer-events:none;
}
.hero-slide.active{
opacity:1;
transform:translateY(0);
}
.hero-eyebrow{
display:block;
margin-bottom:18px;
font-size:.82rem;
letter-spacing:.45em;
text-transform:uppercase;
font-weight:600;
color:rgba(255,255,255,.8);
}
.hero-slide h1{
margin:0;
font-size:clamp(3.3rem,7vw,4rem);
line-height:.95;
font-weight:600;
letter-spacing:-0.01em;
color: #fff;
}
.hero-slide p{
margin-top:24px;
font-size:1.15rem;
color:rgba(255,255,255,.82);
max-width:650px;
line-height:1.7;
}
.hero-dots{
position:absolute;
bottom:60px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:12px;
}
.hero-dots span{
width:10px;
height:10px;
border-radius:50%;
background:rgba(255,255,255,.35);
transition:.4s;
}
.hero-dots span.active{
width:28px;
border-radius:20px;
background:#fff;
}
@media(max-width:768px){
.hero{
/* width:calc(100% - 20px); */
height:calc(100svh - 20px);
margin:10px auto;
}
.hero__content{
padding:0 20px;
}
.hero-slide h1{
font-size:clamp(2.4rem,12vw,4.5rem);
}
.hero-slide p{
font-size:.95rem;
line-height:1.6;
}
.hero-eyebrow{
font-size:.72rem;
letter-spacing:.3em;
}
.hero-dots{
bottom:35px;
}
}
@media(max-width:480px){
.hero{
/* width:calc(100% - 16px); */
height:calc(100svh - 16px);
margin:8px auto;
}
.hero-slide h1{
font-size:2.2rem;
}
.hero-slide p{
font-size:.9rem;
}
}
/* --home-hero-video-ends-- */
.sec-1-home-7__headline {
font-size: 54px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.sec-1-home-7__headline {
font-size: 54px !important;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.sec-1-home-7__headline {
font-size: 58px !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.sec-1-home-7__headline {
font-size: 50px !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.sec-1-home-7__headline {
font-size: 52px !important;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.sec-1-home-7__headline {
font-size: 42px !important;
}
}
@media (max-width: 574.98px) {
.sec-1-home-7__headline {
font-size: 32px !important;
}
}
/* --sec2-home page */
@media (max-width: 574.98px){
.sharktech-products h2 {
font-size: 32px;
}
}
/* ---capsules */
.capsule .client-box {
width: 186px !important;
height: 66px !important;
}
.gdpr .client-box {
width: 149px !important;
height: 66px !important;
}
.client-capsule-wrapper {
margin-top: -298px;
}
/* --mission section */
@media screen and (max-width: 576px){
.mission-mail p{
margin-left: 4em;
}
.mission-mail{
margin-top: 0;
}
}
.home-mission .sec-6-home-7__desc {
max-width: 80%;
margin-top: 2rem;
}
.home-mission .mission-row{
display: flex;
align-items: center;
}
.home-mission .mission-row .mission-col{
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 7rem;
}
@media screen and (min-width: 768px) and (max-width: 991.33px) {
.home-mission .sec-4-home-7__frame {
margin-inline: unset;
}
.home-mission .mission-row .mission-col {
margin-top: 2rem;
}
.home-mission{
padding-bottom: 30px;
}
}
@media screen and (max-width: 568px) {
.home-mission{
padding-bottom: 30px;
}
.home-mission .mission-row .mission-col {
margin-top: 2rem;
}
}
/* -----16june */
@media (max-width: 574.98px) {
.sec-1-home-7__img-wrap {
position: relative;
width: 100%;
max-width: 100%;
height: auto;
margin-top: 0;
}
.sec-1-home-7__img {
width: 100%;
height: auto;
object-fit: unset;
display: block;
}
}
@media (max-width: 520px) and (min-width: 500px) {
.sec-1-home-7__img-wrap {
max-width: 67.9% !important;
}
}
@media (max-width: 375px) and (min-width: 360px){
.sec-1-home-7__img-wrap {
margin-bottom: -23px !important;
}
}
@media screen and (max-width: 1120px){
.sec-1-home-7__cta{
margin-bottom: 25px !important;
}
}
/* @media only screen and (min-width: 1400px) and (max-width: 1599px) {
.sec-1-home-7__headline {
font-size: 60px;
}
} */
@media (min-width: 359px) and (max-width: 375.33px) {
.sec-1-home-7 .container-fluid {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
}
@media screen and (max-width: 768.33px) and (min-width: 768px){
.sec-1-home-7__img-wrap {
margin-bottom: 15px;
margin-top: 0px;
}
}
/* @media screen and (max-width: 1600px){
.sec-1-home-7__headline {
font-size: 58px;
}
} */
/* ---4july hero section */
@media screen and (min-width: 1014px){
.sec-1-home-7__img-wrap {
max-width: 50%;
margin-top: 0px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.sec-1-home-7__content {
padding: 30px 50px 30px;
max-width: 600px;
}
}
@media screen and (min-width:1422.22px) and (max-width:1599px){
.sec-1-home-7__content {
padding: 30px 60px 30px 125px;
}
}
/* --mob */
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
.sec-1-home-7__left {
padding-bottom: 0px;
}
}
/* ---home-divine-lab */
.divine-labs-section{
background:#1d1d1d;
overflow:hidden;
}
.divine-labs-row{
--bs-gutter-x:2rem;
align-items:center;
}
/* Left Content */
.divine-labs-content{
max-width:620px;
}
.divine-labs-title{
color:#fff;
font-weight:700;
line-height:1.08;
margin-bottom:22px;
}
.divine-labs-text{
color:rgba(255,255,255,.9);
font-size:20px;
line-height:1.7;
margin-bottom:35px;
max-width:520px;
}
.divine-labs-btn-group{
margin-top:10px;
}
/* Right Image */
.divine-labs-image-column{
display:flex;
justify-content:flex-end;
}
.divine-labs-image-box{
width:100%;
max-width:560px;
}
.divine-labs-image-box img{
width:100%;
height:auto;
display:block;
border-radius:24px;
}
/* Large Desktop */
@media (min-width:1400px){
.divine-labs-content{
padding-right:35px;
}
.divine-labs-image-box{
max-width:580px;
}
}
@media screen and (min-width:1280.33px){
.divine-labs-title{
font-size:60px;
}
}
/* Laptop */
@media (max-width:1199px){
.divine-labs-title{
font-size:58px;
}
.divine-labs-text{
font-size:19px;
}
.divine-labs-image-box{
max-width:500px;
}
}
/* Tablet */
@media (max-width:991px){
.divine-labs-section .container-2200{
padding-top:90px !important;
padding-bottom:90px !important;
}
.divine-labs-row{
row-gap:50px;
}
.divine-labs-content{
max-width:100%;
text-align: left;
margin:auto;
}
.divine-labs-text{
max-width:650px;
}
.divine-labs-btn-group{
justify-content:center;
}
.divine-labs-image-column{
justify-content:center;
}
.divine-labs-image-box{
max-width:650px;
}
}
/* Mobile */
@media (max-width:767px){
.divine-labs-section .container-2200{
padding-top:70px !important;
padding-bottom:70px !important;
}
.divine-labs-title{
font-size:42px;
line-height:1.15;
margin-bottom:18px;
}
.divine-labs-text{
font-size:17px;
line-height:1.7;
margin-bottom:28px;
}
.divine-labs-image-box img{
border-radius:18px;
}
}
/* Small Mobile */
@media (max-width:575px){
.divine-labs-section .container-2200{
padding-top:60px !important;
padding-bottom:60px !important;
}
.divine-labs-title{
font-size:34px;
}
.divine-labs-text{
font-size:16px;
}
.divine-labs-image-box{
max-width:100%;
}
}
/* HOME PAGE STYLES END */
/* section1 */
/* @media only screen and (min-width: 1200px) and (max-width: 1399px) {
.sec-1-home-7__headline {
font-size: 3.4rem;
letter-spacing: 0;
}
} */
@media screen and (max-width: 576px){
.sec-1-home-7__tags {
/* bottom: 25px; */
/* bottom: 12rem; */
}
}
/* red section */
.sec-7-home-7__star {
bottom: 50px;
}
/* ------------------------------VCPility PAGE------------------ */
.plaform-in .process-card__icon {
display: none;
}
/* --------------------------------VCPility PAGE END--------------- */
/* --------------------INVESTOR PAGE--------------- */
/* investor-products */
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
.investor-portfolio .at-service-card {
min-height: 100px;
}
}
/* --- */
.investor-sec1{
padding-bottom: 50px;
}
@media (max-width: 574.98px) {
.investor-sec1 .section-title {
font-size: 45px;
}
}
/* ---NEW TEAM SECTION-- */
.tm-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.tm-card{
position: relative;
border-radius: 22px;
overflow: hidden;
aspect-ratio: 3 / 4;
background-size: cover;
background-position: center;
isolation: isolate;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
/* base bottom gradient, always visible */
.tm-card::before{
content:"";
position:absolute;
inset:0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
transition: background 0.45s ease, opacity 0.45s ease;
z-index: 1;
}
.tm-arrow{
position: absolute;
top: 18px;
right: 18px;
width: 42px;
height: 42px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
transition: transform 0.4s ease;
}
.tm-arrow svg{
width: 16px;
height: 16px;
}
.tm-card:hover .tm-arrow,
.tm-card.tm-active .tm-arrow{
transform: rotate(45deg) scale(1.05);
}
.tm-info{
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 24px;
z-index: 2;
color: #fdfdfc;
transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
}
.tm-info h3{
margin: 0 0 6px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
color: #ffffff;
}
.tm-info .tm-role{
margin: 0;
font-size: 14px;
font-weight: 500;
opacity: 0.85;
line-height: 1.4;
color: #ffffff;
}
.tm-bio{
color: #ffffff;
margin: 10px 0 0;
font-size: 13.5px;
line-height: 1.55;
opacity: 0;
max-height: 0;
transform: translateY(6px);
transition: opacity 0.4s ease 0.05s, max-height 0.45s ease, transform 0.4s ease 0.05s;
}
.tm-card:hover::before,
.tm-card.tm-active::before{
background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgb(0 0 0 / 37%) 62%);
}
.tm-card:hover .tm-bio,
.tm-card.tm-active .tm-bio{
opacity: 1;
max-height: 160px;
transform: translateY(0);
}
.tm-card:hover .tm-info,
.tm-card.tm-active .tm-info{
transform: translateY(-2px);
}
/* keyboard focus support */
.tm-card:focus-visible{
outline: 3px solid #fff;
outline-offset: 2px;
}
.tm-card:focus-visible .tm-bio{
opacity: 1;
max-height: 160px;
transform: translateY(0);
}
.tm-card:focus-visible::before{
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.92) 62%);
}
@media (max-width: 900px){
.tm-grid{
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
}
@media (max-width: 560px){
.tm-grid{
grid-template-columns: 1fr;
gap: 16px;
}
.tm-card{
aspect-ratio: 4 / 5;
}
body{ padding: 40px 16px; }
}
@media (prefers-reduced-motion: reduce){
.tm-card::before, .tm-bio, .tm-info, .tm-arrow{
transition: none !important;
}
}
/* ----------------------FOOTER------------ */
.footer-7__contact-line a:hover{
color: unset !important;
}
.footer-7__word {
font-size: clamp(3.25rem, 9vw, 15.25rem);
}
.footer-7__contact-line,
.footer-7__address,
.footer-7__hours-label {
display: flex;
align-items: flex-start;
gap: 10px;
}
.footer-7__address {
align-items: flex-start;
}
.footer-7__icon {
flex-shrink: 0;
width: 18px;
text-align: center;
font-size: 16px;
line-height: 1.4;
/* color: var(--at-theme-primary); */
margin-top: 2px;
}
.footer-7__address span {
display: inline-block;
}
@media (max-width: 574.98px) {
.footer-7__icon {
font-size: 14px;
width: 16px;
}
.footer-7__contact,
.footer-7__address {
font-size: 16px;
}
}
/* --new footer */
.footer-7__connect {
padding-top: 5px;
}
.footer-7__links li {
margin-bottom: 14px;
}
.footer-7__links a {
color: rgba(254,254,254,.65);
text-decoration: none;
font-size: 16px;
transition: all .3s ease;
}
.footer-7__links a:hover {
color: #fff;
padding-left: 6px;
}
.footer-7__cta {
margin-top: 20px;
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
text-decoration: none;
font-weight: 600;
padding: 14px 22px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
background: #1d1d1d;
transition: all .3s ease;
}
.footer-7__cta:hover {
transform: translateY(-2px);
color: #fff;
border-color: rgba(255,255,255,.3);
}
/* -- */
.footer-7__links a {
display: flex;
gap: 12px;
align-items: baseline;
/* justify-content: center; */
}
/* -- */
/* .footer-new{
display: flex;
justify-content: center;
}
@media screen and (max-width: 568px){
.footer-new{
display: flex;
justify-content: unset;
}
} */
@media screen and (min-width: 991.33px){
.footer-new{
display: flex;
justify-content: center;
}
}
/* -------------------VCPility ----------------- */
.sec-5-portfolio-details-5 .sec-5-portfolio-details-5__timeline .sec-5-portfolio-details-5__step .sec-5-portfolio-details-5__step-dot {
background: #000;
}
/* Change the step number color */
/* .sec-5-portfolio-details-5 .sec-5-portfolio-details-5__step-num {
color: #000 !important;
} */
.faq-platform{
background-color: var(--at-neutral-0, #fff);
}
.sec-5-portfolio-details-5 .sec-5-portfolio-details-5__step-num {
color: var(--at-neutral-950, #000) !important;
}
/* -----testimonial-- */
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.testi .testimonial-bottom-wrap .fz-font-3xl{
font-size: 23px !important;
}
}
/* ----CONTACT PAGE--- */
@media screen and (min-width: 1280.33px) {
.sharktech-contact .contact-banner{
height: 600px;
}
}
/* MAP */
.contact-map-section{
/* padding: 0px 0 60px; */
padding: 60px 0 60px;
}
.contact-map{
width: 100%;
height: 450px;
overflow: hidden;
border-radius: 20px;
/* box-shadow: 0 10px 35px rgba(0,0,0,.08); */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.contact-map iframe{
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Tablets */
@media (max-width: 991px){
.contact-map-section{
padding: 0px 0 40px;
}
.contact-map{
height: 380px;
border-radius: 16px;
}
}
/* Mobile */
@media (max-width: 767px){
.contact-map-section{
padding: 0px 0 20px;
}
.contact-map{
height: 300px;
border-radius: 12px;
}
}
/* -------PRIVACY PAGE------------- */
.privacy-li{
color: var(--at-neutral-500) !important;
font-family: var(--at-ff-body);
line-height: 1.6;
letter-spacing: -0.02em;
font-weight: 500;
}
.privacy-sec .sec-2-portfolio-details-3__paragraph a:hover{
text-decoration: underline;
}
.privacy-li a:hover{
text-decoration: underline;
}
/* ------LAUNCH YOUR DREAM ----- */
.sec-1-home-14 {
padding-top: 111px;
padding-bottom: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.sec-1-home-14 {
padding-top: 108px;
padding-bottom: 64px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
.sec-1-home-14 {
padding-top: 108px;
padding-bottom: 48px;
}
}
/* -----about-awards-- */
.sharktech-awards{
padding-bottom: 50px;
}
.achievements-section {
padding-top: 50px;
padding-bottom: 50px;
max-width: 1120px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 28px;
flex-wrap: wrap;
border-radius: 16px;
border: 1px solid #00000021;
padding-left: 50px;
box-shadow: 0 0 10px rgb(0 0 0 / 12%);
}
.sharktech-awards .achievements-section .section-heading {
flex: 0 1 auto;
}
.sharktech-awards .achievements-section .section-heading .section-desc {
font-size: 15px;
color: #6b6f7b;
line-height: 1.6;
margin: 0;
max-width: 400px;
}
.mini-card {
margin: 0 auto;
display: flex;
align-items: center;
gap: 16px;
max-width: 380px;
width: 100%;
flex: 0 0 auto;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 14px 16px;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.mini-card:hover {
box-shadow: 0 6px 18px rgba(20, 21, 26, 0.08);
border-color: #d4d7de;
}
.mini-thumb {
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
}
.mini-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mini-text {
flex: 1 1 auto;
min-width: 0;
}
.mini-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #8a8f9c;
margin: 0 0 3px 0;
}
.mini-title {
font-size: 13.5px;
font-weight: 600;
color: #1a1a2e;
line-height: 1.35;
margin: 0 0 2px 0;
}
.mini-sub {
font-size: 12px;
font-weight: 400;
color: #7a7e89;
margin: 0;
}
@media (max-width: 720px) {
.achievements-section {
flex-direction: column;
align-items: flex-start;
gap: 28px;
}
.mini-card { max-width: 100%; }
}
@media screen and (max-width: 576px){
.sharktech-awards{
padding-left: 20px;
padding-right: 20px;
}
.achievements-section {
padding: 50px 20px;
}
}
@media screen and (min-width: 768px) and (max-width: 991.33px){
.mini-card {
margin: unset;
}
}
@media (min-width: 1600px) {
.achievements-section {
max-width: 1400px;
}
}
@media (min-width: 1920px) {
.achievements-section {
max-width: 1600px;
}
}
/* ----home-pag -client-logo--- */
/* =========================================================
CLIENT LOGO SECTION
========================================================= */
.client-logo-section {
position: relative;
overflow: hidden;
padding: 110px 0;
background: #f7f8fa;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.client-logo-content {
max-width: 520px;
}
.client-eyebrow {
display: inline-block;
margin-bottom: 18px;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 2px;
text-transform: uppercase;
color: #2f308d;
}
.client-title {
margin: 0 0 22px;
font-size: clamp(42px, 5vw, 68px);
line-height: 1.02;
letter-spacing: -2.5px;
font-weight: 600;
color: #111;
}
.client-title span {
display: block;
color: #777;
}
.client-description {
max-width: 470px;
margin: 0;
font-size: 16px;
line-height: 1.75;
color: #777;
}
/* =========================================================
LOGO ANIMATION AREA
========================================================= */
.logo-animation-wrapper {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
height: 520px;
overflow: hidden;
/*
Fade logos at top and bottom.
This gives the same soft disappearing effect
as the reference image.
*/
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 9%,
#000 91%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 9%,
#000 91%,
transparent 100%
);
}
/* =========================================================
COLUMNS
========================================================= */
.logo-column {
position: relative;
height: 100%;
overflow: hidden;
}
.logo-track {
display: flex;
flex-direction: column;
gap: 18px;
will-change: transform;
}
/* =========================================================
LOGO CARD
========================================================= */
.tech-logo-item {
flex: 0 0 145px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 25px 18px;
background: #fff;
border: 1px solid #e7e8ec;
border-radius: 18px;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.045);
}
/* =========================================================
LOGO IMAGE
========================================================= */
.tech-logo-item img {
display: block;
width: auto;
max-width: 82%;
height: 48px;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.68;
transition:
filter 0.3s ease,
opacity 0.3s ease;
}
/* Optional hover effect */
.tech-logo-item:hover img {
filter: grayscale(0);
opacity: 1;
}
/* =========================================================
INFINITE ANIMATION
========================================================= */
/* LEFT + RIGHT → DOWN */
.logo-column-down .logo-track {
animation: logoSlideDown 18s linear infinite;
}
/* CENTER → UP */
.logo-column-up .logo-track {
animation: logoSlideUp 18s linear infinite;
}
/* =========================================================
UP
========================================================= */
@keyframes logoSlideUp {
from {
transform: translateY(0);
}
to {
transform: translateY(calc(-50% - 9px));
}
}
/* =========================================================
DOWN
========================================================= */
@keyframes logoSlideDown {
from {
transform: translateY(calc(-50% - 9px));
}
to {
transform: translateY(0);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.client-logo-section {
padding: 85px 0;
}
.client-logo-content {
max-width: 650px;
}
.logo-animation-wrapper {
height: 470px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.client-logo-section {
padding: 70px 0;
}
.client-title {
font-size: 42px;
letter-spacing: -1.5px;
}
.client-description {
font-size: 15px;
}
.logo-animation-wrapper {
height: 410px;
gap: 12px;
}
.logo-track {
gap: 12px;
}
.tech-logo-item {
flex-basis: 115px;
padding: 20px 12px;
border-radius: 14px;
}
.tech-logo-item img {
height: 38px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575px) {
.client-logo-section {
padding: 60px 0;
}
.client-title {
font-size: 36px;
}
.logo-animation-wrapper {
height: 330px;
gap: 10px;
}
.logo-track {
gap: 10px;
}
.tech-logo-item {
flex-basis: 90px;
padding: 15px 8px;
border-radius: 12px;
}
.tech-logo-item img {
height: 30px;
}
}
/* product-cards-- */
/* =========================================
COMMON CARD
========================================= */
.at-service-card.card-1::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.65;
/* background: linear-gradient(99deg, #000 5.05%, rgba(0, 0, 0, 0.44) 49.84%, #000 94.63%); */
background: none;
z-index: 0;
}
.at-service-card.service-card-bg {
position: relative;
height: 480px;
min-height: 480px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
border-radius: 24px;
isolation: isolate;
}
/* =========================================
CARD 1 + CARD 3
SAME APPEARANCE
========================================= */
.at-service-card.card-1,
.at-service-card.card-3 {
height: 480px;
min-height: 480px;
}
/* =========================================
CARD 2
DIFFERENT / OFFSET
========================================= */
.at-service-card.card-2 {
height: 420px;
min-height: 420px;
margin-top: 155px;
}
/* =========================================
OVERLAY
========================================= */
.at-service-card-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.10) 35%,
rgba(0, 0, 0, 0.45) 65%,
rgba(0, 0, 0, 0.85) 100%
);
}
/* =========================================
CONTENT
========================================= */
.at-service-card-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 40px;
}
/* Remove old positioning */
.at-service-card-content.top-50 {
top: auto !important;
}
.at-service-card-content.translate-middle-y {
transform: none !important;
}
/* =========================================
TEXT
========================================= */
.at-service-card h3 {
margin-top: 0 !important;
margin-bottom: 12px;
}
.at-service-card h3 a {
color: #fff;
text-decoration: none;
}
.at-service-card p {
color: #fff;
line-height: 1.5;
margin-bottom: 0;
}
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 1399px) {
.at-service-card.card-1,
.at-service-card.card-3 {
height: 420px;
min-height: 420px;
}
.at-service-card.card-2 {
height: 400px;
min-height: 400px;
margin-top: 120px;
}
.at-service-card-content {
padding: 32px;
}
}
@media (max-width: 767px) {
.at-service-card.card-1,
.at-service-card.card-2,
.at-service-card.card-3 {
height: 400px;
min-height: 400px;
margin-top: 0;
}
.at-service-card-content {
padding: 28px;
}
}
/* ------ */
@media screen and (min-width: 1280.33px){
.news-head{
margin-left: 6rem;
}
.news-col{
margin-left: 6rem;
}
}
/* ---------------------BLOGS-LISTING PAGE-------- */
.sharktech-blog.sec-1-archive-1{
padding-bottom: 50px;
}
/* --- */
.sharktech-blog .blog-card {
background: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(38, 57, 77, 0.06);
transition: all 0.3s ease;
gap: 0px;
}
.sharktech-blog .sharktech-blog .blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 40px rgba(38, 57, 77, 0.12);
}
/* =========================================================
IMAGE
========================================================= */
.sharktech-blog .blog-card-image {
width: 100%;
height: auto;
/* height: 160px; */
overflow: hidden;
}
.sharktech-blog .sharktech-blog .blog-card-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.5s ease;
}
.sharktech-blog .sharktech-blog .sharktech-blog .blog-card:hover .sharktech-blog .sharktech-blog .blog-card-image img {
transform: scale(1.04);
}
/* =========================================================
CARD BODY
========================================================= */
.sharktech-blog .blog-card-body {
padding: 18px 20px 20px;
}
/* =========================================================
CATEGORY
========================================================= */
.sharktech-blog .blog-category {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
border-radius: 20px;
font-size: 10px;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.2px;
margin-bottom: 9px;
}
/* Category Colors */
.sharktech-blog .category-popular {
color: #ffffff;
background: #617fc5;
}
/* =========================================================
TITLE
========================================================= */
.sharktech-blog .blog-title {
margin: 0 0 8px;
color: #20232a;
font-size: 17px;
line-height: 1.25;
font-weight: 600;
}
/* =========================================================
DESCRIPTION
========================================================= */
.sharktech-blog .blog-description {
margin: 0;
color: #555b65;
font-size: 13px;
line-height: 1.55;
font-weight: 400;
}
/* =========================================================
AUTHOR
========================================================= */
.sharktech-blog .blog-author {
display: flex;
align-items: center;
margin-top: 20px;
}
/* Avatar */
.sharktech-blog .author-avatar {
width: 34px;
height: 34px;
flex: 0 0 34px;
object-fit: cover;
border-radius: 50%;
}
/* Author Information */
.sharktech-blog .author-info {
margin-left: 10px;
}
.sharktech-blog .blog-author .author-info h6 {
margin: 0 0 2px;
color: #30343b;
font-size: 12px;
line-height: 1.2;
font-weight: 600;
}
.sharktech-blog .blog-author .author-info span {
display: block;
color: #858a93;
font-size: 11px;
line-height: 1.2;
}
/* -- */
.sharktech-blog .blog-card-link {
display: block;
height: 100%;
color: inherit;
text-decoration: none;
}
.sharktech-blog .sharktech-blog .blog-card-link:hover {
color: inherit;
text-decoration: none;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.sharktech-blog .blog-card-image {
height: 180px;
}
.sharktech-blog .blog-card-body {
padding: 18px;
}
.sharktech-blog .blog-title {
font-size: 16px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.sharktech-blog .blog-section {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.sharktech-blog .blog-card-image {
height: 210px;
}
.sharktech-blog .blog-card-body {
padding: 18px 20px 20px;
}
.sharktech-blog .blog-title {
font-size: 17px;
}
.sharktech-blog .blog-description {
font-size: 13px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.sharktech-blog .blog-card-image {
height: 200px;
}
.sharktech-blog .blog-card-body {
padding: 17px 18px 19px;
}
.sharktech-blog .blog-title {
font-size: 16px;
}
.sharktech-blog .blog-author {
margin-top: 18px;
}
}
.sharktech-blog .blog-list-title h1{
font-size: 50px;
}
@media screen and (max-width: 568.33px){
.sharktech-blog .blog-list-title h1{
font-size: 44px;
}
}
@media screen and (max-width: 768.33px){
.sharktech-blog .blog-list-title h1{
font-size: 48px;
}
}
/* ---- */
.sharktech-blog .blog-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 55px;
margin-bottom: 30px;
}
.sharktech-blog .blog-pagination .page-link {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #e5e7eb;
border-radius: 50%;
background: #fff;
color: #20232a;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
}
.sharktech-blog .blog-pagination .page-link:hover {
background: #f3f6fb;
border-color: #617fc5;
color: #617fc5;
}
.sharktech-blog .blog-pagination .page-link.active {
background: #617fc5;
border-color: #617fc5;
color: #fff;
}
.sharktech-blog .blog-pagination .page-link.arrow {
font-size: 18px;
font-weight: 400;
}
.sharktech-blog .blog-pagination .page-link.disabled {
opacity: 0.35;
pointer-events: none;
}
@media (max-width: 575.98px) {
.sharktech-blog .blog-pagination {
margin-top: 40px;
gap: 6px;
}
.sharktech-blog .blog-pagination .page-link {
width: 38px;
height: 38px;
font-size: 13px;
}
}
/* ------LAUNCH YOUR DREAM---- */
.sec-1-home-14__sub {
align-items: center;
justify-content: unset !important;
}
.sec-1-home-14__btn-logo {
border-bottom: none;
padding-bottom: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sec-1-home-14__btn-logo-img {
height: 114px;
width: auto;
max-width: 220px;
display: block;
-o-object-fit: contain;
object-fit: contain;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
.sec-1-home-14__btn-logo-img {
height: 91px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.sec-1-home-14__btn-logo-img {
height: 68px;
}
.sec-1-home-14__sub {
align-items: flex-start;
}
}
@media screen and (min-width:768px) and (max-width: 820.33px){
.sec-1-home-14__sub {
align-items: flex-start;
}
}
/* --- */
.sec-2-portfolio-details-3__stat-number {
letter-spacing: 0.1em;
}
/* -- */
.sec-5-home-14__row-desc {
color: #6d6e6e;
}
.lyd-industry-sub-head {
color: #fefefea1;
font-size: clamp(2rem, 3.2vw, 2.5rem);
}
.sec-5-home-14__row:first-child {
border-top: none !important;
}
/* --- */
.sec-lyd-products {
padding: 100px 0;
background: var(--at-neutral-50, #fafafa);
}
.sec-lyd-products__head {
margin-bottom: 50px;
}
.sec-lyd-products__eyebrow {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
color: var(--at-neutral-950, #111);
}
.sec-lyd-products__eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
display: inline-block;
}
.sec-lyd-products__eyebrow-key {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--at-neutral-950, #111);
}
.sec-lyd-products__eyebrow-meta {
font-size: 13px;
color: var(--at-neutral-500, #8a8a8a);
letter-spacing: 0.04em;
}
.sec-lyd-products__title {
font-weight: 500;
margin: 0;
color: var(--at-neutral-950, #111);
}
.sec-lyd-products__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.sec-lyd-products__card {
background: var(--at-neutral-0, #fff);
border: 1px solid var(--at-neutral-100, #ececec);
border-radius: 20px;
padding: 44px 40px;
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow .3s ease, transform .3s ease;
}
.sec-lyd-products__card:hover {
box-shadow: 0 20px 40px rgba(0,0,0,0.06);
transform: translateY(-4px);
}
.sec-lyd-products__tag {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--at-neutral-500, #9a9a9a);
margin-bottom: 18px;
font-weight: 600;
}
.sec-lyd-products__headline {
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 500;
color: var(--at-neutral-950, #111);
margin-bottom: 16px;
line-height: 1.25;
}
.sec-lyd-products__desc {
font-size: 15px;
line-height: 1.65;
color: var(--at-neutral-500, #6d6e6e);
margin-bottom: 26px;
}
.sec-lyd-products__list {
list-style: none;
padding: 0;
margin: 0 0 32px 0;
display: flex;
flex-direction: column;
gap: 14px;
flex-grow: 1;
}
.sec-lyd-products__list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14.5px;
color: var(--at-neutral-900, #333);
line-height: 1.5;
}
.sec-lyd-products__list li::before {
content: "";
flex-shrink: 0;
width: 8px;
height: 8px;
margin-top: 6px;
border-radius: 50%;
background: var(--at-neutral-950, #111);
}
.sec-lyd-products__btn {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
padding: 14px 26px;
border-radius: 999px;
background: var(--at-neutral-950, #111);
color: var(--at-neutral-0, #fff);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background .3s ease, gap .3s ease;
}
.sec-lyd-products__btn:hover {
background: var(--at-neutral-800, #333);
color: var(--at-neutral-0, #fff);
gap: 14px;
}
.sec-lyd-products__btn svg {
flex-shrink: 0;
}
@media (max-width: 991px) {
.sec-lyd-products__grid {
grid-template-columns: 1fr;
}
.sec-lyd-products {
padding: 70px 0;
}
.sec-lyd-products__card {
padding: 32px 26px;
}
}
/* ----- */
.sec-1-home-12__pill {
padding: 6px 16px 6px 16px;
}
.sec-1-home-12__sub {
line-height: 1.5;
}
.data-analytics-sec1-btn-para{
font-weight: 400;
font-size: 14px;
}
/* ------SERVICE- DATA ANALYTICS --- */
.sharktech-service-data-hero {
position: relative;
width: 100%;
min-height: 770px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
background: #f7f9fb;
}
.sharktech-service-data-hero-bg {
position: absolute;
inset: 0;
z-index: -3;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
transform: scale(1.03);
}
.sharktech-service-data-hero-overlay {
position: absolute;
inset: 0;
z-index: -2;
}
.sharktech-service-data-hero-content::before {
content: "";
position: absolute;
width: 90%;
max-width: 1250px;
height: 380px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.18);
filter: blur(45px);
border-radius: 50%;
z-index: -1;
}
.sharktech-service-data-hero .container {
position: relative;
z-index: 2;
}
.sharktech-service-data-hero-content {
position: relative;
max-width: 1450px;
margin: 0 auto;
text-align: center;
padding: 190px 20px 80px;
}
.sharktech-service-data-hero-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 13px;
border-radius: 7px;
background: #fff;
color: #000;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
margin-bottom: 26px;
}
.sharktech-service-data-hero-title {
margin: 0 auto;
max-width: 1500px;
color: #050505;
font-size: clamp(44px, 5vw, 78px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -2.5px;
}
.sharktech-service-data-hero-subtitle {
margin: 30px auto 0;
max-width: 900px;
color: #111;
font-size: clamp(17px, 1.4vw, 23px);
font-weight: 400;
line-height: 1.5;
}
@media (max-width: 1399px) {
.sharktech-service-data-hero {
min-height: 620px;
}
.sharktech-service-data-hero-title {
max-width: 1200px;
font-size: clamp(42px, 5vw, 68px);
}
}
@media (max-width: 991px) {
.sharktech-service-data-hero {
min-height: 580px;
}
.sharktech-service-data-hero-content {
padding: 80px 20px 70px;
}
.sharktech-service-data-hero-label {
font-size: 14px;
margin-bottom: 22px;
}
.sharktech-service-data-hero-title {
font-size: clamp(40px, 6vw, 58px);
line-height: 1.08;
letter-spacing: -1.8px;
}
.sharktech-service-data-hero-subtitle {
margin-top: 25px;
font-size: 18px;
}
.sharktech-service-data-hero-bg {
background-position: center center;
}
}
@media (max-width: 767px) {
.sharktech-service-data-hero {
min-height: 550px;
}
.sharktech-service-data-hero-content {
padding: 75px 18px 65px;
}
.sharktech-service-data-hero-label {
font-size: 13px;
padding: 6px 11px;
margin-bottom: 20px;
}
.sharktech-service-data-hero-title {
font-size: clamp(34px, 9vw, 46px);
line-height: 1.08;
letter-spacing: -1.2px;
}
.desktop-break {
display: none;
}
.sharktech-service-data-hero-subtitle {
max-width: 520px;
margin-top: 22px;
font-size: 16px;
line-height: 1.45;
}
}
@media (max-width: 480px) {
.sharktech-service-data-hero {
min-height: 520px;
}
.sharktech-service-data-hero-content {
padding: 65px 15px 55px;
}
.sharktech-service-data-hero-title {
font-size: 34px;
letter-spacing: -0.8px;
}
.sharktech-service-data-hero-subtitle {
font-size: 15px;
}
}
/* ---- */
.sharktech-core-section {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 48px;
background: #050510;
overflow-x: hidden;
padding: 40px 20px;
position: relative;
}
.sharktech-core-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 80% 60% at 20% 20%,
rgba(0,245,255,.08) 0%,
transparent 60%
),
radial-gradient(
ellipse 60% 80% at 80% 80%,
rgba(255,45,120,.07) 0%,
transparent 60%
),
radial-gradient(
ellipse 70% 70% at 50% 50%,
rgba(191,95,255,.05) 0%,
transparent 70%
);
animation: sharktechCoreBgPulse 8s ease-in-out infinite alternate;
pointer-events: none;
z-index: 0;
}
@keyframes sharktechCoreBgPulse {
0% {
opacity: .6;
}
100% {
opacity: 1;
}
}
.sharktech-core-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 28px;
width: 100%;
max-width: 920px;
position: relative;
z-index: 1;
}
.sharktech-core-card {
grid-column: span 2;
position: relative;
border-radius: 24px;
padding: 36px 32px;
background: rgba(255,255,255,0.04);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,0.1);
cursor: pointer;
overflow: hidden;
transition:
transform .35s cubic-bezier(.34,1.56,.64,1),
box-shadow .35s ease;
}
.sharktech-core-card:hover {
transform: translateY(-8px) scale(1.01);
box-shadow:
0 20px 60px rgba(29,73,252,.20),
0 0 0 1px rgba(29,73,252,.12);
}
/* .sharktech-core-card:nth-child(4) {
grid-column: 2 / span 2;
}
.sharktech-core-card:nth-child(5) {
grid-column: 4 / span 2;
} */
.sharktech-core-grid:not(:has(.sharktech-core-card:nth-child(6)))
.sharktech-core-card:nth-child(4) {
grid-column: 2 / span 2;
}
.sharktech-core-grid:not(:has(.sharktech-core-card:nth-child(6)))
.sharktech-core-card:nth-child(5) {
grid-column: 4 / span 2;
}
.sharktech-core-card::after {
content: '';
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(
circle,
#00f5ff 0%,
transparent 70%
);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity .3s;
pointer-events: none;
filter: blur(30px);
}
.sharktech-core-card:hover::after {
opacity: .15;
}
.sharktech-core-card-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.sharktech-core-card-cyan .sharktech-core-card-icon {
background: rgba(0,245,255,.1);
border: 1px solid rgba(0,245,255,.2);
}
.sharktech-core-card-icon i {
color: #f9fafd8c;
}
.sharktech-core-card-title {
font-size: 22px;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
line-height: 1.25;
position: relative;
z-index: 1;
}
.sharktech-core-card-desc {
font-size: 14px;
color: rgba(255,255,255,.45);
line-height: 1.65;
margin-bottom: 28px;
position: relative;
z-index: 1;
}
.sharktech-core-title {
text-align: center;
position: relative;
z-index: 1;
}
.sharktech-core-title h1 {
font-size: clamp(22px, 4vw, 38px);
font-weight: 700;
color: #fff;
margin-bottom: 10px;
}
.sharktech-core-title p {
font-size: 14px;
color: rgba(255,255,255,.35);
}
.sharktech-core-badge {
display: inline-block;
background: rgba(0,245,255,.07);
border: 1px solid rgba(0,245,255,.18);
color: #8f9daa;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 20px;
margin-bottom: 14px;
}
@media (max-width: 900px) {
.sharktech-core-grid {
grid-template-columns: repeat(2, 1fr);
}
/* .sharktech-core-card,
.sharktech-core-card:nth-child(4),
.sharktech-core-card:nth-child(5) {
grid-column: auto;
} */
.sharktech-core-card,
.sharktech-core-grid:not(:has(.sharktech-core-card:nth-child(6)))
.sharktech-core-card:nth-child(4),
.sharktech-core-grid:not(:has(.sharktech-core-card:nth-child(6)))
.sharktech-core-card:nth-child(5) {
grid-column: auto;
}
}
@media (max-width: 600px) {
.sharktech-core-grid {
grid-template-columns: 1fr;
}
/* .sharktech-core-card,
.sharktech-core-card:nth-child(4),
.sharktech-core-card:nth-child(5) {
grid-column: auto;
} */
.sharktech-core-card,
.sharktech-core-grid:not(:has(.sharktech-core-card:nth-child(6)))
.sharktech-core-card:nth-child(4),
.sharktech-core-grid:not(:has(.sharktech-core-card:nth-child(6)))
.sharktech-core-card:nth-child(5) {
grid-column: auto;
}
}
/* ---- */
.st-cta-section {
width: 100%;
padding: 30px 6%;
box-sizing: border-box;
background: none;
}
.st-cta-inner {
width: 100%;
max-width: 1675px;
margin: 0 auto;
padding: 80px 84px;
box-sizing: border-box;
background: #1d1d1d;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 70px;
}
.st-cta-content {
flex: 1 1 auto;
max-width: 900px;
}
.st-cta-label {
display: block;
margin-bottom: 28px;
font-size: 18px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.03em;
color: #999999;
}
.st-cta-title {
margin: 0 0 28px;
max-width: 700px;
font-size: clamp(28px, 3.5vw, 42px);
line-height: 1.08;
font-weight: 600;
letter-spacing: -0.045em;
color: #ffffff;
}
.st-cta-description {
max-width: 850px;
margin: 0;
font-size: clamp(17px, 1.3vw, 22px);
line-height: 1.65;
font-weight: 500;
color: #b7b7b7;
}
/* Right Actions */
.st-cta-actions {
flex: 0 0 390px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
/* Buttons */
.st-cta-btn {
width: 100%;
min-height: 56px;
padding: 18px 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
box-sizing: border-box;
text-decoration: none;
font-size: 19px;
line-height: 1.2;
font-weight: 600;
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease;
}
/* First Button */
.st-cta-btn-primary {
background: #fff;
border: 1px solid #fff;
color: #000;
}
.st-cta-btn-primary:hover {
background: #000;
border-color: #fff;
color: #fff;
transform: translateY(-2px);
}
/* Second Button */
.st-cta-btn-secondary {
background: transparent;
border: 1px solid #ffffff;
color: #ffffff;
}
.st-cta-btn-secondary:hover {
background: #ffffff;
border-color: #ffffff;
color: #1d1d1d;
transform: translateY(-2px);
}
/* Email */
.st-cta-email {
margin-top: 8px;
color: #ffffff;
font-size: 20px;
line-height: 1.3;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 5px;
transition: opacity 0.3s ease;
}
.st-cta-email:hover {
opacity: 0.7;
}
/* ================================
TABLET
================================ */
@media (max-width: 1199px) {
.st-cta-section {
padding: 25px 4%;
}
.st-cta-inner {
padding: 65px 55px;
gap: 50px;
}
.st-cta-actions {
flex: 0 0 330px;
}
.st-cta-title {
/* font-size: clamp(40px, 5vw, 54px); */
font-size: clamp(26px, 4vw, 36px);
}
}
/* ================================
MOBILE
================================ */
@media (max-width: 767px) {
.st-cta-section {
padding: 15px;
}
.st-cta-inner {
min-height: auto;
padding: 45px 25px;
border-radius: 22px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 40px;
}
.st-cta-label {
margin-bottom: 20px;
font-size:9px;
}
.st-cta-title {
margin-bottom: 20px;
/* font-size: clamp(36px, 10vw, 48px); */
font-size: clamp(24px, 8vw, 32px);
line-height: 1.05;
}
.st-cta-description {
font-size: 16px;
line-height: 1.55;
}
.st-cta-actions {
width: 100%;
flex: none;
gap: 14px;
}
.st-cta-btn {
min-height: 62px;
padding: 16px 24px;
font-size: 17px;
}
.st-cta-email {
margin-top: 5px;
font-size: 17px;
}
}
/* ================================
SMALL MOBILE
================================ */
@media (max-width: 480px) {
.st-cta-inner {
padding: 38px 20px;
border-radius: 20px;
}
.st-cta-title {
font-size: 34px;
}
.st-cta-description {
font-size: 15px;
}
.st-cta-btn {
min-height: 58px;
font-size: 16px;
}
}
/* ---service-industries-- */
.sharktech-industries-section {
width: 100%;
padding: 90px 0 100px;
background: #eef2fa;
overflow: hidden;
}
.sharktech-industries-header {
max-width: 1380px;
margin: 0 auto 55px;
padding: 0 30px;
}
.sharktech-industries-label {
display: inline-block;
margin-bottom: 12px;
padding: 8px 14px;
background: #15164f;
color: #ffffff;
font-size: 14px;
line-height: 1;
font-weight: 600;
border-radius: 6px;
}
.sharktech-industries-title {
margin: 0;
color: #11134f;
font-size: clamp(34px, 4vw, 58px);
line-height: 1.05;
font-weight: 600;
}
.sharktech-industries-subtitle {
margin: 16px 0 0;
color: #171951;
font-size: 20px;
line-height: 1.5;
}
.sharktech-industries-source {
display: none;
}
#sharktechIndustriesCarousel {
position: relative;
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 0 60px;
}
.sharktech-industry-slide {
position: relative;
width: 100%;
}
.sharktech-industry-image {
width: 100%;
height: 290px;
overflow: hidden;
background: #dfe3ed;
border-radius: 14px;
}
.sharktech-industry-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.6s ease;
}
.sharktech-industry-slide:hover
.sharktech-industry-image img {
transform: scale(1.04);
}
.sharktech-industry-card {
position: relative;
width: calc(100% - 60px);
min-height: 130px;
margin: -82px auto 0;
padding: 30px;
background: #ffffff;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
z-index: 2;
}
.sharktech-industry-card h3 {
margin: 0;
color: #11134f;
font-size: clamp(22px, 1vw, 30px);
line-height: 1.2;
font-weight: 500;
}
.sharktech-industry-prev .carousel-control-prev-icon,
.sharktech-industry-next .carousel-control-next-icon {
width: 1rem;
}
.sharktech-industry-prev,
.sharktech-industry-next {
position: absolute;
top: -65px;
width: 44px;
height: 44px;
margin: 0;
background: #111111;
border-radius: 10px;
opacity: 1;
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
.sharktech-industry-prev:hover,
.sharktech-industry-next:hover {
opacity: 0.85;
transform: translateY(-2px);
}
.sharktech-industry-prev {
left: auto;
right: 7rem;
}
.sharktech-industry-next {
right: 4rem;
}
@media (max-width: 1199px) {
.sharktech-industries-section {
padding: 75px 0 85px;
}
.sharktech-industries-header {
margin-bottom: 45px;
}
#sharktechIndustriesCarousel {
display: none;
}
#sharktechIndustriesResponsiveCarousel {
display: block;
position: relative;
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 0 45px;
}
.sharktech-industry-image {
height: 270px;
}
.sharktech-industry-card {
width: calc(100% - 40px);
min-height: 115px;
margin-top: -65px;
padding: 25px;
}
.sharktech-industry-card h3 {
font-size: 26px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-prev,
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-next {
width: 42px;
height: 42px;
top: -60px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-prev {
right: 52px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-next {
right: 5px;
}
}
@media (max-width: 767px) {
.sharktech-industries-section {
padding: 60px 0 70px;
}
.sharktech-industries-header {
margin-bottom: 58px;
padding: 0 20px;
}
.sharktech-industries-label {
margin-bottom: 12px;
padding: 7px 11px;
font-size: 12px;
}
.sharktech-industries-title {
font-size: 34px;
line-height: 1.1;
}
.sharktech-industries-subtitle {
margin-top: 12px;
font-size: 16px;
line-height: 1.5;
}
#sharktechIndustriesResponsiveCarousel {
padding: 0 20px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-image {
height: 240px;
border-radius: 12px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-card {
width: calc(100% - 24px);
min-height: 95px;
margin-top: -45px;
padding: 20px 22px;
border-radius: 12px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-card h3 {
font-size: 23px;
line-height: 1.2;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-prev,
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-next {
width: 40px;
height: 40px;
top: -55px;
border-radius: 9px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-prev {
right: 50px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-next {
right: 5px;
}
}
@media (max-width: 480px) {
.sharktech-industries-section {
padding: 50px 0 60px;
}
.sharktech-industries-title {
font-size: 30px;
}
.sharktech-industries-subtitle {
font-size: 15px;
}
#sharktechIndustriesResponsiveCarousel {
padding: 0 15px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-image {
height: 210px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-card {
width: calc(100% - 16px);
min-height: 85px;
margin-top: -40px;
padding: 18px 20px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-card h3 {
font-size: 21px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-prev,
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-next {
width: 38px;
height: 38px;
top: -50px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-prev {
right: 48px;
}
#sharktechIndustriesResponsiveCarousel
.sharktech-industry-next {
right: 5px;
}
}
/* ----tab-service-section */
.st-offerings-section {
width: 100%;
padding: 70px 0;
}
.st-offerings-section .container-fluid {
padding-left: 6%;
padding-right: 6%;
}
.st-offerings-wrapper {
display: grid;
grid-template-columns: 42% 58%;
width: 100%;
min-height: 640px;
background: #eef3fb;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(40, 60, 120, 0.12);
}
/* =========================================
LEFT SIDE
========================================= */
.st-offerings-left {
padding: 52px 32px 45px 32px;
display: flex;
flex-direction: column;
}
.st-offerings-heading {
margin-bottom: 32px;
}
.st-offerings-heading h2 {
margin: 0 0 22px;
color: #252a32;
font-size: 34px;
line-height: 1.15;
font-weight: 500;
}
.st-offerings-heading p {
margin: 0;
max-width: 600px;
color: #30353d;
font-size: 17px;
line-height: 1.6;
font-weight: 400;
}
/* =========================================
TABS
========================================= */
.st-offerings-tabs {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 8px;
}
.st-offering-tab {
position: relative;
width: 100%;
min-height: 74px;
display: flex;
align-items: center;
padding: 20px 24px;
border: 0;
border-radius: 9px;
background: transparent;
color: #4b5c8e;
text-align: left;
font-family: inherit;
font-size: 20px;
line-height: 1.35;
font-weight: 500;
cursor: pointer;
transition:
background-color 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.st-offering-tab:hover {
color: #18245e;
background: rgba(255, 255, 255, 0.45);
}
/* ACTIVE TAB */
.st-offering-tab.active {
color: #111c59;
background: #ffffff;
box-shadow: 0 5px 15px rgba(50, 70, 130, 0.03);
}
.st-offering-tab.active::before {
content: "";
position: absolute;
left: -3px;
top: 20px;
width: 6px;
height: 42px;
border-radius: 10px;
background: #4d7cff;
}
/* =========================================
RIGHT SIDE
========================================= */
.st-offerings-right {
position: relative;
background: #ffffff;
}
/* CONTENT */
.st-offering-content {
display: none;
width: 100%;
height: 100%;
}
.st-offering-content.active {
display: block;
}
/* =========================================
IMAGE
========================================= */
.st-offering-image {
width: 100%;
height: 400px;
overflow: hidden;
}
.st-offering-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.6s ease;
}
.st-offering-content.active .st-offering-image img {
transform: scale(1);
}
/* =========================================
DETAILS
========================================= */
.st-offering-details {
width: 100%;
padding: 25px 30px 30px;
background: #ffffff;
}
/* 2 COLUMN LIST */
.st-offering-list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 45px;
row-gap: 24px;
}
.st-offering-list a {
display: block;
color: #07145f;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
font-size: 15px;
line-height: 1.45;
font-weight: 500;
transition: color 0.25s ease;
}
.st-offering-list a:hover {
color: #4d7cff;
}
.st-offering-list a span {
margin-right: 5px;
text-decoration: none;
}
/* =========================================
LARGE DESKTOP
========================================= */
@media (min-width: 1600px) {
.st-offerings-section .container-fluid {
padding-left: 5.8%;
padding-right: 5.8%;
}
.st-offerings-wrapper {
min-height: 645px;
}
.st-offerings-left {
padding: 52px 32px 45px 20px;
}
.st-offerings-heading h2 {
font-size: 34px;
}
.st-offering-tab {
font-size: 20px;
}
.st-offering-image {
height: 400px;
}
}
/* =========================================
LAPTOP
========================================= */
@media (max-width: 1399px) {
.st-offerings-section .container-fluid {
padding-left: 4%;
padding-right: 4%;
}
.st-offerings-wrapper {
grid-template-columns: 40% 60%;
min-height: 600px;
}
.st-offerings-left {
padding: 42px 25px;
}
.st-offerings-heading h2 {
font-size: 31px;
}
.st-offerings-heading p {
font-size: 16px;
}
.st-offering-tab {
font-size: 18px;
min-height: 68px;
padding: 18px 22px;
}
.st-offering-image {
height: 365px;
}
}
/* =========================================
TABLET
========================================= */
/* =========================================
TABLET
STACKED LAYOUT LIKE MOBILE
========================================= */
@media (max-width: 991px) {
.st-offerings-section {
padding: 50px 0;
}
.st-offerings-section .container-fluid {
padding-left: 25px;
padding-right: 25px;
}
/* Main wrapper becomes stacked */
.st-offerings-wrapper {
display: grid;
grid-template-columns: 1fr;
min-height: auto;
width: 100%;
}
/* =========================================
LEFT SIDE
========================================= */
.st-offerings-left {
width: 100%;
padding: 40px 25px 25px;
}
.st-offerings-heading {
margin-bottom: 20px;
}
.st-offerings-heading h2 {
font-size: 30px;
margin-bottom: 14px;
}
.st-offerings-heading p {
font-size: 16px;
line-height: 1.5;
}
/* =========================================
TABS - VERTICAL STACK
========================================= */
.st-offerings-tabs {
display: flex;
flex-direction: column;
width: 100%;
gap: 6px;
margin-top: 10px;
overflow: visible;
padding: 0;
}
.st-offering-tab {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 58px;
flex: none;
padding: 14px 20px;
border: 0;
border-radius: 9px;
background: transparent;
color: #4b5c8e;
font-family: inherit;
font-size: 17px;
line-height: 1.35;
font-weight: 500;
text-align: left;
white-space: normal;
cursor: pointer;
transition:
background-color 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.st-offering-tab:hover {
color: #18245e;
background: rgba(255, 255, 255, 0.45);
}
/* ACTIVE TAB */
.st-offering-tab.active {
color: #111c59;
background: #ffffff;
border: 0;
box-shadow: 0 5px 15px rgba(50, 70, 130, 0.03);
}
/* ACTIVE INDICATOR - LEFT SIDE */
.st-offering-tab.active::before {
content: "";
position: absolute;
left: -3px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 38px;
border-radius: 10px;
background: #4d7cff;
}
/* =========================================
RIGHT SIDE
========================================= */
.st-offerings-right {
width: 100%;
position: relative;
background: #ffffff;
}
/* =========================================
IMAGE
========================================= */
.st-offering-image {
width: 100%;
height: 360px;
overflow: hidden;
}
.st-offering-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* =========================================
DETAILS
========================================= */
.st-offering-details {
width: 100%;
padding: 25px 25px 30px;
background: #ffffff;
}
/* =========================================
LIST
========================================= */
.st-offering-list {
grid-template-columns: 1fr;
row-gap: 20px;
}
.st-offering-list a {
font-size: 15px;
line-height: 1.5;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.st-offerings-section {
padding: 35px 0;
}
.st-offerings-section .container-fluid {
padding-left: 15px;
padding-right: 15px;
}
.st-offerings-wrapper {
border-radius: 9px;
}
.st-offerings-left {
padding: 30px 18px 18px;
}
.st-offerings-heading h2 {
font-size: 27px;
margin-bottom: 12px;
}
.st-offerings-heading p {
font-size: 15px;
line-height: 1.5;
}
.st-offerings-tabs {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 6px;
overflow-x: visible;
padding: 0;
}
.st-offering-tab {
width: 100%;
min-height: 50px;
padding: 12px 17px;
font-size: 15px;
line-height: 1.3;
white-space: normal;
text-align: left;
justify-content: flex-start;
}
/* .st-offering-tab.active::before {
left: 17px;
width: 35px;
} */
.st-offering-image {
height: 260px;
}
.st-offering-details {
padding: 22px 18px 25px;
}
.st-offering-list {
grid-template-columns: 1fr;
row-gap: 17px;
}
.st-offering-list a {
font-size: 14px;
line-height: 1.45;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 480px) {
.st-offering-image {
height: 220px;
}
.st-offerings-heading h2 {
font-size: 25px;
}
.st-offerings-heading p {
font-size: 14px;
}
.st-offering-tab {
width: 100%;
font-size: 14px;
padding: 11px 15px;
}
.st-offering-list a {
font-size: 13.5px;
}
}
/* -------------CYBERSECURITY-SERVICE-PAGE------------------ */
/* ---cybersecurity-tabs--- */
.cyber-services-section {
width: 100%;
padding: 70px 0;
}
.cyber-services-section .container-fluid {
width: 100%;
padding-left: 6%;
padding-right: 6%;
}
.cyber-services-wrapper {
display: grid;
grid-template-columns: 34% 66%;
width: 100%;
background: #eef3fb;
/* background: #faf7e8; */
border-radius: 12px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(40, 60, 120, 0.12);
}
.cyber-services-left {
padding: 52px 32px 45px;
display: flex;
flex-direction: column;
}
.cyber-services-heading {
margin-bottom: 30px;
}
.cyber-services-heading h2 {
margin: 0 0 18px;
/* color: #252a32; */
color: #10151d;
font-size: 34px;
line-height: 1.15;
font-weight: 600;
}
.cyber-services-heading p {
margin: 0;
max-width: 600px;
color: #30353d;
font-size: 16px;
line-height: 1.6;
font-weight: 400;
}
.cyber-services-tabs {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 5px;
}
.cyber-services-tab {
position: relative;
width: 100%;
min-height: 68px;
display: flex;
align-items: center;
padding: 18px 22px;
border: 0;
border-radius: 8px;
background: transparent;
/* color: #4b5c8e; */
color: #454440;
text-align: left;
font-family: inherit;
font-size: 18px;
line-height: 1.35;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.cyber-services-tab:hover {
color: #18245e;
background: rgba(255, 255, 255, 0.5);
}
.cyber-services-tab.active {
color: #111c59;
background: #ffffff;
box-shadow: 0 5px 15px rgba(50, 70, 130, 0.04);
}
.cyber-services-tab.active::before {
content: "";
position: absolute;
left: -3px;
top: 18px;
width: 5px;
height: 34px;
border-radius: 10px;
/* background: #4d7cff; */
background: #ffc107;
}
.cyber-services-right {
position: relative;
background: #ffffff;
min-width: 0;
}
.cyber-services-content {
display: none;
width: 100%;
height: 100%;
}
.cyber-services-content.active {
display: block;
}
.cyber-services-details {
width: 100%;
min-height: 100%;
padding: 0;
background: #ffffff;
color: #151922;
}
.cyber-services-detail-image {
width: 100%;
height: 360px;
overflow: hidden;
background: #080b18;
}
.cyber-services-detail-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cyber-services-detail-body {
padding: 48px 52px 52px;
}
.cyber-services-number {
margin-bottom: 10px;
color: #596273;
font-size: 12px;
line-height: 1.3;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
}
.cyber-services-details h3 {
margin: 0 0 16px;
color: #10151d;
font-size: 28px;
line-height: 1.25;
font-weight: 600;
}
.cyber-services-badge {
display: inline-block;
margin-bottom: 20px;
padding: 7px 11px;
background: #f0f0f0;
color: #252a32;
font-size: 13px;
line-height: 1.3;
font-weight: 500;
}
.cyber-services-intro {
margin: 0 0 25px;
color: #171b22;
font-size: 16px;
line-height: 1.7;
}
.cyber-services-label {
margin: 0 0 12px;
color: #68717f;
font-size: 12px;
line-height: 1.3;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
}
.cyber-services-included {
margin: 0 0 25px;
padding-left: 20px;
color: #171b22;
}
.cyber-services-included li {
margin-bottom: 10px;
padding-left: 2px;
font-size: 15px;
line-height: 1.55;
}
.cyber-services-included li:last-child {
margin-bottom: 0;
}
.cyber-services-receive {
margin: 0 0 28px;
padding: 12px 0 12px 16px;
border-left: 4px solid #111c59;
color: #20242b;
font-size: 15px;
line-height: 1.6;
}
.cyber-services-receive strong {
color: #111c59;
font-weight: 700;
}
.cyber-services-who {
margin-top: 0;
}
.cyber-services-who p {
margin: 0;
color: #20242b;
font-size: 15px;
line-height: 1.65;
}
@media (min-width: 1600px) {
.cyber-services-section .container-fluid {
padding-left: 5.8%;
padding-right: 5.8%;
}
.cyber-services-detail-image {
height: 390px;
}
.cyber-services-detail-body {
padding: 52px 65px 58px;
}
.cyber-services-details h3 {
font-size: 30px;
}
}
@media (max-width: 1399px) {
.cyber-services-section .container-fluid {
padding-left: 4%;
padding-right: 4%;
}
.cyber-services-wrapper {
grid-template-columns: 36% 64%;
}
.cyber-services-left {
padding: 42px 25px;
}
.cyber-services-heading h2 {
font-size: 31px;
}
.cyber-services-heading p {
font-size: 15px;
}
.cyber-services-tab {
min-height: 64px;
padding: 16px 20px;
font-size: 17px;
}
.cyber-services-detail-image {
height: 320px;
}
.cyber-services-detail-body {
padding: 42px 42px 48px;
}
}
@media (max-width: 991px) {
.cyber-services-section {
padding: 50px 0;
}
.cyber-services-section .container-fluid {
padding-left: 25px;
padding-right: 25px;
}
/* Stack left and right sections vertically */
.cyber-services-wrapper {
grid-template-columns: 1fr;
}
.cyber-services-left {
padding: 40px 25px 25px;
}
.cyber-services-heading {
margin-bottom: 20px;
}
.cyber-services-heading h2 {
font-size: 30px;
margin-bottom: 14px;
}
/* TABLET: Stack tabs vertically */
.cyber-services-tabs {
display: flex;
flex-direction: column;
gap: 6px;
overflow-x: visible;
padding: 0;
}
.cyber-services-tab {
width: 100%;
min-height: 55px;
padding: 14px 20px;
font-size: 16px;
line-height: 1.35;
white-space: normal;
text-align: left;
}
.cyber-services-tab.active {
border-color: #e4e9f4;
}
.cyber-services-tab.active::before {
/* left: 20px;
top: 18px;
bottom: auto;
width: 5px;
height: 20px; */
content: "";
position: absolute;
left: -3px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 38px;
border-radius: 10px;
}
.cyber-services-detail-image {
height: 300px;
}
.cyber-services-detail-body {
padding: 35px 30px 40px;
}
}
@media (max-width: 767px) {
.cyber-services-section {
padding: 35px 0;
}
.cyber-services-section .container-fluid {
padding-left: 15px;
padding-right: 15px;
}
.cyber-services-wrapper {
border-radius: 9px;
}
.cyber-services-left {
padding: 30px 18px 18px;
}
.cyber-services-heading h2 {
font-size: 27px;
margin-bottom: 12px;
}
.cyber-services-heading p {
font-size: 15px;
line-height: 1.5;
}
.cyber-services-tabs {
flex-direction: column;
gap: 6px;
overflow-x: visible;
padding: 0;
}
.cyber-services-tab {
width: 100%;
min-height: 50px;
padding: 12px 17px;
font-size: 15px;
line-height: 1.3;
white-space: normal;
}
.cyber-services-detail-image {
height: 230px;
}
.cyber-services-detail-body {
padding: 30px 18px 35px;
}
.cyber-services-number {
font-size: 11px;
letter-spacing: 1.7px;
}
.cyber-services-details h3 {
font-size: 24px;
margin-bottom: 14px;
}
.cyber-services-badge {
margin-bottom: 18px;
font-size: 12px;
}
.cyber-services-intro {
font-size: 15px;
line-height: 1.6;
margin-bottom: 22px;
}
.cyber-services-included {
padding-left: 18px;
margin-bottom: 23px;
}
.cyber-services-included li {
font-size: 14px;
line-height: 1.5;
margin-bottom: 9px;
}
.cyber-services-receive,
.cyber-services-who p {
font-size: 14px;
line-height: 1.55;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 480px) {
.cyber-services-left {
padding: 26px 15px 16px;
}
.cyber-services-heading h2 {
font-size: 24px;
}
.cyber-services-heading p {
font-size: 14px;
}
.cyber-services-tab {
font-size: 14px;
padding: 11px 15px;
}
.cyber-services-detail-image {
height: 200px;
}
.cyber-services-detail-body {
padding: 26px 15px 30px;
}
.cyber-services-details h3 {
font-size: 22px;
}
.cyber-services-intro {
font-size: 14px;
}
.cyber-services-included li,
.cyber-services-receive,
.cyber-services-who p {
font-size: 13.5px;
}
}
/* ---cybersecurity-engage-- */
.st-engagement-section {
width: 100%;
padding: 100px 5%;
background: #010615;
overflow: hidden;
}
.st-engagement-container {
width: 100%;
max-width: 1450px;
margin: 0 auto;
}
.st-engagement-heading {
max-width: 760px;
margin: 0 auto 60px;
text-align: center;
}
.st-engagement-label {
display: inline-block;
margin-bottom: 18px;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #79a8ff;
}
.st-engagement-heading h2 {
margin: 0;
font-size: clamp(36px, 4.5vw, 62px);
line-height: 1.05;
font-weight: 600;
letter-spacing: -1.5px;
color: #ffffff;
}
.st-engagement-heading p {
max-width: 650px;
margin: 22px auto 0;
font-size: 17px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.68);
}
.st-engagement-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
align-items: stretch;
}
.st-engagement-card {
width: 100%;
height: 540px;
perspective: 1400px;
}
.st-engagement-card-featured {
transform: translateY(-18px);
}
.st-engagement-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition:
transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 769px) {
.st-engagement-card:hover
.st-engagement-card-inner {
transform: rotateY(180deg);
}
}
.st-engagement-card-face {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 22px;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.st-engagement-overlay {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(
180deg,
rgba(1, 6, 21, 0.08) 0%,
rgba(1, 6, 21, 0.18) 30%,
rgba(1, 6, 21, 0.72) 68%,
rgba(1, 6, 21, 0.98) 100%
);
}
.st-engagement-card-front::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 22px;
pointer-events: none;
}
.st-engagement-front-content {
position: relative;
z-index: 2;
width: 100%;
padding: 34px 34px 36px;
text-align: left;
}
.st-engagement-number {
display: block;
margin-bottom: 18px;
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.7);
}
.st-engagement-front-content h3 {
max-width: 330px;
margin: 0;
font-size: clamp(27px, 2.4vw, 38px);
line-height: 1.08;
font-weight: 600;
letter-spacing: -0.8px;
color: #ffffff;
}
.st-engagement-front-line {
width: 48px;
height: 2px;
margin-top: 25px;
background: #ffffff;
opacity: 0.75;
}
.st-engagement-flip-hint {
display: block;
margin-top: 17px;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.st-engagement-badge {
display: inline-flex;
margin-bottom: 18px;
padding: 7px 12px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 50px;
background: rgba(255, 255, 255, 0.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #ffffff;
}
.st-engagement-card-back {
display: flex;
align-items: center;
padding: 42px;
background:
radial-gradient(
circle at top right,
rgba(75, 130, 255, 0.25),
transparent 45%
),
linear-gradient(
145deg,
#0b1834,
#020713
);
border: 1px solid rgba(112, 155, 255, 0.25);
transform: rotateY(180deg);
}
.st-engagement-back-content {
width: 100%;
}
.st-engagement-back-number {
display: block;
margin-bottom: 16px;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
color: #78a7ff;
}
.st-engagement-back-content h3 {
margin: 0 0 22px;
font-size: clamp(27px, 2.4vw, 37px);
line-height: 1.08;
font-weight: 600;
letter-spacing: -0.7px;
color: #ffffff;
}
.st-engagement-back-content p {
margin: 0;
font-size: 16px;
line-height: 1.75;
color: rgba(255, 255, 255, 0.78);
}
.st-engagement-back-note {
display: block;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.58);
}
/* BACK BADGE */
.st-engagement-back-badge {
display: inline-flex;
margin-bottom: 16px;
padding: 6px 11px;
border-radius: 50px;
background: rgba(120, 167, 255, 0.13);
border: 1px solid rgba(120, 167, 255, 0.28);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #8eb5ff;
}
@media (max-width: 1100px) {
.st-engagement-section {
padding: 85px 4%;
}
.st-engagement-grid {
gap: 20px;
}
.st-engagement-card {
height: 500px;
}
.st-engagement-front-content {
padding: 28px;
}
.st-engagement-card-back {
padding: 30px;
}
}
@media (max-width: 768px) {
.st-engagement-section {
padding: 70px 20px;
}
.st-engagement-heading {
margin-bottom: 40px;
}
.st-engagement-heading h2 {
font-size: clamp(32px, 9vw, 44px);
letter-spacing: -1px;
}
.st-engagement-heading p {
margin-top: 18px;
font-size: 15px;
line-height: 1.65;
}
.st-engagement-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.st-engagement-card {
height: 460px;
}
.st-engagement-card-featured {
transform: none;
}
.st-engagement-front-content {
padding: 28px;
}
.st-engagement-front-content h3 {
font-size: 31px;
}
.st-engagement-card-back {
padding: 30px;
}
.st-engagement-back-content h3 {
font-size: 31px;
}
.st-engagement-back-content p {
font-size: 15px;
line-height: 1.7;
}
.st-engagement-flip-hint::after {
content: " / Tap";
}
}
@media (max-width: 480px) {
.st-engagement-section {
padding: 60px 16px;
}
.st-engagement-card {
height: 430px;
}
.st-engagement-card-face {
border-radius: 18px;
}
.st-engagement-card-front::after {
border-radius: 18px;
}
.st-engagement-front-content {
padding: 24px;
}
.st-engagement-card-back {
padding: 25px;
}
.st-engagement-front-content h3,
.st-engagement-back-content h3 {
font-size: 28px;
}
}
@media (prefers-reduced-motion: reduce) {
.st-engagement-card-inner {
transition: none;
}
}
@media (max-width: 768px) {
.st-engagement-card-active
.st-engagement-card-inner {
transform: rotateY(180deg);
}
}
/* ----cyber-glowing-card-- */
.glowing-card-section {
width: 100%;
padding: 80px 5%;
background: #010615;
}
.glowing-card-header {
width: 100%;
max-width: 900px;
margin: 0 auto 55px;
text-align: center;
}
.glowing-card-label {
display: inline-block;
margin-bottom: 15px;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #a79d68;
}
.glowing-card-header h2 {
margin: 0;
font-size: clamp(32px, 4vw, 52px);
line-height: 1.15;
font-weight: 600;
color: #ffffff;
}
.glowing-card-wrapper {
width: 100%;
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 25px;
}
.glowing-card {
position: relative;
width: 100%;
min-height: 330px;
display: flex;
align-items: center;
justify-content: center;
background: #060c21;
padding: 35px 28px;
isolation: isolate;
}
.glowing-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
background: linear-gradient(
235deg,
#89ff00,
#010615,
#00bcd4
);
animation: glowing-card-animation 2s linear infinite;
}
.glowing-card::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -2;
background: linear-gradient(
235deg,
#89ff00,
#010615,
#00bcd4
);
filter: blur(40px);
animation: glowing-card-animation 2s linear infinite;
}
.glowing-card-glass {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.06);
pointer-events: none;
}
.glowing-card-content {
position: relative;
z-index: 2;
color: #ffffff;
}
.glowing-card-number {
display: block;
margin-bottom: 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
color: #fff;
}
.glowing-card-content h3 {
margin: 0 0 15px;
font-size: 25px;
line-height: 1.2;
color: #ffffff;
}
.glowing-card-content p {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
}
.glowing-card-2::before,
.glowing-card-2::after {
background: linear-gradient(
235deg,
#ff005e,
#010615,
#fbff00
);
}
.glowing-card-3::before,
.glowing-card-3::after {
background: linear-gradient(
235deg,
#772aff,
#010615,
#2196f3
);
}
.glowing-card-4::before,
.glowing-card-4::after {
background: linear-gradient(
235deg,
#00f5ff,
#010615,
#7c4dff
);
}
.glowing-card-5::before,
.glowing-card-5::after {
background: linear-gradient(
235deg,
#ff7b00,
#010615,
#ff005e
);
}
@keyframes glowing-card-animation {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@media (max-width: 1100px) {
.glowing-card-wrapper {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
.glowing-card-section {
padding: 60px 20px;
}
.glowing-card-header {
margin-bottom: 40px;
}
.glowing-card-label {
font-size: 12px;
margin-bottom: 12px;
}
.glowing-card-header h2 {
font-size: 32px;
}
.glowing-card-wrapper {
grid-template-columns: 1fr !important;
gap: 25px;
}
.glowing-card {
min-height: 280px;
padding: 30px 25px;
}
.glowing-card-content h3 {
font-size: 23px;
}
}
/* --cyber-waht-we-do-not-do-- */
.what-we-do-not-do-section {
width: 100%;
padding: 90px 5%;
background: #eef3fb;
overflow: hidden;
}
.what-we-do-not-do-container {
width: 100%;
max-width: 1450px;
margin: 0 auto;
}
.what-we-do-not-do-heading {
margin-bottom: 55px;
}
.what-we-do-not-do-heading span {
display: block;
margin-bottom: 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #617fc5;
}
.what-we-do-not-do-heading h2 {
margin: 0;
max-width: 750px;
font-size: clamp(34px, 4vw, 58px);
line-height: 1.05;
font-weight: 500;
letter-spacing: -2px;
color: #111956;
}
.what-we-do-not-do-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 45px 35px;
align-items: start;
}
.what-we-do-not-do-card {
position: relative;
width: 100%;
padding-bottom: 55px;
}
.what-we-do-not-do-image {
position: relative;
width: 100%;
aspect-ratio: 1.45 / 1;
overflow: hidden;
border-radius: 22px;
background: #dce5f2;
}
.what-we-do-not-do-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.5s ease;
}
.what-we-do-not-do-card:hover
.what-we-do-not-do-image img {
transform: scale(1.05);
}
.what-we-do-not-do-content {
position: relative;
width: calc(100% - 50px);
margin: -65px auto 0;
padding: 30px 30px 28px;
background: #ffffff;
border-radius: 18px;
text-align: center;
z-index: 2;
box-shadow: 0 8px 30px rgba(20, 35, 70, 0.06);
min-height: 190px;
display: flex;
flex-direction: column;
justify-content: center;
}
.what-we-do-not-do-content h3 {
margin: 0 0 14px;
color: #111956;
font-size: clamp(20px, 1.6vw, 27px);
line-height: 1.2;
font-weight: 500;
letter-spacing: -0.5px;
}
.what-we-do-not-do-content p {
margin: 0;
color: #5d6475;
font-size: 14px;
line-height: 1.65;
font-weight: 400;
}
@media (max-width: 1199px) {
.what-we-do-not-do-section {
padding: 75px 4%;
}
.what-we-do-not-do-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 35px 25px;
}
.what-we-do-not-do-image {
aspect-ratio: 1.45 / 1;
}
.what-we-do-not-do-content {
width: calc(100% - 40px);
min-height: 175px;
padding: 27px 24px;
}
.what-we-do-not-do-content h3 {
font-size: 23px;
}
}
@media (max-width: 767px) {
.what-we-do-not-do-section {
padding: 65px 20px;
}
.what-we-do-not-do-heading {
margin-bottom: 40px;
}
.what-we-do-not-do-heading span {
font-size: 11px;
letter-spacing: 1.5px;
}
.what-we-do-not-do-heading h2 {
font-size: 36px;
line-height: 1.1;
letter-spacing: -1.2px;
}
.what-we-do-not-do-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.what-we-do-not-do-card {
padding-bottom: 35px;
}
.what-we-do-not-do-image {
aspect-ratio: 1.45 / 1;
border-radius: 18px;
}
.what-we-do-not-do-content {
width: calc(100% - 30px);
margin-top: -45px;
padding: 25px 22px;
min-height: auto;
border-radius: 16px;
}
.what-we-do-not-do-content h3 {
font-size: 23px;
line-height: 1.2;
}
.what-we-do-not-do-content p {
font-size: 14px;
line-height: 1.6;
}
}
@media (max-width: 480px) {
.what-we-do-not-do-section {
padding: 55px 16px;
}
.what-we-do-not-do-heading h2 {
font-size: 30px;
}
.what-we-do-not-do-image {
aspect-ratio: 1 / 0.78;
border-radius: 16px;
}
.what-we-do-not-do-content {
width: calc(100% - 24px);
margin-top: -40px;
padding: 23px 18px;
}
.what-we-do-not-do-content h3 {
font-size: 21px;
}
.what-we-do-not-do-content p {
font-size: 13px;
}
}
/* ------------------SERVICES-LANDING-------------- */
.service-head-btn2{
background-color: #fff !important;
color: #000 !important;
border: 1px solid #000 !important;
}
.service-sec1-tail{
border-top: 1px solid rgb(146 146 146 / 32%);
margin-top: 2rem;
}
.service-sec1-tail p{
text-transform: uppercase;
text-align: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
.service-sec1-tail .at-hero-social {
justify-content: center;
}
}
/* --- */
.st-service-lines {
width: 100%;
padding: 100px 0 0px;
background: #fff;
color: #111;
}
.st-service-container {
width: min(100% - 48px, 1200px);
margin: 0 auto;
}
.st-service-heading {
text-align: center;
max-width: 760px;
margin: 0 auto 48px;
}
.st-service-eyebrow {
display: block;
margin-bottom: 16px;
font-size: 13px;
line-height: 1;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #174a9c;
}
.st-service-heading h2 {
margin: 0 0 16px;
font-size: clamp(36px, 4.2vw, 54px);
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.9px;
}
.st-service-heading p {
max-width: 640px;
margin: 0 auto;
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.65;
color: #666;
}
.st-service-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 56px;
}
.st-service-card {
min-height: 150px;
padding: 24px 22px;
display: flex;
flex-direction: column;
text-decoration: none;
color: #111;
border: 1px solid #e5e5e5;
border-radius: 12px;
background: #fff;
transition:
border-color 0.25s ease,
background 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}
.st-service-card:hover {
color: #111;
text-decoration: none;
border-color: #cbd5e1;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
.st-service-card.active {
background: #eef3ff;
border-color: #c6d4ff;
box-shadow: 0 5px 18px rgba(80, 120, 220, 0.08);
}
/* Card number */
.st-card-number {
display: block;
margin-bottom: 14px;
font-size: 12px;
line-height: 1;
font-weight: 500;
color: #666;
letter-spacing: 0.6px;
}
/* Card title */
.st-service-card h3 {
margin: 0 0 10px;
font-size: 18px;
line-height: 1.35;
font-weight: 600;
}
.st-service-card p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #777;
}
.st-service-card.st-service-next {
background: #eef3ff;
border-color: #c8d5ff;
}
.st-service-card.st-service-next .st-card-number {
color: #174a9c;
}
.st-service-card.st-service-next:hover {
background: #e7edff;
border-color: #b9c9ff;
}
.st-service-details {
width: 100%;
}
.st-service-detail {
display: grid;
/* grid-template-columns: minmax(0, 1fr) 380px; */
grid-template-columns: minmax(0, 1fr) 500px;
/* grid-template-columns: minmax(0, 1.6fr) 1fr; */
align-items: center;
gap: 28px;
padding: 56px 0;
border-top: 1px solid #e5e5e5;
scroll-margin-top: 100px;
}
.st-service-detail-content {
min-width: 0;
}
.st-detail-number {
display: block;
margin-bottom: 18px;
font-size: 12px;
line-height: 1.3;
font-weight: 700;
letter-spacing: 1.4px;
color: #174a9c;
}
.st-service-detail-content h2 {
max-width: 540px;
margin: 0 0 16px;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.2;
font-weight: 600;
letter-spacing: -0.6px;
}
.st-service-detail-content p {
max-width: 560px;
margin: 0 0 22px;
font-size: clamp(15px, 1.2vw, 16.5px);
line-height: 1.75;
color: #666;
}
.st-service-best {
max-width: 560px;
padding: 14px 18px;
margin-bottom: 22px;
border: 1px solid #cbd7ff;
border-radius: 8px;
background: #eef3ff;
font-size: 14px;
line-height: 1.65;
color: #456;
}
.st-service-best strong {
font-weight: 600;
color: #174a9c;
}
.st-service-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 1.2;
font-weight: 500;
color: #111;
text-decoration: none;
}
.st-service-link span {
font-size: 19px;
line-height: 1;
transition: transform 0.2s ease;
}
.st-service-link:hover {
color: #174a9c;
text-decoration: none;
}
.st-service-link:hover span {
transform: translateX(4px);
}
.st-deliver-box {
width: 100%;
padding: 32px 30px;
border-radius: 12px;
background: linear-gradient(
145deg,
#242424 0%,
#151515 100%
);
color: #fff;
}
.st-deliver-title {
display: block;
margin-bottom: 20px;
font-size: 12px;
line-height: 1;
font-weight: 600;
letter-spacing: 1.3px;
color: #aaa;
}
.st-deliver-box ul {
padding: 0;
margin: 0;
list-style: none;
}
.st-deliver-box li {
position: relative;
padding-left: 16px;
margin-bottom: 16px;
font-size: 14.5px;
line-height: 1.65;
color: #fff;
}
.st-deliver-box li:last-child {
margin-bottom: 0;
}
.st-deliver-box li::before {
content: "›";
position: absolute;
left: 0;
top: 0;
color: #7298ff;
font-weight: 700;
}
@media (max-width: 991px) {
.st-service-lines {
padding: 75px 0 100px;
}
.st-service-heading h2 {
font-size: 38px;
}
.st-service-heading p {
font-size: 15px;
}
.st-service-card h3 {
font-size: 16px;
}
.st-service-card p {
font-size: 13px;
}
.st-service-container {
width: min(100% - 36px, 780px);
}
.st-service-cards {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.st-service-detail {
grid-template-columns: 1fr 320px;
gap: 32px;
padding: 48px 0;
}
.st-service-detail-content h2 {
font-size: 30px;
}
.st-service-detail-content p {
font-size: 15px;
}
.st-service-best {
font-size: 13px;
}
.st-deliver-box li {
font-size: 13.5px;
}
}
@media (max-width: 767px) {
.st-service-eyebrow {
font-size: 12px;
}
.st-service-lines {
padding: 60px 0 80px;
}
.st-service-container {
width: calc(100% - 30px);
}
.st-service-heading {
margin-bottom: 36px;
}
.st-service-heading h2 {
font-size: 30px;
line-height: 1.25;
}
.st-service-heading p {
font-size: 14.5px;
line-height: 1.65;
}
.st-card-number {
font-size: 12px;
}
.st-service-cards {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 32px;
}
.st-service-card {
min-height: 140px;
padding: 18px 16px;
}
.st-service-card h3 {
font-size: 14px;
line-height: 1.4;
}
.st-service-card p {
font-size: 12.5px;
}
.st-service-detail {
grid-template-columns: 1fr;
gap: 28px;
padding: 44px 0;
}
.st-service-detail-content h2 {
font-size: 26px;
}
.st-service-detail-content p {
font-size: 14.5px;
}
.st-service-best {
font-size: 13px;
}
.st-deliver-box {
padding: 26px 22px;
}
.st-deliver-box li {
font-size: 14px;
}
}
@media (max-width: 480px) {
.st-service-cards {
grid-template-columns: 1fr;
}
.st-service-card {
min-height: auto;
padding: 20px 18px;
}
.st-service-heading h2 {
font-size: 26px;
}
.st-detail-number {
font-size: 11px;
}
.st-service-detail-content h2 {
font-size: 24px;
}
}
/* --- */
.engagement-section {
padding: 100px 20px;
background: #f7f8fb;
}
.engagement-container {
width: min(1180px, 100%);
margin: 0 auto;
}
/* Heading */
.engagement-heading {
max-width: 780px;
margin: 0 auto 65px;
text-align: center;
}
.engagement-label {
display: inline-block;
margin-bottom: 18px;
font-size: 13px;
font-weight: 700;
letter-spacing: 2.5px;
color: #3158c9;
}
.engagement-heading h2 {
margin: 0 0 18px;
color: #17191d;
font-size: clamp(34px, 4vw, 52px);
line-height: 1.1;
font-weight: 650;
letter-spacing: -1.8px;
}
.engagement-heading p {
max-width: 700px;
margin: 0 auto;
color: #647085;
font-size: 18px;
line-height: 1.7;
}
.engagement-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
align-items: stretch;
}
.engagement-card {
position: relative;
min-height: 455px;
padding: 34px 32px 30px;
overflow: hidden;
background: #ffffff;
border: 1px solid #e4e7ed;
border-radius: 20px;
display: flex;
flex-direction: column;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.engagement-card:hover {
transform: translateY(-7px);
border-color: #d5dbea;
box-shadow: 0 18px 45px rgba(28, 40, 65, 0.09);
}
.engagement-card-featured {
background: #172d67;
border-color: #172d67;
color: #ffffff;
}
.engagement-card-featured:hover {
border-color: #172d67;
box-shadow: 0 20px 50px rgba(23, 45, 103, 0.22);
}
.card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-bottom: 55px;
}
.card-number {
display: flex;
align-items: center;
justify-content: center;
width: 43px;
height: 43px;
border-radius: 50%;
background: #eef2ff;
color: #3158c9;
font-size: 13px;
font-weight: 700;
}
.engagement-card-featured .card-number {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.card-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
color: #8a95a8;
}
.engagement-card-featured .card-tag {
color: #b9c8f5;
}
.engagement-card h3 {
margin: 0 0 18px;
color: #17191d;
font-size: 27px;
line-height: 1.2;
font-weight: 650;
letter-spacing: -0.7px;
}
.engagement-card-featured h3 {
color: #ffffff;
}
.card-description {
margin: 0;
color: #657084;
font-size: 16px;
line-height: 1.75;
}
.engagement-card-featured .card-description {
color: #dce4f8;
}
.card-divider {
width: 100%;
height: 1px;
margin: 28px 0 20px;
background: #e8ebf0;
}
.engagement-card-featured .card-divider {
background: rgba(255, 255, 255, 0.16);
}
.card-note {
margin: 0;
color: #737e91;
font-size: 14px;
line-height: 1.65;
}
.engagement-card-featured .card-note {
color: #c9d4ee;
}
.card-arrow {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 28px;
color: #a0a8b7;
font-size: 12px;
font-weight: 700;
}
.arrow-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid #e0e4eb;
border-radius: 50%;
color: #3158c9;
font-size: 17px;
transition: all 0.3s ease;
}
.engagement-card:hover .arrow-icon {
background: #3158c9;
border-color: #3158c9;
color: #ffffff;
}
.engagement-card-featured .card-arrow {
color: #9eafd9;
}
.engagement-card-featured .arrow-icon {
border-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.engagement-card-featured:hover .arrow-icon {
background: #ffffff;
border-color: #ffffff;
color: #172d67;
}
@media (max-width: 991px) {
.engagement-section {
padding: 75px 20px;
}
.engagement-heading {
margin-bottom: 45px;
}
.engagement-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.engagement-card:last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 767px) {
.engagement-section {
padding: 60px 16px;
}
.engagement-heading {
margin-bottom: 35px;
}
.engagement-label {
font-size: 11px;
letter-spacing: 2px;
}
.engagement-heading h2 {
font-size: 34px;
letter-spacing: -1px;
}
.engagement-heading p {
font-size: 16px;
line-height: 1.6;
}
.engagement-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.engagement-card:last-child {
grid-column: auto;
}
.engagement-card {
min-height: auto;
padding: 28px 24px 25px;
border-radius: 17px;
}
.card-top {
margin-bottom: 38px;
}
.engagement-card h3 {
font-size: 24px;
}
.card-description {
font-size: 15px;
}
}
@media (max-width: 420px) {
.engagement-heading h2 {
font-size: 30px;
}
.card-top {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
.engagement-card {
padding: 25px 21px;
}
}
/* --- */
.service-why-sharktech {
padding: 90px 0 100px;
background-color: #f5f5f5;
}
.sharktech-section-label {
color: var(--at-theme-primary);
}
.service-why-sharktech-title {
margin-bottom: 2rem;
margin-top: 1rem;
}
.service-why-sharktech .col {
padding: 0 1em 1em 1em;
text-align: center;
}
.service-why-sharktech-card {
width: 100%;
height: 100%;
padding: 2em 1.5em;
border-radius: 5px;
/* box-shadow: 0 0 35px rgba(0, 0, 0, 0.12); */
cursor: pointer;
transition: 0.5s;
position: relative;
z-index: 2;
overflow: hidden;
background: #fff;
}
.service-why-sharktech-card::after {
content: "";
width: 100%;
height: 100%;
background: linear-gradient(rgb(27 83 222 / 75%), rgb(4 8 10));
position: absolute;
left: 0%;
top: -98%;
z-index: -2;
transition: all 0.4s cubic-bezier(0.77, -0.04, 0, 0.99);
}
.service-why-sharktech-card h3 {
font-size: 20px;
text-transform: capitalize;
font-weight: 600;
color: #1f194c;
margin: 1em 0;
z-index: 3;
}
.service-why-sharktech-card p {
color: #575a7b;
font-size: 15px;
line-height: 1.6;
letter-spacing: 0.03em;
z-index: 3;
}
.service-why-sharktech-card:hover::after {
top: 0%;
}
.service-why-sharktech-card:hover h3 {
color: #ffffff;
}
.service-why-sharktech-card:hover p {
color: #f0f0f0;
}
/* --- */
.ai-capabilities-section {
width: 100%;
padding: 100px 0;
background: #ffffff;
}
.ai-capabilities-container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}
.ai-capabilities-header {
max-width: 850px;
margin-bottom: 60px;
}
.ai-capabilities-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #555;
}
.ai-capabilities-label::before {
content: "";
width: 30px;
height: 1px;
background: #111;
}
.ai-capabilities-heading {
margin: 0 0 20px;
font-size: clamp(42px, 5vw, 72px);
line-height: 1;
letter-spacing: -3px;
font-weight: 600;
color: #111;
}
.ai-capabilities-intro {
max-width: 700px;
margin: 0;
font-size: 18px;
line-height: 1.7;
color: #666;
}
.ai-capabilities-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.ai-capability-card {
position: relative;
/* min-height: 340px; */
/* padding: 40px; */
padding: 1.5rem;
display: flex;
flex-direction: column;
/* justify-content: space-between; */
justify-content: space-evenly;
background: #f4f4f4;
/* border: 1px solid #e5e5e5; */
border-radius: 1.5rem;
overflow: hidden;
transition:
transform 0.3s ease,
background 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.ai-capability-card:hover {
transform: translateY(-5px);
background: #eeeeee;
border-color: #d5d5d5;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.07);
}
.ai-capability-top {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.ai-capability-number {
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
color: #999;
}
.ai-capability-name {
position: relative;
z-index: 2;
max-width: 650px;
/* margin: 55px 0 35px; */
/* font-size: clamp(28px, 3vw, 42px); */
font-size: clamp(24px, 2vw, 38px);
line-height: 1.08;
letter-spacing: -1.5px;
font-weight: 600;
color: #111;
}
.ai-capability-tags {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.ai-capability-tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 7px 16px;
border: 1px solid #cfcfcf;
border-radius: 50px;
background: rgba(255, 255, 255, 0.3);
color: #222;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.7px;
text-transform: uppercase;
text-decoration: none;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.ai-capability-tag:hover {
background: #111;
border-color: #111;
color: #fff;
}
@media (max-width: 991px) {
.ai-capabilities-section {
padding: 80px 0;
}
.ai-capabilities-container {
padding: 0 30px;
}
.ai-capabilities-header {
margin-bottom: 45px;
}
.ai-capability-card {
min-height: 310px;
padding: 32px;
}
.ai-capability-name {
margin-top: 45px;
font-size: 30px;
}
}
@media (max-width: 767px) {
.ai-capabilities-section {
padding: 65px 0;
}
.ai-capabilities-container {
padding: 0 20px;
}
.ai-capabilities-header {
margin-bottom: 35px;
}
.ai-capabilities-label {
font-size: 11px;
letter-spacing: 1.2px;
}
.ai-capabilities-heading {
font-size: 42px;
letter-spacing: -2px;
}
.ai-capabilities-intro {
font-size: 16px;
line-height: 1.6;
}
.ai-capabilities-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.ai-capability-card {
min-height: 275px;
padding: 28px 25px;
}
.ai-capability-name {
margin: 45px 0 28px;
font-size: 28px;
letter-spacing: -1px;
}
.ai-capability-tag {
min-height: 35px;
padding: 6px 13px;
font-size: 11px;
}
}
@media (max-width: 480px) {
.ai-capabilities-section {
padding: 50px 0;
}
.ai-capabilities-container {
padding: 0 16px;
}
.ai-capabilities-heading {
font-size: 36px;
}
.ai-capability-card {
min-height: 250px;
padding: 24px 22px;
}
.ai-capability-name {
font-size: 25px;
}
.ai-capability-tags {
gap: 7px;
}
.ai-capability-tag {
padding: 6px 12px;
}
}
/* -------INDUSTRY-LANDING PG----- */
/* =========================================================
SHARKTECH FEATURE SECTION
========================================================= */
.sharktech-feature-section {
width: min(1488px, 100%);
margin: 0 auto;
padding: 80px 27px;
}
/* =========================================================
SECTION HEADING
========================================================= */
.sharktech-feature-heading {
max-width: 800px;
margin-bottom: 50px;
}
.sharktech-feature-label {
display: block;
margin-bottom: 12px;
color: #022e4f;
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
line-height: 1.4;
text-transform: uppercase;
}
.sharktech-feature-title {
margin: 0;
color: #022e4f;
font-size: clamp(34px, 4vw, 56px);
font-weight: 700;
line-height: 1.1;
}
/* =========================================================
CARDS WRAPPER
========================================================= */
.sharktech-feature-cards {
--sharktech-gap: 30px;
--sharktech-card-height: 300px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sharktech-gap);
width: 100%;
}
/* =========================================================
CARD
========================================================= */
.sharktech-feature-card {
background: #e1e1e1ad;
border-radius: 20px;
display: grid;
grid-template-columns:
minmax(0, 1fr)
0fr;
height: var(--sharktech-card-height);
min-width: 0;
position: relative;
box-shadow:
5px 5px 10px rgba(0, 0, 0, 0),
-5px -5px 10px rgba(0, 0, 0, 0);
transition:
grid-template-columns 0.7s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.7s ease;
}
/* =========================================================
FRONT CARD
========================================================= */
.sharktech-feature-card-front {
background: rgb(33 37 42 / 18%);
border-radius: 20px;
height: 100%;
min-height: 0;
overflow: hidden;
position: relative;
z-index: 1;
transition:
border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* =========================================================
IMAGE
========================================================= */
.sharktech-feature-card-front img {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
transition:
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
scale 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* =========================================================
IMAGE DARK OVERLAY
========================================================= */
.sharktech-feature-card-front::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(0, 0, 0, .78),
rgba(0, 0, 0, .05) 75%
);
pointer-events: none;
z-index: 0;
}
/* =========================================================
FRONT CONTENT
========================================================= */
.sharktech-feature-card-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 100%;
padding: 17px;
/* padding: 27px */
z-index: 1;
}
.sharktech-feature-card-overlay h3 {
margin: 0 0 8px;
color: #fff;
font-size: 18px;
/* font-size: 23px; */
font-weight: 700;
line-height: 1.2;
}
.sharktech-feature-card-overlay p {
max-width: 330px;
margin: 0;
color: #fff;
font-size: 15px;
line-height: 1.55;
}
/* =========================================================
ARROW
========================================================= */
.sharktech-feature-card-arrow {
width: 44px;
aspect-ratio: 1;
position: absolute;
right: 14px;
bottom: 29px;
border: 0;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M-0.00015775 13.6201L0.0635741 10.2112L17.8296 10.3658L9.94449 2.48066L12.425 0.000170129L24.3722 11.9474L11.9697 24.3498L9.58029 21.9603L17.7659 13.7747L-0.00015775 13.6201Z' fill='white'/%3E%3C/svg%3E")
no-repeat center / 20px;
z-index: 2;
cursor: pointer;
transition:
opacity 0.5s ease,
translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* =========================================================
EXPANDED DETAILS
========================================================= */
.sharktech-feature-card-details {
overflow: hidden;
min-width: 0;
height: 100%;
display: flex;
align-items: center;
opacity: 0;
transition:
opacity 0.6s ease;
}
.sharktech-feature-card-details-inner {
width: 100%;
/* padding: 27px; */
padding: 10px;
transform: translateX(20%);
transition:
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.sharktech-feature-card-details h3 {
margin: 0 0 12px;
color: #022e4f;
font-size: 25px;
font-weight: 700;
line-height: 1.2;
}
.sharktech-feature-card-details p {
margin: 0 0 28px;
color: #333;
font-size: 15px;
line-height: 1.6;
}
/* =========================================================
READ MORE
========================================================= */
.sharktech-feature-read-more {
display: inline-flex;
align-items: center;
gap: 10px;
color: #022e4f;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition:
gap 0.35s ease;
}
.sharktech-feature-read-more i {
font-size: 12px;
}
.sharktech-feature-read-more:hover {
gap: 15px;
}
/* =========================================================
DESKTOP
========================================================= */
@media (min-width: 900px) {
.sharktech-feature-card-details-inner {
padding: 10px;
}
/* -----------------------------------------
DEFAULT CARD
----------------------------------------- */
.sharktech-feature-card {
grid-template-columns:
minmax(0, 1fr)
0fr;
}
/* -----------------------------------------
FIRST CARD OPEN BY DEFAULT
----------------------------------------- */
.sharktech-feature-cards:not(:hover)
.sharktech-feature-card:first-child {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
box-shadow:
5px 5px 10px rgba(0, 0, 0, .10),
-5px -5px 10px #fff;
}
.sharktech-feature-cards:not(:hover)
.sharktech-feature-card:first-child
.sharktech-feature-card-front {
border-radius: 20px 0 0 20px;
}
.sharktech-feature-cards:not(:hover)
.sharktech-feature-card:first-child
.sharktech-feature-card-front img {
scale: 1.15;
}
.sharktech-feature-cards:not(:hover)
.sharktech-feature-card:first-child
.sharktech-feature-card-arrow {
opacity: 0;
translate: 50px 0;
}
.sharktech-feature-cards:not(:hover)
.sharktech-feature-card:first-child
.sharktech-feature-card-details {
opacity: 1;
}
.sharktech-feature-cards:not(:hover)
.sharktech-feature-card:first-child
.sharktech-feature-card-details-inner {
transform: translateX(0);
}
/* -----------------------------------------
HOVERED CARD EXPANDS
----------------------------------------- */
.sharktech-feature-card:hover {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
box-shadow:
5px 5px 10px rgba(0, 0, 0, .10),
-5px -5px 10px #fff;
}
.sharktech-feature-card:hover
.sharktech-feature-card-front {
border-radius: 20px 0 0 20px;
}
.sharktech-feature-card:hover
.sharktech-feature-card-front img {
scale: 1.15;
}
.sharktech-feature-card:hover
.sharktech-feature-card-arrow {
opacity: 0;
translate: 50px 0;
}
.sharktech-feature-card:hover
.sharktech-feature-card-details {
opacity: 1;
}
.sharktech-feature-card:hover
.sharktech-feature-card-details-inner {
transform: translateX(0);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 899px) {
.sharktech-feature-section {
padding: 70px 24px;
}
.sharktech-feature-heading {
margin-bottom: 40px;
}
.sharktech-feature-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
--sharktech-card-height: 260px;
gap: 25px;
}
.sharktech-feature-card {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
box-shadow:
5px 5px 10px rgba(0, 0, 0, .10),
-5px -5px 10px #fff;
}
.sharktech-feature-card-front {
border-radius: 20px 0 0 20px;
}
.sharktech-feature-card-overlay h3 {
display: none;
}
.sharktech-feature-card-details h3 {
font-size: 17px;
}
.sharktech-feature-card-details {
opacity: 1;
}
.sharktech-feature-card-details-inner {
transform: translateX(0);
}
.sharktech-feature-card-arrow {
display: none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 599px) {
.sharktech-feature-section {
padding: 55px 18px;
}
.sharktech-feature-heading {
margin-bottom: 30px;
}
.sharktech-feature-label {
font-size: 11px;
}
.sharktech-feature-title {
font-size: 34px;
}
.sharktech-feature-cards {
grid-template-columns: 1fr;
gap: 22px;
}
.sharktech-feature-card {
display: block;
height: auto;
}
.sharktech-feature-card-front {
height: 240px;
border-radius: 20px 20px 0 0 !important;
}
.sharktech-feature-card-details {
width: 100%;
height: auto;
}
.sharktech-feature-card-details-inner {
padding: 24px;
}
.sharktech-feature-card-overlay {
/* padding: 24px; */
padding: 17px;
}
.sharktech-feature-card-overlay h3 {
font-size: 18px;
/* font-size: 23px; */
display: none;
}
.sharktech-feature-card-details h3 {
font-size: 22px;
}
}
/* --- */
.st-comparison-section {
padding: 90px 0;
background: #f8faff;
overflow: hidden;
}
.st-comparison-heading {
max-width: 760px;
margin: 0 auto 52px;
text-align: center;
}
.st-section-label {
display: inline-block;
margin-bottom: 16px;
color: #2458c6;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.st-comparison-heading h2 {
margin: 0 0 16px;
color: #101828;
font-size: clamp(30px, 3.4vw, 42px);
font-weight: 650;
line-height: 1.22;
letter-spacing: -1.4px;
}
.st-comparison-heading p {
margin: 0;
color: #667085;
font-size: 17px;
line-height: 1.7;
}
/* ========================================
TABLE WRAPPER
======================================== */
.st-comparison-wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
background: #fff;
border: 1px solid #e3e8f0;
border-radius: 20px;
box-shadow: 0 12px 40px rgba(16, 24, 40, 0.045);
}
.st-comparison-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.st-comparison-table th,
.st-comparison-table td {
padding: 21px 24px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid #edf0f4;
font-size: 15px;
line-height: 1.6;
}
.st-comparison-table th {
background: #f4f6fa;
color: #536176;
font-size: 12px;
font-weight: 750;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.st-comparison-table th:first-child {
border-radius: 19px 0 0 0;
}
.st-comparison-table th:last-child {
border-radius: 0 19px 0 0;
}
/* ========================================
COLUMN WIDTHS
======================================== */
.st-comparison-table th:nth-child(1),
.st-comparison-table td:nth-child(1) {
width: 34%;
}
.st-comparison-table th:nth-child(2),
.st-comparison-table td:nth-child(2) {
width: 24%;
}
.st-comparison-table th:nth-child(3),
.st-comparison-table td:nth-child(3) {
width: 42%;
}
/* ========================================
FIRST COLUMN
======================================== */
.st-comparison-table .st-need-column {
color: #182230;
}
.st-row-title {
display: block;
font-weight: 600;
}
/* ========================================
SHARKTECH COLUMN
======================================== */
.st-comparison-table .st-sharktech-heading {
background: #eaf0ff;
color: #1747ad;
}
.st-partner-tag {
display: inline-block;
margin-left: 7px;
padding: 3px 8px;
background: #d8e5ff;
color: #2458c6;
border-radius: 20px;
font-size: 9px;
letter-spacing: 0.5px;
vertical-align: middle;
}
.st-comparison-table .st-sharktech-cell {
background: #f7f9ff;
color: #1949b0;
font-weight: 550;
}
.st-answer {
display: inline-flex;
align-items: flex-start;
gap: 9px;
}
.st-answer i {
margin-top: 4px;
color: #3268d5;
font-size: 15px;
flex-shrink: 0;
}
/* ========================================
ROW HOVER
======================================== */
.st-comparison-table tbody tr {
transition: background-color 0.25s ease;
}
.st-comparison-table tbody tr:hover td {
background-color: #f2f6ff;
}
.st-comparison-table tbody tr:hover .st-sharktech-cell {
background-color: #eaf1ff;
}
.st-comparison-table tbody tr:last-child td {
border-bottom: none;
}
/* ========================================
LARGE TABLET
======================================== */
@media (max-width: 1199.98px) {
.st-comparison-section {
padding: 80px 0;
}
.st-comparison-wrapper {
width: calc(100% - 30px);
}
.st-comparison-table th,
.st-comparison-table td {
padding: 19px 18px;
}
}
/* ========================================
TABLET
======================================== */
@media (max-width: 991.98px) {
.st-comparison-section {
padding: 70px 0;
}
.st-comparison-heading {
max-width: 680px;
margin-bottom: 40px;
}
.st-comparison-heading h2 {
font-size: 34px;
}
.st-comparison-heading p {
font-size: 16px;
}
.st-comparison-wrapper {
width: 100%;
border-radius: 16px;
}
.st-comparison-table th,
.st-comparison-table td {
padding: 17px 14px;
font-size: 14px;
}
.st-comparison-table th {
font-size: 10px;
letter-spacing: 1px;
}
.st-comparison-table th:nth-child(1),
.st-comparison-table td:nth-child(1) {
width: 32%;
}
.st-comparison-table th:nth-child(2),
.st-comparison-table td:nth-child(2) {
width: 27%;
}
.st-comparison-table th:nth-child(3),
.st-comparison-table td:nth-child(3) {
width: 41%;
}
.st-partner-tag {
display: block;
width: fit-content;
margin: 6px 0 0;
}
}
/* ========================================
MOBILE
======================================== */
@media (max-width: 767.98px) {
.st-comparison-section {
padding: 55px 0;
}
.st-comparison-section .container {
padding-left: 15px;
padding-right: 15px;
}
.st-comparison-heading {
padding: 0;
margin-bottom: 32px;
}
.st-section-label {
margin-bottom: 11px;
font-size: 10px;
letter-spacing: 1.5px;
}
.st-comparison-heading h2 {
margin-bottom: 14px;
font-size: 29px;
line-height: 1.28;
letter-spacing: -0.7px;
}
.st-comparison-heading p {
font-size: 15px;
line-height: 1.6;
}
/* --------------------------------
MOBILE CARD LAYOUT
-------------------------------- */
.st-comparison-wrapper {
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.st-comparison-table,
.st-comparison-table tbody {
display: block;
width: 100%;
}
.st-comparison-table thead {
display: none;
}
.st-comparison-table tbody tr {
display: block;
width: 100%;
margin-bottom: 14px;
overflow: hidden;
background: #fff;
border: 1px solid #e3e8f0;
border-radius: 14px;
box-shadow: 0 7px 22px rgba(16, 24, 40, 0.045);
}
.st-comparison-table tbody tr:last-child {
margin-bottom: 0;
}
.st-comparison-table tbody tr:hover td,
.st-comparison-table tbody tr:hover .st-sharktech-cell {
background: inherit;
}
.st-comparison-table td {
display: block;
width: 100% !important;
min-height: auto;
padding: 14px 16px;
border-bottom: 1px solid #edf0f4;
font-size: 14px;
line-height: 1.55;
}
.st-comparison-table td:last-child {
border-bottom: 0;
}
/* Need / requirement */
.st-comparison-table td:nth-child(1) {
padding-bottom: 11px;
background: #f8faff;
}
.st-comparison-table td:nth-child(1)::before {
display: block;
margin-bottom: 5px;
color: #8a95a8;
content: "WHAT YOU NEED";
font-size: 9px;
font-weight: 750;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.st-row-title {
font-size: 14px;
line-height: 1.45;
}
/* Traditional IT */
.st-comparison-table td:nth-child(2)::before {
display: block;
margin-bottom: 5px;
color: #8a95a8;
content: "TRADITIONAL IT PROVIDER";
font-size: 9px;
font-weight: 750;
letter-spacing: 1.1px;
}
/* Sharktech */
.st-comparison-table td:nth-child(3) {
background: #f7f9ff;
color: #1949b0;
}
.st-comparison-table td:nth-child(3)::before {
display: block;
margin-bottom: 6px;
color: #2458c6;
content: "SHARKTECH GLOBAL";
font-size: 9px;
font-weight: 750;
letter-spacing: 1.1px;
}
.st-answer {
gap: 8px;
}
.st-answer i {
margin-top: 3px;
font-size: 14px;
}
.st-partner-tag {
display: inline-block;
margin: 5px 0 0;
padding: 3px 7px;
font-size: 8px;
}
}
/* ========================================
SMALL MOBILE
======================================== */
@media (max-width: 575.98px) {
.st-comparison-section {
padding: 45px 0;
}
.st-comparison-heading {
margin-bottom: 27px;
}
.st-comparison-heading h2 {
font-size: 26px;
line-height: 1.3;
letter-spacing: -0.5px;
}
.st-comparison-heading p {
font-size: 14px;
}
.st-comparison-table tbody tr {
margin-bottom: 12px;
border-radius: 13px;
}
.st-comparison-table td {
padding: 13px 14px;
font-size: 13px;
}
.st-row-title {
font-size: 13.5px;
}
.st-answer {
gap: 7px;
}
.st-answer i {
font-size: 13px;
}
}
/* ========================================
EXTRA SMALL DEVICES
======================================== */
@media (max-width: 380px) {
.st-comparison-section {
padding: 40px 0;
}
.st-comparison-section .container {
padding-left: 12px;
padding-right: 12px;
}
.st-comparison-heading h2 {
font-size: 24px;
}
.st-comparison-heading p {
font-size: 13.5px;
}
.st-comparison-table td {
padding: 12px 13px;
}
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
.st-comparison-table tbody tr {
transition: none;
}
}