/* ==========================================
   RAJA YOGA 7 DAYS COURSE - AUDIO
   7days-audio.css
========================================== */

.audio-list-section {

    max-width: 1200px;

    margin: 50px auto;

    padding: 0 20px;

}

/* ==========================================
   PAGE TITLE
========================================== */

.audio-list-section h2 {

    text-align: center;

    font-size: 42px;

    color: #d46a00;

    margin-bottom: 25px;

}

.audio-list-section > p {

    max-width: 900px;

    margin: 0 auto 50px;

    text-align: center;

    font-size: 20px;

    line-height: 1.8;

    color: #555;

}

/* ==========================================
   AUDIO CARD
========================================== */

.audio-card {

    display: flex;

    align-items: center;

    gap: 30px;

    background: #ffffff;

    padding: 25px;

    margin-bottom: 30px;

    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(0,0,0,.08);

    transition: all .3s ease;

}

.audio-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 30px rgba(0,0,0,.12);

}

/* ==========================================
   COVER IMAGE
========================================== */

.audio-card img {

    width: 220px;

    height: auto;

    border-radius: 15px;

    object-fit: cover;

    box-shadow: 0 5px 15px rgba(0,0,0,.15);

}

/* ==========================================
   AUDIO CONTENT
========================================== */

.audio-content {

    flex: 1;

}

.audio-content h3 {

    font-size: 28px;

    color: #222;

    margin-bottom: 20px;

    line-height: 1.5;

}

/* ==========================================
   AUDIO PLAYER
========================================== */

.audio-content audio {

    width: 100%;

    height: 55px;

    border-radius: 10px;

}

/* ==========================================
   SPECIAL LOOK FOR LAST LESSON
========================================== */

.audio-card:last-child {

    border-left: 6px solid #d46a00;

}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 992px) {

    .audio-card {

        gap: 20px;

    }

    .audio-card img {

        width: 180px;

    }

    .audio-content h3 {

        font-size: 24px;

    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .audio-list-section {

        padding: 0 15px;

        margin: 40px auto;

    }

    .audio-list-section h2 {

        font-size: 30px;

        line-height: 1.4;

    }

    .audio-list-section > p {

        font-size: 17px;

        margin-bottom: 35px;

    }

    .audio-card {

        flex-direction: column;

        text-align: center;

        padding: 20px;

        gap: 20px;

    }

    .audio-card img {

        width: 100%;

        max-width: 280px;

    }

    .audio-content h3 {

        font-size: 21px;

        margin-bottom: 15px;

    }

    .audio-content audio {

        height: 50px;

    }

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .audio-list-section h2 {

        font-size: 26px;

    }

    .audio-content h3 {

        font-size: 19px;

    }

}