/*
Author: Akash Mannil
Date: December 4, 2024
File Name: training.css
*/

/* Mobile First Styles */

/* General Layout */
body {
    overflow-x: visible;
}

main {
    padding: 0 20px;
}

section {
    margin-bottom: 40px;
}

h1, h2, h3, caption {
    color: #551A8B;
}

/* Training Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0px 0px 14px 0px black;
}

table caption {
    font-size: 1.2em; /* Slightly smaller font for mobile */
    margin-bottom: 20px;
}

th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

th {
    background-color: #a89e45;
    color: white;
}

td img.product-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin-right: 10px;
}

/* Alternating row colors */
tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

tbody tr:hover {
    background-color: #d1e7dd;
}

.table-caption-center {
    text-align: unset;
}

ul.training-details {
    font-weight: bold;
}

ul.training-details li:before {
    font-family: Arial, sans-serif;
    content: "\2713";
    font-size: 24px;
    color: #a89e45;
    left: 0;
    padding-right: 10px;
    position: relative;
    top: 2px;
}

.contact-info {
    text-align: center;
}

.contact-info a {
    color: #551A8B;
}
/* Media Queries for Responsiveness */

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        overflow-x: hidden;
    }

    table caption {
        font-size: 1.4em; /* Slightly larger caption on tablets */
    }

    th, td {
        font-size: 14px;
        padding: 12px;
    }

    td img.product-img {
        width: 45px;
        height: 45px;
    }

    .table-caption-center {
        text-align: center;
    }    

    section {
        padding: 15px;
    }
}

/* Desktop Styles */
@media (min-width: 1025px) {
    body {
        overflow-x: hidden;
    }

    table caption {
        font-size: 1.2em; /* Larger caption for desktops */
    }

    th, td {
        font-size: 16px;
        padding: 15px;
    }

    td img.product-img {
        width: 50px;
        height: 50px;
    }

    .table-caption-center {
        text-align: center;
    }    


    section {
        padding: 20px;
    }
}