*{
    margin:0;
    padding: 0;
    font-family: Arial;
    border: border-box;
    color: white;
    font-family: 'Arial';
}
.main{
    height: 100%;
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
}
.topnav {
    overflow: hidden;
    background-color: skyblue;
  }
  
  .topnav a {
 float: right;
    display: block;
    color: black;
    font-family: 600;
    text-align: center;
    padding: 3vw 1.5vw;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav  img{
    height: 82px;
    width: 82px;
   
  }
  
  .topnav .icon {
    display: none;
  }
  
.content{
    height: calc(100% -100px);
    width: 100%;
    display: flex;
    background-color: white;
    position: relative;
   
}
.left{
    height: 100%;
    width: 55%;
    padding: 16vw 4vw;
}
.left h1{
    font-size: 4vw;
line-height: 4.4vw;
color: black;

}
.left h1 span{
    color: skyblue;
}
.left p{
    font-size: 1.2vw;
    font-weight: 600;
    width: 80%;
    margin-top: 2vw;
    margin-bottom: 4vw;
    color: black;
}
.right{
    height: 100%;
    width: 45%;
}
.right img{
    height: 100%;
    width: 100%;
    
}
.page2{
    height: calc(100% -100px);
    width: 100%;
    background-color: white
}   
.page2 h1{
    font-size: 4.2vw;
    text-align: center;
    color: black;
} 
.page2 p{
    font-size: 1.7vw;
    text-align: center;
    padding: 3vw 5.5vw;
    color: black;
    text-align: justify;
}
.page2 span{
    color: skyblue;
}
.container{
    height: calc(100% - 100px);
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    z-index: 10;
    background-color: #f5f5f5;
}
.card{
    height:70%;
    width: 23%;
    border-radius: 25px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: all ease 0.7s;
    margin-left: 1rem;
    margin-right: 0.9rem;
    margin-top: 1rem;   
}
#card1{
    background-image: url(ISO\ 90012015\ CERTIFIED.png);
}
#card2{
    background-image: url(OUR\ QUALITY\ APPROACH.png);
}
#card3{
    background-image: url(Dedicated\ WorkForce.png);
}
#card4{
    background-image: url(ETHICS\ AND\ COMPLIANCE.png);
}
#card5{
    background-image: url(AWARDS\ &\ ACHIEVEMENTS.png);
}
#card6{
    background-image: url(PACKAGING.png);
}
.overlay{
    height: 100%;
     background-color: skyblue;
     padding: 2vw;
     padding-top: 3vw;
    opacity: 0;
    transition: all ease 0.7s; 
 }
 .overlay p{
     color: black;
   font-family: 'Times New Roman';
   font-weight: 600;
   font-size: 1.7vw;
 }
 .card:hover .overlay{
     opacity: 1;
 }
 .card:hover{
     transform: rotate3d(1,1,0,12deg);
 }
 .content2{
    height: calc(100% - 100px);
    width: 100%;
    display: flex;
    background-color: white;
   position :relative;
}
.left2{
    height: 100%;
    width: 40%;
    padding: 6vw 7vw;
}
.left2 h1{
    font-size: 3vw;
color: black;
padding: 2vw 0vw;

}
.left2 h1 span{
    color: skyblue;
}

.right2{
    height: 100%;
    width: 60%;
}
.right2 p{
    font-size: 1.4vw;
    font-weight: 600;
    width: 80%;
    color: black;
    padding: 5.5vw 2vw;
    text-align: justify;
}
.container2{
    height:60vh;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    z-index: 10;
    background-color: #f5f5f5;

}
.medicine{
    height:60%;
    width: 23%;
    border-radius: 25px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: all ease 0.7s;
    margin-left: 1rem;
    margin-right: 0.9rem;
    margin-top: 1rem; 
       
}
#medicine1{
    background-image: url(medicine1.jpg);
}
#medicine2{
    background-image: url(medicine2.jpg);
}
#medicine3{
    background-image: url(medicine3.jpg);
}
#medicine4{
    background-image: url(medicine4.jpg);
}
#medicine5{
    background-image: url(medicine5.jpg);
}
#medicine6{
    background-image: url(medicine6.jpg);
}
#footer{
    height: 20vw;
    width: 100%;
    background-color: #e3ae83;
    
}
.foot-panel1{
    background-color: #d8dce1;
    color: black;
    height: 3.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.foot-panel2{
    background-color:#f2f5f9 ;
    height: 18vw;
    color: white;
    display: flex;
    justify-content: space-evenly;
    z-index: 10;
}
.foot-panel2 img{
    margin-top: 2vw;
    height: 11vw;
    width: 11vw;
}
ul a{
    display: block;
    margin: 0.8vw;
    color: black;
    font-size: 1vw;
    text-decoration: none;
}
ul p{
    color:black;
    font-size: 1.4vw;
}
ul{
    margin-top: 3vw;
}



.foot-panel4{
    background-color: #0f1111;
    color: rgb(255, 249, 249);
    height:8vh;
    font-size:0.8vw;
    text-align: center;
    
}
.pages{
    padding-top: 1.2vw;
}
.copyright{
    padding-top: 0.1vw;
}
@media (max-width:600px) {
    .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    padding: 7vw 2vw ;
  }
  
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    
   
  }
  .topnav  img{
    height: 80px;
    width: 80px;
   
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
    .left h1{
        font-size: 8vw;
        padding: 4vw 3vw;
    }
    
    .left p{
        font-size: 2.5vw;
        padding: 0.5vw 3vw;
    }
    .page2 h1{
        font-size: 7vw;
        padding-left: 3.8vw;
    }
    .page2 p{
        font-size: 4.5vw;
        padding: 4vw 5vw;
        text-align: justify;
        justify-content: center;
    }
   .container{
    padding-right: 2vw;
    padding-bottom: 2vw;
   }
    .card{
        width: 100%;
        height: 30vh;
       
    }
    .overlay p{
        font-size: 5vw;
        font-weight: 200;
        padding: 8vw 6vw;
    }
   .content2{
    height: calc(100% - 80px);
    flex-direction: column;
   }
   .left2{
    width: 100%;
   }
   .right2{
    width: 100%;
   }
   .left2 h1{
    font-size: 7.5vw;
    padding: 0vw 4vw;
   }
   .right2 p{
    font-size: 5vw;
    padding-left: 10vw;
    font-weight: 400;
    
   }
   .container2{
    padding-right: 4vw;
    padding-bottom: 2vw;
   }
    .medicine{
        width: 100%;
        height: 30vh;
       
    }
    #footer {
        height: 60vw;
       
    }
    .foot-panel2{
        background-color:#f2f5f9 ;
        height: 50vw;
        color: white;
        display: flex;
        justify-content: space-evenly;
        z-index: 10;
    }
    .foot-panel4{
        background-color: #0f1111;
        color: rgb(255, 249, 249);
        height:3.5vh;
        font-size:0.8vw;
        text-align: center;
        
    }
    ul p{
        color:black;
        font-size: 3vw;
    }
    ul a{
        display: block;
        margin: 1.2vw;
        color: black;
        font-size: 2.5vw;
        text-decoration: none;
    }
    .foot-panel2 img{
        margin-top: 15vw;
        height: 19vw;
        width: 19vw;
    }
    .foot-panel2 ul{
        margin-top: 15vw;
        height: 19vw;
        width: 19vw;
    }
    .pages a{
        font-size: 1.7vw;
    }
    .copyright p{
        font-size: 1.7vw;
    }
}