:root {

  --navy: #0b2545;

  --accent: #ffb400;

  --muted: #6c7b8a;

}



* {

  box-sizing: border-box;

}



body {

  font-family: Inter, system-ui, Arial, sans-serif;

  padding-top: 72px;

  background: #f8fafc;

  color: #213547;

}



/* ===============================

   UTILITY CLASSES

================================= */

.bg-navy {

  background: var(--navy) !important;

}



.text-accent {

  color: var(--accent);

  letter-spacing: 0.8px;

}



.invert-logo {

  filter: brightness(0) invert(1);

}



.section-title {

  color: var(--navy);

  margin-bottom: 1.5rem;

  position: relative;

}



.section-title::after {

  content: '';

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  bottom: -10px;

  width: 60px;

  height: 4px;

  background: var(--accent);

  border-radius: 4px;

}



/* ===============================

   BUTTON STYLES

================================= */

.btn-warning {

  background: var(--accent);

  border: none;

  color: var(--navy);

  border-radius: 50px;

  padding: 12px 32px;

  font-weight: 600;

  transition: all 0.3s ease;

}



.btn-warning:hover {

  background: #ffc94d;

  transform: translateY(-3px);

}



.btn-outline-light {

  border-radius: 50px;

  border-width: 2px;

  font-weight: 600;

  transition: all 0.3s ease;

}



.btn-outline-light:hover {

  background: #fff;

  color: var(--navy);

  transform: translateY(-3px);

}



.btn-primary {

  background-color: #0d3b66;

  border: none;

  border-radius: 12px;

}



.btn-primary:hover {

  background-color: #08294a;

}



/* ===============================

   NAVIGATION

================================= */

.navbar .nav-link.active {

  background: #ffebc2;

  color: var(--navy);

  border-radius: 6px;

  padding: 6px 12px;

}



.navbar-toggler {

  border: none;

  padding: 4px 8px;

}



.navbar-toggler:focus {

  box-shadow: none;

}



.navbar-collapse {

  text-align: center;

}



.navbar-nav .nav-link {

  padding: 10px 15px;

  margin: 2px 0;

}



/* ===============================

   HERO SECTION

================================= */

.hero-section {

  min-height: 90vh;

  background: linear-gradient(120deg, rgba(11, 37, 69, 0.95) 50%, rgba(11, 37, 69, 0.8)), 

              url('../images/hero-bg.jpg') center/cover no-repeat;

  display: flex;

  align-items: center;

  position: relative;

  overflow: hidden;

  padding: 80px 0;

}



.hero-section h1 {

  line-height: 1.3;

  color: #fff;

}



.hero-section p {

  font-size: 1.2rem;

  color: #e0e6ee;

}



.hero-image-wrapper {

  position: relative;

  display: inline-block;

}



.hero-img {

  border-radius: 18px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);

}



.floating-card {

  position: absolute;

  bottom: -20px;

  left: 50%;

  transform: translateX(-50%);

  background: #fff;

  color: var(--navy);

  border-radius: 50px;

  padding: 10px 24px;

  font-weight: 500;

  display: inline-flex;

  align-items: center;

  font-size: 0.95rem;

  animation: floatY 3s ease-in-out infinite;

}



@keyframes floatY {

  0%, 100% { transform: translate(-50%, 0); }

  50% { transform: translate(-50%, -8px); }

}



/* ===============================

   SERVICES SECTION

================================= */

.service-card {

  background: #fff;

  border-radius: 12px;

  box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06);

  margin-bottom: 20px;

}



.service-img {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  object-fit: cover;

}



/* ===============================

   TIMELINE SECTION

================================= */

.timeline {

  position: relative;

  padding-left: 24px;

  border-left: 3px solid var(--accent);

  margin-bottom: 20px;

}



.timeline-item {

  position: relative;

  padding: 10px 0;

}



.timeline-item::before {

  content: '';

  position: absolute;

  left: -21px;

  top: 12px;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  background: var(--navy);

  border: 3px solid #fff;

}



/* ===============================

   CERTIFICATIONS

================================= */

.certification-item {

  border: 1px solid var(--navy);

  border-radius: 8px;

}



/* ===============================

   PARTNERS/CLIENTS SECTION

================================= */

.partner-logo {

  background: #fff;

  border-radius: 10px;

  padding: 20px;

  box-shadow: 0 3px 8px rgba(0,0,0,0.1);

  transition: all 0.3s ease;

  height: 100%;

  margin-bottom: 15px;

}



.partner-logo img {

  max-height: 60px;

  object-fit: contain;

  opacity: 0.8;

  transition: all 0.3s ease;

}



.partner-logo:hover {

  transform: translateY(-5px);

  box-shadow: 0 6px 15px rgba(0,0,0,0.15);

}



.partner-logo:hover img {

  filter: none;

  opacity: 1;

}



/* ===============================

   CONTACT SECTION

================================= */

.contact-section {

  background: linear-gradient(180deg, #f8f9fa 0%, #eef2f6 100%);

}



.contact-info-card, 

.contact-form-card {

  transition: all 0.4s ease;

  margin-bottom: 20px;

}



.contact-info-card:hover, 

.contact-form-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

}



.contact-form-card input,

.contact-form-card textarea {

  border-radius: 10px;

  border: 1px solid #ccd2da;

  transition: all 0.3s ease;

}



.contact-form-card input:focus,

.contact-form-card textarea:focus {

  border-color: #0d3b66;

  box-shadow: 0 0 0 0.2rem rgba(13, 59, 102, 0.15);

}



/* ===============================

   CTA BANNER

================================= */

.cta-banner {

  position: relative;

  display: flex;

  align-items: center;

  min-height: 200px;

  background-color: var(--navy);

}



.cta-banner .overlay {

  z-index: 1;

}



.cta-banner .container {

  z-index: 2;

}



.cta-title {

  font-size: 2rem;

  line-height: 1.2;

  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

  color: #ffffff;

}



.cta-subtitle {

  font-size: 1.1rem;

  opacity: 0.9;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

  color: #ffffff;

}



.cta-button {

  border-radius: 50px;

  padding: 12px 40px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  box-shadow: 0 4px 15px rgba(255, 180, 0, 0.3);

  transition: all 0.3s ease;

}



.cta-button:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(255, 180, 0, 0.4);

}



/* ===============================

   FOOTER

================================= */

footer p,

footer h5 {

  color: #e6eef8;

}



/* ===============================

   IMAGE STYLES

================================= */

img.img-fluid {

  max-width: 100%;

  height: auto;

}



/* ===============================

   MOBILE RESPONSIVE STYLES

================================= */

@media (max-width: 768px) {

  body {

    padding-top: 56px;

  }

  

  .hero-section {

    min-height: auto;

    padding: 40px 0;

    text-align: center;

  }

  

  .hero-section h1 {

    font-size: 1.9rem;

  }

  

  .hero-section p {

    font-size: 1rem;

  }

  

  .hero-buttons {

    display: flex;

    flex-direction: column;

    gap: 10px;

  }

  

  .hero-buttons .btn {

    width: 100%;

    margin: 5px 0;

  }

  

  .floating-card {

    position: relative;

    bottom: 0;

    transform: none;

    margin-top: 20px;

    width: 90%;

    justify-content: center;

    left: 0;

  }

  

  section {

    padding: 40px 0;

  }

  

  .stats-section {

    height: auto !important;

    min-height: 300px;

    padding: 50px 0 !important;

  }

  

  .stats-section .display-5 {

    font-size: 2rem !important;

    margin-bottom: 0.5rem !important;

  }

  

  .cta-banner {

    height: auto !important;

    min-height: 250px;

    padding: 60px 0 !important;

  }

  

  .cta-title {

    font-size: 1.75rem;

    margin-bottom: 1.5rem !important;

  }

  

  .cta-button {

    padding: 14px 35px;

    font-size: 1rem;

    width: 100%;

    max-width: 280px;

  }

  

  .cta-button-wrapper {

    text-align: center;

  }

  

  .navbar-brand img {

    height: 36px;

  }

  

  .contact-banner {

    height: 116px !important;

  }

  

  /* Performance optimizations */

  [data-aos] {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;

  }

  

  * {

    animation-duration: 0.5s !important;

    transition-duration: 0.3s !important;

  }

  

  .service-card, 

  .contact-form-card, 

  .contact-info-card {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  }

}



@media (max-width: 576px) {

  .hero-section h1 {

    font-size: 1.75rem;

  }

  

  .display-4 {

    font-size: 2rem;

  }

  

  .section-title {

    font-size: 1.5rem;

  }

  

  .btn-lg {

    padding: 10px 20px;

    font-size: 0.9rem;

  }

  

  .service-card, 

  .contact-info-card, 

  .contact-form-card {

    padding: 20px 15px;

  }

  

  footer .col-md-4,

  footer .col-md-3,

  footer .col-md-2 {

    margin-bottom: 25px;

  }

  

  .stats-section {

    min-height: 350px;

    padding: 60px 0 !important;

  }

  

  .stats-section .display-5 {

    font-size: 1.8rem !important;

  }

  

  .cta-banner {

    min-height: 280px;

    padding: 70px 0 !important;

  }

  

  .cta-title {

    font-size: 1.5rem;

  }

  

  .cta-button {

    padding: 16px 30px;

    font-size: 0.95rem;

    max-width: 100%;

  }

  

  .contact-banner {

    height: 116px !important;

  }

}



@media (max-width: 375px) {

  .stats-section {

    min-height: 400px;

  }

  

  .stats-section .display-5 {

    font-size: 1.6rem !important;

  }

  

  .cta-banner {

    min-height: 300px;

    padding: 80px 0 !important;

  }

  

  .cta-title {

    font-size: 1.4rem;

  }

  

  .cta-button {

    padding: 18px 25px;

    font-size: 0.9rem;

  }

  

  .contact-banner {

    height: 116px !important;

  }

}



/* ===============================

   TABLET STYLES

================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  .cta-banner {

    min-height: 220px;

    padding: 70px 0 !important;

  }

  

  .cta-title {

    font-size: 1.8rem;

  }

  

  .contact-banner {

    height: 116px !important;

  }

}



/* ===============================

   ACCESSIBILITY & PERFORMANCE

================================= */

.btn, .nav-link, .form-control {

  -webkit-tap-highlight-color: transparent;

}



img {

  /* max-width: 100%;

  height: auto; */

  loading: lazy;

}



.cta-banner.loaded {

  background-color: transparent;

}



/* Mobile utility classes */

.mobile-center {

  text-align: center;

}



.mobile-stack {

  flex-direction: column;

}



.mobile-full-width {

  width: 100%;

}



.mobile-mb-3 {

  margin-bottom: 1rem;

}