/*---------------------------------------------------------------
        Template Name:  ResumeX - Resume and CV one page portfolio websites templates
        Description: Onepage Resume or CV Website Template for Your Resume And CV
        Author: Lucid Themeslab
        Author URL: https://www.templatemonster.com/store/lucid_themeslab/
        Version: 1.0.0
   
----------------------------------------------------------------*/ 
@import url(mainstyle.css);

  a{
    color: inherit;
    text-decoration: none;
  }
  a:hover{
    color: inherit;
    text-decoration: none;
  }
  body{
      overflow-x: hidden !important; 
  }
  .fs-7{
    font-size: 14px;
  }
  .fs-8{
    font-size: 12px;
  }
  .fs-9{
    font-size: 10px;
  }  
  .profile-img{
    position: relative;
    padding: 0;
    animation: bounce 3s infinite;
    max-width: 550px;
    margin: auto;
  }
  .profile-img img{
    border-radius: 60% 40% 52% 48% / 50% 61% 39% 50%;
  }
  .profile-img::before{
    content: '';
    width: 105%;
    height: 500px;
    background-image: linear-gradient(295deg, hsl(0deg 0% 100%) 0%, hsl(203.61deg 57.19% 33.06%) 100%);
    border-radius: 60% 40% 52% 48% / 50% 61% 39% 50%;
    position: absolute;
    top: -20px;
    left: -20px;
    z-index: -1;
    animation: squeezeWater 3s infinite ease-in-out;
  }
  .profile-img::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: var(--prime-bg);
    opacity: 0.45; 
    border-radius: 60% 40% 52% 48% / 50% 61% 39% 50%;
  }
  @media (max-width: 768px){
    .profile-img, .profile-img img{
      max-height: 300px;
    }
    profile-img::after, .profile-img::before{
      max-height: 350px;
    }
  }
  .icon-bg{
    min-width: 50px;
    min-height: 50px;
    border-radius: 50%;
    color: white !important;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-image: var(--icon-bg); */
    transition: 0.5s ease; 
  }
  .icon-bg:hover{
    transform: translateY(-5px);
    border-radius: 49% 51% 52% 48% / 60% 69% 31% 40%;
    background-image: var(--icon-bg2);
  } 
  @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
        animation-timing-function: ease-in;
      }
      50% {
        transform: translateY(-20px);
        animation-timing-function: ease-out;
      }
    }
  @keyframes squeezeWater {
  0%, 100% {
    transform: scale(1, 1);
  } 
  25% {
    transform: scale(1.02, 0.95); /* smaller bounce */
  }
  }
  .headline{ 
    min-height: 35px;
  }
  .year-badge{
    min-width: 90px;
    text-align: center;
  }
  .progress{
    background-color: transparent;
    border: 1px solid var(--second-border);
  }
  .progress-bar { 
    width: 0%; 
    transition: width 1.5s ease-out;
  }