/**=====++++++ Menu Style +++++++=======**/

:root {
    --theme-primary: #0143b3;
    --theme-warning: #ffcb05;
    --font-heading: "Bricolage Grotesque", sans-serif;
}

/* ===== COMMON ===== */
body.lock {
    overflow: hidden;
}

a {
    text-decoration: none;
}

.Times
{
    font-size: 1.5rem;
}

/* ===== DESKTOP MENU ===== */
.desktop-menu {
    position: fixed;
    inset: 0;
    background: #0b2c5d;
    color: #fff;
    z-index: 9999;
    display: none;
}

.desktop-menu h4 {
    color: #ffd200;
    border-bottom: 2px solid #ffd200;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.desktop-menu a {
    display: block;
    color: #fff;
    margin-bottom: 10px;
}

.desktop-menu a:hover {
    color: #ffd200;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 40px;
}

.desktop-menu .close-btn {
    font-size: 28px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

/* ===== MOBILE MENU ===== */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: #0b2c5d;
    z-index: 9999;
    transform: translateX(-100%);
    transition: 0.3s ease;
}

.mobile-menu.open {
    transform: translateX(0);
}

.menu-backdrop {
    position: absolute;
    inset: 0;
}

.menu-box {
    position: relative;
    padding: 40px 20px;
}

.mobile-menu .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
}

.mobile-menu a {
    color: #fff;
    display: block;
    padding: 10px 0;
}

.dropdown > ul {
    padding-left: 15px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .menu-grid {
        grid-template-columns: 1fr;
    }
}

/***** Additional ****/

.team-sec
{
  background:#eee url(../Images/mdjssv1.png) no-repeat center !important;
  background-size:cover;
}

.about-right{background:url(../Images/hAbt_logo.png) !important;
             background-repeat:no-repeat !important;
             background-size:contain !important;
             background-position:center !important;
         }

.principal-message
{
    background:#eee, url(../Images/hAbt_logo.png) !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
    background-position:center !important;
}

.facilities
{
    background-image: url(../Images/hAbt_logo2.png) !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
    background-position:center !important;
}

/**++++++++===== Enquiry Style =======+++++++**/


/**++++++++===== Enquiry Style END =======+++++++**/

/**===+++++++=== Left fixed opportunity btn ===++++++===**/

.left-fixed-btn {
    position: fixed;
    left: 0;
    top: 65%;
    z-index: 9999;
}

.left-fixed-btn a 
{
    left: -11px;
    position: relative;
    display: block;
    background: linear-gradient(45deg, #2e3192, #0000f8);
    border:1px solid #fff;
    color: white;
    padding: 14px 22px;
    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 1px;
    transform: rotate(-90deg);
    transform-origin: left top;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    transition: all 0.4s ease;
}

.left-fixed-btn a:hover {
    transform: rotate(-90deg) scale(1.05);
}

@media(max-width:768px)
{
    .left-fixed-btn 
    {
        display:none;
    }
}

/**===+++++++=== Left fixed opportunity btn END ===++++++===**/

/**===+++++++=== Right fixed Quick Enquiry  ===++++++===**/
/*
.fixed-right-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #ffd54f, #f4c20d);
    color: #000;
    padding: 18px 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;

    writing-mode: vertical-rl;
    transform: rotate(180deg);

    border-radius: 18px 0 0 18px; 
    box-shadow: -6px 8px 20px rgba(0,0,0,0.35);

    z-index: 9999;
    transition: all 0.3s ease;
}
*/
/* ═══════════════════════════════
   RIGHT FIXED ENQUIRY BUTTON
═══════════════════════════════ */

.fixed-right-btn{
    position:fixed;
    top:40%;
    right:0;
    background:#ffc107;
    color:#000;
    padding:10px 14px;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    border-radius:8px 0 0 8px;
    cursor:pointer;
    font-weight:600;
    z-index:9999;
}

.fixed-right-btn .arrow-icon {
    font-size:18px;
    animation:bounceArrow 1.2s infinite;
}

.fixed-right-btn:hover {
    background:linear-gradient(180deg,#ffca28,#e0ad00);
}

@keyframes bounceArrow {
    0% { transform: translateX(0); }
    50% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}


/* ═══════════════════════════════
   MODAL OVERLAY BACKGROUND
═══════════════════════════════ */
/*
.enquiry-form{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.65);
  z-index:99999;
  justify-content:center;
  align-items:center;
  padding:15px;
}
*/
/* RIGHT BUTTON */

.fixed-right-btn{
    /*position:fixed;
    top:50%;
    right:0; */
    position: fixed !important;
    top: 50% !important;
    right: -10px !important;
    transform:translateY(-50%) rotate(180deg);
    writing-mode:vertical-rl;
    background:#ffc107;
    padding:12px 10px;
    font-weight:600;
    border-radius:8px 0 0 8px;
    cursor:pointer;
    z-index:9999;
}

/* OVERLAY BACKGROUND */
.enquiry-form{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    visibility:hidden;
    opacity:0;
    transition:0.3s;
    z-index:9998;
}


/* SHOW OVERLAY */

.enquiry-form.modal-open{
    visibility:visible;
    opacity:1;
}

/* RIGHT SLIDE PANEL */

.enquiry-panel{
    position:absolute;
   /* top:0; */
   top:15px;
    right:-480px;
    width:400px;
    height:96%;
    background:#fff;
    padding:25px;
    overflow-y:auto;
    transition:0.4s;
}

@media(max-width:768px)
{
    .enquiry-panel
    {
        top: 120px;
        height: 80%;
    }
}

/* PANEL OPEN */

.enquiry-form.modal-open .enquiry-panel{
    right:0;
}


/* HEADER */

.form-header{
    position:relative;
    margin-bottom:20px;
}

.form-header h2{
    font-size:22px;
    font-weight:700;
}


/* CLOSE BUTTON */

.close-btn{
    position:absolute;
    top:0;
    right:0;
    background:#eee;
    border:none;
    width:32px;
    height:32px;
    border-radius:50%;
    cursor:pointer;
}

.close-btn:hover{
    background:#ffc107;
}


/* FORM */

.enquiry-card{
    padding:10px;
}

.custom-input{
    border-radius:6px;
}

.custom-btn{
    background:#11296b;
    color:#fff;
}

/* ===================== */
/* TABLET RESPONSIVE */
/* ===================== */

@media (max-width:991px){

    .enquiry-panel{
        width:350px;
        right:-360px;
        padding:20px;
    }

    .form-header h2{
        font-size:20px;
    }

}

/* ===================== */
/* MOBILE RESPONSIVE */
/* ===================== */

@media (max-width:576px){

    .enquiry-panel{
        width:100%;
        right:-100%;
        padding:18px;
    }

    .enquiry-form.modal-open .enquiry-panel{
        right:0;
    }

    .form-header h2{
        font-size:18px;
    }

    .close-btn{
        width:28px;
        height:28px;
    }

}

html, body { width: 100%; overflow-x: hidden !important; }

/**===+++++++=== Right fixed Quick Enquiry END  ===++++++===**/

/**===+++++++=== Gallery for Home Style  ===++++++===**/
.gallery-card {
    width: 100%;
    padding: 10px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.gallery-img {
    position: relative;
    overflow: hidden;
} 


.gallery-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: 0.4s;
    border-radius: 12px;
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(255,193,7,0.95), transparent);
    color: #000;
    transition: 0.4s;
}

.gallery-overlay h5 {
    margin: 0;
    font-weight: bold;
}

.gallery-overlay span {
    font-size: 13px;
}

.gallery-card:hover img {
    transform: scale(1.08);
}

.gallery-card:hover .gallery-overlay {
    background: linear-gradient(to top, rgba(255,193,7,1), transparent);
}




/* ===============================
   GALLERY SECTION STYLING
=================================*/

/* Owl Nav Buttons */
.gallery-owl .owl-nav {
    position: absolute;
    top: 40%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.gallery-owl .owl-nav button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #ffc107 !important;
    color: #000 !important;
    font-size: 22px !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: 0.3s ease;
    pointer-events: all;
}

.gallery-owl .owl-nav button:hover {
    background: #0d2c6c !important;
    color: #fff !important;
    transform: scale(1.1);
}

/* Hide default dots */
.gallery-owl .owl-dots {
    display: none;
}

/* VIEW ALL Button */
.btn-theme-warning {
    background: linear-gradient(to right, #ffc107, #ffb300);
    border: none;
    padding: 8px 25px;
    font-weight: 600;
    border-radius: 25px;
    transition: 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.btn-theme-warning:hover {
    background: #0d2c6c;
    color: #fff !important;
    transform: translateY(-3px);
}

/* Gallery Card Hover Effect */
.gallery-card {
    overflow: hidden;
    border-radius: 10px;
}

.gallery-img {
    position: relative;
    overflow: hidden;
}

.gallery-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: 0.5s ease;
}

.gallery-img:hover img {
    transform: scale(1.1);
}

/* Overlay */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, #ffc107, rgba(255,193,7,0.1));
    color: #000;
}

.gallery-overlay h5 {
    margin: 0;
    font-weight: 600;
}

.gallery-overlay span {
    font-size: 14px;
}


.gallery-owl .owl-stage {
    display: flex;
    transition-timing-function: linear !important;
}

.gallery-owl .owl-item {
    transition: transform 0s !important;
}

/**===+++++++=== Gallery for Home Style END ===++++++===**/

.alumni-slider img 
{
    width:100%;
    height: 50%;
    object-fit: cover;
    border-radius: 6px;
}


/* ══════════════════════════════════════════
   ABOUT US SECTION (below slider)
══════════════════════════════════════════ */
.about-us {
  /*padding: 60px 0; */
  background: #fff;
}
.about-right {
  padding: 20px 40px 20px 20px;
  background: url('Images/hAbt_logo.png') no-repeat center / contain;
}
/*.about-left img { border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.15); } */
.sec-title { font-family: 'Segoe UI', sans-serif; font-weight: 800; }
.text-theme-primary { color: var(--navy) !important; }
.sec-subtitle { font-size: 1.4rem; color: #333; }
.quote {
  background: #f1f3f8;
  border-radius: 8px;
  padding: 14px 20px;
  font-style: italic;
  color: var(--navy);
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
  margin: 16px 0;
}
.btn-theme-yellow {
  border: 2px solid var(--gold);
  background: transparent;
  color: #212121;
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 24px;
  transition: all .2s;
  font-size: .9rem;
}
.btn-theme-yellow:hover { background: var(--gold); color: #212121; }


/*======== Leaders Message ======*/
.leadership-section {
    background: #f3f5f9;
    padding: 80px 0;
}

/* Title */
.section-title h2 {
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 60px;
}
.section-title span { color: #1e3a8a; }
.section-title b {
    display:inline-block;
    width:3px;
    height:28px;
    background:#f4c400;
    margin:0 12px;
}

/* MAIN BOX */
.leader-content-box {
    display: flex;
    background: #fff;
    box-shadow: 0 25px 60px rgba(0,0,0,0.08);
    border-left: 6px solid #1e3a8a;
    padding: 35px;
    gap: 30px;
    align-items: flex-start;
}

/* IMAGE SIDE */
.leader-image {
    position: relative;
    min-width: 220px;
}

.leader-image img {
    width: 220px;
    height: 280px;
    object-fit: cover;
    border-radius: 8px;
}

/* Yellow Name Strip */
.leader-name-strip {
    position: absolute;
    bottom: -15px;
    left: 15px;
    background: #f4c400;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* RIGHT CONTENT */
.leader-content {
    flex: 1;
}

/* Designation Badge */
.leader-role {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    margin-bottom: 18px;
    letter-spacing: .5px;
}

/* Quote */
.quote-icon {
    font-size: 50px;
    color: #1e3a8a;
    line-height: 1;
    margin-bottom: 10px;
}

#leaderDesc {
    font-size: 15px;
    line-height: 1.9;
    color: #444;
}

/* CAROUSEL EFFECT */
.leadership-carousel .owl-item {
    transition: .4s ease;
    transform: scale(.85);
    opacity: .6;
}

.leadership-carousel .owl-item.center {
    transform: scale(1.08);
    opacity: 1;
    z-index: 9;
}

/* CARD */
.team-card {
    background: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.team-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.team-info {
    background: #f4c400;
    padding: 15px;
}

.team-info h6 {
    margin: 0;
    font-weight: 700;
}

.team-info span {
    font-size: 13px;
}

/* NAV */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #1e3a8a;
    color: #fff;
    border: none;
    font-size: 22px;
    cursor: pointer;
    z-index: 99;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}
/*
.prev-btn { left: -25px; }
.next-btn { right: -25px; }
*/
.prev-btn { left: 2px; }
.next-btn { right: 2px; }

.nav-btn:hover {
    background: #f4c400;
    color: #000;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 991px) {

    .leader-content-box {
        flex-direction: column;
        padding: 25px;
    }

    .leader-image {
        min-width: 100%;
        text-align: center;
    }

    .leader-image img {
        width: 100%;
        height: auto;
    }

    .leader-name-strip {
        position: relative;
        bottom: 0;
        left: 0;
        display: inline-block;
        margin-top: 10px;
    }

    .leader-role {
        margin-top: 20px;
    }

    .prev-btn, .next-btn {
        display: block; /* hide arrows on mobile */
    }
}

/**++++ Team Heading Style +++++**/
.team-sec {
    position: relative;
}

/* Full width blue strip */
.team-sec .team-bg-heading {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    background: #11296b;
    top: 6px;
    padding: 25px 0;
}

/* Inner content alignment */
.team-sec .container-custom {
    max-width: 1306px;
    margin: 0 auto;
    padding: 0 15px;
    text-align: right;
}

/* Link styling */
.team-sec .team-bg-heading a { 
    top: -10px;
    position: relative;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.team-sec .team-bg-heading a:hover {
    opacity: 0.8;
}

/*****===== Leaders Section Style END ============********/

.principal-strip {
    background: #2184ff;
    position: absolute;
    width: 100%;
    bottom: 20%;
    left: 0;
}

.principal-strip a {
    color: #fff !important;
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 12px;
    position: relative;
    left: 0;
    z-index: 5;
    transition-duration: .3s;
}

.principal-strip a span {
    position: relative;
    right: 0;
    transition-duration: .3s;
}


/* ===== PRINCIPAL SECTION ===== */

/* SECTION */
.principal-section {
    padding: 20px 0;
    position: relative;
}


.section-title h2 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 1px;
}

.section-title span {
    color: #1e3a8a;
}

.section-title i {
    display: inline-block;
    width: 3px;
    height: 28px;
    background: #f4c400;
    margin: 0 14px;
    vertical-align: middle;
}


.principal-main {
    display: flex;
    align-items: stretch;   
    gap: 40px;
}


.principal-left {
    flex: 1;
    display: flex;
}

.principal-box {
    background: #e6e7ea;
    padding: 50px 50px 90px 50px;
    position: relative;
    width: 89%;
    display: flex;
    flex-direction: column;
    z-index:10;
}

.principal-box:before {
    content: "";
    position: absolute;
    left: -12px;
    top: -5px;
    width: 6px;
    height: 80px;
    background: #f4c400;
}

.principal-box:after {
    content: "";
    position: absolute;
    left: -12px;
    top: -10px;
    width: 60px;
    height: 6px;
    background: #f4c400;
}

.principal-box p {
    font-size: 15px;
    line-height: 1.9;
    color: #333;
    margin-bottom: 20px;
}


.principal-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #1e3a8a;
    padding: 18px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.principal-bottom .name {
    color: #fff;
    font-weight: 700;
}

.principal-bottom .school {
    color: #f4c400;
    font-size: 13px;
}


.principal-right {
    flex: 0 0 380px;
    position: relative;
}

.principal-img-wrapper {
    position: relative;
    text-align: center;
    left: -102px;
    z-index:10;
}


.principal-img-wrapper:before {
    content: "";
    position: absolute;
    top: -15px;
    right: -15px;
    width: 100px;
    height: 100px;
    border-top: 8px solid #1e3a8a;
    border-right: 8px solid #1e3a8a;
}

.principal-img-wrapper img {
    width: 100%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}


.designation {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: #f4c400d6;
    padding: 14px 0;
    font-weight: 700;
}

@media (max-width: 991px) {

    .principal-main {
        flex-direction: column-reverse;
        gap: 40px;
    }

    .principal-right {
        flex: unset;
        width: 100%;
        max-width: 400px;
    }

    .principal-box {
        padding: 40px 25px 80px 25px;
    }

    .principal-bottom {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
}

@media(max-width:768px)
{
    .principal-box
    {
        width:100%;
    }
    
    .principal_cont
    {
        display:none;
    }
    
    .principal-box a
    {
        padding-bottom:20px;
    }
    
    .principal-img-wrapper 
    {
        position:relative;
        left:0;
    }
    
    .section-title h2
    {
        font-size:28px !important;
        
    }
    
    .principal-bottom
    {
        padding: 3px 40px;
    }
    
    .principal-strip
    {
        bottom: -20px;
    }
}

/*****================ Campus Facilities Style ==================*****/
/* ===============================
   CAMPUS FACILITIES SECTION
================================ */

.facilities{
    background: var(--theme-primary);
    overflow: hidden;
    position: relative;
}

/* Section Title */
.sec-title{
    font-size: 42px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sec-subtitle{
    font-weight: 400;
}

/* ===============================
   Facility Card
================================ */

.facility-card{
  /*  display: flex; */
    align-items: center;
    gap: 10px;
    padding: 5px;
    transition: 0.4s ease;
}

.sec-subtitlee 
{
    font-size: 1.4rem;
    color: #333; 
    font-weight: 400;
    top: 12px !important;
    position: relative;
}

/* Image Wrapper */
.facility-img{
    position: relative;
    overflow: hidden;
    border-radius: 0px;
}

.facility-img img{
    transition: transform 0.6s ease;
   /* border-radius: 6px; */
    border: 3px solid #fff;
}

/* Hover Zoom */
.facility-card:hover img{
    transform: scale(1.08);
}

/* Facility Name Overlay */
.fac-name{
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: var(--theme-warning);
    color: var(--theme-primary);
    font-size: 15px;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s ease;
}

.facility-card:hover .fac-name{
    background: #fff;
}

/* Number Style */
.fac-count{
    font-size: 80px;
    line-height: 1;
    opacity: 0.15;
    position: relative;
}

/* Alternate layout (odd/even feel like Sunbeam) */
.facility-card:nth-child(even){
    flex-direction: row-reverse;
}

/* ===============================
   Owl Carousel Custom
================================ */

.facility-owl .owl-stage{
    display: flex;
    align-items: stretch;
}

.facility-owl .owl-item{
    display: flex;
    justify-content: center;
}

/* ===============================
   Custom Navigation Buttons
================================ */

.facility-nav{
    display: flex;
    justify-content: center;
    gap: 20px;
}

.facility-prev,
.facility-next{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--theme-warning);
    color: var(--theme-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
    font-size: 18px;
}

.facility-prev:hover,
.facility-next:hover{
    background: #fff;
}

/* ===============================
   Responsive Design
================================ */

/* Tablet */
@media(max-width:991px){

    .sec-title{
        font-size: 32px;
    }

    .facility-card{
        flex-direction: column !important;
        text-align: center;
    }

    .fac-count{
        font-size: 60px;
    }

}

/* Mobile */
@media(max-width:576px){

    .sec-title{
        font-size: 26px;
    }

    .fac-name{
        font-size: 13px;
        padding: 6px 10px;
    }

    .fac-count{
        display: none !important;
    }

}

@media(max-width:768px)
{
    .sec-subtitlee 
    {
        font-weight: 400;
        top: 5px !important;
        position: relative;
    }
    
    .sec-subtitle_story
    {
        font-weight: 400;
        top: 5px !important;
        position: relative;
    }
}

.sec-subtitle_story
{
    font-size: 1.4rem;
    color: #333; 
    font-weight: 400;
    top: 12px !important;
    position: relative;
}
/******============ Campus Facilities Style END ============*******/

/**=========== Alumni Style =========**/
/* ===== SECTION ===== */

.alumni-section {
    background: #f2f2f2;
}

/* Heading */
.sec-title {
    font-weight: 700;
    letter-spacing: 1px;
}

.text-theme-primary {
    color: #1f3c88;
}

.divider {
    display: inline-block;
    width: 4px;
    height: 22px;
    background: #ffc107;
    margin: 0 10px;
}


.alumni-slider-prev
{
    position:relative;
    left:-33px !important;
}
.alumni-slider-next
{
    position:relative;
    right:-10px !important;
    
}
/* ===== SLIDER IMAGES ===== */

.alumni-slider .alumni-item {
    padding: 0 90px;
}

@media(max-width:768px)
{
    .alumni-slider img
    {
        width: 100% !important;
        height: 222px !important;
    }
    .alumni-slider .alumni-item {
        padding: 0 0px;
    }
}

.alumni-slider img {
    width: 100%;
    height: 320px; /* 👈 fixed height for all */
    object-fit: cover; /* image stretch na ho */
    border-radius: 6px;
    transition: 0.4s;
    opacity: 1; /* sab visible */
    transform: scale(1); /* sab equal size */
}

.alumni-slider .owl-item.center img {
    border: 4px solid #1f3c88;
}

.alumni-slider .owl-item:not(.center) img {
    opacity: 0.7;
}

/* ===== CARD ===== */

.alumni-card-wrap {
    max-width: 850px;
    margin-top: 30px;
}

.alumni-card {
    background: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-radius: 6px;
    overflow: hidden;
}

/* Header */
.alumni-card .card-header {
    height: 60px;
}

.card-left {
    background: #1f3c88;
    padding: 15px 20px;
    color: #fff;
}

.card-left .subtitle {
    color: #e7ad00;
    font-weight: 600;
    font-size: 15px;
}

.card-right {
    background: #ffc107;
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Body */
.alumni-card .card-body {
    background: #efefef;
    padding: 25px;
    font-size: 15px;
}

/* Read more */
/*
.readmore {
    color: #1f3c88;
    font-weight: 600;
    text-decoration: none;
}
*/
.readmore{
    display:inline-block;
    margin-top:8px;
    color:#1f3c88;
    font-weight:600;
    position:relative;
    z-index:10;
}

.readmore:hover {
    text-decoration: underline;
}


@media (max-width:768px){

    .alumni-card .card-header{
        flex-direction:column;
        height:auto;
    }

    .card-left{
        width:100%;
        padding:12px 15px;
    }

    .card-right{
        width:100%;
        padding:8px;
        justify-content:center;
    }

    .alumni-card .card-body{
        padding:15px;
        font-size:14px;
    }

}

/* ===== NAVIGATION ===== */

.owl-custom-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.owl-custom-nav button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #ffc107;
    background: #fff;
    color: #ffc107;
    font-size: 20px;
    transition: 0.3s;
}

.owl-custom-nav button:hover {
    background: #ffc107;
    color: #fff;
}

/* ===== VIEW ALL ===== */

.btn-view-all {
    border: 2px solid #ffc107;
    padding: 6px 25px;
    border-radius: 30px;
    color: #1f3c88;
    font-weight: 600;
    text-decoration: none;
}

.btn-view-all:hover {
    background: #ffc107;
    color: #000;
}

/* Responsive */
@media (max-width: 768px) {

    .card-header {
        flex-direction: column;
        height: auto;
    }

    .card-right {
        width: 100%;
        padding: 10px 0;
    }

    .owl-custom-nav {
        display: none;
    }
}
/**=========== Alumni Style END ======**/


/**========== Highlights Style ==========**/
.notice-board-wrapper {
    display: flex;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
   /* border-radius: 12px; */
    overflow: hidden;
    margin: 30px 0;
}

/* LEFT SIDE */
.notice-left {
    background: linear-gradient(135deg, #004aad, #007bff);
    color: #fff;
    padding: 30px 20px;
    /*width: 220px; */
    width:380px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.notice-icon {
    font-size: 80px;
    margin-bottom: 10px;
}

.notice-left h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.highlight-text {
    font-size: 14px;
    opacity: 0.9;
}

/* RIGHT SIDE */
.notice-right {
    flex: 1;
    padding: 20px;
    background: #f9fbff;
}

/* SCROLL AREA */
.notice-scroll {
    height: 300px;
    overflow: hidden;
    position: relative;
}

/* NOTICE ITEM */
.notice-item {
    padding: 12px 15px;
    border-bottom: 1px dashed #e5e5e5;
    transition: 0.3s;
}

.notice-item:hover {
    background: #eef4ff;
    transform: translateX(5px);
}

.notice-date {
    font-size: 13px;
    font-weight: 600;
    color: #004aad;
    margin-bottom: 5px;
}

.notice-text {
    font-size: 14px;
    color: #333;
}


@media (max-width: 768px) {
    .notice-board-wrapper {
        flex-direction: column;
    }

    .notice-left {
        width: 100%;
    }
}
/**========= Highlights Style END ===========**/

/**======== Toppers Style ===============**/
/*
.sun-achievement-section {
    padding: 50px 0;
    background: #f5f9ff;
}

.sun-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    overflow: hidden;
}

.sun-header {
    padding: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    color: #fff;
}

.birthday-head {
    background: linear-gradient(90deg,#004aad,#007bff);
    border-bottom: 4px solid #ffc107;
}

.sow-head {
    background: linear-gradient(90deg,#004aad,#0056b3);
    border-bottom: 4px solid #ffc107;
}

.topper-head {
    background: linear-gradient(90deg,#003580,#0066ff);
    border-bottom: 4px solid #ffc107;
}

.sun-scroll {
    height: 350px;
    overflow: hidden;
    padding: 15px;
}

.sun-item {
    text-align: center;
    padding: 15px;
    margin-bottom: 15px;
    background: #f9fbff;
    border-radius: 12px;
    transition: 0.3s;
}

.sun-item:hover {
    transform: translateY(-5px);
    background: #eef4ff;
}

.sun-img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 4px solid #ffc107;
    object-fit: cover;
}

.sun-name {
    font-size: 17px;
    font-weight: 600;
    color: #004aad;
    margin-top: 8px;
}

.sun-class {
    font-size: 14px;
    color: #444;
}
*/

/* ===== SECTION ===== */
/*
.sun-achievement-section {
    padding: 60px 0;
    background: linear-gradient(to bottom,#f5f9ff,#eaf2ff);
}
*/
/* ===== CARD ===== */
/*
.sun-card {
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: 0.3s ease;
    position: relative;
}

.sun-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}
*/
/* ===== HEADER ===== */
/*
.sun-header {
    padding: 14px;
    text-align: center;
    font-weight: 600;
    font-size: 25px;
    color: #fff;
    letter-spacing: 0.5px;
}


.birthday-head,
.sow-head,
.topper-head {
    border-bottom: 5px solid #ffc107;
}
*/
/* ===== SCROLL BOX ===== */
/*
.sun-scroll {
    height:500px;
    overflow: hidden;
    padding: 20px;
}
*/
/* ===== ITEM CARD ===== */
/*
.sun-item {
    display: flex;
    flex-direction: column;
    align-items: center;   
    justify-content: center;
    text-align: center;
    padding: 20px 15px;
    margin-bottom: 18px;
   background:linear-gradient(45deg, #009393, #fff8c6);
    border-radius: 15px;
    transition: 0.3s ease;
}

.sun-item:hover {
    background: #eef4ff;
    transform: scale(1.03);
}
*/
/* ===== IMAGE ===== */
/*
.sun-img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #ffc107;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    margin-bottom: 15px;
    transition: 0.3s ease;
}
*/

/* Soft golden glow on hover */
/*
.sun-item:hover .sun-img {
    box-shadow: 0 0 25px rgba(255,193,7,0.7);
}
*/

/* ===== NAME ===== */
/*
.sun-name {
    font-size: 18px;
    font-weight: 600;
    color: #004aad;
    margin-bottom: 5px;
}
*/

/* ===== CLASS ===== */
/*
.sun-class {
    font-size: 14px;
    color: #555;
    background: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}
*/
/*////////////////*/
/*
.sun-achievement-section {
    padding: 60px 0;
    background: #0a0a1a; 
    position: relative;
    overflow: hidden;
}
*/

/* Subtle animated star-dust background for entire section */
/*
.sun-achievement-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255,193,7,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(100,150,255,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 60% 80%, rgba(255,100,150,0.07) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.sun-achievement-section .container,
.sun-achievement-section .row {
    position: relative;
    z-index: 1;
}
*/
/* ===================================================
   SECTION TITLE (optional — agar use karo)
   =================================================== */
/*
.sun-section-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 40px;
}
.sun-section-title::after {
    content: '';
    display: block;
    width: 60px; height: 3px;
    background: #FFC107;
    margin: 10px auto 0;
    border-radius: 2px;
}
*/

.sun-achievement-section {
    padding: 60px 0;
    position: relative;
    overflow: hidden;

    /* Base deep navy */
  /*  background: #0b1630; */
}

/* Multi-layer rich background */
.sun-achievement-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:/* Top-left golden glow */ radial-gradient(ellipse at 10% 0%, rgb(28 183 83 / 35%) 0%, #0000001f 50%),
     /* Top-right deep blue */ radial-gradient(ellipse at 90% 0%, rgb(0 78 255 / 60%) 0%, transparent 55%),
      /* Center subtle gold shimmer */ radial-gradient(ellipse at 50% 50%, rgba(180, 140, 20, 0.10) 0%, transparent 65%),
       /* Bottom-left navy depth */ radial-gradient(ellipse at 5% 100%, rgb(0 41 225 / 73%) 0%, transparent 50%),
        /* Bottom-right warm gold accent */ radial-gradient(ellipse at 95% 100%, rgba(200, 155, 30, 0.18) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Diagonal gold streak overlay */
.sun-achievement-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, 0.04)  0%,
            transparent               30%,
            rgba(212, 175, 55, 0.06)  50%,
            transparent               70%,
            rgba(212, 175, 55, 0.04) 100%
        );
    pointer-events: none;
    z-index: 0;
}

/* Floating gold dust particles — pure CSS */
.sun-achievement-section .gold-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.5);
    animation: floatUp 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.sun-achievement-section .gold-particle:nth-child(1) { width:4px;  height:4px;  left:10%;  top:80%; animation-delay:0s;   animation-duration:9s;  }
.sun-achievement-section .gold-particle:nth-child(2) { width:3px;  height:3px;  left:25%;  top:90%; animation-delay:1.5s; animation-duration:7s;  }
.sun-achievement-section .gold-particle:nth-child(3) { width:5px;  height:5px;  left:50%;  top:85%; animation-delay:3s;   animation-duration:11s; }
.sun-achievement-section .gold-particle:nth-child(4) { width:3px;  height:3px;  left:70%;  top:75%; animation-delay:2s;   animation-duration:8s;  }
.sun-achievement-section .gold-particle:nth-child(5) { width:4px;  height:4px;  left:88%;  top:88%; animation-delay:4s;   animation-duration:10s; }
.sun-achievement-section .gold-particle:nth-child(6) { width:2px;  height:2px;  left:38%;  top:92%; animation-delay:0.8s; animation-duration:6s;  }

@keyframes floatUp {
    0%   { transform: translateY(0)   scale(1);   opacity: 0;   }
    20%  { opacity: 0.8; }
    80%  { opacity: 0.4; }
    100% { transform: translateY(-280px) scale(0.5); opacity: 0; }
}

/* Subtle horizontal gold shimmer line at top */
.sun-achievement-section .gold-line-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(212, 175, 55, 0.6) 30%,
        rgba(255, 220, 80, 0.9) 50%,
        rgba(212, 175, 55, 0.6) 70%,
        transparent 100%
    );
    z-index: 2;
}

.sun-achievement-section .container,
.sun-achievement-section .row {
    position: relative;
    z-index: 1;
}

/* ===================================================
   SECTION TITLE — gold accent update
   =================================================== */
.sun-section-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 40px;
    text-shadow: 0 2px 12px rgba(212,175,55,0.25);
}
.sun-section-title::after {
    content: '';
    display: block;
    width: 80px; height: 3px;
    background: linear-gradient(to right, #b8860b, #FFD700, #b8860b);
    margin: 12px auto 0;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255,215,0,0.4);
}

/* ===================================================
   CARD BASE — FROSTED GLASS
   =================================================== */
.sun-card {
    border-radius: 16px;
    overflow: visible !important;   /* ← IMPORTANT: pehle hidden tha */
    position: relative;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 24px;
}
/*
.sun-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 20px 50px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.2);
}
*/
.sun-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.55);
}


/* Glass inner overlay */
.sun-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    pointer-events: none;
    z-index: 1;
}

/* ===================================================
   CARD 1 — BIRTHDAY (warm pink/rose theme)
   =================================================== */
/*
.birthday-card {
    background:
        linear-gradient(135deg,
            rgba(255, 80, 120, 0.55) 0%,
            rgba(255, 140, 60, 0.45) 50%,
            rgba(200, 40, 90, 0.50) 100%),
        url('images/birthday_bg.jpg') center/cover no-repeat;
}

.birthday-card.no-img {
    background: linear-gradient(135deg,
        rgba(255, 80, 120, 0.75) 0%,
        rgba(255, 160, 60, 0.65) 100%);
}
*/
/* ===================================================
   CARD 2 — STUDENT OF WEEK (cool blue/teal theme)
   =================================================== */
   /*
.sow-card {
    background:
        linear-gradient(135deg,
            rgba(30, 100, 220, 0.55) 0%,
            rgba(0, 200, 200, 0.45) 50%,
            rgba(20, 60, 160, 0.55) 100%),
        url('images/star_bg.jpg') center/cover no-repeat;
}
.sow-card.no-img {
    background: linear-gradient(135deg,
        rgba(30, 100, 220, 0.80) 0%,
        rgba(0, 200, 200, 0.70) 100%);
}
*/
/* ===================================================
   CARD 3 — TOPPERS (golden/amber trophy theme)
   =================================================== */
   /*
.topper-card {
    background:
        linear-gradient(135deg,
            rgba(180, 120, 0, 0.60) 0%,
            rgba(255, 200, 0, 0.45) 50%,
            rgba(140, 80, 0, 0.60) 100%),
        url('images/trophy_bg.jpg') center/cover no-repeat;
}
.topper-card.no-img {
    background: linear-gradient(135deg,
        rgba(200, 140, 0, 0.85) 0%,
        rgba(255, 210, 50, 0.75) 100%);
}
*/
/* ===================================================
   CARD HEADER
   =================================================== */
   /*
.sun-header {
    padding: 16px 20px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 16px 16px 0 0;   
    flex-shrink: 0;
}

.birthday-card .sun-header {
    border-bottom: 2px solid rgba(255,180,180,0.45);
    background: rgba(200, 40, 90, 0.35);
}
.sow-card .sun-header {
    border-bottom: 2px solid rgba(100,220,255,0.45);
    background: rgba(20, 60, 160, 0.35);
}
.topper-card .sun-header {
    border-bottom: 2px solid rgba(255,220,80,0.45);
    background: rgba(140, 80, 0, 0.35);
}

.sun-header .head-icon {
    font-size: 1.4rem;
    line-height: 1;
}
*/
/* ===================================================
   SCROLL CONTAINER
   =================================================== */
/*
.sun-scroll {
    max-height: 380px;
    overflow: hidden;
    padding: 16px 12px;
    position: relative;
    z-index: 2;
    /* Auto-scroll animation */
    /*display: flex;
    flex-direction: column;
    gap: 12px;
    animation: scrollUp 18s linear infinite;
}*/
/*
.sun-scroll {
    height: 340px;         
    overflow: hidden;       
    padding: 10px 12px 12px;
    position: relative;
    z-index: 2;
    border-radius: 0 0 16px 16px; 

   
    animation: none !important;
    transform: none !important;
    display: block;       
}

.sun-scroll::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 30px;
    z-index: 10;
    pointer-events: none;
    border-radius: 0;
}

.sun-scroll.reverse {
    animation: scrollDown 18s linear infinite;
}
.sun-scroll:hover {
    animation-play-state: paused;
    overflow-y: auto;
}

@keyframes scrollUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
@keyframes scrollDown {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}
*/
/* ===================================================
   STUDENT ITEM CARD
   =================================================== */
/*
.sun-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 10px 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s;
    flex-shrink: 0;
}
*/
/*
.sun-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 10px 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s;
    margin-bottom: 10px;   
}

.sun-item:last-child { margin-bottom: 0; }
.sun-item:hover { background: rgba(255,255,255,0.20); }

.sun-item:hover {
    background: rgba(255,255,255,0.18);
}

.sun-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    flex-shrink: 0;
    background: rgba(255,255,255,0.1);
}

.sun-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    line-height: 1.3;
}
.sun-class {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.72);
    margin-top: 2px;
    letter-spacing: 0.5px;
}


.birthday-card .sun-class {
    color: rgba(255, 220, 220, 0.85);
}

.topper-badge {
    margin-left: auto;
    background: rgba(255,220,0,0.25);
    border: 1px solid rgba(255,220,0,0.45);
    color: #FFE066;
    font-size: 0.70rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}



.birthday-card  .sun-scroll::before { background: linear-gradient(to bottom, rgba(160,40,70,0.7), transparent); }
.sow-card       .sun-scroll::before { background: linear-gradient(to bottom, rgba(20,60,160,0.7), transparent); }
.topper-card    .sun-scroll::before { background: linear-gradient(to bottom, rgba(120,70,0,0.7), transparent); }

.sun-scroll::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 30px;
    z-index: 10;
    pointer-events: none;
    border-radius: 0 0 16px 16px;
}
.birthday-card  .sun-scroll::after { background: linear-gradient(to top, rgba(160,40,70,0.7), transparent); }
.sow-card       .sun-scroll::after { background: linear-gradient(to top, rgba(20,60,160,0.7), transparent); }
.topper-card    .sun-scroll::after { background: linear-gradient(to top, rgba(120,70,0,0.7), transparent); }
*/
/* ===================================================
   RESPONSIVE
   =================================================== */
   /*
@media (max-width: 768px) {
    .sun-achievement-section { padding: 40px 0; }
    .sun-card { margin-bottom: 20px; }
    .sun-scroll { max-height: 280px; }
}
*/




.card-section {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: nowrap;  
}

.custom-card {
   /* background: linear-gradient(135deg, #541700, #cefffe); */
    color: #fff;
    padding: 20px;
    border-radius: 20px;
    width: 320px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.custom-card h3 
{
    color:#000000 !important;
    margin-bottom: 15px;
    font-weight: 600;
}

.card-body {
    display: flex;
    overflow-x: auto;
    gap: 15px;
}

.card-item {
    min-width: 200px;
}

.card-img {
    width: 130px;
    height: 130px;
    border-radius: 15px;
    object-fit: cover;
    border: 4px solid #fff;
    margin-left: 23px;
}

.marks {
    color: #ffd700;
    font-weight: bold;
}

.wish {
    font-size: 13px;
}

.no-data {
    color: #302f2f;
    font-size: 14px;
}


.topper-wrapper {
    display: flex;
    overflow: hidden;
    gap: 20px;
    padding: 10px;
}

.card-item {
    min-width: 200px;
    background: #133572;
    color: #fff;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
}

.card-img {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    border: 3px solid #fff;
}

.birthday-wrapper {
    display: flex;
    overflow: hidden;
    gap: 20px;
    padding: 10px;
}


@media (max-width: 768px) {
    .card-section {
        flex-wrap: wrap;  /* mobile में नीचे आना सही है */
    }
}

/**======== Toppers Style END =============**/