/* Global Styling */

    body {background-color: #ffffff;}

    
    :root {
      --primary-color: #0D3457; /* Dark Blue */
      --secondary-color: #1BBDC4; /*  */
      --dark-color: #000000;
      --bg-1: #F7F9FC;
      --bg-white: #ffffff;
    }
   

    .bg-primary { background-color: var(--primary-color); }
    .bg-secondary { background-color: var(--secondary-color); }
    .text-light {color: var(--third-color);}
    .bg-light {background-color: var(--bg-1);}
 
    h1 {font-weight:600; font-size: 3.6em;}

    .cta-link, .cta-btn, .cta-btn-2 {transition: all 0.4s ease;}
    

    .cta-btn { text-decoration: none; border: solid #1BBDC4 2px; border-radius: 50px; color: #1BBDC4; padding: 10px 20px; font-weight: 600;}
    .cta-btn:hover { background-color: #1BBDC4; color: #ffffff; border: solid #1BBDC4 2px;}

    .cta-btn-2 { padding: 18px 38px; border: solid var(--primary-color) 2px;  border-radius: 50px; color: var(--primary-color); text-decoration: none; font-weight: 600;}
    .cta-btn-2:hover { border: solid 2px var(--secondary-color); color: var(--secondary-color);}

    .cta-link {text-decoration: none; font-weight: 600; color: var(--primary-color); font-size:larger;}
    .cta-link:hover {color: var(--secondary-color);}


    /* Hero Section */
      .hero-section h1, p.text {color: #ffffff;}

      .index-hero {
        background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
        url('../images/header/index_header.webp') top center / cover no-repeat;
        min-height: 100vh;
        width: 100%;
        padding: 80px 0 120px;
        color: #ffffff;
      }

      .services-hero {
        background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('../images/header/services-freepik-dc.studio.webp') center center / cover no-repeat;
        min-height: 50vh;
        width: 100%;
        padding: 180px 0px 150px 0;
        color: #ffffff;
      }

      .assessments-hero {
        background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('../images/header/assessments_header.webp') top center / cover no-repeat;
        min-height: 50vh;
        width: 100%;
        padding: 120px 0px 150px 0;
        color: #ffffff;
      }

      .contact-hero {
        background: linear-gradient(rgba(0, 0, 0, 0.600), rgba(0, 0, 0, 0.600)),
        url('../images/header/contact.webp') center center / cover no-repeat;
        min-height: 50vh;
        width: 100%;
        padding: 120px 0px 150px 0;
        color: #ffffff;
      }
        
        
      .hero-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.0); /* black overlay with 60% opacity */
        z-index: 1;
      }

      .hero-section > * {
        position: relative;
        z-index: 2; /* ensures text appears above overlay */
      }


      /* --- Navbar Styles --- */
      .navbar {
        transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
        background-color: transparent;
        padding: 60px 0 0 0;
      }

      .navbar.scrolled {
        background-color: #0D3457 !important; /* solid color when scrolled */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        padding: 10px 0;
      }

      .navbar .nav-link {
        color: #fff !important;
        font-weight: 500;
      }

      .navbar .nav-link:hover {
        color: #1BBDC4 !important;
      }


      /* Assessments Section */
      .assessments-section {padding: 100px 0;}
      .assessments-section h1 {color: var(--primary-color);}
      .assessments-section .sub-text {color: var(--dark-color);}
      .assessments-section .icon {width: 50px; height: 50px; background-color: var(--primary-color); border-radius: 50%; margin: 25px 0 0 25px; text-align: center; padding-top: 10px;}
      .assessments-section .icon svg {height: 30px; width: 30px; fill: #fff;}
      .assessments-section .card {background-color: var(--bg-white); padding: 20px 0; height: 100%;}
      .assessments-section .card-title {color: var(--primary-color); }
      .assessments-section .card-text {color: var(--dark-color);}


      /* About Us Section */
      .aboutus-section h1, p.lead, p {color: #ffffff;}
      .aboutus-section .right-content {
        background-color: var(--primary-color);
        border-top-left-radius: 12px;
        border-bottom-left-radius: 100px;
      }
      
      .aboutus-section img {
        border-top-right-radius: 100px;
        border-bottom-right-radius: 12px;
        object-fit: cover;
      }
      

      /* Services Section */
      .services-section h1, h4 {color: var(--primary-color);}
      .services-section .lead, p.sub-text, .sub-text {color: var(--dark-color);}

      .services-section {padding: 100px 0;}
      .services-section .card {border: none; background-color: var(--bg-white);}
      .services-section .card-title {color: var(--primary-color);}
      .services-section .left-content {padding-top: 0%;}


      /* Our Team Section */
      .our-team-section {padding: 50px 0 100px 0;}
      .our-team-section h1 {color: var(--primary-color);}
      .our-team-section p {color: var(--dark-color);}
      .our-team-section .card {background-color: transparent;}
      .team-card img {
        border-radius: 12px;
        transition: transform 0.3s ease;
      }

      .team-card:hover img {
        transform: scale(1.05);
      }

      .team-card .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.2);
        text-align: center;
      }

      .our-team-section .social-icon {padding-top: 3px; background-color: #D9D9D9; border-radius: 100%; height: 30px; width: 30px; display: inline-block;}
      .our-team-section .social-icon svg {height: 20px; width: 20px; fill: #6C6C6C;}

      /* Artilce Section */
      .article-section {padding: 80px 0; background-color: #F7F9FC;}
      .article-section h1 {color: var(--primary-color);}
      .article-section p {color: var(--dark-color);}

      /* Contact Section */
      .contact-section {padding: 100px 0;}
      .contact-section h1, h2, h3, h4 {color: var(--primary-color);}
      .contact-section .accordion-item {border: none; background-color: var(--bg-white);}
      .contact-section .accordion-button {background-color: var(--bg-white);}
      .contact-section .accordion-body {color: var(--dark-color); background-color: var(--bg-white);}

      .form-label {color: var(--dark-color);}
      .form-control, .form-select {background-color: #ffffff; border-radius: 10px; border: 1px solid #dfdfdf;}
      .form-select {color: var(--dark-color);}
      .form-select option {color: var(--primary-color);}
      
      /* Target inputs with the class 'form-control' */
      .form-control::placeholder {
          color: #6c757d; /* Example color: a light gray */
          opacity: 1; /* For Firefox compatibility, ensure it's fully opaque if needed */
      }
      .form-btn {background-color: var(--secondary-color); color: #fff; border-radius: 10px;}
      .form-btn:hover {background-color: var(--primary-color); color: #fff;}


      /* Footer Section */
      .footer-section {padding: 100px 0; background-color: var(--primary-color); color: white;}
      .footer-section h3 {color: #ffffff;}
      .footer-section .nav-link {text-decoration: none; color: white;}
      .footer-section .nav-link:hover {color: var(--secondary-color);}
      .footer-section .social-icon {padding: 9px 13px 10px 13px; margin-right: 3px; background-color: var(--secondary-color); display: inline-block;}
      .footer-section .social-icon svg {height: 20px; width: 20px; fill: #ffffff; background-color: var(--secondary-color);}


      
      /* Services Page ==============================================================================================  */

      .services-list-section h1 {color: var(--primary-color);}
      .services-list-section p {color: var(--dark-color);}

      .services-list-section {padding: 0px 0 100px 0;}
      .services-list-section .service-1 {background: linear-gradient(90deg, rgba(173,237,241,1) 0%, rgba(255,255,255,1) 75%); border-top-left-radius: 300px; border-bottom-left-radius: 300px;}
      .services-list-section .service-2 {background: linear-gradient(270deg, rgba(173,237,241,1) 0%, rgba(255,255,255,1) 75%); border-top-right-radius: 300px; border-bottom-right-radius: 300px;}
      .services-list-section .service img {width: 100%; max-width: 70%; border-radius: 500px;}
      .services-list-section .service-1 img {float: left;}
      .services-list-section .service-2 img {float: right;}


      /* Assessments Page ==============================================================================================  */

      

     


      



      
      @media (max-width: 1366px) {
         .services-list-section .service-1 {background: linear-gradient(90deg, rgba(173,237,241,1) 0%, rgba(255,255,255,1) 100%); border-top-left-radius: 300px; border-bottom-left-radius: 300px;}
      .services-list-section .service-2 {background: linear-gradient(270deg, rgba(173,237,241,1) 0%, rgba(255,255,255,1) 100%); border-top-right-radius: 300px; border-bottom-right-radius: 300px;}

        .services-list-section .service img { width: 100%; max-width: 100%;}
        .services-list-section .service-1 img {padding-left: 50px;}
      .services-list-section .service-2 img {padding-right: 50px}
        }

      @media (max-width: 991px) {
        .aboutus-section .right-content {border-radius: 0; padding: 60px 30px;}
        .aboutus-section img {border-radius: 0;}

        .services-list-section .service-1 {padding: 50px; background: linear-gradient(90deg, rgb(218, 247, 250) 0%, rgba(255,255,255,1) 100%); border-top-left-radius: 30px; border-bottom-left-radius: 30px;}
        .services-list-section .service-2 {padding: 50px; background: linear-gradient(270deg, rgb(218, 247, 250) 0%, rgba(255,255,255,1) 100%); border-top-right-radius: 30px; border-bottom-right-radius: 30px;}
        .services-list-section .image-wrap {margin-bottom: 50px; display: none;}
        .services-list-section .service img {width: 100%; max-width: 100%;}
      }

      /* Medium devices (tablets, 768px and up) */
      @media (max-width: 768px) {
        
      }
      
      @media (max-width: 576px) {

        h1 {font-weight:600; font-size: 2.5em;}

        .cta-btn-2 { padding: 18px 15px; text-decoration: none; font-weight: 600;}

        .top-info-section, .top-contact-info {display: none;}

        .service-page-hero {background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/header/index.png') top center / cover no-repeat;
        min-height: 50vh;
        width: 100%;
        padding: 115px 0 60px 0;
        color: #ffffff;}

        /* --- Navbar Styles --- */
        .navbar {
          transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
          background-color:#0D3457;
          padding: 10px 0 10px 0;
        }

        .services-section {padding: 60px 0;}
      }