/* This hides all elements with the 'ja' data-lang attribute by default. */
[data-lang="en"] {
 display: none;
}

        /* This shows the currently active language, overriding the default display:none. */
[data-lang].active {
    display: block;
}

        /* This makes a block element visible. */
.visible-block {
    display: block !important;
 }
        
        /* This makes a flex element visible. */
.visible-flex {
    display: flex !important;
}

        /* Your existing styles (hero-gradient, etc.) */
.hero-gradient {
    background: linear-gradient(to right, #2c3e50, #34495e);
}
.glow-shadow {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}


body { font-family: 'Inter', sans-serif; }
.hero-gradient { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%); }
.service-card { transition: all 0.3s ease; border-left: 4px solid transparent; }
.service-card:hover { border-left-color: #3b82f6; transform: translateY(-2px); }
.timeline-item { position: relative; padding-left: 2rem; }
.timeline-item::before { content: ''; position: absolute; left: 0; top: 0.5rem; width: 0.75rem; height: 0.75rem; background: #3b82f6; border-radius: 50%; }
.timeline-item::after { content: ''; position: absolute; left: 0.375rem; top: 1.25rem; width: 2px; height: calc(100% - 1rem); background: #e5e7eb; }
.timeline-item:last-child::after { display: none; }
.tech-badge { background: linear-gradient(45deg, #f3f4f6, #e5e7eb); }
.carousel-item {
    min-height: 1vh; /* Adjust as needed: 100vh = full screen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center; /* vertically center text */
    justify-content: center;
            
}
#main-slider .carousel-item 
{
    height: 1vh; /* Adjust: 100vh = full screen, 70vh = 70% of screen height */
    min-height: 125px; /* fallback for smaller screens */
    background-position: center top; /* aligns image upward */
    background-size: cover;
}

        

.carousel-content {
    /* Set the initial state for the animation */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.carousel-item.active .carousel-content {
    /* Set the final state for the animation when the slide is active */
    opacity: 1;
    transform: translateY(0);
}
       
     
.glow-shadow {
    box-shadow: 0 0 25px 6px rgba(37, 99, 235, 0.6); /* Stronger blue glow */
    transition: box-shadow 0.3s ease-in-out;
}

.glow-shadow:hover {
    box-shadow: 0 0 30px 10px rgba(61, 178, 211, 0.8); /* More intense on hover */
}

.button-container {
    text-align: right; 
    margin-bottom: 20px;
}

.button-wrapper {
display: flex;
justify-content: center;
}
    
.loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}