@import url(./reset.css);
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
scroll-behavior: unset;
}
body {
color: #000;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 162.5% */
}
/* Main Heading */
h1,
.heading {
color: #000;
font-family: "Poppins", sans-serif;
font-size: clamp(2.5rem, 1.389vw + 1.833rem, 3.5rem);
font-style: normal;
font-weight: 600;
line-height: clamp(3.438rem, 2.17vw + 2.396rem, 5rem); /* 142.857% */
}
h2 {
color: #0a0b0d;
font-family: "Poppins", sans-serif;
font-size: clamp(2rem, 0.694vw + 1.667rem, 2.5rem);
font-style: normal;
font-weight: 700;
line-height: clamp(2.5rem, 0.694vw + 2.167rem, 3rem); /* 120% */
text-transform: capitalize;
}
h2 span {
color: #fc9611;
}
h4 {
color: #0a0b0d;
font-family: "Poppins", sans-serif;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 40px; /* 125% */
}
h5 {
color: #0a0b0d;
font-family: "Poppins", sans-serif;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 133.333% */
}
h6 {
color: #fc9611;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 171.429% */
}
.subheading {
display: inline-flex;
border: 1.7px dashed #ffdca8;
padding: 5px 21px;
position: relative;
margin-bottom: 12px;
}
.subheading .sq {
width: 7px;
height: 7px;
background-color: #ffdca8;
position: absolute;
}
.subheading .sq.sq1 {
top: -4px;
left: -4px;
}
.subheading .sq.sq2 {
top: -4px;
right: -4px;
}
.subheading .sq.sq3 {
bottom: -4px;
left: -4px;
}
.subheading .sq.sq4 {
bottom: -4px;
right: -4px;
}
section {
overflow: hidden;
}
p {
color: #000;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 162.5% */
margin-bottom: 20px;
}
a {
transition: all 0.3s ease-in-out;
}
a:focus {
outline: none;
}
/* --- Global Input Reset and Default Styling --- */
input:not([type=radio]):not([type=checkbox]),
textarea,
select {
/* 1. Box Model & Sizing */
box-sizing: border-box; /* Crucial for predictable sizing (padding doesn't increase width/height) */
width: 100%; /* Default to full width of container */
padding: 0.75rem 1rem; /* Consistent internal padding */
margin: 0 0 1rem 0; /* Consistent bottom spacing */
/* 2. Visuals */
border: 1px solid var(--color-border-default, #ccc); /* Light gray border for clarity */
border-radius: 4px; /* Subtle rounding */
background-color: var(--color-input-bg, #fff); /* White background */
/* 3. Typography */
font-family: inherit; /* Inherit the body font (Crucial for consistency) */
font-size: 1rem; /* Consistent, readable size */
line-height: 1.5; /* Good line height for text entry */
color: var(--color-text-default, #333);
/* 4. Performance & Behavior */
-webkit-appearance: none; /* iOS/Safari reset (removes internal styles) */
-moz-appearance: none; /* Firefox reset */
appearance: none; /* Standard property reset (removes default browser widgets) */
}
select select {
background: var(--neutral-100, #f7f8fa) url('data:image/svg+xml;utf8,') no-repeat center right 26px;
background-size: 12px;
}
/* --- Focus and States (Accessibility/UX) --- */
/* 5. Focus State: Highlighting where the user is */
input:focus,
textarea:focus,
select:focus {
/* Use a clear, non-default outline for accessibility (WCAG AA) */
outline: 2px solid #fc9611; /* Our blue brand color */
outline-offset: 1px;
border-color: transparent; /* Remove the original border when focused */
}
/* 6. Placeholder Text Styling */
::-moz-placeholder {
color: var(--color-text-placeholder, #8f9398);
opacity: 0.7;
}
::placeholder {
color: var(--color-text-placeholder, #8f9398);
opacity: 0.7;
}
/* 7. Disabled State */
input:disabled,
textarea:disabled,
select:disabled {
cursor: not-allowed;
background-color: var(--color-input-disabled, #eee);
color: var(--color-text-disabled, #8f9398);
box-shadow: none;
}
.btn {
display: inline-flex;
align-items: center;
gap: 17px;
border-radius: 100px;
padding: 15px 32px;
background-color: #fc9611;
color: #000;
text-align: center;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 125% */
}
.btn:focus {
outline: none;
}
.btn.has-icon {
padding: 7px 8px 7px 32px;
}
.btn.btn-black {
background: #0a0b0d;
color: #fff;
}
.btn.btn-black:hover {
background: #0a0b0d;
color: #fff;
}
.btn.btn-white {
background: white;
color: #0a0b0d;
}
.btn.btn-white:hover {
background: white;
color: #0a0b0d;
}
.btn.inverse {
background: white;
}
.btn.inverse span {
background-color: #fc9611;
}
.btn.inverse:hover span {
background-color: #fff;
}
.btn span {
display: flex;
padding: 8px;
align-items: center;
gap: 10px;
overflow: hidden;
border-radius: 100px;
background: #fff;
}
.btn span img {
width: 20px;
height: 20px;
aspect-ratio: 1/1;
}
.btn:hover {
background-color: #fc9611;
color: #000;
}
.btn:hover span img {
animation: arrow-out-in 1.5s ease-in-out forwards;
}
/* Button Container */
.button-container {
display: flex;
gap: 20px;
margin-bottom: 40px;
}
@keyframes arrow-out-in {
0% {
transform: translateX(0);
opacity: 1;
}
10% {
transform: translateX(-12px);
}
20% {
transform: translateX(-12px);
}
40% {
transform: translateX(200%);
opacity: 1;
}
45% {
transform: translateX(200%);
opacity: 0;
}
60% {
transform: translateX(-250%);
opacity: 0;
}
85% {
transform: translateX(0px);
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
header {
position: fixed;
top: 16px;
left: 0;
right: 0;
z-index: 99;
}
header .container {
max-width: 1394px;
}
header .header-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: clamp(0.625rem, 0.521vw + 0.375rem, 1rem) clamp(1.125rem, 1.91vw + 0.208rem, 2.5rem);
border-radius: 1000px;
background: transparent;
position: relative;
background-color: #fff;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 58px 16px 0 rgba(224, 220, 220, 0), 0 37px 15px 0 rgba(224, 220, 220, 0.01), 0 21px 13px 0 rgba(224, 220, 220, 0.05), 0 9px 9px 0 rgba(224, 220, 220, 0.09), 0 2px 5px 0 rgba(224, 220, 220, 0.1);
}
header .header-row .logo {
max-width: clamp(8.75rem, 5.208vw + 6.25rem, 12.5rem);
width: 100%;
}
header .header-row .logo img {
width: 100%;
}
header .header-row .menu-toggle {
background: none;
border: none;
cursor: pointer;
width: 24px;
height: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1200;
display: none;
}
header .header-row .menu-toggle span {
display: block;
height: 2px;
width: 100%;
background: #000;
border-radius: 2px;
transition: all 0.3s ease;
}
header .header-row .menu-toggle span:nth-child(3) {
width: 16px;
}
header .header-row .nav .menu {
list-style: none;
display: flex;
align-items: center;
gap: clamp(0.938rem, 1.042vw + 0.438rem, 1.688rem);
}
header .header-row .nav .menu li {
position: relative;
}
header .header-row .nav .menu li a {
position: relative;
color: #0a0b0d;
font-family: "DM Sans", sans-serif;
font-size: clamp(0.875rem, 0.174vw + 0.792rem, 1rem);
font-style: normal;
font-weight: 500;
line-height: normal;
}
header .header-row .nav .menu li:hover > a, header .header-row .nav .menu li.active > a {
color: #fc9611;
}
header .header-row .nav .menu li.has-submenu a {
padding-right: 16px;
}
header .header-row .nav .menu li.has-submenu > a::after {
content: "";
background: url(../images/nav-down.png) no-repeat 0 0;
width: 11px;
height: 11px;
position: absolute;
right: 0;
top: 6px;
}
header .header-row .nav .menu li.has-submenu .submenu {
position: absolute;
top: 100%;
left: 0;
background: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 1rem 0;
border-radius: 8px;
display: none;
opacity: 0;
transform-origin: top center;
}
header .header-row .nav .menu li.has-submenu .submenu li {
padding: 0.5rem 1.5rem;
white-space: nowrap;
}
header .header-row .nav .menu li.has-submenu .submenu li a {
display: block;
padding: 0.6rem 1rem;
}
header .header-row .nav .menu li.has-submenu:hover .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
header .header-row .nav .menu li.has-megamenu {
position: static !important;
}
header .header-row .nav .menu li.has-megamenu a {
padding-right: 16px;
}
header .header-row .nav .menu li.has-megamenu .mobile-arrow::before {
content: "";
background: url(../images/nav-down.png) no-repeat 0 0;
width: 11px;
height: 11px;
position: absolute;
right: 0;
top: 6px;
}
header .header-row .nav .menu li.has-megamenu .megamenu {
position: absolute;
top: 100%;
width: calc(100% - 30px);
background: #fff;
border-radius: 16px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 58px 16px 0 rgba(224, 220, 220, 0), 0 37px 15px 0 rgba(224, 220, 220, 0.01), 0 21px 13px 0 rgba(224, 220, 220, 0.05), 0 9px 9px 0 rgba(224, 220, 220, 0.09), 0 2px 5px 0 rgba(224, 220, 220, 0.1);
display: none;
opacity: 0;
transform-origin: top center;
overflow: hidden;
z-index: 50;
display: flex;
justify-content: space-between;
gap: 0px;
margin: 0 auto;
left: 0;
right: 0;
max-width: 1426px;
padding: 1.875rem;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-head-panel {
padding: 0.375rem 0.625rem;
border-bottom: 1px solid var(--neutral-200, #e9ebee);
margin: 0 0 1.375rem;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-head-panel h5 {
color: var(--neutral-300, #6c7278);
font-family: "DM Sans";
font-size: 0.75rem;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-content-gp {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 30px;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-content-gp .mega-dts h4 {
color: #000;
font-family: "DM Sans";
font-size: 1.25rem;
font-style: normal;
font-weight: 600;
line-height: normal;
margin: 0 0 0.5rem;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-content-gp .mega-dts h6 {
color: #000;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left {
padding: 0;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul {
list-style: none;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul li {
margin-bottom: 16px;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul li a {
font-size: 16px;
color: #111;
font-weight: 500;
transition: all 0.3s ease;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul li a:hover {
color: #fc9611;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul.circle-icon-arrow {
display: flex;
flex-direction: column;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul.circle-icon-arrow li {
display: flex;
align-items: center;
padding: 0;
margin: 0;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul.circle-icon-arrow li + li {
border-top: 1px solid #e9ebee;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul.circle-icon-arrow li a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.75rem 1.5rem 0.75rem 0.75rem;
transition: all 0.3s ease-in-out;
border-radius: 16px;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul.circle-icon-arrow li a h6 {
display: flex;
align-items: center;
gap: 1rem;
margin: 0;
padding: 0;
color: #000;
font-family: "DM Sans";
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul.circle-icon-arrow li a h6 span.c-icon {
display: flex;
width: 2.5rem;
height: 2.5rem;
padding: 8px;
justify-content: center;
align-items: center;
aspect-ratio: 1/1;
border-radius: 1000px;
background: #fff2e3;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul.circle-icon-arrow li a span.arrow-circle-icon {
display: flex;
width: 2rem;
height: 2rem;
padding: 0.5rem;
align-items: center;
gap: 10px;
flex-shrink: 0;
aspect-ratio: 1/1;
border-radius: 6.25rem;
background: #fff1dc;
transition: all 0.3s ease-in-out;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul.circle-icon-arrow li a:hover {
padding-left: 1.5rem;
background: #fff2e3;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-left ul.circle-icon-arrow li a:hover span.arrow-circle-icon {
background: #fff;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-right .mega-f-bg {
border-radius: 1.5rem;
background: var(--neutral-100, #f7f8fa);
padding: 1.5rem;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-right .mega-f-bg .mega-feature img {
width: 100%;
border-radius: 10px;
margin-bottom: 12px;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-right .mega-f-bg .mega-feature .mega-text h6 {
color: #000;
font-family: "DM Sans";
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: normal;
margin: 0 0 0.5rem;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-right .mega-f-bg .mega-feature .mega-text p {
color: #000;
font-family: "DM Sans";
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 2.25rem;
}
header .header-row .nav .menu li.has-megamenu .megamenu .mega-right .mega-f-bg .mega-feature .mega-text .readmore {
font-size: 14px;
color: #fc9611;
text-decoration: underline;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu {
flex-direction: column;
padding: 0;
margin: 0 auto;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content {
display: flex;
justify-content: space-between;
gap: 0px;
margin-bottom: 0;
align-items: stretch;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column {
flex: 1 0 0;
padding: 2.5rem 0 2.5rem 2.5rem;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column.w490 {
flex: 0 0 36.6%;
background: var(--neutral-100, #f7f8fa);
padding: 2.5rem;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column .mega-other-bx {
height: calc(100% - 52px);
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column ul.mega-orange-icon-txt {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 0.5rem;
padding-right: 1.625rem;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column ul.mega-orange-icon-txt li a {
display: grid;
grid-template-columns: 1rem 1fr;
align-items: center;
padding: 0.5rem 1rem;
gap: 0.5rem;
border-radius: 0.5rem;
border: 1px solid #fff;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column ul.mega-orange-icon-txt li a:hover {
border-radius: 0.5rem;
border: 1px solid var(--neutral-200, #e9ebee);
background: var(--neutral-100, #f7f8fa);
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column ul.mega-orange-icon-txt li a span.normal-icon {
width: 1rem;
height: 1rem;
flex-shrink: 0;
aspect-ratio: 1/1;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column ul.mega-orange-icon-txt li a .mega-rig-grp h6 {
color: #000;
font-family: "DM Sans";
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column .mega-group {
margin-bottom: 0;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column .mega-group h6 {
font-size: 15px;
font-weight: 700;
color: #111;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column .mega-group h6 img {
width: 18px;
height: 18px;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column .mega-group ul.mega-icon-links-txt {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
padding-right: 1.25rem;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column .mega-group ul.mega-icon-links-txt li a {
padding-right: 0;
display: grid;
grid-template-columns: 1rem 1fr;
gap: 1rem;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column .mega-group ul.mega-icon-links-txt li a span.normal-icon {
margin-top: 0.125rem;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column .mega-group ul.mega-icon-links-txt li a .mega-rig-grp h6 {
color: #000;
font-family: "DM Sans";
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: none;
}
header .header-row .nav .menu li.has-megamenu .megamenu.services-megamenu .mega-content .mega-column .mega-group ul.mega-icon-links-txt li a .mega-rig-grp p {
color: var(--neutral-300, #6c7278);
font-family: "DM Sans";
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1rem; /* 133.333% */
}
header .header-row .nav .menu li.has-megamenu .megamenu .has-megamenu:hover .services-megamenu {
display: flex;
}
header .header-row .nav .menu li.has-megamenu:hover .megamenu {
display: block;
}
@media (max-width: 991px) {
header .header-row .nav .menu {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: 75%;
max-width: 320px;
padding: 2rem;
gap: 1.2rem;
box-shadow: -4px 0 10px rgba(0, 0, 0, 0.6);
}
header .header-row .nav .menu.open {
right: 0;
}
header .header-row .nav .menu .mobile-submenu.open {
display: block;
}
header .header-row .nav .menu li {
width: 100%;
}
header .header-row .nav .menu li > a {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 1.1rem;
}
header .header-row .nav .menu li.has-submenu .submenu {
position: static;
background: none;
box-shadow: none;
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
}
header .header-row .nav .menu li.has-submenu .submenu li a {
padding-left: 1rem;
font-size: 0.95rem;
}
header .header-row .nav .menu li.has-submenu.open .submenu {
max-height: 300px;
opacity: 1;
visibility: visible;
}
}
@media (min-width: 768px) {
header .header-row .nav .menu .submenu {
display: none;
}
header .header-row .nav .menu li.has-submenu:hover .submenu {
display: block;
}
}
@media (min-width: 768px) {
header .header-row .nav .menu-toggle {
display: none;
}
}
.banner {
margin-top: clamp(5.625rem, 2.257vw + 4.542rem, 7.25rem);
height: clamp(30rem, 14.583vw + 23rem, 40.5rem);
position: relative;
}
.banner:before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 150px;
z-index: 1;
background: #fff;
background: linear-gradient(180deg, rgb(255, 255, 255) 5%, rgba(255, 153, 2, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="$whiteFFF", endColorstr="#FF9902", GradientType=0);
}
.banner:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 150px;
background: #fff;
z-index: 1;
background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 153, 2, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="$whiteFFF", endColorstr="#FF9902", GradientType=0);
}
.banner .bannerimg {
position: absolute; /* Container for absolute images */
width: 100%;
height: 100%; /* Inherits 100vh from .banner */
z-index: -1;
/* Base style for both images */
}
.banner .bannerimg img {
position: absolute;
inset: 0; /* Equivalent to top: 0; right: 0; bottom: 0; left: 0; */
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
/* Stacking Order */
/* Top layer (Grid) to be masked */
}
.banner .bannerimg img.init-one {
z-index: 1; /* Bottom layer (Icons) */
}
.banner .bannerimg img.init-zero {
z-index: 2; /* Top layer (Grid) */
/* 2. CSS Styles: Initial Masking Setup */
/* Define initial mask position (outside the viewport) and size */
--mask-x: -50px;
--mask-y: -50px;
--mask-size: 100px; /* 50px diameter (25px radius) */
/* Apply the radial gradient mask. The position is dynamically set by the JS via custom properties. */
/* -webkit- prefix for cross-browser compatibility */
-webkit-mask-image: radial-gradient(circle var(--mask-size) at var(--mask-x) var(--mask-y), black 0%, transparent 100%);
mask-image: radial-gradient(circle var(--mask-size) at var(--mask-x) var(--mask-y), black 0%, transparent 100%);
/* 2. CSS Styles: Transition for smoothness (optional but nice) */
/* This applies a slight transition for the mask position to feel smoother than instant movement.
We only transition the mask-position property (via the custom properties) to limit the performance impact. */
transition: -webkit-mask-position 0.05s ease-out, mask-position 0.05s ease-out;
}
.banner .container {
height: 100%;
}
.banner .banner-row {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.banner .banner-row .banner-left {
max-width: 798px;
width: 100%;
position: relative;
animation: slideIn 0.8s ease-out;
z-index: 2;
cursor: auto;
/* Verification Badge */
/* First Selection Box Container - Digital Experiences */
/* First Custom Cursor */
/* First Selection Box with Marching Ants */
/* Second Selection Area - Growth and And */
/* Second Custom Cursor - Green */
/* Third Selection Area - New Complex Path */
/* Third Custom Cursor - Blue */
/* Text highlights for second animation */
/* Description */
/* Tags Container */
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.banner .banner-row .banner-left .verification {
display: inline-flex;
padding: 4px 16px 4px 4px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 100px;
background: #fff;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12);
border-radius: 20px;
margin-bottom: 24px;
animation: fadeIn 1s ease-out 0.2s both;
position: relative;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.banner .banner-row .banner-left .verification-icon {
display: flex;
padding: 6px 12px;
align-items: center;
gap: 8px;
border-radius: 100px;
background: #fc9611;
color: #fff;
font-family: "DM Sans", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 14px; /* 100% */
}
.banner .banner-row .banner-left .verification-icon img {
width: 16px;
}
.banner .banner-row .banner-left .verification-text {
color: #0a0b0d;
font-family: "DM Sans", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 114.286% */
}
.banner .banner-row .banner-left .highlight-wrapper {
position: relative;
display: inline-block;
}
.banner .banner-row .banner-left .highlight-text {
position: relative;
z-index: 0;
transition: color 0.3s ease;
color: #fc9611;
}
.banner .banner-row .banner-left .selection-container-1 {
position: absolute;
top: 3px;
left: -2px;
width: calc(100% + 5px);
height: calc(100% + 0px);
pointer-events: none;
z-index: 1;
}
.banner .banner-row .banner-left .custom-cursor-1 {
position: absolute;
width: 103px;
height: 48px;
background: url(../images/cursor-img.png) no-repeat center center;
z-index: 99;
animation: dragCursor1 6s ease-in-out infinite;
}
@keyframes dragCursor1 {
0% {
top: 0;
left: 0;
transform: scale(0.95);
}
50% {
top: 100%;
left: 100%;
transform: scale(0.95);
}
51% {
top: 100%;
left: 100%;
transform: scale(1);
}
100% {
top: 0;
left: 0;
transform: scale(1);
}
}
.banner .banner-row .banner-left .selection-box-1 {
position: absolute;
border: 2.5px dashed #fc9611;
animation: growSelection1 6s ease-in-out infinite;
position: relative;
}
.banner .banner-row .banner-left .selection-box-1 .sq {
content: "";
width: 11px;
height: 11px;
background-color: #fc9611;
position: absolute;
}
.banner .banner-row .banner-left .selection-box-1 .sq.sq1 {
top: -5px;
left: -5px;
}
.banner .banner-row .banner-left .selection-box-1 .sq.sq2 {
top: -5px;
right: -5px;
}
.banner .banner-row .banner-left .selection-box-1 .sq.sq3 {
bottom: -5px;
left: -5px;
}
.banner .banner-row .banner-left .selection-box-1 .sq.sq4 {
bottom: -5px;
right: -5px;
}
@keyframes growSelection1 {
0% {
top: 0;
left: 0;
width: 0;
height: 0;
opacity: 0;
}
10% {
opacity: 1;
}
50% {
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
}
90% {
opacity: 1;
}
100% {
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}
.banner .banner-row .banner-left .selection-box-1::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation: marchingAnts 1s linear infinite;
}
@keyframes marchingAnts {
0% {
background-position: 0 0;
}
100% {
background-position: 20px 20px;
}
}
.banner .banner-row .banner-left .selection-area-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.banner .banner-row .banner-left .custom-cursor-2 {
position: absolute;
width: 99px;
height: 48px;
background: url(../images/cloud-pointer.png) no-repeat center center;
background-size: 100% 100%;
z-index: 10;
animation: stopAtPoints 10s ease-in-out infinite;
}
@keyframes stopAtPoints {
0% {
top: 212px;
left: 396px;
transform: scale(1);
}
20% {
top: 274px;
left: 675px;
}
22% {
top: 274px;
left: 675px;
}
30% {
top: 212px;
left: 675px;
transform: scale(1);
}
32% {
top: 212px;
left: 675px;
transform: scale(1);
}
50% {
top: 212px;
left: 396px;
}
52% {
top: 212px;
left: 396px;
}
70% {
top: 274px;
left: 675px;
transform: scale(1);
}
72% {
top: 274px;
left: 675px;
transform: scale(1);
}
90% {
top: 212px;
left: 675px;
}
92% {
top: 212px;
left: 675px;
}
100% {
top: 212px;
left: 396px;
transform: scale(1);
}
}
.banner .banner-row .banner-left .selection-area-3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.banner .banner-row .banner-left .custom-cursor-3 {
position: absolute;
width: 89px;
height: 48px;
background: url(../images/web-pointer.png) no-repeat center center;
background-size: 100% 100%;
z-index: 10;
animation: complexPath 20s ease-in-out infinite;
}
@keyframes complexPath {
0% {
top: 430px;
left: 163px;
transform: scale(1);
}
10% {
top: 430px;
left: 363px;
}
11% {
top: 430px;
left: 363px;
}
20% {
top: 330px;
left: 180px;
transform: scale(1);
}
34% {
top: 330px;
left: 565px;
}
35% {
top: 330px;
left: 565px;
}
44% {
top: 210px;
left: 245px;
transform: scale(1);
}
60% {
top: 210px;
left: 675px;
}
61% {
top: 210px;
left: 675px;
}
75% {
top: 140px;
left: 245px;
transform: scale(1);
}
90% {
top: 140px;
left: 785px;
}
91% {
top: 140px;
left: 785px;
}
100% {
top: 430px;
left: 163px;
transform: scale(1);
}
}
.banner .banner-row .banner-left .text-highlight-1 {
position: relative;
display: inline;
transition: color 0.3s ease;
}
.banner .banner-row .banner-left .text-highlight-2 {
position: relative;
display: inline;
transition: color 0.3s ease;
}
.banner .banner-row .banner-left .description {
color: #000;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
margin-bottom: 40px;
animation: fadeIn 1s ease-out 0.4s both;
}
.banner .banner-row .banner-left .tags-container {
display: flex;
gap: 20px;
align-items: center;
animation: fadeIn 1s ease-out 0.8s both;
}
.banner .banner-row .banner-right {
max-width: clamp(18.125rem, 5.99vw + 15.25rem, 22.438rem);
width: 100%;
position: relative;
z-index: 2;
/* SCSS for Trust and Rating Widget */
}
.banner .banner-row .banner-right .logoarea {
max-width: clamp(14.875rem, 3.472vw + 13.208rem, 17.375rem);
width: 100%;
margin: 0 auto 61px;
}
.banner .banner-row .banner-right .logoarea ul {
display: flex;
align-items: flex-start;
align-content: flex-start;
gap: clamp(2rem, 2.604vw + 0.75rem, 3.875rem);
flex-wrap: wrap;
}
.banner .banner-row .banner-right .logoarea ul li {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 16px;
}
.banner .banner-row .banner-right .logoarea ul li .bn-logo {
max-width: 47px;
}
.banner .banner-row .banner-right .logoarea ul li .bn-logo img {
width: 100%;
}
.banner .banner-row .banner-right .logoarea ul li .bn-text {
display: flex;
flex-direction: column;
justify-content: space-between;
/* height: 100%; */
gap: 8px;
align-items: center;
}
.banner .banner-row .banner-right .logoarea ul li .bn-text span {
color: #000;
font-family: "DM Sans", sans-serif;
font-size: 24.774px;
font-style: normal;
font-weight: 600;
line-height: normal;
min-width: 40px;
}
.banner .banner-row .banner-right .logoarea ul li .bn-text img {
max-width: 29px;
}
.banner .banner-row .banner-right .trust-widget {
/* Layout for the overall component */
display: flex;
flex-direction: column;
align-items: center; /* Center the entire widget horizontally */
/* Trust Text */
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner {
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
/* Rating Block and Stars */
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner .avatar-stack {
display: flex;
/* Position relative to allow z-index control and negative margins */
position: relative;
margin-bottom: 0; /* Space between avatars and text */
/* Fix the margin on the first avatar */
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner .avatar-stack .avatar {
width: clamp(2.875rem, 0.868vw + 2.458rem, 3.5rem);
height: clamp(2.875rem, 0.868vw + 2.458rem, 3.5rem);
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
border: 2px solid white; /* The white ring around each avatar */
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
/* Overlapping effect */
margin-left: -15px;
/* Stacking order */
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner .avatar-stack .avatar:nth-child(4) {
z-index: 4;
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner .avatar-stack .avatar:nth-child(3) {
z-index: 3;
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner .avatar-stack .avatar:nth-child(2) {
z-index: 2;
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner .avatar-stack .avatar:nth-child(1) {
z-index: 1;
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner .avatar-stack .avatar:hover {
animation: bounce 2s ease infinite;
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner .avatar-stack .avatar:first-child {
margin-left: 0;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-15px);
}
60% {
transform: translateY(-15px);
}
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner .rating-block {
display: flex;
align-items: center;
background-color: #fff;
padding: 16px 10px;
border-radius: 1000px;
border: 1px solid #e9ebee;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
gap: 8px;
position: relative;
z-index: 4;
max-width: clamp(10.263rem, 3.212vw + 7.521rem, 11.375rem);
width: 100%;
justify-content: center;
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner .rating-block .stars {
display: flex;
gap: 8px;
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner .rating-block .stars .star img {
width: clamp(0.75rem, 0.347vw + 0.583rem, 1rem);
height: clamp(0.75rem, 0.347vw + 0.583rem, 1rem);
}
.banner .banner-row .banner-right .trust-widget .trust-widget-inner .rating-block .score {
color: #000;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.banner .banner-row .banner-right .trust-widget .trust-text {
color: #000;
text-align: center;
font-family: "DM Sans", sans-serif;
font-size: clamp(1rem, 0.26vw + 0.875rem, 1.188rem);
font-style: normal;
font-weight: 600;
line-height: 19px; /* 100% */
}
.banner .button-container {
animation: fadeIn 1s ease-out 0.6s both;
}
.banner.innerbanner .banner-row .banner-left {
max-width: 642px;
}
.banner.innerbanner .banner-row .banner-left .description {
line-height: 26px; /* 162.5% */
}
.banner.innerbanner .banner-row .banner-right {
max-width: 642px;
width: 100%;
position: relative;
z-index: 2;
}
.banner.innerbanner h1 {
line-height: 64px;
margin-bottom: 16px;
}
.logo-slider {
margin-top: 40px;
}
.logo-slider .splide__slide__container {
text-align: center;
position: relative;
}
.logo-slider .splide__slide__container::before {
content: "";
width: 2px;
height: 16px;
background: #e9ebee;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.logo-slider .splide__slide__container img {
height: 32px;
-o-object-fit: contain;
object-fit: contain;
margin: 0 auto;
}
.logo-slider.haspadding {
padding: 80px 0;
background-color: #f3f3f3;
text-align: center;
}
.logo-slider.haspadding h2 {
margin-bottom: 8px;
}
.logo-slider.haspadding .mxw810 {
max-width: 810px;
margin: 0 auto 40px;
}
.ideas {
padding: clamp(3.75rem, 4.774vw + 1.458rem, 7.188rem) 0;
text-align: center;
}
.ideas .subheading {
margin: 0 auto 20px;
}
.ideas h2 {
margin-bottom: 24px;
}
.ideas .mxw-853 {
max-width: 853px;
margin: 0 auto;
}
.ideas p {
font-size: clamp(1rem, 1.389vw + 0.333rem, 2rem);
font-style: normal;
font-weight: 400;
line-height: clamp(1.75rem, 1.389vw + 1.083rem, 2.75rem); /* 137.5% */
margin-bottom: 40px;
}
.ideas .stats {
margin-top: 112px;
border-radius: 39.812px;
border: 0.995px dashed #fc9611;
max-width: 1200px;
margin: 112px auto 0;
}
.ideas .stats ul {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
padding-bottom: 38px;
margin-top: -38px;
margin-left: calc(-1 * clamp(1.25rem, 3.646vw - 0.5rem, 3.875rem));
margin-right: calc(-1 * clamp(1.25rem, 3.646vw - 0.5rem, 3.875rem));
}
.ideas .stats ul li {
position: relative;
}
.ideas .stats ul li:before {
content: "";
position: absolute;
inset: 0;
background-color: white;
z-index: 0;
top: 40px;
filter: blur(15px);
bottom: -20px;
}
.ideas .stats ul li .icon {
position: relative;
z-index: 0;
display: flex;
width: 71px;
height: 71px;
padding: 16px;
align-items: center;
gap: 10px;
flex-shrink: 0;
border-radius: 35.5px;
background: #fc9611;
margin: 0 auto 6px;
}
.ideas .stats ul li .icon img {
max-width: 39px;
}
.ideas .stats ul li .text {
position: relative;
z-index: 0;
display: flex;
padding: 16px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
}
.ideas .stats ul li .text h6 {
color: #000;
font-family: "Poppins", sans-serif;
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: 40px; /* 100% */
}
.ideas .stats ul li .text span {
color: #6c7278;
font-family: "DM Sans", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
}
.serv-left h4 {
color: #848484;
text-align: center;
font-family: Poppins;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 20px;
display: flex;
padding: 7px 14px;
justify-content: flex-start;
align-items: center;
margin-bottom: 50px;
}
.serv-left ul {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 48px;
counter-reset: section;
-ms-overflow-style: none;
scrollbar-width: none;
}
.serv-left ul li {
color: #d4d4d4;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 177.778% */
position: relative;
transition: all 0.3s ease-out;
}
.serv-left ul li.active {
color: #fff;
font-weight: 700;
}
.serv-left ul li::before {
counter-increment: section;
content: counter(section) ". ";
}
.serv-left::-webkit-scrollbar {
display: none;
}
.our-services {
padding-bottom: 120px;
background-color: #000;
height: 100vh;
overflow: hidden;
}
.our-services .servlogoarea {
width: 120px;
height: 120px;
border-radius: 0 0 150px 150px;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
position: relative;
margin: 0 auto 37px;
}
.our-services .servlogoarea:before, .our-services .servlogoarea:after {
content: "";
width: 40px;
height: 40px;
position: absolute;
top: 0;
}
.our-services .servlogoarea:before {
left: -40px;
background: url(../images/services-logo-edge.png) no-repeat 0 0;
background-size: 100% 100% !important;
}
.our-services .servlogoarea:after {
right: -40px;
background: url(../images/services-logo-edge.png) no-repeat 0 0;
background-size: 100% 100% !important;
transform: rotateY(180deg);
}
.our-services .servlogoarea img {
width: 40px;
}
.our-services .subheading {
margin-bottom: 15px;
}
.our-services h2 {
color: #fff;
margin-bottom: 32px;
}
.our-services .serv-scroll-slide {
position: relative;
height: 424px;
overflow: hidden;
}
.our-services .serv-scroll-slide .slide-inner {
position: absolute;
inset: 0;
background: #000;
transform: translateY(100%);
transition: transform 0.6s ease-out;
will-change: transform;
}
.our-services .serv-scroll-slide .slide-inner h4 {
color: #fff;
padding-bottom: 24px;
}
.our-services .serv-scroll-slide .slide-inner .slide-row {
border-top: 1px solid #6c7278;
display: flex;
align-items: flex-start;
justify-content: center;
margin-bottom: 24px;
}
.our-services .serv-scroll-slide .slide-inner .slide-row.two-slide .slidebx {
max-width: 50%;
}
.our-services .serv-scroll-slide .slide-inner .slide-row .slidebx {
padding: 24px;
border-right: 1px solid #6c7278;
max-width: 33.33%;
height: 100%;
}
.our-services .serv-scroll-slide .slide-inner .slide-row .slidebx:first-child {
padding-left: 0;
}
.our-services .serv-scroll-slide .slide-inner .slide-row .slidebx:last-child {
border: none;
}
.our-services .serv-scroll-slide .slide-inner .slide-row .slidebx .icon {
max-width: 48px;
width: 100%;
margin-bottom: 24px;
}
.our-services .serv-scroll-slide .slide-inner .slide-row .slidebx .icon img {
width: 100%;
}
.our-services .serv-scroll-slide .slide-inner .slide-row .slidebx h5 {
color: #fff;
margin-bottom: 8px;
}
.our-services .serv-scroll-slide .slide-inner .slide-row .slidebx p {
color: #fff;
margin-bottom: 0;
}
.our-services .serv-scroll-slide .slide-inner:nth-child(1) {
z-index: 1;
}
.our-services .serv-scroll-slide .slide-inner:nth-child(2) {
z-index: 2;
}
.our-services .serv-scroll-slide .slide-inner:nth-child(3) {
z-index: 3;
}
.our-services .serv-scroll-slide .slide-inner:nth-child(4) {
z-index: 4;
}
.our-services .serv-scroll-slide .slide-inner .button-container {
margin-bottom: 0;
}
.our-services.uiuxprocess {
padding: 94px 0 90px;
text-align: center;
}
.our-services.uiuxprocess .subheading {
margin: 0 auto 16px;
}
.our-services.uiuxprocess .subheading + h2 {
text-align: center;
}
.our-services.uiuxprocess .subheading + h2 + p {
color: #fff;
max-width: 876px;
margin: 0 auto;
}
.our-services.uiuxprocess .row {
text-align: left;
margin-top: 50px;
}
.our-services.uiuxprocess .row .serv-left ul {
gap: 37px;
}
.our-services.uiuxprocess .row .serv-left ul li {
font-size: 15px;
color: #fff;
padding: 7px 14px;
line-height: 22px;
}
.our-services.uiuxprocess .row .serv-left ul li.active {
border-radius: 60px;
background: #fc9611;
font-weight: 600;
}
.our-services.uiuxprocess .row .serv-scroll-slide {
height: 515px;
}
.our-services.uiuxprocess .row .serv-scroll-slide .slide-inner p {
color: #fff;
}
.our-services.uiuxprocess .row .serv-scroll-slide .slide-inner .slide-row {
align-items: stretch;
margin-top: 24px;
margin-bottom: 0;
}
.industry {
padding: clamp(3.75rem, 3.819vw + 1.917rem, 6.5rem) 0 clamp(3.75rem, 6.51vw + 0.625rem, 8.438rem);
position: relative;
text-align: center;
color: rgb(244, 244, 244);
/* Grid container using flexbox for better control */
/* Row container */
}
.industry:before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 150px;
z-index: 1;
background: #fff;
background: linear-gradient(180deg, rgb(244, 244, 244) 5%, rgba(255, 153, 2, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4f4f4", endColorstr="#FF9902", GradientType=0);
}
.industry:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 150px;
background: #fff;
z-index: 1;
background: linear-gradient(0deg, rgb(244, 244, 244) 0%, rgba(255, 153, 2, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4f4f4", endColorstr="#FF9902", GradientType=0);
}
.industry .subheading {
margin: 0 auto 24px;
}
.industry h2 {
max-width: 735px;
margin: 0 auto 24px;
}
.industry h2 + p {
max-width: 641px;
margin: 0 auto 50px;
}
.industry .grid-container {
display: flex;
flex-direction: column;
gap: 30px;
max-width: 965px;
width: 100%;
margin: 0 auto;
}
.industry .grid-container .button-container {
margin-top: 20px;
justify-content: center;
}
.industry .grid-row {
display: flex;
height: 218px;
gap: 30px;
}
.industry .box {
background-color: #fff;
border-radius: 8px;
position: relative;
overflow: hidden;
flex: 1;
transition: flex 0.8s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
cursor: pointer;
z-index: 1;
transform: translateZ(0);
}
.industry .box .box-inner {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
position: relative;
}
.industry .box .box-main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 12px;
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
z-index: 2;
position: relative;
background-color: transparent;
flex: 1 0 203px;
}
.industry .box .box-main .box-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #3498db;
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.industry .box .box-main .box-title {
margin-top: 5px;
color: #000;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 164.706% */
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.industry .box .box-content {
width: 0%;
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.industry .box .box-content .box-content-dt {
padding: 1.5rem;
background-color: transparent;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1;
text-align: left;
width: 15.875rem;
overflow-y: auto;
transform: translateX(100%);
opacity: 0;
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.industry .box .box-content .box-content-dt p {
color: #111;
font-family: "Poppins", sans-serif;
font-size: 15px;
line-height: 24px;
margin: 0;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.industry .box .fillblack {
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.industry .box .close-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: #7f8c8d;
transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
opacity: 0;
z-index: 20;
}
.industry .box:hover {
flex: 3.3;
z-index: 10;
background-color: #fc9611;
transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.industry .box:hover .fillblack {
fill: #111;
}
.industry .box:hover .box-main {
transform: translateX(0);
}
.industry .box:hover .box-content {
width: 100%;
border-left: 1px solid #e38204;
}
.industry .box:hover .box-content .box-content-dt {
transform: translateX(0);
opacity: 1;
}
.industry .box:hover .box-content .box-content-dt p {
color: #111;
}
.industry .box:hover .box-icon,
.industry .box:hover .box-title {
transform: translateX(0);
}
.industry .box:hover .close-btn {
opacity: 1;
}
.industry .box.active, .industry .box:active {
flex: 2.8;
z-index: 10;
background-color: #fc9611;
transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.industry .box.active .fillblack, .industry .box:active .fillblack {
fill: #111;
}
.industry .box.active .box-content, .industry .box:active .box-content {
width: 100%;
border-left: 1px solid #e38204;
}
.industry .box.active .box-content .box-content-dt, .industry .box:active .box-content .box-content-dt {
transform: translateX(0);
opacity: 1;
}
.industry .box.active .box-content .box-content-dt p, .industry .box:active .box-content .box-content-dt p {
color: #111;
}
.industry .box.active .close-btn, .industry .box:active .close-btn {
opacity: 1;
}
.case-studies {
padding: clamp(3.75rem, 2.083vw + 2.75rem, 5.25rem) 0 clamp(3.75rem, 6.337vw + 0.708rem, 8.313rem);
}
.case-studies .isotope-outer {
text-align: center;
margin-bottom: 66px;
}
.case-studies .subheading {
margin: 0 auto 16px;
}
.case-studies h2 {
margin-bottom: 5px;
text-align: center;
}
.case-studies h2 + p {
font-weight: 500;
text-align: center;
max-width: 793px;
margin: auto;
margin-bottom: 45px;
}
.case-studies .filter-buttons {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: clamp(1.875rem, 3.125vw + 0.375rem, 4.125rem);
flex-wrap: wrap;
}
.case-studies .filter-buttons .filter-btn {
display: flex;
padding: var(--Button-Radius, 12px) 24px;
align-items: flex-start;
gap: 10px;
border-radius: 30px;
border: 1px solid #e9ebee;
background: #fff;
transition: 0.3s ease;
color: #000;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.case-studies .filter-buttons .filter-btn.active, .case-studies .filter-buttons .filter-btn:hover {
background: #0a0b0d;
color: #fff;
}
.case-studies .grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.case-studies .grid .grid-item {
width: 191px;
overflow: hidden;
border-radius: 12px;
position: relative;
cursor: pointer;
border: 4px solid rgba(255, 182, 12, 0);
transition: border 0.4s ease, opacity 0.4s ease;
}
.case-studies .grid .grid-item:hover, .case-studies .grid .grid-item.active {
border: 4px solid #ffb60c;
}
.case-studies .grid .grid-item.active {
transform: scale(1.05);
opacity: 1;
}
.case-studies .grid .grid-item img {
width: 100%;
height: auto;
display: block;
border-radius: 10.248px;
transition: transform 0.4s ease;
}
.case-studies .grid .grid-item:hover img {
transform: scale(1.1);
}
.case-studies .isotope-bottom h5 {
font-weight: 400;
margin-bottom: 8px;
}
.case-studies .isotope-bottom h5 + p {
margin-bottom: 35px;
}
.case-studies .isotope-bottom .splide__track {
padding: 0 22px !important;
}
.case-studies .isotope-bottom .splide__list li {
width: 100%;
}
.case-studies .isotope-bottom .splide__list li .splide__slide__container {
width: 100%;
height: 430px;
}
.case-studies .isotope-bottom .splide__list li .splide__slide__container img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.case-studies .isotope-bottom .splide__arrows .splide__arrow {
display: flex;
width: 49px;
height: 49px;
justify-content: center;
align-items: center;
flex-shrink: 0;
background-color: #fc9611;
opacity: 1;
}
.case-studies .isotope-bottom .splide__arrows .splide__arrow svg {
fill: #fff;
}
.case-studies .isotope-bottom .splide__arrows .splide__arrow.splide__arrow--prev {
left: 0;
}
.case-studies .isotope-bottom .splide__arrows .splide__arrow.splide__arrow--next {
right: 0;
}
.case-studies .isotope-bottom .splide__arrows .splide__arrow:disabled {
display: none;
}
.case-studies .isotope-bottom .splide.is-focus-in .splide__arrow:focus {
outline: none;
}
.case-studies .isotope-bottom .case-study-text {
transition: none;
}
.case-studies .isotope-bottom .case-study-text span.badge {
display: inline-flex;
padding: 6px 10px;
border-radius: 60px;
background: #000;
color: #fff;
font-family: "DM Sans", sans-serif;
font-size: 12px;
font-weight: 500;
margin-bottom: 8px;
}
.case-studies .isotope-bottom .case-study-text .case-study-stats ul {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-bottom: 35px;
}
.case-studies .isotope-bottom .case-study-text .case-study-stats ul li {
width: calc(50% - 15px);
}
.case-studies .isotope-bottom .case-study-text .case-study-stats ul li h5 {
margin-bottom: 5px;
font-weight: 600;
}
.case-studies .isotope-bottom .case-study-text .case-study-stats ul li p {
margin-bottom: 0;
}
.case-studies .isotope-bottom .splide_custom_pagination {
margin-top: 63px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.case-studies .isotope-bottom .splide_custom_pagination .splide-custom-bullet {
border-radius: 20px;
transition: all 0.3s ease-in-out;
width: 15px;
height: 15px;
background-color: #b2b2b2;
}
.case-studies .isotope-bottom .splide_custom_pagination .splide-custom-bullet.active {
background-color: #fc9611;
}
.case-studies.removegrid {
padding-bottom: clamp(3.125rem, 4.774vw + 0.833rem, 6.563rem);
}
.case-studies.removegrid .grid {
opacity: 0;
position: absolute !important;
pointer-events: none;
z-index: -9;
}
.case-studies.removegrid .isotope-outer {
margin-bottom: 72px;
}
.case-studies.removegrid .filter-buttons {
margin-bottom: 0;
}
.case-studies.removegrid .case-study-text {
transform: unset !important;
}
.case-studies.removepills .filter-buttons {
opacity: 0;
position: absolute !important;
pointer-events: none;
z-index: -9;
}
.case-studies.removepills .case-study-text {
transform: unset !important;
}
.approach {
padding-bottom: clamp(3.75rem, 4.514vw + 1.583rem, 7rem);
}
.approach .subheading {
margin-bottom: 30px;
}
.approach h2 {
color: #fff;
line-height: clamp(3.438rem, 0.781vw + 3.063rem, 4rem); /* 114.286% */
margin-bottom: clamp(1.875rem, 2.604vw + 0.625rem, 3.75rem);
}
.approach .approach-video-container {
position: relative;
border-radius: 24px;
overflow: hidden;
padding: 64px 104px 66px 80px;
display: flex;
align-items: center;
justify-content: space-between;
}
.approach .approach-video-container:before {
content: "";
position: absolute;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.72) 100%);
inset: 0;
z-index: 1;
}
.approach .approach-video-container .approach-video {
position: absolute;
inset: 0;
}
.approach .approach-video-container .approach-video video {
width: 100%;
height: 100%;
-o-object-fit: cover !important;
object-fit: cover !important;
}
.approach .approach-video-container .approach-text {
position: relative;
z-index: 2;
max-width: 642px;
width: 100%;
padding: 30px 0 33px;
}
.approach .approach-video-container .approach-img {
max-width: 440px;
height: 440px;
width: 100%;
position: relative;
z-index: 2;
}
.approach .approach-video-container .approach-img .circle-1 {
width: 100%;
height: 100%;
border-radius: 440px;
border: 1px solid #fc9611;
background: rgba(252, 150, 17, 0.48);
z-index: 3;
position: relative;
animation: rotateOrbit 20s linear infinite;
transform-origin: center center;
}
.approach .approach-video-container .approach-img .circle-1 .icon {
display: flex;
width: 56px;
height: 56px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
aspect-ratio: 1/1;
position: absolute;
border-radius: 100px;
background: #fc9611;
animation: rotateReverse 20s linear infinite;
transform-origin: center center;
}
.approach .approach-video-container .approach-img .circle-1 .icon img {
width: 20px;
}
.approach .approach-video-container .approach-img .circle-1 .icon img.circle-cursor {
position: absolute;
transform-origin: top left;
animation: none;
}
.approach .approach-video-container .approach-img .circle-1 .icon.dev {
top: 60px;
left: 60px;
}
.approach .approach-video-container .approach-img .circle-1 .icon.dev img {
width: 13px;
}
.approach .approach-video-container .approach-img .circle-1 .icon.dev img.circle-cursor {
max-width: 151px;
width: 151px;
top: 60px;
left: -130px;
}
.approach .approach-video-container .approach-img .circle-1 .icon.design {
top: 60px;
right: 60px;
}
.approach .approach-video-container .approach-img .circle-1 .icon.design img {
width: 18px;
}
.approach .approach-video-container .approach-img .circle-1 .icon.design img.circle-cursor {
max-width: 99px;
width: 99px;
top: 60px;
right: -80px;
}
.approach .approach-video-container .approach-img .circle-1 .icon.engine {
bottom: 18px;
left: 120px;
}
.approach .approach-video-container .approach-img .circle-1 .icon.engine img {
width: 20px;
}
.approach .approach-video-container .approach-img .circle-1 .icon.engine img.circle-cursor {
max-width: 123px;
width: 123px;
top: 30px;
left: 65px;
}
.approach .approach-video-container .approach-img .circle-2 {
width: 306px;
height: 306px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 306px;
border: 1px solid #fc9611;
background: rgba(252, 150, 17, 0.24);
z-index: 1;
}
.approach .approach-video-container .approach-img .fmlogocontiner {
position: absolute;
width: 82px;
height: 82px;
background-color: #fc9611;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
border-radius: 24px;
overflow: hidden;
}
@keyframes rotateOrbit {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotateReverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.tech-stack {
padding-bottom: clamp(3.75rem, 1.736vw + 2.917rem, 5rem);
}
.tech-stack .subheading {
margin-bottom: 24px;
}
.tech-stack h2 {
margin-bottom: clamp(2.5rem, 4.34vw + 0.417rem, 5.625rem);
}
.tech-stack .animated-tabs .tab-dropdown {
display: none;
}
.tech-stack .animated-tabs .has-border {
position: relative;
}
.tech-stack .animated-tabs .has-border:before {
content: "";
top: 0;
bottom: 0;
right: 0;
width: 1px;
background: #dfdfdf;
position: absolute;
}
.tech-stack .animated-tabs .tab-buttons {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 20px;
position: relative;
}
.tech-stack .animated-tabs .tab-buttons button {
display: inline-flex;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 100px;
border: 1px solid #e9ebee;
color: #0a0b0d;
text-align: center;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 16px;
transition: all 0.3s ease-in-out;
}
.tech-stack .animated-tabs .tab-buttons button.active, .tech-stack .animated-tabs .tab-buttons button:hover {
border-color: #0a0b0d;
background: #0a0b0d;
box-shadow: 5px 9px 9px rgba(0, 0, 0, 0.25);
color: #fff;
}
.tech-stack .animated-tabs .tab-content-wrapper {
position: relative;
padding-left: 34px;
min-height: 400px;
}
.tech-stack .animated-tabs .tab-content-wrapper .tab-pane {
position: absolute;
top: 0;
left: 34px;
width: 100%;
opacity: 0;
visibility: hidden;
}
.tech-stack .animated-tabs .tab-content-wrapper .tab-pane.active {
position: relative;
opacity: 1;
visibility: visible;
}
.tech-stack .animated-tabs .tab-content-wrapper .tab-pane .tech-grid {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.tech-stack .animated-tabs .tab-content-wrapper .tab-pane .tech-grid .tech-box {
display: flex;
width: 218px;
height: 218px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
border-radius: 16px;
border: 1px solid #e9ebee;
}
.tech-stack .animated-tabs .tab-content-wrapper .tab-pane .tech-grid .tech-box img {
max-width: 64px;
width: 100%;
margin: 0 auto;
}
.tech-stack .animated-tabs .tab-content-wrapper .tab-pane .tech-grid .tech-box h6 {
color: #000;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 24px;
margin-bottom: 0;
}
.tech-stack .animated-tabs .tab-content-wrapper .tab-pane .tech-grid .no-content {
background-color: rgba(252, 17, 17, 0.2);
width: 100%;
text-align: center;
padding: 20px;
border-radius: 24px;
}
.tech-stack .animated-tabs .tab-content-wrapper .tab-pane .tech-grid .no-content p {
margin-bottom: 0;
color: rgba(190, 13, 13, 0.86);
font-weight: 600;
}
@media (max-width: 767px) {
.tech-stack .animated-tabs .has-border:before {
display: none;
}
.tech-stack .animated-tabs .tab-buttons {
display: none;
}
.tech-stack .animated-tabs .tab-dropdown {
display: block;
position: relative;
margin-bottom: 24px;
}
.tech-stack .animated-tabs .tab-dropdown .tab-dropdown-selected {
padding: 16px 32px;
border-radius: 100px;
background: var(--base-white, #fff);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
cursor: pointer;
text-align: left;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: 11px;
background-position: right 20px center;
color: #0a0b0d;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 125% */
}
.tech-stack .animated-tabs .tab-dropdown .tab-dropdown-list {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
z-index: 10;
}
.tech-stack .animated-tabs .tab-dropdown .tab-dropdown-list.open {
display: block;
}
.tech-stack .animated-tabs .tab-dropdown .tab-dropdown-list li {
padding: 12px 16px;
font-size: 15px;
font-family: "DM Sans", sans-serif;
cursor: pointer;
transition: background 0.2s ease;
}
.tech-stack .animated-tabs .tab-dropdown .tab-dropdown-list li:hover, .tech-stack .animated-tabs .tab-dropdown .tab-dropdown-list li.active {
background: #f5f5f5;
}
.tech-stack .animated-tabs .tab-content-wrapper {
padding-left: 0;
min-height: auto;
}
.tech-stack .animated-tabs .tab-content-wrapper .tab-pane {
left: 0;
}
.tech-stack .animated-tabs .tab-content-wrapper .tech-grid {
justify-content: center;
}
.tech-stack .animated-tabs .tab-content-wrapper .tech-grid .tech-box {
width: 48%;
height: auto;
aspect-ratio: 1/1;
}
}
.client-say {
overflow: hidden;
padding: 52px 0 clamp(3.75rem, 2.951vw + 2.333rem, 5.875rem);
}
.client-say.mt-custom {
padding-top: 89px;
}
.client-say:before {
background: linear-gradient(180deg, rgb(255, 255, 255) 5%, rgba(255, 153, 2, 0) 100%);
}
.client-say:after {
background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 153, 2, 0) 100%);
}
.client-say .container {
position: relative;
z-index: 2;
}
.client-say .subheading {
position: relative;
z-index: 1;
margin-bottom: 8px;
}
.client-say h2 {
margin-bottom: clamp(1.875rem, 4.34vw - 0.208rem, 5rem);
position: relative;
z-index: 1;
}
.client-say .splide__track {
overflow: visible;
will-change: transform;
}
.client-say .splide__list {
gap: 30px;
}
.client-say .swiper {
overflow: visible;
}
.client-say .swiper-slide {
overflow: hidden;
width: 100%;
}
@media (width >= 767px) {
.client-say .testimonial-swiper > .swiper-wrapper {
transition-timing-function: linear;
margin: 0 auto;
}
}
.client-say .swiperbtn-container {
display: none;
align-items: center;
justify-content: center;
gap: 40px;
}
.client-say .swiperbtn-container .swiper-button {
display: flex;
width: 48px;
height: 48px;
justify-content: center;
align-items: center;
gap: 10px;
aspect-ratio: 1/1;
position: static;
border-radius: 100px;
background: #fc9611;
color: #0a0b0d;
margin-top: 15px;
}
.client-say .swiperbtn-container .swiper-button:before, .client-say .swiperbtn-container .swiper-button:after {
display: none;
}
.client-say .testimonial-card {
max-width: 440px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 20px 34px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
position: relative;
}
.client-say .testimonial-card .abs {
position: absolute;
inset: 0;
}
.client-say .testimonial-card .testimonial-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid #e9ebee;
}
.client-say .testimonial-card .testimonial-header .university {
display: flex;
align-items: center;
gap: 10px;
}
.client-say .testimonial-card .testimonial-header .university .uni-logo {
width: 114px;
height: 32px;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: left;
object-position: left;
}
.client-say .testimonial-card .testimonial-header .university h4 {
font-size: 13px;
font-weight: 700;
color: #000;
letter-spacing: 0.5px;
}
.client-say .testimonial-card .testimonial-header .region {
display: flex;
align-items: center;
gap: 8px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 9999px;
padding: 4px 10px;
font-size: 13px;
color: #333;
}
.client-say .testimonial-card .testimonial-header .region img {
width: 18px;
height: 12px;
-o-object-fit: cover;
object-fit: cover;
}
.client-say .testimonial-card .testimonial-body {
text-align: left;
}
.client-say .testimonial-card .testimonial-body h6 {
font-size: 16px;
margin-bottom: 7px;
font-weight: 600;
color: #0a0b0d;
}
.client-say .testimonial-card .testimonial-body p {
color: #424344;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
margin-bottom: 12px;
overflow: auto;
height: 150px;
}
.client-say .testimonial-card .testimonial-body .rating {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding-bottom: 12px;
}
.client-say .testimonial-card .testimonial-body .rating .stars {
display: flex;
gap: 3px;
align-items: center;
justify-content: center;
}
.client-say .testimonial-card .testimonial-body .rating .stars img {
width: 16px;
}
.client-say .testimonial-card .testimonial-body .rating .scores {
display: flex;
gap: 16px;
}
.client-say .testimonial-card .testimonial-body .rating .scores div {
display: flex;
flex-direction: column;
align-items: center;
}
.client-say .testimonial-card .testimonial-body .rating .scores div strong {
color: #000;
text-align: center;
font-family: "DM Sans", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 120% */
}
.client-say .testimonial-card .testimonial-body .rating .scores div span {
color: #787878;
text-align: center;
font-family: "DM Sans", sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 12px; /* 100% */
}
.client-say .testimonial-card .testimonial-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #e8e8e8;
padding-top: 16px;
}
.client-say .testimonial-card .testimonial-footer .profile {
display: flex;
align-items: center;
gap: 10px;
text-align: left;
}
.client-say .testimonial-card .testimonial-footer .profile img {
width: 40px;
height: 40px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.client-say .testimonial-card .testimonial-footer .profile > div {
display: flex;
flex-direction: column;
gap: 5px;
}
.client-say .testimonial-card .testimonial-footer .profile h5 {
color: #000;
font-family: "DM Sans", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 14px; /* 171.429% */
}
.client-say .testimonial-card .testimonial-footer .profile span {
color: #000;
font-family: "DM Sans", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 14px; /* 171.429% */
}
.client-say .testimonial-card .testimonial-footer .google-icon {
width: 28px;
height: 28px;
-o-object-fit: contain;
object-fit: contain;
}
.insights {
padding: 36px 0 44px;
}
.insights .container {
position: relative;
}
.insights .subheading {
margin-bottom: 16px;
}
.insights h2 {
margin-bottom: clamp(1.875rem, 2.604vw + 0.625rem, 3.75rem);
max-width: 950px;
}
.insights .blog-sec .blog-post-bx {
position: relative;
}
.insights .blog-sec .blog-post-bx .blgimg {
border-radius: 16px;
overflow: hidden;
margin-bottom: 16px;
}
.insights .blog-sec .blog-post-bx .blgimg img {
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.insights .blog-sec .blog-post-bx .blgcontent .blg-tags {
margin-bottom: 16px;
}
.insights .blog-sec .blog-post-bx .blgcontent .blg-tags ul {
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
}
.insights .blog-sec .blog-post-bx .blgcontent .blg-tags ul li {
color: #6c7278;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 171.429% */
text-transform: capitalize;
}
.insights .blog-sec .blog-post-bx .blgcontent h5 {
margin-bottom: 8px;
font-weight: 500;
}
.insights .blog-sec .blog-post-bx .blgcontent p {
line-height: 24px;
margin-bottom: 0;
}
.insights .blog-sec .blog-post-bx:hover .blgimg img {
scale: 1.1;
}
.insights .blog-sec .blog-post-bx .abs {
position: absolute;
inset: 0;
}
.insights .absbtn {
position: absolute;
right: 0;
top: 30px;
}
.insights.otherinsights {
padding-top: 83px;
padding-bottom: 0;
text-align: center;
}
.insights.otherinsights h2 {
margin: 0 auto 48px;
}
.insights.otherinsights .absbtn {
position: static;
margin-top: 80px;
}
.insights.otherinsights .blog-sec .blog-post-bx {
text-align: left;
}
.excellence {
padding-top: 39px;
text-align: center;
}
.excellence .subheading {
margin-bottom: 8px;
}
.excellence h2 {
max-width: 505px;
margin: 0 auto clamp(1.875rem, 5.208vw - 0.625rem, 5.625rem);
}
.excellence .excellence-bx {
text-align: center;
}
.excellence .excellence-bx .icon {
height: 80px;
margin: 0 auto 23px;
}
.excellence .excellence-bx .icon img {
height: 100%;
background-size: contain;
margin: 0 auto;
}
.excellence .excellence-bx .text h6 {
color: #000;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.excellence .excellence-bx .text p {
color: #000;
font-family: "DM Sans", sans-serif;
font-weight: 500;
line-height: 24px; /* 150% */
letter-spacing: 0.16px;
margin-bottom: 0;
}
.excellence .excellence-img {
position: relative;
margin-top: -235px;
z-index: -1;
}
.excellence .excellence-img:before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 450px;
z-index: 1;
background: #fff;
background: linear-gradient(180deg, rgb(255, 255, 255) 50%, rgba(255, 153, 2, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#FF9902", GradientType=0);
}
.lets-connect {
padding: clamp(4.375rem, 7.813vw + 0.625rem, 10rem) 0 clamp(3.125rem, 5.208vw + 0.625rem, 6.875rem);
background: #0a0b0d;
}
.lets-connect .connect-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.lets-connect .connect-row .connect-form {
max-width: 50%;
width: 100%;
}
.lets-connect .connect-row .connect-form .cn-top {
padding: clamp(1.25rem, 3.819vw - 0.583rem, 4rem);
border-radius: 32px;
background: #1e1e1e;
margin-bottom: 26px;
}
.lets-connect .connect-row .connect-form .cn-top h4 {
color: #fff;
margin-bottom: 32px;
}
.lets-connect .connect-row .connect-form .cn-top .forminner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
align-self: stretch;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow label {
color: #fff;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
display: block;
margin-bottom: 4px;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]),
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow textarea,
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow select {
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0);
background-color: #333;
padding: 11px 12px;
transition: all 0.4s ease-in-out;
width: 100%;
color: #fff;
margin-bottom: 0;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):focus,
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow textarea:focus,
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow select:focus {
outline: none;
border: 1px solid #fc9611;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow select {
background-image: url('data:image/svg+xml;utf8,');
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .wpcf7-phonetext {
padding-left: 80px !important;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .wpcf7-form-control-wrap[data-name=phone] {
overflow: hidden;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .flag-container .selected-flag {
width: 70px;
background: #414141;
color: rgba(255, 255, 255, 0.2901960784);
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow textarea {
resize: none;
height: 116px;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .full {
width: 100%;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .half {
width: 50%;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow.prv-text {
margin-bottom: 18px;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow.prv-text p {
color: #fff;
line-height: 22px;
margin-bottom: 0;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow.prv-text p a {
color: #fc9611;
text-decoration: underline;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow.submit {
justify-content: flex-start;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow.submit .btn {
padding: 15px 32px;
box-shadow: 0 4px 12px 0 rgba(252, 150, 17, 0.4);
font-weight: 600;
color: #fff;
background-color: #fc9611;
width: auto;
border-radius: 100px;
border: none;
margin: 0;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload {
width: 100%;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload label {
color: #fff;
display: block;
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .fileupload-box {
position: relative;
border: 1px dashed rgba(255, 255, 255, 0.3);
border-radius: 10px;
background: #2a2a2a;
padding: 12.5px 12px;
text-align: center;
cursor: pointer;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .fileupload-box:hover {
border-color: #fc9611;
background: rgba(252, 150, 17, 0.1);
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .fileupload-box:hover .fileupload-placeholder svg {
stroke: #fc9611;
transform: translateY(-3px);
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .fileupload-box:hover .file-text {
color: #fc9611 !important;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .fileupload-box input[type=file] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 2;
cursor: pointer;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .fileupload-box input[type=file]::-webkit-file-upload-button {
width: 100%;
height: 100%;
cursor: pointer;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .fileupload-box .fileupload-placeholder {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 8px;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .fileupload-box .fileupload-placeholder svg {
width: 20px;
height: 20px;
transition: all 0.3s ease;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .fileupload-box .fileupload-placeholder .file-text {
color: #8f9398;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
transition: all 0.3s ease;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .file-name {
font-size: 14px;
color: #999;
margin-top: 10px;
transition: color 0.3s ease;
margin-bottom: 0;
}
.lets-connect .connect-row .connect-form .cn-top .forminner .inputrow .fileupload.has-file .file-name {
color: #fc9611;
}
.lets-connect .connect-row .connect-form .cn-bot ul {
display: flex;
align-items: center;
justify-content: center;
gap: 29px;
}
.lets-connect .connect-row .connect-form .cn-bot ul li {
display: flex;
align-items: center;
gap: 9px;
color: #fff;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
.lets-connect .connect-row .connect-form .cn-bot ul li img {
width: 20px;
height: 20px;
}
.lets-connect .connect-row .connect-text {
max-width: 50%;
width: 100%;
padding: 23px 0 36px clamp(1.5rem, 3.472vw - 0.167rem, 4rem);
}
.lets-connect .connect-row .connect-text .subheading {
margin-bottom: 8px;
}
.lets-connect .connect-row .connect-text .mxw514 {
max-width: 514px;
}
.lets-connect .connect-row .connect-text h2 {
color: #fff;
margin-bottom: 16px;
}
.lets-connect .connect-row .connect-text h2 + p {
margin-bottom: 35px;
color: #fff;
}
.lets-connect .connect-row .connect-text h2 span {
display: block;
}
.lets-connect .connect-row .connect-text ul {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: clamp(0.625rem, 2.604vw - 0.625rem, 2.5rem) 50px;
margin-bottom: clamp(1.875rem, 3.472vw + 0.208rem, 4.375rem);
}
.lets-connect .connect-row .connect-text ul li {
position: relative;
color: #e9ebee;
font-family: "DM Sans", sans-serif;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 141.176% */
max-width: 257px;
width: 100%;
padding-left: 34px;
}
.lets-connect .connect-row .connect-text ul li:before {
content: "";
width: 22px;
height: 22px;
border-radius: 11px;
background: #fc9611;
display: block;
position: absolute;
left: 0;
top: 0;
display: block;
}
.lets-connect .connect-row .connect-text ul li::after {
content: "\f054";
font-family: Fontawesome;
position: absolute;
left: 6px;
top: -1px;
color: #000;
font-size: 14px;
}
.lets-connect .connect-row .connect-text .cn-logo-sec {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 20px 26px;
flex-wrap: wrap;
}
.lets-connect .connect-row .connect-text .cn-logo-sec .cnlogo {
max-width: 240px;
width: 100%;
height: 98px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
background: #202020;
}
.lets-connect .connect-row .connect-text .cn-logo-sec .cnlogo img {
width: 172px;
}
.lets-connect .connect-row .connect-text .cn-logo-sec .cnlogo:nth-child(4) img {
width: 93px;
}
.lets-connect .connect-row .connect-text .cn-logo-sec .cnlogo:nth-child(5) img {
width: 103px;
}
.lets-connect .iti .iti__selected-dial-code {
color: #627575;
}
.lets-connect .iti__search-input {
padding-left: 30px !important;
}
.faq {
padding: clamp(3.125rem, 3.733vw + 1.333rem, 5.813rem) 0 clamp(3.125rem, 6.076vw + 0.208rem, 7.5rem);
text-align: center;
}
.faq .subheading {
margin-bottom: 8px;
}
.faq h2 {
margin-bottom: 40px;
}
.faq .faq-outer {
width: 100%;
max-width: 1042px;
display: flex;
flex-direction: column;
gap: 24px;
margin: 0 auto;
text-align: left;
}
.faq .faq-outer .faq-main {
border-radius: 16px;
background: var(--gray-50, #f8f8f8);
overflow: hidden;
transition: background 0.3s ease;
}
.faq .faq-outer .faq-main.active {
background: rgba(252, 150, 17, 0.1098039216);
}
.faq .faq-outer .faq-main.active .faq-head span.toggleicon::before {
transform: scaleY(0);
opacity: 0;
}
.faq .faq-outer .faq-main.active .faq-head span.toggleicon ::after {
background: #fc9611;
}
.faq .faq-outer .faq-main .faq-head {
position: relative;
cursor: pointer;
padding: 22px 60px 22px 26px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
color: #111;
}
.faq .faq-outer .faq-main .faq-head span.toggleicon {
width: 24px;
height: 24px;
border-radius: 50px;
border: 1px solid #090909;
position: absolute;
right: 24px;
top: 26px;
}
.faq .faq-outer .faq-main .faq-head span.toggleicon::after {
content: "";
position: absolute;
right: 5px;
width: 12px;
height: 2px;
background: #222;
transition: all 0.3s ease;
top: 10px;
}
.faq .faq-outer .faq-main .faq-head span.toggleicon::before {
content: "";
position: absolute;
right: 10px;
width: 2px;
height: 12px;
background: #222;
transition: all 0.3s ease;
top: 5px;
}
.faq .faq-outer .faq-main .faq-head h6 {
color: #090909;
font-family: "Poppins", sans-serif;
font-size: clamp(1rem, 0.347vw + 0.833rem, 1.25rem);
font-style: normal;
font-weight: 500;
line-height: 28px; /* 140% */
}
.faq .faq-outer .faq-main .faq-content {
padding: 0 26px;
overflow: hidden;
opacity: 0;
}
.faq .faq-outer .faq-main .faq-content a {
color: #fc9611;
text-decoration: underline;
}
.faq .button-container {
align-items: center;
justify-content: center;
margin-top: 40px;
margin-bottom: 0;
}
.mainft {
padding: clamp(4.375rem, 7.813vw + 0.625rem, 10rem) 0 clamp(3.125rem, 6.076vw + 0.208rem, 7.5rem);
background-color: #0a0b0d;
}
.mainft .ft-top .ft-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}
.mainft .ft-top .ft-row .ftlogoarea {
max-width: 306px;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 64px;
}
.mainft .ft-top .ft-row .ftlogoarea .ftlogo {
max-width: 223px;
width: 100%;
}
.mainft .ft-top .ft-row .ftlogoarea p {
color: #fff;
font-family: "Poppins", sans-serif;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 31px; /* 182.353% */
}
.mainft .ft-top .ft-row .ftlogoarea .logostack ul {
display: flex;
align-items: flex-start;
gap: 15px 24px;
flex-shrink: 0;
flex-wrap: wrap;
}
.mainft .ft-top .ft-row .ftlogoarea .logostack ul li:first-child {
max-width: 164px;
}
.mainft .ft-top .ft-row .ftlogoarea .logostack ul li:nth-child(2) {
max-width: 118px;
}
.mainft .ft-top .ft-row .ftlogoarea .logostack ul li:nth-child(3) {
max-width: 183px;
}
.mainft .ft-top .ft-row .ftlogoarea .logostack ul li img {
width: 100%;
}
.mainft .ft-top .ft-row .ftmenus {
max-width: 654px;
width: 100%;
}
.mainft .ft-top .ft-row .ftmenus .ftmenurow {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 56px;
}
.mainft .ft-top .ft-row .ftmenus .ftmenurow .ftmenu ul {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.mainft .ft-top .ft-row .ftmenus .ftmenurow .ftmenu ul li {
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.mainft .ft-top .ft-row .ftmenus .ftmenurow .ftmenu ul li a {
color: #fff;
}
.mainft .ft-top .ft-row .ftmenus .ftmenurow .ftmenu ul li a:hover {
color: #fc9611;
}
.mainft .ft-top .ft-row .ftcontact {
max-width: 237px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 32px;
}
.mainft .ft-top .ft-row .ftcontact ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 24px;
align-self: stretch;
}
.mainft .ft-top .ft-row .ftcontact ul li span {
color: #fc9611;
text-align: right;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
display: block;
}
.mainft .ft-top .ft-row .ftcontact ul li a {
color: #fff;
text-align: right;
font-family: "DM Sans", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}
.mainft .ft-top .ft-row .ftcontact .socialstack {
width: 100%;
}
.mainft .ft-top .ft-row .ftcontact .socialstack ul {
flex-direction: row;
display: flex;
align-items: flex-start;
gap: 10px;
justify-content: flex-end;
}
.mainft .ft-top .ft-row .ftcontact .socialstack ul li a {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #fc9611;
color: #fc9611;
border-radius: 50px;
font-size: 15px;
}
.mainft .ft-top .ft-row .ftcontact .socialstack ul li a:hover {
background-color: #fc9611;
color: #000;
}
.mainft .ft-middle {
margin-top: 64px;
}
.mainft .ft-middle .ftlocation-bx {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
flex-shrink: 0;
}
.mainft .ft-middle .ftlocation-bx .loc-icon {
width: 87px;
margin: 0 auto;
}
.mainft .ft-middle .ftlocation-bx .loc-icon img {
width: 100%;
}
.mainft .ft-middle .ftlocation-bx h6 {
color: #fc9611;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.mainft .ft-middle .ftlocation-bx p {
color: #fff;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 30px; /* 187.5% */
}
.mainft .ft-middle .ftlocation-bx a {
color: #fff;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.mainft .ft-middle .ftlocation-bx a img {
width: 14px;
}
.mainft .ft-animation {
margin-top: clamp(2.5rem, 6.944vw - 0.833rem, 7.5rem);
height: 406px;
display: flex;
align-items: center;
justify-content: center;
}
.mainft .ft-animation .footer-animated-logo {
position: relative;
display: inline-block;
line-height: 1;
font-family: "Poppins", sans-serif;
font-weight: 800;
font-size: 227px;
color: #fff;
-webkit-text-stroke: 2px #fff;
opacity: 1 !important;
transform: translateY(-60px);
}
.mainft .ft-animation .footer-animated-logo .text-layer {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-weight: 600;
color: transparent;
opacity: 1 !important;
text-transform: uppercase;
line-height: 1;
letter-spacing: 2px;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.mainft .ft-animation .footer-animated-logo .text-layer > span {
position: relative;
z-index: 5;
line-height: 171px;
display: block;
}
.mainft .ft-animation .footer-animated-logo .text-layer > span:before {
content: "";
position: absolute;
inset: 0;
background-color: #0a0b0d;
z-index: -1;
filter: blur(5px);
left: -10px;
right: -10px;
}
.mainft .ft-animation .footer-animated-logo .main {
opacity: 1;
color: #0a0b0d;
z-index: 5;
-webkit-text-stroke: 2px #fff;
}
.mainft .ft-animation .footer-animated-logo .top1,
.mainft .ft-animation .footer-animated-logo .bottom1 {
z-index: 4;
}
.mainft .ft-animation .footer-animated-logo .top2,
.mainft .ft-animation .footer-animated-logo .bottom2 {
z-index: 3;
}
.mainft .ft-animation .footer-animated-logo .top3 {
z-index: 2;
}
.mainft .ft-end {
margin-top: 80px;
border-top: 1px solid #d0caca;
padding: 21px 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
flex-wrap: wrap;
}
.mainft .ft-end .ft-end-left {
max-width: 65%;
}
.mainft .ft-end .ft-end-left ul {
display: flex;
align-items: center;
gap: 16px;
}
.mainft .ft-end .ft-end-right {
max-width: 50%;
}
.mainft .ft-end .ft-end-right ul {
display: flex;
align-items: center;
gap: 16px;
}
.mainft .ft-end .ft-center {
width: 100%;
margin-top: 24px;
text-align: center;
}
.mainft .ft-end .ft-center p {
color: #fff;
font-family: "DM Sans", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 214.286% */
margin-bottom: 0;
}
.mainft .ft-end ul li {
color: #fff;
font-family: "DM Sans", sans-serif;
font-size: clamp(0.75rem, 0.347vw + 0.583rem, 1rem);
font-style: normal;
font-weight: 400;
line-height: clamp(1.25rem, 0.868vw + 0.833rem, 1.875rem); /* 187.5% */
}
.mainft .ft-end ul li a {
color: #fff;
}
.breadcrumb-section {
padding: 0 0 16px;
}
.breadcrumb-section ul {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 34px;
}
.breadcrumb-section ul li {
color: #383838;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
position: relative;
}
.breadcrumb-section ul li:before {
content: "";
position: absolute;
right: -19px;
top: 6px;
background: url(../images/breadcrumb-arrow.png) no-repeat center center;
background-size: 4px;
width: 4px;
height: 6px;
}
.breadcrumb-section ul li:last-child:before {
display: none;
}
.breadcrumb-section ul li a {
color: #696969;
}
.app-driven {
text-align: center;
padding-bottom: 111px;
}
.app-driven h2 {
margin-bottom: 86px;
}
.app-driven h2:has(+ p) {
margin-bottom: 16px;
}
.app-driven h2 + p {
max-width: 56rem;
margin: 0 auto;
}
.app-driven .appbx {
padding: 23px;
}
.app-driven .appbx .appicon {
display: flex;
width: 142px;
height: 142px;
padding: 12px;
justify-content: center;
align-items: center;
border-radius: 70px;
background: #fff;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.06);
margin: 0 auto 29px;
}
.app-driven .appbx .appicon img {
width: 70px;
height: 70px;
flex-shrink: 0;
aspect-ratio: 1/1;
}
.app-driven .appbx .apptext h5 {
margin-bottom: 18px;
}
.app-driven .appbx .apptext p:last-child {
margin-bottom: 0;
}
.uiuxsec {
padding-bottom: 105px;
}
.uiuxsec .uiuxsec-top {
text-align: center;
}
.uiuxsec h2 {
margin-bottom: 86px;
}
.uiuxsec h2:has(+ p) {
margin-bottom: 16px;
}
.uiuxsec h2 + p {
max-width: 56rem;
margin: 0 auto;
}
.uiuxsec h2 {
margin-bottom: 83px;
}
.uiuxsec .uiuxtab {
position: relative;
}
.uiuxsec .uiuxtab .row {
justify-content: space-between;
align-items: flex-start;
}
.uiuxsec .uiuxtab .stickytabnav {
position: relative;
}
.uiuxsec .uiuxtab .stickytabnav:before {
content: "";
position: absolute;
width: 1px;
top: 0;
bottom: 0;
right: -65px;
background-color: #d3d3d3;
pointer-events: none;
}
.uiuxsec .uiuxtab .stickytabnav ul {
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: flex-start;
gap: 25px;
}
.uiuxsec .uiuxtab .stickytabnav ul li {
cursor: pointer;
position: relative;
transition: all 0.3s ease-in-out;
display: block;
width: 100%;
}
.uiuxsec .uiuxtab .stickytabnav ul li:before {
transition: all 0.3s ease-in-out;
}
.uiuxsec .uiuxtab .stickytabnav ul li h5 {
color: #000;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
.uiuxsec .uiuxtab .stickytabnav ul li p {
margin-top: 8px;
color: #000;
font-family: "DM Sans", sans-serif;
line-height: 24px; /* 150% */
margin-bottom: 0;
display: none;
}
.uiuxsec .uiuxtab .stickytabnav ul li.active:before {
content: "";
position: absolute;
background: #fff url(../images/tab-arrow.png) no-repeat 0 0;
background-size: 100%;
width: 15px;
height: 26px;
right: -79px;
top: 50%;
transform: translateY(-50%);
}
.uiuxsec .uiuxtab .stickytabnav ul li.active h5 {
color: #fc9611;
}
.uiuxsec .uiuxtab .stickytabnav ul li.active p {
display: block;
}
.uiuxsec .uiuxtab .tabswitcher {
display: none;
}
.uiuxsec .uiuxtab .tabimg img {
width: 100%;
}
.uiuxsec .uiuxtab .tabcontent {
display: flex;
flex-direction: column;
gap: 20px;
justify-content: flex-start;
}
.uiuxsec .uiuxtab .tabcontent p {
margin-bottom: 0;
}
.uiuxsec .uiuxtab .tabcontent .button-container {
margin-bottom: 0;
}
.industry.canchangeheadingwidth {
padding-bottom: 116px;
}
.industry.canchangeheadingwidth.breaktext h2 span {
display: block;
}
.industry.canchangeheadingwidth.inlinetext h2 span {
display: inline;
}
.industry.canchangeheadingwidth .button-container {
margin-bottom: 0;
position: relative;
z-index: 2;
}
.industry.canchangeheadingwidth h2 {
max-width: 861px;
}
.why-choose {
padding: clamp(3.125rem, 3.472vw + 1.458rem, 5.625rem) 0 clamp(3.125rem, 8.16vw - 0.792rem, 9rem);
background-color: #0a0b0d;
text-align: center;
}
.why-choose h2 {
color: #fff;
margin-bottom: 86px;
}
.why-choose .imgsec {
overflow: hidden;
border-radius: 20px;
}
.why-choose .imgsec img {
width: 100%;
}
.why-choose .textsec {
text-align: left;
}
.why-choose .textsec .compare-list {
list-style: none;
margin: 0 0 27px 0;
padding: 0;
display: block;
text-align: left;
}
.why-choose .textsec .compare-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
gap: 28px;
padding: 22px 18px;
min-height: 64px;
text-align: left;
}
.why-choose .textsec .compare-row:first-child {
padding: 0;
}
.why-choose .textsec .compare-row:nth-child(2n) {
background-color: #191919;
}
.why-choose .textsec .compare-row:last-child {
border-bottom: none;
}
.why-choose .textsec .compare-row .compare-cell {
color: #fff;
font-size: 16px;
line-height: 1.4;
}
.why-choose .textsec .compare-row .compare-cell.compare-cell-header {
color: #fc9611;
font-size: 15px;
font-weight: 600;
padding: 7px 14px;
margin-bottom: 20px;
}
.why-choose.hasicon {
background: #0a0b0d;
}
.why-choose.hasicon .why-choose-item {
width: 100%;
max-width: 16.625rem;
margin: 0 auto 0;
}
.why-choose.hasicon .why-choose-item .why-circle {
display: flex;
width: 9.875rem;
height: 9.875rem;
justify-content: center;
align-items: center;
gap: 0.625rem;
border-radius: 4.9375rem;
background: #fff;
transition: all 0.3s ease-in-out;
margin: 0 auto 1.5rem;
}
.why-choose.hasicon .why-choose-item .why-circle img {
width: 68px;
height: 68px;
flex-shrink: 0;
aspect-ratio: 1/1;
filter: brightness(0) saturate(100%) invert(67%) sepia(48%) saturate(2391%) hue-rotate(348deg) brightness(98%) contrast(103%);
transition: all 0.3s ease-in-out;
}
.why-choose.hasicon .why-choose-item h5 {
color: #fff;
text-align: center;
font-family: Poppins;
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: 1.75rem; /* 140% */
}
.why-choose.hasicon .why-choose-item:hover .why-circle {
border-radius: 150px;
background: #fc9611;
width: 11.25rem;
height: 11.25rem;
}
.why-choose.hasicon .why-choose-item:hover .why-circle img {
filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%) hue-rotate(300deg) brightness(96%) contrast(104%);
}
.explore {
background-color: #f7f8fa;
text-align: center;
padding: 86px 0;
}
.explore h2 {
margin-bottom: 8px;
}
.explore .mxw-779 {
max-width: 755px;
margin: 0 auto;
text-align: center;
}
.explore .mxw-779 p {
font-weight: 500;
}
.menutext > span {
display: none;
}
.blog-cubes {
padding-top: 8px;
padding-bottom: clamp(3.75rem, 5.208vw + 1.25rem, 7.5rem);
/* ----------------------------------------------------------------------
* CAROUSEL PAGINATION STYLING (Based on image_628236.png)
* ----------------------------------------------------------------------
*/
/* --------------------
* BASE STYLE FOR ALL CIRCLES (Numbers and Arrows)
* --------------------
*/
/* --------------------
* DEFAULT NUMBER STYLE (Pages 2, 3, 4, 5)
* --------------------
*/
/* --------------------
* ACTIVE/CURRENT PAGE STYLE (Page 1)
* --------------------
*/
/* --------------------
* ARROW BUTTONS (Prev/Next)
* --------------------
*/
/* --------------------
* HOVER/FOCUS STATES
* --------------------
*/
}
.blog-cubes .search-filter-block {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
margin-bottom: 40px;
}
.blog-cubes .search-filter-block .searchblock {
max-width: 400px;
width: 100%;
border-radius: 100px;
overflow: hidden;
border: 1px solid var(--neutral-200, #e9ebee);
}
.blog-cubes .search-filter-block .searchblock .searchblock-container {
position: relative;
}
.blog-cubes .search-filter-block .searchblock .searchblock-container input[type=text] {
width: 100%;
border: none;
margin-bottom: 0;
background: var(--neutral-100, #f7f8fa);
padding: 15px 116px 15px 32px;
color: #696969;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 128.571% */
}
.blog-cubes .search-filter-block .searchblock .searchblock-container input[type=submit] {
border: none;
border-radius: 0;
margin-bottom: 0;
position: absolute;
bottom: 0;
top: 0;
right: 0;
max-width: 76px;
background: #ffdca8 url(../images/search-blog-black.png) no-repeat center center;
background-size: 20px;
}
.blog-cubes .search-filter-block .filter-block {
display: flex;
align-items: center;
gap: 30px;
}
.blog-cubes .search-filter-block .filter-block span {
color: var(--base-black, #0a0b0d);
font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
display: block;
margin-bottom: 8px;
}
.blog-cubes .search-filter-block .filter-block select {
border-radius: 8px;
border: 1px solid var(--neutral-200, #e9ebee);
padding: 16px 24px;
padding-right: 67px;
color: var(--base-black, #0a0b0d);
font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 100% */
margin-bottom: 0;
background: var(--neutral-100, #f7f8fa) url('data:image/svg+xml;utf8,') no-repeat center right 26px;
background-size: 12px;
}
.blog-cubes .search-filter-block .filter-block select:focus, .blog-cubes .search-filter-block .filter-block select:focus-visible, .blog-cubes .search-filter-block .filter-block select:focus-within {
outline: none;
box-shadow: none;
}
.blog-cubes .row {
gap: 48px 0;
}
.blog-cubes .blog-cube {
position: relative;
cursor: pointer;
}
.blog-cubes .blog-cube .abs {
position: absolute;
inset: 0;
}
.blog-cubes .blog-cube .img {
position: relative; /* Needed for ::before and ::after positioning */
margin-bottom: 16px;
border-radius: 16px;
overflow: hidden;
}
.blog-cubes .blog-cube .img::before {
content: "";
position: absolute;
top: 0;
left: -150%; /* Start position: Off-screen left/top */
width: 50%; /* Width of the shine itself */
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-20deg); /* Rotate the shine diagonally */
transition: left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Transition for the sliding movement */
z-index: 10;
}
.blog-cubes .blog-cube .img::after {
content: "";
position: absolute;
top: 0;
left: -180%; /* Start position 2 (slightly further back) */
width: 30%; /* Thinner shine */
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-20deg); /* Same skew */
transition: left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Slightly different speed */
z-index: 10;
}
.blog-cubes .blog-cube .img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
/* Transition for the diagonal zoom effect */
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform: scale(1); /* Initial state */
transition-delay: 0.25s;
}
.blog-cubes .blog-cube:hover .img::before {
left: 150%; /* Slide shine 1 across */
}
.blog-cubes .blog-cube:hover .img::after {
left: 180%; /* Slide shine 2 across (slightly further to ensure it clears) */
}
.blog-cubes .blog-cube:hover .img img {
/* Diagonal Zoom and slight shift (scale and translate) */
transform: scale(1.1) translate(2%, 2%);
}
.blog-cubes .blog-cube:hover .text h5 {
color: #fc9611;
transition-delay: 0.25s;
}
.blog-cubes .blog-cube .text h5 {
font-weight: 500;
margin-bottom: 8px;
transition: all 0.3s ease-in-out;
font-size: clamp(1.125rem, 0.521vw + 0.875rem, 1.5rem);
line-height: clamp(1.563rem, 0.608vw + 1.271rem, 2rem);
}
.blog-cubes .blog-cube .text p {
color: #000;
margin-bottom: 0;
line-height: 24px; /* 150% */
}
.blog-cubes .carousel-pagination .page-indicators {
display: flex;
align-items: center;
gap: 32px;
border-top: 1px solid var(--neutral-200, #e9ebee);
margin-top: 40px;
padding-top: 40px;
justify-content: center;
}
.blog-cubes .carousel-pagination li {
/* Ensures list items don't interfere with flex alignment */
padding: 0;
}
.blog-cubes .carousel-pagination .page-number,
.blog-cubes .carousel-pagination .page-arrow {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
cursor: pointer;
/* Dimensions for the large circles */
width: 55px;
height: 55px;
border-radius: 50%;
/* Standard font style for the numbers */
font-size: 18px;
font-weight: 700;
border: none;
transition: all 0.2s ease-in-out;
}
.blog-cubes .carousel-pagination .page-number {
display: flex;
width: 32px;
height: 32px;
padding: 12px 16px;
justify-content: center;
align-items: center;
gap: 80px;
aspect-ratio: 1/1;
border-radius: 100px;
text-align: center;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 14px; /* 100% */
}
.blog-cubes .carousel-pagination .page-number.current,
.blog-cubes .carousel-pagination .page-number:hover {
background-color: #fc9611; /* Bright Orange solid fill */
color: var(--Neutral---color-neutral-500, #111);
}
.blog-cubes .carousel-pagination .page-arrow {
display: flex;
width: 48px;
height: 48px;
padding: 12px;
justify-content: center;
align-items: center;
aspect-ratio: 1/1;
border-radius: 100px;
background: #ffdca8;
}
.blog-cubes .carousel-pagination .page-number:hover,
.blog-cubes .carousel-pagination .page-arrow:hover {
/* Slightly darken the background or change color for interaction feedback */
opacity: 0.8;
}
.blog-details-innerbanner {
margin-top: 148px;
position: relative;
}
.blog-details-innerbanner .wraper-box {
border-radius: 16px;
overflow: hidden;
padding: 80px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.blog-details-innerbanner .wraper-box img.bg-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.blog-details-innerbanner .wraper-box::after {
content: "";
width: 100%;
height: 100%;
border-radius: 16px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 85.65%);
position: absolute;
top: 0;
left: 0;
}
.blog-details-innerbanner .wraper-box .text-wraper {
position: relative;
z-index: 9;
max-width: 866px;
width: 100%;
}
.blog-details-innerbanner .wraper-box .text-wraper ul.breadcrumbs {
display: flex;
align-items: center;
justify-content: center;
gap: 34px;
margin-bottom: 24px;
}
.blog-details-innerbanner .wraper-box .text-wraper ul.breadcrumbs li {
color: #fff;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 18px;
position: relative;
}
.blog-details-innerbanner .wraper-box .text-wraper ul.breadcrumbs li::before {
content: "";
position: absolute;
right: -19px;
top: 6px;
background: url(../images/w-arrow.svg) no-repeat center center;
background-size: 4px;
width: 4px;
height: 6px;
}
.blog-details-innerbanner .wraper-box .text-wraper ul.breadcrumbs li a {
color: #fff;
}
.blog-details-innerbanner .wraper-box .text-wraper ul.breadcrumbs li:last-child::before {
display: none;
}
.blog-details-innerbanner .wraper-box .text-wraper h1 {
text-align: center;
margin-bottom: 24px;
color: #fff;
text-align: center;
}
.blog-details-innerbanner .wraper-box .text-wraper h3 {
color: #fff;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 140% */
margin-bottom: 24px;
}
.blog-details-innerbanner .wraper-box .text-wraper h4 {
color: #fff;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
margin: 0;
}
.blog-details-innerbanner .wraper-box .text-wraper h4 span {
display: block;
font-weight: 500;
}
.blog-details-sec {
padding: 80px 0 64px;
}
.blog-details-sec .post-detail {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
padding-bottom: 40px;
margin-bottom: 40px;
border-bottom: 1px solid #e9ebee;
}
.blog-details-sec .post-detail ul.tag-line {
display: flex;
align-items: center;
gap: 40px;
}
.blog-details-sec .post-detail ul.tag-line li {
display: flex;
flex-direction: column;
gap: 8px;
}
.blog-details-sec .post-detail ul.tag-line li span {
color: #000;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
.blog-details-sec .post-detail ul.tag-line li strong {
color: #000;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 140% */
}
.blog-details-sec .post-detail .share-post {
display: flex;
flex-direction: column;
gap: 8px;
}
.blog-details-sec .post-detail .share-post h3 {
color: #000;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
margin: 0;
}
.blog-details-sec .post-detail .share-post .flex-wraper {
display: flex;
align-items: center;
gap: 10px;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon {
display: flex;
align-items: center;
gap: 10px;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon li {
width: 35px;
height: 35px;
border: 1px solid #0a0b0d;
border-radius: 50%;
overflow: hidden;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon li a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon li a i {
font-size: 18px;
color: #0a0b0d;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon .heateor_sss_sharing_ul a:nth-child(1) .heateor_sss_svg {
background-color: #fff1e0 !important;
border: 1px solid #fc9611 !important;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon .heateor_sss_sharing_ul a:nth-child(1) .heateor_sss_svg svg {
scale: 0.7;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon .heateor_sss_sharing_ul a:nth-child(1) .heateor_sss_svg svg path {
fill: #fc9611 !important;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon .heateor_sss_sharing_ul a:nth-child(2) .heateor_sss_svg {
background-color: #fff1e0 !important;
border: 1px solid #fc9611 !important;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon .heateor_sss_sharing_ul a:nth-child(2) .heateor_sss_svg svg {
scale: 0.7;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon .heateor_sss_sharing_ul a:nth-child(2) .heateor_sss_svg svg path {
fill: #fc9611 !important;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon .heateor_sss_sharing_ul a:nth-child(3) .heateor_sss_svg {
background-color: #fff1e0 !important;
border: 1px solid #fc9611 !important;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon .heateor_sss_sharing_ul a:nth-child(3) .heateor_sss_svg svg {
scale: 0.7;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon .heateor_sss_sharing_ul a:nth-child(3) .heateor_sss_svg svg path {
fill: #fc9611 !important;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon .heateor_sss_sharing_ul a:nth-child(4) .heateor_sss_svg {
background: transparent !important;
background-color: #fff1e0 !important;
border: 1px solid #fc9611 !important;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon .heateor_sss_sharing_ul a:nth-child(4) .heateor_sss_svg svg {
scale: 0.7;
}
.blog-details-sec .post-detail .share-post .flex-wraper ul.social-icon .heateor_sss_sharing_ul a:nth-child(4) .heateor_sss_svg svg path {
fill: #fc9611 !important;
}
.blog-details-sec .post-detail .share-post .flex-wraper a.copy-link {
min-width: 140px;
color: #000;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 171.429% */
border-radius: 100px;
border: 1px solid #0a0b0d;
padding: 6px 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
}
.blog-details-sec .post-detail .share-post .flex-wraper a.copy-link img {
max-width: 18px;
max-height: 18px;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.blog-details-sec .post-detail .share-post .flex-wraper span.copy-link {
min-width: 130px;
color: #fff;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 171.429% */
border-radius: 100px;
background-color: #fc9611;
border: 1px solid #fc9611;
padding: 6px 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
}
.blog-details-sec .post-detail .share-post .flex-wraper span.copy-link i {
width: 25px;
height: 25px;
background: #de8109;
border-radius: 50%;
color: #fff;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(15deg);
}
.blog-details-sec .text-wraper h5 {
color: #000;
line-height: 28px; /* 116.667% */
margin: 32px 0 16px;
}
.blog-details-sec .text-wraper p {
line-height: 24px; /* 150% */
}
.blog-details-sec .text-wraper ul {
margin-bottom: 24px;
}
.blog-details-sec .text-wraper ul li {
color: #000;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
margin-bottom: 12px;
padding-left: 25px;
position: relative;
}
.blog-details-sec .text-wraper ul li::before {
content: "";
width: 5px;
height: 5px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 0;
left: 10px;
bottom: 0;
margin: auto;
}
.blog-details-sec .text-wraper ul li:last-child {
margin: 0;
}
.lets-connect.contact-pg {
background: #fff;
padding-top: 30px;
}
.lets-connect.contact-pg .connect-row {
flex-direction: row-reverse;
}
.lets-connect.contact-pg .connect-row .connect-form {
max-width: 704px;
width: 100%;
}
.lets-connect.contact-pg .connect-row .connect-form .cn-top {
margin-bottom: 0;
background: #fff;
border-radius: 24px;
border: 1px solid var(--neutral-200, #e9ebee);
background: #fff;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.16);
}
.lets-connect.contact-pg .connect-row .connect-form .cn-top h4 {
color: #0a0b0d;
}
.lets-connect.contact-pg .connect-row .connect-form .cn-top .forminner .inputrow label {
color: #0a0b0d;
}
.lets-connect.contact-pg .connect-row .connect-form .cn-top .forminner .inputrow input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]),
.lets-connect.contact-pg .connect-row .connect-form .cn-top .forminner .inputrow textarea,
.lets-connect.contact-pg .connect-row .connect-form .cn-top .forminner .inputrow select {
background: var(--neutral-100, #f7f8fa);
border: 1px solid var(--neutral-200, #e9ebee);
color: #000;
}
.lets-connect.contact-pg .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .fileupload-box {
background: var(--neutral-100, #f7f8fa);
border: 1px dashed var(--neutral-300, #6c7278);
}
.lets-connect.contact-pg .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .fileupload-box .fileupload-placeholder svg {
stroke: #6c7278;
}
.lets-connect.contact-pg .connect-row .connect-form .cn-top .forminner .inputrow .fileupload .fileupload-box .fileupload-placeholder svg:hover {
stroke: #fc9611;
}
.lets-connect.contact-pg .connect-row .connect-form .cn-top .forminner .inputrow.prv-text p {
color: var(--base-black, #0a0b0d);
}
.lets-connect.contact-pg .connect-row .connect-form .cn-top .forminner .inputrow.submit .btn {
color: #0a0b0d;
}
.lets-connect.contact-pg .connect-row .connect-form .cn-top .forminner .inputrow .intl-tel-input input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]) {
padding-left: 5.0625rem;
}
.lets-connect.contact-pg .connect-row .connect-text {
max-width: 530px;
width: 100%;
padding: 0;
}
.lets-connect.contact-pg .connect-row .connect-text h2 {
color: var(--base-black, #0a0b0d);
}
.lets-connect.contact-pg .connect-row .connect-text h2 + p {
color: var(--base-black, #0a0b0d);
}
.lets-connect.contact-pg .connect-row .connect-text ul {
color: var(--base-black, #0a0b0d);
gap: 38px 30px;
}
.lets-connect.contact-pg .connect-row .connect-text ul li {
color: var(--base-black, #0a0b0d);
max-width: 250px;
}
.lets-connect.contact-pg .connect-row .connect-text .cn-logo-sec {
max-width: 440px;
}
.lets-connect.contact-pg .connect-row .connect-text .cn-logo-sec .cnlogo {
border-radius: 15px;
border: 1.18px solid var(--neutral-200, #e9ebee);
background: var(--base-white, #fff);
max-width: 200px;
height: 77px;
}
.lets-connect.contact-pg .connect-row .connect-text .cn-logo-sec .cnlogo img {
width: 137px;
}
.lets-connect.contact-pg .connect-row .connect-text .cn-logo-sec .cnlogo:nth-child(2) img {
width: 102px;
}
.lets-connect.contact-pg .connect-row .connect-text .cn-logo-sec .cnlogo:nth-child(3) img, .lets-connect.contact-pg .connect-row .connect-text .cn-logo-sec .cnlogo:nth-child(6) img {
width: 148px;
}
.lets-connect.contact-pg .connect-row .connect-text .cn-logo-sec .cnlogo:nth-child(4) img {
width: 74px;
}
.lets-connect.contact-pg .connect-row .connect-text .cn-logo-sec .cnlogo:nth-child(5) img {
width: 82px;
}
.info-cnt {
padding-bottom: clamp(3.125rem, 6.076vw + 0.208rem, 7.5rem);
}
.info-cnt .border-radius-bx {
display: flex;
padding: 24px 40px;
justify-content: space-between;
align-items: center;
border-radius: 24px;
border: 1px solid #fc9611;
background: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
position: relative;
}
.info-cnt .border-radius-bx:before {
content: "";
position: absolute;
}
.info-cnt .border-radius-bx:after {
content: "";
position: absolute;
}
.info-cnt .border-radius-bx .br-box {
display: flex;
padding: 24px 0;
justify-content: center;
align-items: center;
gap: 16px;
}
.info-cnt .border-radius-bx .br-box .icon {
background-color: #ffdca8;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 60px;
}
.info-cnt .border-radius-bx .br-box .icon img {
width: 20px;
}
.info-cnt .border-radius-bx .br-box .text span {
font-weight: 500;
}
.info-cnt .border-radius-bx .br-box .text p {
margin-bottom: 0;
color: #0a0b0d;
font-family: "DM Sans", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 140% */
}
.info-cnt .border-radius-bx .br-box .text p a:hover {
color: #fc9611;
}
.trust-us {
padding-bottom: clamp(3.125rem, 6.076vw + 0.208rem, 7.5rem);
}
.trust-us h2 {
margin-bottom: 8px;
}
.trust-us h2 + p {
margin-bottom: 0;
}
.trust-us .trust-bx-outer {
margin-top: 48px;
}
.trust-us .trust-bx-outer .trust-bx-row {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
flex-wrap: wrap;
}
.trust-us .trust-bx-outer .trust-bx-row .trustbx {
width: 25%;
flex: 25% 0 0;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid #dfdfdf;
}
.trust-us .trust-bx-outer .trust-bx-row .trustbx .trustbx-inner {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
padding: 32px 30px;
border-right: 1px solid #dfdfdf;
}
.trust-us .trust-bx-outer .trust-bx-row .trustbx .icon {
width: 64px;
height: 64px;
aspect-ratio: 1/1;
}
.trust-us .trust-bx-outer .trust-bx-row .trustbx .icon img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
aspect-ratio: 1/1;
}
.trust-us .trust-bx-outer .trust-bx-row .trustbx .text {
line-height: 18px;
}
.trust-us .trust-bx-outer .trust-bx-row .trustbx .text h4 {
line-height: 32px; /* 100% */
margin-bottom: 4px;
}
.trust-us .trust-bx-outer .trust-bx-row .trustbx:nth-child(1), .trust-us .trust-bx-outer .trust-bx-row .trustbx:nth-child(2), .trust-us .trust-bx-outer .trust-bx-row .trustbx:nth-child(3), .trust-us .trust-bx-outer .trust-bx-row .trustbx:nth-child(4) {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.trust-us .trust-bx-outer .trust-bx-row .trustbx:nth-child(4n) .trustbx-inner {
border-right: none;
}
.we-help {
padding: clamp(3.125rem, 1.91vw + 2.208rem, 4.5rem) 0 clamp(3.125rem, 2.604vw + 1.875rem, 5rem);
background-color: #0a0b0d;
text-align: center;
}
.we-help h2 {
color: #fff;
margin-bottom: 8px;
}
.we-help h2 + p {
color: #fff;
margin-bottom: 40px;
}
.we-help .row {
gap: 30px 0;
}
.we-help .help-bx {
display: flex;
padding: 24px;
flex-direction: column;
justify-content: space-between;
flex: 1 0 0;
border-radius: 16px;
border: 1px solid #6c7278;
align-items: flex-start;
text-align: left;
position: relative;
height: 100%;
}
.we-help .help-bx .help-arrow {
width: 24.042px;
height: 24.042px;
position: absolute;
right: 36px;
bottom: 36px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.we-help .help-bx:hover .help-arrow {
rotate: 45deg;
}
.we-help .help-bx .icon {
width: 48px;
height: 48px;
margin-bottom: 16px;
}
.we-help .help-bx .icon img {
width: 100%;
height: 100%;
aspect-ratio: 1/1;
}
.we-help .help-bx .text h5 {
color: #fff;
margin-bottom: 24px;
}
.we-help .help-bx .text p {
color: #fff;
margin-bottom: 0;
max-width: 348px;
}
.we-help .help-bx .abs {
position: absolute;
inset: 0;
}
.locationbx-outer {
padding: clamp(3.125rem, 9.549vw - 1.458rem, 10rem) 0 10px;
}
.locationbx-outer .row {
gap: 1.875rem 0;
}
.locationbx-outer .locationbx {
padding: 4rem 1.5rem 2rem 1.5rem;
border-radius: 24px;
background: #fff;
box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.12);
margin-top: 2.5625rem;
}
.locationbx-outer .locationbx .orange-circle-icon {
display: flex;
width: 5rem;
height: 5rem;
justify-content: center;
align-items: center;
gap: 0.625rem;
aspect-ratio: 1/1;
border-radius: 6.25rem;
background: var(--brand-primary, #fc9611);
box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.12);
margin: -6.5625rem auto 1.4688rem;
}
.locationbx-outer .locationbx .orange-circle-icon img {
width: 3rem;
height: 3rem;
flex-shrink: 0;
aspect-ratio: 1/1;
}
.locationbx-outer .locationbx h5 {
color: #fc9611;
text-align: center;
font-size: 20px;
font-weight: 600;
margin-bottom: 16px;
}
.locationbx-outer .locationbx p {
color: #0a0b0d;
text-align: center;
font-weight: 500;
line-height: 30px; /* 187.5% */
margin-bottom: 24px;
}
.locationbx-outer .locationbx a {
color: #fc9611;
display: flex;
gap: 0.625rem;
justify-content: center;
}
.locationbx-outer .locationbx a img {
width: 1.1875rem;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
section.digital-transformation {
padding: 1.4375rem 0 clamp(3.125rem, 6.076vw + 0.208rem, 7.5rem);
text-align: center;
}
section.digital-transformation .subheading {
margin-bottom: 1.5625rem;
}
section.digital-transformation h2 {
margin: 0 0 1.5rem;
}
section.digital-transformation h4 {
color: #333;
font-style: normal;
font-weight: 400;
margin: 0 auto 2.4375rem;
max-width: 74.375rem;
font-size: 20px;
line-height: 30px;
}
section.last-trends {
padding: clamp(3.125rem, 6.076vw + 0.208rem, 7.5rem) 0;
background: #0a0b0d;
}
section.last-trends h2,
section.last-trends p {
color: #fff;
}
section.last-trends .mb-56 {
margin-bottom: clamp(1.25rem, 3.125vw - 0.25rem, 3.5rem);
}
section.last-trends .subheading + h2 {
width: 100%;
max-width: 28.625rem;
}
section.last-trends .adjust_txt_rig {
max-width: 36.875rem;
width: 100%;
margin-left: auto;
}
section.last-trends .grids-latest-bx {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
section.last-trends .grids-latest-bx .col-grid:nth-child(1) .latest-item::before {
background: #333;
}
section.last-trends .grids-latest-bx .col-grid:nth-child(2) .latest-item::before {
background: #3e3e3e;
}
section.last-trends .grids-latest-bx .col-grid:nth-child(3) .latest-item::before {
background: #424242;
}
section.last-trends .grids-latest-bx .col-grid:nth-child(4) .latest-item::before {
background: #474747;
}
section.last-trends .grids-latest-bx .col-grid .latest-item {
width: 100%;
height: 100%;
position: relative;
height: 22.5rem;
z-index: 1;
overflow: hidden;
}
section.last-trends .grids-latest-bx .col-grid .latest-item > a {
position: absolute;
inset: 0;
z-index: 1;
}
section.last-trends .grids-latest-bx .col-grid .latest-item::before {
content: " ";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
transition: all 0.3s ease-in-out;
}
section.last-trends .grids-latest-bx .col-grid .latest-item > img {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
z-index: -2;
}
section.last-trends .grids-latest-bx .col-grid .latest-item .latest_dts {
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-end;
padding: 1.875rem 2.9813rem 4rem 1.875rem;
}
section.last-trends .grids-latest-bx .col-grid .latest-item .latest_dts .latest-icon {
width: 48px;
height: 48px;
aspect-ratio: 1/1;
margin: 0 0 1.25rem;
}
section.last-trends .grids-latest-bx .col-grid .latest-item .latest_dts .latest-icon img {
width: 100%;
height: 100%;
aspect-ratio: 1/1;
}
section.last-trends .grids-latest-bx .col-grid .latest-item .latest_dts h5 {
color: #fff;
font-size: 1.25rem;
line-height: 1.625rem; /* 130% */
margin: 0 0 0.625rem;
}
section.last-trends .grids-latest-bx .col-grid .latest-item .latest_dts p {
margin: 0 0 -4.45rem;
padding: 0;
transition: all 0.3s ease-in-out;
opacity: 0;
height: 4.125rem;
}
section.last-trends .grids-latest-bx .col-grid .latest-item:hover::before {
opacity: 0.8;
}
section.last-trends .grids-latest-bx .col-grid .latest-item:hover .latest_dts p {
opacity: 1;
margin: 0 0 0rem;
}
section.key-challenges {
background: #f7f8fa;
padding: clamp(3.125rem, 2.604vw + 1.875rem, 5rem) 0;
text-align: center;
position: relative;
z-index: 1;
}
section.key-challenges .headingTxt {
width: 100%;
}
section.key-challenges .headingTxt .subheading {
margin: 0 0 1.6875rem;
}
section.key-challenges .headingTxt h2 {
margin: 0 0 1rem;
}
section.key-challenges .headingTxt p {
max-width: 50.625rem;
width: 100%;
margin: auto;
}
section.key-challenges .circle-video-mask {
display: flex;
width: 30.3125rem;
height: 30.3125rem;
justify-content: center;
align-items: center;
border: 10px solid #f7f8fa;
background: linear-gradient(180deg, #f7f8fa 26.22%, rgba(247, 248, 250, 0.81) 47.81%, rgba(247, 248, 250, 0) 98.18%);
position: relative;
z-index: 1;
margin: -120px auto 0;
z-index: -2;
clip-path: circle(50%);
margin-bottom: -7.25rem;
}
section.key-challenges .circle-video-mask::before {
content: " ";
position: absolute;
inset: 0;
background: linear-gradient(180deg, #f7f8fa 26.22%, rgba(247, 248, 250, 0.81) 47.81%, rgba(247, 248, 250, 0) 98.18%);
width: 100%;
height: 100%;
z-index: 1;
}
section.key-challenges .circle-video-mask video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
}
section.key-challenges .circle-video-mask .logo-mid {
position: absolute;
width: 6.625rem;
height: 7.25rem;
inset: 0;
z-index: 1;
margin: auto;
}
section.key-challenges .circle-video-mask .logo-mid img {
width: 100%;
aspect-ratio: 53/58;
}
section.key-challenges .key-chall-items {
border-radius: 1.5rem;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 20.19%, #fff 60.1%);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
padding: 2.5rem;
text-align: center;
z-index: -1;
position: relative;
height: 100%;
}
section.key-challenges .key-chall-items .key-circle {
display: flex;
width: 6.5rem;
height: 6.5rem;
padding: 1.5878rem 1.4389rem;
justify-content: center;
align-items: center;
gap: 0.3969rem;
border-radius: 3.1756rem;
background: #fc9611;
box-shadow: 0 12.702px 18.26px 0 rgba(0, 0, 0, 0.12);
margin: 0 auto 2rem;
}
section.key-challenges .key-chall-items h5 {
color: #000;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.625rem; /* 130% */
margin: 0 0 0.625rem;
}
section.key-challenges .key-chall-items p {
line-height: 1.375rem;
}
section.solutionBx {
padding: clamp(3.125rem, 6.076vw + 0.208rem, 7.5rem) 0;
}
section.solutionBx .headingTxt {
text-align: center;
margin: 0 0 2.5rem;
}
section.solutionBx .accordion-solution {
display: flex;
width: 100%;
overflow: hidden;
max-height: 37.5rem;
border-radius: 24px;
background: var(--neutral-100, #f7f8fa);
}
section.solutionBx .accordion-solution .each-solution {
display: flex;
position: relative;
flex: 0 0 126px;
overflow: hidden;
transition: flex 0.4s ease;
}
section.solutionBx .accordion-solution .each-solution .solution-header {
width: 126px;
height: 100%;
writing-mode: vertical-rl;
display: flex;
justify-content: space-between;
align-items: center;
transition: opacity 0.3s ease;
position: absolute;
left: 0;
top: 0;
z-index: 1;
cursor: pointer;
border-right: 1px solid var(--neutral-100, #f7f8fa);
background: var(--neutral-200, #e9ebee);
padding: 30px;
}
section.solutionBx .accordion-solution .each-solution .solution-header h2 {
color: #0a0b0d;
font-size: 1.75rem;
font-style: normal;
font-weight: 600;
line-height: 2rem; /* 114.286% */
}
section.solutionBx .accordion-solution .each-solution .solution-header .arrow-icon-left {
width: 3rem;
height: 3rem;
aspect-ratio: 1/1;
}
section.solutionBx .accordion-solution .each-solution .solution-body-dts {
display: flex;
flex: 1 0 0;
opacity: 0;
transition: opacity 0.3s ease;
}
section.solutionBx .accordion-solution .each-solution .solution-body-dts .gp_cont {
display: flex;
}
section.solutionBx .accordion-solution .each-solution .solution-body-dts .gp_cont .solution-fm {
width: 28rem;
height: 100%;
border-radius: 1.5rem;
overflow: hidden;
}
section.solutionBx .accordion-solution .each-solution .solution-body-dts .gp_cont .solution-fm img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
section.solutionBx .accordion-solution .each-solution .solution-body-dts .gp_cont .solution-details {
width: calc(100% - 28rem);
padding: 1.875rem 2.5rem;
}
section.solutionBx .accordion-solution .each-solution .solution-body-dts .gp_cont .solution-details h3 {
color: #0a0b0d;
font-size: 1.75rem;
font-weight: 600;
line-height: 2rem; /* 114.286% */
margin: 0 0 1.5rem;
}
section.solutionBx .accordion-solution .each-solution.activeOpen {
flex: 1 0 0;
}
section.solutionBx .accordion-solution .each-solution.activeOpen .solution-header {
opacity: 0;
pointer-events: none;
}
section.solutionBx .accordion-solution .each-solution.activeOpen .solution-body-dts {
opacity: 1;
}
section.data-security {
padding: clamp(3.125rem, 2.604vw + 1.875rem, 5rem) 0;
position: relative;
z-index: 1;
}
section.data-security::before {
content: " ";
inset: 0;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(270deg, #000 29.82%, rgba(0, 0, 0, 0) 64.54%);
z-index: -1;
}
section.data-security .headingTxt h2 {
margin: 0 0 1.875rem;
}
section.data-security .vid-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -2;
-o-object-position: left center;
object-position: left center;
}
section.data-security .vid-bg video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
section.data-security h2,
section.data-security h5 {
color: #fff;
}
section.data-security h5 {
font-family: "DM Sans";
font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: 38px; /* 135.714% */
margin: 0 0 2.3125rem;
}
section.data-security ul.arrow-icon {
list-style: none;
margin: 0;
padding: 0;
color: #fff;
color: #fff;
font-family: "DM Sans";
font-size: 1.125rem;
font-style: normal;
font-weight: 400;
line-height: 2.625rem; /* 233.333% */
margin: 0 0 2.3125rem;
}
section.data-security ul.arrow-icon li {
padding-left: 2.5rem;
position: relative;
}
section.data-security ul.arrow-icon li::before {
content: " ";
position: absolute;
width: 24px;
height: 24px;
left: 0;
top: 0.5625rem;
background: url(../images/circle-with-arrows.png);
background-size: contain;
}
section.data-security .button-two {
display: flex;
gap: 1.5rem;
}
section.insightSec {
padding: 3.125rem 0 0;
text-align: center;
/* CUSTOM PAGINATION */
}
section.insightSec .headingTxt {
width: 100%;
max-width: 48.375rem;
margin: 0 auto 2.5rem;
}
section.insightSec .ins-item {
width: 100%;
}
section.insightSec .ins-item .ins-fm {
width: 100%;
border-radius: 16px;
overflow: hidden;
height: 14rem;
margin: 0 0 1rem;
}
section.insightSec .ins-item .ins-fm img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
section.insightSec .ins-item .ins-dt {
text-align: left;
}
section.insightSec .ins-item .ins-dt h3 {
overflow: hidden;
color: #000;
text-overflow: ellipsis;
font-family: Poppins;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 133.333% */
text-transform: capitalize;
margin: 0 0 0.5rem;
}
section.insightSec .ins-item .ins-dt h3 a {
color: inherit;
font-size: inherit;
line-height: inherit;
position: relative;
padding-left: 0;
transition: all 0.3s ease-in-out;
}
section.insightSec .ins-item .ins-dt h3 a::before {
content: " ";
position: absolute;
width: 12px;
height: 12px;
aspect-ratio: 1/1;
background: #fc9611;
display: inline-block;
border-radius: 50px;
top: 0.6875rem;
margin-right: 10px;
left: 0;
opacity: 0;
transition: all 0.3s ease-in-out;
}
section.insightSec .ins-item .ins-dt p {
color: #000;
font-family: Poppins;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem; /* 150% */
text-transform: capitalize;
}
section.insightSec .ins-item:hover .ins-fm img {
transform: scale(1.2) rotate(0deg) translate(0px, 0px) skewX(0deg);
}
section.insightSec .ins-item:hover .ins-dt h3 {
color: #fc9611;
}
section.insightSec .ins-item:hover .ins-dt h3 a {
padding-left: 25px;
}
section.insightSec .ins-item:hover .ins-dt h3 a::before {
opacity: 1;
}
section.insightSec .ins-item:hover .ins-dt p {
color: #000;
font-family: Poppins;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem; /* 150% */
text-transform: capitalize;
}
section.insightSec .swiper_custom_pagination {
margin-top: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
section.insightSec .swiper_custom_pagination .swiper-pagination-bullet {
border-radius: 20px;
width: 15px;
height: 15px;
background-color: #b2b2b2;
opacity: 1;
border-radius: 50%;
transition: all 0.3s ease;
outline: none;
}
section.insightSec .swiper_custom_pagination .swiper-pagination-bullet-active {
background-color: #fc9611;
}
.blog-details-sec h4 {
color: #000;
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: 1.75rem; /* 116.667% */
text-transform: capitalize;
margin: 0 0 1rem;
}
.blog-details-sec .post-detail.adjust-columns {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 0;
border: none;
}
.blog-details-sec .post-detail.adjust-columns h5 {
font-size: clamp(1.125rem, 0.174vw + 1.042rem, 1.25rem);
color: #0a0b0d;
font-style: normal;
font-weight: 500;
line-height: normal;
margin: 0 0 1.25rem;
}
.blog-details-sec .post-detail.adjust-columns .box-scroll-list {
display: flex;
height: 20.75rem;
padding-bottom: 1.25rem;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
overflow: auto;
border-bottom: 1px solid #c2c2c2;
margin-bottom: 1.5rem;
/* width */
/* Track */
/* Handle */
/* Handle on hover */
}
.blog-details-sec .post-detail.adjust-columns .box-scroll-list::-webkit-scrollbar {
width: 10px;
}
.blog-details-sec .post-detail.adjust-columns .box-scroll-list::-webkit-scrollbar-track {
background: #f1f1f1;
}
.blog-details-sec .post-detail.adjust-columns .box-scroll-list::-webkit-scrollbar-thumb {
border-radius: 38px;
background: #cdcdcd;
}
.blog-details-sec .post-detail.adjust-columns .box-scroll-list::-webkit-scrollbar-thumb:hover {
background: #555;
}
.blog-details-sec .post-detail.adjust-columns .box-scroll-list ol {
margin: 0;
padding: 0;
counter-reset: section;
}
.blog-details-sec .post-detail.adjust-columns .box-scroll-list ol li {
list-style: none;
color: #3267bd;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 10px;
}
.blog-details-sec .post-detail.adjust-columns .box-scroll-list ol li:before {
counter-increment: section;
content: counter(section) ".";
}
.blog-details-sec .post-detail.adjust-columns .box-scroll-list ol li:last-child {
list-style: none;
}
.blog-details-sec .post-detail.adjust-columns .box-scroll-list ol li a {
display: inline-block;
}
.blog-details-sec .post-detail.adjust-columns .box-scroll-list ol li + li {
margin-top: 1.125rem;
}
.blog-details-sec .post-detail.adjust-columns .share-post {
gap: 0.5rem;
}
.blog-details-sec .post-detail.adjust-columns .share-post h3 {
color: #000;
font-family: Poppins;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem; /* 150% */
}
.blog-details-sec .post-detail.adjust-columns .share-post .flex-wraper {
flex-wrap: wrap;
}
.blog-details-sec .post-detail.adjust-columns .share-post .flex-wraper ul.social-icon {
gap: 5px;
}
.blog-details-sec .post-detail.adjust-columns .share-post .flex-wraper ul.social-icon li {
border: 1px solid #fc9611;
background: rgba(252, 150, 17, 0.1294117647);
}
.blog-details-sec .post-detail.adjust-columns .share-post .flex-wraper ul.social-icon li a i {
color: #fc9611;
}
.blog-details-sec .gp-txt-each + .gp-txt-each {
margin-top: 5rem;
}
.blog-details-sec .gp-txt-each .blg-dt-fm {
border-radius: 12px;
background: #f3f3f3;
overflow: hidden;
margin: 0 0 0.4375rem;
}
.blog-details-sec .gp-txt-each .blg-dt-fm img {
width: 100%;
height: 100%;
}
.blog-details-sec .gp-txt-each .blg-dt-photo-txt {
text-align: center;
}
.blog-details-sec .gp-txt-each .blg-dt-photo-txt p {
text-align: center;
color: #9c9c9c;
font-family: Poppins;
font-size: 14px;
font-style: italic;
font-weight: 400;
line-height: 28px;
}
.blog-details-sec .gp-txt-each .blg-dt-photo-txt p span {
text-decoration: underline;
}
.blog-details-sec .gp-txt-each h5 {
font-size: clamp(1.125rem, 0.174vw + 1.042rem, 1.25rem);
color: #0a0b0d;
font-style: normal;
font-weight: 600;
line-height: normal;
line-height: 28px; /* 140% */
text-transform: capitalize;
margin: 0 0 1.25rem;
}
.blog-details-sec .gp-txt-each .left-border-bx {
padding: 16px;
border-radius: 12px;
border-left: 2px solid #fc9611;
background: #fff;
box-shadow: 3px 4px 4.8px 0 rgba(173, 177, 180, 0.25);
margin: 0 0 1rem;
}
.blog-details-sec .gp-txt-each .left-border-bx ul {
margin: 0;
padding: 0;
}
.blog-details-sec .gp-txt-each .left-border-bx ul li {
margin: 0;
}
.blog-details-sec .let-connect {
display: flex;
flex-direction: column;
border-radius: 24px;
background: #0a0b0d;
box-shadow: 0 2px 25px 0 rgba(169, 155, 155, 0.12);
overflow: hidden;
}
.blog-details-sec .let-connect .let-connect-frame {
width: 100%;
}
.blog-details-sec .let-connect .let-connect-frame img {
width: 100%;
}
.blog-details-sec .let-connect .let-connect-form {
padding: 28px 16px;
}
.blog-details-sec .let-connect .let-connect-form h3 {
color: var(--base-white, #fff);
font-size: clamp(1.25rem, 0.694vw + 0.917rem, 1.75rem);
font-style: normal;
font-weight: 700;
line-height: clamp(2.375rem, 0.868vw + 1.958rem, 3rem); /* 171.429% */
text-transform: capitalize;
}
.blog-details-sec .let-connect .let-connect-form h3 span {
color: #fc9611;
}
.blog-details-sec .let-connect .let-connect-form .forminner label {
color: #fff;
margin: 0 0 0.25rem;
}
.blog-details-sec .let-connect .let-connect-form .forminner input:not([type=radio]):not([type=checkbox]):not([type=submit]),
.blog-details-sec .let-connect .let-connect-form .forminner textarea,
.blog-details-sec .let-connect .let-connect-form .forminner select {
border-radius: 6px;
border: 1px solid #fc9611;
background: var(--neutral-100, #f7f8fa);
}
.blog-details-sec .let-connect .let-connect-form .forminner .number-tel {
margin-bottom: 14px !important;
}
.blog-details-sec .let-connect .let-connect-form .forminner input[type=submit] {
display: inline-flex;
align-items: center;
gap: 17px;
border-radius: 100px;
padding: 15px 32px;
background-color: #fc9611;
color: #000;
text-align: center;
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px;
display: inline-block;
border: 1px solid #fc9611;
width: auto;
}
.author {
width: 100%;
}
.o-sample-author {
display: flex;
padding: 30px 0;
border: 1px solid #e9ebee;
border-left: 0;
border-right: 0;
margin-top: 35px;
flex-direction: column;
}
.o-sample-author .sample-author-img-wrapper {
position: relative;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.o-sample-author .sample-author-img-wrapper .sample-author-img {
width: 50px;
height: 50px;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 50%;
overflow: hidden;
flex: 1 0 50px;
max-width: 50px;
}
.o-sample-author .sample-author-img-wrapper .sample-author-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.o-sample-author .sample-author-img-wrapper .text h4 {
color: #000;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 1.15rem;
text-transform: capitalize;
margin: 0 0 1rem;
}
.o-sample-author .sample-author-img-wrapper .text h4 span {
font-size: 14px;
font-weight: 400;
display: block;
margin-top: 5px;
}
.o-sample-author .sample-author-img-wrapper ul {
display: flex;
justify-content: flex-start;
gap: 10px;
margin-bottom: 20px;
}
.o-sample-author .sample-author-img-wrapper ul li a {
border-radius: 50px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff1e0;
border: 1px solid #fc9611;
color: #fc9611;
font-size: 14px;
}
.o-sample-author .sample-author-details .sub-heading-h4 {
font-size: 19px;
color: #000;
}
.wraper-box-outer {
position: relative;
}
.readingrow {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px 20px 20px;
}
.readingrow ul {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.readingrow ul li {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
font-size: 16px;
font-weight: 600;
color: white;
}
.readingrow ul li img {
width: 40px;
height: 40px;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
border-radius: 50px;
}
.banner-right-img.mxw382 img {
max-width: 382px;
margin: 0 auto;
}
.virtual-form {
padding: 0 0 clamp(3.75rem, 1.458rem + 4.774vw, 7.188rem) 0;
}
.virtual-form .virtual-form-container {
position: relative;
height: 1400px;
overflow: hidden;
}
.virtual-form .virtual-form-container::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 150px;
background-color: white;
z-index: 1;
}
.virtual-form .virtual-form-container::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 150px;
background-color: white;
z-index: 1;
}
.virtual-form .virtual-form-container iframe {
position: absolute;
top: -270px;
left: 0;
width: 100%;
height: calc(100% + 300px);
border: 0;
}
.lets-connect.contact-pg .connect-row .connect-form .cn-top .forminner .inputrow .flag-container .selected-flag {
background: #f1f1f1;
color: rgba(0, 0, 0, 0.2901960784);
}
.cmn_supt {
padding: 60px 0;
}
.cmn_supt p {
color: #6c7278;
font-size: 16px;
line-height: 1.7;
margin-bottom: 18px;
}
.cmn_supt p strong {
color: #0a0b0d;
font-weight: 600;
}
.cmn_supt p br {
display: block;
content: "";
margin-top: 6px;
}
.cmn_supt h2,
.cmn_supt h3,
.cmn_supt h4,
.cmn_supt h5,
.cmn_supt h6 {
color: #090909;
font-weight: 600;
margin-top: 35px;
margin-bottom: 12px;
line-height: 1.3;
}
.cmn_supt h2 {
font-size: 28px;
border-bottom: 2px solid #e9ebee;
padding-bottom: 10px;
}
.cmn_supt h3 {
font-size: 24px;
}
.cmn_supt h4 {
font-size: 20px;
color: #fc9611;
}
.cmn_supt h5 {
font-size: 18px;
}
.cmn_supt h6 {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cmn_supt ul,
.cmn_supt ol {
margin: 15px 0 25px;
padding-left: 22px;
}
.cmn_supt ul li,
.cmn_supt ol li {
color: #6c7278;
font-size: 15px;
line-height: 1.6;
margin-bottom: 10px;
}
.cmn_supt ul li strong,
.cmn_supt ol li strong {
color: #0a0b0d;
font-weight: 600;
}
.cmn_supt ul {
list-style-type: disc;
}
.cmn_supt ol {
list-style-type: decimal;
}
.cmn_supt a {
color: #fc9611;
text-decoration: none;
transition: color 0.3s ease;
}
.cmn_supt a:hover {
color: #0a0b0d;
}
/* Responsive tweaks */
@media (max-width: 767px) {
.cmn_supt {
padding: 40px 0;
}
.cmn_supt h2 {
font-size: 24px;
}
.cmn_supt h3 {
font-size: 21px;
}
.cmn_supt h4 {
font-size: 18px;
}
.cmn_supt p,
.cmn_supt li {
font-size: 15px;
}
}
.not_found {
display: flex;
align-items: center;
background-color: #f3f3f3;
text-align: center;
padding: 60px 15px;
}
.not_found .container {
max-width: 850px;
background-color: white;
padding: 40px 20px;
border-radius: 15px;
margin-top: 100px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 58px 16px 0 rgba(224, 220, 220, 0), 0 37px 15px 0 rgba(224, 220, 220, 0.01), 0 21px 13px 0 rgba(224, 220, 220, 0.05), 0 9px 9px 0 rgba(224, 220, 220, 0.09), 0 2px 5px 0 rgba(224, 220, 220, 0.1);
}
@media screen and (max-width: 1399px) {
.not_found .container {
margin-top: 65px;
}
}
@media screen and (max-width: 1199px) {
.not_found .container {
margin-top: 90px;
}
}
@media screen and (max-width: 991px) {
.not_found .container {
margin-top: 80px;
}
}
.not_found .error_code {
display: block;
font-size: 120px;
font-weight: 800;
line-height: 1;
color: #fc9611;
margin-bottom: 10px;
}
.not_found h1 {
font-size: 36px;
font-weight: 700;
color: #0a0b0d;
margin-bottom: 15px;
}
.not_found p {
font-size: 16px;
color: #6c7278;
line-height: 1.7;
margin-bottom: 15px;
}
.not_found p strong {
color: #090909;
font-weight: 600;
}
.not_found ul {
list-style: none;
padding: 0;
margin: 25px 0 35px;
}
.not_found ul li {
font-size: 15px;
color: #6c7278;
margin-bottom: 10px;
position: relative;
padding-left: 18px;
}
.not_found ul li::before {
content: "";
width: 6px;
height: 6px;
background-color: #fc9611;
border-radius: 50%;
position: absolute;
left: auto;
top: 11px;
margin: 0 0 0 -19px;
}
.not_found .btn {
display: inline-block;
background-color: #fc9611;
color: #fff;
font-size: 15px;
font-weight: 600;
padding: 14px 28px;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.not_found .btn:hover {
background-color: #0a0b0d;
transform: translateY(-2px);
}
/* Responsive */
@media (max-width: 767px) {
.not_found {
padding: 40px 15px;
}
.not_found .error_code {
font-size: 80px;
}
.not_found h1 {
font-size: 28px;
}
.not_found p {
font-size: 15px;
}
}
/* ===============================
POPUP OVERLAY
================================ */
.fm-popup-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
z-index: 99999;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 1.25rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.35s ease;
overflow: auto;
}
.fm-popup-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: all;
}
/* ===============================
POPUP CONTAINER
================================ */
.fm-popup {
width: 100%;
max-width: 1100px;
border-radius: 18px;
position: relative;
overflow: hidden;
animation: popupScale 0.35s ease;
}
@keyframes popupScale {
from {
transform: scale(0.95);
}
to {
transform: scale(1);
}
}
/* Close Button */
.fm-popup-close {
position: absolute;
top: 18px;
right: 18px;
background: #fff;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 22px;
cursor: pointer;
z-index: 10;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
/* ===============================
INNER LAYOUT
================================ */
.fm-popup-inner {
display: flex;
/* min-height: 540px; */
border-radius: 1.125rem;
overflow: hidden;
background: #fff;
}
/* ===============================
LEFT PANEL
================================ */
.fm-popup-left {
width: 45%;
background-color: #ffb703;
padding: 25px 42px;
color: #000;
position: relative;
background-image: url("../images/dots_bg1.png"), url("../images/dots_bg2.png");
background-repeat: no-repeat, no-repeat;
background-position: left 30px top 152px, right 30px bottom 80px;
background-size: 9.375rem, 9.375rem;
}
.fm-popup-left h3 {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
}
.fm-popup-left p {
font-size: 15px;
line-height: 1.6;
margin-bottom: 30px;
color: #000;
font-family: Poppins;
font-size: 1.125rem;
font-style: normal;
font-weight: 500;
line-height: 1.625rem; /* 144.444% */
}
/* Testimonial Card */
.fm-testimonial-card {
background: #fff;
border-radius: 16px;
padding: 26px;
}
.fm-testimonial-header {
display: flex;
align-items: center;
gap: 12px;
}
.fm-testimonial-header img {
width: 46px;
height: 46px;
border-radius: 50%;
}
.fm-testimonial-header h5 {
font-size: 15px;
margin: 0;
line-height: normal;
}
.fm-testimonial-header span {
font-size: 12px;
color: #777;
}
.fm-rating {
margin-left: auto;
color: #ff9800;
font-size: 1.625rem;
}
.fm-testimonial-text {
font-size: 14px;
line-height: 1.6;
margin: 18px 0;
}
.fm-testimonial-text p {
color: #424344;
font-family: "DM Sans";
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem; /* 150% */
}
.fm-testimonial-logo {
width: 3.9375rem;
height: auto;
margin: auto;
}
.fm-testimonial-logo img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.fm-testimonial-slider {
position: relative;
}
.fm-testimonial-slider .swiper-slide {
height: auto;
}
.testimonal-group {
position: relative;
padding: 2.25rem 0.9375rem 0;
}
.testimonal-group .swiper-button-prev,
.testimonal-group .swiper-button-next {
width: 34px;
height: 34px;
border-radius: 50%;
background: #f3f3f3;
color: #000;
border-radius: 19.5px;
background: #ffeed4;
}
.testimonal-group .swiper-button-prev::after,
.testimonal-group .swiper-button-next::after {
font-size: 14px;
font-weight: bold;
}
.testimonal-group .swiper-button-prev {
left: 0;
}
.testimonal-group .swiper-button-next {
right: 0;
}
/* ===============================
RIGHT PANEL
================================ */
.fm-popup-right {
width: 55%;
padding: 25px 42px;
}
.fm-popup-right h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 26px;
}
/* ===============================
FORM
================================ */
.fm-popup-form .form-group {
margin-bottom: 1rem;
}
.fm-popup-form .form-group label {
display: block;
font-size: 0.8125rem;
margin-bottom: 0.375rem;
}
.fm-popup-form .form-group input,
.fm-popup-form .form-group select,
.fm-popup-form .form-group textarea {
width: 100%;
padding: 0.5625rem 0.875rem;
border-radius: 0.5rem;
border: 1px solid #ddd;
font-size: 0.6875rem;
margin: 0;
}
.fm-popup-form .form-group input:focus,
.fm-popup-form .form-group select:focus,
.fm-popup-form .form-group textarea:focus {
outline: none;
border-color: #ff9800;
}
.fm-popup-form .form-group textarea {
min-height: 5.1875rem;
resize: vertical;
}
.fm-popup-form .form-row {
display: flex;
gap: 16px;
}
.fm-popup-form .form-row .form-group {
flex: 1;
}
.fm-popup-form .form-row .form-group.file-upload-group {
flex: 1;
display: flex;
gap: 1rem;
align-items: flex-end;
}
.fm-popup-form .form-row .form-group.file-upload-group .group-column {
width: 100%;
}
/* Upload Button */
.btn-upload {
width: 100%;
padding: 0.58rem 0.75rem;
background: #ff9800;
border: none;
border-radius: 8px;
cursor: pointer;
color: #000;
font-family: Poppins;
font-size: 0.6875rem;
font-style: normal;
font-weight: 500;
line-height: 1.125rem; /* 163.636% */
}
/* Notes */
.fm-popup-notes {
margin: 0 0 15px;
padding-left: 14px;
list-style: disc;
}
.fm-popup-notes li {
margin-bottom: 0;
color: #000;
font-family: "DM Sans";
font-size: 0.75rem;
font-style: normal;
font-weight: 400;
line-height: 1.25rem;
}
/* Submit */
.submit-form {
position: relative;
overflow: hidden;
}
.submit-form input[type=submit] {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
opacity: 0;
}
.submit-form p {
margin: 0;
padding: 0;
}
/* ===============================
FOOTER
================================ */
.fm-popup-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6875rem 2.625rem;
border-top: 1px solid #eee;
background: #fff;
border-radius: 15px;
}
.fm-stats {
display: flex;
gap: 32px;
width: 35%;
border-right: 1px solid #ccc;
padding-right: 1.125rem;
}
.fm-stats strong {
display: block;
font-size: 1.125rem;
color: #fc9611;
font-family: Poppins;
font-size: 1.25rem;
font-style: normal;
font-weight: 600;
line-height: 2rem;
}
.fm-stats p {
color: #000;
font-family: "DM Sans";
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 128.571% */
}
.fm-partners {
display: flex;
flex: 1;
justify-content: flex-end;
gap: 40px;
flex-wrap: wrap;
}
.fm-partners img {
height: auto;
width: 170px;
-o-object-fit: contain;
object-fit: contain;
}
/* ===============================
RESPONSIVE
================================ */
@media (max-width: 1299px) {
.fm-popup-overlay {
align-content: flex-start;
overflow: auto;
padding: 30px;
}
}
@media (max-width: 991px) {
.fm-popup-inner {
flex-direction: column;
}
.fm-popup-left,
.fm-popup-right {
width: 100%;
}
.fm-popup-overlay {
overflow: auto;
align-items: flex-start;
padding: 30px;
}
}
@media (max-width: 575px) {
.fm-popup-left .fm-popup-left {
text-align: center;
padding: 1.25rem 1.875rem;
}
.fm-popup-left h3 {
font-size: 22px;
}
.testimonal-group {
padding-top: 0;
}
.fm-popup-right {
padding: 1.875rem 1.25rem;
text-align: center;
}
.fm-popup-right h3 {
font-size: 20px;
}
.fm-popup-footer {
flex-direction: column;
gap: 15px;
align-items: flex-start;
padding: 0.6875rem 1.325rem;
}
.fm-popup-footer .fm-stats {
border-right: none;
padding-right: 0;
text-align: center;
}
.fm-popup-footer .fm-stats p {
margin-bottom: 0;
padding: 0;
}
.fm-popup-footer .fm-partners {
justify-content: flex-start;
gap: 1rem;
justify-content: center;
align-items: center;
width: 100%;
}
.fm-popup-footer .fm-partners img {
height: 1.625rem;
width: auto;
}
.fm-rating {
margin-left: 0;
}
.fm-testimonial-header {
display: flex;
align-items: center;
gap: 0;
flex-direction: column;
}
.fm-stats {
width: 100%;
}
.fm-popup-form .form-group label {
text-align: left;
}
}/*# sourceMappingURL=style.css.map */