@import url('../nav.css');

html{
    font-size: 16px;
}


main{
    color:white;
     width:90vw;
    margin:auto;
    min-height:100vh;
    /* border:1px solid red; */
}
.hero-section{
    width:100%;
    margin: auto;
    height:200px;
    border-radius:11px;
    background-image: url(../e-books/e-books-img/bacvv.png);
    background-position: center;
    background-size: cover;
    /* position:relative; */
    display:flex;
    align-items: center;
    justify-content:center;
    gap:12px;
    padding:12px;
}

p{
    font-family:sans-serif;
    color:#b4b4b4;
}

.video-wrap{
    padding:23px 12px ;
    /* display:grid; */
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* grid-template-columns:repeat(3, 1fr); */
    gap:23px;
}

.vid-card{
    flex:1;
    min-width:300px;
    border:1px solid #000000d7;
    border-radius: 1rem;
    width:fit-content;
    padding:0.8rem;
    background-color:#06707c;
    box-shadow: 0 0px 16px rgb(0, 0, 0);
    transition: 0.3s;
}

.crd-img{
    /* width:22rem; */
    width:100%;
    border-radius: 1rem;
    overflow: hidden;
}
.crd-img img{
    width:100%;
}


.vid-card:hover{
    box-shadow: 0 3px 9px rgb(194, 255, 243);
    transform: translateY(-3px);
}


.iframe{
    display:none;
    align-items: center;
    justify-content: center;
    border-radius: 44px;
    overflow: hidden;
}

.iframe.vid-active{
    display:flex;
}



@media all and (max-width:800px){


    .hero-section{
    width:100%;
    margin: auto;
    height:120px;
    border-radius:6px;
}

.iframe{
    height:250px;
       /* padding-bottom: 56.25%; */
    width:100%;
    border-radius: 4px;
}


.video-wrap{
    padding: 58px 0px 12px;
}

}