body{
font-family:'Inter',sans-serif;
}
.nav-link:focus, .nav-link:hover{
      color: rgb(0 105 152);
    border-bottom: solid 3px #006998;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: rgb(0 105 152);
    border-bottom: solid 3px #006998;
}
.hero-section{
padding:80px 0;
background:#f8fafc;
background: url(../images/hero-banner.jpg) right #edf1fa;
    background-repeat: no-repeat; 
}

/* .hero-section h1{
font-size:48px;
font-weight:700;
} */
 /* .hero-slider{
background:linear-gradient(135deg,#eef2ff,#f8fafc);
}

.hero-slide{
min-height:650px;
}

.hero-slide h1{
font-size:48px;
font-weight:800;
color:#0f172a;
}

.hero-slide h1 span{
color:#2563eb;
}

.hero-slide p{
font-size:18px;
margin:20px 0;
color:#475569;
}

.hero-btn{
background:#2563eb;
color:white;
padding:12px 28px;
border-radius:6px;
}

.hero-btn:hover{
background:#1e40af;
color:white;
} */
 .hero{
position:relative;
background:#0f172a;
color:white;
overflow:hidden;
padding:120px 0;
}

.hero-bg{
position:absolute;
width:900px;
height:900px;
background:radial-gradient(circle,#3b82f6,#9333ea);
filter:blur(160px);
opacity:0.45;
top:-200px;
left:-200px;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:40px;
}

.hero-content h1{
font-size:64px;
font-weight:800;
line-height:1.1;
}

.hero-content span{
background:linear-gradient(90deg,#38bdf8,#6366f1);
-webkit-background-clip:text;
color:transparent;
}

.hero-content p{
font-size:18px;
color:#cbd5e1;
margin:20px 0 30px;
}

.hero-buttons a{
padding:14px 30px;
border-radius:40px;
margin-right:10px;
text-decoration:none;
font-weight:600;
}

.btn-primary{
background:#3b82f6;
color:white;
}

.btn-outline{
border:1px solid white;
color:white;
}

.hero-image img{
width:100%;
max-width:600px;
animation:float 6s ease-in-out infinite;
}

.slide{
display:none;
}

.slide.active{
display:block;
animation:fade 1s ease;
}

@keyframes fade{
from{opacity:0;transform:translateY(40px)}
to{opacity:1;transform:translateY(0)}
}

@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-20px)}
}
.services-section{
    background-color: #edf1fa ;
}

.service-card{
background:white;
padding:10px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
transition:0.3s;
position: relative; 
  h5{ font-size: 14px; margin-bottom: 0;font-weight: bold;}
  p{font-size: 12px; margin-bottom: 0;}

  span {
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -28px;
    text-align: center;
    border-radius: 0 0 12px 12px;
    padding: 4px 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
  }
}

.service-card:hover{
transform:translateY(-6px);
z-index: 10;
  span {
    opacity: 1;
  }
}

.stats-section{
background:linear-gradient(90deg,#1e66f5,#22c55e);
color:white;
padding:20px 0px 10px 0px;
border-radius: 0px 0px 40px 0px;
}

.portfolio-card{
background:white;
padding:0px 0px 0px 15px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
}
.portfolio-card h5{
    font-size: 14px;
}
.portfolio-card p{
    font-size: 12px;
}
.portfolio-card img{
width:100%;
border-radius:10px;
/* margin-bottom:10px; */
}
.portfolio-card a{
    text-decoration: none;
    color: #22c55e;
}
.portfolio-section{
    background-color: #edf1fa;
}

.blob{
  width:100%;
  animation: blob 4s infinite;
}

@keyframes blob{
0%{
border-radius:40% 60% 70% 30% / 40% 40% 60% 50%;
}
50%{
border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;
}
100%{
border-radius:40% 60% 70% 30% / 40% 40% 60% 50%;
}
}

.circle-img {
  /* width: 200px;
  height: 200px;
  border-radius: 50%; */
  overflow: hidden;
  animation: pulse 2s infinite;
}

.circle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.testimonials{
background:#f8f9fb;
}

.testimonial-card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
height:100%;
}

.review{
font-size:15px;
color:#555;
margin-bottom:20px;
}

.client{
display:flex;
align-items:center;
gap:12px;
margin-bottom:10px;
}

.client img{
width:50px;
height:50px;
border-radius:50%;
}

.client h6{
margin:0;
font-weight:600;
}

.client span{
font-size:13px;
color:#777;
}

.stars{
color:#ffc107;
font-size:18px;
}
.main-footer{
background:#0f172a;
color:#cbd5e1;
padding:60px 0 20px;
}

.footer-logo{
color:#fff;
font-weight:700;
margin-bottom:15px;
}

.footer-about{
font-size:14px;
line-height:1.7;
}

.footer-links{
list-style:none;
padding:0;
}

.footer-links li{
margin-bottom:10px;
}

.footer-links a{
color:#cbd5e1;
text-decoration:none;
font-size:14px;
transition:0.3s;
}

.footer-links a:hover{
color:#38bdf8;
}

.footer-social a{
display:inline-block;
margin-right:10px;
color:#fff;
background:#1e293b;
padding:8px 10px;
border-radius:6px;
transition:0.3s;
}

.footer-social a:hover{
background:#38bdf8;
}

.newsletter{
display:flex;
margin-top:15px;
}

.newsletter input{
flex:1;
padding:10px;
border:none;
border-radius:5px 0 0 5px;
}

.newsletter button{
background:#38bdf8;
border:none;
padding:10px 18px;
color:#fff;
border-radius:0 5px 5px 0;
}

.footer-bottom{
font-size:14px;
}

.footer-bottom a{
color:#cbd5e1;
margin-left:15px;
text-decoration:none;
}

.footer-bottom a:hover{
color:#38bdf8;
}

html { scroll-behavior: smooth; }
  /* Offset anchor targets so sticky navbar doesn't cover them */
  #home, #about, #services, #portfolio, #contact {
      scroll-margin-top: 70px;
  }