/* ---------- TECHNOLOGY STACK SECTION ---------- */
.tech-stack-section {
    padding: 100px 0;
    color: #fff;
    padding: 80px 4%;
  background: #06071B;
  text-align: center;
}

.tech-section-title {
    font-size: 2.2rem;
  font-weight: 600;
  color: #3a82ff;
  margin-bottom: 10px;
  
}

.tech-section-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
  color: #fff;
    margin: 0 15%;
    margin-bottom: 100px;
}



/* Half Arcs (more spacing now) */
.arc {
    position: absolute;
    left: 50%;
    border-top: 2px solid rgba(255,255,255,0.18);
    border-radius: 500px 500px 0 0;
    transform: translateX(-50%);
    box-shadow: 0 4px 15px rgba(68, 113, 245, 0.25);
    
}

.arc1 { width: 600px; height: 300px; top: 0; }
.arc2 { width: 500px; height: 250px; top: 70px;}
.arc3 { width: 400px; height: 200px; top: 140px;}
.arc4 { width: 300px; height: 150px; top: 210px;}

/* Icons smaller and spaced */
.icon {
    font-size: 26px;
    background: #fff;
    padding: 7px;
    border-radius: 8px;
    position: absolute;
}

/* icon positions (spread out like design) */
.icon1 { top: -10px; left: 33%; }
.icon2 { top: 121px; left: 58%; }
.icon3 { top: 300px; left: 80%; }

.icon4 { top: 90px; left: 12%; }
.icon5 { top: 93px; left: 69%; }
.icon6 { top: 97px; left: 83%; }

.icon7 { top: 198px; left: 12%; }
.icon8 { top: 320px; left: 71%; }
.icon9 { top: 200px; left: 83%; }

.icon10 { top: 215px; left: 20%; }
.icon11 { top: 182px; left: 48%; }
.icon12 { top: 219px; left: 62%; }
.icon13 { top: -60px; left: 20%; }
.icon14 { top: 120px; left: 39%; }
.icon15 { top: -9px; left: 65%; }

.icon16 { top: 250px; left: -1%; }
.icon17 { top: 45px; left: 48%; }
.icon18 { top: 255px; left: 95%; }

.icon19 { top: 330px; left: 6%; }
.icon20 { top: 325px; left: 23%; }
.icon21 { top: 327px; left: 89%; }

.icon22 { top: 83px; left: 27%; }
.icon23 { top: 222px; left: 32%; }
.icon24 { top: 200px; left: 72%; }


.arc-container {
  position: relative;
  width: 800px;
  height: 400px;
  margin: auto;
  transform-origin: top center;
}

/* SVG arcs */
.arc-svg {
  width: 100%;
  height: 100%;
}

.arc-line {
    fill: none;
    stroke: rgba(255,255,255,0.22);
    stroke-width: 2;
    stroke-linecap: round;

    /* ✨ Stronger blue glow */
    filter: drop-shadow(0 0 6px #4471F5)
            drop-shadow(0 0 14px #4471F5)
            drop-shadow(0 0 22px #4471F5);
}



@media(max-width: 1200px) {
  .arc-container {
    transform: scale(0.9);
  }
}

@media(max-width: 992px) {
  .arc-container {
    transform: scale(0.8);
  }
}
@media(min-width:768px) and (max-width: 992px) {
  .arc-container {
    position: relative;
    right: 20px;
  }
}

@media(min-width:768px) and (max-width: 835px) {
  .arc-container {
    position: relative;
    right: 80px;
  }
}

@media(max-width: 768px) {
  .arc-container {
    transform: scale(0.65);
    position: relative;
    
  }
}



@keyframes floatIcon {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

.icon {
    animation: floatIcon 3.5s ease-in-out infinite;
}

.icon:nth-child(odd) {
    animation-duration: 4.2s;
}



/* arc default state */
.arc-line {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    transition: stroke-dashoffset 3s ease;
}

/* animate when active */
.arc-line.active {
    stroke-dashoffset: 0;
}

/* delay for each arc */
.arc-line:nth-child(2).active { transition-delay: 0.3s; }
.arc-line:nth-child(3).active { transition-delay: 0.6s; }
.arc-line:nth-child(4).active { transition-delay: 0.9s; }


@media (max-width: 768px) {
    .arc-container {
        height: auto;
        width: 100%;
        transform: none !important;
    }

    .arc-svg {
        display: none;   /* hide arcs on mobile */
    }
    .tech-section-subtitle {
    font-size: 1rem;
    margin: 0 5%;
    margin-bottom: 50px;
}
}
@media (max-width: 768px) {

    .arc-container .icon {
        position: static !important;
        margin: 0;
        left: auto;
        top: auto;
        transform: none !important;
    }
}
@media (max-width: 768px) {
    .arc-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
        justify-items: center;
        padding-top: 20px;
    }

    .arc-container .icon {
        background: #fff;
        padding: 10px;
        border-radius: 10px;
        font-size: 26px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
}

@media (max-width: 768px) {
    .arc-container .icon {
        background: #fff;
        padding: 10px;
        border-radius: 10px;
        font-size: 26px;

        /* 🔵 Soft blue glow */
        box-shadow: 
            0 0 10px rgba(68, 113, 245, 0.55),
            0 0 20px rgba(68, 113, 245, 0.35),
            0 0 30px rgba(68, 113, 245, 0.20);
    }
}

@media(max-width: 576px) {
  .arc-container {
    transform: scale(0.52);
  }
 
.tech-section-title {
    font-size: 25px;
  
}
.tech-section-subtitle {
    font-size: 15px;
    margin-left: 0px;
    margin-right: 0px;
}
}