/* Troubleshooting Page */
.troubleshooting-page {
    background-color: #f8f9fa; /* Light background */
    padding: 80px 0; /* Consistent padding */
}

.troubleshooting-title {
    font-size: 2.75rem; /* Large heading */
    margin-bottom: 1rem; /* Spacing below title */
    color: #333; /* Dark text for contrast */
}





/* Support Info Section */
.support-info {
    border-radius: 8px; /* Rounded corners */
}

/* Support Buttons Section */
.support-buttons {
    border-radius: 8px; /* Rounded corners */
}

    .support-buttons .btn {
        text-align: left; /* Align text to the left */
        padding: 0.75rem 1rem; /* Add padding for better spacing */
        font-size: 1rem; /* Standard font size */
    }

        .support-buttons .btn i {
            margin-right: 0.5rem; /* Spacing between icon and text */
        }





.troubleshooting-section {
    margin-bottom: 3rem; /* Spacing between sections */
    background-color: #ffffff; /* White background for sections */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 2rem; /* Consistent padding */
}

.troubleshooting-section-title {
    font-size: 2rem; /* Section title font size */
    margin-bottom: 1.5rem; /* Spacing below section title */
    color: #333; /* Dark text for contrast */
}

/* CSS Grid for Troubleshooting Cards */
.troubleshooting-grid {
    display: grid;
    gap: 1.5rem; /* Spacing between cards */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
}

/* Large Screens (≥ 992px): 3 cards per row */
@media (min-width: 992px) {
    .troubleshooting-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
}

/* Medium Screens (≥ 768px): 2 cards per row */
@media (min-width: 768px) and (max-width: 991.98px) {
    .troubleshooting-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

/* Small Screens (< 768px): 1 card per row */
@media (max-width: 767.98px) {
    .troubleshooting-grid {
        grid-template-columns: 1fr !important; /* Force 1 column */
    }

    .troubleshooting-title {
        font-size: 1.75rem; /* Large heading */
        margin-top: 1rem;
    }

    .col-4 {
        width: 50% !important;
    }
}

.troubleshooting-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #f8f9fa; /* Light background for cards */
    border-radius: 8px; /* Rounded corners */
    padding: 1.5rem; /* Consistent padding */
}

    .troubleshooting-card:hover {
        transform: translateY(-5px); /* Slight lift on hover */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
    }

.troubleshooting-card-icon {
    color: #4d9f9f; /* Theme color for icons */
    margin-bottom: 1rem; /* Spacing below icon */
}

.troubleshooting-card-title {
    font-size: 1.5rem; /* Card title font size */
    margin-bottom: 1rem; /* Spacing below title */
    color: #333; /* Dark text for contrast */
}

.troubleshooting-steps {
    padding-left: 0; /* Remove default padding */
    margin-bottom: 1.5rem;
    color: #555; /* Secondary text color */
}

    .troubleshooting-steps li {
        margin-bottom: 0.75rem; /* Spacing between steps */
        display: flex;
        align-items: center;
    }

        .troubleshooting-steps li i {
            margin-right: 0.5rem; /* Spacing between icon and text */
            color: #4d9f9f; /* Theme color for icons */
        }

.troubleshooting-video-link {
    width: 100%; /* Full-width button */
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    color: #4d9f9f; /* Theme color for button text */
    border-color: #4d9f9f; /* Theme color for button border */
}

    .troubleshooting-video-link:hover {
        background-color: #4d9f9f; /* Theme color on hover */
        color: #ffffff; /* White text on hover */
        transform: translateY(-2px); /* Slight lift on hover */
    }