* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
@font-face {
font-family: "Dry Brush";
src: url("../css/dry_brush/Dry\ Brush.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
body {
color: var(--light-blue);
font-size: 1.025rem;
line-height: 1.6;
}
[data-aos^="fade"][data-aos^="fade"].aos-animate {
opacity: 1 !important;
transform: translateZ(0) !important;
}
html {
scroll-behavior: smooth;
}
@font-face {
font-family: DM Sans;
src: url("../fonts/DMSans.ttf") format("truetype");
}
@font-face {
font-family: DM Sans Bold;
src: url("../fonts/DMSans-Bold.ttf") format("truetype");
}
@font-face {
font-family: vikendi;
src: url("../fonts/Vikendi-FreePersonalUsed.woff2") format("truetype");
}
:root {
--primary: #010a44;
--white: #ffffff;
--secondary: #f1400512;
--orange: #fe4a23;
--light-orange: #fe4a231a;
--secondary-orange: #f14105fa;
--black: #111013fc;
--gray: #abb8c3;
--transparent: #9690a214;
--granite-gray: #635d6f;
--deep-amethyst: #9690a240;
--light-pink: #f140050a;
--cetacean-blue: #010a44b3;
--light-blue: #010a44cc;
--secondary-white: #ffffffd9;
--lighter-white: #ffffffa6;
--lightgray: #8888884d;
--secondary-black: #201e24;
--quartz: #4a4653;
--selected: #dc28281a;
--lighter-gary: #9690a226;
--secondary-gray: #9690a259;
--dark-gray: #82838c;
--oslo-grey: #9690a2;
--space-cadet: #161d53;
--alienator_grey: #302d35;
--oxford-blue: #0e164e;
--anthracite: #29272e;
--csitron: #9690a20f;
--light-black: #161519;
--sub-dark-gray: #ffffffbf;
}
[data-theme="dark"] {
--primary: #ffffff;
--secondary: #161519;
--dark-primary: #010a44;
--dark-color: #1f2937;
---dark-color: #000;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "DM Sans Bold", sans-serif;
font-weight: 700;
margin: 0;
color: var(--primary);
}
h1 {
letter-spacing: -0.045em;
line-height: 1;
font-size: -webkit-calc(3rem + 1.5 * ((100vw - 576px) / 864));
font-size: calc(3rem + 1.5 * ((100vw - 576px) / 864));
color: var(--primary);
font-weight: 700;
}
h2 {
letter-spacing: -0.04em;
line-height: 1.05;
font-size: -webkit-calc(2.35rem + 0.9 * ((100vw - 576px) / 864));
font-size: calc(2.35rem + 0.9 * ((100vw - 576px) / 864));
}
h3 {
letter-spacing: -0.035em;
line-height: 1.15;
font-size: -webkit-calc(2rem + 0.25 * ((100vw - 576px) / 864));
font-size: calc(2rem + 0.25 * ((100vw - 576px) / 864));
}
h4 {
letter-spacing: -0.03em;
line-height: 1.2;
font-size: -webkit-calc(1.5rem + 0.25 * ((100vw - 576px) / 864));
font-size: calc(1.5rem + 0.25 * ((100vw - 576px) / 864));
}
h5 {
letter-spacing: -0.025em;
line-height: 1.25;
font-size: -webkit-calc(1.25rem + 0 * ((100vw - 576px) / 864));
font-size: calc(1.25rem + 0 * ((100vw - 576px) / 864));
}
h6 {
font-size: 1em;
letter-spacing: -0.02em;
line-height: 1.35;
}
p {
margin: 0;
}
a {
text-decoration: none;
background-repeat: no-repeat;
background-size: 100% 0.2em;
background-position: 0 110%;
}
a:hover {
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
animation: 0.4s cubic-bezier(0.58, 0.3, 0.005, 1) 0s 1 normal none running
links;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
::-moz-selection {
background: var(--selected);
}
::selection {
background: var(--selected);
}
.container {
max-width: 1300px !important;
margin: 0 auto !important;
padding: 0 1.25rem !important;
}
.default-button {
background: var(--primary);
color: var(--white);
padding: 0 1.15rem;
font-size: 0.95em;
min-height: 3rem;
font-weight: 700;
cursor: pointer;
line-height: 1.5rem;
letter-spacing: -0.01em;
display: inline-flex;
vertical-align: middle;
justify-content: center;
align-items: center;
border-radius: 0.35rem;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
border: 2px solid transparent;
font-family: "DM Sans Bold", sans-serif;
}
.default-button:hover {
background: var(--orange);
color: var(--white);
}
.small-btn {
font-size: 0.9em;
min-height: 2.125rem;
padding: 0 0.75rem;
}
.orange-btn {
background: var(--orange);
}
.orange-btn:hover {
background: var(--black);
}
.orange-btn svg {
fill: currentColor;
margin-left: 0.5rem;
margin-top: -3px;
}
.orange-btn.small-btn svg {
transform: scale(0.8);
}
button:hover .icon,
.default-button:hover .icon {
animation: iconMove ease-out 0.35s;
}
/* cursor */
.cursor,
.cursor2,
.cursor3 {
position: fixed;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
left: -100px;
top: 50%;
transition: all 0.3s linear;
}
.cursor {
background-color: var(--orange);
z-index: 9999;
height: 6px;
width: 6px;
}
.cursor2,
.cursor3 {
height: 30px;
width: 30px;
z-index: 9998;
transition: all 0.3s ease-out;
}
.cursor2.hover,
.cursor3.hover {
transform: scale(1.4) translateX(-35%) translateY(-35%);
border: none;
background: transparent;
}
.cursor2.hover {
background: rgba(255, 255, 255, 0.3);
}
.ball {
height: 30px;
width: 30px;
cursor: pointer;
display: block;
border-radius: 50%;
border: 1px solid var(--orange);
z-index: 100;
transition: all 0.3s linear;
}
/* header */
/* header {
background: var(--secondary);
}
.headercontainer {
padding-left: 4vh;
padding-right: 4vh;
} */
header.sticky {
position: fixed !important;
top: 0 !important;
width: 100% !important;
background-color: var(--white) !important;
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; */
z-index: 1000 !important;
/* padding: 10px 0 !important; */
}
.sticky .innerheader {
height: 9vh;
}
.menu-btn:hover span {
color: var(--white);
transform: scale3d(1.06, 1.06, 1.06);
}
.menu-btn span {
display: block;
margin: 5px auto;
background: var(--primary);
width: 1.375rem;
height: 2px;
transition: transform cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.menu-btn span:nth-child(2) {
width: 1.1rem;
margin-left: 8px;
}
.menu-btn {
margin-right: 15px;
border-radius: 50%;
width: 56px;
height: 56px;
padding: 19px 10px;
background: var(--transparent);
cursor: pointer;
}
.menu.activemenu {
opacity: 0;
visibility: hidden;
}
.menu {
transition: 0.52s;
z-index: 1111;
position: fixed;
top: 0;
left: 0;
background: var(--primary);
width: 100%;
min-height: 100vh;
/* display: flex;
flex-direction: column;
justify-content: center; */
height: 100%;
overflow-y: scroll;
}
.menu .btn-close-menu,
.video-close-button {
position: fixed;
top: 13px;
left: 4vh;
color: var(--gray);
font-size: 48px;
cursor: pointer;
line-height: 42px;
padding: 0 10px;
text-align: center;
width: fit-content;
min-width: 3.5rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
transition: background-color cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.menu .btn-close-menu:hover,
.video-close-button:hover {
background: var(--transparent);
}
.menu .btn-close-menu svg,
.video-close-button svg {
fill: var(--secondary-white);
transform: rotate(45deg);
}
.menu .btn-close-menu:active,
.video-close-button:active,
.menu .btn-close-menu:focus,
.video-close-button:focus,
.menu-btn:active,
.menu-btn:focus {
background-color: var(--transparent);
box-shadow: inset 0 0 0 0.3125rem rgba(150, 144, 162, 0.15);
}
.menu .links-container {
list-style-type: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
min-height: 100vh;
padding: 0 4rem;
}
.links-container li {
padding: 5px 50px 5px 0;
position: relative;
min-width: 301px;
margin: 5px 0;
line-height: 1;
opacity: 0;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
letter-spacing: 0.08em;
}
.links-container li i {
float: right;
margin-left: 20px;
}
.menu .links-container li a {
width: 100%;
text-decoration: none;
color: var(--white);
position: relative;
font-weight: 700;
font-size: 3.5vh;
}
.menu .links-container a span {
font-family: "DM Sans", sans-serif;
line-height: 1.2;
}
.menu .links-container li:hover .sub-menu li a,
.get-in-touch a {
color: var(--white);
}
.menu .links-container li:hover .sub-menu li {
padding-left: 0px;
}
.menu .links-container li:hover a {
color: var(--gray);
}
.menu .links-container li:hover {
padding-left: 10px;
}
.menu .has-submenu .sub-menu li:hover a,
.menu .has-submenu .sub-menu li .sub-menu li:hover a {
color: var(--gray) !important;
}
.menu .has-submenu .sub-menu li:hover .sub-menu a {
color: var(--white) !important;
}
/* .menu .has-submenu .sub-menu li:hover {
padding-left: 10px !important;
} */
.main-menu {
margin-bottom: 190px;
padding-left: 0;
}
.sub-menu-li {
display: inline-flex;
width: 100%;
align-items: center;
}
.menu .menu-title {
color: var(--white);
font-size: 1em;
opacity: 0.4;
letter-spacing: 10px;
}
.sub-menu {
display: none;
position: absolute;
left: 100%;
width: max-content;
top: 0;
padding-left: 0;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
line-height: 1;
height: 100vh;
padding-top: 8rem;
margin-top: -8rem;
}
li.has-submenu:hover > .sub-menu {
display: block;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.inner-menu .menu-plus svg {
transform: rotate(180deg) !important;
}
.inner-menu:hover .menu-plus svg {
transform: rotate(135deg) !important;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.has-submenu:hover .menu-plus svg {
transform: rotate(135deg);
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.menu-plus svg {
fill: var(--gray);
}
.innerheader {
display: flex;
align-items: center;
justify-content: space-between;
height: 12vh;
}
.logo-sec {
display: flex;
align-items: center;
}
.dark-theme-logo {
display: none;
}
.menu-our-details div {
width: 25%;
}
.menu-our-details p,
.menu-our-details p a {
color: #d6d3dc;
margin-bottom: 0;
font-size: 0.95em;
}
.menu-our-details p b {
color: var(--white);
}
.menu-icon-layout i {
color: var(--white);
font-size: 0.95em;
width: 3rem;
height: 3rem;
border-radius: 100%;
text-align: center;
align-items: center;
display: inline-grid;
}
.menu-icon-layout i:hover {
background: var(--transparent);
transform: scale3d(1.06, 1.06, 1.06);
}
/* Visible class with slide-up animation */
.showed {
animation: slide_up_elements 2s ease forwards;
animation-duration: 0.35s;
}
.main-menu .showed:nth-child(1),
.menu-our-details:nth-child(1) {
animation-delay: 50ms;
}
.main-menu .showed:nth-child(2),
.menu-our-details:nth-child(2) {
animation-delay: 0.1s;
}
.main-menu .showed:nth-child(3),
.menu-our-details:nth-child(3) {
animation-delay: 0.15s;
}
.main-menu .showed:nth-child(4),
.menu-our-details:nth-child(4) {
animation-delay: 0.2s;
}
.main-menu .showed:nth-child(5) {
animation-delay: 0.25s;
}
@media only screen and (max-width: 767px) {
.main-menu {
width: 100%;
margin-top: 28px;
}
.links-container li {
padding: 5px 0px 5px 0;
}
.menu .btn-close-menu {
left: 1vh;
}
.menu .links-container li:hover {
padding-left: 0px;
}
.sub-menu {
left: 4% !important;
height: 100%;
}
.menu .has-submenu .sub-menu li:hover {
padding-left: 0px !important;
}
.inner-menu span,
.span-carrer {
font-size: 16px !important;
}
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
.sub-menu {
position: relative;
left: 10%;
height: 100%;
}
.main-menu {
width: 100%;
/* margin-top: 28px; */
}
.menu .links-container {
justify-content: flex-start;
padding: 3rem 4rem;
}
.links-container li {
padding: 5px 0px 5px 0;
}
.menu .links-container li a {
font-size: 3vh !important;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.menu .links-container {
justify-content: flex-start;
padding: 3rem 4rem;
}
.main-menu {
width: 100%;
/* margin-bottom: 0px; */
}
.sub-menu {
left: 5% !important;
}
.menu .links-container li a {
font-size: 3vh !important;
}
.links-container li {
padding: 5px 0px 5px 0;
}
}
.dropdown-hover:hover > .dropdown-menu {
display: inline-block;
}
.dropdown-hover > .dropdown-toggle:active {
pointer-events: none;
}
.toggle-button {
background: rgba(255, 255, 255, 0.08);
border: 2px solid transparent;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
-webkit-appearance: none;
outline: none;
width: 121px;
height: 29px;
/* background-color: var(--deep-amethyst); */
border-radius: 50px;
position: relative;
transition: 0.4s;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
rgba(0, 0, 0, 0.02) 0px 30px 30px -4px, rgb(0, 0, 0, 0.02) 0px 3px 1px 0px;
}
[data-theme="light"] .toggle-button {
background-color: var(--deep-amethyst);
}
[data-theme="dark"] .toggle-button,
[data-theme="dark"] .scroll-top-glass {
background-color: var(--quartz);
background: rgba(20, 20, 20, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: rgba(1, 10, 68, 0.5) 6px 8px 14px,
rgba(0, 0, 0, 0.6) 10px 14px 20px, rgba(255, 255, 255, 0.04) 2px 3px 3px;
}
.toggle-button:before {
content: "";
position: absolute;
width: 55%;
border-radius: 0.9rem;
top: 0;
bottom: 0;
left: -1px;
transition: 0.4s;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
rgba(0, 0, 0, 0.02) 0px 30px 30px -4px, rgb(0, 0, 0, 0.02) 0px 3px 1px 0px;
}
[data-theme="light"] .toggle-button:before {
background-color: var(--white);
}
.toggle-button:checked {
background-color: var(--deep-amethyst);
}
/* .toggle-button:checked:before{
background-color: var(--quartz);
} */
[data-theme="dark"] .toggle-button:checked:before {
background-color: var(--quartz);
transform: translateX(100%);
transition: 0.4s;
left: -9%;
}
.dark-sec {
position: absolute;
top: 37%;
transform: translateY(-50%);
left: 0;
padding: 0 0.65rem;
display: flex;
align-items: center;
}
.light-sec {
position: absolute;
top: 37%;
transform: translateY(-50%);
right: 0;
padding: 0 1rem;
display: flex;
align-items: center;
}
[data-theme="light"] .moon-svg,
[data-theme="dark"] .sun-svg {
display: none;
}
[data-theme="dark"] .moon-svg {
display: inline;
}
.dark-light-sec {
cursor: pointer;
transform: rotate(-90deg);
}
[data-theme="light"] .sun-svg {
display: block;
}
.dark-light-label {
cursor: pointer;
color: var(--primary);
font-weight: 500;
font-size: 0.85em;
line-height: 1;
}
.dark-light-label svg {
margin-left: 0.2rem;
margin-right: -0.2rem;
}
.left-main-scroll {
position: fixed;
/* left: 1rem; */
z-index: 1001;
display: inline;
top: 25%;
/* left: 0; */
right: -39px;
}
#tracking {
height: 60px;
width: 2px;
background-color: var(--lighter-gary);
transform: rotate(90deg) translateY(45px);
}
.scroll-top-glass {
background: rgba(255, 255, 255, 0.08);
border: 2px solid transparent;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background-color: var(--deep-amethyst);
outline: none;
width: 121px;
height: 29px;
padding: 0 6px;
border-radius: 50px;
position: relative; /* keep relative */
transition: 0.4s;
cursor: pointer;
/* Keep or modify your shadow */
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.2),
rgba(0, 0, 0, 0.08) 0px 0.7px 0.7px -0.7px,
rgba(0, 0, 0, 0.08) 0px 1.8px 1.8px -1.3px,
rgba(0, 0, 0, 0.07) 0px 3.6px 3.6px -2px,
rgba(0, 0, 0, 0.07) 0px 6.8px 6.8px -2.6px,
rgba(0, 0, 0, 0.05) 0px 13.6px 13.6px -3.3px,
rgba(0, 0, 0, 0.02) 0px 30px 30px -4px;
}
a.scroll-top {
display: flex;
transform: rotate(-90deg) translateX(-87px);
align-items: center;
margin-left: 6px;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
animation: 0.4s cubic-bezier(0.58, 0.3, 0.005, 1) 0s 1 normal none running
links;
opacity: 0;
width: fit-content;
z-index: 1001;
}
.scroll-top-holder {
font-size: 0.95em;
font-family: "DM Sans Bold", sans-serif;
font-weight: 700;
color: var(--primary);
}
a.scroll-top:hover .scroll-top-holder {
color: var(--orange);
}
a.scroll-top:hover #positioning {
background-color: var(--orange) !important;
}
a.scroll-top:hover #tracking {
background: var(--light-orange) !important;
}
.social-bar {
top: 66%;
position: fixed;
z-index: 1001;
right: -120px;
transform: rotate(-90deg) translate(50%, -100%);
font-size: 0.95em;
font-weight: bold;
color: var(--light-blue);
}
.social-bar ul li {
display: inline-block;
margin: 0 5px;
}
.social-bar li a {
color: var(--light-blue);
}
.social-bar li a:hover {
color: var(--orange);
}
.social-bar li a:after {
content: "/";
display: inline;
padding-left: 10px;
}
.social-bar li:last-child a:after {
content: "";
}
/* banner sec */
.banner-sec {
background: var(--secondary);
position: relative;
}
.inner-banner,
.home-service-layout {
display: flex;
}
.banner-img-sec,
.home-service-img {
width: 50%;
}
.banner-img-sec img,
.home-service-img img {
width: 612px;
position: absolute;
/* left: 0; */
height: 100%;
object-fit: cover;
border-radius: 20px;
}
.center-space {
width: 8.82%;
}
.banner-details-sec {
width: 41.66666667%;
padding: 8vh 0;
}
.subtitle-font {
color: var(--cetacean-blue);
}
.subtitle {
color: var(--cetacean-blue);
font-size: 0.9em;
font-weight: 500;
text-transform: uppercase;
}
.banner-sec h1 {
font-size: 4.8vw;
line-height: 0.9em;
}
.title {
color: var(--primary);
padding-top: 0.15em;
}
.brand-color {
font-family: "DM Sans Bold", sans-serif;
color: var(--orange);
}
.banner-details-sec p {
font-size: 17px;
line-height: 27px;
color: var(--light-blue);
margin: 17px 0;
}
.video-sec {
position: relative;
display: block;
}
div.video-wrapper {
z-index: 1;
background: rgba(0, 0, 0, 0.9);
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
div.video {
width: 85%;
height: fit-content;
display: none;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.player {
width: 700px;
margin: auto;
display: block;
}
.video-close-button {
font-size: 14px;
color: var(--white);
}
.video-sec .icon-button {
border: 2px solid var(--light-blue);
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
position: relative;
}
.icon-button {
position: relative;
background-color: transparent;
padding: 0;
border: none;
cursor: pointer;
text-align: center;
outline: 0;
min-width: 3.5rem;
width: 3.5rem;
height: 3.5rem;
display: inline-flex;
vertical-align: middle;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.video-sec .icon-button::after {
border-color: inherit;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 1;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-duration: 1.5s;
animation-name: video_sc;
animation-iteration-count: infinite;
animation-delay: 1s;
content: "";
display: block;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0 0 rgba(17, 16, 19, 0.4);
}
.icon-button::before {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 100%;
background: var(--orange);
transform: scale(0);
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
border-radius: 50%;
}
.video-sec .icon-button .icon {
transform: translateX(0.15rem);
}
/* .video-sec .icon-button:hover,[data-theme="dark"] .video-sec .icon-button:hover {
border: 2px solid var(--orange);
transform: scale3d(1.06,1.06,1.06);
}
.video-sec .icon-button:hover svg{
fill: var(--orange);
transition: all cubic-bezier(.645, .045, .355, 1) .35s;
} */
.icon-button > .icon {
margin-left: 0;
display: inline-flex;
vertical-align: middle;
align-items: center;
transition: transform cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.video-sec span {
font-size: 0.95em;
font-weight: 700;
color: var(--light-blue);
margin-left: 0.75rem;
}
.video-sec svg {
fill: var(--light-blue);
}
.icon svg.minimal {
display: none;
}
.banner-white-space {
height: 12vh;
}
p.banner-highlighted {
position: absolute;
bottom: -100px;
right: 48%;
background: var(--primary);
color: var(--white);
padding: 40px 50px;
width: 26.3%;
margin-bottom: 0;
}
.banner-bottom-space {
height: 200px;
background: var(--secondary);
}
.banner-btn {
width: 185px;
}
.single-home-icon::after {
background: var(--lightgray);
position: absolute;
width: 1px;
height: 30%;
right: 0;
content: "";
top: 0;
bottom: 0;
margin: auto;
}
.single-home-icon:last-child::after {
width: 0;
height: 0;
}
.home-icon-layout {
background: var(--light-pink);
display: flex;
flex-wrap: wrap;
justify-content: space-around;
text-align: center;
padding: 10vh 0;
}
.home-design-icon i {
font-size: 28px !important;
height: 30px !important;
width: 34px !important;
}
.single-home-icon {
position: relative;
width: 25%;
padding: 8vh 10px;
}
.single-home-icon h5 {
margin-top: 1rem;
}
.single-home-icon p {
max-width: 262px;
margin: 0.5rem auto 0;
}
.home-icon-layout i {
background: var(--light-orange);
color: var(--orange);
border-radius: 50%;
padding: 15px;
width: 56px;
height: 56px;
display: inline-flex;
margin: auto;
font-size: 28px;
text-align: center;
vertical-align: middle;
align-items: center;
justify-content: center;
}
.home-icon i {
background: var(--light-orange);
color: var(--orange);
border-radius: 50%;
padding: 15px;
width: 56px;
height: 56px;
display: inline-flex;
margin: auto;
font-size: 28px;
text-align: center;
vertical-align: middle;
align-items: center;
justify-content: center;
}
.home-service-details {
width: 50% !important;
padding: 8vh 7.5% !important;
}
.home-service-details .accordion-header .accordion-button,
.faq-sec .accordion-header .accordion-button {
background: var(--transparent);
color: var(--primary);
box-shadow: none;
border-radius: 0.35rem;
}
.accordion-button {
color: var(--primary);
}
.accordion-button::after {
background-image: url("../images/icon/blackplus.svg");
transform: scale(0.7) !important;
}
.accordion-button:not(.collapsed)::after {
background-image: url("../images/icon/blackminus.svg");
transform: scale(0.7) !important;
}
.accordion-button.collapsed::after {
transform: scale(0.7) rotate(-180deg) !important;
}
.accordion-button {
transition: unset;
}
.home-service-sec {
position: relative;
}
.home-service-sec .accordion-item {
background: transparent;
}
.home-counter {
position: absolute;
right: 51%;
bottom: 0;
display: flex;
width: 40.5%;
}
.home-blue-counter,
.home-orange-counter {
background: var(--primary);
color: var(--white);
padding: 5vh 3vw;
width: 100%;
}
.home-orange-counter {
background: var(--secondary-orange);
}
.home-counter i {
font-size: 34px;
height: 34px;
width: 34px;
}
.home-counter h3,
.home-counter span {
font-size: 2.75rem;
line-height: 1.15;
font-weight: bold;
color: var(--white);
}
.home-counter span {
margin-top: -6px;
font-size: 2rem;
margin-left: 0.4rem;
}
.home-counter p {
font-weight: 600;
line-height: 1.4;
}
.even-home-service-row .home-service-layout {
flex-direction: column-reverse;
}
.even-home-service-row .home-service-details {
padding: 8vh 7% 8vh 0;
}
.even-home-service-row .home-service-img img {
top: 0;
right: 113px;
left: unset;
}
.circle-progress {
width: 110px;
height: 110px;
border-radius: 50%;
position: relative;
box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.1);
}
.circle-percentage {
position: absolute;
text-align: center;
width: 100%;
top: 50%;
transform: translate(0, -50%);
color: var(--primary);
font-size: 1.75rem;
}
.left-progress-line,
.right-progress-line {
width: 50%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
}
.circle-spinner {
width: 200%;
height: 100%;
border-radius: 50%;
position: absolute;
border: 4px solid var(--lighter-gary);
transform: rotate(-45deg);
transition: 0.3s linear;
}
.left-progress-line .circle-spinner {
border-right: 4px solid var(--orange);
border-bottom: 4px solid var(--orange);
}
.right-progress-line .circle-spinner {
border-left: 4px solid var(--orange);
border-top: 4px solid var(--orange);
right: 0;
}
.choose-plan {
padding: 10vh 0 0 0;
background: var(--secondary);
}
.choose-plan-layout {
display: flex;
justify-content: space-between;
margin-bottom: 3vh;
flex-wrap: wrap;
}
.choose-plan-details {
width: 80%;
padding: 0 2.25rem 0 0;
}
.plan-layout,
.plan-sec {
display: flex;
}
.plan-layout {
padding: 0 0 10vh 0;
border-bottom: 1px solid var(--lightgray);
}
.plan-sec,
.plan-faq-sec {
width: 50%;
}
.plan-sec {
border-right: 1px solid var(--lightgray);
}
.single-plan {
margin: 0 2.25rem 0 0;
}
.avaliable-plan a {
color: var(--light-blue);
}
.avaliable-plan {
display: flex;
align-items: center;
}
.single-plan:first-child {
margin-left: 0;
}
.single-plan:last-child {
margin-right: 1.25rem;
}
.price-number {
font-family: "DM Sans Bold", sans-serif;
margin-bottom: 0.5rem;
letter-spacing: -0.045em;
line-height: 1;
display: block;
}
.plan-tag {
background-color: var(--lighter-gary);
display: inline-flex;
vertical-align: middle;
align-items: center;
font-weight: 500;
padding: 0.35rem 0.6rem;
line-height: 1;
min-height: 1.625rem;
font-size: 0.9rem;
border-radius: 0.35rem;
}
.price-layout,
.single-plan p,
.single-plan ul {
margin-bottom: 1.25rem;
}
.plan-tag:hover {
background: var(--secondary-gray);
}
.single-plan ul li {
font-size: 0.95em;
margin-bottom: 0.5rem;
font-weight: 500;
}
.single-plan svg {
fill: var(--orange);
transform: scale(1.2);
/* margin: 0 0.5rem 0.25rem 0; */
line-height: 16px;
font-size: 1.6em;
}
.missing-plan svg {
fill: var(--primary);
}
.missing-plan {
opacity: 0.65;
}
.plan-faq-sec {
padding: 0 20px 0 4.5%;
}
#faqacc .accordion-item,
#faqacc .accordion-button {
background: unset;
}
#faqacc .accordion-button:not(.collapsed) {
background: unset;
color: unset;
box-shadow: unset;
}
#faqacc button.accordion-button {
padding: 0;
flex-direction: row-reverse;
justify-content: flex-end;
}
#faqacc .accordion-body {
padding: 0.75rem 0;
}
#faqacc {
margin-top: 3vh;
}
#faqacc .accordion-button::after {
margin-right: 10px;
margin-left: unset;
}
#faqacc button.accordion-button:focus {
border: unset;
box-shadow: unset;
}
/* client sec */
section.client-sec {
background: var(--secondary);
padding: 10vh 0;
}
.client-title {
width: 33.3%;
}
.inner-client {
display: flex;
}
.client-logo-layout {
/* width: 25%; */
/* padding-bottom: 20px; */
}
/* .client-logo {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.client-logo-layout img {
width: 130px;
}
.client-logo-layout:hover img {
transform: scale3d(1.06, 1.06, 1.06);
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
} */
/* blog sec */
section.blog-sec {
padding-top: 10vh;
}
.blog-layout {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.blog-layout .card {
border: none;
width: 31%;
border-radius: 0.35rem;
position: relative;
overflow: hidden;
padding-bottom: 2vh;
margin-right: 20px;
}
.card-img-sec {
overflow: hidden;
border-radius: 0.35rem;
}
.blog-layout .headline-meta {
color: var(--granite-gray);
font-size: 0.9rem;
}
.headline-meta .date-sec {
font-weight: 500;
}
.blog-layout .card-title.headline-meta {
display: flex;
}
.headline-meta .date-sec + ::before {
margin-left: 0.25rem;
margin-right: 0.25rem;
content: "•";
display: inline-block;
vertical-align: middle;
font-size: 0.8em;
margin-top: -2px;
color: var(--orange);
}
.blog-layout .card-body > * {
margin-bottom: 0.6rem;
}
.card-body h4 {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.tag {
background: var(--lighter-gary);
color: var(--light-blue);
display: inline-flex;
align-items: center;
padding: 0.35rem 0.6rem;
border-radius: 0.35rem;
line-height: 1;
min-height: 1.625rem;
font-size: 0.9rem;
font-weight: 500;
}
.tag:hover {
color: var(--light-blue);
background: var(--secondary-gray);
}
.blog-layout .category-holder .tag {
margin: 0.35rem 0.35rem 0 0;
}
.blog-layout .card:hover img {
transform: scale3d(1.06, 1.06, 1.06);
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.card:hover .-fade-down,
.card:hover .-fade-up {
transform: none;
opacity: 1;
}
.active-team-member .inner-team-details.-fade-up {
transform: none;
opacity: 1;
}
.-fade-up {
transform: translateY(6%);
opacity: 0;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.-fade-down {
transform: translateY(-6%);
opacity: 0;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.card .overlay-details {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
z-index: 1;
display: flex;
padding: 3vh;
border-radius: 0 0 0.35rem 0.35rem;
}
.meta-holder .meta-item:first-child {
margin: -0.25rem 1rem 0 0;
}
.meta-item {
line-height: 1.4;
text-align: left;
}
.-unlist > li {
margin: 0;
padding: 0;
}
.avatar.-small {
width: 3rem;
height: 3rem;
}
.avatar {
background-color: var(--secondary-gray);
width: 3.5rem;
height: 3.5rem;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
border-radius: 100%;
}
.avatar::after {
content: "";
height: 100%;
width: 100%;
z-index: 1;
top: 0;
left: 0;
content: "";
display: block;
position: absolute;
border-radius: 100%;
box-shadow: inset 0 0 0 0.3125rem rgba(150, 144, 162, 0.15);
}
.card.-metro:not(.-no-media) .image-holder iframe,
.card.-metro:not(.-no-media) .image-holder img {
position: absolute;
left: 0;
top: 0;
object-fit: cover;
width: 100%;
min-width: 100%;
height: 100%;
}
.avatar > img.avatar {
max-width: 100%;
width: 100%;
height: auto;
}
.card .image-holder img {
min-width: 100%;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
img.card-img-top {
height: 323px;
object-fit: cover;
}
.meta-item .prefix {
font-size: 0.9em;
display: block;
opacity: 0.75;
}
.meta-item span:not(.prefix),
.meta-item time:not(.prefix) {
font-weight: 600;
font-size: 0.95em;
}
.card:not(.-layout4):not(.-layout6) .overlay-details {
color: var(--white);
}
.blog-layout .overlay-details {
background: linear-gradient(
360deg,
rgba(17, 16, 19, 0.5) 0,
rgba(17, 16, 19, 0) 100%
);
}
.get_in_touch {
background-image: url("../images/home/get_in_touch.jpg");
background-size: cover;
background-repeat: no-repeat;
padding: 10vh 0;
background-color: #00000075;
background-blend-mode: multiply;
background-position: center;
}
.icon-sec {
display: flex;
align-items: center;
}
a.icon-layout {
width: 16.66%;
background: var(--oxford-blue);
color: var(--white);
height: 6.25em;
text-align: center;
position: relative;
}
a.icon-layout:hover {
background: var(--space-cadet);
}
.icon-layout span {
font-size: 0.95em;
position: relative;
top: 0;
opacity: 1;
line-height: 6.25rem;
font-weight: 700;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.icon-layout:hover span {
opacity: 0;
top: -1.875em;
}
.icon-layout:hover i {
opacity: 1;
top: 40%;
}
.icon-layout i {
opacity: 0;
top: 60%;
font-size: 21px;
display: block;
position: absolute;
left: 0;
right: 0;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
footer {
background: var(--primary);
color: var(--secondary-white);
}
.footer-follow-link,
.footer-follow-link a,
footer a {
color: var(--secondary-white);
}
.innerfooter {
display: flex;
justify-content: space-between;
padding: 5rem 0;
border-bottom: 1px solid var(--lightgray);
}
.footer-logo,
.footer-add,
.footer-inquiries,
.footer-newsletter {
width: 25%;
}
.footer-logo a.footer-logo:hover {
text-decoration: none;
animation: none;
background: none;
}
footer .widget-title {
color: var(--lighter-white);
}
footer .widget-title {
margin-bottom: 1rem;
letter-spacing: -0.01em;
line-height: inherit;
font-size: 1em;
padding: 0;
}
footer .footer-widget-block:not(:first-child) {
margin-top: 4vh;
}
.footer-widget-block {
font-size: 0.98em;
}
.footer-widget-block p {
color: #fff !important;
}
.copywrite-sec p {
color: #fff !important;
}
.footer-follow-link a:hover,
footer a:hover,
.breadcrumb a:hover,
.blog-description a:hover,
.avaliable-plan a:hover {
color: var(--orange);
animation: 0.4s cubic-bezier(0.58, 0.3, 0.005, 1) 0s 1 normal none running
links;
background-image: linear-gradient(currentColor 0, currentColor 100%);
}
.footer-form-field {
background: var(--transparent);
width: 100%;
border-radius: 0.35rem;
}
.footer-newsletter button,
.footer-newsletter input[type="email"] {
background: unset;
outline: 0;
border: 0;
}
.footer-newsletter input[type="email"] {
width: 74%;
padding: 0 1rem;
min-height: 3rem;
font-size: 1.025rem;
border-radius: 0.35rem 0 0 0.35rem;
color: var(--secondary-white);
}
.footer-newsletter button {
margin-left: -4px;
width: 25.8%;
height: 3rem;
font-size: 0.95em;
font-weight: 700;
line-height: 1.5rem;
letter-spacing: -0.01em;
color: var(--secondary-white);
border-radius: 0.35rem;
}
.footer-newsletter button:hover {
background: var(--csitron);
}
.footer-widget-block form span {
font-size: 0.9em;
}
.copywrite-sec {
justify-content: space-between;
padding: 3vh 0;
}
.copywrite-sec ul li {
display: inline-block;
position: relative;
}
.copywrite-sec ul li::after {
content: "|";
}
.copywrite-sec ul li:last-child::after {
content: "";
}
/* about us page */
.inner-about,
.top-title-sec {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.about-banner-details,
.about-banner-img,
.top-title-details {
width: 50%;
}
.about-banner-details h1,
.breadcrumb-sec h1,
.top-title-details h1 {
animation: slide_up_elements 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s
forwards;
}
.about-banner-details .post-meta-holder,
.about-banner-details a,
.breadcrumb-sec .post-meta-holder,
.top-title-details .post-meta-holder,
.top-title-details a {
animation: slide_up_elements 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0.15s
forwards;
}
.about-banner-img {
min-height: 31rem;
}
.about-banner-img img {
position: absolute;
right: 132px;
top: 0;
height: 100%;
width: 612px;
object-fit: cover;
border-radius: 20px;
object-position: top;
}
.breadcrumb svg {
fill: currentColor;
}
.breadcrumb li {
font-size: 0.95em;
}
.breadcrumb li a {
font-weight: 600;
}
.breadcrumb li {
font-weight: 600;
color: #fe4a23;
}
.about-details {
/* display: flex; */
flex-wrap: wrap;
width: 50%;
/* padding-top: 10vh; */
padding-bottom: 10vh;
padding-left: 8.82%;
}
.about-img {
width: 42%;
}
.about-img img {
position: absolute;
width: 612px;
/* left: 0; */
top: 0;
height: 100%;
object-fit: cover;
border-radius: 20px;
}
.about-sec .progress {
border-radius: 0;
overflow: visible;
height: 4px;
}
.about-sec .progress-bar {
background: linear-gradient(90deg, #dc2828 0%, #7544dd 100%);
transition: width 1.5s ease-in-out;
}
.about-banner-details {
padding-right: 9%;
}
.inner-client-sec {
background: var(--csitron);
padding: 10vh 0;
}
.service-details {
padding: 10vh 0;
position: relative;
}
img.web-development-bg {
position: absolute;
right: 0;
width: 48%;
height: 100%;
top: 0;
object-fit: cover;
}
.inner-service-details {
display: flex;
justify-content: space-between;
}
.service-top-details,
.service-img-sec {
width: 100%;
}
.service-top-details a {
color: var(--primary);
}
.client-single-layout p {
margin-bottom: 1em;
}
.client-layout {
display: flex;
flex-wrap: wrap;
}
.client-single-layout {
width: 25%;
}
.testimonials-sec {
background: var(--black);
padding: 10vh 0;
}
.testimonials-sec .subtitle {
color: var(--dark-gray);
}
.testimonials-sec .title {
color: var(--white);
}
.testimonials-sec .orange-btn:hover {
background: var(--light-black);
}
.client-testimonials,
.testimonials-title-sec {
width: 50%;
}
.inner-testimonials-sec {
display: flex;
}
.inner-testimonials-sec h6 {
margin-bottom: 0.25rem;
}
.testimonial-headline > b {
background: var(--lighter-gary);
display: inline-flex;
vertical-align: middle;
align-items: center;
font-weight: 500;
padding: 0.35rem 0.6rem;
line-height: 1;
min-height: 1.625rem;
font-size: 0.9rem;
border-radius: 0.35rem;
color: var(--dark-gray);
font-family: "DM Sans Bold", sans-serif;
}
.testimonial-headline > b:hover {
background: var(--secondary-gray);
}
.client-img-sec,
.client-img-sec img {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
position: relative;
margin-bottom: 1.2rem;
}
.client-img-sec::after {
content: "";
height: 100%;
width: 100%;
z-index: 1;
top: 0;
left: 0;
content: "";
display: block;
position: absolute;
border-radius: 100%;
box-shadow: inset 0 0 0 0.3125rem rgba(150, 144, 162, 0.15);
}
.single-client-testimonials p {
color: var(--white);
}
.client-testimonials .author {
margin-top: 1.2rem;
}
.author-details {
margin-top: 0.2rem;
margin-bottom: 0;
font-size: 0.95em;
color: var(--dark-gray) !important;
}
.slider__counter {
color: var(--white);
font-weight: 600;
margin-top: 30px;
display: flex;
align-items: center;
}
.client-testimonials .slick-slider .slick-arrow {
position: absolute;
right: 8rem;
left: unset;
bottom: -16px;
top: unset;
}
.client-testimonials .slick-icon {
width: 56px;
height: 56px;
border-radius: 50%;
text-align: center;
fill: var(--white);
padding: 11px 0px;
position: absolute;
right: 95px;
bottom: 0;
margin-bottom: -17px;
}
.client-testimonials .slick-next-icon {
right: 3rem;
}
.slick-icon:hover {
background-color: var(--transparent);
}
.slick-icon:active,
.slick-icon:focus {
box-shadow: inset 0 0 0 0.3125rem rgba(150, 144, 162, 0.15);
}
.slick-separator {
width: 40px;
height: 2px;
background: var(--white);
display: block;
margin: 0 12px;
}
section.awards-sec {
padding: 10vh 0;
}
.awards-inner {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.awards-title,
.awards-description,
.awards-details {
width: 33.3%;
}
.awards-description {
padding-right: 9rem;
}
.awards-details {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.single-awards {
width: 50%;
}
.single-awards img {
width: 177px;
margin-bottom: 20px;
}
.single-awards p {
margin-bottom: 1em;
}
.counter-img-sec .home-counter {
right: 0;
width: 48.4%;
}
.counter-img-sec .home-blue-counter,
.get-in-touch,
.collaboration-sec.careers-sec hr {
background: var(--black);
}
.inner-meetteam {
display: flex;
}
.team-details-sec {
display: none;
position: relative;
}
.inner-team-details {
position: absolute;
bottom: 3vh;
}
.active-team-member.team-details-sec {
display: block;
}
.team-img-sec,
.team-details-sec {
width: 25%;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.team-img-sec img {
width: 100%;
}
.team-details-sec {
background: var(--light-black);
padding: 3vh;
}
.inner-meetteam h5 {
color: var(--white);
}
.inner-meetteam p,
.inner-team-details .author-details {
color: var(--sub-dark-gray) !important;
}
.inner-meetteam p {
padding: 1em 0;
}
.social-icon a {
border: 2px solid var(--white);
border-radius: 50%;
display: inline-block;
text-align: center;
color: var(--white);
padding: 2px;
height: 2.2rem;
width: 2.2rem;
margin-right: 0.35rem;
}
.social-icon a i {
margin: 0;
}
.collaboration-sec {
background: var(--black);
padding: 10vh 0;
}
.collaboration-sec .subtitle,
.inner-contact-sec p span {
color: var(--dark-gray);
}
.collaboration-sec .title,
.slide-title {
color: var(--white);
}
.inner-collaboration {
display: flex;
align-items: start;
justify-content: space-between;
}
.collaboration-sec hr {
background: var(--secondary-white);
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
p.collaboration-details {
color: var(--white);
width: 50%;
}
/* contact page */
.breadcrumb-sec {
padding: 3rem 0;
}
.breadcrumb-sec .post-meta-holder {
margin-top: 1.25rem;
}
.contact-layout-sec .contact-form {
width: 50%;
}
.get-in-touch,
.post-address {
width: 50%;
padding: 10vh 4em;
color: var(--white);
}
.contact-details-sec {
position: absolute;
right: 0;
width: 50%;
display: flex;
height: 100%;
}
.map-sec iframe {
width: 100%;
height: 100%;
}
.inner-contact-sec {
display: flex;
}
.inner-contact-sec .contact-details-sec i {
font-size: 24px;
height: 56px;
width: 56px;
border-radius: 50%;
color: var(--white);
background: var(--lighter-gary);
display: inline-block;
text-align: center;
padding: 14px 0;
}
.inner-contact-sec h5 {
color: var(--white);
margin-top: 1rem;
}
.inner-contact-sec p {
margin: 1em 0;
}
.post-address {
background: var(--light-black);
}
.careers-sec {
background: var(--csitron);
}
.careers-sec .title {
color: var(--primary);
}
.careers-sec .subtitle,
.careers-sec .collaboration-details {
color: var(--light-blue);
}
/* service page */
.inner-high-performance {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.high-performance-title,
.high-performance-details {
width: 48%;
}
section.high-performance {
/* margin-top: 44px; */
padding: 10vh 0;
background: var(--secondary);
}
.divider {
width: 100%;
height: 0.5px;
display: block;
background-color: var(--space-cadet);
margin-block-start: 0.5rem;
}
.high-performance-details {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.single-high-performance {
width: 47%;
}
.service-list-sec {
padding: 10vh 0;
}
/* service page */
.technology-list {
margin-left: 30px;
list-style-type: disc;
}
.service-list li a {
background: var(--csitron);
padding: 1rem 1.25rem;
color: var(--primary);
border-radius: 0.35rem;
font-weight: bold;
display: block;
position: relative;
}
.service-list li a::after {
content: "";
position: absolute;
right: 0;
}
/* business-strategy-sec */
.business-strategy-sec {
background: var(--secondary);
padding-top: 10vh;
}
.business-strategy-details {
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--lightgray);
padding-bottom: 10vh;
align-items: center;
flex-wrap: wrap;
}
.business-strategy-title,
.business-strategy-img {
width: 50%;
}
.business-strategy-title {
padding-right: 7%;
}
.business-strategy-img {
padding-left: 7%;
border-left: 1px solid var(--lightgray);
}
.strategy-layout {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: transparent;
}
.single-strategy {
width: 30%;
}
.choose-us-sec .slick-slider .slick-slide {
/* height: 380px; */
border: 2px solid var(--lighter-gary);
border-radius: 10px;
margin: 0 5px;
padding: 15px;
position: relative;
}
.choose-us-sec .slick-slider .slide {
height: 100%;
background-size: cover;
background-position: center;
}
.differentiates-sec {
padding: 10vh 0;
/* background: var(--light-black); */
}
.choose-us-sec {
margin-top: 40px;
}
.choose-us-sec .slick-slider img {
background: var(--secondary);
border-radius: 50%;
object-fit: scale-down;
width: 70px;
}
/* .choose-us-sec h5,.differentiates-sec .title{
color: var(--white);
} */
/* .differentiates-sec .subtitle,.differentiates-sec p{
color: var(--lighter-white);
} */
/* single service section */
section.single-service-section ul {
list-style: disc;
padding-left: 40px;
}
.single-service-section {
background: url(../images/service/poly-bg.png);
background-repeat: no-repeat;
background-position: right top;
padding: 10vh 0;
position: relative;
border-bottom: 2px var(--primary) solid;
}
.single-service-img img {
position: absolute;
bottom: 0;
}
.single-service-layout,
.industries-serve {
display: flex;
align-items: center;
}
section.service-form-sec {
background: var(--secondary);
padding: 10vh 0;
}
.service-form-layout {
display: flex;
}
.service-form-img,
.service-form {
width: 50%;
}
.service-form-img img {
width: 50%;
position: absolute;
left: 0;
height: 100%;
object-fit: cover;
bottom: 0;
top: 0;
}
.service-form-bg {
position: relative;
}
.service-form {
position: relative;
z-index: 1;
padding-left: 70px;
}
.service-form-bg::before {
content: "";
position: absolute;
top: -10%;
left: 50%;
width: 50%;
height: 120%;
background-color: var(--white);
bottom: -10%;
}
.technologies-logo-sec {
padding-top: 10vh;
}
.technologies-logo a {
max-width: 13%;
flex: 13%;
color: var(--primary);
margin-bottom: 20px;
}
.technologies-logo {
justify-content: center;
}
.technologies-logo img {
width: 80px;
height: 80px;
margin: auto;
display: block;
}
.technologies-logo h5 {
font-size: 18px;
}
.faq-sec {
padding: 10vh 0;
}
.single-industries:hover img {
transform: scale(1.1);
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
}
.techanology-sec .home-service-details {
padding-right: 0;
}
.industries-layout {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
a.single-induries {
width: 16%;
margin: 0 20px 20px;
text-align: center;
padding: 20px 10px;
box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
border-radius: 6px;
}
a.single-induries h5 {
margin-top: 10px;
font-size: 17px;
}
a.single-induries:hover {
background: var(--secondary);
transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.accordion-item {
background: unset;
}
.image-display img {
object-fit: cover;
}
.light-slider {
background-color: var(--lighter-gary);
}
.light-slider h5 {
color: var(--primary);
}
.light-slider p,
.light-slider .slider__counter,
.light-slider.testimonials-sec .title {
color: var(--light-blue);
}
.light-slider .slick-separator {
background: var(--light-blue);
}
.light-slider .client-testimonials .slick-icon {
fill: var(--light-blue);
}
.career-join {
background: var(--light-pink);
}
.career-join .home-icon-layout {
background: unset;
}
.single-home-icon {
padding-top: 0;
padding-bottom: 0;
}
.career-join .single-home-icon::after {
height: 70%;
}
.single-opening {
border-radius: 0.35rem;
display: flex;
align-items: center;
background: var(--csitron);
padding: 20px;
margin-bottom: 30px;
}
.apply-now-sec {
margin-left: auto;
}
.openings-layout {
margin-top: 25px;
}
.opening-details {
margin-left: 20px;
}
.single-opening-img img {
width: 40px;
object-fit: cover;
margin-top: -25px;
}
form#resumeForm {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
form#resumeForm .mb-3 {
width: 48%;
}
#exampleModalCenter .modal-header button {
background: none;
border: none;
font-weight: bolder;
font-size: 19px;
padding: 0 10px;
}
/* blog page */
.ss-body {
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: calc(100vh - 84px);
width: 100%;
background-color: #f7ddd4;
}
.ss-container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.ss-item {
position: absolute;
z-index: -100;
height: 100%;
width: 100%;
transition-timing-function: ease-in-out;
}
.ss-item.ss-moving {
z-index: 100 !important;
}
.ss-item.ss-fade {
opacity: 0;
}
.ss-item.ss-fade.active {
opacity: 1;
z-index: 1;
}
.ss-item.ss-move-up {
top: 100%;
}
.ss-item.ss-move-up.ss-move-next {
top: 100%;
}
.ss-item.ss-move-up.ss-move-prev {
top: -100%;
}
.ss-item.ss-move-up.active {
top: 0;
z-index: 1000 !important;
}
.ss-item.ss-move-down {
top: -100%;
}
.ss-item.ss-move-down.ss-move-next {
top: -100%;
}
.ss-item.ss-move-down.ss-move-prev {
top: 100%;
}
.ss-item.ss-move-down.active {
top: 0;
z-index: 1000 !important;
}
.ss-item.ss-move-right {
right: 100%;
}
.ss-item.ss-move-right.ss-move-next {
right: 100%;
}
.ss-item.ss-move-right.ss-move-prev {
right: -100%;
}
.ss-item.ss-move-right.active {
right: 0 !important;
z-index: 1000 !important;
}
.ss-item.ss-move-left {
right: -100%;
}
.ss-item.ss-move-left.ss-move-next {
right: -100%;
}
.ss-item.ss-move-left.ss-move-prev {
right: 100%;
}
.ss-item.ss-move-left.active {
right: 0;
z-index: 1000 !important;
}
.ss-item .video-sec .icon-button {
border: 2px solid var(--lighter-white);
}
.ss-item .video-sec svg {
fill: var(--lighter-white);
}
span.category-label a,
.category-date {
color: var(--lighter-white);
font-weight: 500;
position: relative;
}
.ss-item-content {
width: 50%;
padding: 7vh 0;
color: var(--lighter-white);
position: relative;
}
.ss-item::before {
background: #000000e0;
content: "";
position: absolute;
width: 100%;
height: 70vh;
top: 0;
left: 0;
z-index: -1;
}
.ss-item .video-sec .icon-button::after {
animation-name: video_sc_dark;
}
.category-date::before {
content: "";
position: absolute;
background: var(--orange);
height: 5px;
width: 5px;
border-radius: 50%;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
.ss-item h2 a {
color: var(--white);
}
.ss-item h2 {
color: #ffffff;
letter-spacing: -0.045em;
line-height: 1.18;
font-size: 56px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ss-item p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.ss-item .orange-btn {
background: #29272e6b;
}
.ss-item .orange-btn:hover {
background: var(--orange);
}
.ss-item-content::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 35%;
width: 100%;
background-image: radial-gradient(
circle at 1px 1px,
color-mix(in srgb, #9690a2 30%, transparent) 1px,
transparent 0
);
background-size: 25px 25px;
}
.ss-arrow {
position: absolute;
right: 110px;
bottom: 20px;
z-index: 1002;
padding: 6px 3px;
cursor: pointer;
fill: var(--white);
}
.ss-arrow.left-arrow {
right: 145px;
}
.blog-detail-sec .category-date,
.blog-detail-sec .category-label a {
color: var(--granite-gray);
font-size: 15px;
}
.blog-description {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.blog-description img {
width: 40px;
height: 40px;
}
.blog-description a {
color: var(--primary);
}
.blog-details ul {
padding-left: 2rem;
list-style-type: disc;
}
.blog-details ul ul {
list-style-type: circle;
}
.blog-details p,
.blog-details li,
.blog-details a {
font-size: 18px;
line-height: 1.9;
}
.blog-details img {
width: 100%;
height: 500px;
margin: 30px 0;
object-fit: cover;
}
.related-tag a {
background: var(--lighter-gary);
color: var(--light-black);
padding: 4px 10px;
border-radius: 6px;
display: inline-block;
font-size: 15px;
font-weight: 500;
margin-right: 5px;
}
.related-tag a:hover {
background: var(--lightgray);
color: var(--light-black);
}
.related-blog .card {
background: var(--lighter-gary);
padding-bottom: 0;
margin-bottom: 5vh;
}
.related-blog .card-body {
padding: 20px !important;
}
.related-blog .category-holder {
margin-bottom: 0;
}
.leave-comment {
background: var(--lighter-gary);
}
.req-start {
color: var(--orange);
}
.leave-comment form {
display: flex;
flex-wrap: wrap;
}
.leave-comment .single-field {
width: 30%;
margin-right: 30px;
}
.leave-comment .single-field:nth-child(5) {
width: 100%;
}
.blog-description {
border-top: 1px solid var(--secondary-gray);
border-bottom: 1px solid var(--secondary-gray);
}
.maincookie {
min-height: 82px;
width: 100%;
background-color: var(--white);
position: sticky;
bottom: 0;
z-index: 5;
display: flex;
padding: 20px;
border-top: 3px solid var(--secondary-orange);
}
.cookie p {
line-height: 1.5;
font-size: 16px;
}
.nobg-btn {
background-color: #ffffff;
color: #086ad8;
border: 1px solid #086ad8;
border-radius: 2px;
margin-right: 1em;
min-width: 125px;
height: auto;
white-space: normal;
word-break: break-word;
word-wrap: break-word;
padding: 12px 10px;
line-height: 1.2;
font-size: 0.813em;
font-weight: 600;
}
.closebtn {
border: none;
background: none;
line-height: 37px;
}
.client-review-sec {
background: var(--csitron);
}
.testmonialssec {
max-width: 1000px;
margin: auto;
}
.testimonials-content p {
font-size: 25px;
text-align: center;
line-height: 44px;
}
.test-founder {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.test-founder img {
margin-right: 15px;
border-radius: 50%;
}
.test-founder p b {
display: block;
}
/* dark theme */
[data-theme="dark"] body,
[data-theme="dark"] .banner-details-sec p,
[data-theme="dark"] .home-service-details p,
[data-theme="dark"] .subtitle,
[data-theme="dark"] .video-sec span,
[data-theme="dark"] .single-home-icon p,
[data-theme="dark"] .tag,
[data-theme="dark"] .social-bar li a,
[data-theme="dark"] .social-bar li,
[data-theme="dark"] p.collaboration-details,
[data-theme="dark"] .blog-detail-sec .category-date,
[data-theme="dark"] .blog-detail-sec .category-label a,
[data-theme="dark"] .related-tag a {
color: var(--secondary-white);
}
[data-theme="dark"] #positioning,
[data-theme="dark"] .scroll-top-holder {
color: var(--secondary-white) !important;
}
[data-theme="dark"] #positioning {
background: var(--secondary-white) !important;
}
[data-theme="dark"] .collaboration-sec.careers-sec hr,
[data-theme="dark"] .divider {
background: var(--secondary-white);
}
[data-theme="dark"] .menu {
background: #000;
}
[data-theme="dark"] .video-sec svg {
fill: var(--secondary-white);
}
[data-theme="dark"] .default-button {
background: var(--deep-amethyst);
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: rgba(1, 10, 68, 0.5) 6px 8px 14px,
rgba(0, 0, 0, 0.6) 10px 14px 20px, rgba(255, 255, 255, 0.04) 2px 3px 3px;
}
[data-theme="dark"] .default-button:hover {
/* background: var(--deep-amethyst); */
background: rgba(20, 20, 20, 0.85) !important;
}
[data-theme="dark"] .video-sec .icon-button {
border: 2px solid var(--white);
}
[data-theme="dark"] .client-logo-layout img {
filter: brightness(4);
}
[data-theme="dark"] .client-logo-layout .dark-mode {
filter: brightness(1.4);
}
[data-theme="dark"] .feather_down_img {
filter: brightness(4);
}
.feather_down_img {
filter: invert(1);
}
[data-theme="dark"] .single-home-icon h5,
[data-theme="dark"] .title,
[data-theme="dark"] #faqacc button.accordion-button,
[data-theme="dark"] #exampleModalCenter .modal-header button,
[data-theme="dark"] .closebtn,
[data-theme="dark"] .avaliable-plan a,
[data-theme="dark"] .light-slider.testimonials-sec .title,
[data-theme="dark"] .light-slider p,
[data-theme="dark"] .light-slider .slider__counter,
[data-theme="dark"] .light-slider.testimonials-sec .title {
color: var(--white);
}
[data-theme="dark"] .slick-separator {
background: var(--white);
}
[data-theme="dark"] .light-slider .client-testimonials .slick-icon {
fill: var(--white);
}
[data-theme="dark"] .video-sec .icon-button::after {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
animation-name: video_sc_dark;
}
[data-theme="dark"] .orange-btn,
[data-theme="dark"] .default-button:hover {
background: var(--orange);
}
[data-theme="dark"] body,
[data-theme="dark"] header.sticky,
[data-theme="dark"] .orange-btn:hover,
[data-theme="dark"] .blog-layout .card,
[data-theme="dark"] footer,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .maincookie {
background: var(--secondary);
}
[data-theme="dark"] a.scroll-top:hover .scroll-top-holder {
color: var(--orange) !important;
}
[data-theme="dark"] .split-layout .slides-wrapper .slides.title .title {
color: var(--dark-primary);
}
[data-theme="dark"] .default-logo {
display: none;
}
[data-theme="dark"] .dark-theme-logo {
display: block;
}
[data-theme="dark"] .home-icon-layout,
[data-theme="dark"] .home-service-details .accordion-header .accordion-button,
[data-theme="dark"] .faq-sec .accordion-header .accordion-button,
[data-theme="dark"] .choose-plan,
[data-theme="dark"] .banner-details-sec .orange-btn:hover,
[data-theme="dark"] section.client-sec,
[data-theme="dark"] .related-blog .card,
[data-theme="dark"] .banner-highlighted {
background: var(--secondary-black);
}
[data-theme="dark"] .accordion-button::after {
background-image: url("../images/icon/whiteplus.svg");
}
[data-theme="dark"] .accordion-button:not(.collapsed)::after {
background-image: url("../images/icon/whiteminus.svg");
}
[data-theme="dark"] .home-blue-counter {
background: var(--dark-primary);
}
[data-theme="dark"] .get_in_touch .subtitle,
[data-theme="dark"] .get_in_touch .title {
color: var(--dark-primary);
}
[data-theme="dark"] .service-form-bg::before {
background: var(--transparent);
}
[data-theme="dark"] .blog-layout .headline-meta {
color: var(--oslo-grey);
}
[data-theme="dark"] a.icon-layout {
background: var(--anthracite);
}
[data-theme="dark"] .icon-layout:hover {
background: var(--alienator_grey);
}
[data-theme="dark"] section.high-performance,
[data-theme="dark"] .business-strategy-sec,
[data-theme="dark"] .industries-sec,
[data-theme="dark"] section.service-form-sec {
background: var(--csitron);
}
[data-theme="dark"] a.single-induries {
background: var(--transparent);
}
[data-theme="dark"] a.single-induries:hover {
background: var(--secondary);
}
[data-theme="dark"] .form-control {
background-color: var(--transparent);
color: var(--white);
border: 1px solid var(--transparent);
}
/* Define slide-up animation */
@keyframes slide_up_elements {
0% {
opacity: 0;
transform: translateY(3.25rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* video light icon circle */
@keyframes video_sc {
0% {
opacity: 1;
-webkit-box-shadow: 0 0 0 0 rgba(17, 16, 19, 0.35);
box-shadow: 0 0 0 0 rgba(17, 16, 19, 0.35);
}
85% {
opacity: 0;
-webkit-box-shadow: 0 0 0 1rem rgba(17, 16, 19, 0.35);
box-shadow: 0 0 0 1rem rgba(17, 16, 19, 0.35);
}
100% {
opacity: 0;
-webkit-box-shadow: 0 0 0 0 rgba(17, 16, 19, 0.35);
box-shadow: 0 0 0 0 rgba(17, 16, 19, 0.35);
}
}
/* video dark icon circle */
@keyframes video_sc_dark {
0% {
opacity: 1;
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
}
100% {
opacity: 0;
-webkit-box-shadow: 0 0 0 0.85rem rgba(255, 255, 255, 0.2);
box-shadow: 0 0 0 0.85rem rgba(255, 255, 255, 0.2);
}
}
@keyframes links {
0% {
background-size: 100% 0.2em;
background-position: 0 110%;
}
50% {
background-size: 0 0.2em;
background-position: 0 110%;
}
50.01% {
background-size: 0 0.2em;
background-position: right 0 top 110%;
}
100% {
background-size: 100% 0.2em;
background-position: right 0 top 110%;
}
}
@keyframes iconMove {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
30% {
opacity: 0;
}
31% {
-webkit-transform: translateX(1.25rem);
transform: translateX(1.25rem);
}
32% {
-webkit-transform: translateX(-1.25rem);
transform: translateX(-1.25rem);
}
84% {
opacity: 1;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
/* @media screen and (min-width: 1440px){
h1 {
font-size: 3.6rem;
}
h2 {
font-size: 3.25rem;
}
h3 {
font-size: 2.25rem;
}
h4 {
font-size: 1.75rem
}
h5{
font-size: 1.25rem;
}
.price-number {
font-size: 4.5rem;
}
} */
@media screen and (max-width: 1200px) {
p.banner-highlighted {
padding: 10px;
bottom: 0;
}
.banner-bottom-space {
display: none;
}
.center-space {
display: none;
}
.banner-details-sec {
width: 50%;
}
.home-service-details,
.banner-details-sec,
.about-details {
padding: 30px 0 30px 30px;
}
.even-home-service-row .home-service-details {
padding: 30px 30px 30px 0;
}
.plan-faq-sec {
padding: 0 0 0 30px;
}
.choose-plan {
padding: 30px 0 0 0;
}
.plan-layout {
padding: 0 0 30px 0;
}
section.client-sec {
padding: 30px 0 10px;
}
section.blog-sec {
padding-top: 30px;
}
.innerfooter {
padding: 30px 0;
}
.about-banner-details {
padding-right: 30px;
}
.choose-us-sec {
padding: 0 1.25rem;
}
}
@media screen and (max-width: 970px) {
.center-header .wrapper .btn {
display: block;
}
.center-header .wrapper .nav-links {
position: fixed;
height: 100vh;
width: 100%;
max-width: 350px;
top: 0;
left: -100%;
background: var(--black);
display: block;
padding: 50px 10px;
line-height: 50px;
overflow-y: auto;
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
transition: all 0.3s ease;
}
#center-menu-btn:checked ~ .nav-links {
left: 0%;
}
#close-btn:checked ~ .btn.center-menu-btn {
display: block;
}
.nav-links li {
margin: 15px 10px;
}
.center-header ul li {
display: block;
}
.nav-links li a,
.nav-links li label {
padding: 0 20px;
display: block;
color: var(--white);
}
ul.drop-menu li,
ul.drop-menu li a {
color: var(--black);
}
.nav-links .drop-menu {
position: static;
opacity: 1;
top: 65px;
visibility: visible;
margin-left: 20px;
padding: 0;
width: 100%;
max-height: 0px;
overflow: hidden;
box-shadow: none;
transition: all 0.3s ease;
}
#showDrop:checked ~ .drop-menu,
#showMega:checked ~ .mega-box {
max-height: 100%;
}
.nav-links .desktop-item {
display: none;
}
.nav-links .mobile-item {
display: block;
color: #f2f2f2;
font-size: 20px;
font-weight: 500;
padding-left: 20px;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease;
}
.nav-links .mobile-item:hover {
background: #3a3b3c;
}
.drop-menu li {
margin: 0;
}
.drop-menu li a {
border-radius: 5px;
font-size: 18px;
}
.mega-box {
position: static;
top: 65px;
opacity: 1;
visibility: visible;
padding: 0;
max-height: 0px;
overflow: hidden;
transition: all 0.3s ease;
}
.mega-box .content {
box-shadow: none;
flex-direction: column;
padding: 20px 20px 0 20px;
}
.mega-box .content .row {
width: 100%;
margin-bottom: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mega-box .content .row:nth-child(1),
.mega-box .content .row:nth-child(2) {
border-top: 0px;
}
.content .row .mega-links {
border-left: 0px;
padding-left: 15px;
}
.row .mega-links li {
margin: 0;
}
.content .row header {
font-size: 19px;
}
}
@media screen and (max-width: 992px) {
.single-home-icon {
padding: 4vh 10px;
}
.home-icon-layout .single-home-icon {
width: 50%;
}
.home-blue-counter,
.home-orange-counter {
padding: 1vh 3vw;
}
.home-counter {
width: 50%;
}
.plan-layout {
flex-wrap: wrap;
}
.plan-faq-sec {
padding: 0;
margin-top: 30px;
}
.plan-sec,
.plan-layout,
.plan-faq-sec,
.client-title {
width: 100%;
}
.plan-sec {
border: none;
}
.inner-client,
.innerfooter,
.awards-title,
.awards-description,
.awards-details,
.awards-inner,
.inner-testimonials-sec,
.inner-contact-sec {
flex-wrap: wrap;
}
.title br,
a.scroll-top,
.social-bar {
display: none;
}
.client-logo {
margin-top: 20px;
}
.footer-add {
order: 2;
}
.footer-inquiries {
order: 3;
}
.footer-newsletter {
order: 1;
}
.footer-logo,
.footer-add,
.footer-inquiries,
.footer-newsletter {
width: 50%;
}
.footer-newsletter,
.footer-logo {
margin-bottom: 20px;
}
.left-main-scroll {
bottom: 0;
left: 0;
top: unset;
}
.dark-light-sec {
transform: unset;
}
.sub-menu {
position: relative;
left: 10%;
height: 100%;
}
.menu-our-details div {
width: 50%;
}
.awards-description {
padding-right: 20px;
}
.awards-description,
.about-widgets,
.client-testimonials,
.testimonials-title-sec {
width: 100%;
}
.testimonials-title-sec {
margin-top: 20px;
}
.about-widgets.ms-5 {
margin-left: 0 !important;
margin-top: 10px;
}
.awards-title,
.awards-description,
.awards-details,
.contact-form {
width: 100%;
}
.get-in-touch,
.post-address {
width: 50%;
}
.get-in-touch,
.post-address {
padding: 1.25rem;
}
.service-form {
padding-left: 20px;
}
.breadcrumb ol {
flex-wrap: wrap;
}
.service-form {
padding-left: 20px;
}
.technologies-logo img {
width: 60px;
height: 60px;
}
.high-performance-title,
.high-performance-details {
width: 100%;
}
.business-strategy-img {
margin-left: 4%;
}
.choose-plan-details {
width: 100%;
}
.blog-layout .card {
width: 45%;
}
}
@media screen and (max-width: 767px) {
h1 {
font-size: 35px;
}
h2,
.banner-sec h1 {
font-size: 27px;
}
.inner-banner,
.home-service-layout {
display: block;
}
.banner-img-sec img,
.home-service-img img {
position: relative;
}
.banner-img-sec,
.home-service-img,
.banner-details-sec,
.home-icon-layout .single-home-icon,
.plan-sec,
.single-plan,
.blog-layout .card,
.footer-logo,
.footer-add,
.footer-inquiries,
.footer-newsletter,
.copywrite-sec p,
.banner-img-sec img,
.home-service-img img,
p.banner-highlighted,
.home-service-details,
.home-counter,
.about-img,
.about-details,
.about-img img,
.about-banner-details,
.about-banner-img,
.about-banner-img img,
.client-single-layout,
section.awards-sec,
.counter-img-sec .home-counter,
.team-img-sec,
.team-details-sec,
p.collaboration-details,
.single-awards,
.get-in-touch,
.post-address,
.service-form-img,
.service-form,
a.single-induries,
.single-high-performance,
.business-strategy-title,
.business-strategy-img,
form#resumeForm .mb-3,
.ss-item-content,
.leave-comment .single-field {
width: 100%;
}
p.banner-highlighted,
.about-img img,
.about-banner-img img {
left: 0;
position: relative;
}
.about-banner-sec .inner-about {
flex-direction: column-reverse;
}
.banner-details-sec,
.home-icon-layout,
.about-details,
.about-banner-details,
.inner-client-sec,
.testimonials-sec,
section.awards-sec,
.home-service-details,
.collaboration-sec,
section.service-form-sec,
.faq-sec,
section.high-performance,
.differentiates-sec {
padding: 30px 0;
}
.awards-details {
margin-top: 30px;
}
.single-home-icon::after {
display: none;
}
.single-home-icon {
padding: 0 0 20px 0;
}
.single-home-icon:last-child {
padding-bottom: 0;
}
.home-counter {
position: relative;
right: 0;
display: block;
text-align: center;
}
.choose-plan-details {
padding: 0;
}
.plan-sec {
flex-wrap: wrap;
border-right: 0;
}
.choose-plan-layout {
margin-bottom: 20px;
}
.single-plan:last-child,
.blog-layout .card {
margin-right: 0;
}
.single-plan:first-child {
padding-bottom: 20px;
border-bottom: 1px solid;
margin-bottom: 20px;
border-bottom: 1px solid var(--lightgray);
margin-right: 0;
}
.client-logo-layout img {
display: block;
margin: auto;
}
.client-logo-layout {
width: 50%;
}
footer .footer-widget-block:not(:first-child),
.footer-inquiries {
margin-top: 20px;
}
.copywrite-sec p,
.get-in-touch,
.post-address {
text-align: center;
}
.copywrite-sec ul {
margin: auto;
}
.copywrite-sec ul li {
display: block;
text-align: center;
}
.copywrite-sec ul li::after {
content: "";
}
.copywrite-sec,
.icon-sec,
.inner-collaboration {
flex-wrap: wrap;
}
.menu .links-container {
padding: 0 1rem;
}
.menu-our-details div {
width: fit-content;
margin: 0 auto 20px;
}
.menu-our-details div p {
text-align: center;
}
.menu .links-container li a {
font-size: 20px;
}
a.icon-layout {
width: 33.3%;
}
.breadcrumb-sec {
padding: 2.2rem 0;
}
.about-banner-img {
min-height: auto;
}
.circle-progress {
margin: auto;
display: block;
}
.client-testimonials {
margin-top: 30px;
}
.counter-img-sec img {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.inner-meetteam,
.service-form-layout {
flex-wrap: wrap;
}
.team-img-sec img {
height: 300px;
object-fit: cover;
object-position: top;
}
.team-details-sec {
display: block !important;
}
.inner-team-details {
position: relative;
}
.team-details-sec .-fade-up {
opacity: 1;
}
.single-awards p,
.single-awards img {
margin: auto;
}
.single-awards img,
.single-awards p {
margin: auto;
text-align: center;
display: block;
margin-bottom: 15px;
}
.headercontainer {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.even-home-service-row .home-service-details {
padding: 30px 0 30px 0;
}
.service-form-img img {
width: 100%;
position: relative;
}
.service-form-bg::before {
background: transparent;
display: none;
}
.service-form-img {
margin-bottom: 20px;
}
.service-form {
padding-left: 0;
}
.technologies-logo-sec,
section.home-service-sec {
padding-top: 30px;
}
.service-form-sec .w-75 {
width: 100% !important;
}
.service-form-bg.mt-5 {
margin-top: 30px !important;
}
section.home-service-sec.even-home-service-row {
padding-top: 0;
}
.light-slider .testimonials-title-sec {
margin-top: 0;
}
.technologies-logo a {
max-width: 100%;
flex: 50%;
margin-bottom: 7px;
}
.industries-sec,
.leave-comment {
padding: 30px 0 !important;
}
.industries-sec .title.text-center {
margin-bottom: 30px !important;
}
.menu-btn {
width: 40px;
height: 40px;
padding: 11px 3px;
}
.logo-sec img {
width: 80px;
}
.single-high-performance {
margin-bottom: 1.5rem !important;
}
.business-strategy-img {
padding-left: 0;
margin-left: 0;
border: none;
margin-top: 20px;
}
.business-strategy-details {
padding-bottom: 30px;
}
.single-opening {
display: block;
}
.opening-details {
margin: 10px 0;
}
.openings-layout .default-button,
#resumeForm .default-button {
padding: 0 0.4rem;
min-height: 2rem;
font-size: 12px;
line-height: unset;
}
.openings-layout .orange-btn svg,
#resumeForm .orange-btn svg {
width: 12px;
}
.career-join.py-5,
.exciting-job-sec.py-5 {
padding: 30px 0 !important;
}
.single-opening-img img {
margin-top: 0;
}
.ss-item h2 {
font-size: 50px;
}
.category-label {
display: block;
}
.ss-item::before {
height: 75vh;
}
.ss-arrow {
right: 1.25rem;
}
.ss-arrow.left-arrow {
right: 3.5rem;
}
.ss-body {
height: calc(100vh - 81px);
}
.leave-comment .single-field {
margin-right: 0;
}
.blog-layout .card {
padding-bottom: 3vh;
}
.team-details-sec.active-team-member .inner-team-details {
bottom: 0;
}
.blog-details img {
height: auto;
margin: 20px 0;
}
}
.breadcrumb-sec:before {
content: "";
width: 100%;
height: 100%;
/* background: #000; */
left: 0;
top: 0;
z-index: 1;
position: absolute;
opacity: 0.6;
}
.breadcrumb-sec {
background-image: url("https://img.freepik.com/free-photo/laptop-with-glowing-screen-table-dark-top-view-copy-space_169016-51607.jpg?t=st=1743419130~exp=1743422730~hmac=ff27f514d9f844ebc8b91d119e5a2d2867ed4733fd6bc111b55696421fefe560&w=1380") !important;
}
.breadcrumb-sec {
background: #000;
color: #fff;
padding: 130px 0;
position: relative;
background-size: cover;
background-position: center center;
text-align: center;
margin-bottom: 50px;
}
.breadcrumb-sec h1 {
color: #fff !important;
position: relative;
z-index: 9;
}
.breadcrumb {
position: relative;
z-index: 9;
color: #fff !important;
}
.breadcrumb-sec .breadcrumb li a {
font-weight: 600;
color: #fff;
}
.breadcrumb-sec .breadcrumb li {
font-weight: 600;
color: #fe4a23;
}
.single-home-feather::after {
background: none;
position: unset;
width: 0;
height: 0;
right: 0;
content: "";
top: 0;
bottom: 0;
margin: unset;
}
/* feather-down section */
.bg-section {
background-color: #fff1e0 !important;
}
.feather-maindiv {
padding: 2rem 0 2rem 0 !important;
}
.feather-section {
position: relative;
width: 100%;
height: 100vh;
max-height: 612px;
overflow: hidden;
/* margin-bottom: 50px; */
}
.feather-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(60%);
z-index: 1;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
z-index: 12;
padding: 20px;
width: 90%;
max-width: 800px;
}
.bg-video {
position: absolute;
top: 0;
left: 0;
background-color: #003a3440;
width: 100%;
height: 100%;
z-index: 10;
}
.video-heading {
font-size: 2.8rem;
line-height: 1.2;
margin-bottom: 16px;
color: #fff;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
/* word-spacing: -3px; */
}
.feather-span {
font-family: Vikendi;
letter-spacing: 2px;
}
.vikendi-span {
font-family: Vikendi;
letter-spacing: 1px;
}
.feather-para {
font-size: 1.1rem !important;
line-height: 1.6 !important;
color: #f0f0f0 !important;
max-width: 680px !important;
margin: 0 auto !important;
}
.business-goal-section {
width: 100%;
padding: 0;
margin: 30px 0px 20px 0px;
}
.feather-heading {
text-align: center !important;
font-family: Vikendi !important;
color: #003a34 !important;
font-size: 2.25rem !important;
letter-spacing: 1px;
}
.business-goal-div {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 71px !important;
flex-wrap: wrap !important;
padding-top: 0;
/* margin: 12px auto 12px auto !important; */
}
.business-goal-left-section {
flex: 1;
min-width: 250px;
}
.business-goal-para {
--tw-text-opacity: 1;
color: rgba(57, 63, 53, var(--tw-text-opacity));
font-family: alternate, ITC Avant Garde Gothic Std, sans-serif;
font-size: 1rem;
font-weight: 300;
line-height: 26px;
text-align: justify;
}
.business-goal-image {
position: relative;
display: inline-block;
animation: popIn 1s ease-out;
}
.business-goal-image img {
width: 400px;
height: 400px;
object-fit: cover;
border-radius: 50%;
filter: brightness(70%);
box-shadow: 0 0 30px rgba(0, 255, 100, 0.5);
}
.business-goal-right-section {
flex: 1;
min-width: 250px;
}
.circle-img-up {
position: absolute !important;
top: -59px !;
right: 0 !important;
left: 217px !important;
}
.circle-img-down {
position: absolute !important;
right: 0 !important;
left: 217px !important;
}
.solution-div {
width: 100%;
padding: 0;
margin: 30px 0px 20px 0px;
}
.line-img {
position: relative;
left: 121px;
bottom: 70px;
}
.card-solution {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease;
margin-bottom: 40px;
}
.card-body-solution {
text-align: center;
}
.card-body-solution p {
text-align: justify;
}
.achievment-card {
left: 0 !important;
width: 100% !important;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 30px 0;
position: unset;
}
.achievment-card-body {
background-color: rgb(0 58 41) !important;
width: 250px;
height: 250px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px;
text-align: center;
color: #fff;
}
.icon-card {
font-size: 33px;
margin-bottom: 5px;
}
.card-body-para {
margin: 5px 0 0;
font-size: 19px !important;
}
.card-body-heading {
margin: 0;
font-size: 24px !important;
}
.color-para {
color: rgba(0, 58, 52) !important;
}
.font-para {
font-family: alternate, ITC Avant Garde Gothic Std, sans-serif !important;
}
.para-color {
color: #010a44cc !important;
}
.achievements-heading {
color: #fff !important;
}
.circle-lines-up {
position: absolute;
z-index: 10 !important;
}
.circle-lines-down {
position: absolute !important;
/* top: ; */
z-index: 10 !important;
}
.circle-down {
position: absolute !important;
z-index: 10 !important;
}
.approachdiv {
position: relative !important;
}
.text-green-dark {
color: #003a34 !important;
}
.font-dry-brush {
font-family: "Dry Brush", sans-serif !important;
font-size: 28px !important;
}
@media (width: 1280px) and (height: 800px) {
.line-green {
display: none !important;
}
}
/* Healtcare page */
.healthcare-heading {
font-family: Arial, sans-serif !important;
letter-spacing: 0 !important;
font-weight: normal !important;
}
.healthcare-content ul {
padding: 0 0 0 40px;
margin: 0;
font-family: Arial, sans-serif !important;
}
.healthcare-content ul li {
font-size: 18px;
font-weight: 700;
text-align: left;
list-style: none;
background: url("https://www.healthandsafetygroup.com/images/elearning/li_bullet.png")
no-repeat top 5px left;
list-style: none;
background-size: 16px 14px;
padding: 0 0 0 35px;
color: #003a79;
margin-bottom: 10px;
font-family: Arial, sans-serif !important;
}
.home-rectangle-mage-img a.fancybox {
display: inline-block;
position: relative;
height: 265px !important;
width: 380px !important;
min-width: 380px !important;
font-family: Arial, sans-serif !important;
}
.home-rectangle-mage img {
height: 100%;
width: 100%;
}
.sidebarbox {
border-radius: 10px;
box-shadow: rgb(0 0 0 / 15%) 5px 5px 7px;
/* padding: 12px 0; */
font-family: Arial, sans-serif !important;
background-color: #e2f6f8;
}
.education-section .sidebarbox {
background-color: #fff;
}
.retail-section .sidebarbox {
background-color: #fff;
}
.sidebarbox ul {
border-radius: 0 0 10px 10px;
/* margin: 0 0 10px; */
padding: 0 0 6px;
font-family: Arial, sans-serif !important;
}
.sidebarbox li {
list-style-type: none;
margin: 0;
padding: 2px;
font-family: Arial, sans-serif !important;
}
.sidebarbox li a {
font-family: Arial, sans-serif !important;
color: #34588d !important;
display: block;
padding: 1px 0;
font-size: 15px;
}
.education-section .sidebarbox li a {
color: #000 !important;
}
.retail-section .sidebarbox li a {
color: #000 !important;
}
.card-heading {
letter-spacing: 0 !important;
color: #1b3d82;
font-size: 16px;
text-transform: none;
text-align: center;
border-radius: 10px 10px 0 0;
font-family: Arial, sans-serif !important;
/* margin: 10px 0 0; */
}
.custom-green-btn {
font-size: 16px;
line-height: 16px;
font-weight: 500;
color: rgb(255, 255, 255);
text-align: center;
position: relative;
z-index: 9;
display: inline-block;
background: rgb(0, 143, 69);
border-radius: 5px;
padding: 4px 10px;
text-decoration: none;
font-family: Arial, sans-serif !important;
}
.course-title {
color: #003a79 !important;
font-weight: 700 !important;
font-size: 28px !important;
line-height: 33.6px !important;
}
.course-card-shadow {
box-shadow: rgb(50 50 93 / 23%) 0 0 0 -20px,
rgb(69 68 49 / 20%) 6px 6px 12px 0, rgb(12 113 70 / 6%) 0 0 2px 3px inset !important;
}
/* #gradient {
position: absolute;
margin-left: -448px;
width: 100%;
content: "";
height: 282px;
z-index: -2;
background: linear-gradient(180deg, #b1c5dcad 70%, rgba(185, 185, 185, .06) 99%);
} */
.swiper {
width: 100%;
height: 100%;
}
.swiper-wrapper {
display: flex;
/* align-items: center; */
}
.swiper-slide {
text-align: center;
font-size: 18px;
/* background: #444; */
display: flex;
/* justify-content: center; */
align-items: center;
}
.swiper-button-next:after,
.swiper-button-prev:after {
--swiper-navigation-size: 26px !important;
font-weight: bold !important;
}
@media (width: 540px) and (height: 720px) {
.swiper-button-next,
.swiper-button-prev {
position: absolute !important;
top: 115px !important;
}
.swiper-button-next {
right: var(--swiper-navigation-sides-offset, -18px) !important;
}
.swiper-button-prev {
position: absolute !important;
top: 115px !important;
left: var(--swiper-navigation-sides-offset, -18px) !important;
}
.circle-lines-one {
width: 23% !important;
left: 100px !important;
top: 73px !important;
}
.circle-lines-two {
width: 33% !important;
right: 56px !important;
}
.circle-lines-three {
width: 28% !important;
left: 72px !important;
}
}
.autoplay-progress {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 10;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #003a79 !important;
}
.autoplay-progress svg {
--progress: 0;
position: absolute;
left: 0;
top: 0px;
z-index: 10;
width: 100%;
height: 100%;
stroke-width: 4px;
stroke: #003a79 !important;
fill: none;
stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
stroke-dasharray: 125.6;
transform: rotate(-90deg);
}
.swiper-pagination-bullet-active {
background: #003a79 !important;
}
.sliderSwiper .swiper-button-next:after {
content: "next" !important;
position: relative !important;
left: -3px !important;
top: -9px !important;
font-size: 20px !important;
}
.sliderSwiper .swiper-button-prev:after {
content: "prev" !important;
position: relative !important;
left: -6px !important;
top: -9px !important;
font-size: 20px !important;
}
.about-content h4,
p {
font-family: Arial, sans-serif !important;
color: #000 !important;
}
.standout-section h1,
h3,
h5,
p {
font-family: Arial, sans-serif !important;
}
.layout-right img {
box-shadow: rgb(50 50 93 / 23%) 0 0 0 -20px,
rgb(69 68 49 / 20%) 6px 6px 12px 0, rgb(12 113 70 / 6%) 0 0 2px 3px;
}
.line {
background-image: linear-gradient(#253a78 55%, rgba(255, 255, 255, 0) 0);
background-size: 3px 12px;
background-repeat: repeat-y;
background-position: center;
}
.tools-card-shadow {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.timeline-marker {
position: absolute;
top: 32px;
left: 0;
width: 16px;
height: 16px;
}
.review-section .swiper-button-next,
.review-section .swiper-button-prev,
.review-hsg-section .swiper-button-next,
.review-hsg-section .swiper-button-prev {
top: var(--swiper-navigation-top-offset, 25%) !important;
}
.review-section .swiper-button-prev,
.review-hsg-section .swiper-button-prev {
left: unset !important;
right: 58px !important;
}
.review-section .swiper-button-next::after,
.review-section .swiper-button-prev::after,
.review-hsg-section .swiper-button-next::after,
.review-hsg-section .swiper-button-prev::after {
content: "";
display: block;
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
}
.review-section .swiper-button-next::after {
background-image: url("/images/feather-down/testimonial-right-arrow.svg") !important;
}
.review-section .swiper-button-prev::after {
background-image: url("/images/feather-down/testimonial-left-arrow.svg") !important;
}
@media (max-width: 640px) {
/* or 576px */
.review-section .swiper-button-prev,
.review-hsg-section .swiper-button-prev {
left: 50% !important;
right: auto !important;
transform: translateX(-120%) !important;
bottom: 10px; /* or your desired position */
}
/* Next button */
.review-section .swiper-button-next,
.review-hsg-section .swiper-button-next {
left: 50% !important;
right: auto !important;
transform: translateX(20%) !important;
bottom: 10px;
}
.review-hsg-section .swiper-button-next,
.review-hsg-section .swiper-button-prev {
top: var(--swiper-navigation-top-offset, 21%) !important;
}
.unite-section .swiper-button-next,
.unite-section .swiper-button-prev {
top: var(--swiper-navigation-top-offset, 20%) !important;
}
}
@media (min-width: 641px) and (max-width: 1023px) {
.review-section .swiper-button-next,
.review-section .swiper-button-prev,
.review-hsg-section .swiper-button-next,
.review-hsg-section .swiper-button-prev {
top: var(--swiper-navigation-top-offset, 21%) !important;
}
}
.review-hsg-section .swiper-button-prev::after {
background-image: url("/images/feather-down/left-arrow-hsg.svg") !important;
}
.review-hsg-section .swiper-button-next::after {
background-image: url("/images/feather-down/right-arrow-hsg.svg") !important;
}
.review-hsg-section .swiper-button-next::after,
.review-hsg-section .swiper-button-prev::after {
content: "";
display: block;
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
}
.soltion-cards-shadow {
box-shadow: rgb(0 0 0 / 15%) 5px 5px 7px;
}
.hsg-tool-shadow {
box-shadow: rgb(50 50 93 / 23%) 0 0 0 -20px,
rgb(69 68 49 / 20%) 6px 6px 12px 0, rgb(12 113 70 / 6%) 0 0 2px 3px;
border-radius: 12px;
}
/* unite compliance */
.pastelSky {
background-color: #f6f9fc;
}
.primaryColor {
color: #191f3f !important;
}
.powderBlue {
background-color: #eaf1ff;
}
.infoColor {
color: #2463eb;
}
/* .cloudBlue:hover{
background-color: #dbe4ed !important;
} */
.solution-section .accordion-button::after {
background-image: none;
transform: none !important;
box-shadow: none !important;
}
.solution-section .accordion-button {
transition: none !important;
}
.solution-section .accordion-button:hover {
z-index: none !important;
}
.open-accordion {
border-bottom: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.puzzle-container {
display: grid;
grid-template-columns: repeat(6, 0fr);
gap: 2rem;
position: relative;
padding: 30px;
}
.puzzle-piece {
position: relative;
width: 160px;
height: 160px;
border: 3px solid #2d3748;
border-radius: 15px;
transition: all 0.3s ease;
cursor: pointer;
/* z-index: 1; */
}
/* .puzzle-piece:hover {
transform: scale(1.08);
z-index: 10;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
*/
/* Base colors for different technologies */
.piece-bg-up {
/* background: linear-gradient(135deg, #6c9dff, #f0f0f0); */
/* background: linear-gradient(135deg, #f0f0f0, #4a81f6); */
background: linear-gradient(178deg, #cfdeff, #4a81f6);
}
.piece-javascript,
.piece-tailwind,
.piece-vscode,
.piece-mysql {
background: linear-gradient(135deg, #f0f0f0, #4a81f6);
}
.piece-bg {
background: linear-gradient(178deg, #4a81f6, #cfdeff);
}
/* Top row pieces */
.top-left {
margin-right: -20px;
margin-bottom: -20px;
}
.top-middle {
margin-left: -22px;
margin-right: -20px;
margin-bottom: -20px;
}
.top-right {
margin-left: -22px;
margin-bottom: -20px;
}
/* Bottom row pieces */
.bottom-left {
margin-right: -20px;
margin-top: -20px;
}
.bottom-middle {
/* margin-left: -20px; */
margin-right: -20px;
margin-top: -20px;
}
.bottom-right {
/* margin-left: -20px; */
margin-top: -41px;
}
/* Tab and slot generation for different positions */
/* Content styling */
.tech-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
z-index: 3;
}
.logo-placeholder {
width: 36px;
height: 36px;
margin-bottom: 6px;
transition: all 0.3s ease;
}
.tech-name {
font-weight: bold;
color: #2d3748;
font-size: 14px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
}
/* .puzzle-piece:hover .tech-name {
transform: translateY(-2px);
} */
.js-text,
.vue-text,
.react-text,
.node-text {
font-size: 24px;
font-weight: 900;
color: #2d3748;
line-height: 1;
margin-bottom: 4px;
}
/* Hover effects for different directions */
/* .puzzle-piece:hover {
transform: scale(1.08);
}
*/
/* Add pseudo-elements for middle pieces */
.top-middle .bottom-tab,
.bottom-middle .right-tab {
display: block;
}
.puzzle-piece-left {
--r: 22px;
/* control the circle radius */
--s: 153px;
/* control the main size */
width: var(--s);
height: calc(var(--s) + var(--r));
mask: radial-gradient(
var(--r) at 50% calc(100% - var(--r)),
#000 calc(100% - 1px),
#0000
),
radial-gradient(var(--r) at right, #0000 calc(100% - 1px), #000) 0 0/100%
calc(100% - var(--r)) no-repeat;
/* background: #774F38; */
}
/* HTML: */
.puzzle-piece-right {
--r: 22px;
/* control the circle radius */
--s: 153px;
/* control the main size */
width: calc(var(--s) + var(--r));
aspect-ratio: 1;
--_g: /calc(2 * var(--r)) calc(2 * var(--r)) no-repeat radial-gradient(var(--r), #000
calc(100% - 1px), #0000);
mask: 0 calc(50% - var(--r) / 2) var(--_g),
calc(50% + var(--r) / 2) 100% var(--_g),
radial-gradient(var(--r) at right, #0000 calc(100% - 1px), #000) 100% 0 /
calc(100% - var(--r)) calc(100% - var(--r)) no-repeat;
/* background: #774F38; */
}
.puzzle-bottom-left {
/* HTML: */
--r: 22px;
/* control the circle radius */
--s: 153px;
/* control the main size */
width: calc(var(--s) + var(--r));
height: var(--s);
mask: radial-gradient(
var(--r) at calc(100% - var(--r)) 50%,
#000 calc(100% - 1px),
#0000
),
radial-gradient(var(--r) at top, #0000 calc(100% - 1px), #000) 0 /
calc(100% - var(--r)) 100% no-repeat;
/* background: #774F38; */
}
/* HTML: */
.puzzle-bottom-right {
--r: 22px;
/* control the circle radius */
--s: 153px;
/* control the main size */
width: calc(var(--s) + var(--r));
height: var(--s);
--_l: #0000 calc(100% - 1px), #000;
--_g: 0 / calc(100% - var(--r)) 100% no-repeat;
mask: radial-gradient(
var(--r) at calc(100% - var(--r)) 50%,
#000 calc(100% - 1px),
#0000
),
radial-gradient(var(--r) at top, var(--_l)) var(--_g) intersect,
radial-gradient(var(--r) at left, var(--_l)) var(--_g);
/* background: #774F38; */
}
/* HTML: */
.puzzle-top-last {
--r: 22px;
/* control the circle radius */
--s: 153px;
/* control the main size */
width: calc(var(--s) + var(--r));
height: var(--s);
mask: radial-gradient(var(--r) at var(--r) 50%, #000 calc(100% - 1px), #0000),
radial-gradient(var(--r) at bottom, #0000 calc(100% - 1px), #000) 100% /
calc(100% - var(--r)) 100% no-repeat;
/* background: #774F38; */
}
/* HTML: */
.puzzle-bottom-last {
--r: 22px;
/* control the circle radius */
--s: 153px;
/* control the main size */
width: var(--s);
height: calc(var(--s) + var(--r));
mask: radial-gradient(var(--r) at 50% var(--r), #000 calc(100% - 1px), #0000),
radial-gradient(var(--r) at left, #0000 calc(100% - 1px), #000) 100% 100%/100%
calc(100% - var(--r)) no-repeat;
/* background: #774F38; */
}
/* featherdown tools technology */
:root {
--color-primary: #003a34 !important;
--color-secondary: #cee4c3 !important;
--color-accent: #fff1e0 !important;
/* Responsive sizing variables */
--container-size: min(90vw, 90vh, 600px);
--outer-ring-size: calc(var(--container-size) * 0.83);
--middle-ring-size: calc(var(--container-size) * 0.58);
--inner-ring-size: calc(var(--container-size) * 0.37);
--center-size: calc(var(--container-size) * 0.23);
--tech-radius: calc(var(--container-size) * 0.42);
--tech-icon-size: clamp(2.5rem, 4vw, 3.5rem);
--tech-padding: clamp(0.5rem, 1.5vw, 0.75rem);
}
/* Float animation for particles */
@keyframes float {
0%,
100% {
transform: translateY(0px) translateX(0px);
}
50% {
transform: translateY(-10px) translateX(5px);
}
}
/* Entrance animations */
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes rocketEntrance {
from {
opacity: 0;
transform: scale(0.5) rotate(180deg);
}
to {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes techIconEntrance {
from {
opacity: 0;
transform: translate(var(--start-x), var(--start-y));
}
to {
opacity: 1;
transform: translate(var(--end-x), var(--end-y));
}
}
/* Animation classes */
.animate-fade-in-scale {
animation: fadeInScale 1s ease-out forwards;
}
.animate-rocket-entrance {
animation: rocketEntrance 1s ease-out forwards;
opacity: 0;
}
.animate-tech-entrance {
animation: techIconEntrance 1s ease-out forwards;
opacity: 0;
}
.animate-float-1 {
animation: float 3s ease-in-out infinite;
}
.animate-float-2 {
animation: float 4s ease-in-out infinite;
}
.animate-float-3 {
animation: float 5s ease-in-out infinite;
}
/* Custom spin speeds */
.animate-spin-slow {
animation: spin 20s linear infinite;
}
.animate-spin-reverse {
animation: spin 15s linear infinite reverse;
}
/* Delay classes */
.delay-200 {
animation-delay: 0.2s;
}
.delay-400 {
animation-delay: 0.4s;
}
.delay-600 {
animation-delay: 0.6s;
}
.delay-800 {
animation-delay: 0.8s;
}
.delay-900 {
animation-delay: 0.9s;
}
.delay-1000 {
animation-delay: 1s;
}
.delay-1100 {
animation-delay: 1.1s;
}
.delay-1200 {
animation-delay: 1.2s;
}
.delay-1300 {
animation-delay: 1.3s;
}
.delay-1400 {
animation-delay: 1.4s;
}
.delay-1500 {
animation-delay: 1.5s;
}
/* Responsive technology positioning */
.tech-laravel {
--end-x: var(--tech-radius);
--end-y: 0px;
--start-x: 0px;
--start-y: 0px;
}
.tech-mysql {
--end-x: calc(var(--tech-radius) * 0.707);
--end-y: calc(var(--tech-radius) * 0.707);
--start-x: 0px;
--start-y: 0px;
}
.tech-javascript {
--end-x: 0px;
--end-y: var(--tech-radius);
--start-x: 0px;
--start-y: 0px;
}
.tech-vuejs {
--end-x: calc(var(--tech-radius) * -0.707);
--end-y: calc(var(--tech-radius) * 0.707);
--start-x: 0px;
--start-y: 0px;
}
.tech-php {
--end-x: calc(var(--tech-radius) * -1);
--end-y: 0px;
--start-x: 0px;
--start-y: 0px;
}
.tech-git {
--end-x: calc(var(--tech-radius) * -0.707);
--end-y: calc(var(--tech-radius) * -0.707);
--start-x: 0px;
--start-y: 0px;
}
.tech-css {
--end-x: 0px;
--end-y: calc(var(--tech-radius) * -1);
--start-x: 0px;
--start-y: 0px;
}
.tech-html {
--end-x: calc(var(--tech-radius) * 0.707);
--end-y: calc(var(--tech-radius) * -0.707);
--start-x: 0px;
--start-y: 0px;
}
/* Responsive particle positioning */
.particle-1 {
transform: translate(
calc(var(--container-size) * 0.21),
calc(var(--container-size) * 0.21)
);
animation-delay: 0s;
}
.particle-2 {
transform: translate(calc(var(--container-size) * 0.3), 0px);
animation-delay: 0.2s;
}
.particle-3 {
transform: translate(
calc(var(--container-size) * 0.21),
calc(var(--container-size) * -0.21)
);
animation-delay: 0.4s;
}
.particle-4 {
transform: translate(0px, calc(var(--container-size) * -0.3));
animation-delay: 0.6s;
}
.particle-5 {
transform: translate(
calc(var(--container-size) * -0.21),
calc(var(--container-size) * -0.21)
);
animation-delay: 0.8s;
}
.particle-6 {
transform: translate(calc(var(--container-size) * -0.3), 0px);
animation-delay: 1s;
}
.particle-7 {
transform: translate(
calc(var(--container-size) * -0.21),
calc(var(--container-size) * 0.21)
);
animation-delay: 1.2s;
}
.particle-8 {
transform: translate(0px, calc(var(--container-size) * 0.3));
animation-delay: 1.4s;
}
/* Orbital ring gradient */
.orbital-gradient {
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(206, 228, 195, 0.3) 90deg,
transparent 180deg,
rgba(206, 228, 195, 0.3) 270deg,
transparent 360deg
);
}
/* Custom border colors */
.border-primary {
border-color: #003a34 !important;
}
/* Custom particle colors */
.particle-primary {
background-color: var(--color-primary);
}
.particle-secondary {
background-color: var(--color-secondary);
}
/* Initially hidden elements */
.initially-hidden {
opacity: 0;
}
/* Responsive logo styling */
.center-logo {
max-width: calc(var(--center-size) * 0.6);
max-height: calc(var(--center-size) * 0.6);
width: auto;
height: auto;
object-fit: contain;
filter: brightness(0) invert(1);
}
/* Responsive container */
.tech-stack-container {
width: var(--container-size);
height: var(--container-size);
}
/* Responsive rings */
.outer-ring {
width: var(--outer-ring-size);
height: var(--outer-ring-size);
}
.middle-ring {
width: var(--middle-ring-size);
height: var(--middle-ring-size);
}
.inner-ring {
width: var(--inner-ring-size);
height: var(--inner-ring-size);
}
.center-container {
width: var(--center-size);
height: var(--center-size);
}
/* Responsive tech icons */
.tech-icon {
width: var(--tech-icon-size);
height: var(--tech-icon-size);
}
.tech-container {
padding: var(--tech-padding);
}
/* Mobile optimizations */
@media (max-width: 640px) {
:root {
--container-size: min(85vw, 85vh, 400px);
}
.tech-container {
padding: clamp(0.375rem, 1vw, 0.5rem);
}
/* Reduce particle size on mobile */
.particle-1,
.particle-2,
.particle-3,
.particle-4,
.particle-5,
.particle-6,
.particle-7,
.particle-8 {
width: 0.375rem;
height: 0.375rem;
}
}
/* Very small screens */
@media (max-width: 480px) {
:root {
--container-size: min(90vw, 90vh, 320px);
}
}
/* HSG cube */
.cube-container {
width: 80px;
height: 80px;
position: relative;
transform-style: preserve-3d;
}
.cube-face {
position: absolute;
width: 80px;
height: 80px;
border: 1px solid rgba(37, 58, 120, 0.2);
}
.cube-top {
transform: rotateX(90deg) translateZ(40px);
}
.cube-left {
transform: rotateY(-90deg) translateZ(40px);
}
.cube-right {
transform: rotateY(0deg) translateZ(40px);
}
/* Isometric positioning for all cubes */
.laravel-cube,
.mysql-cube,
.js-cube,
.vue-cube,
.react-cube,
.node-cube {
transform: rotateX(-15deg) rotateY(15deg);
}
.cube-face img {
width: 50px;
height: 50px;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
/* Beautiful gradient combinations using your palette */
/* Gradient 1: Cream to Beige */
.gradient-cream-beige-top {
background: linear-gradient(135deg, #fdf8ed 0%, #e4dfde 100%);
}
.gradient-cream-beige-left {
background: linear-gradient(135deg, #e4dfde 0%, #d4c9c8 100%);
}
.gradient-cream-beige-right {
background: linear-gradient(135deg, #fdf8ed 0%, #e4dfde 70%, #d4c9c8 100%);
}
/* Gradient 2: Blue to Cream */
.gradient-blue-cream-top {
background: linear-gradient(135deg, #d2e2ea 0%, #fdf8ed 100%);
}
.gradient-blue-cream-left {
background: linear-gradient(135deg, #c2d2da 0%, #e4dfde 100%);
}
.gradient-blue-cream-right {
background: linear-gradient(135deg, #d2e2ea 0%, #fdf8ed 50%, #e4dfde 100%);
}
/* Gradient 3: Beige to Blue */
.gradient-beige-blue-top {
background: linear-gradient(135deg, #e4dfde 0%, #d2e2ea 100%);
}
.gradient-beige-blue-left {
background: linear-gradient(135deg, #d4c9c8 0%, #c2d2da 100%);
}
.gradient-beige-blue-right {
background: linear-gradient(135deg, #e4dfde 0%, #d2e2ea 70%, #c2d2da 100%);
}
/* Gradient 4: Gray to Cream */
.gradient-gray-cream-top {
background: linear-gradient(135deg, #f0f0f0 0%, #fdf8ed 100%);
}
.gradient-gray-cream-left {
background: linear-gradient(135deg, #e0e0e0 0%, #e4dfde 100%);
}
.gradient-gray-cream-right {
background: linear-gradient(135deg, #f0f0f0 0%, #fdf8ed 50%, #e4dfde 100%);
}
/* Gradient 5: Blue to Gray */
.gradient-blue-gray-top {
background: linear-gradient(135deg, #d2e2ea 0%, #f0f0f0 100%);
}
.gradient-blue-gray-left {
background: linear-gradient(135deg, #c2d2da 0%, #e0e0e0 100%);
}
.gradient-blue-gray-right {
background: linear-gradient(135deg, #d2e2ea 0%, #f0f0f0 70%, #e0e0e0 100%);
}
/* Hover effects */
.cube-container:hover {
transform: rotateX(-15deg) rotateY(15deg) scale(1.05);
transition: transform 0.3s ease;
}
.cube-container:hover .cube-face img {
transform: scale(1.1);
transition: transform 0.3s ease;
}
/* Mobile responsive styles */
@media (max-width: 768px) {
.cube-container {
width: 60px;
height: 60px;
}
.cube-face {
width: 60px;
height: 60px;
}
.cube-top {
transform: rotateX(90deg) translateZ(30px);
}
.cube-left {
transform: rotateY(-90deg) translateZ(30px);
}
.cube-right {
transform: rotateY(0deg) translateZ(30px);
}
.cube-face img {
width: 35px;
height: 35px;
}
}
@media (max-width: 480px) {
.cube-container {
width: 50px;
height: 50px;
}
.cube-face {
width: 50px;
height: 50px;
}
.cube-top {
transform: rotateX(90deg) translateZ(25px);
}
.cube-left {
transform: rotateY(-90deg) translateZ(25px);
}
.cube-right {
transform: rotateY(0deg) translateZ(25px);
}
.cube-face img {
width: 30px;
height: 30px;
}
}
.tooltip {
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #253a78 0%, #354a88 100%);
color: white;
padding: 8px 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 0 4px 12px rgba(37, 58, 120, 0.3);
}
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #253a78;
}
.tooltip-container:hover .tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-5px);
}
.tooltip-container {
position: relative;
display: inline-block;
}
/* inowco */
.inowco-tailwind {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.inowco-business-card {
box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
}
.inowco-point-card {
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
@keyframes float {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
}
@keyframes floatReverse {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(20px) rotate(-5deg);
}
}
@keyframes pulse {
0%,
100% {
opacity: 0.7;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
.inowco .tech-icon {
position: absolute;
width: 60px;
height: 60px;
opacity: 0.8;
transition: all 0.3s ease;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.inowco .tech-icon:hover {
opacity: 1;
transform: scale(1.2);
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}
/* Different animation delays and durations for variety */
.inowco .tech-icon:nth-child(1) {
animation: float 6s ease-in-out infinite;
animation-delay: 0s;
}
.inowco .tech-icon:nth-child(2) {
animation: floatReverse 8s ease-in-out infinite;
animation-delay: 1s;
}
.inowco .tech-icon:nth-child(3) {
animation: float 7s ease-in-out infinite;
animation-delay: 2s;
}
.inowco .tech-icon:nth-child(4) {
animation: floatReverse 9s ease-in-out infinite;
animation-delay: 3s;
}
.inowco .tech-icon:nth-child(5) {
animation: float 5s ease-in-out infinite;
animation-delay: 4s;
}
.inowco .tech-icon:nth-child(6) {
animation: floatReverse 6s ease-in-out infinite;
animation-delay: 5s;
}
.inowco .tech-icon:nth-child(7) {
animation: float 8s ease-in-out infinite;
animation-delay: 6s;
}
.inowco .tech-icon:nth-child(8) {
animation: floatReverse 7s ease-in-out infinite;
animation-delay: 7s;
}
/* Positioning for desktop */
.inowco .tech-html {
top: 15%;
left: 8%;
}
.inowco .tech-css {
top: 25%;
right: 12%;
}
.inowco .tech-js {
top: 45%;
left: 5%;
}
.inowco .tech-bootstrap {
top: 55%;
right: 8%;
}
.inowco .tech-laravel {
top: 75%;
left: 10%;
}
.inowco .tech-mysql {
top: 70%;
right: 15%;
}
.inowco .tech-git {
top: 35%;
left: 15%;
}
.inowco .tech-jquery {
top: 40%;
right: 20%;
}
/* Mobile responsive positioning */
@media (max-width: 768px) {
.inowco .tech-icon {
width: 40px;
height: 40px;
}
.inowco .tech-html {
top: 10%;
left: 5%;
}
.inowco .tech-css {
top: 15%;
right: 5%;
}
.inowco .tech-js {
top: 85%;
left: 5%;
}
.inowco .tech-bootstrap {
top: 85%;
right: 5%;
}
.inowco .tech-laravel {
top: 25%;
left: 2%;
}
.inowco .tech-mysql {
top: 30%;
right: 2%;
}
.inowco .tech-git {
top: 75%;
left: 15%;
}
.inowco .tech-jquery {
top: 75%;
right: 15%;
}
}
/* Particle effect */
.inowco .particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.inowco .particle {
position: absolute;
width: 3px;
height: 3px;
background: rgba(112, 128, 144, 0.3);
border-radius: 50%;
animation: particleFloat 10s linear infinite;
}
@keyframes particleFloat {
0% {
transform: translateY(100vh) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) translateX(50px);
opacity: 0;
}
}
.inowco .particle:nth-child(1) {
left: 10%;
animation-delay: 0s;
}
.inowco .particle:nth-child(2) {
left: 20%;
animation-delay: 2s;
}
.inowco .particle:nth-child(3) {
left: 30%;
animation-delay: 4s;
}
.inowco .particle:nth-child(4) {
left: 40%;
animation-delay: 6s;
}
.inowco .particle:nth-child(5) {
left: 50%;
animation-delay: 8s;
}
.inowco .particle:nth-child(6) {
left: 60%;
animation-delay: 1s;
}
.inowco .particle:nth-child(7) {
left: 70%;
animation-delay: 3s;
}
.inowco .particle:nth-child(8) {
left: 80%;
animation-delay: 5s;
}
.inowco .particle:nth-child(9) {
left: 90%;
animation-delay: 7s;
}
@keyframes clientFadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.client-section .animate-fade-in-up {
animation: clientFadeInUp 0.6s ease-out forwards;
}
.client-section .client-logo:nth-child(1) {
animation-delay: 0ms;
}
.client-section .client-logo:nth-child(2) {
animation-delay: 100ms;
}
.client-section .client-logo:nth-child(3) {
animation-delay: 200ms;
}
.client-section .client-logo:nth-child(4) {
animation-delay: 300ms;
}
.client-section .client-logo:nth-child(5) {
animation-delay: 400ms;
}
.client-section .client-logo:nth-child(6) {
animation-delay: 500ms;
}
.client-section .client-logo:nth-child(7) {
animation-delay: 600ms;
}
.client-section .client-logo:nth-child(8) {
animation-delay: 700ms;
}
.client-section .client-logo:nth-child(9) {
animation-delay: 800ms;
}
.client-section .client-logo:nth-child(10) {
animation-delay: 900ms;
}
.client-section .client-logo:nth-child(11) {
animation-delay: 1000ms;
}
.client-section .client-logo:nth-child(12) {
animation-delay: 1100ms;
}
.client-section .client-logo:nth-child(13) {
animation-delay: 1200ms;
}
.client-section .client-logo:nth-child(14) {
animation-delay: 1300ms;
}
.client-section .client-logo:nth-child(15) {
animation-delay: 1400ms;
}
.client-section .client-logo:nth-child(16) {
animation-delay: 1500ms;
}
.client-logo .tooltip-client {
opacity: 0 !important;
visibility: hidden !important;
transform: translateX(-50%) translateY(-50%) !important;
transition: all 0.3s ease !important;
z-index: 1000 !important;
}
[data-theme="dark"] .client-logo .tooltip-client {
background: rgba(20, 20, 20, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .client-logo .tooltip-client {
background: oklch(21% 0.034 264.665);
/* border: 1px solid rgba(255, 255, 255, 0.1); */
}
[data-theme="dark"] .tooltip-arrow {
background: rgba(20, 20, 20, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 0;
border-right: 0;
}
[data-theme="light"] .tooltip-arrow {
background: oklch(21% 0.034 264.665);
}
[data-theme="dark"] .client-logo:hover .tooltip-client {
box-shadow: rgba(1, 10, 68, 0.5) 6px 8px 14px,
rgba(0, 0, 0, 0.6) 10px 14px 20px, rgba(255, 255, 255, 0.04) 2px 3px 3px;
}
.client-logo:hover .tooltip-client {
opacity: 1 !important;
visibility: visible !important;
transform: translateX(-50%) translateY(0) !important;
}
.particle {
position: absolute;
background: #fe4a23;
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.particle:nth-child(odd) {
background: #fff;
animation-delay: -2s;
}
.particle:nth-child(3n) {
background: rgba(254, 74, 35, 0.6);
animation-delay: -4s;
}
@keyframes float {
0%,
100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.7;
}
25% {
transform: translateY(-20px) rotate(90deg);
opacity: 1;
}
50% {
transform: translateY(-40px) rotate(180deg);
opacity: 0.8;
}
75% {
transform: translateY(-20px) rotate(270deg);
opacity: 1;
}
}
.tech-grid {
background-image: linear-gradient(rgba(1, 10, 68, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(1, 10, 68, 0.1) 1px, transparent 1px);
background-size: 50px 50px;
animation: grid-move 20s linear infinite;
}
@keyframes grid-move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.glow-text {
text-shadow: 0 0 20px rgba(254, 74, 35, 0.3);
}
.pulse-border {
animation: pulse-border 2s ease-in-out infinite;
}
@keyframes pulse-border {
0%,
100% {
box-shadow: 0 0 0 0 rgba(254, 74, 35, 0.4);
}
50% {
box-shadow: 0 0 0 20px rgba(254, 74, 35, 0);
}
}
.slide-up {
animation: slide-up 1s ease-out forwards;
opacity: 0;
transform: translateY(30px);
}
.slide-up-delay-1 {
animation-delay: 0.2s;
}
.slide-up-delay-2 {
animation-delay: 0.4s;
}
.slide-up-delay-3 {
animation-delay: 0.6s;
}
@keyframes slide-up {
to {
opacity: 1;
transform: translateY(0);
}
}
.home-page h1 {
letter-spacing: 0 !important;
}
[data-theme="light"] .card-shadow {
border: 0 !important;
background-color: var(
--token-4f00a517-d75a-4557-9433-caf4536a911d,
rgb(245, 245, 245)
);
opacity: 1;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
rgba(0, 0, 0, 0.02) 0px 30px 30px -4px,
rgb(255, 255, 255) 0px 3px 1px 0px inset;
}
.card-inner-shadow {
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
rgba(0, 0, 0, 0.02) 0px 30px 30px -4px, rgb(0, 0, 0, 0.02) 0px 3px 1px 0px;
}
.card-logo-shadow {
filter: drop-shadow(0px 0.7px 0.7px rgba(0, 0, 0, 0.08))
drop-shadow(0px 1.8px 1.8px rgba(0, 0, 0, 0.08))
drop-shadow(0px 3.6px 3.6px rgba(0, 0, 0, 0.07))
drop-shadow(0px 6.86px 6.86px rgba(0, 0, 0, 0.07))
drop-shadow(0px 13.64px 13.64px rgba(0, 0, 0, 0.05))
drop-shadow(0px 30px 30px rgba(0, 0, 0, 0.02))
drop-shadow(0px 3px 1px rgba(255, 255, 255, 0.6));
}
/* .bg-dark{
background-color: var(--dark-color) !important;
} */
[data-theme="dark"] .bg-dark-theme {
background-color: var(---dark-color) !important;
}
[data-theme="dark"] .bg-image {
background-image: radial-gradient(
circle at center,
#010a44 0%,
#020202 50%
) !important;
}
[data-theme="dark"] p {
color: #fff !important;
}
.bg-dark-card {
background-color: oklch(98.5% 0.002 247.839);
}
.card-heading {
color: #010a44;
}
.para-color {
color: oklch(44.6% 0.03 256.802);
}
[data-theme="dark"] .bg-dark-card {
background: rgba(20, 20, 20, 0.85) !important;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: rgba(1, 10, 68, 0.5) 6px 8px 14px,
rgba(0, 0, 0, 0.6) 10px 14px 20px, rgba(255, 255, 255, 0.04) 2px 3px 3px;
}
/* [data-theme="dark"] .bg-dark-image {
border-radius: 16px;
box-shadow:
rgba(1, 10, 68, 0.5) 6px 8px 14px /* ← added your 010a44 shadow */
rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
rgba(0, 0, 0, 0.02) 0px 30px 30px -4px,
/* opacity: 1; */
} */
[data-theme="dark"] .bg-dark-card h5,
p {
color: #fff;
}
[data-theme="dark"] .card-logo-shadow {
filter: drop-shadow(0px 1px 1px rgba(255, 255, 255, 0.04))
drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.6))
drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.5))
drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.4));
}
[data-theme="dark"] .about-company .card-logo-shadow {
filter: drop-shadow(0px 1px 2px rgba(255, 255, 255, 0.05))
drop-shadow(0px 2px 4px rgba(166, 218, 255, 0.2));
}
.news-card-heading {
color: #1e2939;
}
[data-theme="dark"] .news-card-heading,
[data-theme="dark"] .card-heading {
color: #fff;
}
[data-theme="dark"] body {
background-color: #000;
}
[data-theme="dark"] .get-touch-icon .email h5 {
color: #fff !important;
}
[data-theme="dark"] .get-touch-icon .call h5 {
color: #fff !important;
}
[data-theme="dark"] .get-touch-icon .support h5 {
color: #fff !important;
}
[data-theme="dark"] .icon-text {
color: #fff;
}
.get-touch-icon .email h5 {
color: #010a44 !important;
}
.get-touch-icon .call h5 {
color: #010a44 !important;
}
.get-touch-icon .support h5 {
color: #010a44 !important;
}
.icon-text {
color: #010a44;
}
.st0,
.icon-call {
fill: #000000;
}
[data-theme="dark"] .st0,
.icon-call {
fill: #fff;
}
[data-theme="dark"] .icon-support,
.icon-support {
stroke: #fff !important;
}
.icon-support,
.icon-support {
stroke: #000000 !important;
}
[data-theme="dark"] .bg-get-touch {
background: #000;
}
.bg-get-touch {
background: linear-gradient(180deg, #f1400512 70%, #fff 70%);
}
[data-theme="dark"] .bg-dark-icon {
background: #f0f0f0;
box-shadow: rgba(1, 10, 68, 0.5) 0px 4px 12px,
/* blue glow */ rgba(0, 0, 0, 0.6) 0px 8px 16px,
/* deep dark lift */ rgba(255, 255, 255, 0.04) 0px 1px 2px;
}
[data-theme="light"] .dark-para-color {
color: #4a5565 !important;
}
[data-theme="light"] .dark-form label {
color: oklch(37.3% 0.034 259.733) !important;
}
[data-theme="dark"] .dark-text-color,
.dark-para-color,
.dark-form label {
color: #fff !important;
}
[data-theme="dark"] .dark-form {
background: rgba(20, 20, 20, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: rgba(1, 10, 68, 0.5) 6px 8px 14px,
rgba(0, 0, 0, 0.6) 10px 14px 20px, rgba(255, 255, 255, 0.04) 2px 3px 3px;
}
[data-theme="dark"] .dark-button {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
background: var(--orange);
box-shadow: rgba(1, 10, 68, 0.5) 0px 4px 12px,
/* blue glow */ rgba(0, 0, 0, 0.6) 0px 8px 16px,
/* deep dark lift */ rgba(255, 255, 255, 0.04) 0px 1px 2px;
}
[data-theme="dark"] .dark-button:hover {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
background: transparent;
}
[data-theme="light"] .client-img-dark {
display: none;
}
[data-theme="dark"] .client-img-dark {
display: block;
}
[data-theme="dark"] .client-img-light {
display: none;
}
[data-theme="dark"] .orange-btn {
/* background: rgba(20, 20, 20, 0.85); */
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: rgba(1, 10, 68, 0.5) 12px 14px 14px,
rgba(0, 0, 0, 0.6) 10px 14px 20px, rgba(255, 255, 255, 0.04) 2px 3px 3px;
}
.my-team-section .progress-circle {
width: 60px; /* reduced from 70px */
height: 60px;
border-radius: 50%;
background: conic-gradient(#fe4a23 0% 70%, #f0f0f0 70% 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 0 auto;
}
.my-team-section .progress-value {
width: 42px; /* around 70% of outer circle */
height: 42px;
border-radius: 50%;
background: #fff;
color: #010a44;
font-size: 14px;
font-weight: bold;
line-height: 42px;
text-align: center;
}
.news-card {
color: #010a44;
background-color: oklch(96.7% 0.003 264.542);
}
[data-theme="dark"] .news-card {
color: #fff;
}
.image-shadow,
.company-image-shadow,
.sevice-image-shadow {
border-radius: 20px !important;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
rgba(0, 0, 0, 0.02) 0px 30px 30px -4px;
opacity: 1;
}
[data-theme="dark"] .image-shadow{
box-shadow:
rgba(1, 10, 68, 0.5) 2px 2px 1px 0px inset, /* shifted 2px right, 2px down */
rgba(166, 218, 255, 0.31) 8px 8px 40px 6px; /* shifted 8px right, 10px down */
}
[data-theme="dark"] .company-image-shadow{
box-shadow:
rgba(1, 10, 68, 0.5) 2px 2px 1px 0px inset, /* shifted 2px right, 2px down */
rgba(166, 218, 255, 0.31) 6px 6px 40px 4px; /* shifted 8px right, 10px down */
}
[data-theme="dark"] .sevice-image-shadow{
box-shadow:
rgba(1, 10, 68, 0.5) 2px 2px 1px 0px inset, /* shifted 2px right, 2px down */
rgba(166, 218, 255, 0.31) 4px 12px 40px 4px; /* shifted 8px right, 10px down */
}
.nav-text{
color: #010a44;
}
.nav-text:hover{
color: #010a44;
}
[data-theme="dark"] .nav-text{
color: #fff;
}
.accordion-card-shadow{
background-color: var(
--token-4f00a517-d75a-4557-9433-caf4536a911d,
rgb(245, 245, 245)
);
/* height: 100%; */
/* width: 100%; */
opacity: 1;
/* border-radius: 20px; */
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
rgba(0, 0, 0, 0.02) 0px 30px 30px -4px,
rgb(255, 255, 255) 0px 3px 1px 0px inset;
}
.animate-in {
animation: slideInFromTop 300ms ease-out;
}
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card-logo-shadow {
filter: drop-shadow(0px 0.7px 0.7px rgba(0, 0, 0, 0.08))
drop-shadow(0px 1.8px 1.8px rgba(0, 0, 0, 0.08))
drop-shadow(0px 3.6px 3.6px rgba(0, 0, 0, 0.07))
drop-shadow(0px 6.86px 6.86px rgba(0, 0, 0, 0.07))
drop-shadow(0px 13.64px 13.64px rgba(0, 0, 0, 0.05))
drop-shadow(0px 30px 30px rgba(0, 0, 0, 0.02))
drop-shadow(0px 3px 1px rgba(255, 255, 255, 0.6));
}
.card-inner-shadow {
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
rgba(0, 0, 0, 0.02) 0px 30px 30px -4px,
rgb(0, 0, 0, 0.02) 0px 3px 1px 0px;
}
.default-button {
/* background: #010a44; */
color: #fff;
padding: 0 2rem;
font-size: 0.95em;
min-height: 3rem;
font-weight: 700;
cursor: pointer;
line-height: 1.5rem;
letter-spacing: -0.01em;
display: inline-flex;
vertical-align: middle;
justify-content: center;
align-items: center;
border-radius: 0.35rem;
transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
border: 2px solid transparent;
font-family: "DM Sans Bold", sans-serif;
}
.small-btn {
font-size: 0.9em;
}
.default-button:hover {
background: #010a44;
color: #fff;
}
/* Full width mega menu without scroll */
.mega-menu-full {
position: fixed;
top: 100px;
left: 0;
right: 0;
bottom: 0;
background: #f5f5f5;
z-index: 1050;
transform: translateY(-20px);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease;
overflow: hidden;
}
.mega-menu-full.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
/* .mega-menu-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 40;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
} */
.mega-menu-overlay.active {
opacity: 1;
visibility: visible;
}
[data-theme="light"] .contact-para{
color: #010a44 !important;
}
[data-theme="light"] .contact-para-text{
color: #000;
}
[data-theme="dark"] .contact-para,
[data-theme="dark"] .contact-para-text{
color: #fff !important;
}
[data-theme="dark"] .bg-dark-navbar{
background: var(--secondary) !important;
/* border: 1px solid rgba(255, 255, 255, 0.1) !important; */
}
.nav-link-text{
color: #010a44;
}
[data-theme="dark"] .nav-link-text{
color: #fff;
}
.nav-active-btn{
background-color: #fff;
}
.nav-hover-btn{
transition: transform 0.3s ease;
transform: scale(1);
}
.nav-hover-btn:hover{
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
rgba(0, 0, 0, 0.02) 0px 30px 30px -4px, rgb(0, 0, 0, 0.02) 0px 3px 1px 0px;
backdrop-filter: blur(10px);
transform: scale(1.04);
color:#010a44;
}
.nav-hover-btn span {
transition: transform 0.3s ease;
transform: scale(1);
}
.nav-hover-btn:hover span {
transform: scale(1);
transition: transform 0.3s ease;
}
[data-theme="dark"] .nav-active-btn{
background-color: #9690a240;
/* border: 1px solid rgba(255, 255, 255, 0.1); */
box-shadow: rgba(1, 10, 68, 0.5) 6px 6px 14px,
rgba(0, 0, 0, 0.6) 10px 14px 20px, rgba(255, 255, 255, 0.04) 2px 3px 3px;
}
[data-theme="dark"] .nav-hover-btn:hover{
background-color: #9690a240;
box-shadow: rgba(1, 10, 68, 0.5) 6px 6px 14px,
rgba(0, 0, 0, 0.6) 10px 14px 20px, rgba(255, 255, 255, 0.04) 2px 3px 3px;
}
.megamenu-footer,
.megamenu-border-color{
background-color: #f5f5f5;
border-color: #e5e7eb;
}
[data-theme="dark"] .megamenu-footer,
[data-theme="dark"] .megamenu-border-color{
background: var(--secondary);
border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .mega-menu-full{
background: var(--secondary);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.fa-icon-color{
color: #010a44;
font-size: 18px;
}
.timeline-circle{
background-color: #fff;
}
[data-theme="dark"] .fa-icon-color{
color: #000;
}
[data-theme="dark"] .timeline-circle{
background-color: #000;
}
.span-flex{
display: inline-flex;
align-items: center;
}
.dark-icon{
display: none;
}
.light-icon{
display: block;
}
[data-theme="dark"] .light-icon{
display: none;
}
[data-theme="dark"] .dark-icon{
display: block;
}
.icon-img-width{
width: 26px;
}
.timeline-line {
background: #010a44;
}
[data-theme="dark"] .timeline-line {
background: #fff;
}
.circle-color{
background: #fff;
}
[data-theme="dark"] .circle-color{
background: #9690a240;
}
.mobile-nav .nav-hover-btn:hover{
background-color: #9690a240;
/* color: #fff; */
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
rgba(0, 0, 0, 0.02) 0px 30px 30px -4px, rgb(0, 0, 0, 0.02) 0px 3px 1px 0px;
}
@media (max-width: 1280px) and (max-height: 800px) {
.sub-menu-nav{
max-width: 75rem !important;
}
.sub-menu-spacing{
gap:0 0.5rem !important;
}
.start-btn-padding{
padding: 0 1rem !important;
}
}
.icon-fa-color,
.time-line-circle-border{
color:#010a44;
}
[data-theme="dark"] .icon-fa-color,
[data-theme="dark"] .time-line-circle-border{
color:#fff;
}
.blog-inner-link{
font-weight: 600;
color:#0d6efd;
}
.blog-inner-active{
font-weight: 600;
color: #fe4a23;
}
.blog-inner-right{
color: #010a44;
font-size: 14px;
}
.blog-span-link{
color:#635d6f;
font-size: 15px;
}