*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Helvetica,sans-serif;

.Logo{
     margin-left:50px; 
}

.Logo > img{
    width:150px;
    max-width:100%;
    margin-left: 200px;
}

#Navigation{
    background:dodgerblue;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 30px;
    flex-wrap:wrap;
}

#Navigation > ul {
    display:flex;
    list-style:none;
    gap:15px;
}

#Navigation > ul > li{
    padding:10px 0;
    margin-left: -15px;
}

#Navigation > ul > li > a{
    color:white;
    text-decoration:none;
    padding:10px 15px;
    border-right: 1px solid white;
    transition: 1s;
}

#Navigation > ul > li:first-child > a{
    border-left: 1px solid white;
    padding-left: 15px;
}

#Navigation > ul > li:hover > a{
    background-color: rgb(3, 59, 116);
}

#heroarea{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:60px 5%;
    background:#eee;
    gap:10px;
    flex-wrap:wrap;
    
}


.headtext{
    flex:1;
    margin-left: 200px;
}

.headtext > h1{
    font-size:40px;
    line-height:60px;
    text-align: center;
}

.headtext > p{
    margin-top:20px;
    font-size:18px;
    text-align: center;
}

.hero-image{
    flex:1;
}

.hero-image > img{
    width:100%;
    max-width:500px;
    height:auto;
    display:block;
    margin:auto;
}

.About{
    background-color: rgb(255, 255, 255);
    height: 350px;
}

.About > h1{
    padding:60px 20px;
    height:auto;
    text-align: center;
}

.About > p{
    max-width:1100px;
    width:100%;
    margin:auto;
    line-height:32px;
    font-size:18px;
    text-align: justify;
}

/*first section code start*/

.service{
    padding:60px 20px;
    height:auto;
}

.our{
    text-align: center;
    padding-top: 50px;
    color: #0a0a86;
}

#first-section{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:30px;
    max-width:1200px;
    margin:auto;
}

.Pharmaceuticals{
    width:100%;
    max-width:350px;
    height:auto;
    background-color: rgb(248, 250, 252);
    border-radius: 10px;
    text-align: center;
    transition: 0.5s;
}


.Pharmaceuticals:hover{
 box-shadow: 3px 5px 10px gray;
}

.Pharmaceuticals > img{
    max-width:100%;
    height:auto;
    display:block;
    border-radius: 10px 10px 0px 0px;
    
}

.Pharmaceuticals > h2{
    padding-top: 15px;
}

.Pharmaceuticals > p{
    margin: 8px;
    line-height: 25px;
}



.Food{
    width:100%;
    max-width:350px;
    height:auto;
    background-color: rgb(248, 250, 252);
    border-radius: 10px;
    text-align: center;
    transition: 1s;
}

.Food:hover{
    box-shadow: 3px 5px 10px gray;
}

.Food > img{
   width: 350px;
   border-radius: 10px 10px 0px 0px;
}

.Food > h2{
    padding-top: 15px;
}

.Food> p{
    margin: 8px;
    line-height: 25px;
}



.Service{
    width:100%;
    max-width:350px;
    height:auto;
    background-color: rgb(248, 250, 252);
    border-radius: 10px;
    text-align: center;
    transition: 1s;
}

.Service:hover{
    box-shadow: 3px 5px 10px gray;
}

.Service> img{
   width: 350px;
   border-radius: 10px 10px 0px 0px;
}

.Service > h2{
    padding-top: 15px;
}

.Service > p{
    margin: 8px;
    line-height: 25px;
}

#contact-us{
    background-color: rgb(253, 253, 253);
    height: auto;
    padding:60px 20px;
}

.contact > h1{
    text-align: center;
    margin-top: 50px;
    padding: 10px;
    color: #0a0a86;
}

.contact > h2{
    text-align: center;
    margin-top: 20px;
    font-family: Arena Condensed;
}

.contact > h3{
    text-align: center;
    margin-top: 20px;
    color: #d18c0c;
}

.contact > p{
    text-align: center;
    margin-top: 10px;
}

.Back{
    background-color: rgb(225, 230, 230);
    height: 50px;
}

#footer{
    background-color: #0a0a86;
    height: 70px;
}

.f-text > p{
    text-align: center;
    color: white;
    padding-top: 25px;
    font-family: USALight;
}


@media(max-width:768px){

#Navigation{

flex-direction:column;

}

#Navigation ul{

flex-direction:column;

text-align:center;

}

#heroarea{

flex-direction:column;

text-align:center;

}

.headtext h1{

font-size:32px;

line-height:45px;

}

.About p{

font-size:16px;

line-height:28px;

}

#first-section{

flex-direction:column;

align-items:center;

}

.Pharmaceuticals,
.Food,
.Service{

width:100%;
max-width:350px;

}

}