/* =========================================
   GLOBAL
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial,sans-serif;
    background:#001f4d;
    color:#ffffff;
    overflow-x:hidden;
}

.container{
    width:92%;
    margin:auto;
}



/* =========================================
   TOPBAR
========================================= */

.topbar{
    background:linear-gradient(
        90deg,
        #ffb347,
        #ff8c00
    );
    padding:12px 0;
}

.topbar-container{
    width:92%;
    margin:auto;
    display:flex;
    justify-content:flex-end;
}

.top-links{
    display:flex;
    gap:25px;
}

.top-links a{
    text-decoration:none;
    color:white;
    font-size:15px;
    font-weight:600;
}

.top-links a:hover{
    color:#001f4d;
}



/* =========================================
   MAIN HEADER
========================================= */

.main-header{
    background:white;
    padding:10px 0;
    box-shadow:0 2px 15px rgba(0,0,0,0.08);
}

.main-header-container{
    width:92%;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}



/* =========================================
   LOGO SECTION
========================================= */

.logo-section{
    display:flex;
    align-items:center;
    gap:18px;
}

.university-logo{
    width:70px;
    height:70px;
    object-fit:contain;
}

.university-title h1{
    font-size:24px;
    color:#001f4d;
    margin-bottom:5px;
}

.university-title h2{
    font-size:16px;
    color:#444;
    font-weight:500;
}



/* =========================================
   NAVBAR
========================================= */

.navbar{
    background:#002b80;
    padding:10px 0;
    box-shadow:0 4px 15px rgba(0,0,0,0.25);
}

.navbar-container{
    width:92%;
    margin:auto;
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
}

.navbar-container a{
    text-decoration:none;
    color:white;
    font-size:15px;
    font-weight:600;
    transition:0.3s;
}

.navbar-container a:hover{
    color:#ffb347;
}



/* =========================================
   DROPDOWN MENU
========================================= */

.dropdown{
    position:relative;
    display:inline-block;
}

.dropdown-btn{
    background:none;
    border:none;
    color:white;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}

.dropdown-btn:hover{
    color:#ffb347;
}

.dropdown-content{
    display:none;
    position:absolute;
    top:38px;
    left:0;
    min-width:280px;
    background:white;
    border-radius:12px;
    overflow:hidden;
    z-index:9999;
    box-shadow:0 12px 30px rgba(0,0,0,0.25);
}

.dropdown-content a{
    display:block;
    padding:15px 20px;
    color:#001f4d !important;
    text-decoration:none;
    font-weight:600;
    border-bottom:1px solid rgba(0,0,0,0.06);
}

.dropdown-content a:hover{
    background:linear-gradient(
        90deg,
        #ff9a00,
        #ff6a00
    );
    color:white !important;
}



/* =========================================
   HERO SECTION
========================================= */

.hero-section{
    width:100%;
    height:520px;
    overflow:hidden;
    position:relative;
    background:#001f4d;
}

/* =========================================
   HERO SLIDER
========================================= */

.hero-slider{

    position:relative;

    width:100%;

    height:520px;
}


/* =========================================
   HERO SLIDE
========================================= */

.hero-slide{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:520px;

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:space-between;

    padding:50px 6%;

    gap:30px;

    opacity:0;

    visibility:hidden;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


/* =========================================
   ACTIVE SLIDE
========================================= */

.hero-slide.active{

    opacity:1;

    visibility:visible;

    z-index:10;
}


/* =========================================
   HERO LEFT
========================================= */

.hero-left{
    width:40%;
}

.hero-left h1{
    font-size:52px;
    line-height:1.2;
    margin-bottom:20px;
    color:white;
}

.hero-left p{

    font-size:20px;

    line-height:1.8;

    color:rgba(255,255,255,0.92);

    margin-bottom:30px;

    max-width:100%;
}

.hero-left{

    width:42%;
}

.hero-right{

    width:52%;

    display:flex;

    justify-content:flex-end;
}











/* =========================================
   HERO BUTTON
========================================= */

.hero-btn{
    display:inline-block;
    padding:14px 30px;
    background:linear-gradient(
        90deg,
        #ffb347,
        #ff8c00
    );
    color:white;
    text-decoration:none;
    border-radius:40px;
    font-weight:bold;
    transition:0.3s;
}

.hero-btn:hover{
    transform:translateY(-3px);
}



/* =========================================
   HERO RIGHT
========================================= */

.hero-right{
    width:55%;
}

.hero-right img{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:22px;
    box-shadow:0 18px 45px rgba(0,0,0,0.4);
}



/* =========================================
   HERO INDICATORS
========================================= */

.hero-indicators{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
}

.indicator{
    width:14px;
    height:14px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
}

.indicator.active{
    background:#ffb347;
    transform:scale(1.2);
}



/* =========================================
   SCROLLING NOTICE
========================================= */

.scrolling-notice-section{
    width:100%;
    background:linear-gradient(
        90deg,
        #ffb347,
        #ff8c00
    );
    padding:14px 0;
}

.scrolling-notice-wrapper{
    width:92%;
    margin:auto;
    display:flex;
    align-items:center;
    gap:20px;
}

.notice-label{
    background:#001f4d;
    color:white;
    padding:10px 18px;
    border-radius:40px;
    font-weight:bold;
}

.scrolling-notice-wrapper marquee{
    color:#001f4d;
    font-size:17px;
    font-weight:600;
}

.scrolling-notice-wrapper marquee a{
    color:#001f4d;
    font-weight:bold;
}



/* =========================================
   MAIN CONTENT
========================================= */

.main-content-area{
    padding:20px 0 60px;
}

.content-layout{
    display:flex;
    gap:30px;
    align-items:flex-start;
}

.left-column{
    width:70%;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.right-column{
    width:30%;
    display:flex;
    flex-direction:column;
    gap:25px;
}



/* =========================================
   CARDS
========================================= */

.content-card,
.sidebar-card{
    background:rgba(255,255,255,0.06);
    padding:35px;
    border-radius:22px;
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
    backdrop-filter:blur(10px);
}

.content-card h2,
.sidebar-card h2{
    color:#ffb347;
    margin-bottom:20px;
}



/* =========================================
   WELCOME SECTION
========================================= */

.welcome-intro-box{
    background:rgba(255,255,255,0.05);
    border-left:5px solid #ffb347;
    padding:25px;
    border-radius:16px;
    margin-bottom:25px;
}

.welcome-text{
    line-height:1.9;
    font-size:17px;
    color:rgba(255,255,255,0.92);
    text-align:justify;
}

.vision-box,
.mission-box{
    background:rgba(255,255,255,0.05);
    border-left:5px solid #ffb347;
    padding:22px;
    border-radius:14px;
    margin-top:22px;
}

.vision-box h3,
.mission-box h3{
    color:#ffb347;
    margin-bottom:12px;
}

.mission-box ul{
    padding-left:20px;
}

.mission-box li{
    margin-bottom:14px;
    line-height:1.8;
}



/* =========================================
   NOTICE SECTION
========================================= */

.notice-item{
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,0.12);
}

.notice-item h4{
    margin-bottom:8px;
}



/* =========================================
   RADIO SECTION
========================================= */

.radio-iframe{
    width:100%;
    height:470px;
    border:none;
    border-radius:18px;
}



/* =========================================
   STUDY TABS
========================================= */

.study-tabs{
    display:flex;
    gap:10px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.study-tab{
    flex:1;
    border:none;
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,0.08);
    color:white;
    cursor:pointer;
    font-weight:bold;
}

.study-tab.active{
    background:linear-gradient(
        90deg,
        #ff9a00,
        #ff6a00
    );
}

.study-tab-content{
    display:none;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.study-tab-content.active{
    display:grid;
}



/* =========================================
   COURSE BUTTONS
========================================= */

.course-btn{
    display:block;
    text-decoration:none;
    padding:14px 16px;
    border-radius:14px;
    color:white;
    font-size:14px;
    font-weight:600;
    line-height:1.5;
}

.course-btn.ug{
    background:linear-gradient(
        135deg,
        #0072ff,
        #00c6ff
    );
}

.course-btn.pg{
    background:linear-gradient(
        135deg,
        #7b1fa2,
        #ba68c8
    );
}

.course-btn.phd{
    background:linear-gradient(
        135deg,
        #11998e,
        #38ef7d
    );
}



/* =========================================
   QUICK LINKS
========================================= */

.quick-links-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.quick-link-box{
    text-decoration:none;
    color:white;
    padding:18px 12px;
    border-radius:18px;
    text-align:center;
    font-weight:bold;
}

.registration{
    background:linear-gradient(135deg,#0072ff,#00c6ff);
}

.examination{
    background:linear-gradient(135deg,#ff512f,#dd2476);
}

.alumni{
    background:linear-gradient(135deg,#11998e,#38ef7d);
}

.ic{
    background:linear-gradient(135deg,#7b1fa2,#ba68c8);
}

.transcript{
    background:linear-gradient(135deg,#f7971e,#ffd200);
}

.migration{
    background:linear-gradient(135deg,#fc466b,#3f5efb);
}

.duplicate{
    background:linear-gradient(135deg,#ee0979,#ff6a00);
}



/* =========================================
   SMRITI CHATBOT
========================================= */

.smriti-chatbot-container{
    position:fixed;
    right:25px;
    bottom:25px;
    width:360px;
    z-index:99999;
    border-radius:20px;
    overflow:hidden;
}

.smriti-header{
    background:linear-gradient(
        90deg,
        #ff9a00,
        #ff6a00
    );
    color:white;
    padding:16px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:bold;
}

.smriti-body{
    background:rgba(10,20,50,0.96);
    padding:18px;
    border:2px solid #ffb347;
}

.smriti-message{
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:12px;
    line-height:1.7;
}

.smriti-message.bot{
    background:rgba(255,179,71,0.15);
}

.smriti-message.user{
    background:rgba(255,255,255,0.1);
    text-align:right;
}

.smriti-input-area{
    display:flex;
    gap:10px;
}

.smriti-input-area input{
    flex:1;
    padding:14px;
    border:none;
    border-radius:10px;
}

.smriti-input-area button{
    background:#ff8c00;
    color:white;
    border:none;
    padding:0 18px;
    border-radius:10px;
    cursor:pointer;
}

.smriti-copyright{
    margin-top:16px;
    font-size:11px;
    line-height:1.6;
    color:rgba(255,255,255,0.65);
    text-align:center;
}



/* =========================================
   STATS SECTION
========================================= */

.stats-section{
    padding:70px 0;
    background:linear-gradient(
        135deg,
        #001f4d,
        #003380
    );
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.stat-card{
    background:rgba(255,255,255,0.06);
    border-radius:24px;
    padding:40px 20px;
    text-align:center;
}

.stat-number{
    font-size:52px;
    font-weight:bold;
    color:#ffb347;
    margin-bottom:14px;
}

.stat-title{
    color:white;
    font-size:18px;
}



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

@media(max-width:992px){

    .content-layout{
        flex-direction:column;
    }

    .left-column,
    .right-column{
        width:100%;
    }

    .hero-slide{
        flex-direction:column;
        justify-content:center;
        gap:30px;
        text-align:center;
    }

    .hero-left,
    .hero-right{
        width:100%;
    }

    .hero-left h1{
        font-size:38px;
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){

    .quick-links-grid{
        grid-template-columns:1fr;
    }

    .study-tab-content{
        grid-template-columns:1fr;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .smriti-chatbot-container{
        width:92%;
        right:4%;
        bottom:12px;
    }
}




.hero-left{

    width:40%;

    min-width:40%;

    max-width:40%;

    z-index:10;

    padding-right:40px;
}

.hero-right{

    width:55%;

    min-width:55%;

    max-width:55%;

    display:flex;

    justify-content:flex-end;

    align-items:center;
}

.hero-right img{

    width:100%;

    max-width:700px;

    height:420px;

    object-fit:cover;

    border-radius:24px;

    display:block;

    box-shadow:
        0 20px 50px rgba(0,0,0,0.4);
}


/* =========================================
   SMRITI HEADER
========================================= */

.smriti-header{

    background:linear-gradient(
        135deg,
        #ff9800,
        #ff6f00
    );

    padding:14px 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-radius:22px 22px 0 0;
}



/* =========================================
   HEADER LEFT
========================================= */

.smriti-header-left{

    display:flex;

    align-items:center;

    gap:12px;
}



/* =========================================
   AVATAR
========================================= */

/* =========================================
   SMRITI AVATAR
========================================= */

/* =========================================
   SMRITI AVATAR
========================================= */

.smriti-avatar{

    width:42px;

    height:42px;

    min-width:42px;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.25);
}



/* =========================================
   AVATAR IMAGE
========================================= */

.smriti-avatar img{

    width:26px;

    height:26px;

    object-fit:contain;

    display:block;
}


/* =========================================
   TITLE AREA
========================================= */

.smriti-title-area h3{

    margin:0;

    font-size:15px;

    color:white;

    font-weight:700;

    line-height:1.1;
}

.smriti-title-area span{

    font-size:11px;

    color:rgba(255,255,255,0.85);

    display:block;

    margin-top:2px;
}



/* =========================================
   TOGGLE BUTTON
========================================= */

.smriti-toggle{

    background:none;

    border:none;

    color:white;

    font-size:24px;

    cursor:pointer;

    font-weight:bold;
}



/* =========================================
   FORCE FIX FOR CHATBOT ICON
========================================= */

.smriti-avatar{

    width:42px !important;

    height:42px !important;

    min-width:42px !important;

    border-radius:50% !important;

    background:white !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    overflow:hidden !important;

    flex-shrink:0 !important;
}



.smriti-avatar img{

    width:24px !important;

    height:24px !important;

    max-width:24px !important;

    max-height:24px !important;

    object-fit:contain !important;

    display:block !important;
}




/* =========================================
   FORMER NAME LINE
========================================= */

.former-name{

    margin-top:4px;

    font-size:13px;

    color:#555;

    font-style:italic;

    letter-spacing:0.3px;
}