body {
        background-image: radial-gradient(#d1d1d1 0.5px, transparent 0.5px);
        background-size: 30px 30px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow-x: hidden;
    }
/* Login Section Start Here */

    body::before, body::after {
        content: "";
        position: absolute;
        z-index: -1;
        opacity: 0.15;
        filter: grayscale(100%);
    }

    body::before {
        bottom: 40px;
        left: 10px;
        width: 537px;
        height: 378px;
        background: url('../images/login-bg-left.png') no-repeat center; 
        background-size: contain;
    }

  body::after {
    bottom: 10px;
    right: 60px;
    width: 487px;
    height: 649px;
    background: url('../images/login-bg-right.png') no-repeat center; 
    background-size: contain;
    content: ""; 
    position: absolute;
    z-index: -1;
}

    .sketch-accent {
        position: absolute;
        top: 15%;
        right: 25%;
        width: 40px;
        height: 40px;
        border-top: 3px solid #1177fe;
        border-right: 3px solid #1177fe;
        transform: rotate(15deg);
        opacity: 0.2;
    }

    .login-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        max-width: 450px;
        width: 100%;
        padding: 2.5rem;
        background: rgba(255, 255, 255, 0.95); 
        backdrop-filter: blur(5px);
    }

    .form-control {
        border: 2px solid #1177fe;
        border-radius: 8px;
        padding: 12px;
    }

    .btn-login {
        background-color: #1177fe;
        color: #fff;
        font-weight: bold;
        padding: 12px;
        border-radius: 8px;
        transition: transform 0.2s;
    }

    .btn-login:hover {
        background-color: #1689fe;
		color:#fff;
    }

    .logo-box {
        background-color: #1177fe;
        color: white;
        padding: 5px 10px;
        font-weight: bold;
        border-radius: 4px;
		font-size:24px;
    }

    footer {
        font-size: 0.85rem;
    }

    .footer-capsule {
        background-color: #212529;
        color: white;
        padding: 4px 15px;
        border-radius: 4px;
        display: inline-block;
    }

    .password-container {
        position: relative;
    }

    .password-toggle {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #6c757d;
    }
	.login-card {
    position: relative; 
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    background: rgba(255, 255, 255, 0.98);
    padding: 2.5rem;
    max-width: 450px;
    width: 100%;
}
.sketch-lines {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 80px;
    height: 80px;
    background: url('../images/shape.svg') no-repeat center; 
    background-size: 100% 100%;
    opacity: 0.6;
}
.mt25 {margin-top:25px;}
.blue-cl {color:#1177fe;}

/* NAV and Hero Banner Start Here */

/* Header strip */
.top-bar{
  background:#7b4bb3;
  color:#fff;
  font-size:14px;
  padding:8px 15px;
}

/* Logo */
.logo{
  background:#1177fe;
  color:#fff;
  font-weight:700;
  padding:8px 10px;
  border-radius:4px;
}
.top-bar {
    background-color: #333;
    color: white;
    font-size: 0.85rem;
    position: relative;
    z-index: 1020;
  }

  .main-nav {
    background-color: #1177fe;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    padding: 15px 0;
    top: 0; /* Required for sticky-top to work */
  }

  /* Applied via JS when the user scrolls */
  .nav-scrolled {
    background-color: #1177fe !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 20px 0;
  }

  .logo {
    background: #1177fe;
    color: #fff;
    padding: 0px 10px;
    font-weight: bold;
    border-radius: 4px;
    text-decoration: none;
	font-size:30px;
  }
 .nav-link {color:#fff;}
 .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #fff; font-weight:bold;
}
/* Hero */
.hero{
  padding:70px 0;
}

.hero h1{
  font-size:52px;
  font-weight:700;
  line-height:1.2;
}

.hero p{
  color:#444;
  margin:20px 0;
}

/* Buttons */
.btn-yellow{
  background:#ffd44d;
  color:#1177fe;
  font-weight:600;
  padding:14px 24px;
  border-radius:6px;
}
/* Base 3D Effect */
  .btn-3d {
    position: relative;
    border: none;
    transition: all 0.1s;
    /* Adjust this color to be a darker version of your button color */
    box-shadow: 0 6px 0 #d9a400; 
    border-radius: 8px;
  }

  /* Movement on click */
  .btn-3d:active {
    box-shadow: 0 2px 0 #d9a400;
    transform: translateY(4px);
  }

  /* Specific color for your yellow button */
  .btn-yellow-3d {
    background-color: #ffc107;
    color: #000;
  }
.btn-yellow:hover{
  background:#ffcc33;
}

/* Right Image */
.hero-img{
  position:relative;
}

.hero-img img{
  display:block;
  margin:auto;
}

/* Stats cards */
.stat{
  position:absolute;
  background:#fff;
  padding:14px 18px;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  font-size:14px;
}

.stat strong{
  display:block;
  font-size:18px;
}

.stat-1{ top:20px; right:0; }
.stat-2{ bottom:100px; left:0; }
.stat-3{ bottom:20px; right:20px; }

/* Responsive tweaks */
@media(max-width:991px){
  .hero h1{
    font-size:38px;
  }
  .stat{
    position:static;
    margin:10px auto;
    display:inline-block;
  }
}


/* Featured Section start here */
.feature-section {
    background-color: #1177fe;
    background-image: url(../images/feature-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
	 padding: 60px 0;
}


        .icon-circle {
            width: 60px;
            height: 60px;
            border: 2px solid #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24px;
            flex-shrink: 0;
            margin-right: 20px;
        }

        .feature-title {
            font-weight: 700;
            margin-bottom: 5px;
            font-size: 1.1rem;
			color:#fff;
        }

        .feature-text {
            color: #fff;
            font-size: 0.95rem;
            line-height: 1.5;
        }
.fw-bold {
    font-weight: 500!important;
}
.leaf-card {
            padding: 30px;
            height: 100%;
            border: 2px solid;
            /* Creates the unique corner shape */
            border-top-left-radius: 40px;
            border-bottom-right-radius: 40px;
            transition: transform 0.3s ease;
        }

        .leaf-card:hover { transform: translateY(-5px); }

        .card-yellow { background-color: #fff9e6; border-color: #ffcc80; }
        .card-yellow h3 { color: #f39c12; }

        .card-purple { background-color: #f3e5f5; border-color: #ce93d8; }
        .card-purple h3 { color: #9b59b6; }

        .card-blue { background-color: #e0f7fa; border-color: #80deea; }
        .card-blue h3 { color: #2980b9; }

        .content-text { color: #555; font-size: 0.95rem; line-height: 1.6; }
/* Exam Section Stary Here */

.exam-section { padding: 0px 0; }
        
        .grid-container {
/*             background-image: radial-gradient(#ccc 1px, transparent 1px); */
            background-size: 20px 20px;
            padding: 40px;
            border-radius: 8px;
        }

        .exam-card {
   background: #c4ecfe;
            border: 1px solid #48b7ff;
            border-radius: 50%;				
            align-items: center; 
            padding: 20px;
            height: 100%;
            transition: transform 0.2s;
        }
		       .exam-card1 {
   background: #c4ecfe;
            border: 1px solid #48b7ff;
            border-radius: 12px				
            align-items: center; 
            padding: 20px;
            height: 100%;
            transition: transform 0.2s;
        }

        .date-text { font-size: 0.75rem; color: #666; text-transform: uppercase; }
        .exam-title { font-weight: bold; font-size: 1.1rem; min-height: 3rem; margin: 10px 0; }
        .stats-text { font-size: 0.85rem; color: #444; }
        
        .user-count {
            background: #1177fe;
            color: #fff;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.8rem;
            display: inline-flex;
            align-items: center;
        }

        .retyping-btn {
            background-color: #ffc107;
            border: none;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        /* The Special "Explore All" Card */
        .explore-card {
            background-color: #ffc107;
            border: 2px solid #1177fe;
            box-shadow: 6px 6px 0px #1177fe;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            cursor: pointer;
        }
        
        .explore-card h2 { font-weight: 800; margin-bottom: 0; }
		
		/* Typing performance. */
		.white-bg {background:#fff;}
		
		.hero-text { font-weight: 500; font-size: 2.5rem; line-height: 1.1; margin-bottom: 2rem; }
        .sub-header { color: #aaa; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; }
        
        /* Accordion Custom Styling */
        .accordion-button { font-weight: 500; font-size: 1.25rem; padding-left: 0; background: none !important; border: none !important; box-shadow: none !important; color: #1177fe !important; }
        .accordion-button::after { filter: grayscale(1); }
        .accordion-item { border: none; border-bottom: 1px solid #1177fe; border-radius: 0 !important; }
        
        /* Table Styling */
        .table-container { border: 1px solid #1177fe; border-radius: 8px; padding: 10px; background: white; box-shadow: 10px 10px 0px rgba(0,0,0,0.05); }
        .table thead th { border-bottom: 2px solid #1177fe; font-size: 0.9rem; }
        .btn-black { background: #1177fe; color: #fff; border-radius: 4px; padding: 10px 20px; font-weight: 600; }
        .btn-black:hover { background: #1177fe; color: #fff; }
		.table-bordered>:not(caption)>*>* {
    border-width: 0 var(--bs-border-width);
	
	
	 /* Feature Section Styling */
        .feature-container { position: relative; padding: 40px 0; }
        
        /* Decorative Dots */
        .dots {
            position: absolute;
            width: 80px; height: 80px;
            background-image: radial-gradient(#d1d1d1 1.5px, transparent 1.5px);
            background-size: 15px 15px;
            z-index: -1;
        }
        .dots-top { top: 10%; left: 5%; }
        .dots-bottom { bottom: 10%; left: 35%; }

        /* Box Shapes */
        .feature-box {
            padding: 35px 25px;
            transition: transform 0.3s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        }

        .box-orange { 
            background-color: var(--orange-bg);
            border-radius: 40px 40px 40px 0px; /* Sharp bottom-left */
            margin-bottom: 30px;
        }

        .box-purple { 
            background-color: var(--purple-bg);
            border-radius: 40px 0px 40px 40px; /* Sharp top-right */
            min-height: 280px;
        }

        .box-blue { 
            background-color: var(--blue-bg);
            border-radius: 0px 40px 40px 40px; /* Sharp top-left */
            margin-top: 40px;
        }

        /* Typography */
        .title-small { color: #aaa; letter-spacing: 2px; font-size: 0.8rem; }
        .main-heading { font-weight: 800; font-size: 3.5rem; line-height: 1.1; margin-bottom: 2rem; }
        .feature-box h4 { font-weight: 700; margin-bottom: 15px; }

        /* Accordion Customization */
        .accordion-item { border: none; border-bottom: 1px solid #f0f0f0; margin-bottom: 15px; }
        .accordion-button { font-weight: 600; padding: 20px 0; font-size: 1.1rem; }
        .accordion-button:not(.collapsed) { background: none; color: #1177fe; box-shadow: none; }
        .accordion-button::after { background-size: 1rem; }
        
        .icon-box {
            width: 35px; height: 35px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 8px; margin-right: 15px;
        }

        /* Responsive Tweaks */
        @media (max-width: 991px) {
            .main-heading { font-size: 2.5rem; margin-top: 40px; }
            .box-blue { margin-top: 0; }
            .dots { display: none; }
        }
		
		/* Footerr Section start here */
		
		
		.cta-section { padding: 80px 0; position: relative; }
        .highlight-text { border-bottom: 4px solid #00f2ff; display: inline-block; line-height: 0.8; }
        
        /* Dark Footer Styling */
		.footer-bg {
    background-color: #1177fe;
    color: #ffffff;
}

/* LINKS */
.footer-links a {
    color: #ffffff !important;
    display: inline-block;
    text-decoration: none;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #dbe6ff !important;
    transform: translateX(4px);
}

/* HEADINGS */
.footer-heading {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 15px;
}

/* MUTED TEXT */
.footer-muted {
    color: rgba(255,255,255,0.7);
}

/* SOCIAL ICONS */
.footer-social a {
    color: #ffffff !important;
    font-size: 18px;
    margin-right: 15px;
    transition: 0.3s;
}

.footer-social a:hover {
    color: #dbe6ff !important;
}

/* CONTACT */
.footer-contact p {
    color: #ffffff;
    margin-bottom: 5px;
}

/* LINE */
.footer-line {
    border-color: rgba(255,255,255,0.3);
}
.wht {color:#fff!important;}
        .scroll-top {
            position: fixed; bottom: 20px; right: 20px;
            background: #e91e63; color: white; width: 40px; height: 40px;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
        }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle white tint */
    color: #ffffff;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-social a:hover {
    background-color: #ffffff; /* Turns white on hover */
    color: #1177fe;            /* Icon takes your blue background color */
    transform: translateY(-3px); /* Slight lift effect */
}