@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Fredoka+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Itim&display=swap');

.container-fluid {
    position: relative;
    /* text-align: center; */
    color: white;
  }

  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 100%;
    padding-right: var(--bs-gutter-x,0rem);
    padding-left: var(--bs-gutter-x,0rem);
    margin-right: auto;
    margin-left: auto;
}
  
.row {
  margin-right: calc(var(--bs-gutter-x) * -0);
  margin-left: calc(var(--bs-gutter-x) * -0);
}
 

  .card-title{
    color: #0c5287;
    font-family: 'Itim', cursive;
  }

  .card{
    width: 12rem;
    height: 12rem;
    rotate: 45deg;
    border-radius: 1rem;
    /* margin-top: -6rem; */
  }
  a{
    text-decoration: none;
  }
  .card-body{
    rotate: -45deg;
  }
  /* .card:hover, .card:active{
     rotate: -45deg;
       transition: all 0.6s linear;
  }
  .card-body:hover, .card-body:active{
    rotate: 45deg;
    transition: all 0.6s linear;
  } */

  .card:hover, .card:active{
  width: 11.5rem;
  height: 11.5rem;
       transition: all 0.3s linear;
  }
  
  .logoimg{
    width: 15%;
  }

  .card3s{
    margin-left: -1rem;
  }
  .card1{
    margin-left: 11rem;
  }
  .card7{
    margin-top: -3rem;
  }
  .screen700{
    display: none;
  }


@media(max-width:1000px){
  .webscreen{
    display: none;
  }
  .screen700{
    display: block;
  }
  .logoimg{
    width: 28%;
  }

}
@media(max-width:700px){
  .webscreen{
    display: none;
  }
  .screen700{
    display: block;
  }
  .card{
    width: 10rem;
    height: 10rem;
    }
    .card:hover, .card:active{
      width: 9.6rem;
      height: 9.6rem;
           transition: all 0.3s linear;
      }
    .logoimg{
      width: 28%;
    }
    
}
@media(max-width:600px){
  .webscreen{
    display: none;
  }
  .screen700{
    display: block;
  }
  .card{
    width: 9rem;
    height: 9rem;
    }
    .card:hover, .card:active{
      width: 8.6rem;
      height: 8.6rem;
           transition: all 0.3s linear;
      }
    .card-body {
      flex: 1 1 auto;
      padding: 0;
  }
  .logoimg{
    width: 28%;
  }
}
@media(max-width:500px){
  .webscreen{
    display: none;
  }
  .screen700{
    display: block;
    margin-top: -9rem;
  }
  .card{
    width: 7rem;
    height: 7rem;
    }
    .card:hover, .card:active{
      width: 6.5rem;
      height: 6.5rem;
           transition: all 0.3s linear;
      }
    .card-body {
      flex: 1 1 auto;
      padding: 0;
  }
  .h5, h5 {
    font-size: 0.9rem;
    margin-top: -0.8rem;
}
.h6, h6 {
  font-size: 0.8rem;
  margin-top: -0.8rem;
}
.logoimg{
  width: 28%;
}
}
@media(max-width:400px){
  .webscreen{
    display: none;
  }
  .screen700{
    display: block;
    margin-top: -9rem;
  }
  .logoimg{
    width: 28%;
  }
  .card{
    width: 6rem;
    height: 6rem;
    }
    .card:hover, .card:active{
      width: 5.7rem;
      height: 5.7rem;
           transition: all 0.3s linear;
      }
    .card-body {
      flex: 1 1 auto;
      padding: 0;
  }
  .h5, h5 {
    font-size: 0.8rem;
    margin-top: -0.8rem;
}
.h6, h6 {
  font-size: 0.69rem;
  margin-top: -0.8rem;
}
}
@media(max-width:300px){
  .webscreen{
    display: none;
  }
  .logoimg{
    width: 28%;
  }
  .screen700{
    display: block;
  
  }
  .card{
    width: 7rem;
    height: 7rem;
    }
    .card:hover, .card:active{
      width: 6.8rem;
      height: 6.8rem;
           transition: all 0.3s linear;
      }
}