/* Colors */
.text-primary {
  color: #5AA5D5!important;
}
.text-bleu {
    color: #5AA5D5;
  }
  .btn-bleu {
    background-color: #5AA5D5;
    color: white;
  }
  .btn-bleu:hover {
    background-color: #28719f;
  }

.btn-primary:hover {
  background-color: #16336d;
  border-color: #16336d;
}
  
/* ###########################
    NAVBAR
    transition: all 0.3s ease;
###########################
*/

/* Initial transparent navbar */
.navbar {
    /* position: fixed; */
    width: 100%;
    top: 20px;
    left: 0;
    /* padding-top: 20px; */
    background: transparent;
    transition: background-color 0.08s ease, box-shadow 0.3s ease;
    z-index: 1000;
  }
  .navbar .navbar-brand {
    font-weight: bold;
    font-size: 1.75rem;
    color: #ffffff !important; 
  }
  .navbar-toggler {
    border-color: white; /* optional: white border */
    color: #ffffff;
  }
  .navbar .navbar-nav,
  .navbar .nav-link {
    margin-right: 15px;
    position: relative;
    transition: color 0.3s ease;
    color: #ffffff !important;
  }

  .navbar .nav-link::before {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0px; /* 0px for below -- need simpler way */
    left: 0;
    background-color: #ffffff;
    /* transition: width 0.3s ease; */
  }
  
  .navbar .nav-link:hover::before {
    width: 100%;
  }
  
  /* Scrolled state */
  .navbar.scrolled {
    top: 0;
    background-color: rgba(0, 0, 0, 0.77); /* black at 70% opacity */
    backdrop-filter: blur(6px);
    box-shadow: 0 5px 8px rgba(0,0,0,0.24);
    color:#ffffff;
  }
  .navbar.scrolled .navbar-brand {
    font-weight: bold;
    font-size: 1.75rem;
    /* color: #5AA5D5 !important;  */
    color: #ffffff!important;
  }
  .navbar.scrolled .navbar-nav,
  .navbar.scrolled .nav-link {
    margin-right: 15px;
    position: relative;
    transition: color 0.3s ease;
    color: #5AA5D5 !important;
  }

  /* .navbar.scrolled .nav-link:hover {
    color: #007bff !important;
  } */
  
  .navbar.scrolled .nav-link::before {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0px; /* 0px for below -- need simpler way */
    left: 0;
    background-color: #5AA5D5;
    /* transition: width 0.3s ease; */
  }
  
  .navbar.scrolled .nav-link:hover::before {
    width: 100%;
  }


/* ###########################
    Mobile slide out menu
    transition: all 0.3s ease;
###########################
*/
  .mobile-menu {
    position: fixed;
    top: 0px;
    right: -100%;
    width: 250px;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    z-index: 1001;
    padding: 2rem;
  }
  .mobile-menu.open {
    right: 0;
  }
  .close-btn {
    font-size: 2rem;
    background: none;
    border: none;
    float: right;
  }
  .mobile-nav {
    list-style: none;
    padding: 0;
  }
  .mobile-nav li {
    margin: 1rem 0;
  }
  .mobile-nav a {
    color: #5AA5D5;
    text-decoration: none;
    font-size: 1.2rem;
  }


/* ###########################
    BANNER
###########################
*/
    /* mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 10" preserveAspectRatio="none"><polygon points="0,10 100,10 100,0" fill="white"/></svg>');
    mask-size: 100% 60px;
    mask-repeat: no-repeat;
    mask-position: bottom; */


  .hero-section {
    height: 72vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('img/hero-bg.jpg') center center/cover no-repeat;
  }

  .hero-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: white;
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
  }
  .hero-logo {
    position: absolute;
    bottom: 10px;   /* adjust spacing */
    right: 10px;    /* adjust spacing */
    width: 25%;     /* fluid scaling */
    max-width: 300px; /* cap size */
    opacity: 0.18;   /* faint watermark look */
    z-index: 2;     /* ensures logo is above triangle */
  }


  .why-us-section {
    background-color: #f8f9fa; /* light gray */
  }
  
  .why-us-section h2 {
    color: #007bff; /* Bootstrap primary blue */
  }

  /* ###########################
    Services
    transition: all 0.3s ease;
###########################
*/
  
.services-section i {
   
    color: #5AA5D5; 
    /*margin-right: 10px; */
}

.service-box {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
  background-color: #efefef;
}

.service-box:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
  transition: all 0.3s ease;
}
.tech-scroll {
  scroll-behavior: smooth;
  white-space: nowrap;
  padding-left: 60px;
  padding-right: 60px;
}

.tech-icon {
  flex: 0 0 auto;
  padding: 1rem;
  color:#5AA5D5;
}

.scroll-btn {
  z-index: 10;
  width:40px;
}


/* ###########################
    FEATURED PRoject
    -- add more projects (roselaw, logos, jmcr)
###########################
*/

.featured-project  {
background: #f8f9fa; /* light gray background */
}
.featured-project h2 {
  font-weight: 700;
  letter-spacing: 1px;
}
.featured-project img {
  transition: transform 0.3s ease;
}
.featured-project img:hover {
  transform: scale(1.05);
}

  
  
  /* Timeline */
  .timeline-step {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 2rem;
    border-left: 3px solid #5AA5D5;
  }
  .timeline-step::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: #5AA5D5;
    border-radius: 50%;
  }
  
  /* ###########################
    CONTACT /// CALL TO ACTION
###########################
*/

.cta-section, .partner-section {
    background-color: rgb(236,236,236);
    background: linear-gradient(rgba(90, 165, 213, 0.3), rgba(90,165,213,0.3)), url('img/bg-grey-dots.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;

}
.partner-section {
  background-color: rgb(236,236,236);
  background:  url('img/bg-grey-dots.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;

}
section#calltoaction {
  background-color: #5AA5D5;
  background-repeat: no-repeat;
  background-position: center;
  color: #ffffff;
}
section#calltoaction h2.section-heading {
  color: #fff;
}
section#calltoaction h3.section-subheading {
  color: #fff;
  font-style: italic;
  margin-bottom: .25rem;
}

.tech-divider i {
    color: white;
    transition: transform 0.3s ease;
  }
  .tech-divider i:hover {
    transform: scale(1.2);
  }
  


section#contact {
  /* background-color: #5AA5D5;
  background-image: url("img/map-image.png"); 

    background-repeat: no-repeat;
  background-position: center;
  
  */
  background: linear-gradient(rgba(90, 165, 213, 0.3), rgba(90,165,213,0.3)), url('img/map-image.png') center center/cover no-repeat;


}
section#contact h2.section-heading {
  color: #fff;
}
section#contact h3.section-subheading {
  color: #fff;
  font-style: italic;
  margin-bottom: .25rem;
}


.accordion-button::after {
  font-size: 1.25rem;
  color: #007bff; /* your brand blue */
  margin-left: auto;
}