@media (max-width: 768px){
        .section2{
        /*boarder:2px solid black;*/
        margin:0px;
        padding:0px;
    }
    .section2 h2{
        padding:0px 60px 0px 60px;
    }
    
   .section2-h2{
       margin:0px 10px 0px 10px;
       line-height:40px;
   }

    .soundbox_head h1 {
      font-size: 1.8rem;
      line-height: 1.4;
      text-align: center;
      margin-left:-70px;
       /*border:2px solid black;*/
      width:320px;
    
    }

    .soundbox_head p {
      font-size: 1rem;
      line-height: 1.8;
      text-align: center;
      margin-left:-70px;
      width:300px;
        /*border:2px solid black;*/
    }

    .background-container {
      padding: 20px 0;
      height: auto !important;
    }

    .soundbox-image {
      width: 90% !important;
      margin: -100px auto 10px auto ;
      /*padding-top:-100px;*/
      display: block;
      /*border:2px solid black;*/
    }
    .feature-card h4{
       font-size:15px;
       line-height:20px;
        /*border:2px solid black;*/
    }
     .feature-card svg{
       width:40px;
       height:40px;
        /*border:2px solid black;*/
    }
    .sec3 {
      /*padding: 20px 10px;*/
    }

    .sec3 h2 {
          /*border:2px solid black;*/
          display:none;
      font-size: 1.6rem;
      width:320px;
       margin-left:-70px;
      /*padding: 20px 0;*/
    }

    .sec3 .col-md-5,
    .sec3 .col-md-7 {
      width: 100% !important;
      padding: 0 10px;
    }

    .sec3 img {
      max-width: 300px !important;
      height: auto;
      margin-bottom: 20px;
      margin:0px;
      text-align:center;
        align-items:center;
        justify-content:center;
    }
    .accordion-item{
        width:300px;
        margin-left:-60px;
    }
    .accordion-button {
      font-size: 1rem;
      padding: 1rem;
    }

    .accordion-body {
      font-size: 13px;
      line-height: 1.6;
    }

    .accordion-header svg {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    .accordion-header h5 {
      font-size: 13px;
      line-height: 1.4;
    }
    /*.accordian-image{*/
        /*border:2px solid black;*/
    /*    width:600px;*/
    /*    text-align:center;*/
    /*    align-items:center;*/
    /*    justify-content:center;*/

    /*}*/
    /*.why-soundbox-img{*/
    /*    width:100%;*/
    /*    height:100%;*/
    /*}*/
    
    }
    
    .content h5 {
        
        color:#28a3d4;
    }
   .img-soundbox{
       margin: 20px;margin-top:80px;
   }
    .row-soundbox{
        margin:0px 100px;
    }
     .background-container1{
         margin-top:10px;
         background-size: cover; 
         background-position: center; 
         background-repeat: no-repeat;
    }
    .background-container {
        background-size: cover; 
        
        min-height: 250px; 
        
        color:#13309c;
        text-align:center;
        justify-content: center;
    }
    
    .customc{
        border: 19px solid red;
        transform: scale(2);
    }
    
    
     .feature-card {
        height: 180px; /* Set a fixed height */
        width: 100%; /* Ensure cards are the same width */
        max-width: 350px; /* Optional: Limit card width */
       padding:10px;
        border: 1px solid rgba(255, 255, 255, 0.3); /* Light transparent border */
        border-radius: 8px;
        background-color: transparent; /* Fully transparent background */
        display: flex;
        align-items: center;
        justify-content: start;
        text-align: left;
        gap: 15px; /* Space between icon and text */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 15px rgba(135, 206, 235, 0.6); /* Sky blue shadow */
    }
    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(135, 206, 235, 0.8); /* Stronger sky blue shadow on hover */
    }
    .row-feature{
        margin:0px 50px;
    }
        /*.card {*/
        /*   margin-top:50px;*/
        /*    background-color: #ffffff; */
        /*    border-radius: 10px;*/
            /*max-height: 200px;*/
        /*    transition: box-shadow 0.3s ease;*/
        /*}*/

        /*.card-title {*/
        /*    color: #13309c;*/
            /*padding-left:50px;*/
          
        /*}*/

        /*.card-body {*/
        /*    padding:20px;*/
        /*}*/

        /*.card-text {*/
        /*    color: #0a0a0a; */
        /*}*/

        /*.card-header {*/
        /*    text-align:center;*/
        /*    color: #ffffff; */
        /*    padding: 20px 0px;*/
        /*    border-top-left-radius: 10px;*/
        /*    border-top-right-radius: 10px;*/
             /*background-color:#E8E8E8;*/
        /*}*/

        /*.card:hover {*/
            /*box-shadow: 0px 4px 15px rgba(17, 155, 209, 0.3); */
        /*}*/

        /*.row {*/
        /*    margin-bottom: 0px;*/
        /*}*/
        
        .mx-auto {
            margin-left: auto;
            margin-right: auto;
        }
       
        .custom-box {
        background-color:#13309c ; 
        min-height: 400px;
       
        width: 100%;
        margin: 0 auto;
        transition: background-color 0.3s ease; 
}
    
    .text-white h2, .text-white h4, .text-white p {
        color: white;
        transition: color 0.3s ease; 
    }
    
  
    .sec3{
        margin:80px 110px;
        /*padding-bottom:50px;*/
    }
    
    
 
.soundbox_head{
    padding-left:100px;
}

.accordion-button{
    background-color:#01428c;
    color: white; 
    font-weight: bold;
}
.accordion-button::after{
    background-color:#01428c;
    color: white; 
    font-weight: bold;
}
.accordion-button:not(.collapsed) {
    background-color: #01428c !important;
    color: white !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    box-shadow: none !important;
}

/*.accordion-button::after {*/
    /*filter: invert(1);*/
/*}*/











.animated-button {
  /*position: relative;*/
  display: inline-flex;
  
 padding:10px 15px;
  color:white;
  background-color: #007bff; 
  border: none;
  border-radius:20px;
  box-shadow: 0px 4px 8px rgba(0, 123, 255, 0.3); /* Subtle shadow */
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.animated-button:hover {

  background-color: #0056b3; 
  box-shadow: 0px 6px 12px rgba(0, 86, 179, 0.5);
  transform: translateY(-2px); 
   
}


.diagonal-arrow {
  transition: transform 0.3s ease, stroke 0.3s ease;
  stroke: white; 
}

.animated-button:hover .diagonal-arrow {
  transform: translate(5px, -5px); /* Arrow moves slightly on hover */
  
}

/* Subtle arrow animation */
.arrow-container .diagonal-arrow {
  animation: bounceArrow 2s infinite ease-in-out;
}

@keyframes bounceArrow {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(3px, -3px);
  }
}


.why-soundbox-img{
    max-width: 100%; height: auto;
    /*border:2px solid black;*/
    margin-left:-100px;
    margin-top:-20px;
}