*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    /* overflow-x: auto; */

}
body{
    background-color: seashell;
    color:antiquewhite
}

.container{
    /* border:px solid white; */
    width: 100%;
    height: auto;
    overflow-x: none;
}

.navContainer{
    background-image: linear-gradient(to right, rgb(25, 136, 240), rgba(28, 196, 196, 0.84));
    /* border:2px solid yellow; */
    position:fixed;
    display:flex;
    justify-content:center;
    width:100%;
    height:65px;
    
    position:relative;

}
#navList{
    /* border:2px solid black;       */
    padding-right: 10px;
    margin-left:10px;
    margin-top: 10px;
    font-size: 1.5em;
    display:flex;
    justify-content: space-between;
    list-style-type: none;
    position:relative;
}
#navLinks{
    /* border:2px solid green; */
    padding-top:10px;
    display:flex;
    gap:20px;
}
#navLogo{
    font-size: 1.5em ;
}

nav{
    width:100%;
    overflow-x: none;
}

a{
    text-decoration: none;
    color:azure;
}

.contentBox{
    /* border: 2px solid red; */
    box-shadow: 5px 5px 30px black ;     
    font-size: 1.2em;
    color:black;
    width:65%;
    height:auto;
    margin: 5px auto 0px auto; 
    padding-top: 5px;
    padding-bottom: 5px;
    display:flex;
    flex-direction: column;
    gap: 60px;
}

.item{
    /* border: 2px solid rgb(76, 236, 76); */
    display:flex;
    justify-content: space-around;
    padding: 10px 2px 0px 2px;
}

.footerBox{
    width:100%;
    background-image: linear-gradient(to right, rgb(25, 136, 240), rgba(28, 196, 196, 0.84));
    padding:10px;
    margin-top:5px;
    /* display:flex; */
    /* justify-content: center; */
    text-align: center;
    min-height:40px;
    font-size: 1.2em;
}

img{
    border-radius: 20px ;
    width:170px;
    height:190px;
}

.leftBox{
    display:flex;
    flex-direction: column;
    gap:10px;
}
.rightBox{
    position:relative;
    width:170px;
    height:190px;
    transition: all 0.6s 0s ease-in-out;
}

.rightBox:hover{
    transform: scale(1.2);
}

.rightBox:hover p{
    opacity: 1;
}

.rightBox p {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(120, 113, 113, 0.859);
    color:white;
    border-radius: 20px;
    opacity: 0;
    transition: all 0.6s 0s ease-in-out;

}