@font-face {
    font-family: "ChocolateBoxDecorative Regular";
    src: local("ChocolateBoxDecorative Regular"), url("fonts/C_BOX_D.woff") format("woff");
  }

  @font-face {
    font-family: 'Trajan Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Trajan Pro Regular'), url('fonts/TrajanPro-Regular.woff') format('woff');
  }


.about-us-text{
    font-family: 'Trajan Pro Regular';
    font-size: 25px;
}

.founder-phrase{
    font-family: 'Trajan Pro Regular';
    font-size: 25px;
}

.director-text{
    font-family:'Times New Roman', Times, serif;
    font-size: 20px;
}

.name-founder{
    font-family: "ChocolateBoxDecorative Regular";
    font-size: 30px;
}


.what-phrase{
    font-family: 'Trajan Pro Regular';
    font-size: 20px;
}

.phrase-2{
        background: linear-gradient(270deg, #fffab1, #c3f9f2);
        background-size: 400% 400%;
        -webkit-animation: AnimationName 30s ease infinite;
        -moz-animation: AnimationName 30s ease infinite;
        -o-animation: AnimationName 30s ease infinite;
        animation: AnimationName 30s ease infinite;
    }
    @-webkit-keyframes AnimationName {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }
    @-moz-keyframes AnimationName {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }
    @-o-keyframes AnimationName {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }
    @keyframes AnimationName {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }

.title-abt{
    font-family: fantasy;
}

.product {
    margin-bottom: 20px;
  }
  
  .product-name {
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .progress-bar {
    background-color: #e0e0e0;
    height: 15px;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .progress {
    background-color: #42b983;
    height: 70%;
    width: 0;
    animation: progressAnimation 3s ease-out;
  }
  
  @keyframes progressAnimation {
    0% {
      width: 0;
    }
    100% {
      width: 99%;
    }
  }

  .progress-2 {
    background-color: #42b983;
    height: 70%;
    width: 0;
    animation: progressAnimation-2 3s ease-out;
    border-radius: 5px;
  }

  @keyframes progressAnimation-2 {
    0% {
      width: 0;
    }
    100% {
      width: 95%;
    }
  }


  .progress-3 {
    background-color: #42b983;
    height: 70%;
    width: 0;
    animation: progressAnimation-3 3s ease-out;
    border-radius: 5px;
  }

  @keyframes progressAnimation-3 {
    0% {
      width: 0;
    }
    100% {
      width: 90%;
    }
  }

  .img-founder{
    width: auto;
    height: 80vh;
    border-radius: 300px;
    border: 5px solid cyan;
  }

  .img-founder:hover{
    height: 85vh;
    border: 5px solid violet;
    box-shadow: 0 0 100px rgb(253, 106, 130); 
  }


  @media only screen  and (max-width: 790px) {
    .about-us-text {
        font-size: 14px;
    }

    .what-phrase{
        font-size: 14px;
    }

    .founder-phrase{
        font-size: 20px;
    }
  }