/* =========================================
      VEDIC MATHEMATICS LEARNING PORTAL
      PROFESSIONAL STYLE CSS
      PART 1/4
========================================= */


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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{

    background:#07111F;
    color:white;
    overflow-x:hidden;

}


a{
    text-decoration:none;
    color:inherit;
    transition:.3s;
}


button{

    cursor:pointer;
    transition:.3s;

}


img{

    max-width:100%;

}




/* ================= PAGE BACKGROUND ================= */


.dashboard-page,
.login-page,
.register-page,
.sutra-page,
.practice-page,
.quiz-page,
.ai-page{


    min-height:100vh;


    background:

    radial-gradient(
    circle at top left,
    #2563eb55,
    transparent 35%
    ),


    radial-gradient(
    circle at bottom right,
    #9333ea55,
    transparent 35%
    ),


    linear-gradient(
    135deg,
    #020617,
    #0f172a,
    #1e3a8a
    );


}






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


.dashboard-nav{


    width:100%;


    display:flex;


    justify-content:space-between;


    align-items:center;


    padding:18px 50px;



    background:

    rgba(255,255,255,.08);



    backdrop-filter:blur(20px);



    position:sticky;



    top:0;



    z-index:1000;



    border-bottom:

    1px solid rgba(255,255,255,.15);


}



.logo{


    font-size:30px;


    font-weight:700;


    color:white;


}



.nav-links{


    display:flex;


    gap:25px;


    list-style:none;


}



.nav-links a{
    color: white;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 30px;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    transition: all 0.3s ease;
    display: inline-block;
    border: none;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.nav-links a:hover{
    background: linear-gradient(135deg, #4338ca, #3730a3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}





/* ================= COMMON BUTTON ================= */


.btn,
.login-submit,
.register-submit,
.solve-btn,
.back-btn,
.dashboard-btn{


    display:inline-block;


    padding:14px 35px;


    border:none;


    border-radius:40px;


    color:white;


    font-size:16px;


    font-weight:700;


    background:


    linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
    );


}



.btn:hover,
.login-submit:hover,
.register-submit:hover,
.solve-btn:hover,
.back-btn:hover{


    transform:translateY(-4px);


    box-shadow:

    0 10px 25px rgba(37,99,235,.5);


}






/* ================= LOGIN REGISTER ================= */


.login-wrapper,
.register-wrapper{


    width:100%;


    min-height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;


}



.login-card,
.register-card{


    width:420px;


    padding:45px;


    border-radius:30px;


    background:


    rgba(255,255,255,.08);



    backdrop-filter:blur(20px);



    border:

    1px solid rgba(255,255,255,.15);



    box-shadow:

    0 20px 50px rgba(0,0,0,.4);



    text-align:center;
}

.img-circle-wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

/* Ye rotating ring hai - sirf ye ghumegi */
.img-circle-wrapper::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  border: 4px dashed transparent;
  border-top-color: #7c3aed;
  border-right-color: #3b82f6;
  animation: spin-ring 4s linear infinite;
}
@keyframes spin-ring {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.circle-img {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ccc;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 
              0 0 50px rgba(255, 255, 255, 0.3);
}


.logo-circle{


    width:90px;


    height:90px;


    margin:auto;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:45px;


    background:


    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );


}



.login-card h2,
.register-card h2{


    font-size:35px;


    margin:20px 0;


}



.subtitle{


    color:#cbd5e1;


    margin-bottom:25px;


}




/* ================= FLASH MESSAGE ================= */


.flash-message{


    width:90%;


    max-width:500px;


    margin:20px auto;


    padding:15px;


    border-radius:15px;


    text-align:center;


    background:#14532d;


    color:white;


    font-weight:600;


}





/* ================= DASHBOARD ================= */


.dashboard-container{
    width:90%;
    max-width:1300px;
    margin:auto;
    padding:60px 0;
}
.student-profile{
    padding:40px;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    text-align:center;
    margin-bottom:50px;

}

.student-name{
    font-size:40px;
}

.student-text{

    color:#cbd5e1;

    font-size:18px;

}

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

.dashboard-cards{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
    margin-top:20px;

}
.dash-card{


    padding:35px;

    border-radius:25px;


    text-align:center;


    background:


    rgba(255,255,255,.08);



    backdrop-filter:blur(20px);



    border:

    1px solid rgba(255,255,255,.15);



    transition:.4s;


}



.dash-card:hover{


    transform:translateY(-10px);


    box-shadow:

    0 20px 45px rgba(0,0,0,.4);


}



.dash-card h2{

    font-size:60px;

}



.dash-card h3{


    color:#38bdf8;
    font-size:24px;


}



.dash-card p{


    color:#cbd5e1;


    line-height:1.7;


}



.dash-card a{


    display:inline-block;


    margin-top:20px;


    padding:12px 30px;


    border-radius:30px;


    background:


    linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
    );


    color:white;


}
/* ===== TOP NAVBAR ===== */
.dashboard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #12132a;
    padding: 14px 30px;
    color: #fff;
}

.dashboard-nav .logo {
    font-weight: 700;
    font-size: 20px;
}

#searchInput {
    width: 272px !important;
    height: 36px !important;
    font-size: 0.85rem !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    border: none !important;
    outline: none !important;
    background: #1e1f3b;
    color: #cfd0e6;
}

.nav-search input {
    width: 320px;
    padding: 8px 14px;
    border-radius: 20px;
    border: none;
    outline: none;
    background: #1e1f3b;
    color: #cfd0e6;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.view-profile-link {
    color: #cfd0e6;
    text-decoration: none;
    font-size: 14px;
}

.nav-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

/* ===== LAYOUT ===== */
.dashboard-layout {
    display: grid;
    grid-template-columns: 220px 1fr 280px;
    gap: 24px;
    background: linear-gradient(135deg, #14152e, #1b1c3d);
    min-height: 100vh;
    padding: 24px;
}

/* ===== SIDEBAR ===== */
.dashboard-sidebar {
    background: #181933;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li a {
    display: block;
    color: #cfd0e6;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: 14px;
    transition: 0.2s;
}

.sidebar-menu li a:hover,
.sidebar-menu li.active a {
    background: #3730a3;
    color: #fff;
}

.sidebar-mascot img {
    width: 100%;
    border-radius: 12px;
    margin-top: 20px;
    opacity: 0.9;
}

/* ===== WELCOME CARD ===== */
.welcome-card {
    background: linear-gradient(135deg, #1b1c3d, #2a2b55);
    border-radius: 20px;
    text-align: center;
    padding: 30px 20px;
    color: #fff;
    margin-bottom: 24px;
}

.profile-avatar-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.welcome-avatar {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #6366f1;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}

.student-name {
    font-size: 26px;
    margin: 0 0 8px;
}

.student-text {
    color: #a5a6c9;
    font-size: 14px;
}


/* images home page courasal */
.gallery-sub{ color:#6b665f; max-width:480px; margin:0 auto 2.5rem; text-align:center; }
.gallery-carousel{ border-radius:26px; overflow:hidden; box-shadow:0 24px 50px rgba(27,27,58,.16); }
.gallery-slide{ display:flex; flex-wrap:wrap; min-height:380px; background:#1B1B3A; }
.gallery-media{ flex:1 1 55%; position:relative; min-height:380px; background:linear-gradient(135deg,#2B2A5C,#1B1B3A); overflow:hidden; }
.gallery-media img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform 6s ease; }
.carousel-item.active .gallery-media img{ transform:scale(1.12); }
.gallery-media-fallback{ display:none; position:absolute; inset:0; align-items:center; justify-content:center; font-size:4.5rem; color:rgba(245,167,66,.35); }
.gallery-text{ flex:1 1 40%; padding:2.6rem 2.4rem; display:flex; flex-direction:column; justify-content:center; color:#FBF6EC; }
.gallery-count{ font-size:.85rem; letter-spacing:.08em; margin-bottom:.6rem; display:block; color:#F5A742; }
.gallery-text h3{ color:#fff; font-size:1.6rem; margin-bottom:.8rem; }
.gallery-text p{ color:rgba(251,246,236,.78); line-height:1.7; }
.gallery-indicators{ position:static; margin:0 0 -6px; }
.gallery-indicators [data-bs-target]{ background-color:#C9A227; width:9px; height:9px; border-radius:50%; opacity:.5; }
.gallery-indicators .active{ opacity:1; }
.gallery-thumbs{ display:flex; gap:.8rem; justify-content:center; margin-top:1.6rem; flex-wrap:wrap; }
.gallery-thumb{ width:52px; height:52px; border-radius:14px; border:1px solid rgba(201,162,39,.35); background:#fff; color:#8B2635; font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition:all .25s ease; }
.gallery-thumb:hover{ border-color:#E8871E; transform:translateY(-3px); }
.gallery-thumb.active{ background:linear-gradient(135deg,#E8871E,#8B2635); color:#fff; border-color:transparent; }
@media (max-width:767px){ .gallery-slide{ flex-direction:column; } .gallery-media{ min-height:240px; } }



/* ===== CARDS GRID ===== */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.dash-card {
    background: #1e1f42;
    border-radius: 16px;
    padding: 20px;
    color: #fff;
    text-align: center;
    transition: transform 0.2s;
}

.dash-card:hover {
    transform: translateY(-4px);
}

.dash-card h2 {
    font-size: 28px;
    margin-bottom: 6px;
}

.dash-card h3 {
    margin: 6px 0;
    font-size: 16px;
}

.dash-card p {
    font-size: 12px;
    color: #a5a6c9;
    margin-bottom: 14px;
}

.dash-card .btn {
    display: inline-block;
    background: #4338ca;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    text-decoration: none;
}

/* ===== RIGHT PANEL ===== */
.dashboard-right {
    background: #181933;
    border-radius: 16px;
    padding: 24px 18px;
    color: #fff;
}

.right-title {
    margin-bottom: 20px;
    font-size: 16px;
}

.progress-ring-wrapper {
    position: relative;
    width: 160px;
    margin: 0 auto 24px;
}

.progress-ring {
    transform: rotate(-90deg);
}

.ring-bg {
    fill: none;
    stroke: #2a2b55;
    stroke-width: 12;
}

.ring-fill {
    fill: none;
    stroke: #6366f1;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 440;
}

.progress-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ring-label {
    display: block;
    font-size: 11px;
    color: #a5a6c9;
}

.ring-percent {
    font-size: 22px;
    font-weight: 700;
}

.progress-stats {
    list-style: none;
    padding: 0;
    margin: 0;
}

.progress-stats li {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid #2a2b55;
    color: #cfd0e6;
}

.progress-stats li span {
    font-weight: 600;
    color: #fff;
}




/* =========================================
              SUTRAS PAGE
========================================= */


.sutra-container{


    width:90%;


    max-width:1300px;


    margin:auto;


    padding:50px 0;


}



.sutra-header{


    background:


    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );



    padding:45px;


    border-radius:30px;


    text-align:center;


    margin-bottom:35px;


    box-shadow:

    0 20px 40px rgba(0,0,0,.35);


}



.sutra-header h1{


    font-size:42px;


}



.sutra-header p{


    color:#e0e7ff;


    font-size:18px;


}





/* SEARCH */


.search-box{


    margin-bottom:35px;


}



#searchInput{


    width:100%;


    height:60px;


    border:none;


    outline:none;


    padding:0 25px;


    border-radius:40px;


    font-size:17px;


}






/* SUTRA GRID */


#sutraContainer{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}


/* SUTRA CARD */


.sutra-card{


    padding:30px 20px;


    border-radius:25px;


    text-align:center;


    background:


    rgba(255,255,255,.08);



    backdrop-filter:blur(20px);



    border:

    1px solid rgba(255,255,255,.15);



    transition:.4s;


    position:relative;


    overflow:hidden;


}



.sutra-card::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:5px;


    background:


    linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
    );


}



.sutra-card:hover{


    transform:translateY(-12px);


    box-shadow:

    0 20px 45px rgba(0,0,0,.4);


}





.sutra-icon{


    width:75px;


    height:75px;


    margin:0 auto 20px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:50%;


    font-size:38px;


    background:


    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );


}



.sutra-card h5{


    color:white;


    font-size:18px;


    min-height:55px;


}



.sutra-card p{


    color:#cbd5e1;


    line-height:1.6;


    min-height:55px;


}



.sutra-card a{


    display:inline-block;


    margin-top:20px;


    padding:10px 25px;


    border-radius:30px;


    background:


    linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
    );


    color:white;


    font-weight:600;


}



.sutra-card a:hover{


    transform:scale(1.08);


}
.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 30px;
}






/* =========================================
          SUTRA DETAIL PAGE
========================================= */


.sutra-detail-container{


    width:90%;


    max-width:950px;


    margin:50px auto;


}



.sutra-detail-card{


    padding:45px;


    border-radius:30px;


    background:


    rgba(255,255,255,.08);



    backdrop-filter:blur(20px);



    border:

    1px solid rgba(255,255,255,.15);



    box-shadow:

    0 20px 50px rgba(0,0,0,.4);


}




.sutra-icon-large{


    width:100px;


    height:100px;


    margin:auto;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:50%;


    font-size:45px;


    background:


    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );


}



.sutra-detail-card h1{


    text-align:center;


    margin:25px 0;


    font-size:40px;


}



.sutra-detail-card h3{


    color:#38bdf8;


    margin-top:30px;


}



.info-box{
    margin-top: 10px;
    background:#0f172a;
    padding:20px;
    border-radius:15px;
    border-left:5px solid #38bdf8;
    line-height:1.8;
}



.formula-box{


    background:


    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );


    padding:20px;


    border-radius:20px;


    text-align:center;


    font-size:24px;


    font-weight:bold;


}



.example-box{


    background:#14532d;


    padding:20px;


    border-radius:20px;


    font-size:18px;


}
/* =========================================
          PRACTICE SYSTEM
========================================= */


.practice-container{


    width:90%;


    max-width:1000px;


    margin:auto;


    padding:50px 0;


}



.question-box{


    background:


    rgba(255,255,255,.08);



    backdrop-filter:blur(20px);



    border:

    1px solid rgba(255,255,255,.15);



    border-radius:30px;



    padding:40px;



    box-shadow:


    0 20px 45px rgba(0,0,0,.35);


}



.question-box h2,
.question-box h3{


    color:white;


}



#question{


    font-size:35px;


    text-align:center;


    margin:30px 0;


}



.question-box input{


    width:100%;


    height:55px;


    border:none;


    border-radius:15px;


    padding:15px;


    font-size:18px;


}



.question-box button{


    width:100%;


    padding:15px;


    border:none;


    border-radius:30px;


    color:white;


    font-weight:bold;


    background:


    linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
    );


}



.answer-card{


    margin-top:25px;


    padding:30px;


    border-radius:20px;


    background:#002855;


    animation:fadeIn .5s;


}






/* =========================================
              SPEED TEST
========================================= */


.speed-card{


    width:90%;


    max-width:900px;


    margin:50px auto;


    padding:45px;


    border-radius:35px;


    text-align:center;


    background:


    rgba(255,255,255,.08);



    backdrop-filter:blur(20px);



    border:

    1px solid rgba(255,255,255,.15);


}



.speed-card h1{


    font-size:42px;


}



#timer{


    font-size:40px;


    font-weight:bold;


    color:#FFD54F;


}



.speed-card input{


    width:100%;


    height:55px;


    border:none;


    border-radius:15px;


    padding:15px;


    margin:20px 0;


    font-size:18px;


}



.speed-card button{


    padding:14px 35px;


    border:none;


    border-radius:40px;


    color:white;


    font-weight:bold;


    background:


    linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
    );


}



#score,
#count{


    color:#38bdf8;


    font-weight:bold;


}






/* =========================================
              QUIZ PAGE
========================================= */


.quiz-header{


    width:100%;


    padding:20px 50px;


    display:flex;


    justify-content:space-between;


    align-items:center;


    background:


    rgba(255,255,255,.08);



    backdrop-filter:blur(20px);



}



.quiz-logo{


    font-size:32px;


    font-weight:700;


}



.quiz-container{


    width:90%;


    max-width:1200px;


    margin:auto;


    padding:50px 0;


}



.quiz-hero{


    display:flex;


    justify-content:space-between;


    align-items:center;


    padding:40px;


    border-radius:30px;


    background:


    rgba(255,255,255,.08);


    margin-bottom:30px;


}



.quiz-hero h1{


    font-size:42px;


}



.question-count{


    padding:30px 45px;


    border-radius:25px;


    text-align:center;


    background:


    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );


}



.question-count h2{


    font-size:50px;


}






/* QUIZ QUESTION */


.question-card{


    padding:45px;


    border-radius:35px;


    background:


    rgba(255,255,255,.09);



    backdrop-filter:blur(20px);


}



.question-card h2{


    font-size:35px;


    margin:30px 0;


}



.options-container{


    display:grid;


    gap:20px;


}



.option-card{


    padding:22px;


    border-radius:20px;


    background:


    rgba(255,255,255,.08);



    border:

    2px solid rgba(255,255,255,.1);



    font-size:20px;


    transition:.3s;


}



.option-card:hover{


    transform:translateX(10px);


    border-color:#38bdf8;


}



.option-card.active{


    background:


    linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
    );


}





.navigation{

    display:flex;


    justify-content:center;


    gap:25px;


    margin:40px 0;


}



.navigation button{


    padding:15px 40px;


    border:none;


    border-radius:40px;


    background:


    linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
    );


    color:white;


    font-weight:bold;


}






/* =========================================
             QUIZ RESULT
========================================= */


.result-card{


    width:90%;


    max-width:750px;


    margin:50px auto;


    padding:45px;


    text-align:center;


    border-radius:35px;


    background:


    rgba(255,255,255,.10);



    backdrop-filter:blur(20px);


}



.result-icon{


    font-size:80px;


}



.score-circle{


    width:240px;


    height:240px;


    margin:35px auto;


    border-radius:50%;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    background:


    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );


}



.score-circle h1{


    font-size:60px;


}



.result-buttons{


    display:flex;


    justify-content:center;


    gap:25px;


}



.result-buttons button{


    padding:15px 35px;


    border:none;


    border-radius:40px;


    background:


    linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
    );


    color:white;


    font-weight:bold;


}
/* =======================
   SUTRA GRID
======================= */

#sutraContainer{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}

/* 4 Cards in One Row */
.sutra-item{
    width: calc(25% - 20px);
}

/* Card */
.sutra-card{
    height: 100%;
    padding: 30px 20px;
    border-radius: 22px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    border:1px solid rgba(255,255,255,.15);
    transition:.4s;
    text-align:center;
}

.sutra-card:hover{
    transform:translateY(-10px) scale(1.03);
    box-shadow:0 20px 40px rgba(0,0,0,.4);
}

.sutra-icon{
    width:80px;
    height:80px;
    margin:auto;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:42px;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    margin-bottom:18px;
}

.sutra-card h5{
    color:white;
    font-size:18px;
    font-weight:700;
    min-height:55px;
}

.sutra-card p{
    color:#cbd5e1;
    font-size:15px;
}

.sutra-card a{
    display:inline-block;
    margin-top:18px;
    padding:10px 25px;
    border-radius:30px;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:white;
    font-weight:600;
}

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

.sutra-item{
    width:calc(50% - 15px);
}

}

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

.sutra-item{
    width:100%;
}

}




/* ANIMATION */


@keyframes fadeIn{


from{

opacity:0;
transform:scale(.9);

}


to{

opacity:1;
transform:scale(1);

}


}



@keyframes slideUp{


from{

opacity:0;
transform:translateY(30px);

}


to{

opacity:1;
transform:translateY(0);

}


}


.profile-card h1{


    margin:25px 0;


}



.profile-info{


    margin-top:25px;


    background:#020617;


    padding:25px;


    border-radius:20px;


    text-align:left;


}



.profile-info p{


    margin:12px 0;


    color:#cbd5e1;


}







/* =========================================
              CONTACT PAGE
========================================= */


.contact-container{


    width:90%;


    max-width:900px;


    margin:50px auto;


}



.contact-card{


    padding:45px;


    border-radius:30px;


    text-align:center;


    background:


    rgba(255,255,255,.08);



    backdrop-filter:blur(20px);


}



.contact-card h1{


    font-size:40px;


    margin-bottom:20px;


}



.contact-card p{


    color:#cbd5e1;


    font-size:18px;


}







/* =========================================
              404 PAGE
========================================= */


.error-page{


    min-height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;


    text-align:center;


}



.error-page h1{


    font-size:100px;


    color:#38bdf8;


}



.error-page p{


    font-size:25px;


}


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

.dash-card,
.sutra-card,
.question-box,
.speed-card,
.ai-container,
.profile-card,
.contact-card{


    animation:slideUp .7s ease;


}








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


@media(max-width:1100px){


#sutraContainer{


grid-template-columns:repeat(3,1fr);


}


}



@media(max-width:900px){


#sutraContainer{


grid-template-columns:repeat(2,1fr);


}



.quiz-hero{


flex-direction:column;


gap:25px;


}



.dashboard-nav{


padding:15px 25px;


}



.nav-links{


display:none;


}



}



@media(max-width:600px){


#sutraContainer{


grid-template-columns:1fr;


}



.login-card,
.register-card{


width:90%;


padding:30px;


}



.student-name{


font-size:28px;


}



.sutra-header h1{


font-size:30px;


}



.sutra-detail-card{


padding:25px;


}



.sutra-detail-card h1{


font-size:28px;


}



.question-card{


padding:25px;


}



.question-card h2{


font-size:25px;


}



.quiz-header{


padding:15px 20px;


}



.quiz-logo{


font-size:24px;


}



.score-circle{


width:180px;


height:180px;


}



.score-circle h1{


font-size:40px;


}



.ai-container,
.ai-scan-card,
.contact-card,
.profile-card{


padding:25px;


}



}
/* =========================================
        PREMIUM HOME PAGE DESIGN
========================================= */


/* BODY */

body{

    background:
    radial-gradient(circle at top left,#2563eb55,transparent 35%),
    radial-gradient(circle at bottom right,#9333ea55,transparent 35%),
    #020617;

    color:white;

}



/* NAVBAR */

.navbar{

    background:rgba(2,6,23,.75);

    backdrop-filter:blur(20px);

    padding:18px 40px;

    border-bottom:1px solid rgba(255,255,255,.1);

}



.navbar-brand{

    color:white !important;

    font-size:28px;

    font-weight:700;

}



.nav-link{

    color:#cbd5e1 !important;

    margin:0 10px;

    font-weight:600;

}



.nav-link:hover{

    color:#38bdf8 !important;

}





/* LOGIN BUTTON */

.login-btn{

    background:
    linear-gradient(90deg,#2563eb,#7c3aed);

    padding:10px 25px;

    border-radius:30px;

    color:white;

    font-weight:bold;

}







/* HERO SECTION */


.hero{


    min-height:100vh;

    display:flex;

    align-items:center;


    background:

    radial-gradient(circle at right,#7c3aed55,transparent 30%);


}





.badge{


    display:inline-block;

    background:rgba(255,255,255,.1);

    padding:12px 25px;

    border-radius:30px;

    color:#38bdf8;

    margin-bottom:25px;


}





.hero h1{


    font-size:65px;

    font-weight:800;


}



.hero h1 span{


    background:
    linear-gradient(90deg,#38bdf8,#a855f7);


    -webkit-background-clip:text;

    color:transparent;


}





.hero p{


    font-size:20px;

    color:#cbd5e1;

    line-height:1.8;

    max-width:600px;


}





.start-btn{

    display:inline-block;

    margin-top:25px;

    padding: 18px 32px;

    border-radius:40px;

    background:
    linear-gradient(90deg,#2563eb,#7c3aed);

    color:white;

    font-weight:bold;
    align-items:center;

}

.start-btn-sutra{

    display:inline-block;

    margin-top:25px;

    padding: 8px 33px;
    border-radius:40px;

    background:
    linear-gradient(90deg,#2563eb,#7c3aed);

    color:white;

    font-weight:bold;
    margin-left: 47px;

}

.start-btn-practice{
    display:inline-block;
    margin-top:9px;
    padding: 9px 38px;
    border-radius:40px;
    background:
    linear-gradient(90deg,#2563eb,#7c3aed);
    margin-left: 90px;

}
.start-btn-practice-3{
    display:inline-block;
    margin-top:9px;
    padding: 9px 38px;
    border-radius:40px;
    background:
    linear-gradient(90deg,#2563eb,#7c3aed);
    margin-left: 109px;

}


.demo-btn{


    display:inline-block;

    margin-left:15px;

    margin-top:25px;

    padding:15px 35px;

    border-radius:40px;

    border:1px solid #38bdf8;

    color:#38bdf8;

}





/* COMMON SECTION */


.section{


    padding:80px 0;


}





.section h2{


    text-align:center;

    font-size:42px;

    margin-bottom:40px;


}






.section p{


    text-align:center;

    color:#cbd5e1;

    font-size:18px;

    line-height:1.8;


}





/* SUTRA CARDS */


.card-box-sutraa{
    height:100%;
    padding:30px;
    border-radius:25px;
    background:
    rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:
    1px solid rgba(255,255,255,.15);
    transition:.4s;
    margin-top:12px;
    margin-bottom: -13px;

}





.card-box-sutraa:hover{

    transform:translateY(-10px);


    box-shadow:

    0 20px 40px rgba(0,0,0,.4);


}


.card-box-sutraa h3{
    color:#38bdf8;
    font-size:21px;
    text-align:center;
}

.card-box-sutraa p{
    text-align:left;
    color:#cbd5e1;
    text-align:center;
    margin-top: 12px;
    font-size: 16px;

}
.card-box-practice{
    height:100%;
    padding:30px;
    border-radius:25px;
    background:
    rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:
    1px solid rgba(255,255,255,.15);
    transition:.4s;
    margin-top:12px;
}

.card-box-practice h3{
    text-align:center;
}

.card-box{
    height:100%;
    padding:30px;
    border-radius:25px;
    background: rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.15);
    transition:.4s;
}

.card-box:hover{

    transform:translateY(-10px);
    box-shadow:

    0 20px 40px rgba(0,0,0,.4);


}


.card-box h3{
    color:#38bdf8;
    font-size:21px;
    text-align:center;
}

.card-box p{
    text-align:left;
    color:#cbd5e1;
    text-align:center;
    margin-top: 12px;
    font-size: 16px;

}
.start-btn-quiz{
    display:inline-block;
    margin-top:25px;
    padding: 12px 32px;
    border-radius:40px;
    background:
    linear-gradient(90deg,#2563eb,#7c3aed);
    color:white;
    font-weight:bold;
    margin-top: 10px;
}

/* FOOTER */


footer{


    background:#020617;

    color:#94a3b8;


}






/* MOBILE */


@media(max-width:768px){


.hero h1{

font-size:40px;

}


.navbar{

padding:15px;

}


.section h2{

font-size:30px;

}


}
/* ===============================
   SUTRA ICON
================================== */

.sutra-icon{
    width:85px;
    height:85px;
    margin:0 auto 20px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#ffb347,#ff6b00);
    color:#fff;
    font-size:38px;
    box-shadow:0 10px 25px rgba(255,107,0,.35);
    transition:0.4s;
}

.sutra-card:hover .sutra-icon{
    transform:rotate(10deg) scale(1.12);
    box-shadow:0 15px 35px rgba(255,107,0,.6);
}
.sutra-card{
    background:#1b2440;
    border-radius:20px;
    padding:25px;
    text-align:center;
    width:100%;
    min-height:280px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;

    transition:0.3s;
    border:1px solid rgba(255,255,255,.08);
}

.sutra-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 30px rgba(0,0,0,.35);
}


/* =======================================================
                 AI TUTOR - PROFESSIONAL DESIGN
======================================================= */

.ai-tutor-page{
    width:100%;
    max-width:1300px;
    margin:auto;
}

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

.ai-hero{
    text-align:center;
    padding:60px 30px;
    margin-bottom:35px;
    border-radius:30px;
    background:linear-gradient(135deg,#1E3A8A,#312E81,#4C1D95);
    color:#fff;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    position:relative;
    overflow:hidden;
}

.ai-hero::before{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    top:-80px;
    left:-80px;
}

.ai-hero::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    bottom:-120px;
    right:-100px;
}

.ai-avatar{
    width:120px;
    height:120px;
    margin:auto;
    border-radius:50%;
    background:#fff;
    color:#2563EB;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:55px;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.ai-hero h1{
    margin-top:25px;
    font-size:40px;
    font-weight:700;
}

.ai-hero p{
    max-width:760px;
    margin:20px auto 0;
    font-size:18px;
    line-height:1.8;
    color:#E5E7EB;
}

/* ================= CHAT ================= */

.chat-container{
    background:#101827;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(0,0,0,.30);
    margin-bottom:40px;
    border:1px solid rgba(255,255,255,.08);
}

.chat-header{
    background:linear-gradient(90deg,#2563EB,#4338CA);
    padding:18px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.chat-title{
    color:#fff;
    font-size:22px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
}

.chat-status{
    color:#fff;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:500;
}

.status-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#22C55E;
    animation:pulse 1.5s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(1.4);
        opacity:.6;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }

}

.chat-body{
    padding:35px;
    min-height:450px;
    max-height:650px;
    overflow-y:auto;
    background:#0F172A;
}

/* Scrollbar */

.chat-body::-webkit-scrollbar{
    width:8px;
}

.chat-body::-webkit-scrollbar-thumb{
    background:#3B82F6;
    border-radius:20px;
}

.chat-body::-webkit-scrollbar-track{
    background:#1E293B;
}/* =======================================================
                AI TUTOR - CHAT MESSAGES
======================================================= */

.message{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:28px;
}

.message-icon{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#2563EB,#4F46E5);
    color:#fff;
    font-size:24px;
    flex-shrink:0;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.user-icon{
    background:linear-gradient(135deg,#10B981,#059669);
}

.message-content{
    flex:1;
    padding:22px;
    border-radius:20px;
    background:#1E293B;
    color:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.20);
}

.message-content h4{
    margin-bottom:12px;
    font-size:20px;
    font-weight:600;
    color:#60A5FA;
}

.message-content p{
    margin:0;
    line-height:1.8;
    color:#E5E7EB;
}

.message-content ul{
    margin-top:15px;
    padding-left:20px;
}

.message-content li{
    margin-bottom:8px;
    color:#CBD5E1;
}

.message-content pre{
    margin:0;
    white-space:pre-wrap;
    word-break:break-word;
    color:#F8FAFC;
    font-family:'Poppins',sans-serif;
    line-height:1.8;
}

/* ================= USER MESSAGE ================= */

.user-message{
    justify-content:flex-end;
}

.user-message .message-content{
    background:linear-gradient(135deg,#2563EB,#4338CA);
    color:#fff;
}

.user-message .message-content p{
    color:#fff;
}

.user-message .message-icon{
    order:2;
}

.user-message .message-content{
    order:1;
}

/* ================= CHAT FOOTER ================= */

.chat-footer{
    padding:25px;
    background:#111827;
    border-top:1px solid rgba(255,255,255,.08);
}

.chat-form{
    width:100%;
}

.chat-input-group{
    display:flex;
    gap:15px;
    align-items:center;
}

.chat-input{
    flex:1;
    padding:18px 22px;
    border:none;
    outline:none;
    border-radius:15px;
    background:#1E293B;
    color:#fff;
    font-size:16px;
    transition:.3s;
}

.chat-input::placeholder{
    color:#94A3B8;
}

.chat-input:focus{
    border:2px solid #3B82F6;
    background:#243244;
}

.send-btn{
    border:none;
    border-radius:15px;
    padding:18px 30px;
    background:linear-gradient(135deg,#2563EB,#4F46E5);
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
    display:flex;
    align-items:center;
    gap:10px;
}

.send-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(59,130,246,.35);
}

/* ================= QUICK QUESTIONS ================= */

.quick-question-section{
    margin-top:50px;
}

.quick-question-section h3{
    color:#fff;
    margin-bottom:25px;
    font-size:28px;
    font-weight:700;
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.quick-card{
    background:#1E293B;
    border-radius:20px;
    padding:25px;
    text-align:center;
    transition:.3s;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.05);
}

.quick-card:hover{
    transform:translateY(-8px);
    background:#263548;
    box-shadow:0 15px 35px rgba(0,0,0,.30);
}

.quick-card i{
    font-size:42px;
    color:#60A5FA;
    margin-bottom:15px;
}

.quick-card h4{
    color:#fff;
    margin-bottom:10px;
    font-size:20px;
}

.quick-card p{
    color:#CBD5E1;
    font-size:15px;
    line-height:1.6;
}
/* =====================================================
                AI TUTOR - FEATURES SECTION
===================================================== */

.ai-features{
    margin-top:60px;
    text-align:center;
}

.ai-features h2{
    font-size:38px;
    font-weight:700;
    color:#ffffff;
    margin-bottom:10px;
}

.feature-subtitle{
    color:#cbd5e1;
    font-size:18px;
    margin-bottom:40px;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.feature-card{
    background:#1e293b;
    border-radius:20px;
    padding:30px;
    transition:.35s ease;
    border:1px solid rgba(255,255,255,.08);
}

.feature-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.35);
    background:#263548;
}

.feature-card i{
    font-size:50px;
    color:#60a5fa;
    margin-bottom:18px;
}

.feature-card h4{
    color:#fff;
    font-size:22px;
    margin-bottom:12px;
}

.feature-card p{
    color:#cbd5e1;
    line-height:1.7;
}

/* =====================================================
                    STATISTICS
===================================================== */

.ai-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:25px;
    margin-top:70px;
}

.stat-card{
    background:linear-gradient(135deg,#2563eb,#4338ca);
    border-radius:20px;
    padding:35px 20px;
    text-align:center;
    color:#fff;
    transition:.35s;
}

.stat-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 35px rgba(37,99,235,.35);
}

.stat-card h2{
    font-size:42px;
    margin-bottom:10px;
    font-weight:700;
}

.stat-card span{
    font-size:17px;
    opacity:.95;
}

/* =====================================================
                    FOOTER
===================================================== */

.ai-footer{
    margin-top:80px;
    text-align:center;
    padding:40px 20px;
    border-top:1px solid rgba(255,255,255,.08);
}

.footer-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.footer-logo i{
    font-size:36px;
    color:#60a5fa;
}

.footer-logo h3{
    color:#fff;
    margin:0;
    font-size:28px;
}

.ai-footer p{
    color:#94a3b8;
    margin:8px 0;
    font-size:16px;
}

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

@media (max-width:992px){

    .ai-hero{
        padding:45px 20px;
    }

    .ai-hero h1{
        font-size:32px;
    }

    .ai-hero p{
        font-size:16px;
    }

    .chat-header{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }

    .chat-body{
        padding:20px;
    }

    .chat-input-group{
        flex-direction:column;
    }

    .chat-input{
        width:100%;
    }

    .send-btn{
        width:100%;
        justify-content:center;
    }

}

@media (max-width:768px){

    .message{
        flex-direction:column;
    }

    .user-message{
        align-items:flex-end;
    }

    .message-icon{
        width:48px;
        height:48px;
        font-size:20px;
    }

    .message-content{
        width:100%;
    }

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

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

}

@media (max-width:480px){

    .ai-avatar{
        width:90px;
        height:90px;
        font-size:40px;
    }

    .ai-hero h1{
        font-size:26px;
    }

    .chat-title{
        font-size:18px;
    }

    .quick-card,
    .feature-card,
    .stat-card{
        padding:20px;
    }

    .footer-logo{
        flex-direction:column;
    }

    .footer-logo h3{
        font-size:22px;
    }

}

/* =====================================================
                    ANIMATIONS
===================================================== */

.feature-card,
.quick-card,
.stat-card,
.message{
    animation:fadeUp .6s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
/* ===================================
   AI MATH LENS DESIGN
=================================== */


.lens-page{

    max-width:900px;

    margin:auto;

    padding:40px 20px;

}



/* HEADER */

.lens-header{

    text-align:center;

    margin-bottom:40px;

}



.lens-icon{

    width:100px;

    height:100px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2563eb,
        #9333ea
    );

    color:white;

    font-size:50px;

    box-shadow:0 15px 40px rgba(0,0,0,.3);

}



.lens-header h1{

    margin-top:25px;

    font-size:42px;

    font-weight:800;

}



.lens-header p{

    font-size:18px;

    opacity:.75;

}





/* MAIN CARD */


.lens-card{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    border-radius:30px;

    padding:40px;

    box-shadow:0 20px 50px rgba(0,0,0,.3);

}





/* UPLOAD AREA */


.upload-area{


    display:block;

    text-align:center;

    padding:50px 20px;

    border:2px dashed #60a5fa;

    border-radius:25px;

    cursor:pointer;

    transition:.3s;


}



.upload-area:hover{


    transform:translateY(-5px);

    border-color:#22c55e;


}



.upload-area i{


    font-size:60px;

    color:#60a5fa;


}



.upload-area h3{

    margin-top:20px;

    font-size:25px;

}





/* PREVIEW */


.preview-box{


    text-align:center;

    margin-top:30px;


}



#preview{


    max-width:350px;

    width:100%;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.4);


}





/* QUESTION BOX */


.question-box{


    margin-top:35px;


}



.question-box label{


    font-size:18px;

    font-weight:600;


}



.question-box textarea{


    width:100%;

    height:120px;

    margin-top:15px;

    padding:18px;

    border-radius:20px;

    border:none;

    outline:none;

    font-size:16px;

}





/* BUTTON */


.lens-button{


    width:100%;

    margin-top:30px;

    padding:16px;

    border:none;

    border-radius:50px;


    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );


    color:white;

    font-size:20px;

    font-weight:700;

    cursor:pointer;


    transition:.3s;


}



.lens-button:hover{


    transform:scale(1.03);

    box-shadow:0 10px 30px rgba(37,99,235,.5);


}





/* RESULT */


#result{


    margin-top:30px;


}



/* MOBILE */


@media(max-width:768px){


    .lens-header h1{

        font-size:30px;

    }


    .lens-card{

        padding:20px;

    }


}
/* ==========================
   ANIMATED SOLUTION
========================== */


.step-card{

    opacity:0;

    transform:translateY(20px);

    transition:0.4s ease;

}



.step-card.show{

    opacity:1;

    transform:translateY(0);

}




.final-answer{

    opacity:0;

    transform:scale(0.8);

    transition:0.5s ease;

}



.final-answer.show-answer{

    opacity:1;

    transform:scale(1);

}
/* =========================================
   SUTRA DETAIL PROFESSIONAL DESIGN
========================================= */


.sutra-page{

    background:
    linear-gradient(
        135deg,
        #07111f,
        #111827,
        #1e1b4b
    );

    min-height:100vh;

    color:white;

}




/* MAIN CARD */


.sutra-detail-card{

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(15px);

    border-radius:30px;

    padding:45px;

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

}




/* HERO SECTION */


.sutra-hero{

    padding:30px;

    border-radius:25px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    margin-bottom:40px;

}




.sutra-icon-large{

    font-size:80px;

    animation:floatIcon 3s infinite;

}



@keyframes floatIcon{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


100%{

transform:translateY(0);

}


}




.sutra-number{


display:inline-block;

background:#fbbf24;

color:#111827;

padding:8px 20px;

border-radius:50px;

font-weight:bold;

margin:15px;


}




.sutra-hero h1{

font-size:45px;

font-weight:800;

}




.hero-tagline{

font-size:18px;

opacity:.9;

}





/* LEARNING CARDS */



.learning-card{


background:

rgba(255,255,255,0.07);


border-radius:25px;


padding:30px;


margin-bottom:30px;
margin-top:30px;


border:1px solid rgba(255,255,255,.15);


transition:.3s;


}




.learning-card:hover{


transform:translateY(-8px);


box-shadow:

0 15px 35px rgba(0,0,0,.4);


}





.card-title{


font-size:28px;


font-weight:700;


margin-bottom:20px;


color:#facc15;


}





.learning-card p,
.learning-card li{


font-size:18px;


line-height:1.8;


color:#e5e7eb;


}





/* WHY BOX */


.why-grid{


display:grid;


grid-template-columns:repeat(4,1fr);


gap:20px;


}



.why-box{


background:

linear-gradient(
135deg,
#2563eb,
#7c3aed
);


padding:20px;


border-radius:20px;


text-align:center;


font-size:30px;


}



.why-box p{


font-size:16px;


color:white;


}




/* RULE */


.rule-content{


background:#111827;


padding:25px;


border-radius:20px;


font-size:20px;


border-left:5px solid #facc15;


}






/* EXAMPLE */


.example-question{


background:#0f172a;


padding:20px;


border-radius:20px;


}




.solution-step{


margin-top:20px;


padding:20px;


background:#1e293b;


border-radius:15px;


}



.solution-step span{


background:#facc15;


color:#111827;


padding:6px 15px;


border-radius:20px;


font-weight:bold;


}







.answer-box{


margin-top:30px;


text-align:center;


background:

linear-gradient(
135deg,
#16a34a,
#22c55e
);


padding:30px;


border-radius:25px;


}





.answer-box h2{


font-size:45px;


font-weight:800;


}








/* PRACTICE */


.practice-form{


display:flex;


flex-direction:column;


gap:20px;


}





.practice-input{


padding:18px;


border-radius:15px;


border:none;


font-size:18px;


}





.solve-btn{


background:

linear-gradient(
135deg,
#2563eb,
#7c3aed
);


color:white;


padding:18px;


border:none;


border-radius:50px;


font-size:20px;


font-weight:bold;


transition:.3s;


}



.solve-btn:hover{


transform:scale(1.05);


}






/* ANIMATED SOLUTION */


.step-card{


display:flex;


gap:15px;


align-items:center;


background:#0f172a;


padding:20px;


margin:15px 0;


border-radius:20px;


opacity:0;


transform:translateX(-50px);


transition:.6s;


}



.step-card.show{


opacity:1;


transform:translateX(0);


}





.step-icon{


font-size:25px;


}




.final-answer{


margin-top:30px;


padding:35px;


text-align:center;


border-radius:30px;


background:

linear-gradient(
135deg,
#f59e0b,
#ef4444
);


opacity:0;


transform:scale(.8);


transition:.8s;


}





.show-answer{


opacity:1;


transform:scale(1);


}



.final-answer h1{


font-size:60px;


font-weight:900;


}








/* BUTTONS */
.navigation-buttons{
display:flex;
justify-content:space-between;
margin-top:40px;
gap: 10px;
text-align: center;
}



.nav-btn,
.back-btn{
padding:15px 30px;
border-radius:50px;
text-decoration:none;
font-weight:bold;
color:white;
background:#2563eb;
transition:.3s;
}


.nav-btn:hover,
.back-btn:hover{


transform:scale(1.05);


}



.back-section{


text-align:center;


margin-top:40px;


}





/* MOBILE RESPONSIVE */



@media(max-width:768px){


.sutra-detail-card{

padding:20px;

}



.sutra-hero h1{

font-size:30px;

}



.why-grid{

grid-template-columns:1fr;

}



.navigation-buttons{

flex-direction:column;

gap:20px;

}



.final-answer h1{

font-size:40px;

}


}
/*==========================
 GOOGLE FONT
==========================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body.quiz-page{
background:linear-gradient(135deg,#0f172a,#1e3a8a,#2563eb);
min-height:100vh;
color:#fff;
padding:30px;
}

.quiz-container{
max-width:1200px;
margin:auto;
}

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

.quiz-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 30px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(12px);
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.3);
margin-bottom:30px;
}

.quiz-logo{
font-size:28px;
font-weight:700;
}

.back-btn{
padding:12px 24px;
background:#3b82f6;
color:#fff;
text-decoration:none;
border-radius:10px;
transition:.3s;
font-weight:600;
}

.back-btn:hover{
background:#2563eb;
transform:translateY(-3px);
}

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

.quiz-hero{
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
padding:40px;
border-radius:20px;
margin-bottom:30px;
box-shadow:0 12px 35px rgba(0,0,0,.25);
}

.hero-tag{
display:inline-block;
padding:8px 18px;
background:#2563eb;
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:15px;
}

.quiz-hero h1{
font-size:42px;
margin-bottom:10px;
}

.quiz-hero p{
font-size:18px;
color:#dbeafe;
margin-bottom:25px;
}

.hero-features{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.feature{
background:rgba(255,255,255,.12);
padding:18px 25px;
border-radius:15px;
font-weight:600;
transition:.3s;
}

.feature:hover{
transform:translateY(-6px);
background:#3b82f6;
}

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

.quiz-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-bottom:30px;
}

.stat-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
padding:25px;
text-align:center;
border-radius:18px;
transition:.3s;
box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.stat-card:hover{
transform:translateY(-8px);
}

.stat-card .icon{
font-size:40px;
margin-bottom:15px;
}

.stat-card h2{
font-size:34px;
margin-bottom:8px;
}

.stat-card p{
color:#dbeafe;
}
/*==========================
PROGRESS BAR
==========================*/

.progress-section{
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
padding:25px;
border-radius:18px;
margin-bottom:30px;
box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.progress-info{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
font-size:17px;
font-weight:600;
}

.progress-track{
width:100%;
height:22px;
background:rgba(255,255,255,.15);
border-radius:50px;
overflow:hidden;
}

.progress-fill{
height:100%;
width:0%;
background:linear-gradient(90deg,#22c55e,#3b82f6,#8b5cf6);
border-radius:50px;
display:flex;
justify-content:center;
align-items:center;
font-size:13px;
font-weight:700;
transition:width .5s ease;
color:#fff;
}

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

.question-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
padding:35px;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.25);
margin-bottom:30px;
}

.question-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.question-label{
font-size:14px;
color:#bfdbfe;
}

#questionNumber{
font-size:26px;
font-weight:700;
margin-top:5px;
}

.badge{
background:#2563eb;
padding:10px 20px;
border-radius:30px;
font-size:14px;
font-weight:600;
}

.question-body h2{
font-size:30px;
line-height:1.5;
margin-bottom:30px;
}

/*==========================
OPTIONS
==========================*/

.options-container{
display:grid;
grid-template-columns:1fr;
gap:18px;
}

.option-card{
display:flex;
align-items:center;
gap:18px;
padding:18px 22px;
background:rgba(255,255,255,.12);
border:2px solid transparent;
border-radius:15px;
cursor:pointer;
transition:.3s;
}

.option-card:hover{
background:#2563eb;
transform:translateX(8px);
border-color:#fff;
}

.option-card.selected{
background:#22c55e;
border-color:#fff;
}

.option-letter{
width:48px;
height:48px;
border-radius:50%;
background:#fff;
color:#2563eb;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:700;
}

.option-text{
font-size:18px;
font-weight:500;
}

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

.navigation{
display:flex;
justify-content:space-between;
row-gap:20px;
margin:30px 0;
}

.nav-btn,
.submit-btn{
flex:1;
padding:18px;
border:none;
border-radius:12px;
font-size:17px;
font-weight:700;
cursor:pointer;
transition:.3s;
}

.prev-btn{
background:#475569;
color:#fff;
}

.next-btn{
background:#2563eb;
color:#fff;
}

.submit-btn{
background:#16a34a;
color:#fff;
}

.nav-btn:hover,
.submit-btn:hover{
transform:translateY(-5px);
box-shadow:0 12px 25px rgba(0,0,0,.25);
}

/*==========================
QUIZ NOTE
==========================*/

.quiz-note{
margin-top:30px;
}

.note-card{
display:flex;
gap:20px;
align-items:flex-start;
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
padding:25px;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.note-icon{
font-size:45px;
}

.note-card h3{
margin-bottom:12px;
font-size:24px;
}

.note-card ul{
padding-left:20px;
}

.note-card li{
margin-bottom:10px;
line-height:1.7;
color:#dbeafe;
}
/*==========================
RESULT SECTION
==========================*/

.result-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
padding:40px;
border-radius:22px;
text-align:center;
box-shadow:0 15px 35px rgba(0,0,0,.25);
margin-top:30px;
animation:fadeIn .6s ease;
}

.result-icon{
font-size:70px;
margin-bottom:15px;
}

.result-header h2{
font-size:36px;
margin-bottom:10px;
}

.result-header p{
color:#dbeafe;
margin-bottom:25px;
}

.score-circle{
width:180px;
height:180px;
margin:30px auto;
border-radius:50%;
background:linear-gradient(135deg,#2563eb,#7c3aed);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
box-shadow:0 15px 35px rgba(0,0,0,.3);
animation:zoomIn .8s ease;
}

.score-circle h1{
font-size:48px;
margin-bottom:5px;
}

.score-circle span{
font-size:16px;
opacity:.9;
}

.result-details{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin:35px 0;
}

.detail-card{
background:rgba(255,255,255,.12);
padding:20px;
border-radius:15px;
}

.result-message{
font-size:22px;
font-weight:600;
margin:20px 0;
color:#fde68a;
}

.result-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-top:30px;
}

.review-btn,
.dashboard-btn{
padding:15px 30px;
border:none;
border-radius:12px;
text-decoration:none;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:.3s;
}

.review-btn{
background:#3b82f6;
color:#fff;
}

.dashboard-btn{
background:#22c55e;
color:#fff;
}

.review-btn:hover,
.dashboard-btn:hover{
transform:translateY(-5px);
box-shadow:0 12px 25px rgba(0,0,0,.25);
}

/*==========================
REVIEW SECTION
==========================*/

.review-container{
margin-top:40px;
}

.review-header{
text-align:center;
margin-bottom:30px;
}

.review-header h2{
font-size:34px;
margin-bottom:8px;
}

.review-header p{
color:#dbeafe;
}

.review-progress-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
padding:30px;
border-radius:20px;
margin-bottom:30px;
}

.progress-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
margin-bottom:25px;
}

.progress-item{
background:rgba(255,255,255,.12);
padding:20px;
border-radius:15px;
text-align:center;
}

.progress-item h3{
font-size:34px;
margin-bottom:8px;
}

.accuracy-box{
text-align:center;
font-size:24px;
font-weight:700;
color:#fde68a;
}

.review-card{
background:rgba(255,255,255,.08);
padding:25px;
border-radius:18px;
margin-bottom:20px;
box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.correct-review{
border-left:8px solid #22c55e;
}

.wrong-review{
border-left:8px solid #ef4444;
}

.review-question{
font-size:20px;
margin:15px 0;
line-height:1.6;
}

.answer-box{
background:rgba(255,255,255,.08);
padding:15px;
border-radius:12px;
margin-top:15px;
}

.answer-box p{
margin:8px 0;
}

.status{
margin-top:15px;
font-weight:700;
font-size:18px;
}

/*==========================
FOOTER
==========================*/

.quiz-footer{
margin-top:50px;
padding:20px;
text-align:center;
color:#dbeafe;
opacity:.8;
}

/*==========================
ANIMATIONS
==========================*/

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes zoomIn{
from{
transform:scale(.6);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}

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

@media(max-width:768px){

body.quiz-page{
padding:15px;
}

.quiz-header{
flex-direction:column;
gap:15px;
}

.quiz-hero{
padding:25px;
}

.quiz-hero h1{
font-size:30px;
}

.hero-features{
flex-direction:column;
}

.question-top{
flex-direction:column;
align-items:flex-start;
gap:15px;
}

.question-body h2{
font-size:24px;
}

.navigation{
flex-direction:column;
}

.result-buttons{
flex-direction:column;
}

.review-btn,
.dashboard-btn{
width:100%;
text-align:center;
}

.score-circle{
width:150px;
height:150px;
}

.score-circle h1{
font-size:40px;
}

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

}
/* ==========================================
   VEDIC MATHEMATICS SPEED TEST CSS
========================================== */


/* GOOGLE FONT */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');



*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Poppins',sans-serif;

}



/* ================= BODY ================= */


.speed-page{

min-height:100vh;

background:
linear-gradient(
135deg,
#0f172a,
#1e3a8a,
#2563eb
);

color:white;

padding:30px;

}





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


.speed-header{


display:flex;

justify-content:space-between;

align-items:center;

padding:20px 30px;

background:
rgba(255,255,255,0.10);

backdrop-filter:blur(15px);

border-radius:20px;

box-shadow:
0 10px 30px rgba(0,0,0,.3);

margin-bottom:40px;


}



.speed-logo{


font-size:28px;

font-weight:700;

}



.speed-header a{


text-decoration:none;

color:white;

background:#2563eb;

padding:12px 25px;

border-radius:12px;

font-weight:600;

transition:.3s;


}



.speed-header a:hover{


background:#3b82f6;

transform:translateY(-4px);


}





/* ================= CONTAINER ================= */


.speed-container{


max-width:900px;

margin:auto;


}






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


.speed-card{


background:
rgba(255,255,255,.12);

backdrop-filter:blur(18px);

padding:40px;

border-radius:25px;

text-align:center;

box-shadow:

0 20px 40px rgba(0,0,0,.35);


}







.speed-card h1{


font-size:42px;

font-weight:800;

margin-bottom:15px;


}



.speed-card p{


font-size:18px;

color:#dbeafe;

}







/* ================= TIMER ================= */


.timer-box{


height:180px;

width:180px;

margin:30px auto;


border-radius:50%;


background:

linear-gradient(
135deg,
#facc15,
#f97316
);



display:flex;

flex-direction:column;

justify-content:center;

align-items:center;


box-shadow:

0 15px 35px rgba(0,0,0,.4);


}




.timer-box span{


font-size:60px;

font-weight:800;


}



.timer-box label{


font-size:18px;

font-weight:600;

}







/* ================= QUESTION ================= */


.question-box{


background:

rgba(255,255,255,.15);


padding:35px;

border-radius:20px;


margin:30px 0;


border:

2px solid rgba(255,255,255,.2);



}



.question-box h2{


font-size:35px;

font-weight:700;


}







/* ================= INPUT ================= */


.answer-input{


width:70%;

padding:15px;


border:none;

outline:none;


border-radius:15px;


font-size:22px;


text-align:center;


}





.answer-input:focus{


box-shadow:

0 0 15px #60a5fa;


}







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


.speed-btn{


padding:15px 35px;


border:none;


border-radius:15px;


font-size:18px;


font-weight:700;


margin:15px 10px;


cursor:pointer;


transition:.3s;


}





.start-btn{


background:#2563eb;

color:white;


}




.submit-btn{
background:#16a34a;
color:white;
}





.speed-btn:hover{


transform:translateY(-5px);


box-shadow:

0 10px 25px rgba(0,0,0,.3);


}








/* ================= SCORE GRID ================= */


.score-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:20px;


margin-top:40px;


}




.score-card{


background:

rgba(255,255,255,.12);


padding:25px;


border-radius:18px;


transition:.3s;


}




.score-card:hover{


transform:translateY(-8px);


background:

rgba(255,255,255,.20);


}




.score-card h3{


color:#bfdbfe;

font-size:18px;


}



.score-card h2{


font-size:40px;

margin-top:10px;


}







/* ================= RESULT ================= */


#result{


margin-top:40px;


animation:

fade .5s ease;


}





#result .alert{


border-radius:20px;

padding:30px;


font-size:18px;


}





#result h3{


font-size:32px;


}








/* ================= ANIMATION ================= */


@keyframes fade{


from{


opacity:0;

transform:translateY(30px);


}



to{


opacity:1;

transform:translateY(0);


}


}








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


@media(max-width:768px){



.speed-page{


padding:15px;


}



.speed-header{


flex-direction:column;

gap:20px;


}



.speed-card{


padding:25px;


}



.speed-card h1{


font-size:30px;


}



.question-box h2{


font-size:25px;

}
.answer-input{


width:100%;


}
.score-grid{

grid-template-columns:1fr;

}

}

/* ============ SUTRA CAROUSEL - FORCE FIX ============ */
#sutraCarousel {
  position: relative !important;
  padding-bottom: 3rem !important;
}

#sutraCarousel .carousel-inner {
  padding: 24px 3.5rem !important; /* cards ko center mein rakhega, arrows ke liye jagah */
}

/* ===== Arrows - box ke BAHAR ===== */
#sutraCarousel .carousel-control-prev,
#sutraCarousel .carousel-control-next {
  position: absolute !important;
  top: 45% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 3rem !important;
  height: 3rem !important;
  opacity: 1 !important;
  z-index: 10 !important;
}

#sutraCarousel .carousel-control-prev {
  left: -3.2rem !important;
}

#sutraCarousel .carousel-control-next {
  right: -3.2rem !important;
}

#sutraCarousel .carousel-control-prev-icon,
#sutraCarousel .carousel-control-next-icon {
  width: 2.8rem !important;
  height: 2.8rem !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  background-size: 50% !important;
}

/* ===== Indicators - box ke NICHE ===== */
#sutraCarousel .carousel-indicators {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 2rem 0 0 0 !important;
  display: flex !important;
  justify-content: center !important;
  padding: 0 !important;
}

#sutraCarousel .carousel-indicators button {
  position: relative !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: #6c6c6c !important;
  opacity: 0.5 !important;
  margin: 0 5px !important;
  text-indent: -9999px !important;
  border: none !important;
}

#sutraCarousel .carousel-indicators button.active {
  opacity: 1 !important;
  background-color: #6a4cff !important;
}

#about h2 {
    opacity: 0;
    transform: translateY(-30px);
    animation: aboutHeading 0.8s ease-out forwards;
}

.about-text {
    opacity: 0;
    transform: translateY(40px);
    animation: aboutTextAnimation 1.2s ease-out 0.3s forwards;
}

@keyframes aboutHeading {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aboutTextAnimation {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.start-btn {
    display: inline-block;
    margin-top: -32px;

}


.no-right-panel {
    grid-template-columns: 220px 1fr;
}

/* leaderboard */
/* ===== LEADERBOARD ===== */
.leaderboard-table-card {
    text-align: left;
    padding: 0;
    overflow: hidden;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.leaderboard-table thead tr {
    background: #1e1f42;
    text-align: left;
}

.leaderboard-table th {
    padding: 14px 18px;
    font-size: 13px;
    color: #a5a6c9;
}

.leaderboard-table td {
    padding: 12px 18px;
    border-bottom: 1px solid #2a2b55;
    font-size: 14px;
}

.leaderboard-table tr.my-row {
    background: #2a2b55;
}

.rank-cell {
    font-weight: 700;
    font-size: 16px;
}

.student-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.my-rank-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    margin-bottom: 18px;
    text-align: left;
}

.my-rank-label {
    color: #a5a6c9;
    font-size: 12px;
    margin: 0;
}

.my-rank-value {
    margin: 4px 0;
}

.my-rank-streak {
    font-size: 26px;
}

/* Daily Challenge */

.challenge-question-card,
.challenge-result-card {
    text-align: center;
    padding: 40px 24px;
}

.challenge-question-text {
    font-size: 32px;
    margin-bottom: 24px;
    color: #fff;
}

.challenge-input {
    padding: 10px 16px;
    border-radius: 20px;
    border: none;
    outline: none;
    background: #1e1f42;
    color: #fff;
    margin-right: 10px;
    width: 160px;
    text-align: center;
}

.points-earned {
    font-size: 18px;
    color: #6366f1;
    font-weight: 700;
    margin: 10px 0;
}

.challenge-note {
    color: #a5a6c9;
    font-size: 13px;
}

/* Formulas */

/* ===== VEDIC FORMULAS ===== */
.formula-grid {
    grid-template-columns: repeat(2, 1fr);
}

.formula-card {
    text-align: left;
}

.formula-card h2 {
    text-align: center;
}

.formula-card h3 {
    text-align: center;
    margin-bottom: 4px;
}

.formula-sanskrit {
    text-align: center;
    color: #6366f1;
    font-size: 14px;
    margin-bottom: 10px;
}

.formula-meaning {
    color: #a5a6c9;
    font-size: 13px;
    text-align: center;
    margin-bottom: 14px;
}

.formula-rule,
.formula-example {
    font-size: 12px;
    color: #cfd0e6;
    margin-bottom: 6px;
}

.formula-example {
    color: #6366f1;
    font-weight: 600;
}
/* ===== CERTIFICATE CARD (clickable) ===== */
.certificate-card:not(.locked) {
    cursor: pointer;
}

.certificate-card:not(.locked):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

/* ===== CERTIFICATE MODAL ===== */
.cert-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cert-modal {
    position: relative;
    max-width: 600px;
    width: 100%;
}

.cert-close-btn {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
}

.cert-paper {
    background: linear-gradient(135deg, #fdf6e3, #fffaf0);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.cert-border {
    border: 3px double #b8860b;
    border-radius: 8px;
    padding: 40px 30px;
    text-align: center;
    color: #3a2e1f;
}

.cert-header {
    font-size: 14px;
    letter-spacing: 2px;
    color: #b8860b;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.cert-subheader {
    font-size: 26px;
    font-weight: 700;
    font-family: Georgia, serif;
    margin-bottom: 16px;
    color: #2a2116;
}

.cert-icon {
    font-size: 50px;
    margin-bottom: 14px;
}

.cert-presented {
    font-size: 13px;
    color: #6b5c45;
    margin-bottom: 4px;
}

.cert-name {
    font-family: Georgia, serif;
    font-size: 30px;
    color: #7c3aed;
    margin: 6px 0 18px;
    border-bottom: 2px solid #b8860b;
    display: inline-block;
    padding-bottom: 6px;
}

.cert-desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.cert-date {
    font-size: 12px;
    color: #6b5c45;
    margin-bottom: 24px;
}

.cert-signature span {
    display: block;
    color: #3a2e1f;
    margin-bottom: 4px;
}

.cert-signature p {
    font-size: 12px;
    color: #6b5c45;
}