/* Base Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body Grid Layout */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #fde7cc;
/* padding: 40px 20px; */
}
html {
scroll-behavior: smooth;
}



/* Card Styling */
.card {
background-color: #ffffff;
border-radius: 0px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin: 6px;
}

.card:hover {
/* transform: translateY(-6px); */
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.card i {
    font-size: 36px;
    background: linear-gradient(to right, #6a00b7, #7835c7, #5e4fd0, #4268d8, #0073e6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 16px;
    text-align: center;
    display: block;
}
.card h3{
    /* background: linear-gradient(to right,rgb(226, 76, 74),rgb(227, 96, 14)); */
    width:85px;
    text-align: center;
    color: #fa0808;
    border-radius: 5px;
        /* right:20px; */
    /* margin-left:250px;  */
    /* display:flex; */
}

.card-title {
font-size: 1.2rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 12px;
text-align: center;
}

.card-description {
font-size: 0.95rem;
color: #555;
text-align: center;
margin-bottom: 20px;
}



.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
justify-content: center;
}

.section-heading {
grid-column: 1 / -1;
font-size: 2rem;
text-align: center;
color: #2c3e50;
margin-bottom: 32px;
}

.card-button {
display: inline-block;
text-align: center;
background: linear-gradient(to right, #6a00b7, #7835c7, #5e4fd0, #4268d8, #0073e6);
color: #fff;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 1rem;
text-decoration: none; /* Remove underline */
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
width: 100%;
max-width: 200px;
align-self: center;
}

.card-button:hover {
transform: translateY(-2px);
}



/* Responsive Media Queries */
@media (max-width: 480px) {
body {
    padding: 20px 10px;
    grid-template-columns: 1fr;
}

.card {
    padding: 20px 16px;
}

.card-title {
    font-size: 1.1rem;
}

.card-description {
    font-size: 0.9rem;
}

.card-button {
    font-size: 0.95rem;
    padding: 10px 16px;
}
}
@media (max-width: 600px) {
.nav.container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.2rem;
}

.apply {
    padding: 6px ;
    font-size: 0.74rem;
}
/* .card h3{
    margin-left: 200px;
} */
}








/* header image section add */

/* image section  */
.image-section {
    width: 100%;
    height: 400px;
    background-image: url('https://www.rkimt.com/wp-content/themes/storefront/assetsweb/images/blog-bg-2.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    padding: 0 20px; /* For small screen spacing */
    box-sizing: border-box;
}

.image-section h1 {
    font-size: 48px;
    margin: 0;
    /* color: brown; */
    text-align: center;
    color: rgb(252, 142, 7);
}

.breadcrumb {
    font-size: 18px;
    margin-top: 10px;
    text-align: center;
    /*color: #090909;*/
    color: #fff;
}

.breadcrumb a {
    text-decoration: none;
    color: rgb(254, 35, 6);
}

/* Responsive styles */
@media (max-width: 768px) {
    .image-section {
        height: 300px;
    }

    .image-section h1 {
        font-size: 36px;
    }

    .breadcrumb {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .image-section {
        height: 200px;
    }

    .image-section h1 {
        font-size: 28px;
    }

    .breadcrumb {
        font-size: 14px;
    }
}