.img{margin-left: 5%;}
.container > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #ffeead;
    margin-right: 10px;
}

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


  .navbar {
      margin-bottom: 0;
      border-radius: 0;
      background-color: #c2d6fb;
      border: none;
    }
    
   
    footer {
      background-color: #f2f2f2;
      padding: 20px;
    }
.on{background-color: #bbdcfd;}


.icon{font-size: 2vw;margin-bottom: 20px}
.nav1:hover>.icon1{color:#784d17 ;}
.nav1:hover>.icon2{color: #712335;}
.nav1:hover>.icon3{color: #77231e;}
.nav1:hover>.icon4{color: #823992;}
.nav1:hover>.icon5{color: #215a7e;}
.nav1:hover>.icon6{color: #2b5c30;}
.nav1:hover>.icon7{color: #4c692d;}
.nav1:hover>.icon8{color:#c3b964 ;}
.nav1:hover>.icon9{color: #37454b;}
.nav1:hover>.icon10{color: #85551b;}
.nav1:hover>.icon11{color: #784d17;}
.nav1{display: inline-block;position: relative;}

a{padding: 0;}

.nav1{
  padding: 0;
  line-height: 0px;
 background: rgba(194,214,251,1);
background: -moz-linear-gradient(top, rgba(194,214,251,1) 0%, rgba(194,214,251,1) 18%, rgba(194,214,251,1) 35%, rgba(194,214,251,1) 45%, rgba(194,214,251,1) 58%, rgba(178,122,232,1) 75%, rgba(178,122,232,1) 91%, rgba(178,122,232,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(194,214,251,1)), color-stop(18%, rgba(194,214,251,1)), color-stop(35%, rgba(194,214,251,1)), color-stop(45%, rgba(194,214,251,1)), color-stop(58%, rgba(194,214,251,1)), color-stop(75%, rgba(178,122,232,1)), color-stop(91%, rgba(178,122,232,1)), color-stop(100%, rgba(178,122,232,1)));
background: -webkit-linear-gradient(top, rgba(194,214,251,1) 0%, rgba(194,214,251,1) 18%, rgba(194,214,251,1) 35%, rgba(194,214,251,1) 45%, rgba(194,214,251,1) 58%, rgba(178,122,232,1) 75%, rgba(178,122,232,1) 91%, rgba(178,122,232,1) 100%);
background: -o-linear-gradient(top, rgba(194,214,251,1) 0%, rgba(194,214,251,1) 18%, rgba(194,214,251,1) 35%, rgba(194,214,251,1) 45%, rgba(194,214,251,1) 58%, rgba(178,122,232,1) 75%, rgba(178,122,232,1) 91%, rgba(178,122,232,1) 100%);
background: -ms-linear-gradient(top, rgba(194,214,251,1) 0%, rgba(194,214,251,1) 18%, rgba(194,214,251,1) 35%, rgba(194,214,251,1) 45%, rgba(194,214,251,1) 58%, rgba(178,122,232,1) 75%, rgba(178,122,232,1) 91%, rgba(178,122,232,1) 100%);
background: linear-gradient(to bottom, rgba(194,214,251,1) 0%, rgba(194,214,251,1) 18%, rgba(194,214,251,1) 35%, rgba(194,214,251,1) 45%, rgba(194,214,251,1) 58%, rgba(178,122,232,1) 75%, rgba(178,122,232,1) 91%, rgba(178,122,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2d6fb', endColorstr='#b27ae8', GradientType=0 );
}

.text{display: inline;
  
  text-align:center;
  padding: 0px;
  visibility: visible;
  position: absolute;
 left:-80px;
  font-size: 9px;
  font-weight: bold;}

.nav1:hover>p{position: absolute;left: 9px;transition: 1s;}
p,h1{-webkit-box-shadow: 10px 10px 44px -12px rgba(0,0,0,1);
-moz-box-shadow: 10px 10px 44px -12px rgba(0,0,0,1);
box-shadow: 10px 10px 44px -12px rgba(0,0,0,1);}