.infoc{
    width:100%;
    height:auto;
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    padding:0.5% 3% 0.5% 3%;
    background-color:#015aaa;
    color: white;
    /* border: #feca0a solid; */
    font-size: 16px;
  }
  .infoc .contactc{
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content: space-around;
    column-gap: 5vw;
  }
  .infoc .timingsc{
    display:flex;
    flex-direction:row;
    align-items:center;
    column-gap:0.5vw ;
  }
  
  .infoc .mailc{
    display:flex;
    flex-direction:row;
    align-items:center;
    column-gap:0.5vw ;
  }
  .infoc .mailc a{
    text-decoration: none;
    color:white;
    cursor:default;
  }
  @media(hover:hover)
  {
    .infoc .mailc a{
      cursor:pointer;
    }
  }
  .infoc .phonec{
    display:flex;
    flex-direction:row;
    align-items:center;
    column-gap:0.5vw ;
  }
  
nav{
    background-color:#f5f5f7;
    padding: 10px;
    min-height: auto;
    user-select: none;
    font-size: large;
}
nav ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-between;
    height:auto;
    padding:0% 5% 0% 5%;
}
nav ul .logo{
  display:flex;
  justify-content: center;
  align-items: center;
   height:auto;
   width:160px;
}
nav ul .list{
     position:relative;
    display:flex;
    flex-direction:row;
    align-items: center;
    /* border:black solid; */
    width:80%;
    justify-content:flex-end;
    column-gap:3vw;
}
nav ul .list li a{
   padding:15px 15px;
   /* border:black solid; */
   text-decoration:none;
   color:black;

}

@media(hover:hover)
{
  nav ul li a:hover{
    color:#feca0a;
    transition:all 0.65s;
    cursor: pointer;
}
}

.responsive{
    display:none;
}

.bar,.close,.back{
    display:flex;
    flex-direction: row;
    transform: rotate(90deg);
    column-gap: 4px;
    display:none;
    cursor: pointer;
}
@media (hover:none)
{

  .bar,.close,.back{
    cursor:default;
}
  nav a{
    cursor:default;
  }
  
}
.close #bar1,#bar2 {
    transition: ease 0.5s;
}
.bar #bar1,#bar2 {
    transition: ease 0.5s;
}
.back #bar1,#bar2{
  transition: ease 0.5s;
}
.close #bar1{
    transform:rotate(45deg) translateX(7px);
    -webkit-transform: rotate(45deg) translateX(7px);
    -moz-transform:rotate(45deg) translateX(7px) ;
    -ms-transform:rotate(45deg) translateX(7px) ;
}
.close #bar2{
    transform:rotate(-45deg) translateX(-7px);
    -webkit-transform: rotate(-45deg) translateX(-7px);
    -moz-transform:rotate(-45deg) translateX(-7px);
    -ms-transform:rotate(-45deg) translateX(-7px) ;
}
.back #bar1{
  transform:rotate(-23deg);
  -webkit-transform:rotate(-23deg);
  -moz-transform:rotate(-23deg);
  -ms-transform:rotate(-23deg);
}
.back #bar2{
  transform:rotate(23deg);
  -webkit-transform:rotate(23deg);
  -moz-transform:rotate(23deg);
  -ms-transform:rotate(23deg);
}

@media(max-width:850px)
{
  .infoc{
    display:none;
  }
  nav ul{
    min-height:auto;
  }
    nav ul .list{
    display:none;
}
.bar,.close,.back{
        display:flex;
    }
    .responsive{
      /* border:black solid 2px; */
      padding:5vh 5vw 5vh 5vw;
      display:none;
    }
    .responsive .responsive-li-first{
        width:100%;
        height:auto;
        /* border:rgb(167, 22, 22) solid 6px; */
        display:none;
        flex-direction:column;
        row-gap:30px;
    }
    .responsive .responsive-li-first a{
        color:rgba(0, 0, 0, 0.8);
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size:xx-large;
        font-weight: bold;
        animation: nav 0.7s;
        -webkit-animation: nav 0.7s;
        -moz-animation: nav 0s;
        -o-animation:nav 0.7s;
  }

    .responsive .responsive-li-second {
      width:100%;
      height:auto;
      /* border:rgb(167, 22, 22) solid 6px; */
      display:none;
      flex-direction:column;
      row-gap:25px;
  }
  .responsive .responsive-li-second a{
    color:rgba(0, 0, 0, 0.8);
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size:x-large;
    font-weight: bold;
    animation: navprod 0.7s;
    -webkit-animation: navprod 0.7s;
    -moz-animation: navprod 0s;
    -o-animation:navprod 0.7s;
}

@media(hover:hover)
{
.responsive .responsive-li-first div:hover{
  transform: translateX(10px);
  transition:all 0.3s;
}
.responsive .responsive-li-second div:hover{
  transform: translateX(10px);
  transition:all 0.3s;
}
  .responsive a:hover{
    color:rgba(199,199,15,1);
    transition:all 0.3s;
    cursor:pointer;
  }  
}


 @keyframes nav {
    from{
        opacity:0;
        /* color:rgb(199,199,15); */
        font-size: xx-small;
    }
    to{
        opacity:1;
        font-size: xx-large;
    }
  }
  @keyframes navprod {
    from{
        opacity:0;
        /* color:rgb(199,199,15); */
        font-size:xx-small;
    }
    to{
        opacity:1;
        font-size:x-large;
    }
  }
}



@media all and (max-width:850px)
{
   nav ul .logo {
     width:150px;
   }
   
}

#prodhoveri{
  display:none;
  flex-direction: column;
  row-gap: 8px;
  width:auto;
  text-align: left;
  justify-content: center;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.3);
  padding:1%;
  position: absolute;
  background:#f5f5f7;
  z-index: 1;
  top:40px;
  right:5%;
  overflow: hidden;
  animation-name: prod;
  animation-duration:0.8s;
}

@media(hover:hover)
{
  nav ul .list li:nth-child(2):hover #prodhoveri{
    display:flex;
  }
}


#prodhoveri div a{
  color:rgba(0,0,0,0.7);
  /* animation-name: prod;
  animation-duration:0.8s; */
}
@media(hover:hover){

  #prodhoveri div a:hover{
     color:black;
  }

}


@keyframes prod
{
  from{
   opacity:0;
   transform:translateY(-40px);
  }
  to{
   opacity:1;
   transform:translateY(0px);
  }
}

@media all and (min-width:2100px)
{
  #prodhoveri{
    right:7%;
  }
}
@media all and (min-width:3500px)
{
  #prodhoveri{
    right:9%;
  }
}