:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Inter', sans-serif;
}
.hero-section {
background-image: url('https://onlinestudypro.org/images/banner.jfif');
background-size: cover;
background-position: center;
}
.stats-counter {
display: inline-block;
}
.form-input {
border: 1px solid #e5e7eb;
padding: 0.75rem 1rem;
border-radius: 8px;
width: 100%;
outline: none;
transition: border-color 0.2s;
}
.form-input:focus {
border-color: #4F46E5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
}
.custom-checkbox {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
height: 20px;
width: 20px;
background-color: #fff;
border: 2px solid #d1d5db;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #4F46E5;
border-color: #4F46E5;
}
.checkmark:after {
content: "";
display: none;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.testimonial-card {
transition: transform 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
}






       table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-family: Arial, sans-serif;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        @media screen and (max-width: 600px) {
            table {
                font-size: 14px;
            }
            th, td {
                padding: 8px;
            }
        }