html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
box-sizing {
box-sizing: border-box;
}
:root {
--primary-blue: #3B82F6;
--primary-indigo: #6366F1;
--text-dark: #111827;
--text-gray: #4B5563;
--bg-light: #F9FAFB;
}
body {
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
} header {
backdrop-filter: blur(18px);
background: rgba(255, 255, 255, .15);
border-bottom: 1px solid rgba(255, 255, 255, .15);
box-shadow: 0 10px 35px rgba(0, 0, 0, .08);
} .gradient-blue-purple {
background: linear-gradient(135deg, var(--primary-blue), var(--primary-indigo));
}
.gradient-blue-teal {
background: linear-gradient(135deg, var(--primary-blue), #10B981);
}
.logo-container {
display: flex;
align-items: center;
height: 50px; }
.logo-img {
height: 80px;
width: 150px;
transform: scale(1.3);
transform-origin: left center;
transition: transform 0.3s ease;
} .nav-link {
position: relative;
padding: 8px 14px;
border-radius: 8px;
transition: .3s;
}
.nav-link:hover {
color: #2563eb;
}
.nav-link.active {
color: #3b82f6;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 3px;
background: linear-gradient(90deg, #2563eb, #4f46e5);
transition: .3s;
}
.nav-link.active::after {
width: 100%;
}
.btn-primary {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.5);
}
.service-card {
transition: transform 0.3s ease, border-color 0.3s ease;
}
.service-card:hover {
transform: translateY(-5px);
border-color: var(--primary-blue);
} h1,
h2,
h3 {
color: var(--text-dark);
line-height: 1.2;
}
p {
color: var(--text-gray);
line-height: 1.6;
}
.slider-container {
position: relative;
width: 100%;
max-width: 900px; height: 350px;
margin: 50px auto;
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
}
.slide {
position: absolute;
width: 1200px;
height: 400px;
transition: all 0.8s ease-in-out; border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
background-color: #fff;
}
.slide img {
width: 100%;
height: 100%;
object-fit: contain; display: block;
} .center {
transform: translateX(0) scale(1);
z-index: 3;
filter: blur(0px);
opacity: 1;
} .right {
transform: translateX(45%) scale(0.85);
z-index: 1;
filter: blur(5px);
opacity: 0.7;
} .left {
transform: translateX(-45%) scale(0.85);
z-index: 1;
filter: blur(5px);
opacity: 0.7;
} .service-box {
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
} .service-box:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 30px -10px rgba(59, 130, 246, 0.18);
border-color: #3b82f6;
} .cursor-blink {
animation: blink 0.7s infinite;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.typewriter-text {
background: linear-gradient(90deg, #3B82F6, #6366F1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#font-color {
font-size: 18px;
}  .about-top-banner {
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
border-radius: 30px 30px 0 0;
} .floating-avatar {
position: absolute;
border-radius: 50%;
border: 5px solid #ffffff;
z-index: 30; background-color: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
}  .floating-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center; border-radius: 50%;
position: relative;
padding: auto;
z-index: 2;
}  .avatar-1 {
width: 100px;
height: 100px;
top: -5%;
left: 5%;
animation: floatA 6s ease-in-out infinite alternate;
}
.avatar-2 {
width: 120px;
height: 120px;
top: 10%;
right: 2%;
animation: floatB 7s ease-in-out infinite alternate;
}
.avatar-3 {
width: 85px;
height: 85px;
top: 40%;
left: -8%;
animation: floatC 5s ease-in-out infinite alternate;
}
.avatar-4 {
width: 110px;
height: 110px;
bottom: 30%;
right: -5%;
animation: floatA 8s ease-in-out infinite alternate;
}
.avatar-5 {
width: 90px;
height: 90px;
bottom: -10%;
left: 10%;
animation: floatB 6s ease-in-out infinite alternate;
}
.avatar-6 {
width: 95px;
height: 95px;
bottom: -5%;
right: 15%;
animation: floatC 7s ease-in-out infinite alternate;
}
.avatar-7 {
width: 75px;
height: 75px;
top: -10%;
left: 45%;
animation: floatA 5s ease-in-out infinite alternate;
}  .effect-gradient-leak::before {
content: '';
position: absolute;
inset: -8px;
background: linear-gradient(45deg, #ff007f, #7928ca, #0070f3);
border-radius: 50%;
filter: blur(12px);
opacity: 0.7;
z-index: 1;
animation: pulseGradient 3s infinite alternate;
} .effect-orbit::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
background-color: #3b82f6;
border-radius: 50%;
top: -20px;
left: 50%;
transform-origin: 50% 80px; animation: orbitDot 4s linear infinite;
z-index: 3;
box-shadow: 0 0 10px #3b82f6;
} .effect-stars::after {
content: '✨';
position: absolute;
font-size: 20px;
top: -10px;
right: -10px;
z-index: 3;
animation: popStars 2s ease-in-out infinite;
} .effect-glow {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
animation: pulseGlow 2s infinite cubic-bezier(0.66, 0, 0, 1);
} @keyframes floatA {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(15px, -15px);
}
}
@keyframes floatB {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-15px, 20px);
}
}
@keyframes floatC {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(10px, 10px) scale(1.05);
}
}
@keyframes pulseGradient {
0% {
opacity: 0.5;
}
100% {
opacity: 0.9;
}
}
@keyframes orbitDot {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes popStars {
0% {
opacity: 0;
transform: translateY(10px) scale(0.5);
}
50% {
opacity: 1;
transform: translateY(-10px) scale(1.2);
}
100% {
opacity: 0;
transform: translateY(-20px) scale(0.5);
}
}
@keyframes pulseGlow {
to {
box-shadow: 0 0 0 20px rgba(59, 130, 246, 0);
}
} @media (max-width: 1024px) {
.floating-avatar {
display: none;
}
}  .blue-banner {
background: linear-gradient(135deg, #1e3a8a, #3b82f6, #1e40af);
background-size: 200% 200%;
animation: gradientMove 3s ease infinite;
box-shadow: 0 0 30px rgba(59, 130, 246, 0.5); border: 3px solid #bfdbfe;
}
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
} .falling-star {
position: absolute;
font-size: 16px;
z-index: -1;
animation: starFall 3s linear infinite;
}
.star-1 {
left: 15%;
bottom: 0;
animation-duration: 2.5s;
animation-delay: 0s;
font-size: 20px;
}
.star-2 {
left: 35%;
bottom: 0;
animation-duration: 3s;
animation-delay: 0.5s;
}
.star-3 {
left: 50%;
bottom: 0;
animation-duration: 2s;
animation-delay: 1s;
font-size: 24px;
}
.star-4 {
left: 65%;
bottom: 0;
animation-duration: 2.8s;
animation-delay: 0.2s;
}
.star-5 {
left: 85%;
bottom: 0;
animation-duration: 3.2s;
animation-delay: 0.8s;
font-size: 18px;
}
@keyframes starFall {
0% {
transform: translateY(0px) rotate(0deg) scale(1);
opacity: 1;
}
100% {
transform: translateY(90px) rotate(180deg) scale(0.2);
opacity: 0;
}
} .blog-card {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
} .blog-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
border-color: #93c5fd;
} .card-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.blog-card:hover .card-img {
transform: scale(1.15) rotate(4deg); } body.modal-open {
overflow: hidden;
} .modal-show .modal-overlay {
opacity: 1;
}
.modal-show .modal-content {
transform: scale(1);
opacity: 1;
} .modal-img-zoom {
animation: imagePop 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes imagePop {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
} .custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #93c5fd;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #3b82f6;
}  .universe-system {
position: relative;
display: flex;
align-items: center;
justify-content: center;
} .orbit-track {
position: absolute;
border-radius: 50%;
border: 1px dashed rgba(59, 130, 246, 0.25);
pointer-events: none;
}
.track-1 {
width: 230px;
height: 230px;
}
.track-2 {
width: 360px;
height: 360px;
border-color: rgba(99, 102, 241, 0.2);
}
.track-3 {
width: 480px;
height: 480px;
border-color: rgba(59, 130, 246, 0.15);
} .orbit-ring {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
} .ring-1 {
animation: spinCW 25s linear infinite;
}
.ring-2 {
animation: spinCCW 35s linear infinite;
}
.ring-3 {
animation: spinCW 45s linear infinite;
}
@keyframes spinCW {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spinCCW {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
} .uni-icon {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border: 2px solid #eff6ff;
pointer-events: auto;
transition: transform 0.3s ease, box-shadow 0.3s ease; transform: rotate(var(--angle)) translate(var(--radius, 115px)) rotate(calc(-1 * var(--angle)));
} .ring-1 .uni-icon {
--radius: 115px;
}
.ring-2 .uni-icon {
--radius: 180px;
width: 36px;
height: 36px;
margin-top: -18px;
margin-left: -18px;
}
.ring-3 .uni-icon {
--radius: 240px;
width: 34px;
height: 34px;
margin-top: -17px;
margin-left: -17px;
}
.uni-icon img {
width: 20px;
height: 20px;
object-fit: contain;
} .universe-system:hover .orbit-ring {
animation-play-state: paused !important;
}
.uni-icon:hover {
transform: rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))) scale(1.4) !important;
z-index: 50;
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
border-color: #3b82f6;
} @media (max-width: 768px) {
.universe-system {
width: 340px;
height: 340px;
}
.track-1 {
width: 160px;
height: 160px;
}
.track-2 {
width: 250px;
height: 250px;
}
.track-3 {
width: 330px;
height: 330px;
}
.ring-1 .uni-icon {
--radius: 80px;
width: 32px;
height: 32px;
margin-top: -16px;
margin-left: -16px;
}
.ring-2 .uni-icon {
--radius: 125px;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
}
.ring-3 .uni-icon {
--radius: 165px;
width: 28px;
height: 28px;
margin-top: -14px;
margin-left: -14px;
}
.center-hub-circle {
width: 100px;
height: 100px;
}
} .workflow-tab.active {
background-color: #2563eb !important;
color: #ffffff !important;
box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4);
}
.workflow-tab {
transition: all 0.3s ease;
}
.workflow-tab:hover:not(.active) {
background-color: #eff6ff;
color: #2563eb;
border-color: #bfdbfe;
} .project-card {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.project-card:hover {
box-shadow: 0 20px 40px -15px rgba(37, 99, 235, 0.25);
border-color: rgba(96, 165, 250, 0.4);
} .faq-tab.active {
background-color: #2563eb !important;
color: #ffffff !important;
box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4);
}
.faq-tab {
transition: all 0.3s ease;
} .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
}
.faq-item.active {
border-color: #3b82f6 !important;
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15);
}
.faq-item.active .faq-icon {
transform: rotate(45deg);
background-color: #2563eb;
color: #ffffff;
} footer {
font-family: inherit;
} #toast-notification.show {
transform: translateY(0);
opacity: 1;
} @keyframes pulse-glow {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.15);
}
}
.animate-pulse {
animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
} #chatbot-window.active {
display: flex;
transform: scale(1);
opacity: 1;
} .scrollbar-none::-webkit-scrollbar {
display: none;
}
.scrollbar-none {
-ms-overflow-style: none;
scrollbar-width: none;
} @keyframes blink {
0% {
opacity: .2;
}
20% {
opacity: 1;
}
100% {
opacity: .2;
}
}
.typing-dot {
animation: blink 1.4s infinite both;
}
.typing-dot:nth-child(2) {
animation-delay: .2s;
}
.typing-dot:nth-child(3) {
animation-delay: .4s;
}  *,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
}
img,
video,
iframe,
canvas,
svg {
max-width: 100%;
height: auto;
display: block;
}
.container {
width: min(1320px, 100%);
margin: auto;
padding-left: 20px;
padding-right: 20px;
} header {
width: 100%;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
nav {
flex-wrap: wrap;
}
nav a {
white-space: nowrap;
}
.btn-primary {
white-space: nowrap;
} section {
overflow: hidden;
}
h1 {
line-height: 1.15;
}
p {
line-height: 1.7;
} .slider-container {
width: 100%;
max-width: 1200px;
height: auto;
min-height: 420px;
margin: auto;
}
.slide {
width: 100%;
max-width: 900px;
height: auto;
}
.slide img {
width: 100%;
height: auto;
object-fit: contain;
} @media(max-width:2560px) {
.container {
max-width: 1600px;
}
} @media(max-width:1920px) {
.container {
max-width: 1500px;
}
} @media(max-width:1600px) {
.container {
max-width: 1400px;
}
} @media(max-width:1440px) {
.container {
max-width: 1280px;
}
} @media(max-width:1366px) {
.container {
max-width: 1200px;
}
} @media(max-width:1280px) {
.container {
max-width: 1140px;
}
h1 {
font-size: 52px;
}
} @media(max-width:1200px) {
.container {
max-width: 100%;
padding: 0 25px;
}
nav {
gap: 25px;
}
} @media(max-width:1024px) {
.container {
padding: 0 22px;
}
header .container {
height: 80px;
}
.slider-container {
min-height: 340px;
}
} @media(max-width:992px) {
h1 {
font-size: 46px;
}
p {
font-size: 17px;
}
} @media(max-width:900px) {
.container {
padding: 0 20px;
}
} @media(max-width:768px) {
.container {
padding: 0 18px;
}
header .container {
height: 72px;
}
h1 {
font-size: 40px;
}
p {
font-size: 16px;
}
.slider-container {
min-height: 280px;
}
.slide {
max-width: 100%;
}
} @media(max-width:640px) {
.container {
padding: 0 16px;
}
h1 {
font-size: 36px;
}
} @media(max-width:576px) {
.container {
padding: 0 15px;
}
h1 {
font-size: 34px;
}
} @media(max-width:480px) {
.container {
padding: 0 14px;
}
h1 {
font-size: 30px;
}
.slider-container {
min-height: 240px;
}
} @media(max-width:430px) {
.container {
padding: 0 13px;
}
} @media(max-width:414px) {
h1 {
font-size: 28px;
}
} @media(max-width:390px) {
.container {
padding: 0 12px;
}
} @media(max-width:375px) {
h1 {
font-size: 26px;
}
} @media(max-width:360px) {
.container {
padding: 0 10px;
}
.slider-container {
min-height: 220px;
}
} @media(max-width:320px) {
.container {
padding: 0 8px;
}
h1 {
font-size: 23px;
}
p {
font-size: 15px;
}
} @media(max-width:280px) {
.container {
padding: 0 6px;
}
h1 {
font-size: 20px;
}
p {
font-size: 14px;
}
} #mobile-menu {
display: flex;
}
#mobile-menu.active {
left: 0;
}
.mobile-link {
font-size: 17px;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
header {
transition: .35s;
}
header .container {
min-height: 72px;
}
.logo img {
max-width: 42px;
}
@media(max-width:1200px) {
nav {
gap: 20px;
}
}
@media(max-width:1024px) {
nav {
gap: 18px;
}
header .btn-primary {
padding: 12px 18px;
font-size: 15px;
}
}
@media(max-width:992px) {
nav {
display: none;
}
header .btn-primary {
display: none;
}
}
@media(max-width:768px) {
header .container {
padding: 14px 18px;
}
header {
backdrop-filter: blur(20px);
}
}
@media(max-width:576px) {
header .container {
padding: 12px 15px;
}
#mobile-menu {
width: 260px;
}
}
@media(max-width:430px) {
#mobile-menu {
width: 240px;
}
}
@media(max-width:375px) {
#mobile-menu {
width: 220px;
}
.mobile-link {
font-size: 15px;
}
}
@media(max-width:320px) {
#mobile-menu {
width: 200px;
}
}
@media(max-width:280px) {
#mobile-menu {
width: 180px;
}
.mobile-link {
font-size: 14px;
}
} #unique-mobile-drawer.mobile-drawer-open {
left: 0 !important;
}
#unique-menu-overlay.overlay-open {
opacity: 1 !important;
pointer-events: auto !important;
} .wp-site-blocks,.wp-site-blocks > .wp-block-group{padding:0}.wp-caption{max-width:100%}.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.elementor-page .site-header,.elementor-page .site-footer{display:block}.article-single{max-width:900px;margin:130px auto 80px;padding:0 24px}.article-single__hero{width:100%;max-height:560px;object-fit:cover;margin:25px 0 35px}.article-single__content{font-size:18px;line-height:1.8;color:#4b5563}.article-single__content img{max-width:100%;height:auto}.article-single__content h2,.article-single__content h3{color:#111a35}.seo-wp-pagination{margin:40px 0;display:flex;gap:10px;justify-content:center}.seo-wp-pagination a,.seo-wp-pagination span{padding:10px 14px;border:1px solid #e5eaf2;color:#2864e8}.seo-wp-pagination .current{background:#2864e8;color:#fff}.seo-blog-empty{padding:60px 0;text-align:center;color:#748096}.seo-blog-card-image{display:block;width:100%;height:100%;object-fit:cover}.seo-blog-card-image--placeholder{width:100%;height:100%;background:linear-gradient(135deg,#dfe8ff,#f6f8ff)}.seo-card-author{color:#748096;font-size:11px}.seo-categories{display:flex;gap:8px;flex-wrap:wrap;margin:42px 0 25px;padding-bottom:15px;border-bottom:1px solid #e5eaf2}.seo-category-link{padding:8px 12px;background:transparent;color:#748096;font-size:12px;font-weight:700}.seo-category-link:hover{background:#f4f7ff;color:#2864e8}
@media (max-width:640px){.article-single{margin-top:100px;padding:0 16px}.article-single__content{font-size:16px}}