*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

/* Global */

:root{

  --cbse-blue: #0d6efd;

  --cbse-deep: #123a5a;

  --muted: #6c757d;

  --card-bg: #ffffff;

  --accent: #0b98d3;

  --page-bg: #f6f7fb;

}

*{ box-sizing:border-box; margin:0; padding:0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }



/* Body background similar subtle diagonal pattern (use image if you have) */

body{

  background: var(--page-bg);

  color: #222;

  -webkit-font-smoothing:antialiased;

}



/* Govt top bar */

.gov-bar{

  background: #f8f9fa;

  font-size: 13px;

}



/* Header logos */

header .logo-img{

  height:64px;

  width:64px;

  object-fit:contain;

}



/* Title image */

header .logo-title{

  height:48px;

  object-fit:contain;

}

header{

    background: #fff;

}



img.logo-main {

    width: 100%;

}

nav.navbar {

    background: #f8f9fa;

}

/* Navbar */

.navbar{

  z-index: 50;

}

.navbar .nav-link {

    font-weight: 700;

    color: #000;

    font-family: "Open Sans", sans-serif;

    font-size: 12px;

}

.navbar .nav-link:hover{ color:var(--cbse-blue); }

.mobile-nav {

    display: flex;

    align-items: center;

}

/* Full width menu */

.cbse-nav {

  background: #fff;

  padding: 0;

}



/* Menu items */

.navbar-nav .nav-link {

    font-weight: 600;

    font-size: 13px;

    /* padding: 5px 13px !important; */

    text-transform: uppercase;

    color: #000;

    padding: 16px 0px;

}

ul.dropdown-menu {

    height: 215px;

    overflow: auto;

    width: 200px;

}

/* Hover color */

.navbar-nav .nav-link:hover {

  color: #007bff;

}

.dropdown-item{

        white-space: normal !important;



}





/* Show dropdown on hover (desktop) */

@media (min-width: 992px) {

  .hover-dropdown:hover .dropdown-menu {

    display: block;

    margin-top: 0;

  }

}



/* Dropdown styling */

.dropdown-menu {

  border-radius: 0;

  padding: 10px 0;

}



/* Fix alignment */

.navbar-nav {

  gap: 5px;

}



/* Hero carousel sizes */

.hero-area .carousel-image{

  height: 320px;

  background-size: cover;

  background-position: center;

}



@media (min-width: 1200px){

  .hero-area .carousel-image{ height: 380px; }

}

@media (max-width: 767px){

  .hero-area .carousel-image{ height: 200px; }

}



/* Notice box (scrolling list area) */

.notice-box{

  background: linear-gradient(180deg, #ffffff, #fbfbff);

  min-height: 320px;

}

.notice-box h6{ font-size: 15px; font-weight:700; }

.notice-list{

  max-height: 240px;

  overflow: hidden; /* we use JS to auto-scroll */

  padding-right:8px;

}



/* Feature cards */

.feature-card{

  background: linear-gradient(180deg, #fff, #fbfcff);

  border-radius: 12px;

  transition: transform .18s ease, box-shadow .18s ease;

  padding: 14px;

}

.feature-card .thumb{

  height: 100%;

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;

}

.feature-card img{ width:100%; height:170px; border-radius:8px; }



/* Card hover */

.feature-card:hover{

  transform: translateY(-6px);

  box-shadow: 0 10px 25px rgba(20,40,80,0.08);

}



/* promo strip */

.promo-strip{ background: #eef7ff; }



/* Footer */

.site-footer{

  background: linear-gradient(180deg,#0b2735 0%, #0b2735 60%);

  color: #dceef7;

}

.site-footer a{ color: #dceef7; text-decoration:none; }

.site-footer a:hover{ text-decoration: underline; }



/* small screens spacing */

@media (max-width: 575px){

  .header .logo-img{ height:48px; width:48px; }

  .notice-box{ min-height: auto; }

}



/* rounded overall look and shadow style */

.rounded-3{ border-radius: 12px !important; }

.shadow-sm{ box-shadow: 0 6px 18px rgba(45,55,75,0.06) !important; }



/* Utility tweaks */

.small { font-size: 0.85rem; }

.link-primary{ color:var(--cbse-blue); font-weight:600; }

.btn-access{ width:34px; height:30px; padding:0; }



/* fine tune carousel controls on dark/light bg */

.carousel-control-prev-icon,

.carousel-control-next-icon{

  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));

}



/* Responsive grid tweaks */

@media (min-width: 992px){

  .feature-card .thumb{ height:100%; }

}



/*index css start here */

#index-file {

    min-height: 100vh;

    height: 100%;

    padding: 20px;

}



img.logo-img {

    margin: 0 auto;

    display: block;

}

img.logo-title {

    margin: 0 auto;

    display: block;

    width: 100%;

}

a.card {

    margin: 10px 0;

    padding: 20px;

    height: 160px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    text-transform: uppercase;

    text-decoration: none;

    transition: 0.5s;

    text-align: center;

    background-size: 200% auto;

    color: white;

    box-shadow: 0 0 20px #eee;

    border-radius: 10px;

    font-size: 20px;

    background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%);

}

/*index css end here */



/* result page css start */

.result-box {

            background: #fff;

            border-radius: 12px;

            padding: 40px;

            max-width: 900px;

            margin: 50px auto;

            box-shadow: 0px 2px 15px rgba(0,0,0,0.1);

        }

        .result-title {

            font-size: 22px;

            font-weight: 700;

            text-align: center;

            margin-bottom: 25px;

        }

        .form-label {

            font-weight: 600;

        }

         select#classSelect {
          width: 35%;
          padding: .375rem .75rem;
        }
         select#yearSelect {
          width: 35%;
          padding: .375rem .75rem;
        }

      

        .captcha-box {

            background: #0d117a;

            color: #fff;

            font-size: 20px;

            padding: 5px 15px;

            border-radius: 4px;

            display: inline-block;

            font-weight: 700;

            letter-spacing: 2px;

        }



        .reload-icon {

            width: 28px;

            margin-left: 10px;

            cursor: pointer;

        }



        .disclaimer {

            font-size: 13px;

            margin-top: 25px;

            line-height: 1.6;

        }



        @media (max-width: 768px) {

            .form-label {

                margin-top: 10px;

            }

        }

/*result page css end */