*{
         margin: 0;
         padding: 0;
       }
       nav{
          position: sticky;
          top: 0;
          z-index: 100;
          display: flex;
          justify-content: space-between;
          background-color: black;
          padding: 20px;
       }
       a{
         color: white;
         padding: 20px;
         text-decoration: none;
         font-size: 30px;
       }
       a:hover{
          background:linear-gradient(magenta,white);
          background-clip: text;
          color: transparent;
          transition: all 0.5s linear 0s;
       }
       .ic,i{
        font-size: 30px;
        background:linear-gradient(magenta,white);
        background-clip: text;
        color: transparent;
       }
       i{
        animation: rotateme 2s linear infinite;
       }
       
       @keyframes rotateme{
          from{
             transform: rotate(0deg);
          }
          to{
            transform: rotate(360deg);
          }
       }
       .hero{
          display: flex;
          justify-content: space-around;
          margin-top: 30px;
       }
       .box{
         height: 500px;
         width: 30%;
         position: relative;
         overflow: hidden;
       }
       .box img{
        height: 100%;
        width: 100%;
        border-radius: 15px;
       }
       .overlay{
        position:absolute ;
        top: 0;
        right: -100%;
        height: 100%;
        width: 100%;
        border-radius: 15px;
        background-color: #ebebeb98;
        /* opacity: 0; */
        transition: all 0.5s linear;
        display:flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        font-weight: bolder;
        font-family: 'Times New Roman', Times, serif;
       }
       /* .overlay:hover{
         opacity: 1;
       } */
       .box:hover .overlay{
           right: 0;
       }
       
       h2{
         padding: 10px;
         text-align: center;
         color: white;
         background-color: black;
         font-size: 40px;
         font-family: 'Times New Roman', Times, serif;
         margin:35px ;
       }
       .para{
         margin-left: 40px;
         margin-right: 40px;
         font-size: 1.5rem;
         text-align: justify;
       }
       .back{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        font-weight: bolder;
        font-family: 'Times New Roman', Times, serif;
        color: white;
        background-attachment: fixed;
           margin-top: 40px;
           width: 100%;
           height: 450px;
           background-repeat: no-repeat;
           background-size: contain;
           background-position: center;
           background-image: url("assets/pic4.avif");
       }