/* =========================================
   Base Typography & Body
   ========================================= */
   body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.6;
  }
  
  p {
    line-height: 1.8;
  }
  
  /* =========================================
     Icons
     ========================================= */
  .fas {
    font-size: 1.5rem;
    transition: color 0.3s ease;
  }
  
  .fas:hover {
    color: #009ee3;
  }
  
  /* =========================================
     Colors & Utilities
     ========================================= */
  .blue {
    color: #009ee3;
  }
  
  .light-texto {
    color: #fff;
  }
  
  /* =========================================
     Navbar
     ========================================= */
  .navbar {
    background-color: #000 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 55px !important;
    padding: 0 1rem;
    transition: all 0.3s ease;
  }
  
  .navbar-brand .logo-img {
    max-height: 30px;
    margin-left: 10px;
  }
  
  .navbar-toggler {
    background-color: #009ee3;
    border: none;
    padding: 8px;
    z-index: 1001;
  }
  
  .navbar.scrolled {
    height: 60px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* Navbar Links (Desktop) */
  .navbar-nav .nav-item > a.nav-link {
    position: relative;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 15px;
    transition: color 0.3s ease;
  }
  
  .navbar-nav .nav-item > a.nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #009ee3;
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
  }
  
  .navbar-nav .nav-item > a.nav-link:hover::after {
    width: 100%;
  }
  
  .navbar-nav .nav-item > a.nav-link:hover {
    color: #009ee3;
  }
  
  /* =========================================
     Mobile Navbar Adjustments
     ========================================= */
  @media (max-width: 576px) {
    .navbar {
      height: 65px !important;
      padding: 5px 5px !important;
    }
  
    .navbar-brand .logo-img {
      max-height: 37px !important;
    }
  
    .navbar-toggler {
      padding: 5px;
    }
  
    .navbar-nav .nav-item > a.nav-link {
      position: relative;
      color: #fff;
      font-weight: 600;
      text-transform: uppercase;
      padding: 8px 15px;
      text-align: center;
    }
  
    .navbar-nav .nav-item > a.nav-link::after {
      content: "";
      position: absolute;
      bottom: 5px;
      left: 10%;
      width: 80%;
      height: 2px;
      background-color: #009ee3;
      border-radius: 2px;
      transform: scaleX(0);
      transition: transform 0.3s ease;
      transform-origin: center;
    }
  
    .navbar-nav .nav-item > a.nav-link:focus::after,
    .navbar-nav .nav-item > a.nav-link:active::after {
      transform: scaleX(1);
    }
  
    .navbar-nav .nav-item > a.nav-link:focus,
    .navbar-nav .nav-item > a.nav-link:active {
      color: #009ee3;
    }
  }
  
  /* =========================================
     Hero Section
     ========================================= */
  .header-wrapper {
    height: 75vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-image: url('/assets/images/Orquitech_Colombia.webp');
    background-size: cover;
    background-position: 79% center;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  
  .header-wrapper .color-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
  }
  
  .header-wrapper .header-wrapper-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
  }
  
  /* Responsive Hero */
  @media (max-width: 768px) {
    .header-wrapper {
      height: 70vh !important;
    }
  }
  
  @media (max-width: 576px) {
    .navbar {
      height: 50px;
    }
  }
  
  /* =========================================
     Section Headings & Layout
     ========================================= */
  /* Generic .section class to maintain layering and prevent overflow */
  .section {
    position: relative;
    overflow: hidden;
  }
  
  /* Reset and define .section-heading */
  .section-heading {
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
    text-align: center;
  }
  
  /* Unified styling for .section-heading h2 */
  .section-heading h2 {
    font-size: calc(2rem + 1vw);
    font-weight: bold;
    color: #00A0E3;
    text-transform: uppercase;
    text-align: center;
    padding: 15px 20px;
    margin: 0 auto 15px;
    display: inline-block;
    border-bottom: 3px solid #00A0E3;
    animation: fadeIn 0.8s ease-out;
  }
  
  .section-heading p {
    color: #F2EEEB;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: 15px;
    padding: 0 10px;
    text-align: center;
    animation: fadeIn 1.2s ease-out;
  }
  
  /* Dark Background Section */
  .section.dark-bg {
    background-color: #011B3C;
  }
  
  /* Keyframes for title animation */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Special Heading Style for #experiencia Section */
  #experiencia .section-heading h2 {
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 20px 30px;
    border-radius: 12px;
    font-size: 36px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: inline-block;
    text-align: center;
    margin: 0 auto;
  }
  
  /* SECTION 9 Updates */
/* Add subtle card effects for the content boxes */
.card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    margin-top: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
}

/* Add a glow effect to icons */
.blue-icon {
    color: #009ee3;
    font-size: 1.3rem;
    margin-right: 10px;
    vertical-align: middle;
}

/* Add subtle glow to headings */
.glow-text {
    text-shadow: 0 0 10px rgba(0, 158, 227, 0.6), 0 0 20px rgba(0, 158, 227, 0.4);
}

/* Glow button style */
.glow-button {
    background: transparent;
    color: #009ee3;
    border: 2px solid #009ee3;
    transition: all 0.3s ease;
}

.glow-button:hover {
    background: #009ee3;
    color: #fff;
    box-shadow: 0px 4px 15px rgba(0, 158, 227, 0.6);
}


  /* =========================================
     Buttons
     ========================================= */
  .btn {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    text-align: center;
  }
  
  @media (max-width: 768px) {
    .btn {
      font-size: 14px;
      padding: 8px 15px;
    }
  }
  
  /* =========================================
     Footer
     ========================================= */
  footer {
    background-color: #003366;
    color: #fff;
    padding: 20px;
    text-align: center;
  }
  
  footer a {
    color: #009ee3;
    text-decoration: none;
  }
  
  footer a:hover {
    color: #4da6ff;
  }
  
  /* =========================================
     Typography & Misc Adjustments
     ========================================= */
  .text-secondary {
    font-size: 1.1rem;
    line-height: 1.5;
  }
  
  .optimized-h3 {
    font-size: 1.3rem;
    line-height: 1.2;
    text-align: center;
  }
  
  .optimized-h3 img {
    vertical-align: middle;
    margin-right: 8px;
    margin-bottom: 2px;
  }
  
  .optimized-h3 span {
    display: block;
    margin-bottom: 0.4rem;
  }
  
  /* Testimonials */
  .testimonial {
    padding: 20px !important;
    margin-bottom: 15px;
  }
  
  .testimonial p {
    font-size: 1rem;
    line-height: 1.5;
  }
  
  .testimonial footer {
    margin-top: 10px;
  }
  
  .services-cards li p em {
    font-weight: bold;
}

  /* =========================================
     Services & Cards
     ========================================= */
  /* Base .service styling */
  .service {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 20px;
  }
  
  .service h3 {
    font-size: 1.5rem;
    color: #00A0E3;
    text-align: center;
    margin-bottom: 10px;
  }
  
  .service p {
    font-size: 1rem;
    color: #F2EEEB;
    line-height: 1.6;
    text-align: center;
  }
  
  .service:hover {
    background-color: #E0F4FF; /* Light blue */
    color: #011B3C; /* Dark blue text */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.service:hover h3, 
.service:hover p {
    color: #011B3C; /* Ensure all text remains visible */
}

.service:hover i {
    color: #009EE3; /* Brand blue for icons */
}

  
  /* Additional glow effect if needed */
  .glow-circle {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(rgba(255, 255, 255, 0.2), transparent);
    border-radius: 50%;
    z-index: 1;
    top: -40%;
    left: -40%;
    animation: pulse 3s infinite;
  }
  
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  
  /* Icon hover effect inside services */
  .service-icon i {
    transition: color 0.3s ease;
  }
  
  .service:hover .service-icon i {
    color: #007bff;
  }
  
  /* Adjust about-us img at small screens */
  @media (max-width: 768px) {
    .about-us img.img-fluid {
      width: 80%;
      max-width: 250px;
      margin: 10px auto;
    }
  }
  
  /* =========================================
     #numbers Section
     ========================================= */
  #numbers .service {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease;
  }
  
  #numbers .service:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  #numbers h3 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
  }
  
  #numbers p {
    color: #666;
  }
  
  /* Big icons within #numbers */
  #numbers .service-bigicon i {
    font-size: 3rem;
    padding: 20px;
    border-radius: 50%;
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  /* Specific icon backgrounds */
  #numbers .service-bigicon .fa-desktop {
    background-color: #009ee3;
  }
  
  #numbers .service-bigicon .fa-users {
    background-color: #43A047;
  }
  
  #numbers .service-bigicon .fa-server {
    background-color: #8B0000;
    box-shadow: 0 4px 10px rgba(139, 0, 0, 0.5);
  }
  
  #numbers .service-bigicon .fa-coins {
    background-color: #FF9800;
    color: #FFD54F;
    box-shadow: 0 4px 10px rgba(255, 152, 0, 0.5);
  }
  
  #numbers .service-bigicon .fa-network-wired {
    background-color: #11767d;
  }
  
  #numbers .service-bigicon .fa-globe {
    background-color: #1A237E;
    box-shadow: 0 6px 12px rgba(26, 35, 126, 0.5);
  }
  
  #numbers .service:hover .service-bigicon i {
    transform: scale(1.15);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  }
  
  /* =========================================
     Service Cards (Accordions, etc.)
     ========================================= */
  .service-card .toggle-icon {
    transition: transform 0.3s ease;
  }
  
  .service-card .toggle-icon.rotated {
    transform: rotate(180deg);
  }
  
  .service-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .service-card .card-header h5 {
    color: #FFFFFF;
    font-weight: bold;
  }
  
  .service-card .card-header:hover {
    background-color: #00A0E3;
    color: #F2EEEB;
  }
  
  .service-card .card-header i {
    margin-right: 10px;
  }
  
/* Service Card Header Alignment Fix */
.service-card .card-header {
    display: flex;
    align-items: center; /* Ensures vertical alignment of all elements */
    justify-content: space-between; /* Spacing for the toggle icon */
}

.service-card .card-header i {
    font-size: 3rem; /* Icon size */
    margin-right: 10px; /* Space between icon and text */
    line-height: 1; /* Prevents extra spacing */
    vertical-align: middle; /* Aligns icon with the text baseline */
    display: flex; /* Ensure consistent alignment */
    align-items: center; /* Centers icon within its container */
}

.service-card .card-header h5 {
    font-size: 1.5rem; /* Text size */
    line-height: 1.2; /* Adjust text spacing */
    margin: 0; /* Remove unnecessary margins */
    display: flex; /* Keep text aligned vertically with icon */
    align-items: center; /* Aligns text with icon */
}

 
  /* Accordion Buttons */
  .accordion-button {
    background-color: transparent;
    box-shadow: none;
    color: #011B3C;
  }
  
  .accordion-button:focus {
    box-shadow: none;
    color: #011B3C;
  }
  
  .accordion-button:not(.collapsed) {
    color: #011B3C;
    background-color: #F2EEEB;
  }
  
  @media (max-width: 767px) {
    .service-card .card-header {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .service-card .toggle-icon {
      align-self: flex-end;
    }
  }
  
  /* =========================================
     Services Section Background
     ========================================= */
  /* Ensure Section 8 has a white background color */
#servicios {
    background-color: #F2EEEB !important;
    background-image: none !important; /* Ensure no background image is applied */
    padding: 60px 0;
}


  /* =========================================
     Carousel (for clients section)
     ========================================= */
     .carousel-container {
        overflow: hidden;
        position: relative;
        height: 150px; /* Adjust as needed */
        margin: 0 auto;
    }
    
    .carousel-track {
        display: flex;
        transform: translateX(0); /* Ensure track starts in the correct position */
        animation: scroll 20s linear infinite; /* Default speed, dynamically overridden in JS */
    }
    
    .carousel-item {
        flex: 0 0 auto;
        width: 120px;
        height: 120px;
        margin: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .carousel-item img {
        border-radius: 50%;
        width: 100px;
        height: 100px;
        object-fit: contain;
    }
    
    /* Smooth Scrolling Animation */
    @keyframes scroll {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-100%);
        }
    }
    
    /* Faster Animation for Mobile */
    @media (max-width: 768px) {
        .carousel-track {
            animation: scroll 10s linear infinite; /* Faster for mobile screens */
        }
    }
    
    
    

  /* =========================================
     End of Custom CSS
     ========================================= */