/* home image */
.homeimage {
    --g: 4px;     /* the gap */
    --b: 12px;    /* border thickness*/
    --c: #022862; /* the color */
    padding: calc(var(--g) + var(--b));
    --_c: #0000 0 25%, var(--c) 0 50%;
    --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
    --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
    background:
      var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
      var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
    background-size: 200% var(--b),var(--b) 200%;
    cursor: pointer;
    filter: grayscale(50%);
    transition: .3s;
  }
  .homeimage:hover {
    --_p: 75%;
    filter: grayscale(0%);
  }

  /* associated design */
  .associated img {
    --s: 250px;   /* the size of the image */
    --b: 8px;     /* the border thickness*/
    --g: 14px;    /* the gap */
    --c: #4ECDC4; /* the color */
    /* height: 40px; */
    width: var(--s);
    height:var(--s);
    aspect-ratio: 1;
    outline: calc(var(--s)/2) solid rgba(73, 69, 69, 0.6);
    outline-offset: calc(var(--s)/-2);
    cursor: pointer;
    transition: .3s;
  }
  .associated img:hover {
    outline: var(--b) solid var(--c);
    outline-offset: var(--g);
  }
  
  .associated img {
    border-radius: 50%;
  }
  

  /* traning img start */
  .traning_image {
    --f: .1; /* the parallax factor (the smaller the better) */
    --r: 10px; /* radius */
    
    --_f: calc(100%*var(--f)/(1 + var(--f)));
    --_a: calc(90deg*var(--f));
    /* width: 250px;  */
    aspect-ratio: calc(1 + var(--f));
    object-fit: cover;
    clip-path: inset(0 var(--_f) 0 0 round var(--r));
    transform: perspective(400px) var(--_t,rotateY(var(--_a)));
    transition: .5s;
    cursor: pointer;
  }
  .traning_image:hover {
    clip-path: inset(0 0 0 var(--_f) round var(--r));
    --_t: translateX(calc(-1*var(--_f))) rotateY(calc(-1*var(--_a)))
  }
  .trainingimg{
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    grid-auto-flow: column;
    gap: 30px;
    background: #022862;
  }
  

/* product video start page */
.network_detect {
  --s: 250px;   /* the size of the image */
  --b: 8px;     /* the border thickness*/
  --g: 14px;    /* the gap */
  --c: #022862; /* the color */
  
  width: 100%;
  aspect-ratio: 1;
  outline: calc(var(--s)/2) solid #0009;
  outline-offset: calc(var(--s)/-2);
  cursor: pointer;
  transition: .3s;
}
.network_detect:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

.network_detect + .network_detect {
  border-radius: 50%;
}
/* home page hover button effect  */
.hover3 {
  --c: #3a26aa; /* the color */
  --b: .1em;    /* border length*/
  --d: 20px;    /* the cube depth */
  
  --_s: calc(var(--d) + var(--b));
  
  color: var(--c);
  border: solid #0000;
  border-width: var(--b) var(--b) var(--_s) var(--_s);
  background:
    conic-gradient(at left var(--d)  bottom var(--d),
      #0000 90deg, rgba(18, 6, 73, 0.3) 0 225deg,rgba(44, 8, 112, 0.6) 0) border-box,
    conic-gradient(at left var(--_s) bottom var(--_s),
      #0000 90deg,var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b))  border-box;
  transform: translate(calc(var(--d)/-1),var(--d));
  clip-path: 
    polygon(
     var(--d) 0%, 
     var(--d) 0%, 
     100% 0%, 
     100% calc(100% - var(--d)),
     100% calc(100% - var(--d)),
     var(--d) calc(100% - var(--d))
    );
  transition: 0.5s;
}
.hover3:hover {
  transform: translate(0,0);
  clip-path: 
    polygon(
     0% var(--d), 
     var(--d) 0%, 
     100% 0%, 
     100% calc(100% - var(--d)), 
     calc(100% - var(--d)) 100%, 
     0% 100%
   );
}
.homebutton{
  padding: 20px 50px 40px;
}