@import url('https://fonts.googleapis.com/css2?family=Libertinus+Math&family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libertinus+Math&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Font Styles */

.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}
.libertinus-math-regular {
  font-family: "Libertinus Math", system-ui;
  font-weight: 400;
  font-style: normal;
}
.roboto-uniquifier {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
}


*{
    margin: 0%;
    padding: 0%;
}
body{
    background-color: #0a0a0a;
}
#ithoda-content-heading{
    display: inline-block;
    margin-top: 60px;
     animation-name: ithoda-content-heading-animation;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 1ms;
}
.first-heading{
    color: #E2B59A;
    margin-top: 0px;
    margin-left:50%;
   font-family: "Roboto", sans-serif;
   font-size: 40px;
    display: inline;
     animation-name: ithoda-content-heading-animation;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 1ms;  
}
 #nxt-box1:hover{
    transform: scalex(1.1);
    transition: 1s;}
.first-hr{
       width: 450px;
       margin-left: rem;
       margin-top:5px;
       position: absolute;
       opacity: 0.5;
        animation-name: first-hr-animation;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 1ms;
       
}
.second-heading{
           color: #;
           margin-top: 45px;
           margin-left:630px;
           display: inline-block;
           font-family: "Roboto", sans-serif;
           font-size: 40px;
           position: absolute;
           
           
}
.second-hr{
    width: 450px;
    margin-top: 95px;
    margin-left: 630px;
    position: relative;
    color: rgb(166, 166, 166);
    opacity: 0.5;  
    animation-name: second-hr-animation;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 2ms;
}
#ithoda-content-heading2{
    display: inline-block;
    margin-left: 100px;
    position: absolute;
    margin-top: 20px;
    
}

/* BOX SECTION */

#first-box{
    width: 500px;
    height: 130px;
    border: 1px solid gray;
    border-radius: 5px;
    color: rgb(102, 102, 102);
    background-color: #121212;
    box-sizing: border-box;
    position: absolute;
    margin-top: 80px;
    margin-left: 90px;
    animation-name: first-box-animation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 2ms;
    
   
    
}
#first-box :hover{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    
}
.box-h3{
    color: #f0f0f0;
    font-size: 25px;
    font-family: "Roboto", sans-serif;
    margin-top: 11px;
    margin-left: 15px;

}
.box-h5{
    font-size: 16px;
    margin-top: 16px;
    font-style: italic;
    margin-left: 15px;
}
.box-h6{
     font-size: 15px;
    margin-top: 10px;
    margin-left: 15px;

}
.box-h4{
    font-size: 15px;
    color: #f0f0f0;
    margin-top:px;
    font-family: "Roboto", sans-serif;
    opacity: 0.8;
    margin-left: 15px;
    margin-top: 30px;


}
/* SECOND BOX */

#second-box{
     width: 500px;
    height: 130px;
    border: 1px solid gray;
    border-radius: 5px;
    color: rgb(102, 102, 102);
    background-color: #121212;
    box-sizing: border-box;
    position: absolute;
    margin-top: 300px;
    margin-left: 90px;
    
     animation-name: second-box-animation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 2ms;
}
#second-box :hover{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    
}
.sec-box-h3{
    color: #f0f0f0;
    font-size: 25px;
    font-family: "Roboto", sans-serif;
    margin-top: 10px;
    margin-left: 15px;

}
.sec-box-h5{
    font-size: 16px;
    margin-top: 5px;
    font-style: italic;
    margin-left: 15px;
}
.sec-box-h6{
    font-size: 15px;
    margin-top: 15px;
    margin-left: 15px;
}
.sec-box-h4{
    font-size: 15px;
    color: #f0f0f0;
    margin-top: 9px;
    font-family: "Roboto", sans-serif;
    opacity: 0.8;
    margin-left: 15px;
    margin-top: 40px;
}
#nxt-box1{


}

/* PROJECT SECTION */

#pro{
    color: #fefae0;
    font-size: 50px;
    font-family: "Roboto", sans-serif;
    display: inline-block;
    margin-top: 40%;
    margin-left: 40px;
    animation-name: ithoda-content-heading-animation;
}
#project-container hr{
    width: 500px;
    margin-left: 40px;
    opacity: 0.5;
    margin-top: 10px;
}
#project-container h1{
    color: gray;
    font-style:bold;
    font-family: "Roboto", sans-serif;
    font-size: 110px;
    margin-left: 25%;
    margin-top: 35px;
    display: inline-block;
}
#project-card1{
    width: 325px;
    height: 400px;
    border: 1px solid gray;
    border-radius: 5px;
    color: rgb(102, 102, 102);
    background-color: #121212;
    box-sizing: border-box;
    position: absolute;
    margin-top: 20px;
    margin-left: 100px;
    border:2.5px solid white;
    border-top-right-radius: 30px;
     transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 1000px;
    border-radius: 10px;
        animation-name: first-box-animation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 2ms;


}
#project-card1 img{
    width: 300px;
    height: 200px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: 20px;
    margin-left: 10px;
    box-sizing: border-box;
    object-fit: cover;
    border-radius: 10px;
    
}
#project-card1 hr{
    width: 300px;
    height: 2px;
    color: rgb(189, 10, 10);
    margin-left: 10px;
    margin-top: 30px;
    opacity: 0.5;
    font-style:bold;
   
   
}
#project-card1:hover{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    
}   
#project-card1 h3{
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    margin-left: 100px;
    margin-top: 5px;
    font-style:bold;
}
#project-card1 button{
    width: 100px;
    height: 40px;
    border: none;
    outline: none;
    background-color: white;
    color: black;
    font-size: 15px;
    border-radius: 5px;
    margin-left: 100px;
    margin-top: 20px;
    cursor: pointer;
}                
#project-card2{
    width: 325px;
    height: 400px;
    border: 1px solid gray;
    border-radius: 5px;
    color: rgb(102, 102, 102);
    background-color: #121212;
    box-sizing: border-box;
    position: absolute;
    margin-top: 20px;
    margin-left: 70%;
    border:2.5px solid white;
    border-radius: 10px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 1000px;
    border-radius: 10px;
        animation-name: first-box-animation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 2ms;
}
#project-card2 img{
    width: 300px;
    height: 200px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: 20px;
    margin-left: 10px;
    box-sizing: border-box;
    object-fit: cover;
    border-radius: 10px;
}
#project-card2 hr{
    width: 300px;
    height: 2px;
    color: rgb(189, 10, 10);
    margin-left: 10px;
    margin-top: 30px;
    opacity: 0.5;
    font-style:bold;
   
}
#project-card2 h3{
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    margin-left: 100px;
    margin-top: 5px;
    font-style:bold;
}

#project-card2:hover{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
#project-card2 button{
    width: 100px;
    height: 40px;
    border: none;
    outline: none;
    background-color: white;
    color: black;
    font-size: 15px;
    border-radius: 5px;
    margin-left: 100px;
    margin-top: 20px;
    cursor: pointer;
} 

#project-card3{
    width: 325px;
    height: 400px;
    border: 1px solid gray;
    border-radius: 5px;
    color: rgb(102, 102, 102);
    background-color: #121212;
    box-sizing: border-box;
    position: absolute;
    margin-top: 20px;
    margin-left: 1000px;
    border:2.5px solid white;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 1000px;
    border-radius: 10px;
    animation-name: first-box-animation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 2ms;
}
#project-card3 img{
    width: 300px;
    height: 200px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: 20px;
    margin-left: 10px;
    box-sizing: border-box;
    object-fit: cover;
    border-radius: 10px;
}
#project-card3 hr{
    width: 300px;
    height: 2px;
    color: rgb(189, 10, 10);
    margin-left: 10px;
    margin-top: 30px;
    opacity: 0.5;
    font-style:bold;
    
   
}
#project-card3:hover{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}  
#project-card3 h3{
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    margin-left: 100px;
    margin-top: 5px;
    font-style:bold;
}
#project-card3 button{
    width: 100px;
    height: 40px;
    border: none;
    outline: none;
    background-color: white;
    color: black;
    font-size: 15px;
    border-radius: 5px;
    margin-left: 100px;
    margin-top: 20px;
    cursor: pointer;
}  
#project-card4{
    width: 325px;
    height: 400px;
    border: 1px solid gray;
    border-radius: 5px;
    color: rgb(102, 102, 102);
    background-color: #121212;
    box-sizing: border-box;
    position: absolute;
    margin-top: 20px;
    margin-left: 1420px;
    border:2.5px solid white;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 1000px;
    border-radius: 10px;
    animation-name: first-box-animation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: ms;
    
}
#project-card4 img{
    width: 300px;
    height: 200px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: 20px;
    margin-left: 10px;
    box-sizing: border-box;
    object-fit: cover;
    border-radius: 10px;
}
#project-card4 hr{
    width: 300px;
    height: 2px;
    color: rgb(189, 10, 10);
    margin-left: 10px;
    margin-top: 30px;
    opacity: 0.5;
    font-style:bold;
   
}


#project-card4:hover{
    box-shadow: rgba(227, 4, 4, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}    
#project-card4 button{
    width: 100px;
    height: 40px;
    border: none;
    outline: none;
    background-color: white;
    color: black;
    font-size: 15px;
    border-radius: 5px;
    margin-left: 100px;
    margin-top: 20px;
    cursor: pointer;
} 
#project-card4 h3{
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    margin-left: 100px;
    margin-top: 5px;
    font-style:bold;
}   





@keyframes nxt-box2-animation{
     from{transform: translatex(500px);}
  to{transform: translatex(px);}
         }

@keyframes nxt-box1-animation{
     from{transform: translatex(500px);}
  to{transform: translatex(px);}
         }

@keyframes first-box-animation{
    
     from{transform: translatey(-35px);}
  to{transform: translatex(px);}
         }
 @keyframes second-box-animation{
    
     from{transform: translatey(-180px);}
  to{transform: translatex(px);}
         }
         @keyframes first-hr-animation{
       from{transform: translatex(-400px);}
  to{transform: translatex(px);}
         }
          @keyframes second-hr-animation{
       from{transform: translatex(450px);}
  to{transform: translatex(px);}
         }
  @keyframes ithoda-content-heading{
       from{transform: translatex(450px);}
  to{transform: translatex(px);}
         }



           .icon-container {
            display: inline ;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }

        .social-icon {
            /* Initial state */
    /* Tailwind gray-700 */
            color: white;
            width: 5rem;
            height: 5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            font-size: 1.5rem;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        }

        .social-icon:hover {
            /* Hover state: scale up and lift */
            transform: scale(1.1) translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
        }

        /* Specific hover colors for branding */
        .linkedin:hover { background-color: #1877F2; }
        .github:hover { background-color:gray; }
        .instagram:hover { background-color: #d62976; }
        .whatsapp:hover { background-color: green; }


        .icon-container {
            display: flex;
            gap: 15px;
            justify-content: center;
            align-items: center;
            margin-top: 158%;
            position: absolute;
            margin-left: 75%;
            flex-direction: row;
        }