:root {
    /* Font families */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    /* Colors */
    --color-primary: #073045;
    --color-secondary: #C66C10;
    --color-orange: #F4CD68;
    --color-light: #ffffff;
    --color-dark: #0b0b0b;
    --color-text: #333333;
    --color-muted: #888888;
    --color-bg-light: #fdfaf6;
    --color-blue: #00b2ff;
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 32px;
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    /* Transitions */
    --transition-default: all 0.3s ease;
}

body {
    font-family: var(--font-primary);
    color: var(--color-text);
    /*	background-color: var(--color-bg-light);*/
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    margin-bottom: var(--spacing-sm);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

/* Paragraph */
p {
    font-size: 1rem;
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

/* Anchor */
a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: var(--transition-default);
}

    a:hover {
        color: var(--color-primary);
    }

/* Button Base */
button, .btn {
    font-family: var(--font-primary);
    font-size: 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-default);
}

/* Primary Button */
.btn-primary {
    background-color: var(--color-secondary);
    color: var(--color-light);
}

    .btn-primary:hover {
        background-color: var(--color-primary);
    }

/* Secondary Button */
.btn-secondary {
    background-color: transparent;
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
}

    .btn-secondary:hover {
        background-color: var(--color-primary);
        color: var(--color-light);
    }


.form-wrapper {
    background-color: var(--color-light);
    padding: 20px 30px;
    margin: 40px 20px;
    border-radius: var(--radius-md);
    max-width: 1200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

.form-header {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 35px;
    border-left: 6px solid var(--color-primary);
    padding-left: 14px;
}

.form-label {
    font-weight: 500;
    margin-bottom: 6px;
}

.btn-custom {
    background-color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    color: var(--color-light);
    font-weight: 500;
    border-radius: var(--radius-md);
    padding: 11px;
    margin-top:-12px;
}

    .btn-custom:hover {
        background-color: var(--color-primary);
        border: 1px solid var(--color-primary);
        color: var(--color-light);
    }
    

.form-control {
    border-radius: var(--radius-md);
    padding: 22px;
}

    .form-control:focus {
        border-color: var(--color-secondary);
        box-shadow: none;
    }

.gender-group {
    background: #e1e5f41f;
    padding: 11px 15px;
    border-radius: var(--radius-md);
    gap: 8px;
    border: 1px solid lightgray;
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

@media (max-width: 768px) {
    .form-wrapper {
        margin: 20px 10px;
    }
}

.form-label-group {
    position: relative;
    margin-bottom: 16px;
}
.field-icon {
    float: right;
    margin-left: -30px;
    margin-top: -28px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    margin-right:10px;
}
select.form-control {
    color: #000 !important;
/*    background-color: #fff;*/
    font-size: 16px;
    padding: 9px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    height: 47px;
}
input.form-control,
textarea.form-control {
    color: #000 !important;
/*    background-color: #fff !important;*/
    border-radius: 7px !important;
    height: 45px !important;
}
.subheading {
    /*    background-color: #9dc2d0; */
    background-color: var(--color-orange);
    color: var(--color-dark); 
    font-weight: 600;
    padding: 10px 15px;
    border-left: 5px solid var(--color-secondary); 
    font-size: 18px;
    border-radius: 4px;
    margin-bottom: 15px;

}
.popuptext{
    color:var(--color-secondary);
}
.switch {
    position: relative;
    display: inline-block;
    width: 36px; /* Smaller width */
    height: 20px; /* Smaller height */
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 20px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

/* Checked style */
.switch input:checked + .slider {
    background-color: #CC7007;
}

    .switch input:checked + .slider:before {
        transform: translateX(16px); /* Move less due to smaller width */
    }
.label-checkbox{
    margin-left:10px;
}
.profile-card {
    background-color: #fff7e6;
    border-left: 6px solid #CC7007;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    color: #333;
    text-align:center;
}

    .profile-card .highlight {
        font-weight: 600;
        color: #000;
    }

    .profile-card .orange {
        color: #CC7007;
    }
    label{
        font-size:large;
        font-weight:600;
    }
.modern-card {
    background-color: #FFF7E6;
    border: 2px solid #F6C045;
    border-radius: 15px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    overflow: hidden;
}

    .modern-card:hover {
        transform: scale(1.02);
    }

    .modern-card .left-icon {
        background-color: #CC7007;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.8rem;
        padding: 1.2rem;
        border-radius: 15px 0 0 15px;
    }

.college-info {
    padding: 1rem 1.5rem;
}

.college-title {
    font-weight: 700;
    font-size: 1rem;
    color: #CC7007;
}

.sub-info {
    font-size: 1rem;
    color: #444;
}
.large-size{
    font-size:large;
}

.badge-score {
    background-color: #CC7007;
    color: #fff;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 20px;
}

.info-label {
    font-weight: 600;
    color: #333;
}

.info-value {
    color: #555;
}

@media (max-width: 576px) {
    .modern-card {
        flex-direction: column;
    }

    .left-icon {
        border-radius: 15px 15px 0 0;
    }
}
/*login style start*/

.login-section {
  margin-top:100px;
}

.login-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
/*    width: 40%;*/
    max-width: 1000px;
    display: flex;
/*    flex-wrap: wrap;*/
    margin-top:-40px;
}

    .login-image img {
        width: 80%;
        max-width: 400px;
    }

.login-form {
    flex: 1;
    padding: 20px 40px;
}

    .login-form h2 {
        font-weight: 700;
        color: var(--color-primary);
        margin-bottom: 10px;
    }

    .login-form p {
        color: #777;
        
    }

.btn-login {
    background: var(--color-secondary);
    border: none;
    font-weight: 600;
    color: #fff !important;
    transition: background 0.4s;
    border-radius:5px;
    width:400px;
}

    .btn-login:hover {
        background: var(--color-primary);
        color: #fff !important;
    }

.form-control {
    border-radius: 10px;
    padding: 12px 15px;
}

.small-text {
    font-size: 14px;
    margin-top: 15px;
    text-align: center;
}

    .small-text a {
        text-decoration: none;
        font-weight: 600;
        color: var(--color-primary);
    }

        .small-text a:hover {
            text-decoration: underline;
        }

@media (max-width: 768px) {
    .login-card {
        flex-direction: column;
    }

    .login-form {
        padding: 40px 20px;
    }
}
.otp-input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin: 10px;
}

.otp-container {
    display: flex;
    justify-content: center;
}
@media (max-width: 576px) {
    .otp-input {
        width: 35px !important;
        height: 35px !important;
        margin: 8px !important;
        font-size:18px;
    }
    .login-form{
        padding:15px 0px;
    }
    .profile-name{
        font-size:1rem !important;
    }
    .profile_lable{
        font-size:1rem !important;
    }
    .hero-para{
        margin-left:0px !important;
    }
    .hero .navbar-nav {
        display: flex;
        flex-direction: row;
        justify-content: end !important;
    }
    .gender-group {
        padding: 10px 5px !important;
    }
    .custom-user-menu{
        margin-left:70px !important;
    }
    .navbar-nav{
        display:flex;
        flex-direction:row !important;
        justify-content:end !important;
    }
    .custom-user-menu {
         margin-left: 0px !important; 
         position:absolute !important;
    }
    }

    /*login style end*/
    .pagetitle-payment {
        font-size: 1.75rem; /* h3 size */
        font-weight: 600;
        color: #343a40;
        margin: 20px 0;
        padding-bottom: 10px;
        text-align:center;
    }

    .profile-page {
        margin-bottom: 20px;
    }
.profile-name{
    font-weight:600;
}

@media (max-width: 768px) {
    .search-box {
       flex-direction:column;
       gap:0;
    }
    .student-pre-section{
        padding:10px !important;
    }
   
    .input-checkbox label {
        font-size: 16px;
    }
    .model-style{
        width:100% !important;
    }
}
.table-text{
    font-weight:600;
}
.student-pre-section {
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.body-content{
    margin-top: 15px !important;
    height:auto !important;
    min-height:429px !important;
}
.footer-para{
    font-size: 17px;
    font-weight: 500;
}
footer-para:hover{
    text-decoration:underline !important;
}
/* Social Icons */
.socialicons {
    text-align: center;
}
    .socialicons a {
        color: #403e3e;
        font-size: 25px;
        margin: 0 10px;
        transition: color 0.3s ease;
    }
        .socialicons a:hover {
            color: #b65300; 
        }
.list-para {
    margin-right: 145px;
    font-size: 1.6rem !important;
    margin-top: -0.4rem !important;
    color: #0b0d4eeb !important;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #e1e5f41f;
    border: 1px solid lightgray;
}
.navbar-toggler {
    border-color: black;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.profile-name,
.profile_lable {
    word-break: break-word;
    font-size: 0.95rem;
}

@media (max-width: 767px) {
    .profile-name,
    .profile_lable {
        font-size: 0.875rem;
    }

    .profile-page .row {
        margin-bottom: 0.5rem;
    }
    .dot-class{
        display:none;
    }
    .list-para{
        margin-right:0px;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .dot-class {
        display: none;
    }
    .list-para {
        margin-right: 0px;
    }
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding: 9px 25px !important
}
.btn-signup.active {
    background-color: gray !important;
    color: #fff !important;
}
.model-style {
    max-width: 65% !important;
}

@media (max-width: 768px) {
    .model-style {
        max-width: 90% !important;
    }
}
.custom-user-menu {
    width: 210px !important;
    background: white !important;
}