* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  background-color: #161616;
  color: #ffffffd5;
}

/* Footer Section */
.footer {
  position: sticky;
  bottom: -190px;
  width: 100%;
  background: #161616;
  box-shadow: 0 -5px 0 #181818;
  margin: 0 auto 20px auto;
  z-index: 10;
  overflow: visible;
}

/* Tool Navigation */
.tool_nav {
  z-index: 15;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  box-shadow: inset 4px 3px 3px 0px #111, inset -2px -4px 4px 0px #333;
  border-radius: 12px;
  margin: 0 auto 20px auto;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.tool_nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 35px; 
}
.tool_nav ul li {
  list-style: none;
  width: 50px;
  height: auto;
  text-align: center;
  position: relative;
}
.tool_nav ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

/* Tool Items */
.tool_item {
  display: flex;
  justify-content: center;
  position: relative;
  width: 70px;
  height: 70px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.tool_icon {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}
.tool_icon img {
  width: 60px;
  height: auto;
  filter: brightness(0.8);
  transition: 0.3s;
}

/* Text under icons */
.tool_text {
  position: relative;
  bottom: 15px;
  font-size: 20px;
  opacity: 0.6;
  z-index: 9;
  transition: 0.3s;
  font-family: "Overlock SC", sans-serif ;
  top: -20px;

}

.tool_item.raviji a .tool_text {
  font-family: "Acme", sans-seri ;
  opacity: 1;
  color: #011031;
  position: relative;
}

.tool_item a:hover .tool_text {
  opacity: 1;
  color: #2953fd;
  transition: 0.3s;
}


.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.2);
}

/* Indicator */
.tool_indicator {
  position: absolute;
  width: 100px;
  left: 21px;
  height: auto;
  display: flex;
  justify-content: start;
  align-items: start;
  transition: 0.5s;
}
.tool_indicator::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -30px;
  width: 60px;
  height: 18px;
  background: #29fd53;
  border-radius: 10px;
}
.tool_indicator::after {
  content: "";
  position: absolute;
  bottom: 40px;
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: #333;
  box-shadow: 0 0 0 2px #29fd53, 60px 60px 0px 3px #29fd53, 50px 0px 0px 2px #29fd53, 0 50px 0px 2px #29fd53;
  transform: rotate(45deg);
  animation: animate 2s ease-in-out infinite;
}

/* Bouncing Animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.tool_icon:hover {
  animation: bounce 0.3s ease-in-out;
}

/* Move flashlight beam */
/* .tool_nav ul li:nth-child(1).raviji ~ .tool_indicator {
  transform: translateX(-0px);
}
.tool_nav ul li:nth-child(1).raviji ~ .tool_indicator::before {
  width: 70px;
  left: -30px;
} */

.tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
  transform: translateX(85px);
}
.tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  width: 70px;
  left: -30px;
}

.tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
  transform: translateX(165px);
}
.tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  width: 90px;
  left: -35px;
}

.tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
  transform: translateX(255px);
}
.tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  width: 70px;
  left: -30px;
}

.tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
  transform: translateX(340px);
}
.tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  width: 80px;
  left: -35px;
}

/* Animate Triangle */
@keyframes animate {
  0%, 100% { transform: rotate(30deg); }
  50% { transform: rotate(57deg); }
}

 /* Fixed Top Ball - Only on hover */
 .tool_icon:hover::before {
  content: "";
  position: absolute;
  top: 18px; 
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  border-radius: 50px;
  background: #000000;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.tool_icon:hover::after {
  content: "";
  position: absolute;
  overflow: hidden;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 15px;
  border-bottom: 90px solid rgba(18, 180, 180, 0.8);
  border-left: 20px solid transparent;
  border-right: 25px solid transparent;
  filter: blur(5px);
  opacity: 0.5;
  transition: transform 0.4s ease-in-out, opacity 0.3s;
}


/* Flash Effect - Only on hover */
.tool_icon:hover ~ .tool_flash {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%) scaleY(1);
  width: 50px;
  height: 801px;
  background: radial-gradient(circle, rgba(41,253,83,0.6) 10%, rgba(41,253,83,0.2) 60%, rgba(41,253,83,0) 100%);
  transition: transform 0.4s ease-in-out;
  border-radius: 50%;
  opacity: 1;
  z-index: 1;
}

/* Move the flashlight beam & triangle with hover */
.tool_icon:hover ~ .tool_indicator {
  transform: translateX(calc(50px * var(--index, 0) - 50%)) translateY(5px) scaleY(1);
  opacity: 1;
}


.tool_icon:hover {
  animation: bounce 0.3s ease-in-out;
}



/* Social Links */
.social_links {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.social_item {
    list-style: none;
    position: relative;
    width: 50px;
    height: 40px;
    border: 2px solid #0e5a4a;
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    box-shadow: 0 0 5px #0ff, 0 0 7px #0ff, 0 0 1px #0ff;
    overflow: hidden;
}
.social_item:hover {
    width: 180px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
}
.social_item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(45deg, var(--i), var(--j));
    transition: 0.5s;
    opacity: 0;
}
.social_item:hover::before {
    opacity: 1;
}
.social_icon img {
    width: 28px;
    height: auto;
    object-fit: contain;
    transition: 0.5s;
}
.social_item:hover .social_icon img {
    transform: scale(0);
    opacity: 0;
}
.contact_me {
   font-size: 1.7em;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: 0.5s;
    opacity: 0;
    position: absolute;
    font-family: "Acme", sans-seri ;
}
.social_item:hover .contact_me {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.25s;
}
.social_item a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
}



  
@media screen and (max-width: 440px){

.tool_icon {
  width: 71px;
  height: 100px;
}

 .tool_icon:hover::before {
  top: 15px; 
  width: 80px;
  height: 4px;
}

.tool_icon:hover::after {
  top: 8px;
  width: 20px;
  height: 10px;
}

  .footer {
    bottom: -190px;
    box-shadow: 0 -5px 0 #181818;
    margin: 0 auto 20px auto;
  }
 .tool_nav ul {
  gap: 20px; 
 }
 .tool_icon img {
  width: 50px;
 }
 .tool_text {
  font-size: 18px;
  top: -20px;
 }

.tool_indicator {
  width: 100px;
  left: 21px;
}
.tool_indicator::before {
  top: 20px;
  left: -30px;
  width: 60px;
}

.tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
  transform: translateX(70px);
}


.tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
  transform: translateX(140px);
}
.tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  width: 80px;
}

.tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
  transform: translateX(210px);
}

.tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
  transform: translateX(280px);
}
.tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  width: 80px;
  left: -35px;
}
} 
  
@media screen and (max-width: 360px){
  .tool_icon {
    width: 61px;
    height: 100px;
  }

 .tool_icon:hover::before {
  top: 15px; 
  width: 80px;
  height: 4px;
}

.tool_icon:hover::after {
  top: 8px;
  width: 20px;
  height: 10px;
}
  .footer {
    bottom: -195px;
    box-shadow: 0 -10px 0 #181818;
    margin: 0 auto 20px auto;
  }

  .tool_nav ul {
   gap: 15px; 
  }
  .tool_icon img {
   width: 50px;
  }
  .tool_text {
   font-size: 15px;
   top: -20px;
  }

.tool_indicator::before {
  top: 20px;
  left: -25px;
  width: 60px;
}

.tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
  transform: translateX(65px);
}
.tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  width: 50px;
  left: -20px;
}

.tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
  transform: translateX(125px);
}
.tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  width: 70px;
  left: -25px;
}

.tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
  transform: translateX(195px);
}
.tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  width: 60px;
  left: -25px;
}

.tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
  transform: translateX(260px);
}
.tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  width: 60px;
  left: -25px;
}
} 

@media screen and (max-width: 330px){
  .tool_icon {
    width: 55px;
    height: 100px;
  }

 .tool_icon:hover::before {
  top: 15px; 
  width: 80px;
  height: 4px;
}

.tool_icon:hover::after {
  top: 8px;
  width: 20px;
  height: 10px;
  border-bottom: 300px solid rgba(18, 180, 180, 0.8);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
  
  .footer {
    bottom: -195px;
    box-shadow: 0 -5px 0 #181818;
    margin: 0 auto 20px auto;
  }
  .tool_nav ul {
    gap: 10px; 
   }
   .tool_icon img {
    width: 50px;
   }
   .tool_text {
    font-size: 15px;
   }
 

.tool_indicator::before {
  top: 20px;
  left: -20px;
  width: 50px;
}

.tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
  transform: translateX(58px);
}
.tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  width: 50px;
  left: -20px;
}

.tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
  transform: translateX(112px);
}
.tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  width: 70px;
  left: -25px;
}

.tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
  transform: translateX(180px);
}
.tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  width: 60px;
  left: -25px;
}

.tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
  transform: translateX(240px);
}
.tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  width: 60px;
  left: -25px;
}

 } 
 
@media screen and (max-width: 299px){
  .tool_icon:hover::before {
display: none;
  }
  
  .tool_icon:hover::after {
  display: none;
  }
  .footer {
    bottom: -325px;
    box-shadow: 0 -5px 0 #181818;
    margin: 0 auto 20px auto;
  }
  .tool_nav ul {
    gap: 1vw; 
   }
   .tool_icon img {
    width: 18vw;
   }
   .tool_text {
   display: none;
   }
   .tool_indicator{
    display: none;
   }


   .social_links {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.social_links {
    gap: 10px;
}

.social_item {
  width: 50px;
  height: 40px;
}
.social_item:hover {
  width: 180px;
}
.social_icon img {
  width: 28px;
}
.contact_me {
  font-size: 1em;
}
}
@media screen and (max-width: 269px){
  .footer {
    bottom: -380px;
    box-shadow: 0 -5px 0 #181818;
    margin: 0 auto 20px auto;
    overflow-y: hidden;
  }
}
@media screen and (max-width: 249px){
  .tool_icon {
    overflow-x: hidden;

  }
  .tool_icon img {
   width: 22vw;
  }
  .contact_me {
    font-size: 0.9em;
  }
  }
@media screen and (min-width: 562px){
  .footer {
    bottom: -175px;
    box-shadow: 0 -10px 0 #181818;
    margin: 0 auto 20px auto;
  }
}
@media screen and (min-width: 570px){
  .tool_icon {
    width: 100px;
    height: 100px;
   overflow: visible;
  }

 .tool_icon:hover::before {
  top: 10px; 
  width: 80px;
  height: 8px;
}

.tool_icon:hover::after {
  top: 8px;
  width: 30px;
  height: 5px;
  border-bottom: 100px solid rgba(18, 180, 180, 0.8);
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

  .footer {
    bottom: -180px;
    box-shadow: 0 -10px 0 #181818;
    margin: 0 auto 20px auto;
  }
  .tool_nav ul {
   gap: 65px; 
  }
  .tool_icon img {
   width: 70px;
  }
  .tool_text {
   font-size: 26px;
   top: -10px;
  }
  .tool_nav {
    height: 100px;
  }

  .tool_indicator::before {
    top: 28px;
    width: 60px;
    height: 25px;
  }
  .tool_indicator::after {
    bottom: 45px;
    width: 10px;
    height: 10px;
    box-shadow: -0px -0px 0px 5px #29fd53, 
                  73px 73px 0px 5px #29fd53, 
                  60px 0px 0px 2px #29fd53, 
                  0px 60px 0px 2px #29fd53;
  }

.tool_indicator {
  width: 100px;
  left: 21px;
}
.tool_indicator::before {
  top: 20px;
  left: -40px;
  width: 90px;
}
.tool_item.raviji a .tool_text {
top: -16px;
}
  
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(115px);
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
    width: 90px;
    left: -40px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(225px);
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
    width: 105px;
    left: -45px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(342px);
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
    width: 100px;
    left: -45px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(458px);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
    width: 100px;
    left: -45px;
  }

  .social_links {
    gap: 30px;
}

.social_item {
  width: 70px;
  height: 50px;
}
.social_item:hover {
  width: 200px;
}
.social_icon img {
  width: 40px;
}
.contact_me {
  font-size: 1.5em;
}
}

@media screen and (min-width: 600px){
  .footer {
    bottom: -205px;
    box-shadow: 0 -10px 0 #181818;
    margin: 0 auto 20px auto;
  }
}

@media screen and (min-width: 770px){

  .tool_icon {
    width: 100px;
    height: 100px;
  }

 .tool_icon:hover::before {
  top: 10px; 
  width: 80px;
  height: 8px;
}

.tool_icon:hover::after {
  top: 8px;
  width: 40px;
  height: 5px;
  border-bottom: 100px solid rgba(18, 180, 180, 0.8);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

  .footer {
    bottom: -215px;
    box-shadow: 0 -10px 0 #181818;
    margin: 0 auto 20px auto;
  }
  .tool_nav ul {
   gap: 100px; 
  }



  
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(150px);
  }

  
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(295px);
  }

  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(450px);
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(600px);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
    width: 100px;
    left: -45px;
  }

.social_links {
  gap: 45px;
}

.social_item {
  width: 90px;
  height: 60px;
}
.social_item:hover {
  width: 240px;
}
.social_icon img {
  width: 50px;
}
.contact_me {
  font-size: 2em;
}
}

@media screen and (min-width: 801px){
  .footer {
    bottom: -195px;
    box-shadow: 0 -10px 0 #181818;
    margin: 0 auto 20px auto;
  }
}



@media screen and (min-width: 1024px){
  .footer {
    bottom: -140px;
    box-shadow: 0 -20px 0 #181818;
    margin: 0 auto 20px auto;
  }
  .top_bar {
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  .tool_nav {
    width: 55%;
    z-index: 10;
  }
  
  .social_links {
    width: 45%;
    position: relative;
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 25px;
    margin-top: 0;
  }
  

  .tool_nav ul {
   gap: 65px; 
  }
  .tool_icon img {
   width: 70px;
  }
  .tool_text {
   font-size: 26px;
   bottom: 1px;
  }
  .tool_nav {
    height: 100px;
  }


  
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(115px);
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
    width: 90px;
    left: -40px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(225px);
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
    width: 105px;
    left: -45px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(345px);
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
    width: 100px;
    left: -45px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(460px);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
    width: 100px;
    left: -45px;
  }

  .social_links {
    gap: 18px;
}

.social_item {
  width: 70px;
  height: 50px;
}
.social_item:hover {
  width: 200px;
}
.social_icon img {
  width: 40px;
}
.contact_me {
  font-size: 1.7em;
}
}

@media (min-width: 1024px) and (max-height: 1100px) {
  .footer {
  position: relative;
   bottom: -50px;
   box-shadow: none;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  
  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 10px;
   right: 0;
   height: 80vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 13vw;
  }
  

  .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
}
.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 3vh;
}

  .tool_icon img {
   width: 100px;
  }
  .tool_text {
   font-size: 26px;
   position: relative;
   top: 5px;
   gap: 0px;
  }

.tool_indicator {
  width: 100px;
  left: 14px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 6.5vh;
  left: -32px;
  width: 90px;
}
.tool_item.raviji a .tool_text {
  top: 1vh;
}
  


.tool_indicator::after {
  bottom: 5.5vh;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 3px #29fd53,
       85px 0px 0px 2px #29fd53,
         0 85px 0px 2px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 23vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
    width: 90px;
    left: -32px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 38.3vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
    width: 105px;
    left: -40px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 53vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
    width: 105px;
    left: -40px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 68.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
    width: 105px;
    left: -40px;
  }

 .tool_icon:hover::before {
  top: -1vh; 
  width: 90px;
  height: 1.5vh;
 background-color: #00bb6d;
}
 
.tool_icon:hover::after {
  top: -0.5vh;
  width: 40px;
  height: 0vh;
  border-bottom:14.0vh solid rgba(18, 180, 180, 0.8);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}


.social_links {
  width: 80%;
  position: relative;
  display: flex;
  justify-content: center; 
  align-items: center;
  gap: 25px;
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0px;
}

.social_item {
  width: 100px;
  height: 70px;
}
.social_item:hover {
  width: 220px;
}
.social_icon img {
  width: 45px;
}
.contact_me {
  font-size: 2rem;
}

.about-box ul {
  width: 85%;
}

}

@media (min-width: 1024px) and (max-height: 1050px) {

.tool_indicator::before {
  top: 5.5vh;
}
.tool_item.raviji a .tool_text {
  top: 1vh;
}
.tool_indicator::after {
  bottom: 7.5vh;
}

 .tool_indicator {
  width: 100px;
  left: 14px;
  top: 6.5vh;
}

.tool_indicator::before {
  top: 6.3vh;
  left: -32px;
  width: 90px;
}

  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 54.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
    width: 105px;
    left: -40px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 70vh;
    transform: translateX(0px);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
    width: 105px;
    left: -40px;
  }
} 

  @media (min-width: 1024px) and (max-height: 1000px) {

 .tool_nav {
  bottom: 20px;
  height: 78vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 2vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 26px;
  top: 0px;
  gap: 0px;
 }

 .tool_indicator {
  top: 6vh;
}


 .tool_indicator::before {
  top: 6vh;
  left: -32px;
  width: 90px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
}
  


.tool_indicator::after {
  bottom: 6vh;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 8px #29fd53,
              9.5vh 9.5vh 0px 3px #29fd53,
              70px 0px 0px 2px #29fd53,
              0 70px 0px 2px #29fd53;

}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 21.5vh;
  }

  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 37.3vh;
  }

  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 52.5vh;
  }

  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 68vh;
  }


}
@media (min-width: 1024px) and (max-height: 950px) {
   .tool_indicator {
  top: 4.5vh;
}

  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 53.5vh;
  }

  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 69.5vh;
  }
}
@media (min-width: 1024px) and (max-height: 930px) {

 .tool_nav {
  bottom: 20px;
  height: 76vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 26px;
  top: -10px;
  gap: 0px;
 }

 .tool_item a {
  height: 15vh;
 }

  .tool_indicator {
   top: 6vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 35.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 51vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 66vh;
  }

}
@media (min-width: 1024px) and (max-height: 800px) {

 .tool_nav {
  bottom: 10px;
  height: 72vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 1vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 26px;
  top: -10px;
  gap: 0px;
 }

 .tool_item a {
  height: 13.5vh;
 }

 .tool_indicator {
  top: 4.5vh;
}


 .tool_indicator::before {
  top: 6vh;
  left: -32px;
  width: 90px;
}

.tool_indicator::after {
  bottom: 6vh;
  width: 2vh;
  height: 2vh;
  box-shadow: 0 0 0 8px #29fd53,
              9.5vh 9.5vh 0px 3px #29fd53,
              9vh 0px 0px 2px #29fd53,
              0 9vh 0px 2px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 18vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 33vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 48vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 62vh;
  }

}

@media (min-width: 1024px) and (max-height: 690px) {

 .tool_nav {
  bottom: 10px;
  height: 70vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 26px;
  top: -10px;
  gap: 0px;
 }

 .tool_item a {
  height: 13.5vh;
 }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 32vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 45.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 59.5vh;
  }

}
@media (min-width: 1024px) and (max-height: 610px) {

 .tool_nav {
  bottom: 10px;
  height: 70vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 26px;
  top: -10px;
  gap: 0px;
 }

 .tool_item a {
  height: 13.5vh;
 }

 .tool_indicator {
  top: 3vh;
  left: 23px;
}

 .tool_indicator::before {
  top: 8vh;
  left: -38px;
  width: 90px;
  height: 17px;
}

.tool_indicator::after {
  bottom: 6vh;
  width: 1vh;
  height: 1vh;
  box-shadow: 0 0 0 7px #29fd53,
              10.5vh 10.5vh 0px 5px #29fd53,
              9vh 0px 0px 5px #29fd53,
              0 9vh 0px 5px #29fd53;

}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 16vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 30.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 44vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 58vh;
  }

}


 @media screen and (min-width: 1200px){
  .footer {
    bottom: -12vw;
    box-shadow: 0 -2vw 0 #181818;
    margin: 0 auto 20px auto;
  }
}
@media screen and (min-width: 1300px){
  .footer {
    bottom: -11vw;
  }

}

@media screen and (min-width: 1400px){
  .footer {
    bottom: -10.5vw;
  }
}

@media (min-width: 1200px) and (max-height: 1100px) {
  .footer {
   bottom: -340px;
  }
}

@media screen and (min-width: 1500px){


 .tool_icon:hover::before {
  top: 0vw; 
  width: 6vw;
  height: 0.6vw;
}

.tool_icon:hover::after {
  top: 8px;
  width: 4vw;
  height: 0vw;
  border-bottom: 7vw solid rgba(18, 180, 180, 0.8);
  border-left: 3vw solid transparent;
  border-right: 3vw solid transparent;
}

  .tool_nav ul {
   gap: 100px; 
  }
  .tool_icon img {
   width: 90px;
 
  overflow: visible;
  }
  .tool_text {
   font-size: 30px;
   bottom: 2px;
  }
  .tool_nav {
    height: 130px;
  }

  .tool_indicator {
  width: 100px;
  left: 14px;
}

.tool_item.raviji a .tool_text {
  top: 0vh;
  left: -5px;
}

  .tool_indicator::before {
    top: 35px;
    height: 25px;
  }
  .tool_indicator::after {
    bottom: 60px;
    width: 20px;
    height: 20px;
    box-shadow: -0px -0px 0px 8px #29fd53, 
                  90px 90px 0px 7px #29fd53, 
                  75px 0px 0px 2px #29fd53, 
                  0px 75px 0px 2px #29fd53;
  }
  
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(150px);
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
    width: 100px;
    left: -40px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(300px);
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
    width: 125px;
    left: -55px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(450px);
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
    width: 110px;
    left: -50px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(600px);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
    width: 120px;
    left: -50px;
  }

  .social_links {
    gap: 25px;
  }
  
  .social_item {
    width: 120px;
    height: 80px;
  }
  .social_item:hover {
    width: 240px;
  }
  .social_icon img {
    width: 60px;
  }
  .contact_me {
    font-size: 2em;
  }
}

@media (min-width: 1500px) and (max-height: 1400px) {
  .footer {
   bottom: -500px;
   box-shadow: none;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 20px;
   right: 10px;
   height: 82vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 13vw;
  }
  
  .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
}
.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0px;
  gap: 4vh;
}




  .tool_icon img {
   width: 11vh;
  }
  .tool_text {
   font-size: 45px;
   position: relative;
   top: 25px;
   gap: 0px;
  }

.tool_indicator {
  width: 180px;
  left: 10px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 8vh;
  left: -58px;
  width: 150px;
  height: 35px;
}
.tool_item.raviji a .tool_text {
  top: 2.5vh;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}

.tool_indicator::after {
  bottom: 6vh;
  width: 30px;
  height: 30px;
  box-shadow: 0 0 0 8px #29fd53,
      11vh 11vh 0px 4px #29fd53,
       8.5vh 0px 0px 3px #29fd53,
         0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 23vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -58px;
  width: 150px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 38.3vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -75px;
  width: 175px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 53vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -75px;
  width: 175px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 68vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -75px;
  width: 175px;
  }

   .tool_icon:hover::before {
  top: -1.5vh; 
  width: 12vh;
  height: 1.5vh;
 background-color: #00bb6d;}
 
.tool_icon:hover::after {
  top: -0.5vh;
  width: 7vh;
  height: 0vh;
  border-bottom:14.0vh solid rgba(18, 180, 180, 0.8);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}

.about-box ul {
  width: 85%;
}
}



@media (min-width: 1500px) and (max-height: 1360px) {

  .tool_indicator {
  width: 180px;
  left: 10px;
  top: 7vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 53.8vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 69vh;
  }

}
@media (min-width: 1500px) and (max-height: 1300px) {

 .tool_nav {
  bottom: 20px;
  height: 80vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 4vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 40px;
  top: 10px;
  gap: 0px;
 }

.tool_indicator {
  top: 5.5vh;
}

.tool_indicator::before {
  top: 7vh;
}
.tool_item.raviji a .tool_text {
  top: 1.5vh;
}
  
.tool_indicator::after {
  bottom: 6vh;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
       8.5vh 0px 0px 3px #29fd53,
         0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 21.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 37vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
     top: 53vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 68.6vh;
  }

}
@media (min-width: 1500px) and (max-height: 1250px) {
  .tool_indicator {
  top: 5vh;
}
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 69.6vh;
  }
}
@media (min-width: 1500px) and (max-height: 1200px) {

 .tool_nav {
  bottom: 20px;
  height: 76vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 38px;
  top: -8px;
  gap: 0px;
 }

 .tool_item a {
  height: 15vh;
 }

 
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 35.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
     top: 50.8vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 65.3vh;
  }

}
@media (min-width: 1500px) and (max-height: 950px) {

 .tool_nav {
  bottom: 10px;
  height: 74vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 32px;
  top: -10px;
  gap: 0px;
 }

 .tool_item a {
  height: 14.5vh;
 }

 .tool_indicator {
  width: 150px;
  left: 15px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 4vh;
  left: -58px;
  width: 130px;
  height: 28px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.2);
}

.tool_indicator::after {
  bottom: 8.5vh;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 5px #29fd53,
       8.5vh 0px 0px 3.5px #29fd53,
         0 8.5vh 0px 3.5px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 21.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 36.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -68px;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -68px;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -68px;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 50.8vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 65.3vh;
  }

}

@media (min-width: 1500px) and (max-height: 870px) {

 .tool_nav {
  bottom: 10px;
  height: 72.5vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 28px;
  top: -5px;
  gap: 0px;
 }

 .tool_item a {
  height: 14vh;
 }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 35.3vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 49.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 63.5vh;
  }

}
@media (min-width: 1500px) and (max-height: 800px) {

 .tool_nav {
  bottom: 10px;
  height: 70vh;
  width: 11vw;
  right: 20px;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 26px;
  top: -10px;
  gap: 0px;
 }

 .tool_item a {
  height: 13.5vh;
}

.tool_indicator {
  width: 130px;
  left: 15px;
  top: 7vh;
}

.tool_indicator::before {
  left: -48px;
  width: 110px;
}


.tool_indicator::after {
  bottom: 8.5vh;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 3.5px #29fd53,
       8.5vh 0px 0px 2px #29fd53,
         0 8.5vh 0px 2px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -57px;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -55px;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -55px;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -55px;
  }

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 48vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 61.5vh;
  }
}
@media (min-width: 1500px) and (max-height: 699px) {

 .tool_nav {
  bottom: 10px;
  height: 63vh;
  width: 14vw;
  right: 0px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -0px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 25px;
  top: 5px;
  gap: 0px;
 }

 .tool_item a {
  height: 12.2vh;
  display: flex;
  flex-wrap: wrap;
 }

     .tool_indicator{
    display: none;
  }
}

@media (min-width: 1500px) and (max-height: 599px) {

 .tool_nav {
  bottom: 10px;
  height: 55vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: 0px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 7.5vh;
 }

 .tool_text {
  font-size: 25px;
  top: 5px;
  gap: 0px;
 }

 .tool_item a {
  height: 11vh;
  display: flex;
  flex-wrap: wrap;
 }

}


@media screen and (min-width: 1600px){
  .footer {
    box-shadow: 0 -1vw 0 #181818;
    bottom: -9.5vw;
  }
}


@media (min-width: 1600px) and (max-height: 1400px) {
  .footer {
   bottom: -500px;
   box-shadow: none;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 20px;
   right: 10px;
   height: 80vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 13vw;
  }

  .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
}
.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0px;
  gap: 4vh;
}




  .tool_icon img {
   width: 10vh;
  }
  .tool_text {
   font-size: 45px;
   position: relative;
   top: 25px;
   gap: 0px;
  }

  .tool_indicator{
   top: 6.5vh ;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 21.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 37.3vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 52.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 67vh;
  }

.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}


.about-box ul {
  width: 85%;
}
}

@media (min-width: 1600px) and (max-height: 1350px) {
  .tool_indicator{
   top: 6vh ;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 68vh;
  }
}
@media (min-width: 1600px) and (max-height: 1300px) {

 .tool_nav {
  bottom: 20px;
  height: 78vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 3vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 40px;
  top: 10px;
  gap: 0px;
 }

.tool_indicator {
  top: 7vh;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 21vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 36.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
     top: 50.8vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 65vh;
  }
}

@media (min-width: 1600px) and (max-height: 1250px) {
  .tool_indicator {
  top: 5.5vh;
}
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    top: 51.3vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 66.3vh;
  }
}

@media (min-width: 1600px) and (max-height: 1200px) {

 .tool_nav {
  bottom: 20px;
  height: 73vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 40px;
  top: 0px;
  gap: 0px;
 }

 .tool_item a {
  height: 13.5vh;
 }
  .tool_indicator {
  top: 7vh;
}

   .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
     top: 47.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 60.5vh;
  }
  
}



@media screen and (min-width: 1800px){

 .footer {
   box-shadow: 0 -1vw 0 #181818;
   bottom: -9vw;
 }
   
  .tool_nav ul {
   gap: 140px; 
  }


  .tool_indicator {
  width: 100px;
  left: 14px;
 }


  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(190px);
  }
 
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(375px);
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(570px);
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(760px);
  }



}

@media (min-width: 1800px) and (max-height: 1400px) {
  .tool_nav ul {
  gap: 4.5vh;
}

  .tool_indicator {
  width: 190px;
  left: 14px;
  top: 5.5vh;
}

.tool_indicator::before {
  width: 150px;

}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
  }
 
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 68vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -85px;
  width: 190px;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -85px;
  width: 190px;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -85px;
  width: 190px;
  }
}

@media (min-width: 1800px) and (max-height: 1350px) {
  .tool_indicator{
   top: 5vh ;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 21vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 53vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 69vh;
  }
}

@media (min-width: 1800px) and (max-height: 1300px) {
  .tool_nav ul {
  gap: 4vh;
}
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 52vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 67vh;
  }
}

@media (min-width: 1800px) and (max-height: 1250px) {
    .tool_indicator{
   top: 4vh ;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 20.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 68.5vh;
  }
}

@media (min-width: 1800px) and (max-height: 1200px) {
  .tool_nav ul {
  gap: 1vh;
}
   .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 19vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 48vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 62.5vh;
  }
}


@media (min-width: 1600px) and (max-height: 950px) {

 .tool_nav {
  bottom: 10px;
  height: 73vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 32px;
  top: -5px;
  gap: 0px;
 }

 .tool_item a {
  height: 14vh;
 }

 .tool_indicator {
  width: 150px;
  left: 15px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 4vh;
  left: -58px;
  width: 130px;
  height: 28px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.2);
}

.tool_indicator::after {
  bottom: 8.5vh;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 5px #29fd53,
       8.5vh 0px 0px 3.5px #29fd53,
         0 8.5vh 0px 3.5px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 21.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 36vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -68px;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -68px;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -68px;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 50.8vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 64.3vh;
  }

}

@media (min-width: 1600px) and (max-height: 870px) {

 .tool_nav {
  bottom: 10px;
  height: 70vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 28px;
  top: 0px;
  gap: 0px;
 }

 .tool_item a {
  height: 13.5vh;
 }

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 47.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 61vh;
  }

}
@media (min-width: 1600px) and (max-height: 800px) {

 .tool_nav {
  bottom: 10px;
  height: 70vh;
  width: 11vw;
  right: 20px;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 26px;
  top: -10px;
  gap: 0px;
 }

 .tool_item a {
  height: 13.5vh;
 }

.tool_indicator {
  width: 130px;
  left: 15px;
  top: 7vh;
}

.tool_indicator::before {
  left: -48px;
  width: 110px;
}


.tool_indicator::after {
  bottom: 8.5vh;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 3.5px #29fd53,
       8.5vh 0px 0px 2px #29fd53,
         0 8.5vh 0px 2px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -57px;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -55px;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -55px;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -55px;
  }

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 48vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 61.5vh;
  }

}
@media (min-width: 1600px) and (max-height: 699px) {

 .tool_nav {
  bottom: 10px;
  height: 63vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -10px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 25px;
  top: 5px;
  gap: 0px;
 }

 .tool_item a {
  height: 12.2vh;
  display: flex;
  flex-wrap: wrap;
 }
 .tool_indicator {
 display: none;
}

}

@media (min-width: 1600px) and (max-height: 599px) {

 .tool_nav {
  bottom: 10px;
  height: 55vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -10px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 7.5vh;
 }

 .tool_text {
  font-size: 25px;
  top: 5px;
  gap: 0px;
 }

 .tool_item a {
  height: 11vh;
  display: flex;
  flex-wrap: wrap;
 }

}



@media screen and (min-width: 1880px){

  .footer {
    bottom: -8.5vw;
  }
}


@media screen and (min-width: 1950px){
  .footer {
    bottom: -8.3vw;
  }
}

@media (min-width: 1800px) and (max-height: 1400px) {
  .footer {
    bottom: -500px;
  }
}

@media screen and (min-width: 2000px){
  .tool_icon:hover::before {
    top: 2vw; 
    width: 6vw;
    height: 0.6vw;
    z-index: 16;
  }
  
  .tool_icon:hover::after {
    top: 2.5vw;
    width: 4vw;
    height: 0vw;
    border-bottom: 6vw solid rgba(18, 180, 180, 0.8);
    border-left: 2vw solid transparent;
    border-right: 2vw solid transparent;
  }
  .footer {
    bottom: -8vw;
    box-shadow: 0 -1vw 0 #181818;
  }

  .tool_icon {
    height: 9vw;
  }

  .tool_nav ul {
   gap: 9vw; 
  }
  .tool_icon img {
   width: 4.8vw;
   overflow: visible;
  }
  .tool_text {
   font-size: 2vw;
   top: -2.5vw;
  }
  .tool_nav {
    height: 6vw;
  }

  .tool_indicator::before {
    top: 2vw;
    height: 1.6vw;
    width: 7vw;
    left: -3vw;
  }

  .tool_indicator::after {
    bottom: 3vw;
    width: 1vw;
    height: 1vw;
    box-shadow: -0px -0px 0px 8px #29fd53, 
                  5vw 5vw 0px 7px #29fd53, 
                  4vw 0px 0px 2px #29fd53, 
                  0px 4vw 0px 2px #29fd53;
  }

  .tool_indicator {
  width: 2vw;
  left: 20px;
}

.tool_item.raviji a .tool_text {
  top: -1.8vw;
  left: 0px;
}
  
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(10.5vw);
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
    width: 6.5vw;
    left: -2.5vw;
  }
  

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(22vw);
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
    width: 8vw;
    left: -3.5vw;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(33.5vw);
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
    width: 7vw;
    left: -2.5vw;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(45.5vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
    width: 7vw;
    left: -2.5vw;
  }

  .social_links {
    gap: 1.2vw;
  }
  
  .social_item {
    width: 7vw;
    height: 4vw;
    border-radius: 1.2vw;
  }
  .social_item:hover {
    width: 14vw;
  }
  .social_icon img {
    width: 3vw;
  }
  .contact_me {
    font-size: 2.2vw;
  }
}


@media screen and (min-width: 2100px){
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(45vw);
  }
}
@media screen and (min-width: 2200px){
    .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(44.7vw);
  }
    .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
    width: 7vw;
    left: -3vw;
  }
    .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
    width: 7vw;
    left: -3vw;
  }
  
}
@media screen and (min-width: 2300px){
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(33.2vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(44.2vw);
  }
}

@media screen and (min-width: 2500px){
  .tool_nav ul li:nth-child(1).raviji ~ .tool_indicator {
    transform: translateX(-0.5vw);
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(21.5vw);
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(33vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(43.8vw);
  }
}

@media screen and (min-width: 2600px){
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(32.5vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(43.5vw);
  }
}
@media screen and (min-width: 2700px){
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(32.5vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(43vw);
  }
}

@media screen and (min-width: 2800px){

  .footer {
    bottom: -7.5vw;
  }

  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(32.2vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(42.8vw);
  }
}
@media screen and (min-width: 2900px){
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(32vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(42.5vw);
  }
}
@media screen and (min-width: 3100px){
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(21vw);
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(31.5vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(42vw);
  }
}

@media screen and (min-width: 3200px){
  .footer {
    bottom: -7.2vw;
  }
}
@media screen and (min-width: 3300px){
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(10vw);
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(20.5vw);
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(31.2vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(41.8vw);
  }
}

@media screen and (min-width: 3400px){
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(41.5vw);
  }
}
@media screen and (min-width: 3600px){
    .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(20vw);
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(30.5vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(41vw);
  }
}
@media screen and (min-width: 3700px){
  .footer {
    bottom: -6.5vw;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(30.8vw);
  }
}
@media screen and (min-width: 3900px){
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(40.8vw);
  } 
}
@media screen and (min-width: 4100px){
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(30vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(40.4vw);
  } 
}
@media screen and (min-width: 4300px){
  .footer {
    bottom: -6.4vw;
  }
}
@media screen and (min-width: 4600px){
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(9.6vw);
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(19.7vw);
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(29.6vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(39.8vw);
  } 
}
@media screen and (min-width: 5000px){
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(19.5vw);
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(29.8vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(39.5vw);
  } 
}
@media screen and (min-width: 5500px){
    .footer {
    bottom: -6vw;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(29.2vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(39.2vw);
  } 
}
@media screen and (min-width: 6000px){
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(19vw);
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(29vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(38.8vw);
  } 
}
@media screen and (min-width: 6500px){
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(28.5vw);
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(38.5vw);
  } 
}
@media screen and (min-width: 6700px){
  .footer {
    bottom: -5.5vw;
  }
}
@media screen and (min-width: 7500px){
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(38.1vw);
  } 
}
@media screen and (min-width: 8500px){
  .footer {
    bottom: -5.2vw;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   transform: translateX(37.8vw);
  } 
} 




@media (min-width: 2000px) and (max-height: 1800px) {
  .footer {
   bottom: -550px;
   box-shadow: none;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 20px;
   right: 20px;
   height: 82vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 13.5vw;
  }
  

  .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
}
.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0vh;
}

 .tool_item a {
  height: 16vh;
 }


  .tool_icon img {
   width: 11vh;
  }
  .tool_text {
   font-size: 2.5vw;
   position: relative;
   top: 0px;
   gap: 0px;
  }

.tool_indicator {
  width: 230px;
  left: 8px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 6vh;
  left: -70px;
  width: 200px;
  height: 55px;
}
.tool_item.raviji a .tool_text {
  top: 1vh;
  font-size: 60px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 40px;
  height: 40px;
  box-shadow: 0 0 0 8px #29fd53,
      11vh 11vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 23vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 200px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 40vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -95px;
  width: 230px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 56vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -95px;
  width: 230px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 72vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -95px;
  width: 230px;
  }


.tool_icon:hover::before {
  top: -1.5vh; 
  width: 11vh;
  height: 1.5vh;
 background-color: #00bb6d;}
 
.tool_icon:hover::after {
  top: -0.5vh;
  width: 7vh;
  height: 0vh;
  border-bottom:14.0vh solid rgba(18, 180, 180, 0.8);
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
}

.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}


.about-box ul {
  width: 85%;
}
}

@media (min-width: 2000px) and (max-height: 1600px) {

 .tool_nav {
  bottom: 20px;
  height: 80vh;
  width: 12vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 40px;
  top: -10px;
  gap: 0px;
 }

  .tool_item a {
  height: 15.5vh;
 }

.tool_item.raviji a .tool_text {
  font-size: 55px;
}

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 39vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 54.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 69.5vh;
  }
}
@media (min-width: 2000px) and (max-height: 1500px) {

 .tool_nav {
  bottom: 20px;
  height: 79vh;
  width: 11vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 48px;
  top: -10px;
  gap: 0px;
 }
  .tool_item a {
  height: 15vh;
 }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 38vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 52.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 67.5vh;
  }
}


@media (min-width: 2000px) and (max-height: 1400px) {

 .tool_nav {
  bottom: 20px;
  height: 76vh;
  width: 11vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 40px;
  top: 0px;
  gap: 0px;
 }

 .tool_item a {
  height: 15vh;
 }

.tool_indicator {
  width: 200px;
  left: 8px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 4.3vh;
  left: -70px;
  width: 180px;
  height: 40px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 50px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.15);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 30px;
  height: 30px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 22.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 180px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 37.5vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -95px;
  width: 230px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 52.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -80px;
  width: 200px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 67.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -80px;
  width: 200px;
  }
}
@media (min-width: 2000px) and (max-height: 1200px) {

 .tool_nav {
  bottom: 10px;
  height: 73vh;
  width: 11vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 40px;
  top: -5px;
  gap: 0px;
 }

 .tool_item a {
  height: 14.5vh;
 }
 .tool_indicator {
  top: 6vh;
}
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 20.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 35.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 50vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 64.5vh;
  }
}

@media (min-width: 2000px) and (max-height: 1100px) {

 .tool_nav {
  bottom: 10px;
  height: 70vh;
  width: 10vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 38px;
  top: 0px;
  gap: 0px;
 }

 .tool_item a {
  height: 13.5vh;
 }
 
.tool_indicator {
  width: 200px;
  left: 15px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 3.5vh;
  left: -60px;
  width: 150px;
  height: 35px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 45px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.15);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 25px;
  height: 25px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -60px;
  width: 150px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34.5vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -65px;
  width: 170px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 48vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -65px;
  width: 170px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 61.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -65px;
  width: 170px;
  }
}
@media (min-width: 2000px) and (max-height: 950px) {

 .tool_nav {
  bottom: 10px;
  height: 67vh;
  width: 9vw;
  right: 20px;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 33px;
  top: 0px;
  gap: 0px;
 }

 .tool_item a {
  height: 13vh;
 }
.tool_indicator {
  width: 200px;
  left: 15px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 3vh;
  left: -50px;
  width: 130px;
  height: 30px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 40px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.15);
}

.tool_indicator::after {
  bottom: 9vh;
  width: 17px;
  height: 17px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -50px;
  width: 130px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 160px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 46.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 160px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 59vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 160px;
  }

}
@media (min-width: 2000px) and (max-height: 880px) {

 .tool_nav {
  bottom: 10px;
  height: 63vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -10px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 25px;
  top: 5px;
  gap: 0px;
 }

 .tool_item a {
  height: 12.2vh;
  display: flex;
  flex-wrap: wrap;
 }
.tool_indicator {
display: none;
}
}

@media (min-width: 2000px) and (max-height: 699px) {

 .tool_nav {
  bottom: 10px;
  height: 55vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -10px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 7.5vh;
 }

 .tool_text {
  font-size: 25px;
  top: 5px;
  gap: 0px;
 }

 .tool_item a {
  height: 11vh;
  display: flex;
  flex-wrap: wrap;
 }

}




@media (min-width: 2300px) and (max-height: 2100px) {
  .footer {
   bottom: -500px;
   box-shadow: none;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 20px;
   right: 20px;
   height: 82vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 13.5vw;
  }
  

  .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
}
.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0vh;
}

 .tool_item a {
  height: 16vh;
 }


  .tool_icon img {
   width: 11vh;
  }
  .tool_text {
   font-size: 2.5vw;
   position: relative;
   top: 0px;
   gap: 0px;
  }


.tool_indicator {
  width: 230px;
  left: 8px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 6vh;
  left: -70px;
  width: 200px;
  height: 55px;
}
.tool_item.raviji a .tool_text {
  top: 1vh;
  font-size: 60px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 40px;
  height: 40px;
  box-shadow: 0 0 0 8px #29fd53,
      11vh 11vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 23vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 200px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 40vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -95px;
  width: 230px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 56vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -95px;
  width: 230px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 72vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -95px;
  width: 230px;
  }

.tool_icon:hover::before {
  top: -1.5vh; 
  width: 11vh;
  height: 1.5vh;
 background-color: #00bb6d;}
 
.tool_icon:hover::after {
  top: -0.5vh;
  width: 7vh;
  height: 0vh;
  border-bottom:14.0vh solid rgba(18, 180, 180, 0.8);
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
}



.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}


.about-box ul {
  width: 85%;
}
}

@media (min-width: 2300px) and (max-height: 1900px) {

 .tool_nav {
  bottom: 20px;
  height: 80vh;
  width: 14vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 11vh;
 }

 .tool_text {
  font-size: 60px;
  top: -10px;
  gap: 0px;
 }

  .tool_item a {
  height: 16vh;
 }

.tool_item.raviji a .tool_text {
  font-size: 55px;
}

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 39vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 55vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 70.5vh;
  }
}
@media (min-width: 2300px) and (max-height: 1700px) {
  .tool_indicator {
  top: 6.8vh;
}

 .tool_nav {
  bottom: 20px;
  height: 79vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 11vh;
 }

 .tool_text {
  font-size: 48px;
  top: -10px;
  gap: 0px;
 }
  .tool_item a {
  height: 16vh;
 }

}
@media (min-width: 2300px) and (max-height: 1600px) {

 .tool_nav {
  bottom: 20px;
  height: 76vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 50px;
  top: -15px;
  gap: 0px;
 }

 .tool_item a {
  height: 15vh;
 }

 .tool_text {
  font-size: 48px;
  top: -10px;
  gap: 0px;
 }

.tool_indicator {
  width: 200px;
  left: 8px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 4.3vh;
  left: -70px;
  width: 180px;
  height: 40px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 50px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.15);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 30px;
  height: 30px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 22.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 180px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 37.5vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -95px;
  width: 230px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 52.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -80px;
  width: 200px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 67.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -80px;
  width: 200px;
  }

}
@media (min-width: 2300px) and (max-height: 1300px) {

 .tool_nav {
  bottom: 10px;
  height: 73vh;
  width: 11vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 40px;
  top: -5px;
  gap: 0px;
 }

 .tool_item a {
  height: 14.5vh;
 }
 .tool_indicator {
  top: 6vh;
}
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 20.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 35.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 50vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 64.5vh;
  }
}

@media (min-width: 2300px) and (max-height: 1100px) {

 .tool_nav {
  bottom: 10px;
  height: 69vh;
  width: 9vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 35px;
  top: -10px;
  gap: 0px;
 }

 .tool_item a {
  height: 13.5vh;
 }
.tool_indicator {
  width: 200px;
  left: 15px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 3.5vh;
  left: -60px;
  width: 150px;
  height: 35px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 45px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.15);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 25px;
  height: 25px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -60px;
  width: 150px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34.5vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -65px;
  width: 170px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 48vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -65px;
  width: 170px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 61.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -65px;
  width: 170px;
  }
}
@media (min-width: 2300px) and (max-height: 950px) {

 .tool_nav {
  bottom: 10px;
  height: 67vh;
  width: 9vw;
  right: 20px;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 30px;
  top: 0px;
  gap: 0px;
 }

 .tool_item a {
  height: 13vh;
 }
.tool_indicator {
  width: 200px;
  left: 15px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 3vh;
  left: -50px;
  width: 130px;
  height: 30px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 40px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.15);
}

.tool_indicator::after {
  bottom: 9vh;
  width: 17px;
  height: 17px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -50px;
  width: 130px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 160px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 46.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 160px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 59vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 160px;
  }
}
@media (min-width: 2300px) and (max-height: 880px) {

 .tool_nav {
  bottom: 10px;
  height: 63vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -10px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 25px;
  top: 5px;
  gap: 0px;
 }

 .tool_item a {
  height: 12.2vh;
  display: flex;
  flex-wrap: wrap;
 }
.tool_indicator {
 display: none;
}
}

@media (min-width: 2300px) and (max-height: 699px) {

 .tool_nav {
  bottom: 10px;
  height: 55vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -10px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 7.5vh;
 }

 .tool_text {
  font-size: 25px;
  top: 5px;
  gap: 0px;
 }

 .tool_item a {
  height: 11vh;
  display: flex;
  flex-wrap: wrap;
 }

}



@media (min-width: 2800px) and (max-height: 2500px) {
  .footer {
   bottom: -650px;
   box-shadow: none;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 20px;
   right: 20px;
   height: 82vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 13.5vw;
  }
  

  .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
}
.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0vh;
}

 .tool_item a {
  height: 16vh;
 }


  .tool_icon img {
   width: 11vh;
  }
  .tool_text {
   font-size: 2.5vw;
   position: relative;
   top: 0px;
   gap: 0px;
  }

.tool_indicator {
  width: 270px;
  left: 8px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 6vh;
  left: -70px;
  width: 200px;
  height: 55px;
}
.tool_item.raviji a .tool_text {
  top: 1vh;
  font-size: 70px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 40px;
  height: 40px;
  box-shadow: 0 0 0 8px #29fd53,
      11vh 11vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 24vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -90px;
  width: 230px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 40vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -115px;
  width: 270px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 56.3vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -115px;
  width: 270px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 72.2vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -115px;
  width: 270px;
  }

.tool_icon:hover::before {
  top: -1.5vh; 
  width: 11.5vh;
  height: 1.5vh;
 background-color: #00bb6d;}
 
.tool_icon:hover::after {
  top: -0.5vh;
  width: 6vh;
  height: 0vh;
  border-bottom: 16vh solid rgba(18, 180, 180, 0.8);
  border-left: 5vh solid transparent;
  border-right: 5vh solid transparent;
}



.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}

.about-box ul {
  width: 85%;
}
}

@media (min-width: 2800px) and (max-height: 2100px) {

 .tool_nav {
  bottom: 20px;
  height: 80vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 11vh;
 }

 .tool_text {
  font-size: 70px;
  top: -10px;
  gap: 0px;
 }

  .tool_item a {
  height: 16vh;
 }

.tool_item.raviji a .tool_text {
  font-size: 65px;
}


  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 55.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 71.5vh;
  }

}

@media (min-width: 2800px) and (max-height: 1900px) {

 .tool_nav {
  bottom: 20px;
  height: 79vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 11vh;
 }

 .tool_text {
  font-size: 65px;
  top: -10px;
  gap: 0px;
 }
  .tool_item a {
  height: 16vh;
 }
 .tool_indicator {
  top: 7vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 23vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 39vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 55vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 70.8vh;
  }
}
@media (min-width: 2800px) and (max-height: 1800px) {

 .tool_nav {
  bottom: 20px;
  height: 76vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 60px;
  top: -15px;
  gap: 0px;
 }

 .tool_item a {
  height: 15.5vh;
 }
 .tool_indicator {
  top: 6vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 21.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 37vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 52.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 68vh;
  }
}
@media (min-width: 2800px) and (max-height: 1600px) {

 .tool_nav {
  bottom: 10px;
  height: 73vh;
  width: 10vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 60px;
  top: -15px;
  gap: 0px;
 }

 .tool_item a {
  height: 14.8vh;
 }
.tool_indicator {
  width: 200px;
  left: 18px;
  top: 7vh;
}

.tool_indicator::before {
  position: relative;
  top: 4.3vh;
  left: -70px;
  width: 180px;
  height: 40px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 50px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.15);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 30px;
  height: 30px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 21.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 180px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 36.3vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -95px;
  width: 230px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 51.3vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -80px;
  width: 200px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 65.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -80px;
  width: 200px;
  }
}

@media (min-width: 2800px) and (max-height: 1400px) {

 .tool_nav {
  bottom: 10px;
  height: 69vh;
  width: 9vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 40px;
  top: -10px;
  gap: 0px;
 }

 .tool_item a {
  height: 13.5vh;
 }
.tool_indicator {
  width: 200px;
  left: 15px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 3.5vh;
  left: -60px;
  width: 150px;
  height: 35px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 48px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.18);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 25px;
  height: 25px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -60px;
  width: 150px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34.5vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -65px;
  width: 170px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 48vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -65px;
  width: 170px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 61.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -65px;
  width: 170px;
  }
}
@media (min-width: 2800px) and (max-height: 1200px) {

 .tool_nav {
  bottom: 10px;
  height: 67vh;
  width: 9vw;
  right: 20px;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 35px;
  top: -5px;
  gap: 0px;
 }

 .tool_item a {
  height: 13vh;
 }
.tool_indicator {
  width: 200px;
  left: 15px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 3vh;
  left: -50px;
  width: 130px;
  height: 30px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 40px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.15);
}

.tool_indicator::after {
  bottom: 9vh;
  width: 17px;
  height: 17px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -50px;
  width: 130px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 160px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 46.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 160px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 59vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 160px;
  }
}
@media (min-width: 2800px) and (max-height: 1100px) {

 .tool_nav {
  bottom: 10px;
  height: 63vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -30px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 45px;
  right: -30px;
  top: 5px;
  gap: 0px;
 }

 .tool_item a {
  height: 12.2vh;
  display: flex;
  flex-wrap: wrap;
 }
 .tool_indicator {
 display: none;
  }
}

@media (min-width: 2800px) and (max-height: 899px) {

 .tool_nav {
  bottom: 10px;
  height: 55vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -15px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 40px;
  top: 5px;
  gap: 0px;
  right: -15px;
 }

 .tool_item a {
  height: 11vh;
  display: flex;
  flex-wrap: wrap;
 }

}





@media (min-width: 3300px) and (max-height: 2800px) {
  .footer {
   bottom: -905px;
   box-shadow: none;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 0px;
   right: 20px;
   height: 81vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 13.5vw;
  }
  

  .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
}
.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0vh;
}

 .tool_item a {
  height: 16vh;
 }


  .tool_icon img {
   width: 11vh;
  }
  .tool_text {
   font-size: 2.5vw;
   position: relative;
   top: 0px;
   gap: 0px;
  }


.tool_indicator {
  width: 320px;
  left: 10px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 6vh;
  left: -95px;
  width: 250px;
  height: 70px;
}
.tool_item.raviji a .tool_text {
  top: 1vh;
  font-size: 80px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 50px;
  height: 50px;
  box-shadow: 0 0 0 9px #29fd53,
      11vh 11vh 0px 5px #29fd53,
      8.5vh 0px 0px 4px #29fd53,
        0 8.5vh 0px 4px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 23.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -115px;
  width: 250px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 40vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -150px;
  width: 320px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 55.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -150px;
  width: 320px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 71.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -150px;
  width: 320px;
  }

.tool_icon:hover::before {
  top: -1.5vh; 
  width: 11.5vh;
  height: 1.5vh;
 background-color: #00bb6d;}
 
.tool_icon:hover::after {
  top: -0.5vh;
  width: 6vh;
  height: 0vh;
  border-bottom: 16vh solid rgba(18, 180, 180, 0.8);
  border-left: 5vh solid transparent;
  border-right: 5vh solid transparent;
}

.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}

.about-box ul {
  width: 85%;
}
}

@media (min-width: 3300px) and (max-height: 2500px) {

 .tool_nav {
  bottom: 20px;
  height: 80vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 11vh;
 }

 .tool_text {
  font-size: 70px;
  top: -10px;
  gap: 0px;
 }

  .tool_item a {
  height: 16vh;
 }

}
@media (min-width: 3300px) and (max-height: 2300px) {

 .tool_nav {
  bottom: 20px;
  height: 79vh;
  width: 13vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 11vh;
 }

 .tool_text {
  font-size: 70px;
  top: -20px;
  gap: 0px;
 }
  .tool_item a {
  height: 16vh;
 }

  .tool_indicator {
   top: 7vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 22.7vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 39vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 54.8vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 70.5vh;
  }

}
@media (min-width: 3300px) and (max-height: 2100px) {

 .tool_nav {
  bottom: 20px;
  height: 76vh;
  width: 11vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 70px;
  top: -15px;
  gap: 0px;
 }

 .tool_item a {
  height: 15.5vh;
 }
 .tool_indicator {
  top: 6vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 21.5vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 37vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 52.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 68vh;
  }
}
@media (min-width: 3300px) and (max-height: 1900px) {

 .tool_nav {
  bottom: 10px;
  height: 73vh;
  width: 10vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 50px;
  top: -15px;
  gap: 0px;
 }

 .tool_item a {
  height: 14.8vh;
 }
.tool_indicator {
  width: 250px;
  left: 18px;
  top: 7vh;
}

.tool_indicator::before {
  position: relative;
  top: 4.3vh;
  left: -70px;
  width: 180px;
  height: 50px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 60px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.15);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 40px;
  height: 40px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 21.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -85px;
  width: 180px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 36.3vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -125px;
  width: 250px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 51.3vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -125px;
  width: 250px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 65.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -125px;
  width: 250px;
  }
}

@media (min-width: 3300px) and (max-height: 1700px) {

 .tool_nav {
  bottom: 10px;
  height: 69vh;
  width: 9vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 50px;
  top: -10px;
  gap: 0px;
 }

 .tool_item a {
  height: 14vh;
 }
.tool_indicator {
  width: 200px;
  left: 15px;
  top: 6vh;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -90px;
  width: 200px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34.5vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -95px;
  width: 200px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 48vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -95px;
  width: 200px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 61.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -95px;
  width: 200px;
  }
}
@media (min-width: 3300px) and (max-height: 1500px) {

 .tool_nav {
  bottom: 10px;
  height: 67vh;
  width: 9vw;
  right: 20px;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 45px;
  top: -5px;
  gap: 0px;
 }

 .tool_item a {
  height: 13.5vh;
 }
.tool_indicator {
  width: 200px;
  left: 30px;
  top: 7vh;
}

.tool_indicator::before {
  position: relative;
  top: 3vh;
  left: -50px;
  width: 150px;
  height: 45px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 50px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.15);
}

.tool_indicator::after {
  bottom: 9vh;
  width: 30px;
  height: 30px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      8.5vh 0px 0px 3px #29fd53,
        0 8.5vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 20vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -70px;
  width: 150px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 34vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -90px;
  width: 200px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 47vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -90px;
  width: 200px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 60.5vh;
    left: 10px;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -90px;
  width: 200px;
  }
}
@media (min-width: 3300px) and (max-height: 1350px) {

 .tool_nav {
  bottom: 10px;
  height: 63vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -50px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 50px;
  right: -40px;
  top: 5px;
  gap: 0px;
 }

 .tool_item a {
  height: 12.2vh;
  display: flex;
  flex-wrap: wrap;
 }
.tool_indicator{
  display: none;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  left: 50px;
  font-size: 70px;
  color: #29fd53;
}
}

@media (min-width: 3300px) and (max-height: 899px) {

 .tool_nav {
  bottom: 10px;
  height: 55vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -35px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 45px;
  top: 5px;
  gap: 0px;
  right: -20px;
 }

 .tool_item a {
  height: 11vh;
  display: flex;
  flex-wrap: wrap;
 }

}

@media (min-width: 3800px) and (max-height: 3000px) {
  .footer {
   bottom: -905px;
   box-shadow: none;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 0px;
   right: 20px;
   height: 81vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 12vw;
  }
  

  .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
}
.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0vh;
}

 .tool_item a {
  height: 16vh;
 }

  .tool_icon img {
   width: 10vh;
  }
  .tool_text {
   font-size: 2.5vw;
   position: relative;
   top: 0px;
   gap: 0px;
  }


.tool_indicator {
  width: 380px;
  left: 10px;
  top: 7.8vh;
}

.tool_indicator::before {
  position: relative;
  top: 6vh;
  left: -95px;
  width: 280px;
  height: 80px;
}
.tool_item.raviji a .tool_text {
  top: 1vh;
  font-size: 90px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 60px;
  height: 60px;
  box-shadow: 0 0 0 9px #29fd53,
      11vh 11vh 0px 5px #29fd53,
      7.5vh 0px 0px 4px #29fd53,
        0 7.5vh 0px 4px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 23.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -115px;
  width: 250px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 40vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -150px;
  width: 320px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 55.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -140px;
  width: 320px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 71.8vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -150px;
  width: 320px;
  }

  .tool_icon:hover::before {
  top: -1.5vh; 
  width: 11.5vh;
  height: 1.5vh;
 background-color: #00bb6d;}
 
.tool_icon:hover::after {
  top: -0.5vh;
  width: 6vh;
  height: 0vh;
  border-bottom: 16vh solid rgba(18, 180, 180, 0.8);
  border-left: 5vh solid transparent;
  border-right: 5vh solid transparent;
}

.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}

.about-box ul {
  width: 85%;
}
}

@media (min-width: 3800px) and (max-height: 2800px) {

 .tool_nav {
  bottom: 0px;
  height: 78vh;
  width: 12vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 70px;
  top: -20px;
  gap: 0px;
 }

  .tool_item a {
  height: 16vh;
 }
  .tool_indicator {
   top: 5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 21vh;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 37vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 53.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 69vh;
  }
.tool_item.raviji a .tool_text {
  top: -0.5vh;
  font-size: 90px;
}
}



/* extra responsive for every device  */

@media (min-width: 9000px) and (max-height: 7000px) {
  .footer {
  position: relative;
  bottom: -100px;
   box-shadow: none;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 0px;
   right: 20px;
   height: 81vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 12vw;
  }
  

 .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
 }

.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0vh;
}

 .tool_item a {
  height: 16vh;
 }

  .tool_icon img {
   width: 15vh;
  }
  .tool_text {
   font-size: 2.5vw;
   position: relative;
   top: 0px;
   gap: 0px;
  }

.tool_indicator {
  width: 1000px;
  left: 0px;
  top: 7.8vh;
}

.tool_indicator::before {
  position: relative;
  top: 3.5vh;
  left: -300px;
  width: 800px;
  height: 3.5vh;
}
.tool_item.raviji a .tool_text {
  top: -1vh;
  font-size: 2.8vw;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}
.tool_indicator::after {
  bottom: 9.5vh;
  width: 2.5vh;
  height: 2.5vh;
  box-shadow: 0 0 0 10px #29fd53,
      10.8vh 10.8vh 0px 8px #29fd53,
      8.5vh 0px 0px 2px #29fd53,
        0 8.5vh 0px 2px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -25px;
    top: 24vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -320px;
  width: 800px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -50px;
    top: 40vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
   left: -400px;
   width: 1000px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   transform: translateX(0px);
   left: -60px;
   top: 56vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
   left: -370px;
   width: 900px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -40px;
    top: 72vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
   left: -400px;
   width: 950px;
  }
 .tool_icon:hover::before {
  top: -0vh; 
  width: 11vh;
  height: 1.5vh;
 background-color: #00bb6d;
 }
 
 .tool_icon:hover::after {
  top: -0vh;
  width: 6vh;
  height: 0vh;
  border-bottom: 15vh solid rgba(18, 180, 180, 0.8);
  border-left: 4vh solid transparent;
  border-right: 4vh solid transparent;
 }

.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 3vw;
  padding-bottom: 2.5vw;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}

.about-box ul {
  width: 85%;
}
}


@media (min-width: 8000px) and (max-height: 6000px) {
  .footer {
  position: relative;
  bottom: -90px;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 0px;
   right: 20px;
   height: 81vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 12vw;
  }
  
  .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
}
.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0vh;
}

 .tool_item a {
  height: 16vh;
 }

  .tool_icon img {
   width: 15vh;
  }
  .tool_text {
   font-size: 2.5vw;
   position: relative;
   top: 0px;
   gap: 0px;
  }

.tool_indicator {
  width: 1000px;
  left: 0px;
  top: 7.8vh;
}

.tool_indicator::before {
  position: relative;
  top: 3.5vh;
  left: -250px;
  width: 650px;
  height: 3.5vh;
}
.tool_item.raviji a .tool_text {
  top: -1vh;
  font-size: 2.8vw;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}
.tool_indicator::after {
  bottom: 9.5vh;
  width: 2.5vh;
  height: 2.5vh;
  box-shadow: 0 0 0 10px #29fd53,
      10.8vh 10.8vh 0px 8px #29fd53,
      8.5vh 0px 0px 2px #29fd53,
        0 8.5vh 0px 2px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -25px;
    top: 24vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -260px;
  width: 650px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -50px;
    top: 40vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
   left: -330px;
   width: 800px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   transform: translateX(0px);
   left: -60px;
   top: 56vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
   left: -280px;
   width: 750px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -40px;
    top: 72vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
   left: -320px;
   width: 800px;
  }
 .tool_icon:hover::before {
  top: -0vh; 
  width: 11vh;
  height: 1.5vh;
 background-color: #00bb6d;
 }
 
 .tool_icon:hover::after {
  top: -0vh;
  width: 6vh;
  height: 0vh;
  border-bottom: 15vh solid rgba(18, 180, 180, 0.8);
  border-left: 4vh solid transparent;
  border-right: 4vh solid transparent;
 }
.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 3vw;
  padding-bottom: 2.5vw;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}

.about-box ul {
  width: 85%;
}
}

@media (min-width: 7500px) and (max-height: 5500px) {
  .footer {
   position: relative;
   bottom: -80px;
   box-shadow: none;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 0px;
   right: 20px;
   height: 81vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 12vw;
  }
  
  .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
}
.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0vh;
}

 .tool_item a {
  height: 16vh;
 }

  .tool_icon img {
   width: 15vh;
  }
  .tool_text {
   font-size: 2.5vw;
   position: relative;
   top: 0px;
   gap: 0px;
  }

.tool_indicator {
  width: 1000px;
  left: 0px;
  top: 7.8vh;
}

.tool_indicator::before {
  position: relative;
  top: 4vh;
  left: -200px;
  width: 550px;
  height: 3.5vh;
}
.tool_item.raviji a .tool_text {
  top: -0.2vh;
  font-size: 2.8vw;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}
.tool_indicator::after {
  bottom: 9.5vh;
  width: 2.5vh;
  height: 2.5vh;
  box-shadow: 0 0 0 10px #29fd53,
      10.8vh 10.8vh 0px 8px #29fd53,
      8.5vh 0px 0px 2px #29fd53,
        0 8.5vh 0px 2px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -25px;
    top: 24vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -250px;
  width: 600px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -50px;
    top: 40vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
   left: -330px;
   width: 800px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   transform: translateX(0px);
   left: -60px;
   top: 56vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
   left: -280px;
   width: 700px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -40px;
    top: 72vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
   left: -300px;
   width: 770px;
  }

 .tool_icon:hover::before {
  top: -0vh; 
  width: 11vh;
  height: 1.5vh;
 background-color: #00bb6d;
 }
 
 .tool_icon:hover::after {
  top: -0vh;
  width: 6vh;
  height: 0vh;
  border-bottom: 15vh solid rgba(18, 180, 180, 0.8);
  border-left: 4vh solid transparent;
  border-right: 4vh solid transparent;
 }

.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 3vw;
  padding-bottom: 2.5vw;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}

.about-box ul {
  width: 85%;
}
}

@media (min-width: 6500px) and (max-height: 5000px) {
  .footer {
   position: relative;
   bottom: -70px;
   box-shadow: none;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 0px;
   right: 20px;
   height: 81vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 12vw;
  }

  .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
}
.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0vh;
}

 .tool_item a {
  height: 16vh;
 }

  .tool_icon img {
   width: 15vh;
  }
  .tool_text {
   font-size: 2.5vw;
   position: relative;
   top: 0px;
   gap: 0px;
  }


.tool_indicator {
  width: 700px;
  left: 0px;
  top: 7.8vh;
}

.tool_indicator::before {
  position: relative;
  top: 4vh;
  left: -200px;
  width: 550px;
  height: 3.5vh;
}
.tool_item.raviji a .tool_text {
  top: -0.2vh;
  font-size: 2.8vw;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}
.tool_indicator::after {
  bottom: 9.5vh;
  width: 2.5vh;
  height: 2.5vh;
  box-shadow: 0 0 0 10px #29fd53,
      10.8vh 10.8vh 0px 8px #29fd53,
      8.5vh 0px 0px 2px #29fd53,
        0 8.5vh 0px 2px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -25px;
    top: 24vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -200px;
  width: 550px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -50px;
    top: 40vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
   left: -280px;
   width: 700px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   transform: translateX(0px);
   left: -60px;
   top: 56vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
   left: -250px;
   width: 650px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -40px;
    top: 72vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
   left: -250px;
   width: 650px;
  }

  .tool_icon:hover::before {
  top: -1.5vh; 
  width: 11vh;
  height: 1.5vh;
 background-color: #00bb6d;}
 
.tool_icon:hover::after {
  top: -0.5vh;
  width: 6vh;
  height: 0vh;
  border-bottom: 14vh solid rgba(18, 180, 180, 0.8);
  border-left: 4vh solid transparent;
  border-right: 4vh solid transparent;
}

.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 3vw;
  padding-bottom: 2.5vw;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}

.about-box ul {
  width: 85%;
}
}

@media (min-width: 5000px) and (max-height: 4500px) {
  .footer {
   position: relative;
   bottom: -60px;
   box-shadow: none;
   margin: 0 auto 20px auto;
   z-index: 15;
  }

  .tool_nav {
   display: flex;
   position: fixed;
   bottom: 0px;
   right: 20px;
   height: 81vh;
   gap: 0px;
   padding: 0;
   margin: 0;
   box-shadow: inset 6px 3px 3px 0px #111, inset -6px -8px 4px 0px #333;
   background: #181818;
   width: 12vw;
  }
  

  .tool_item {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 50vw;
  border-radius: 8px;
  transition: background 0.3s;
}
.tool_item a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  color: white;
  text-decoration: none;
}
  .tool_nav ul {
  display: flex;
  flex-direction: column; 
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0vh;
}

 .tool_item a {
  height: 16vh;
 }

  .tool_icon img {
   width: 10vh;
  }
  .tool_text {
   font-size: 2.5vw;
   position: relative;
   top: 0px;
   gap: 0px;
  }

.tool_indicator {
  width: 700px;
  left: 0px;
  top: 7.8vh;
}

.tool_indicator::before {
  position: relative;
  top: 4vh;
  left: -200px;
  width: 550px;
  height: 150px;
}
.tool_item.raviji a .tool_text {
  top: -0.2vh;
  font-size: 2.8vw;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}
.tool_indicator::after {
  bottom: 8vh;
  width: 3vh;
  height: 3vh;
  box-shadow: 0 0 0 10px #29fd53,
      9.7vh 9.7vh 0px 8px #29fd53,
      8.5vh 0px 0px 2px #29fd53,
        0 8.5vh 0px 2px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -25px;
    top: 24vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -200px;
  width: 550px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -50px;
    top: 40vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
   left: -280px;
   width: 700px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   transform: translateX(0px);
   left: -60px;
   top: 56vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
   left: -250px;
   width: 650px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -40px;
    top: 71.5vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
   left: -250px;
   width: 650px;
  }

  .tool_icon:hover::before {
  top: -1.5vh; 
  width: 11vh;
  height: 1.5vh;
 background-color: #00bb6d;}
 
.tool_icon:hover::after {
  top: -0.5vh;
  width: 6vh;
  height: 0vh;
  border-bottom: 14vh solid rgba(18, 180, 180, 0.8);
  border-left: 4vh solid transparent;
  border-right: 4vh solid transparent;
}


.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 3vw;
  padding-bottom: 2.5vw;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}

.about-box ul {
  width: 85%;
}
}

@media (min-width: 5000px) and (max-height: 3400px) {

 .tool_nav {
  bottom: 0px;
  height: 75vh;
  width: 12vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
  top: -10px;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 110px;
  top: -40px;
  gap: 0px;
 }

  .tool_item a {
  height: 15.2vh;
 }
.tool_indicator {
  width: 500px;
  left: 6px;
  top: 6.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 4.5vh;
  left: -140px;
  width: 380px;
  height: 100px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 130px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 80px;
  height: 80px;
  box-shadow: 0 0 0 10px #29fd53,
      10vh 10vh 0px 8px #29fd53,
      7.5vh 0px 0px 2.5px #29fd53,
        0 7.5vh 0px 2.5px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -0px;
    top: 21.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -170px;
  width: 380px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -25px;
    top: 37vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -200px;
  width: 500px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   transform: translateX(0px);
   left: -25px;
   top: 52vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
   left: -190px;
   width: 480px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -20px;
    top: 67vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
   left: -190px;
   width: 480px;
  }

}
@media (min-width: 5000px) and (max-height: 3000px) {

 .tool_nav {
  bottom: 0px;
  height: 74.5vh;
  width: 11.5vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 100px;
  top: -20px;
  gap: 0px;
 }
  .tool_item a {
  height: 15vh;
 }
.tool_indicator {
  width: 500px;
  left: 6px;
  top: 6.2vh;
}

.tool_indicator::before {
  position: relative;
  top: 4.5vh;
  left: -140px;
  width: 380px;
  height: 90px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 115px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 70px;
  height: 70px;
  box-shadow: 0 0 0 10px #29fd53,
      10vh 10vh 0px 8px #29fd53,
      8vh 0px 0px 2.5px #29fd53,
        0 8vh 0px 2.5px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -0px;
    top: 21vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -170px;
  width: 380px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -25px;
    top: 36.5vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -200px;
  width: 500px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   transform: translateX(0px);
   left: -25px;
   top: 51.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
   left: -190px;
   width: 480px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -20px;
    top: 66.3vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
   left: -190px;
   width: 480px;
  }
}
@media (min-width: 5000px) and (max-height: 2800px) {

 .tool_nav {
  height: 73vh;
  width: 11vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 90px;
  top: -20px;
  gap: 0px;
 }

 .tool_item a {
  height: 14.5vh;
 }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -0px;
    top: 20.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -170px;
  width: 380px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -25px;
    top: 35vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -200px;
  width: 500px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   transform: translateX(0px);
   left: -25px;
   top: 50vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
   left: -190px;
   width: 480px;
  }
    .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    left: -10px;
    top: 64vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
   left: -190px;
   width: 480px;
  }
}
@media (min-width: 5000px) and (max-height: 2700px) {

 .tool_nav {
  bottom: 10px;
  height: 73vh;
  width: 10vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 80px;
  top: -15px;
  gap: 0px;
 }

 .tool_item a {
  height: 14.5vh;
 }
}


@media (min-width: 3800px) and (max-height: 2600px) {

 .tool_nav {
  bottom: 20px;
  height: 77vh;
  width: 11.5vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 80px;
  top: -20px;
  gap: 0px;
 }
  .tool_item a {
  height: 15vh;
 }

 .tool_indicator {
  width: 380px;
  left: 15px;
  top: 6vh;
}

.tool_indicator::before {
  position: relative;
  top: 6vh;
  left: -95px;
  width: 280px;
  height: 80px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 90px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 60px;
  height: 60px;
  box-shadow: 0 0 0 9px #29fd53,
      11vh 11vh 0px 5px #29fd53,
      8vh 0px 0px 4px #29fd53,
        0 8vh 0px 4px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
   top: 21.5vh;
   left: 0px;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   top: 36vh;
   left: 0px;
  }
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -170px;
  width: 380px;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 51vh;
   left: 0px;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   top: 66vh;
   left: 0px;
  }

  .tool_icon:hover::before {
  top: -1.5vh; 
  width: 11.5vh;
  height: 1.5vh;
 background-color: #00bb6d;}
 
.tool_icon:hover::after {
  top: -0.5vh;
  width: 6vh;
  height: 0vh;
  border-bottom: 16vh solid rgba(18, 180, 180, 0.8);
  border-left: 5vh solid transparent;
  border-right: 5vh solid transparent;
}
.social_links {
  width: 80%;
  gap: 2vw;
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0px;
}

.social_item {
  width: 11vw;
  height: 6vw;
}
.social_item:hover {
  width: 22vw;
}
.social_icon img {
  width: 4vw;
}
.contact_me {
  font-size: 3vw;
}

.about-box ul {
  width: 85%;
}
}
@media (min-width: 3800px) and (max-height: 2400px) {

 .tool_nav {
  bottom: 20px;
  height: 76vh;
  width: 11vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 70px;
  top: -15px;
  gap: 0px;
 }

 .tool_item a {
  height: 14.5vh;
 }
.tool_indicator {
  width: 320px;
  left: 10px;
  top: 7.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 5vh;
  left: -95px;
  width: 250px;
  height: 70px;
}
.tool_item.raviji a .tool_text {
  top: -0.5vh;
  font-size: 80px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.1);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 50px;
  height: 50px;
  box-shadow: 0 0 0 9px #29fd53,
      10vh 10vh 0px 5px #29fd53,
      8.5vh 0px 0px 4px #29fd53,
        0 8.5vh 0px 4px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 22vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -115px;
  width: 250px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 36.5vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -150px;
  width: 320px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
    transform: translateX(0px);
     top: 51vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -150px;
  width: 320px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 65vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -150px;
  width: 320px;
  }

}
@media (min-width: 3800px) and (max-height: 2200px) {

 .tool_nav {
  bottom: 10px;
  height: 71vh;
  width: 10vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 65px;
  top: -15px;
  gap: 0px;
 }

 .tool_item a {
  height: 13.5vh;
 }
.tool_indicator {
  width: 320px;
  left: 10px;
  top: 6.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 5vh;
  left: -95px;
  width: 250px;
  height: 60px;
}

  

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    transform: translateX(0px);
    top: 20vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -115px;
  width: 250px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
   left: -10px;
    top: 33.5vh;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -120px;
  width: 320px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   left: -10px;
   top: 46.5vh;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
   left: -130px;
   width: 320px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
   left: -0px;
   top: 60vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -150px;
  width: 320px;
  }
}

@media (min-width: 3800px) and (max-height: 1900px) {

 .tool_nav {
  bottom: 10px;
  height: 67.5vh;
  width: 9vw;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 9vh;
 }

 .tool_text {
  font-size: 60px;
  top: -10px;
  gap: 0px;
 }

 .tool_item a {
  height: 13vh;
 }

.tool_indicator {
  width: 300px;
  left: 18px;
  top: 6.5vh;
}

.tool_indicator::before {
  position: relative;
  top: 4vh;
  left: -90px;
  width: 220px;
  height: 70px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 80px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.15);
}

.tool_indicator::after {
  bottom: 8vh;
  width: 50px;
  height: 50px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      8vh 0px 0px 3px #29fd53,
        0 8vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 19.5vh;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -100px;
  width: 220px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 33vh;
    left: -10px;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -125px;
  width: 300px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 46vh;
  left: -10px;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
  left: -125px;
  width: 300px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
  left: -0px;
    top: 58vh;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
  left: -125px;
  width: 300px;
  }
}
@media (min-width: 3800px) and (max-height: 1700px) {

 .tool_nav {
  bottom: 10px;
  height: 63.5vh;
  width: 8vw;
  right: 20px;
 }
  
 .tool_nav ul {
  gap: 0vh;
 }

 .tool_icon img {
  width: 8vh;
 }

 .tool_text {
  font-size: 50px;
  top: -15px;
  gap: 0px;
 }

 .tool_item a {
  height: 12.5vh;
 }
.tool_indicator {
  width: 250px;
  left: 30px;
  top: 7vh;
}

.tool_indicator::before {
  position: relative;
  top: 2.5vh;
  left: -60px;
  width: 150px;
  height: 50px;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  font-size: 60px;
}
  
.tool_item.raviji .tool_icon img {
  filter: brightness(1);
  transform: scale(1.15);
}

.tool_indicator::after {
  bottom: 9vh;
  width: 35px;
  height: 35px;
  box-shadow: 0 0 0 8px #29fd53,
      10vh 10vh 0px 4px #29fd53,
      7vh 0px 0px 3px #29fd53,
        0 7vh 0px 3px #29fd53;
}

  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator {
    top: 19vh;
    left: -0px;
  }
  .tool_nav ul li:nth-child(2).raviji ~ .tool_indicator::before {
  left: -50px;
  width: 160px;
  }
  
  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator {
    top: 32vh;
    left: -10px;
  }

  .tool_nav ul li:nth-child(3).raviji ~ .tool_indicator::before {
  left: -90px;
  width: 250px;
  }
  
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator {
   top: 44.5vh;
   left: -5px;
  }
  .tool_nav ul li:nth-child(4).raviji ~ .tool_indicator::before {
   left: -85px;
   width: 230px;
  }
  
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator {
    top: 56.5vh;
    left: 10px;
  }
  .tool_nav ul li:nth-child(5).raviji ~ .tool_indicator::before {
   left: -95px;
   width: 230px;
  }
}
@media (min-width: 3800px) and (max-height: 1500px) {

 .tool_nav {
  bottom: 10px;
  height: 63vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -80px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 64px;
  right: -50px;
  top: 5px;
  gap: 0px;
 }

 .tool_item a {
  height: 12.2vh;
  display: flex;
  flex-wrap: wrap;
 }
.tool_indicator {
  display: none;
}
.tool_item.raviji a .tool_text {
  top: 0vh;
  left: 50px;
  font-size: 70px;
  color: #29fd53;
}
}

@media (min-width: 3800px) and (max-height: 899px) {

 .tool_nav {
  bottom: 10px;
  height: 55vh;
  width: 14vw;
  right: 5px;
  justify-content: start;
 }
  
 .tool_nav ul {
  right: -35px;
  gap: 0vh;
  border-top: 2px #00bcd4;
 }

 .tool_icon img {
  width: 10vh;
 }

 .tool_text {
  font-size: 45px;
  top: 5px;
  gap: 0px;
  right: -20px;
 }

 .tool_item a {
  height: 11vh;
  display: flex;
  flex-wrap: wrap;
 }

}

@media (min-width: 3800px) and (max-height: 3000px) {
    .footer {
  position: relative;
   bottom: -50px;
    }
}
@media (min-width: 3300px) and (max-height: 2800px) {
    .footer {
  position: relative;
   bottom: -50px;
    }
}
@media (min-width: 2800px) and (max-height: 2500px) {
    .footer {
  position: relative;
   bottom: -50px;
    }
}
@media (min-width: 2300px) and (max-height: 2100px) {
    .footer {
  position: relative;
   bottom: -50px;
    }
}
@media (min-width: 2000px) and (max-height: 1800px) {
    .footer {
  position: relative;
   bottom: -50px;
    }
}
@media (min-width: 1600px) and (max-height: 1400px) {
    .footer {
  position: relative;
   bottom: -50px;
    }
}
@media (min-width: 1500px) and (max-height: 1400px) {
    .footer {
  position: relative;
   bottom: -50px;
    }
}
@media (min-width: 1024px) and (max-height: 1100px) {
    .footer {
  position: relative;
   bottom: -10px;
    }
} 
/* END extra responsive for every device  */



.about-box {
  background-color: #181818; /* Dark background for the footer */
  padding: 20px 0;
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.about-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #03a9f4, #00bcd4);
  z-index: -1;
  filter: blur(10px);
}

.about-box ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 30px;
  padding: 0;
}

.about-box ul li {
  position: relative;
}

.about-box ul li a {
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease, transform 0.3s ease;
}

.about-box ul li a::before {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #03a9f4;
  bottom: 0;
  transition: width 0.4s ease-in-out, left 0.4s ease-in-out;
}

.about-box ul li a:hover::before {
  width: 100%;
  left: 0;
}

.about-box ul li a:hover {
  color: #03a9f4;
  transform: translateY(-5px);
}

.about-box p {
  font-size: 14px;
  color: #aaaaaa;
  margin-top: 20px;
  text-align: center;
  letter-spacing: 1px;
}

.about-box p:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

@media screen and (max-width: 599px) {

  .about-box ul {
      display: flex;
      justify-content: center;
      gap: 15px;
  }

  .about-box ul li a {
      font-size: 14px;
      text-transform: uppercase;
  }

  .about-box ul li a::before {
      height: 2px;
  }

  .about-box p {
      font-size: 12px;
      text-align: center;
  }
}

@media screen and (max-width: 399px) {

  .about-box ul {
    padding: 0px 10px;
      gap: 10px;
  }

  .about-box ul li a {
      font-size: 14px;
  }

  .about-box ul li a::before {
      height: 2px;
  }

  .about-box p {
      font-size: 12px;
      text-align: center;
  }
}

@media screen and (max-width: 349px) {

  .about-box ul {
    padding: 0px 10px;
      gap: 10px;
  }

  .about-box ul li a {
      font-size: 13px;
  }

  .about-box p {
      font-size: 15px;
  }
}

@media screen and (max-width: 325px) {

  .about-box ul {
    padding: 0px 8px;
      /* gap: 6px; */
  }

  .about-box ul li a {
      font-size: 12px;
  }

  .about-box p {
      font-size: 15px;
  }
}

@media screen and (max-width: 299px) {
  .about-box {
      padding: 30px 10px;
  }

  .about-box ul {
      flex-direction: column;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;
  }

  .about-box ul li a {
      font-size: 16px;
      padding: 5px 10px;
  }

  .about-box ul li a::before {
      height: 1px;
  }

  .about-box p {
      font-size: 12px;
  }

  .about-box p:hover {
      color: #ffffff;
      transform: translateY(0);
    }
  }

@media screen and (min-width: 1024px) {

    .about-box ul {
        display: flex;
        justify-content: space-evenly;
        gap: 30px;
        align-items: center;
    }

    .about-box ul li a {
        font-size: 2vw;
        text-transform: uppercase;
    }

    .about-box ul li a::before {
        height: 3px;
    }

    .about-box p {
        font-size: 3vw;
        text-align: center;
        margin-top: 20px;
    }

    .about-box p:hover {
        color: #ffffff;
        transform: translateY(1);
    }
}

@media screen and (min-width: 1400px) {
  .about-box ul {
      display: flex;
      justify-content: space-between;
      gap: 40px;
  }

  .about-box ul li a {
      font-size: 2.2vw;
  }

  .about-box p {
      font-size: 2.5vw;
      margin-top: 25px;
  }

  .about-box p:hover {
      color: #ffffff;
      transform: translateY(-5px);
  }
}

@media screen and (min-width: 1600px) {
  .about-box ul {
      display: flex;
      justify-content: space-around;
      gap: 50px;
  }

  .about-box ul li a {
      font-size: 2vw;
  }

  .about-box p {
      font-size: 2vw;
      margin-top: 30px;
  }

  .about-box p:hover {
      color: #ffffff;
      transform: translateY(-8px);
  }
}

@media screen and (min-width: 2000px) {
  .about-box ul {
      display: flex;
      justify-content: space-evenly;
      gap: 60px;
  }

  .about-box ul li a {
      font-size: 2vw;
  }

  .about-box p {
      font-size: 2vw;
      margin-top: 35px;
  }

  .about-box p:hover {
      color: #ffffff;
      transform: translateY(-10px);
  }
}

@media screen and (min-width: 2300px) {
  .about-box ul {
      display: flex;
      justify-content: space-evenly;
      gap: 70px;
  }

  .about-box ul li a {
      font-size: 2vw;
  }

  .about-box p {
      font-size: 2vw;
      margin-top: 40px;
  }

  .about-box p:hover {
      color: #ffffff;
      transform: translateY(-12px);
  }
}



@media (min-width: 600px) and (max-height: 499px) {

  .footer{
    z-index: 15;
  }

 .tool_nav {
  position: fixed;
  bottom: 0px;
  height: 58vh;
  width: 12.5vw;
  right: 5px;
  background-color: #181818;
  justify-content: start;
  z-index: 16;
 }
  
 .tool_nav ul {
  right: 0px;
  bottom: -20px;
  height: 45vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 30px;
  margin: 0;
  list-style: none; 
  justify-content: center;
  align-items: center;
}


 .tool_icon img {
  width: 14vh;
  gap: 0px;
    display: flex;
flex-wrap: wrap;
 }

 .tool_text {
  font-size: 25px;
  top: 5px;
  gap: 0px;
  display: none;
 }

 .tool_item a {
  height: 0vh;

 }

.tool_indicator{
  display: none;
}
   .tool_icon:hover::before {
  top: -1.5vh; 
  width: 12vh;
  height: 1.5vh;
 background-color: #00bb6d;}
 
.tool_icon:hover::after {
 display: none;
}


  .social_links {
    gap: 18px;
}

.social_item {
  width: 70px;
  height: 50px;
}
.social_item:hover {
  width: 200px;
}
.social_icon img {
  width: 40px;
}
.contact_me {
  font-size: 1.7em;
}
}

@media (max-width: 599px) and (max-height: 499px) {

  .footer{
 bottom: -500px;
  }
}