/* nav bar */

 @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/fontawesome.min.css);
 :root{
      --brand:#0d6efd;
      --brand-600:#0b5ed7;
      --brand-100:#e3f2fd;
      --muted:#192b45;
      --card-bg:#ffffff;
      --bg:#f5f8fb;
      --rounded:14px;
      --glass: rgba(13,110,253,0.06);
      --shadow: 0 10px 30px rgba(2,6,23,0.04);
      --transition: all 0.3s ease;
       --hero-gradient-start: #d3dce4; 
      --hero-gradient-end: #91a8c1; 
        --primary-blue: #0056b3; /* Medium Professional Blue */
      --secondary-blue: #003d82; /* Darker Blue */
      --accent-blue: #007bff; /* Bright Blue for buttons/focus */
      --text-color-dark: #111827; /* Dark Navy Text */
      --text-color-light: #4b5563;
      --bg-light-gray: #f4f6f8; /* Very light gray body background */
      --bg-white: #ffffff; /* Crisp white for cards/nav */
      --border-light: #e5e7eb;
    }
.navbar {
  background-color: #0d1128 !important;
  transition: background-color 0.3s ease;
  padding: 5px 0;
}
.hero{
      padding: 50px 0 80px;
     background:
        radial-gradient(800px 200px at 10% 10%, rgba(169, 177, 189, 0.626), transparent 10%),
        radial-gradient(500px 150px at 95% 85%, rgba(19, 72, 152, 0.674), transparent 25%),
        var(--bg); 
      position: relative;
      overflow: hidden;
        background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
        margin-bottom: -50px;
        animation: gradientShift 5s ease infinite alternate;
    
    }
    .hero::before {
     content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at 75% 25%, rgba(46, 130, 220, 0.15) 0%, transparent 10%),
                        radial-gradient(circle at 25% 75%, rgba(95, 121, 226, 0.775) 0%, transparent 50%);
        opacity: 0.;
        z-index: 0;
        animation: moveGradient 20s linear infinite alternate;
    }
      @keyframes gradientShift {
        0% { background-position: 0% 0%; }
        100% { background-position: 100% 100%; }
    }
    @keyframes moveGradient {
        0% { transform: translate(0, 0) rotate(0deg); }
        50% { transform: translate(20%, 20%) rotate(180deg); }
        100% { transform: translate(0, 0) rotate(360deg); }
    }
    .hero .container {
      position: relative;
      z-index: 1;
    }
    .hero .kicker{
      color:var(--brand); 
      font-weight:700; 
      letter-spacing:.08em; 
      font-size:.95rem;
      display: inline-block;
      padding: 6px 12px;
      background: var(--brand-100);
      border-radius: 20px;
      margin-bottom: 1rem;
    }
    .hero h1{
      font-size:2.8rem; 
      line-height:1.1; 
      margin-bottom:.8rem; 
      font-weight:700;
      background: linear-gradient(90deg, #0f172a, var(--brand));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .hero p.lead{
      color:var(--muted); 
      font-size:1.1rem;
      line-height: 1.6;
    }

    .hero-cta .btn-primary{
      background:linear-gradient(180deg,var(--brand),var(--brand-600)); 
      border:none; 
      padding:14px 26px; 
      border-radius:12px; 
      box-shadow:0 8px 30px rgba(13,110,253,0.12);
      font-weight: 600;
      transition: var(--transition);
    }
    .hero-cta .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(13,110,253,0.2);
    }
    .hero-cta .btn-outline{
      border-radius:12px; 
      padding:12px 22px; 
      border:1px solid rgba(13,110,253,0.12);
      font-weight: 600;
      transition: var(--transition);
    }
    .hero-cta .btn-outline:hover {
      background: var(--brand-100);
      border-color: var(--brand);
    }
     .trust-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }
      .trust-badge {
      background: rgba(71, 102, 170, 0.232);
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 0.8rem;
      color:#0d1128 ;
      box-shadow : 0 2px 5px rgba(0,0,0,0.05);
    }

    .home-about-section {
    padding: 80px 0;
    background-color: #f8f8f8;
    font-family: "Nunito Sans", Arial, sans-serif;
    background: #fff;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
    color: #474747;
}
.mt-5{
  margin-top: 2rem !important;
}


 .team-showcase {
      /* Added padding for better visual spacing */
      padding: 4rem 0; 
    }
    .team-showcase .team-card { /* New class for enhanced card */
      background: white;
      border-radius: var(--rounded);
      padding: 2rem;
      box-shadow: var(--shadow);
      border: 1px solid #edf2f7;
      height: 100%;
      transition: var(--transition);
    }
    .team-showcase .team-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(2,6,23,0.08);
    }
    .team-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--brand-100);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      font-size: 2rem;
      color: var(--brand);
      transition: var(--transition);
    }
    /* Hover effect for avatar */
    .team-showcase .team-card:hover .team-avatar {
      background: var(--brand);
      color: white;
    }

      .team-showcase .team-card:hover .team-avatar {
      background: var(--brand);
      color: white;
    }

    /* Expertise Grid Refinement in Hero Section */
    .expertise-grid-item {
      padding: 8px 0;
      border-radius: 8px;
      transition: var(--transition);
    }
    .expertise-grid-item:hover {
      background: rgba(13, 110, 253, 0.03); /* Light hover effect */
    }

    /* CARD LAYOUT */
    .card-modern{
      border-radius:var(--rounded);
      background:var(--card-bg);
      border:1px solid #edf2f7;
      box-shadow: var(--shadow);
      overflow:hidden;
      transition: var(--transition);
    }
    .card-modern:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(2,6,23,0.08);
    }



.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar .navbar-collapse {
  justify-content: flex-end;
  color: #edf2f7;
}

.navbar-scrolled {
  background-color: rgb(255, 255, 255, ) !important;
}

#ftco-navbar {
  z-index: 100;
}

.navbar-nav {
  font-weight: 700;
}

.dropdown-menu {
  background-color: #0d1128;
}

.dropdown-item {
  color: #fff;
  font-weight: 650;
}

.dropdown-item:hover {
  background-color: #0d1128;
  color: #00aeef;
  font-weight: 650;
}

.dropdown-menu {
  margin-top: 0 !important;
  margin-right: 50px;
}

.btn-sucess:hover {
  border: 1px solid #1be37c !important;
  background: transparent !important;
  color: #1be37c !important;
}

.ftco-section {
    padding: 5em 0;
    position: relative;
        display: block;
        color: #474747;
        text-align: justify !important;
        
}
.ftco-section  h2 {
      color: #233e62;
      
}
.ftco-section p {
   text-align: justify !important;

}
.core-feature-card-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}


@media (max-width: 1017px) {
  .nav-item {
    font-size: 14px;
  }
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2300a79f' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (min-width: 991px) {
  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
  }

}

/* footer */

.fab:hover {
  color: #1750ac !important;
}

.fa-chevron-right {
  color: inherit !important;
}

/* .ftco-footer a:hover{
  color: #0796fe !important;
} */

/* btn to go top */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 9999;
  font-size: 14px;
  border: none;
  outline: none;
  background-color: #00aeef;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 5px 5px 5px #fff;
}

#myBtn:hover {
  background-color: #555;
}

@media (max-width: 991px) {
  .navbar {
    padding: 12px 0;

  }
}