/* =================================
GLOBAL
================================= */
body{
font-family:'Inter',sans-serif;
color:#333;
line-height:1.6;
}
a{
text-decoration:none;
}
h1,h2,h3,h4,h5{
font-weight:700;
}
section{
padding:60px 0;
}
img{
max-width:100%;
}
/* ================================
NAVBAR
================================ */
.navbar{
background:#212529;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.navbar-brand{
font-size:22px;
font-weight:700;
}
/* nav links */
.navbar .nav-link{
color:#ddd;
font-weight:500;
padding:8px 14px;
position:relative;
transition:0.3s;
}
.navbar .nav-link:hover{
color:#0d6efd;
}
/* active link */
.navbar .nav-link.active{
color:#0d6efd !important;
font-weight:600;
}
/* underline hover animation */
.navbar .nav-link::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#0d6efd;
transition:width .3s ease;
}
.navbar .nav-link:hover::after{
width:100%;
}
/* hide bootstrap default dropdown caret */
.dropdown-toggle::after{
display:none;
}
/* rotate dropdown arrow */
.dropdown:hover i{
transform:rotate(180deg);
transition:.3s;
}
/* dropdown menu */
.dropdown-menu{
border:none;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}
/* dropdown items */
.dropdown-item{
padding:10px 16px;
transition:.2s;
}
.dropdown-item:hover{
background:#f8f9fa;
color:#0d6efd;
}
/* CTA button */
.navbar .btn{
font-weight:600;
padding:8px 20px;
}
/* dark mode toggle */
#darkToggle{
width:42px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* mobile optimization */
@media (max-width:991px){
.navbar .nav-link::after{
display:none;
}
.navbar-nav{
padding-top:10px;
}
}
/* =================================
HERO SECTION
================================= */
.hero-section{
min-height:70vh;
 /* white gray bg*/
/*background:#f8f9fa; white gray bg*/
 background: linear-gradient(135deg,#f8fbff,#eef4ff);
  /* Soft Blue Tech Gradient
background: linear-gradient(135deg,#f8fbff 0%, #eef5ff 40%, #e4f0ff 100%);*/
/*Modern Startup Gradient
  background: linear-gradient(135deg,#f7faff 0%, #eef2ff 50%, #f0f9ff 100%);*/
  /*Premium Agency Gradient
  background: linear-gradient(120deg,#f8fafc 0%, #e0ecff 100%);*/
  /*More Attractive Glow Style
  background: radial-gradient(circle at top right,#e8f1ff,#f8fbff 60%);*/
  /*background: linear-gradient(135deg,#f8fbff,#eaf2ff);*/
  /*background: radial-gradient(circle,#dbeafe,transparent 70%);*/
padding:120px 0;
display:flex;
align-items:center;
}
.hero-title{
font-size:48px;
font-weight:700;
line-height:1.3;
min-height:120px;
}
.hero-text{
font-size:18px;
color:#666;
}
#typing{
border-right:3px solid #0d6efd;
padding-right:6px;
}
/* Floating icon */
.hero-animation i{
font-size:120px;
color:#0d6efd;
animation:float 3s ease-in-out infinite;
}
@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0);}
}
/* =================================
ANIMATIONS
================================= */
.fade-up{
opacity:0;
transform:translateY(30px);
transition:0.6s;
}
.fade-up.show{
opacity:1;
transform:translateY(0);
}
/* =================================
BUTTONS
================================= */
.btn-primary{
background:#0d6efd;
border:none;
padding:10px 24px;
}
.btn-primary:hover{
background:#0b5ed7;
}
/* =================================
CARDS
================================= */
.card{
border:none;
border-radius:12px;
transition:0.3s;
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}
.card.border-primary{
transform:scale(1.05);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}
/* =================================
CTA SECTION
================================= */
.cta-section{
background:#0d6efd;
padding:80px 0;
}
/* =================================
PORTFOLIO
================================= */
.portfolio-card img{
border-radius:8px;
}
.portfolio-card{
transition:0.3s;
}
.portfolio-card:hover{
transform:translateY(-5px);
}
/* =================================
TESTIMONIAL
================================= */
.testimonial{
font-style:italic;
}
.testimonial strong{
display:block;
margin-top:10px;
}
/* =================================
PAGE HEADER
================================= */
.page-header{
background:#f8f9fa;
}
.page-header h1{
font-size:36px;
}
/* =================================
FORMS
================================= */
.form-control{
border-radius:6px;
padding:10px;
}
.form-control:focus{
box-shadow:none;
border-color:#0d6efd;
}
/* =================================
BLOG
================================= */
.blog-card{
transition:0.3s;
}
.blog-card:hover{
transform:translateY(-5px);
}
/* =================================
FOOTER
================================= */
footer{
background:#111;
color:#bbb;
}
footer h5{
color:#fff;
}
footer a{
color:#bbb;
}
footer a:hover{
color:#fff;
}
/* =================================
SOCIAL ICONS
================================= */
.social-icons a{
margin-right:10px;
font-size:18px;
color:#bbb;
}
.social-icons a:hover{
color:#fff;
}
/* =================================
WHATSAPP FLOAT BUTTON
================================= */
.whatsapp-float{
position:fixed;
bottom:25px;
right:25px;
background:#25D366;
color:white;
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
border-radius:50%;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
z-index:999;
}
.whatsapp-float:hover{
background:#20b858;
}
/* =================================
SOCIAL SHARE BAR
================================= */
.share-bar{
position:fixed;
left:10px;
top:40%;
display:flex;
flex-direction:column;
gap:10px;
z-index:1000;
}
.share-bar a{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:#0d6efd;
color:white;
border-radius:5px;
}
/* =================================
PAGE LOADER
================================= */
#loader{
position:fixed;
width:100%;
height:100%;
background:white;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}
.spinner{
width:50px;
height:50px;
border:5px solid #eee;
border-top:5px solid #0d6efd;
border-radius:50%;
animation:spin 1s linear infinite;
}
@keyframes spin{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
/* =================================
MOBILE
================================= */
@media (max-width:768px){
.hero-section{
text-align:center;
padding:80px 0;
}
.hero-title{
font-size:34px;
min-height:auto;
}
.hero-animation i{
font-size:90px;
margin-top:20px;
}
}
/* ===== BUTTON MICRO ANIMATION ===== */
.btn{
transition:all 0.3s ease;
}
.btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.15);
}
/* ===== CARD PREMIUM HOVER ===== */
.card{
position:relative;
overflow:hidden;
}
.card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.4),
transparent
);
transition:0.6s;
}
.card:hover::before{
left:100%;
}
/* ===== IMAGE HOVER EFFECT ===== */
.portfolio-card{
overflow:hidden;
}
.portfolio-card img{
transition:0.4s;
}
.portfolio-card:hover img{
transform:scale(1.08);
}
/* ===== NAVBAR LINK ANIMATION ===== */
.navbar .nav-link{
position:relative;
}
/* navbar underline animation fix */
.navbar .nav-link{
position:relative;
}
.navbar .nav-link::after{
content:"";
position:absolute;
left:50%;
bottom:-6px;
width:0;
height:2px;
background:#0d6efd;
transition:0.3s;
transform:translateX(-50%);
}

.navbar .nav-link:hover::after{
width:60%;
}
.navbar .nav-link.active::after{
width:60%;
}
/* remove underline for dropdown */
.navbar .dropdown-toggle::after{
border-top:.3em solid;
margin-left:.4em;
}
/* ===== PAGE TRANSITION ===== */
body{
animation:fadePage 0.4s ease;
}
@keyframes fadePage{
from{
opacity:0;
}
to{
opacity:1;
}
}
/* =================================
SCROLL ANIMATION
================================= */
.reveal{
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
}
.reveal.active{
opacity:1;
transform:translateY(0);
}
/* optional variations */
.reveal-left{
opacity:0;
transform:translateX(-40px);
transition:all 0.8s ease;
}
.reveal-left.active{
opacity:1;
transform:translateX(0);
}
.reveal-right{
opacity:0;
transform:translateX(40px);
transition:all 0.8s ease;
}
.reveal-right.active{
opacity:1;
transform:translateX(0);
}
/* =================================
DARK MODE
================================= */
.dark-mode{
background:#121212;
color:#ddd;
}
.dark-mode section{
background:#121212;
}
.dark-mode .hero-section{
background:#121212;
}
.dark-mode .card{
background:#1e1e1e;
color:#ddd;
}
.dark-mode .navbar{
background:#000 !important;
}
.dark-mode footer{
background:#000;
}
.dark-mode a{
color:#8ab4f8;
}
.dark-mode .btn-primary{
background:#2563eb;
}

.client-logo img{
    max-height: 60px;
    width: auto;
    object-fit: contain;
    opacity: 0.8;
    transition: 0.3s;
}

.client-logo img:hover{
    opacity: 1;
}

.logo-marquee {
overflow: hidden;
position: relative;
width: 100%;
}

.logo-track {
display: flex;
width: max-content;
animation: scrollLogos 35s linear infinite;
}

.logo-track img {
height: 60px;
margin: 0 40px;
opacity: 0.7;
transition: opacity 0.3s;
}

.logo-track img:hover {
opacity: 1;
}

@keyframes scrollLogos {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.logo-marquee:hover .logo-track{
animation-play-state: paused;
}