
.carousel-item img{
    height: 90vh;
    object-fit: cover;
}
.card-body img{
    min-width: 30%;
    max-height: 100px;
}
.why-us{  
      color:#080808;
}
.why-list{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:20px;
      margin-top:40px;
    }
    .why-item{
      background:#0d6efd;
      padding:25px;
      border-radius:10px;
      text-align:center;
    }

.industries ul{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:15px;
  list-style:none;
  margin-top:40px;
}

.industries li{
  background:#fff;
  padding:20px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}
.cta{
  background:#0d6efd;
  color:#fff;
  text-align:center;
  padding:80px 8%;
}

    .cta h2{
      font-size:42px;
      margin-bottom:20px;
    }

    .contact{
      margin-top:25px;
      font-size:20px;
    }

    footer{
      background:#020617;
      color:#fff;
      text-align:center;
      padding:25px;
    }
  

    @media(max-width:768px){
       .carousel-item img{
        height: 40vh;
    }

      header{
        flex-direction:column;
      }

      nav{
        margin-top:15px;
      }

      .hero h1{
        font-size:36px;
      }

      .hero p{
        font-size:17px;
      }
      
    }
    .hero-section{
    min-height:100vh;
    background: linear-gradient(-45deg,#0d6efd,#001f4d,#0d6efd,#00aaff);
    background-size:400% 400%;
    animation: gradientBG 10s ease infinite;
    color:#fff;
    padding-top:80px;
}

@keyframes gradientBG{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

.floating-icons{
    position:relative;
    height:400px;
}

.floating-icons i{
    position:absolute;
    font-size:60px;
    animation: float 4s ease-in-out infinite;
}

.floating-icons i:nth-child(1){
    top:20px;
    left:50px;
}

.floating-icons i:nth-child(2){
    top:120px;
    right:80px;
}

.floating-icons i:nth-child(3){
    bottom:50px;
    left:120px;
}

.floating-icons i:nth-child(4){
    top:50%;
    right:150px;
}

.floating-icons i:nth-child(5){
    bottom:20px;
    right:30px;
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-25px);
    }
}

