/* Option 2: Import via CSS */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css");

.z-container{
  padding: 14em 25px 0px 25px;
}

.navbar-main{
  position: fixed;
  width: 100%;
}

.main-area{
  background-color: #333;
  min-height: 88vh;
  color: white;
}
.main-txt-2nd{
  padding-top: 3em;
font-size: 1.4em;
letter-spacing: 0em;
line-height: 1.6em;
}

.footer-area{
background-color: darkgoldenrod;
  min-height: 12vh;
  padding-top: 0em;
}

.boxes{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    min-height: 200px;
}
.infoBox{
    border: solid 1px gray;
    margin: 5px;
    min-height: 21em;
}
.infoBox-top{
    min-height: 70%;
    width: 100%;
    /* background-color: bisque; */
    /* background-image: url("../img/keyboard500.jpg"); */
    /* background-size: cover; */
}

.infoBox-bottom{
    /* min-height: 30%; */
    padding: 1em .6em;
    width: 100%;
    /* background-color:coral; */
}

.infoBox-img{
    max-width: 100%;
}

@media(max-width:800px){
    .boxes{
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 200px;
    }
}

@media(max-width:500px){
    .boxes{
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        min-height: 200px;
    }
}