html{
    scroll-behavior: smooth;
}

body{
    margin:0px;
    padding: 0px;
    font-family: 'Open Sans', sans-serif;
    }

    #navbar{
        content: " ";
        border: 4px solid rgb(204, 203, 203);
        height: 104px;
        width: 99.5%;
        /* background-color:rgb(222, 245, 251); */
        background-color:  #f2f2f2;
        /* opacity: 0.3px; */
        top: 0px;
        border-radius: 0px;
        transition: 0.7s all;
        position: sticky;
    }
    
    h1{
        text-align: center;
    }

    .left{
        position: absolute;
        left :34px;
        top :20px;
    }

    .left img{
        width: 88px;
    margin-left: 18%;
    }

    .left div{
        display: block;
    text-align: center;
    font-size: 20px;
    font-style: bold;
    line-height: 19px;
    }

    .middle{
        /* border: 2px solid red; */
    display: block;
    width: 48%;
    margin: 34px 22%;
    }
    .right{
        display:block;
        position:absolute;
        top:29px;
        right: 34px;
        /* border: 2px solid rgb(42, 184, 108) */
        
    }


    .navigationBar ul,.navigationBar li,.navigationBar li a{
        display: inline-block;
        color: black;
        text-decoration: none;
        padding: 2px;
        width: 153px;
        font-size: 18px;
        text-align: center;
        justify-content: center;
    }

   .navigationBar li a:hover{
        display: inline-block;
        background-color:rgb(230, 230, 230);
        border-radius: 6px;
        box-shadow: 2px 3px 4px 4px  rgb(163, 162, 162);
        text-decoration: none;
        padding: 2px;
        color:black;
    }

    .btn{
        margin: 0px,9px;
        background-color: white;
        color: black;
        padding: 10px 18px;
        border:2px solid rgb(90, 90, 90);
        border-radius: 12px;
        font-size: medium;
        cursor: pointer;
        font-family: 'Open Sans', sans-serif;

    }
    .btn:hover{
        background-color: rgb(211, 211, 211);
        box-shadow: 2px 2px 2px  rgb(134, 134, 134);
    }
    .btnInForm{
    text-align: center;
    width: 169px;
    margin: -6px -1px;
    background-color: #414040;
    color: white;
    padding: 5px 41px;
    border: 2px solid rgb(109, 108, 108);
    border-radius: 29px;
    font-size: x-small;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;

    }
    .btnInForm:hover{
        background-color: rgb(238, 231, 231);
        color: black;
    }

    .container{
        display: block;
        text-align: center;
    border: 4px rgb(117, 117, 117) solid;
    margin: 109px 74px;
    width: 370px;
    padding: 22px;
    border-radius: 40px;
    
}

.container h2{
    font-style: initial;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.form-group input{
    text-align: center;
    font-size: 17px;
    display: block;
    width: 330px;
    padding: 3px;
    border-radius: 10px;
    margin: 17px 18px;
}

.form-group input:hover {
    background:rgb(231, 230, 229) ;
}


div.main{
     background: url("../img/hearing-aids.jpg") no-repeat center center/cover;
     height: 406px;
    z-index: -10;
}
.hearingDeviceHeading{
    display: block;
    width: 92%;
    margin: 33px;
    border: 4px solid #b8b8b8;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    height: 200px;
    padding: 35PX;
    border-radius: 74px;
    background-color:  #f2f2f2    ;
    z-index: 0px;
}
.hearingDeviceHeading:hover{
    background-color: #f6f6f6;  
    
}

.secondSection {
    /* border: 4px solid #898888; */
        display: flex;
        height: 1003px;
        width: 96.5%;
        margin: 33px;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: stretch;
}
.secondSection .sampleBox{
    background-color: rgba(246, 246, 246, 0.979);
    border: 4px solid rgb(153, 153, 153);
    border-radius: 9px;
    margin: 8px;
    padding: 37px;
}

.secondSection .sampleBox:hover{
    box-shadow: 5px 5px 8px 4px grey;
    cursor: pointer;
}
#hearingDevicesDesigns{
    margin : 34px;
    display:flex;
}

#hearingDevicesDesigns .sampleBox img{
    height: 200px;
   padding: 35PX;
    
}



 .fcenter
{
display: flex;
justify-content: center;
align-items: center;
background: black;
color: white;
padding: 8px;
}