.loading-page {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(255deg, #c6e4f0, #ffffff, #cfe7ff, #c3e2f7);
    background-size: 800% 800%;
  
    -o-animation: gradient 10s ease infinite;
    animation: gradient 10s ease infinite;
    opacity: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:0;
    align-items: center;
    justify-content: center;
    color: #191654;

  }
  
  
  @-o-keyframes gradient {
    0%{background-position:0% 14%}
    50%{background-position:100% 87%}
    100%{background-position:0% 14%}
  }
  @keyframes gradient {
    0%{background-position:0% 14%}
    50%{background-position:100% 87%}
    100%{background-position:0% 14%}
    
  }
  #svg {
    height: 60px;
    width: 650px;
    stroke: white;
    fill-opacity: 0;
    stroke-width: 3px;
    stroke-dasharray: 1000;
    animation: draw 8s ease;
   
   
  }
  #svg1 {
    height: 30px;
    width: 680px;
    stroke: white;
    fill: transparent;
    stroke-width: 3px;
    stroke-dasharray: 1000;
    animation: draw1 4s ease;
   
  }
  
  
  @keyframes draw {
    0% {
      stroke-dashoffset: 1000;
      fill-opacity: 0;
    }
    100% {
      stroke-dashoffset: 0;
      fill-opacity: 1;
    }
  }
  @keyframes draw1 {
    0% {
      stroke-dashoffset: 1000;
    }
    100% {
      stroke-dashoffset: 500;
    }
  }
  
  .name-container {
    height: 30px;
    overflow: hidden;
  }
  
  .logo-name {
    margin-top: 11px;
    color: black;
    font-size: 14px;
    letter-spacing: 17px;
    text-transform: uppercase;
    margin-left: 20px;
    font-weight: bolder;
  }
  
@media screen and (min-width: 350px) and (max-width: 760px){
    .img{
      width: 300px;
      margin: 0 0 -85px 10px;
    }
    #svg1{
      height: 10px;
      width: 350px; 
    }
    #svg{
      height: 40px;
      width: 340px;
    }
    .logo-name{
      margin-top: 5px;
      font-size: 7px;
      letter-spacing: 10px;
      margin-left: 0px;
    }
  }