/*About Splash Image Section Css Starts Here*/
 
.image-container {
      position: relative;
      width: 500px;
      height: 350px;
      overflow: hidden;
      border-radius: 15px;
      box-shadow: 0 0 20px rgba(255,255,255,0.2);
    }

    .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }

    #image1 {
      z-index: 1;
    }

    #image2 {
      z-index: 2;
      display: none;
    }

    /* Shine Effect */
    .shine {
      position: absolute;
      top: -150%;
      right: -150%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        135deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0) 100%
      );
      transform: rotate(25deg);
      opacity: 0;
      pointer-events: none;
      z-index: 5;
    }

    .shine.active {
      animation: shineMove 2.5s ease forwards;
    }

    @keyframes shineMove {
      0% {
        top: -150%;
        right: -150%;
        opacity: 0;
      }
      30% {
        opacity: 1;
      }
      100% {
        top: 150%;
        right: 150%;
        opacity: 0;
      }
    }
    
    
    img#myshineImg {
       display: none;
    }
    
    .splash-image-div {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
 /*About Splash Image Section Css End Here*/
 
 
 
 /*About Thread Background Image Css Starts Here*/
 
 
 
  /* Unique Classes for Safety */
  .custom-image-section {
    position: relative;
    width: 100%;
    height: 400px;
  }

  .custom-bg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }

  .custom-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
  }

  .custom-overlay-img {
    position: absolute;
    bottom: 20px;   /* neeche se 20px upar */
    right: 20px;    /* right side se 20px left */
    width: 120px;   /* overlay image size */
    height: auto;
    border-radius: 50%;   /* round shape (agar chahiye to remove kar dena) */
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }
 
 /*About Thread Background Image Css Starts Here*/




/*Icons Section Css About*/

    .benefit-card {
        background: #1c1c1c;
        color: #fff;
        border-radius: 15px;
        padding: 20px;
        text-align: center;
        height: 100%;
    }
    .benefit-card h5 {
        margin-top: 15px;
        font-weight: 600;
        background: linear-gradient(90deg, #ff3a2d, #f7b733);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .benefit-card p {
        font-size: 14px;
        color: #ccc;
    }
    .benefit-icon {
        font-size: 40px;
        background: linear-gradient(90deg, #ff3a2d, #f7b733);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/*Icons Section Css About*/




.tf-box-icon.style-7.v2 {
    text-align: center;
}


.tf-box-icon.style-7.v2 {
    background-color: #272727;
}


.icon.mb_23, 
.mb_12.title, 
.icons-defination {
    background: linear-gradient(90deg, #ff3a2dc9 24.69%, #ffa13ffa 54.15%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.tf-box-icon.style-7.v2.effec-icon{
    
    padding: 40px 40px 33px;
    
}


.mb_23 {
    margin-bottom: 0px;
}

.mb_12 {
    margin-bottom: 6px;
    font-size: 22px;
    
}


.icons-defination {
    font-size: 1.6rem;
    line-height: 20px;
}


.first-3-icon-boxes {
    box-shadow: -1px -20px 94px 4px rgb(197 52 43), 0 8px 20px rgb(226 144 60);
    box-shadow: 0 -4px 6px rgb(175 52 44), 0 8px 20px rgb(242 153 61);
}


.last-3-icon-boxes {
    box-shadow: 0 4px 6px rgb(175 52 44), 0 8px 20px rgb(242 153 61);
}