/* Smooth gradient background */


body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 20; padding: 0; background: linear-gradient(135deg, #0077c2, #c84b31); background-size: 400% 400%; animation: gradientBG 15s ease infinite; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
/* Main banner */
.banner-section {
    min-height: 100vh;
    padding: 50px 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* ===== Mobile responsiveness except NEET Details ===== */
@media (max-width: 576px) {

    /* Skip NEET details table */
    .best-of-5-section,
    .marks-in-class-xii {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .5rem !important;
    }

    /* Headings smaller */
    .best-of-5-section h5,
    .marks-in-class-xii h5 {
        font-size: 1.1rem !important;
        margin-top: 7px !important;
    }

    /* Select fields full width */
    .best-of-5-section .form-select,
    .marks-in-class-xii .form-select {
        width: 100% !important;
        min-width: 0 !important;

    }

    /* Marks table more compact */
    .marks-table th,
    .marks-table td {
        padding: .5rem !important;
        font-size: .95rem !important;
        word-break: break-word;
    }

    /* Input fields full width */
    .marks-table input.form-control {
        width: 105% !important;
    }

    /* GPA footer rows boxed */

}

.marks-table tfoot td {
    background: #fff !important;
    padding: .5rem !important;
    border-left: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
    border-bottom: 7px solid #dee2e6 !important;
}

.marks-table tfoot td {
    background: #fff !important;
    border-left: 3px solid #000 !important;

}
.marks-table tfoot td:nth-child(2),
.marks-table tfoot td:nth-child(3) {
    border-left: 1px solid #8899AA !important;
}



/* বক্সটা সুন্দর দেখানোর জন্য */
.marks-table tfoot .total-gpa-box {
    display: inline-block;
    background: #fff !important;
    color: #000;
    padding: .5rem .75rem;
    border-radius: .5rem;
    min-width: 90px;
    text-align: center;

}


.college-title {
    font-style: italic;
    font-family: 'Georgia', serif;
    font-size: 2.5rem;
    color: white;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

.college-address {
    font-size: 1.25rem;
    color: #e8e8e8;
}

/* ===== BEST OF 5 MARK SECTION LAYOUT ===== */
/* This section now correctly targets the new HTML structure */
.best-of-5-section {
    display: flex;
    flex-direction: row; /* Set to row for desktop */
    gap: 1rem;
    align-items: center;
}
.best-of-5-section h5 {
    font-size: 1.25rem;
    line-height: 1;
    margin: 15px 0 0 0;


}
.year-of-passing-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.year-of-passing-group .form-label {
    margin-bottom: 0;
    font-weight: bold;
    white-space: nowrap;
}
.year-of-passing-group .form-select {
    width: auto;
}

/* ===== MARKS IN CLASS XII SECTION LAYOUT ===== */
/* This section also uses the same responsive pattern */
.marks-in-class-xii {
    display: flex;
    flex-direction: row; /* Set to row for desktop */
    align-items: center;
    gap: 1rem;
    margin-top: 39px;
}
.marks-in-class-xii h5 {
    font-size: 24px;
    margin-top: 20px;
}
.marks-in-class-xii .form-label {
    margin: 0;
    font-weight: bold;
    white-space: nowrap;
}
.marks-in-class-xii .form-select {
    width: auto;
}

/* Fix for mobile view on small screens */
@media (max-width: 576px) {
    .best-of-5-section,
    .marks-in-class-xii {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .best-of-5-section h5,
    .marks-in-class-xii h5 {
        font-size: 24px;
        margin-top: 20px; /* Adjust spacing for mobile */

    }
    .year-of-passing-group,
    .marks-in-class-xii .d-flex {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
    }
    .year-of-passing-group label,
    .marks-in-class-xii .d-flex label {
        display: block;
        margin-top: 2rem;
        font-weight: bold;
        font-size: 19px;
    }
    .year-of-passing-group select,
    .marks-in-class-xii .d-flex select {
        width: auto;
        min-width: 120px;
        font-size: 0.95rem;
        padding: 4px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-top: 0px;
        margin-left: 7px;
        padding-top: 8px !important;
        padding-bottom: 4px !important;
    }
}
.classXYear1 {
    margin-top: 10px;
}

/* ========================================= */


/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    .college-title {
        font-size: 1.5rem;
    }
    .college-address {
        font-size: 1rem;
    }
    .banner-section {
        padding: 30px 15px;
    }
}

@media (max-width: 768px) {
    .college-logo {
        max-width: 200px;
    }
    .college-title {
        font-size: 1.8rem;
        margin-bottom: 20px;
        margin-top: -1px;
    }
    .college-address {
        font-size: 1rem;
    }
    .form-wrapper {
        padding: 1.2rem;
    }
    .form-wrapper h2 {
        font-size: 1.5rem;
    }
    .btn-submit {
        width: 100%;
    }
    .floating-whatsapp {
        right: 10px;
        bottom: 80px;
    }
    .floating-whatsapp .whatsapp-icon {
        width: 45px;
        height: 45px;
    }
    .floating-whatsapp .whatsapp-icon img {
        width: 24px;
        height: 24px;
    }
}
@media (max-width: 480px) {
    .college-title {
        font-size: 1.4rem;
    }
    .form-wrapper {
        padding: 1rem;
    }
    .marks-table th,
    .marks-table td,
    .class-xii-table td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    .floating-whatsapp {
        bottom: 70px;
    }
}

.form-select-sm1 {
    margin-top: 33px;
}
.form-select-sm {
    width: auto;
    min-width: 120px;
    font-size: 0.95rem;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: -14px;
    margin-left: 7px;

}

/* Logo styling */
.college-logo {
    max-width: 200px;
    height: auto;
}
.form-container {
    background: rgba(255, 255, 255, 0.116);
    backdrop-filter: blur(12px);
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 100%;
    max-width: 700px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.form-wrapper {
    background-color: rgba(255, 255, 255, 0.312);
    color: #000;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.853);
    padding: 2rem;
    backdrop-filter: blur(5px);
    margin-top: -71px;
}

.form-label {
    margin-bottom: 6px;
}
.form-wrapper h2 {
    color: #004080;
    margin-bottom: 1rem;
    text-align: center;
}

.form-wrapper label {
    display: block;
    margin-top: 15px !important;
    display: inline-block !important;
font-weight: 600;
    font-size: 17px;
}
.classXYear1 {
    margin-top: 6px !important;
    display: inline-block !important;
}

.form-wrapper input,
.form-wrapper textarea {
    width: 100%;
    padding: 0.5rem;
    margin-top: 1px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.btn-submit {
    display: block;
    margin: 0 auto;
    background-color: #004080;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 1.5rem;
    width: auto;
}

.btn-submit:hover {
    background-color: #8800cc;
}

.marks-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
}

.marks-table th,
.marks-table td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    text-align: center;
}

.marks-table thead th {
    background-color: #004080;
    color: white;
}

.year-of-passing-label {
    margin-top: -1rem;
}

/* Class XII table */
.class-xii-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
}

.class-xii-table td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    vertical-align: middle;
}
.marks-table .total-gpa-of-classes-row {
    border-top: 2px solid #000;
}
.class-xii-table .form-control {
    border: none;
}
.file-input-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.is-invalid-red {
    border: 2px solid red !important;
}

/* WhatsApp floating */
.floating-whatsapp {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
}

.floating-whatsapp .whatsapp-label {
    background-color: #555;
    color: #fff;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 600;
}

.floating-whatsapp .whatsapp-icon {
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: -11px;
}

.floating-whatsapp .whatsapp-icon img {
    width: 28px;
    height: 28px;
}
/* Only the Total CGPA row — no borders anywhere */
/* New styles for the Total GPA rows */
.marks-table tfoot,
.marks-table tfoot td {
    border: none;
}
.marks-table .total-gpa-of-classes-row {
    background-color: white; /* Ensure the background is white */
    border-top: 1px solid #dee2e6; /* Add a top border to separate it from the marks */
}
.marks-table .total-gpa-of-classes-row td {
    border: none;
}
.total-gpa-column td {
    border-top: none; /* Remove top border from the new row */
}

.subject-popup {
    position: absolute;
    z-index: 9999;
    min-width: 280px;
    max-width: 380px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    padding: .5rem 0;
    display: none;
}
.subject-popup .item {
    padding: .55rem 1rem;
    cursor: pointer;
    font-weight: 500;
}
.subject-popup .item:hover,
.subject-popup .item.active {
    background: #f1f5f9;
}
.subject-input:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    border-color: #86b7fe;
}
.align-top-bold {
    vertical-align: top;
    font-weight: bold;
}
/* Remove borders for the tfoot and tfoot cells in the class-x-table */
#class-x-table tfoot,
#class-x-table tfoot td {
    border: none;
}

/* Popup for subject input */
.subject-popup {
    position: absolute;
    z-index: 9999;
    min-width: 280px;
    max-width: 380px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    padding: .5rem 0;
    display: none;
}

/* Styling for items in the popup */
.subject-popup .item {
    padding: .55rem 1rem;
    cursor: pointer;
    font-weight: 500;
}

/* Hover and active state styling for popup items */
.subject-popup .item:hover,
.subject-popup .item.active {
    background: #f1f5f9;
}

/* Focus styling for the subject input field */
.subject-input:focus {
    outline: none;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    border-color: #86b7fe;
}
/* Remove ALL vertical borders in table footers */
.marks-table tfoot td {
    border-left: none !important;
    border-right: none !important;
}

/* Remove ALL borders from Total rows */
.marks-table tr.total-cgpa-row td,
.marks-table tr.total-gpa-of-classes-row td {
    border-bottom: 1px solid #dee2e6 !important;
}


/* If the table itself still adds vertical lines */
.marks-table {
    border-collapse: collapse;
}
/* Total CGPA row — bold Full Marks & Obtained Marks columns */
.marks-table .total-cgpa-row td:nth-child(2),
.marks-table .total-cgpa-row td:nth-child(3) {
    font-weight: bold;
}
.total-gpa-of-classes-box {
    font-weight: bold;
}
.marks-table tfoot tr.total-cgpa-row td,
.marks-table tfoot tr.total-gpa-of-classes-row td {
    background: #fff;
    border: 1px solid #dee2e6 !important;
}

/* clear separator between the two footer rows */
.marks-table tfoot tr.total-gpa-of-classes-row td {
    border-top: 2px solid #dee2e6 !important;
}

/* ensure outer edges are closed */
.marks-table tfoot tr:last-child td {
    border-bottom: 1px solid #dee2e6 !important;
}
.marks-table tfoot td:first-child {
    border-left: 1px solid #dee2e6 !important;
}
.marks-table tfoot td:last-child {
    border-right: 1px solid #dee2e6 !important;
}

/* Out of 10 value bold */
.total-gpa-of-classes-box {
    font-weight: 700;
}
.marks-table tfoot tr.total-cgpa-row td,
.marks-table tfoot tr.total-gpa-of-classes-row td {
    border-left: 1px solid #dee2e6 !important;
    border-right: 1px solid #dee2e6 !important;
}

.marks-table tfoot tr.total-cgpa-row td {
    border: none;
}

/* Bottom border only on the last footer row */
.marks-table tfoot tr.total-gpa-of-classes-row td {
    border-bottom: 1px solid #dee2e6 !important;
}

/* Make Out of 10 value bold */
.total-gpa-of-classes-box {
    font-weight: 700;
}
/* Continuous border for both GPA rows */
.marks-table tfoot.gpa-footer td {
    border: 1px solid #dee2e6;
}

/* Remove double borders between the two rows */
.marks-table tfoot.gpa-footer tr + tr td {
    border-top: none;
}
.neet_year {
    position: relative;
}
.neet_year option {
    position: relative;
}

.neet_year:focus {
    transform-origin: top;
}
.form-container,
.container,
.form-wrapper {
    overflow: visible;
}
html,
body {
    scroll-behavior: auto;
} /* instant reposition */
.form-container,
.container,
.form-wrapper {
    overflow: visible;
}
body {
    padding-bottom: 280px;
} /* extra room near page end */
label {
    white-space: nowrap;
}

.label[for="classXYear"],
.label[for="classXiiYear"] {
    display: inline-block;
    margin-right: 8px;
}
:root {
    --green: #0f5b3c;
    /* header & accents */
    --ink: #0f172a;
    /* body text */
    --muted: #334155;
    /* subtle text */
    --red: #d21b1b;
    /* BENEFITS OF */
    --badge: #0e6247;
    /* badge green */
    --bg: #ffffff;
}
* {
    box-sizing: border-box
}
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: var(--ink);
    background: var(--bg);
}

/* Top ribbon heading */
.ribbon {
    background: var(--green);
    color: #fff;
    padding: 7px 7px;
    margin: 24px auto 20px;
    max-width: 1240px;
    border-radius: 4px
}
.ribbon h1 {
    margin: 0;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .3px;
    text-align: center
}

/* Main grid */
.section {
    max-width: 1240px;
    margin: 10px auto 40px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
    align-items: start;
    padding: 0 16px;

}


/* Bullets */
.benefits {
    padding-left: 4px
}
.benefits ul {
    margin: 0;
    padding-left: 22px
}
.benefits li {
    margin: 20px 0;
    line-height: 1.8;
    font-size: 18px
}
.benefits b {
    font-weight: 800
}

/* Image & lower banner */
.visual {
    position: relative
}
.visual figure {
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e5e7eb
}
.visual img {
    display: block;
    width: 100%;
    height: auto
}

/* Bottom callout on the image */
.callout {
    position: relative;
    margin-top: 18px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb
}
.callout .title {
    background: #fff;
    text-align: center;
    padding: 14px 10px;
    font-size: 42px;
    font-weight: 900;
    color: var(--red);
    letter-spacing: .5px
}
.badge {
    background: var(--badge);
    padding: 22px 14px;
    text-align: center
}
.badge span {
    display: inline-block;
    background: transparent;
    color: #fff;
    border-radius: 6px;
    padding: 10px 16px;
    font-weight: 800;
    font-size: 36px;
    letter-spacing: .6px
}

/* Responsive */
@media (max-width: 980px) {
    .ribbon h1 {
        font-size: 30px
    }
    .section {
        grid-template-columns: 1fr;
        gap: 20px
    }
    .benefits li {
        font-size: 17px
    }
    .callout .title {
        font-size: 34px
    }
    .badge span {
        font-size: 28px
    }
}
@media (max-width: 560px) {
    .ribbon {
        margin: 16px auto
    }
    .ribbon h1 {
        font-size: 24px
    }
    .benefits li {
        font-size: 16px
    }
    .callout .title {
        font-size: 26px
    }
    .badge span {
        font-size: 22px
    }
}
:root {
    --green: #0f5b3c;
    /* header & accents */
    --ink: #0f172a;
    /* body text */
    --red: #df1e1e;
    /* ELIGIBILITY heading */
    --badge: #0e6247;
    /* badge green */
    --bg: #ffffff;
}
* {
    box-sizing: border-box
}
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: var(--ink);
    background: var(--bg);
}

/* Top ribbon heading */
.ribbon {
    background: var(--green);
    color: #fff;
    padding: 7px 7px;
    margin: 24px auto 20px;
    max-width: 1240px;
    border-radius: 4px
}
.ribbon h1 {
    margin: 0;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .3px;
    text-align: center
}

/* Main grid */
.section {
    max-width: 1240px;
    margin: 10px auto 40px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
    align-items: start;
    padding: 0 16px;
}

/* Left title */
.subhead {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 10px 0
}

/* Bullets */
.elig-list {
    padding-left: 4px
}
.elig-list ul {
    margin: 0;
    padding-left: 22px
}
.elig-list li {
    margin: 18px 0;
    line-height: 1.8;
    font-size: 18px
}
.elig-list b {
    font-weight: 800
}

/* Image & lower banner */
.visual {
    position: relative
}
.visual figure {
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e5e7eb
}
.visual img {
    display: block;
    width: 100%;
    height: auto
}

/* Bottom callout on the image */
.callout {
    position: relative;
    margin-top: 18px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb
}
.callout .title {
    background: #fff;
    text-align: center;
    padding: 14px 10px;
    font-size: 42px;
    font-weight: 900;
    color: var(--red);
    letter-spacing: .5px
}
.badge {
    background: var(--badge);
    padding: 22px 14px;
    text-align: center
}
.badge span {
    display: inline-block;
    background: transparent;
    color: #fff;
    border-radius: 6px;
    padding: 10px 16px;
    font-weight: 800;
    font-size: 36px;
    letter-spacing: .6px
}

/* Responsive */
@media (max-width: 980px) {
    .ribbon h1 {
        font-size: 30px
    }
    .section {
        grid-template-columns: 1fr;
        gap: 20px
    }
    .elig-list li {
        font-size: 17px
    }
    .callout .title {
        font-size: 34px
    }
    .badge span {
        font-size: 28px
    }
}
@media (max-width: 560px) {
    .ribbon {
        margin: 16px auto
    }
    .ribbon h1 {
        font-size: 24px
    }
    .elig-list li {
        font-size: 16px
    }
    .callout .title {
        font-size: 26px
    }
    .badge span {
        font-size: 22px
    }
}
:root {
    --green: #0f5b3c;
    /* header & accents */
    --ink: #0f172a;
    /* body text */
    --red: #df1e1e;
    /* red title over image */
    --badge: #0e6247;
    /* badge green */
    --bg: #ffffff;
}
* {
    box-sizing: border-box
}
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: var(--ink);
    background: var(--bg);
}

/* Top ribbon heading */
.ribbon {
    background: var(--green);
    color: #fff;
    padding: 14px 16px;
    margin: 18px auto 18px;
    max-width: 1240px;
    border-radius: 4px
}
.ribbon h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .3px;
    text-align: center
}

/* Main grid */
.section {
    max-width: 1240px;
    margin: 0 auto 26px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 22px;
    align-items: start;
    padding: 0 16px
}

/* Left title */
.subhead {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 10px 0
}

/* Steps */
.steps {
    padding-left: 4px
}
.steps p {
    margin: 0 0 12px 0;
    line-height: 1.7;
    font-size: 16px
}
.steps b {
    font-weight: 800
}

/* Image & lower banner */
.visual {
    position: relative
}
.visual figure {
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e5e7eb
}
.visual img {
    display: block;
    width: 100%;
    height: auto
}

/* Bottom callout on the image */
.callout {
    position: relative;
    margin-top: 10px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb
}
.callout .title {
    background: #fff;
    text-align: center;
    padding: 10px 10px;
    font-size: 26px;
    font-weight: 900;
    color: var(--red);
    letter-spacing: .5px
}
.badge {
    background: var(--badge);
    padding: 14px 14px;
    text-align: center
}
.badge span {
    display: inline-block;
    background: transparent;
    color: #fff;
    border-radius: 6px;
    padding: 8px 14px;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: .6px
}

/* Responsive */
@media (max-width: 980px) {
    .ribbon h1 {
        font-size: 26px
    }
    .section {
        grid-template-columns: 1fr;
        gap: 18px
    }
    .callout .title {
        font-size: 24px
    }
    .badge span {
        font-size: 20px
    }
}
@media (max-width: 560px) {
    .ribbon {
        margin: 12px auto
    }
    .ribbon h1 {
        font-size: 22px
    }
    .callout .title {
        font-size: 22px
    }
    .badge span {
        font-size: 18px
    }
}
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;

    /* Light → Deep Pink & Sky Blue gradient */
    background: linear-gradient(-45deg, #e6f7ff, #ffd6eb, #87cefa, #ff66b2, #004080);
    background-size: 400% 400%;

    /* Smooth animation */
    animation: gradientBG 25s ease infinite;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.college-address {
    font-size: 30px;
    color: #000;
}
.college-title {
    color: #000;
}
.fees-heading {
    text-align: center;
    /* text majhkhane */
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(16px, 2.8vw, 22px);
    /* responsive size */
    font-weight: 700;
    /* bold */
    color: #222;
    /* text color */
    text-decoration: underline;
    /* underline */
    margin: 20px auto;
    /* center margin */
    display: block;
    /* ensure block element */

}

.College-logo {
    max-width: 300px;
    /* 👈 এখানে আপনার ইচ্ছেমত সাইজ দিন */
    height: auto;

}
.mb-3 {

}
/* ========= Mobile-Only Overrides (append at end) ========= */

/* Small tablets & phones */
@media (max-width: 768px) {
    /* Body margin to avoid unwanted gaps (tumaar base code untouched) */
    body {
        margin: 0 !important;
    }

    /* Banner spacing */
    .banner-section {
        padding: 28px 14px !important;
    }

    /* Titles & address scale down */
    .college-title {
        font-size: 1.8rem !important;
        margin-top: 1px;
    }
    .college-address {
        font-size: 1rem !important;
    }

    /* Logo a bit smaller on mobile */
    .college-logo,
    .College-logo {
        max-width: 228px !important;
        height: auto !important;
        width: 197px;
    }

    /* Form card tighter padding */
    .form-wrapper {
        padding: 1.1rem !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .25) !important;
    }
    .form-container {
        padding: 20px !important;
    }

    /* Buttons full width if needed */
    .btn-submit {
        width: 100% !important;
    }

    /* Tables compact */
    .marks-table th,
    .marks-table td,
    .class-xii-table td {
        padding: .5rem !important;
        font-size: .9rem !important;
        word-break: break-word;
    }

    /* Dropdowns/inputs behave better on small screens */
    .form-select,
    .form-select-sm,
    .marks-table input.form-control,
    .class-xii-table .form-control {
        width: 105% !important;
        min-width: 0 !important;
    }

    /* Grouped rows stack nicely */
    .best-of-5-section,
    .marks-in-class-xii {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .5rem !important;
    }

    .best-of-5-section h5,
    .marks-in-class-xii h5 {
        font-size: 1.1rem !important;
        margin-top: 31px!important;
    }

    /* Floating WhatsApp keeps clear of edges */
    .floating-whatsapp {
        right: 10px !important;
        bottom: 70px !important;
    }
    .floating-whatsapp .whatsapp-icon {
        width: 48px !important;
        height: 48px !important;
    }
    .floating-whatsapp .whatsapp-icon img {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Very small phones */
@media (max-width: 480px) {

    .college-address {
        font-size: .95rem !important;
    }

    .form-wrapper {
        padding: .9rem !important;
        margin-top: -95px;
    }
    .marks-table th,
    .marks-table td,
    .class-xii-table td {
        padding: .4rem !important;
        font-size: .85rem !important;
    }

    /* Labels long text wrap instead of overflowing */
    label {
        white-space: normal !important;
    }
    .year-of-passing-group label,
    .marks-in-class-xii .d-flex label {
        margin-top: .5rem !important;
        font-size: 1rem !important;
    }
    /* ===== Phone / WhatsApp: fixed left select + typeable input (HTML unchanged) ===== */

    /* Wrapper must be normal positioned (flex দেবেন না) */
    .position-relative {
        position: relative !important;
        display: block !important;
        isolation: isolate;
        /* z-index predictably works */
    }

    /* Country code select (left block) */
    #phone_cc,
    #whatsapp_cc {
        position: absolute !important;
        left: 0;
        top: 0;
        height: 100% !important;
        width: 130px !important;
        /* desktop width */
        max-width: 130px !important;
        box-sizing: border-box;
        padding: 0 .5rem !important;
        background: #fff !important;
        border: 1px solid #ced4da !important;
        border-right: none !important;
        /* single border with input */
        border-radius: .375rem 0 0 .375rem !important;
        z-index: 2 !important;

        /* লম্বা টেক্সট যেন ইনপুটের ওপরে না যায় */
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;

        -webkit-appearance: none;
        appearance: none;
    }

    /* Number input (sits to the right of the select) */
    #phone,
    #whatsapp {
        position: relative;
        z-index: 1;
        /* select-এর নিচে, কিন্তু ক্লিক পাবার জন্য যথেষ্ট */
        padding-left: 140px !important;
        /* = select width + 10px */
        border-radius: 0 .375rem .375rem 0 !important;
        text-align: left;
        direction: ltr;
        height: 44px !important;
        font-size: 1rem !important;
        line-height: 1.4;
        box-sizing: border-box;
    }

    /* Same visual height for both controls */
    #phone_cc,
    #whatsapp_cc {
        height: 44px !important;
    }

    /* ==== Small phones ==== */
    @media (max-width: 576px) {
        #phone_cc,
        #whatsapp_cc {
            width: 112px !important;
            /* mobile width */
            max-width: 112px !important;
            font-size: .9rem !important;
        }
        #phone,
        #whatsapp {
            padding-left: 122px !important;
            /* match select width */
            font-size: .95rem !important;
        }
    }

    /* Optional: when any of these get focus, show proper outline */
    #phone:focus,
    #whatsapp:focus {
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
        border-color: #86b7fe;
    }
}
table input.form-control {
  font-size: 14px;
}
/* put both signature fields in two clean columns */
.sig-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;               /* space between */
}

/* make sure each cell can't overflow */
.sig-field{ min-width: 0; }

/* smaller, non-overlapping labels */
.sig-label{
  display: block;
  font-size: 7px;         /* chhoto font */
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;     /* allow wrapping */
  word-break: break-word;  /* long text breaks safely */
  margin-bottom: 6px;
}

/* file input full width */
.sig-field input[type="file"]{ width: 100%; }

/* error text small */
.sig-error{ color:#c00; font-size:7px; }

/* Mobile: stack vertically */
@media (max-width: 768px){
  .sig-row{ grid-template-columns: 1fr; }
}
/* more space between the two signature columns */
.sig-row{
  column-gap: 24px;   /* was 16px — tweak to taste (20–32px) */
}
.sig-row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
/* smaller label size */
.sig-label{
  font-size: 12px;       /* chhoto */
  font-weight: 100;
  line-height: 1.2;
}

/* even smaller on mobile */
@media (max-width: 768px){
  .sig-label{ font-size: 11px; }
}

/* (optional) error text and file input aaro chhoto */
.sig-error{ font-size: 11px; }
.sig-field input[type="file"]{ font-size: 12px; }

/* আপনার বিদ্যমান CSS ফাইলের মধ্যে যোগ করুন */

/* Default for desktop: hide the camera button */
#takePictureButton {
    display: none;
}

/* For mobile devices (e.g., screens smaller than 768px) */
@media (max-width: 768px) {
    #takePictureButton {
        display: block; /* Show camera button on mobile */
    }
    /* You might want to hide the file input on mobile by default if camera is preferred */
    #passportImage {
        /* display: none; */ /* Uncomment if you want to initially hide the file input on mobile */
    }
}

/* Basic styling for camera elements */
#cameraContainer {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}
#cameraFeed, #capturedImagePreview {
    border-radius: 4px;
    background-color: black; /* To show a black background if no feed */
}
#snapButton, #retakeButton, #usePhotoButton, #cancelCameraButton {
    background-color: #007bff;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin: 5px;
}
#snapButton:hover, #retakeButton:hover, #usePhotoButton:hover, #cancelCameraButton:hover {
    background-color: #0056b3;
}
#cancelCameraButton {
    background-color: #dc3545; /* Red color for cancel */
}
#cancelCameraButton:hover {
    background-color: #bd2130;
}