bismillahcss/src/core/index.css

The next-gen utility-first CSS framework for modern, futuristic web development.

/* ============================= */
/* 🎨 BismillahCSS - Base Styles */
/* ============================= */

/* 1️⃣ Default Variables */
:root {
--bismillah-primary-color: #3498db;
  --bismillah-secondary-color: #2ecc71;
  --bismillah-accent-color: #e74c3c;
  --bismillah-bg-color: #f8f9fa;
  --bismillah-text-color: #333;
  --bismillah-border-radius: 8px;
  --bismillah-font-family: 'Inter', sans-serif;
    --bismillah-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
      "Open Sans", "Helvetica Neue", sans-serif;
    --bismillah-primary-color: #4f46e5;
    --bismillah-primary-hover: #4338ca;
    --bismillah-secondary-color: #10b981;
    --bismillah-secondary-hover: #059669;
    --bismillah-accent-color: #f43f5e;
    --bismillah-light-bg: #f9fafb;
    --bismillah-light-surface: #ffffff;
    --bismillah-light-border: #e5e7eb;
    --bismillah-light-text: #1f2937;
    --bismillah-light-text-secondary: #6b7280;
    --bismillah-dark-bg: #111827;
    --bismillah-dark-surface: #1f2937;
    --bismillah-dark-border: #374151;
    --bismillah-dark-text: #f9fafb;
    --bismillah-dark-text-secondary: #9ca3af;
    --bismillah-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bismillah-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --bismillah-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --bismillah-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --bismillah-shadow-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --bismillah-radius-sm: 0.25rem;
    --bismillah-radius: 0.5rem;
    --bismillah-radius-md: 0.75rem;
    --bismillah-radius-lg: 1rem;
    --bismillah-radius-xl: 1.5rem;
    --bismillah-transition: all 0.3s ease;
}

/* 2️⃣ Global Styles */
* {
margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 3️⃣ Body Styling */
body {
font-family: var(--bismillah-font-family);
  background-color: var(--bismillah-bg-color);
  color: var(--bismillah-text-color);
  line-height: 1.6;
}
/* ============================= */
/* ✍️ BismillahCSS - Typography */
/* ============================= */

.bismillah-text-xs {
font-size: 12px;
}
.bismillah-text-4xl {
font-size: 36px;
}
.bismillah-text-5xl {
font-size: 48px;
}
.bismillah-font-thin {
font-weight: 100;
}
.bismillah-font-semibold {
font-weight: 600;
}
.bismillah-font-extrabold {
font-weight: 800;
}
.bismillah-font-black {
font-weight: 900;
}
.bismillah-text-left {
text-align: left;
}
.bismillah-uppercase {
text-transform: uppercase;
}
.bismillah-tracking-tight {
letter-spacing: -0.05em;
}
/* ============================= */
/* 🌑 BismillahCSS - Dark Mode */
/* ============================= */

:root {
--primary-color: #007bff;
  --secondary-color: #6c757d;
  --accent-color: #ff5722;
  --background-color: #ffffff;
  --text-color: #000000;
}
[data-theme="dark"] {
--primary-color: #0d6efd;
  --secondary-color: #adb5bd;
  --accent-color: #ff6d00;
  --background-color: #121212;
  --text-color: #ffffff;
}
.bismillah-bg-accent {
background-color: var(--accent-color);
}
.bismillah-bg-light {
background-color: #f8f9fa;
}
.bismillah-bg-dark {
background-color: #343a40;
}
.bismillah-text-primary {
color: var(--primary-color);
}
.bismillah-text-accent {
color: var(--accent-color);
}
.bismillah-text-light {
color: #f8f9fa;
}
.bismillah-text-dark {
color: #343a40;
}
/* ============================= */
/* 📦 BismillahCSS - Flexbox Utilities */
/* ============================= */

.bismillah-flex {
display: flex;
}
.bismillah-flex-col {
flex-direction: column;
}
.bismillah-flex-nowrap {
flex-wrap: nowrap;
}
.bismillah-justify-start {
justify-content: flex-start;
}
.bismillah-justify-center {
justify-content: center;
}
.bismillah-justify-end {
justify-content: flex-end;
}
.bismillah-justify-between {
justify-content: space-between;
}
.bismillah-justify-around {
justify-content: space-around;
}
.bismillah-justify-evenly {
justify-content: space-evenly;
}
.bismillah-items-start {
align-items: flex-start;
}
.bismillah-items-center {
align-items: center;
}
.bismillah-items-end {
align-items: flex-end;
}
.bismillah-items-stretch {
align-items: stretch;
}
.bismillah-self-start {
align-self: flex-start;
}
.bismillah-self-center {
align-self: center;
}
.bismillah-self-end {
align-self: flex-end;
}
.bismillah-self-stretch {
align-self: stretch;
}
.bismillah-gap-1 {
gap: 4px;
}
.bismillah-gap-2 {
gap: 8px;
}
.bismillah-gap-3 {
gap: 12px;
}
.bismillah-gap-4 {
gap: 16px;
}
.bismillah-gap-5 {
gap: 20px;
}
/* ============================= */
/* 📏 BismillahCSS - Spacing (Margin & Padding) */
/* ============================= */

/* Padding */
.bismillah-p-0 {
padding: 0;
}
.bismillah-p-6 {
padding: 24px;
}
.bismillah-p-8 {
padding: 32px;
}
.bismillah-p-10 {
padding: 40px;
}
/* Margin */
.bismillah-m-0 {
margin: 0;
}
.bismillah-m-6 {
margin: 24px;
}
.bismillah-m-8 {
margin: 32px;
}
.bismillah-m-10 {
margin: 40px;
}
/* ============================= */
/* 🎨 BismillahCSS - Borders */
/* ============================= */

.bismillah-border {
border: 1px solid #ccc;
}
.bismillah-border-accent {
border-color: var(--accent-color);
}
.bismillah-border-light {
border-color: #f8f9fa;
}
.bismillah-border-dark {
border-color: #343a40;
}
/* ============================= */
/* 🔥 BismillahCSS - Shadows */
/* ============================= */

.bismillah-shadow-none {
box-shadow: none;
}
.bismillah-flex-row-reverse {
flex-direction: row-reverse;
}
.bismillah-flex-col-reverse {
flex-direction: column-reverse;
}
.bismillah-flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
/* ============================= */
/* 🔳 BismillahCSS - Grid System */
/* ============================= */

.bismillah-grid {
display: grid; gap: 10px;
}
.bismillah-grid-cols-1 {
grid-template-columns: repeat(1, 1fr);
}
.bismillah-grid-cols-5 {
grid-template-columns: repeat(5, 1fr);
}
.bismillah-grid-cols-6 {
grid-template-columns: repeat(6, 1fr);
}
.bismillah-grid-rows-1 {
grid-template-rows: repeat(1, 1fr);
}
.bismillah-grid-rows-2 {
grid-template-rows: repeat(2, 1fr);
}
.bismillah-grid-rows-3 {
grid-template-rows: repeat(3, 1fr);
}
.bismillah-grid-rows-4 {
grid-template-rows: repeat(4, 1fr);
}
.bismillah-grid-rows-5 {
grid-template-rows: repeat(5, 1fr);
}
.bismillah-grid-rows-6 {
grid-template-rows: repeat(6, 1fr);
}
.bismillah-gap-6 {
gap: 24px;
}
.bismillah-gap-8 {
gap: 32px;
}
.bismillah-gap-10 {
gap: 40px;
}
/* ============================= */
/* 📍 BismillahCSS - Positioning */
/* ============================= */

.bismillah-static {
position: static;
}
.bismillah-top-0 {
top: 0;
}
.bismillah-right-0 {
right: 0;
}
.bismillah-bottom-0 {
bottom: 0;
}
.bismillah-left-0 {
left: 0;
}
.bismillah-top-1 {
top: 4px;
}
.bismillah-right-1 {
right: 4px;
}
.bismillah-bottom-1 {
bottom: 4px;
}
.bismillah-left-1 {
left: 4px;
}
.bismillah-top-2 {
top: 8px;
}
.bismillah-right-2 {
right: 8px;
}
.bismillah-bottom-2 {
bottom: 8px;
}
.bismillah-left-2 {
left: 8px;
}
.bismillah-z-0 {
z-index: 0;
}
.bismillah-z-10 {
z-index: 10;
}
.bismillah-z-20 {
z-index: 20;
}
.bismillah-z-30 {
z-index: 30;
}
.bismillah-z-40 {
z-index: 40;
}
.bismillah-z-50 {
z-index: 50;
}
/* ============================= */
/* 🎨 BismillahCSS - Hover Effects */
/* ============================= */

.bismillah-hover-bg-primary:hover {
background-color: #007bff; color: #fff;
}
.bismillah-hover-bg-secondary:hover {
background-color: #6c757d; color: #fff;
}
.bismillah-hover-bg-success:hover {
background-color: #28a745; color: #fff;
}
.bismillah-hover-bg-danger:hover {
background-color: #dc3545; color: #fff;
}
.bismillah-hover-bg-warning:hover {
background-color: #ffc107; color: #000;
}
.bismillah-hover-bg-info:hover {
background-color: #17a2b8; color: #fff;
}
.bismillah-hover-text-primary:hover {
color: #007bff;
}
.bismillah-hover-text-secondary:hover {
color: #6c757d;
}
.bismillah-hover-text-success:hover {
color: #28a745;
}
.bismillah-hover-text-danger:hover {
color: #dc3545;
}
.bismillah-hover-text-warning:hover {
color: #ffc107;
}
.bismillah-hover-text-info:hover {
color: #17a2b8;
}
/* ============================= */
/* 🔄 BismillahCSS - Transitions */
/* ============================= */

.bismillah-transition {
transition: all 0.3s ease-in-out;
}
.bismillah-ease-in {
transition-timing-function: ease-in;
}
.bismillah-ease-out {
transition-timing-function: ease-out;
}
.bismillah-ease-in-out {
transition-timing-function: ease-in-out;
}
/* ============================= */
/* 🎬 BismillahCSS - Animations */
/* ============================= */

@keyframes fadeIn {
from { opacity: 0;
}
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0;
}
}
.bismillah-slide-up {
animation: slideUp 0.5s ease-in-out;
}

.bismillah-bounce {
animation: bounce 1s infinite;
}
/* ============================= */
/* 🖱️ BismillahCSS - Custom Cursors */
/* ============================= */

.bismillah-cursor-pointer {
cursor: pointer;
}
.bismillah-cursor-wait {
cursor: wait;
}
.bismillah-cursor-text {
cursor: text;
}
.bismillah-cursor-move {
cursor: move;
}
.bismillah-cursor-crosshair {
cursor: crosshair;
}
/* ============================= */
/* 📏 BismillahCSS - Object Fit & Position */
/* ============================= */

.bismillah-object-contain {
object-fit: contain;
}
.bismillah-object-cover {
object-fit: cover;
}
.bismillah-object-fill {
object-fit: fill;
}
.bismillah-object-none {
object-fit: none;
}
.bismillah-object-center {
object-position: center;
}
.bismillah-object-top {
object-position: top;
}
/* ============================= */
/* 📏 BismillahCSS - Responsive Breakpoints */
/* ============================= */

@media (max-width: 640px) {
.bismillah-sm-hidden { display: none !important;
}
}

@media (min-width: 640px) {
.bismillah-sm-block { display: block !important;
}
}

/* ============================= */
/* 📐 BismillahCSS - Flexbox Utilities */
/* ============================= */

.bismillah-flex {
display: flex;
}
/* ============================= */
/* 📝 BismillahCSS - Text Utilities */
/* ============================= */

.bismillah-text-left {
text-align: left;
}
.bismillah-italic {
font-style: italic;
}
.bismillah-underline {
text-decoration: underline;
}
.bismillah-line-through {
text-decoration: line-through;
}
.bismillah-no-underline {
text-decoration: none;
}
/* ============================= */
/* 🎭 BismillahCSS - Visibility & Overflow */
/* ============================= */

.bismillah-hidden {
display: none;
}
.bismillah-block {
display: block;
}
/* ============================= */
/* 🎭 Advanced Layout System (New Concept) */
/* ============================= */

.bismillah-grid-equal {
display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px;
}
.bismillah-grid-stack {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px;
}
/* Dynamic Masonry Layout */

/* ============================= */
/* 🔲 Smart Borders - (New Concept) */
/* ============================= */

.bismillah-border-dynamic {
border: 2px solid var(--primary-color, black); border-radius: 10px; transition: all 0.3s ease-in-out;
}
.bismillah-border-glow:hover {
border: 2px solid cyan; box-shadow: 0 0 10px cyan;
}
.bismillah-border-gradient {
border: 3px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(45deg, #ff416c, #ff4b2b) border-box; border-radius: 12px;
}
/* ============================= */
/* 💡 Animated Shadows (New Feature) */
/* ============================= */

.bismillah-shadow-float {
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); transform: translateY(0px); transition: transform 0.3s ease-in-out;
}
.bismillah-shadow-float:hover {
transform: translateY(-5px); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}
.bismillah-shadow-neon {
box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff; transition: box-shadow 0.3s ease-in-out;
}
.bismillah-shadow-neon:hover {
box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;
}
/* ============================= */
/* 🎨 Smart Gradient Backgrounds */
/* ============================= */

.bismillah-bg-dynamic {
background: linear-gradient(135deg, var(--start-color, #ff4b2b), var(--end-color, #ff416c)); transition: background 0.5s ease-in-out;
}
.bismillah-bg-hover-gradient:hover {
background: linear-gradient(135deg, #ff416c, #ff4b2b);
}
/* ============================= */
/* 🔮 Magic Text Effects */
/* ============================= */

.bismillah-text-glitch {
position: relative; color: white; text-shadow: 2px 2px red, -2px -2px blue; animation: glitch 0.3s infinite alternate;
}


.bismillah-text-3d {
text-shadow: 2px 2px 0px black, 4px 4px 0px gray, 6px 6px 0px silver; transform: perspective(500px) rotateX(10deg);
}
/* ============================= */
/* ⚡ Hover-Powered Layout Switch */
/* ============================= */

.bismillah-switch-grid:hover {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;
}
.bismillah-switch-flex:hover {
display: flex; justify-content: space-around;
}
/* ============================= */
/* 🔥 AI-Powered Dark Mode (New) */
/* ============================= */

@media (prefers-color-scheme: dark) {
:root {
      --primary-color: #1e1e1e;
      --secondary-color: #2a2a2a;
      --text-color: #ffffff;
      --accent-color: #ff4b2b;
}
}
  
  body.dark-mode {
background-color: var(--primary-color);
    color: var(--text-color);
    transition: background 0.5s ease, color 0.5s ease;
}
.bismillah-toggle-dark {
position: fixed;
    top: 10px;
    right: 10px;
    padding: 10px 20px;
    background: var(--accent-color);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}
.bismillah-toggle-dark:hover {
background: #ff416c;
}
/* ============================= */
  /* 🌀 Smart Button System (New) */
  /* ============================= */
  
  .bismillah-btn {
display: inline-block;
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}
.bismillah-btn-primary {
background: linear-gradient(135deg, #ff4b2b, #ff416c);
    color: white;
}
.bismillah-btn-primary:hover {
background: linear-gradient(135deg, #ff416c, #ff4b2b);
    transform: scale(1.05);
}
/* Glassmorphism Buttons */
  .bismillah-btn-glass {
background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.bismillah-btn-glass:hover {
background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}
/* ============================= */
  /* 🛑 Alert System (New) */
  /* ============================= */
  
  .bismillah-alert {
padding: 15px;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bismillah-alert-success {
background: #d4edda;
    color: #155724;
}
.bismillah-alert-warning {
background: #fff3cd;
    color: #856404;
}
.bismillah-alert-error {
background: #f8d7da;
    color: #721c24;
}
/* ============================= */
  /* 🧊 Glassmorphism Card Effect (New) */
  /* ============================= */
  
  .bismillah-card-glass {
background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}
.bismillah-card-glass:hover {
transform: translateY(-5px);
}
/* ============================= */
  /* ⚡ Animated Loader (New) */
  /* ============================= */
  
  .bismillah-loader {
width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #ff4b2b;
    animation: spin 1s linear infinite;
}
  
  /* ============================= */
  /* 🎭 Hover-Powered UI Transformation */
  /* ============================= */
  
  .bismillah-card-hover:hover {
transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
}
.bismillah-button-hover:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
/* ============================= */
  /* 🎨 Neon Glow Effects (New) */
  /* ============================= */
  
  .bismillah-neon-text {
font-size: 20px;
    font-weight: bold;
    color: #ff4b2b;
    text-shadow: 0 0 5px #ff4b2b, 0 0 10px #ff416c, 0 0 20px #ff416c;
}
.bismillah-neon-box:hover {
box-shadow: 0 0 20px #ff416c, 0 0 40px #ff4b2b;
}
/* ============================= */
/* 🎭 3D Card Hover Effect (New) */
/* ============================= */

.bismillah-card-3d {
perspective: 1000px;
    width: 300px;
    height: 200px;
}
.bismillah-card-3d .inner {
width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s;
    transform-style: preserve-3d;
}
.bismillah-card-3d:hover .inner {
transform: rotateY(20deg) rotateX(10deg);
}
/* ============================= */
  /* 🔢 Number Input with Steppers (New) */
  /* ============================= */
  
  .bismillah-input-number {
display: flex;
    align-items: center;
    width: 150px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}
.bismillah-input-number button {
background: #ff4b2b;
    color: white;
    border: none;
    padding: 8px;
    cursor: pointer;
    transition: background 0.3s;
}
.bismillah-input-number button:hover {
background: #ff416c;
}
.bismillah-input-number input {
width: 50px;
    text-align: center;
    border: none;
    outline: none;
}
/* ============================= */
  /* 🛠 Custom Checkbox & Radio (New) */
  /* ============================= */
  
  .bismillah-custom-checkbox input,
  .bismillah-custom-radio input {
display: none;
}
.bismillah-custom-checkbox label,
  .bismillah-custom-radio label {
display: flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
}
.bismillah-custom-checkbox label::before,
  .bismillah-custom-radio label::before {
content: '';
    width: 16px;
    height: 16px;
    border: 2px solid #ff4b2b;
    border-radius: 4px;
    transition: background 0.3s ease-in-out;
}
.bismillah-custom-radio label::before {
border-radius: 50%;
}
.bismillah-custom-checkbox input:checked + label::before {
background: #ff4b2b;
}
.bismillah-custom-radio input:checked + label::before {
background: #ff4b2b;
}
/* ============================= */
  /* 🎨 Custom Select Dropdown (New) */
  /* ============================= */
  
  .bismillah-select-box {
position: relative;
    width: 200px;
}
.bismillah-select-box select {
width: 100%;
    padding: 10px;
    border: 2px solid #ff4b2b;
    border-radius: 5px;
    appearance: none;
    background: white;
    font-size: 16px;
    cursor: pointer;
}
.bismillah-select-box::after {
content: "▼";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #ff4b2b;
}
/* ============================= */
  /* 🎨 Floating Labels for Forms (New) */
  /* ============================= */
  
  .bismillah-input-group {
position: relative;
    margin: 20px 0;
}
.bismillah-input-group input {
width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    outline: none;
    font-size: 16px;
    transition: border-color 0.3s;
}
.bismillah-input-group label {
position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    background: white;
    padding: 0 5px;
    font-size: 14px;
    transition: 0.3s;
    color: #777;
}
.bismillah-input-group input:focus + label,
  .bismillah-input-group input:not(:placeholder-shown) + label {
top: 0;
    left: 10px;
    font-size: 12px;
    color: #ff4b2b;
}
/* ============================= */
  /* 📏 Range Slider Customization (New) */
  /* ============================= */
  
  .bismillah-input-range {
width: 100%;
    height: 5px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    appearance: none;
}
.bismillah-input-range::-webkit-slider-thumb {
appearance: none;
    width: 16px;
    height: 16px;
    background: #ff4b2b;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}
.bismillah-input-range::-webkit-slider-thumb:hover {
background: #ff416c;
}
/* ============================= */
  /* 🚀 Animated Toggle Switch (New) */
  /* ============================= */
  
  .bismillah-toggle-switch {
position: relative;
    width: 50px;
    height: 25px;
}
.bismillah-toggle-switch input {
display: none;
}
.bismillah-toggle-switch label {
display: block;
    width: 100%;
    height: 100%;
    background: #ddd;
    border-radius: 25px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}
.bismillah-toggle-switch label::before {
content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    transition: left 0.3s ease-in-out;
}
.bismillah-toggle-switch input:checked + label {
background: #ff4b2b;
}
.bismillah-toggle-switch input:checked + label::before {
left: 25px;
}
/* ============================= */
/* 🎭 Bounce-in Animation (New) */
/* ============================= */

@keyframes bounce-in {
0% {
      transform: scale(0.5);
      opacity: 0;
}
}
  
  .bismillah-bounce-in {
animation: bounce-in 0.6s ease-in-out;
}
/* ============================= */
  /* 🔄 Rotate on Hover (New) */
  /* ============================= */
  
  .bismillah-rotate-hover {
transition: transform 0.3s ease-in-out;
}
.bismillah-rotate-hover:hover {
transform: rotate(15deg);
}
/* ============================= */
  /* 🚀 Slide-in Scroll Animation (New) */
  /* ============================= */
  
  @keyframes slide-in {
from {
      transform: translateY(30px);
      opacity: 0;
}
}
  
  .bismillah-slide-in {
animation: slide-in 0.8s ease-out;
}
/* ============================= */
  /* 🎨 Glassmorphism Effect (New) */
  /* ============================= */
  
  .bismillah-glass {
background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
/* ============================= */
  /* 🔥 Neon Glow Effect (New) */
  /* ============================= */
  
  .bismillah-neon {
color: #fff;
    text-shadow: 0 0 5px #ff416c, 0 0 10px #ff4b2b, 0 0 20px #ff4b2b;
}
/* ============================= */
  /* 📜 Typing Animation (New) */
  /* ============================= */
  
  .bismillah-typing::after {
content: "|";
    display: inline-block;
    animation: blink 0.7s infinite;
}
@keyframes blink {
50% {
      opacity: 0;
}
}
  
  /* ============================= */
  /* 🌊 Wavy Text Animation (New) */
  /* ============================= */
  
  @keyframes wave {
0%, 100% {
      transform: translateY(0);
}
}
  
  .bismillah-wavy-text span {
display: inline-block;
    animation: wave 1.5s infinite;
}
.bismillah-wavy-text span:nth-child(2) {
animation-delay: 0.1s;
}
.bismillah-wavy-text span:nth-child(3) {
animation-delay: 0.2s;
}
.bismillah-wavy-text span:nth-child(4) {
animation-delay: 0.3s;
}
.bismillah-wavy-text span:nth-child(5) {
animation-delay: 0.4s;
}
/* ============================= */
  /* 🌟 Hover Shine Effect (New) */
  /* ============================= */
  
  .bismillah-shiny-hover {
position: relative;
    overflow: hidden;
}
.bismillah-shiny-hover::before {
content: "";
    position: absolute;
    top: 50%;
    left: -50%;
    width: 100%;
    height: 200%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-30deg);
    transition: left 0.7s ease-in-out;
}
.bismillah-shiny-hover:hover::before {
left: 150%;
}
/* ==================================== */
/* 🏗️  Responsive Grid System (New) */
/* ==================================== */

.bismillah-container {
width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}
/* 📏 Default Grid Layout */
  .bismillah-grid {
display: grid;
    gap: 16px;
    grid-template-columns: repeat(12, 1fr);
}
.bismillah-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.bismillah-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.bismillah-grid-4 {
grid-template-columns: repeat(4, 1fr);
}
/* 🔄 Auto-fit & Auto-fill Layouts */
  .bismillah-grid-auto {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* 📱 Responsive Grid Adjustments */
  @media (max-width: 1024px) {
.bismillah-grid {
      grid-template-columns: repeat(6, 1fr);
}
}
  
  @media (max-width: 768px) {
.bismillah-grid {
      grid-template-columns: repeat(3, 1fr);
}
}
  
  /* ==================================== */
  /* 🎯 Advanced Flexbox Utilities (New) */
  /* ==================================== */
  
  .bismillah-flex {
display: flex;
}
/* ============================= */
  /* 🔄 Column Span Utilities (New) */
  /* ============================= */
  
  .bismillah-col-span-1 {
grid-column: span 1;
}
.bismillah-col-span-2 {
grid-column: span 2;
}
.bismillah-col-span-3 {
grid-column: span 3;
}
.bismillah-col-span-4 {
grid-column: span 4;
}
.bismillah-col-span-6 {
grid-column: span 6;
}
.bismillah-col-span-12 {
grid-column: span 12;
}
/* ================================= */
  /* 🏗️  Layout Modifiers (New) */
  /* ================================= */
  
  .bismillah-full-width {
width: 100%;
}
.bismillah-half-width {
width: 50%;
}
.bismillah-max-width {
max-width: 1200px;
    margin: auto;
}
/* ================================= */
  /* 📱 Responsive Display (New) */
  /* ================================= */
  
  .bismillah-hidden {
display: none;
}

  
  /* ==================================== */
/* 🌙 Dark Mode Support (New) */
/* ==================================== */

:root {
--bismillah-bg-light: #ffffff;
    --bismillah-bg-dark: #121212;
    --bismillah-text-light: #000000;
    --bismillah-text-dark: #ffffff;
    --bismillah-primary: #007bff;
    --bismillah-secondary: #6c757d;
}
/* Light Mode (Default) */
  body {
background-color: var(--bismillah-bg-light);
    color: var(--bismillah-text-light);
    transition: background-color 0.3s, color 0.3s;
}
/* Dark Mode */
  body.dark-mode {
background-color: var(--bismillah-bg-dark);
    color: var(--bismillah-text-dark);
}
/* Button to Toggle Dark Mode */
  .bismillah-dark-toggle {
cursor: pointer;
    padding: 10px 15px;
    background-color: var(--bismillah-primary);
    color: #fff;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.bismillah-dark-toggle:hover {
background-color: darken(var(--bismillah-primary), 10%);
}
/* ==================================== */
  /* 🌟 Glassmorphism Effect (New) */
  /* ==================================== */
  
  .bismillah-glass {
background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Dark Mode Glassmorphism */
  body.dark-mode .bismillah-glass {
background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
/* ==================================== */
  /* 🎨 Advanced Background Styles (New) */
  /* ==================================== */
  
  /* Gradient Backgrounds */
  .bismillah-bg-gradient-primary {
background: linear-gradient(45deg, #007bff, #6610f2);
}
.bismillah-bg-gradient-secondary {
background: linear-gradient(45deg, #6c757d, #343a40);
}
/* Image Background */
  .bismillah-bg-cover {
background-size: cover;
    background-position: center;
}
/* ==================================== */
  /* 🎭 Advanced Hover Effects (New) */
/* ==================================== */
  
  .bismillah-hover-scale:hover {
transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}
.bismillah-hover-fade:hover {
opacity: 0.7;
    transition: opacity 0.3s ease-in-out;
}
/* ==================================== */
  /* 🔄 CSS Animations (New) */
  /* ==================================== */
  
  /* Fade In Animation */
  @keyframes fadeIn {
from {
      opacity: 0;
}
}
  
  .bismillah-fade-in {
animation: fadeIn 0.5s ease-in-out;
}
/* Bounce Effect */
  @keyframes bounce {
0%, 100% {
      transform: translateY(0);
}
}
  
  .bismillah-bounce {
animation: bounce 1s infinite;
}
/* ==================================== */
/* 🅰️ Responsive Typography (New) */
/* ==================================== */

/* Base Font Styles */
:root {
--bismillah-font-primary: "Inter", sans-serif;
    --bismillah-font-secondary: "Poppins", sans-serif;
    --bismillah-text-sm: 14px;
    --bismillah-text-md: 16px;
    --bismillah-text-lg: 20px;
    --bismillah-text-xl: 24px;
    --bismillah-text-2xl: 32px;
    --bismillah-text-3xl: 40px;
}
/* Default Text Styles */
  body {
font-family: var(--bismillah-font-primary);
    font-size: var(--bismillah-text-md);
    line-height: 1.6;
}
/* Headings */
  h1, h2, h3, h4, h5, h6 {
font-family: var(--bismillah-font-secondary);
    font-weight: 700;
}
h1 {
font-size: var(--bismillah-text-3xl);
}
h2 {
font-size: var(--bismillah-text-2xl);
}
h3 {
font-size: var(--bismillah-text-xl);
}
h4 {
font-size: var(--bismillah-text-lg);
}
h5 {
font-size: var(--bismillah-text-md);
}
h6 {
font-size: var(--bismillah-text-sm);
}
/* ==================================== */
  /* 📏 Adaptive Spacing System (New) */
  /* ==================================== */
  
  :root {
--bismillah-spacing-xs: 4px;
    --bismillah-spacing-sm: 8px;
    --bismillah-spacing-md: 16px;
    --bismillah-spacing-lg: 24px;
    --bismillah-spacing-xl: 32px;
    --bismillah-spacing-2xl: 48px;
    --bismillah-spacing-3xl: 64px;
}
/* Spacing Utility Classes */
  .bismillah-p-xs {
padding: var(--bismillah-spacing-xs);
}
.bismillah-p-sm {
padding: var(--bismillah-spacing-sm);
}
.bismillah-p-md {
padding: var(--bismillah-spacing-md);
}
.bismillah-p-lg {
padding: var(--bismillah-spacing-lg);
}
.bismillah-p-xl {
padding: var(--bismillah-spacing-xl);
}
.bismillah-m-xs {
margin: var(--bismillah-spacing-xs);
}
.bismillah-m-sm {
margin: var(--bismillah-spacing-sm);
}
.bismillah-m-md {
margin: var(--bismillah-spacing-md);
}
.bismillah-m-lg {
margin: var(--bismillah-spacing-lg);
}
.bismillah-m-xl {
margin: var(--bismillah-spacing-xl);
}
/* ==================================== */
  /* 🏆 Advanced Box Shadows (New) */
  /* ==================================== */
  
  :root {
--bismillah-shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.1);
    --bismillah-shadow-md: 0px 4px 8px rgba(0, 0, 0, 0.2);
    --bismillah-shadow-lg: 0px 6px 12px rgba(0, 0, 0, 0.3);
    --bismillah-shadow-xl: 0px 8px 16px rgba(0, 0, 0, 0.4);
}
/* Shadow Utility Classes */
  .bismillah-shadow-sm {
box-shadow: var(--bismillah-shadow-sm);
}
/* Hover Effects */
  .bismillah-shadow-hover:hover {
box-shadow: var(--bismillah-shadow-lg); transition: box-shadow 0.3s ease-in-out;
}
/* ==================================== */
  /* 📐 Responsive Design (New) */
  /* ==================================== */
  
  @media (max-width: 768px) {
body { font-size: var(--bismillah-text-sm);
}
}

/* ==================================== */
/* 🎨 Advanced Borders System (New) */
/* ==================================== */

:root {
--bismillah-border-sm: 1px solid rgba(0, 0, 0, 0.1);
    --bismillah-border-md: 2px solid rgba(0, 0, 0, 0.2);
    --bismillah-border-lg: 3px solid rgba(0, 0, 0, 0.3);
    --bismillah-border-xl: 4px solid rgba(0, 0, 0, 0.4);
    --bismillah-radius-sm: 4px;
    --bismillah-radius-md: 8px;
    --bismillah-radius-lg: 16px;
    --bismillah-radius-xl: 24px;
}
/* Border Utility Classes */
  .bismillah-border-sm {
border: var(--bismillah-border-sm);
}
.bismillah-border-md {
border: var(--bismillah-border-md);
}
.bismillah-border-lg {
border: var(--bismillah-border-lg);
}
.bismillah-border-xl {
border: var(--bismillah-border-xl);
}
/* Border Radius */
  .bismillah-rounded-sm {
border-radius: var(--bismillah-radius-sm);
}
.bismillah-rounded-xl {
border-radius: var(--bismillah-radius-xl);
}
/* ==================================== */
  /* 🎬 Custom Animations (New) */
  /* ==================================== */
  
  /* Keyframes */
  @keyframes fadeIn {
from { opacity: 0; transform: translateY(10px);
}
}
  
  @keyframes bounce {
0%, 100% { transform: translateY(0);
}
}
  
  @keyframes pulse {
0% { transform: scale(1);
}
}
  
  /* Animation Utility Classes */
  .bismillah-fade-in {
animation: fadeIn 0.5s ease-in-out;
}
.bismillah-bounce {
animation: bounce 1s infinite;
}
.bismillah-pulse {
animation: pulse 1.2s infinite;
}
/* ==================================== */
  /* 🖱️ Interactive Effects (New) */
  /* ==================================== */
  
  /* Hover Effects */
  .bismillah-hover-scale:hover {
transform: scale(1.05); transition: transform 0.3s ease-in-out;
}
/* Focus Effects */
  .bismillah-focus-ring:focus {
outline: 3px solid var(--bismillah-primary); outline-offset: 2px;
}
/* ==================================== */
  /* 🎭 Custom Glassmorphism (New) */
  /* ==================================== */
  
  .bismillah-glass {
background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--bismillah-radius-md);
    border: var(--bismillah-border-sm);
    padding: var(--bismillah-spacing-md);
}
/* ==================================== */
  /* 📐 Responsive Design (Enhancements) */
  /* ==================================== */
  
  @media (max-width: 768px) {
.bismillah-rounded-lg { border-radius: var(--bismillah-radius-md);
}
}


/* ==================================== */
/* 🎨 Global Variables & Reset */
/* ==================================== */

:root {
--bismillah-primary: #007bff;
    --bismillah-secondary: #6c757d;
    --bismillah-success: #28a745;
    --bismillah-danger: #dc3545;
    --bismillah-warning: #ffc107;
    --bismillah-info: #17a2b8;
    --bismillah-light: #f8f9fa;
    --bismillah-dark: #343a40;
  
    --bismillah-border-sm: 1px solid rgba(0, 0, 0, 0.1);
    --bismillah-border-md: 2px solid rgba(0, 0, 0, 0.2);
    --bismillah-border-lg: 3px solid rgba(0, 0, 0, 0.3);
  
    --bismillah-radius-sm: 4px;
    --bismillah-radius-md: 8px;
    --bismillah-radius-lg: 16px;
    --bismillah-radius-xl: 24px;
    --bismillah-radius-full: 9999px;
  
    --bismillah-shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.1);
    --bismillah-shadow-md: 0px 3px 6px rgba(0, 0, 0, 0.2);
    --bismillah-shadow-lg: 0px 5px 15px rgba(0, 0, 0, 0.3);
  
    --bismillah-spacing-xs: 4px;
    --bismillah-spacing-sm: 8px;
    --bismillah-spacing-md: 16px;
    --bismillah-spacing-lg: 24px;
    --bismillah-spacing-xl: 32px;
}
/* ==================================== */
  /* 🔄 CSS Reset */
  /* ==================================== */
  
  * {
margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
    background-color: var(--bismillah-light);
    color: var(--bismillah-dark);
}
/* ==================================== */
  /* 🖲️ Custom Button System */
  /* ==================================== */
  
  .bismillah-btn {
display: inline-block;
    padding: var(--bismillah-spacing-sm) var(--bismillah-spacing-md);
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--bismillah-radius-md);
    transition: all 0.3s ease-in-out;
    border: none;
}
.bismillah-btn-secondary {
background-color: var(--bismillah-secondary);
    color: white;
}
.bismillah-btn-success {
background-color: var(--bismillah-success);
    color: white;
}
.bismillah-btn-danger {
background-color: var(--bismillah-danger);
    color: white;
}
.bismillah-btn-warning {
background-color: var(--bismillah-warning);
    color: black;
}
.bismillah-btn-info {
background-color: var(--bismillah-info);
    color: white;
}
.bismillah-btn:hover {
filter: brightness(90%);
    transform: translateY(-2px);
}
/* ==================================== */
  /* 🕶️ Advanced Shadow System */
  /* ==================================== */
  
  .bismillah-shadow-sm {
box-shadow: var(--bismillah-shadow-sm);
}
/* ==================================== */
  /* 🔲 Card UI System */
  /* ==================================== */
  
  .bismillah-card {
background: white;
    border-radius: var(--bismillah-radius-md);
    box-shadow: var(--bismillah-shadow-md);
    padding: var(--bismillah-spacing-lg);
    margin: var(--bismillah-spacing-md);
    transition: transform 0.3s ease-in-out;
}
/* ==================================== */
  /* 🖥️ Responsive Layout Utilities */
  /* ==================================== */
  
  .bismillah-flex {
display: flex;
}
/* ==================================== */
  /* 📢 Notification Alert System */
  /* ==================================== */
  
  .bismillah-alert {
padding: var(--bismillah-spacing-sm) var(--bismillah-spacing-md);
    border-radius: var(--bismillah-radius-sm);
    font-weight: bold;
    margin: var(--bismillah-spacing-sm) 0;
}
.bismillah-alert-primary {
background-color: var(--bismillah-primary); color: white;
}
.bismillah-alert-danger {
background-color: var(--bismillah-danger); color: white;
}
/* ==================================== */
  /* 🎭 Custom Glassmorphism Card */
  /* ==================================== */
  
  .bismillah-glass-card {
background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--bismillah-radius-lg);
    box-shadow: var(--bismillah-shadow-lg);
    padding: var(--bismillah-spacing-lg);
}
/* ==================================== */
  /* 🌙 Dark Mode Support */
  /* ==================================== */
  
  @media (prefers-color-scheme: dark) {
body {
      background-color: var(--bismillah-dark);
      color: white;
}
.bismillah-card {
background-color: var(--bismillah-secondary);
      color: white;
}
.bismillah-btn {
color: white;
}
}
/* BismillahCSS - Part 18 */

/* Unique 3D Depth Effect for Cards */
.bismillah-card-3d {
background: var(--bismillah-bg, #fff);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 20px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.bismillah-card-3d:hover {
transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}
/* Advanced Blur Effect */
  .bismillah-blur {
backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 15px;
}
/* Animated Glow Button */
  .bismillah-glow-btn {
background: linear-gradient(45deg, #ff416c, #ff4b2b);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 65, 108, 0.8);
    transition: all 0.3s ease-in-out;
}
.bismillah-glow-btn:hover {
box-shadow: 0 0 20px rgba(255, 65, 108, 1);
    transform: scale(1.05);
}
/* Dynamic Gradient Border */
  .bismillah-gradient-border {
border: 4px solid;
    border-image-source: linear-gradient(to right, #6a11cb, #2575fc);
    border-image-slice: 1;
}
/* Elastic Input Field */
  .bismillah-input-elastic {
padding: 10px;
    border-radius: 5px;
    border: 2px solid var(--bismillah-primary, #007bff);
    transition: all 0.3s;
}
.bismillah-input-elastic:focus {
outline: none;
    transform: scale(1.05);
    border-color: var(--bismillah-accent, #ff4b2b);
}
/* BismillahCSS - Part 19 */

/* Neon Button Effect */
.bismillah-neon-btn {
background-color: #111;
    color: #0ff;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
}
.bismillah-neon-btn:hover {
box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;
}
/* Frosted Glass Effect */
  .bismillah-frosted {
background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    backdrop-filter: blur(20px);
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
/* Pulsating Animation */
  @keyframes bismillah-pulse {
0% {
      transform: scale(1);
}
}
  .bismillah-pulse {
animation: bismillah-pulse 1.5s infinite;
}
/* Advanced Tooltip */
  .bismillah-tooltip {
position: relative;
    display: inline-block;
    cursor: pointer;
}
.bismillah-tooltip:hover::after {
content: attr(data-tooltip);
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s;
}
/* Ripple Effect for Buttons */
  .bismillah-ripple {
position: relative;
    overflow: hidden;
}
.bismillah-ripple::after {
content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: scale(0);
    animation: bismillah-ripple-animation 0.6s linear;
}
@keyframes bismillah-ripple-animation {
0% {
      transform: scale(0);
}
}


  /* BismillahCSS - Part 20 */

/* Glassmorphism Cards */
.bismillah-glass-card {
background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(20px);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}
.bismillah-glass-card:hover {
transform: translateY(-5px);
}
/* 3D Hover Effect */
  .bismillah-3d-hover {
transition: transform 0.3s ease;
}
/* Animated Underline Links */
  .bismillah-underline {
position: relative;
    text-decoration: none;
    color: inherit;
}
/* Skeleton Loading Effect */
  .bismillah-skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: bismillah-skeleton-animation 1.5s infinite;
}
@keyframes bismillah-skeleton-animation {
0% {
      background-position: 200% 0;
}
}
  
  /* Scroll Indicator */
  .bismillah-scroll-indicator {
position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    transition: width 0.2s;
}
/* BismillahCSS - Part 21 */

/* Expanding Border Hover Effect */
.bismillah-border-expand {
position: relative;
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid transparent;
    transition: border-color 0.3s ease-in-out;
}
.bismillah-border-expand::before,
  .bismillah-border-expand::after {
content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease-in-out;
}
.bismillah-border-expand::before {
top: 0;
    left: 0;
}
.bismillah-border-expand::after {
bottom: 0;
    right: 0;
}
.bismillah-border-expand:hover::before,
  .bismillah-border-expand:hover::after {
width: 100%;
}
/* Floating Button Animation */
  .bismillah-float {
position: relative;
    animation: bismillah-float 3s infinite ease-in-out;
}
@keyframes bismillah-float {
0%, 100% {
      transform: translateY(0);
}
}
  
  /* Neon Glow Effect */
  .bismillah-neon {
color: #fff;
    background: #0f0f0f;
    border-radius: 8px;
    padding: 10px 20px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    transition: box-shadow 0.3s ease-in-out;
}
.bismillah-neon:hover {
box-shadow: 0 0 20px rgba(0, 255, 255, 1);
}
/* Slide-In Animation */
  .bismillah-slide-in {
opacity: 0;
    transform: translateY(20px);
    animation: bismillah-slide-in 0.6s ease-out forwards;
}
@keyframes bismillah-slide-in {
0% {
      opacity: 0;
      transform: translateY(20px);
}
}
  
  /* Hover Flip Card Effect */
  .bismillah-flip-card {
perspective: 1000px;
}
.bismillah-flip-card-inner {
position: relative;
    width: 100%;
    height: 200px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.bismillah-flip-card:hover .bismillah-flip-card-inner {
transform: rotateY(180deg);
}
.bismillah-flip-card-front,
  .bismillah-flip-card-back {
position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.bismillah-flip-card-back {
transform: rotateY(180deg);
}
/* Rotating Border Button */
  .bismillah-rotate-border {
position: relative;
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid transparent;
    transition: transform 0.3s ease-in-out;
}
.bismillah-rotate-border::before {
content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border: 2px solid currentColor;
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
}
.bismillah-rotate-border:hover::before {
transform: rotate(360deg);
}
/* BismillahCSS - Part 22 */

/* Navbar Styling */
.bismillah-navbar {
display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #1e1e1e;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.bismillah-navbar .bismillah-nav-links {
display: flex;
    gap: 20px;
}
.bismillah-navbar a {
color: white;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease-in-out;
}
.bismillah-navbar a:hover {
color: #00d4ff;
}
/* Sidebar Styling */
  .bismillah-sidebar {
width: 250px;
    height: 100vh;
    background: #2c2c2c;
    color: white;
    padding: 20px;
    position: fixed;
    left: 0;
    top: 0;
    transition: transform 0.3s ease-in-out;
}
.bismillah-sidebar a {
display: block;
    padding: 10px;
    color: white;
    text-decoration: none;
    font-size: 16px;
    transition: background 0.3s;
}
.bismillah-sidebar a:hover {
background: #444;
}
/* Sidebar Toggle */
  .bismillah-sidebar-toggle {
position: absolute;
    top: 20px;
    right: -50px;
    background: #00d4ff;
    color: white;
    padding: 10px;
    cursor: pointer;
    transition: right 0.3s;
}
.bismillah-sidebar:hover .bismillah-sidebar-toggle {
right: 10px;
}
/* Footer Styling */
  .bismillah-footer {
background: #1e1e1e;
    color: white;
    text-align: center;
    padding: 15px 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
}
.bismillah-footer a {
color: #00d4ff;
    text-decoration: none;
    font-weight: 600;
}
.bismillah-footer a:hover {
text-decoration: underline;
}
/* BismillahCSS - Part 23 */

/* Sidebar Styling with Animated Open/Close Effect */
.bismillah-sidebar {
width: 250px;
    height: 100vh;
    background: #2c2c2c;
    color: white;
    padding: 20px;
    position: fixed;
    left: -250px;
    top: 0;
    transition: left 0.3s ease-in-out;
    box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1);
}
/* Sidebar Toggle Button */
  .bismillah-sidebar-toggle {
position: absolute;
    top: 20px;
    left: 250px;
    background: #00d4ff;
    color: white;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: left 0.3s;
}
/* Sidebar Active State */
  .bismillah-sidebar.active {
left: 0;
}
.bismillah-sidebar.active .bismillah-sidebar-toggle {
left: 260px;
}
/* Sidebar Animation */
  @keyframes slideIn {
from {
      left: -250px;
}
}
  .bismillah-sidebar.active {
animation: slideIn 0.3s forwards;
}
/* BismillahCSS - Part 24 */

/* Sidebar Styling with Animated Open/Close Effect */
.bismillah-sidebar {
width: 250px;
    height: 100vh;
    background: #2c2c2c;
    color: white;
    padding: 20px;
    position: fixed;
    left: -250px;
    top: 0;
    transition: left 0.3s ease-in-out;
    box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}
/* Responsive Sidebar */
  @media (max-width: 768px) {
.bismillah-sidebar {
      width: 200px;
}
.bismillah-sidebar-toggle {
left: 200px;
}
.bismillah-sidebar.active {
left: 0;
}
}