@import url('https://fonts.googleapis.com/css2?ivmily=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body{
    margin: 0;
    font-family: "Roboto", sans-serif;
    /* background-color: #251e1e; */
}

p{
    margin: 0;
}

.avmaincontainer{
    display: flex;
    flex-direction: column;
    gap: 55px;
    padding: 0 55px;
}

.avtopsection{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.avtitlesection{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.avtitlelines{
    width: 40px;
    height: 2px;
    background-color: #AE943F;
    border-radius: 100px;
}

.avtitlesection p{
    color: #AE943F;
    font-size: 30px;
    font-weight: bold;
}

.avarrowsection{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.avarrowsection img{
    cursor: pointer;
}

.avcontentsection{
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px 0;
}

.avcontentsection::-webkit-scrollbar {
    display: none; /* Hide scrollbar if you want */
}

.indvvideocard{
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    max-width: 307px;
    transition: 0.3s ease;
}

.indvvideocardbig{
    max-width: 516px;
    gap: 10px;
}

.indvvideocard:hover{
    margin-top: -20px;
    margin-bottom: 20px;
}

.avvdvideosec{
    width: 307px;
    height: 175px;
    overflow: hidden;
}

.avvdvideosecbig{
    width: 516px;
    height: 294px;
}

.avvdvideosec video{
    height: inherit;
    width: inherit;
    object-fit: cover;
    border: 1px solid #AE943F;
}

.avvdvideosec span{
    position: relative;
    top: -50%;
    transform: translateY(-50%);
    justify-content: center;
    display: flex;
}

.avvideotextsec{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.avvideotextsecmid{
    align-items: center;
    gap: 10px;
}

.avvdtitletext{
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.avvdtitletextmid{
    color: #AE943F;
    font-size: 18px;
    font-weight: 600;
}

.avvddesctext{
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 300;
}

.avvddesctextmid{
    font-size: 14px;
}

.avvddateandtime{
    display: flex;
    gap: 20px;
}

.avvddateandtime span{
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 12px;
    font-weight: lighter;
    color: #FFFFFF;
}

.avvddateandtimemid span{
    font-size: 14px;
}

.avfirstsection,
.avlastsection{
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.avindvsectioncon{
    display: flex;
    gap: 28px;
    min-width: calc(100vw - 110px);
    justify-content: center;
}

.alvideoformobile{
    display: none;
}

.alvideoformobile .avvdtitletext{
    color: #AE943F;
}

.alvideoformobile .avvddateandtime{
    justify-content: space-between;
}

.alvideoformobile .avshowmorebtn{
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding-top: 22px;
}

.alvideoformobile .avshowmorebtn p{
    border: 1.5px solid #AE943F;
    padding: 6px 12px;
    color: #AE943F;
    font-weight: 600;
}

@media(max-width: 1400px){
    .avindvsectioncon{
        flex-direction: column;
        align-items: center;
    }

    .avfirstsection, .avlastsection{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media(max-width: 850px){
    .avmidsection{
        display: none;
    }
}

@media(max-width: 550px){
    .avarrowsection{
        display: none;
    }

    .avtitlesection p{
        font-size: 20px;
    }
    
    .avmaincontainer{
        gap: 0;
        padding: 0 40px;
    }

    .avindvsectioncon{
        display: none;
    }

    .alvideoformobile{
        display: flex;
        flex-direction: column; 
        padding-bottom: 20px;
    }
}

@media(max-width: 400px){
    .avmaincontainer{
        padding: 0 30px;
    }
}