bismillahcss/src/core/utilities.css

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

/* ================================
   BismillahCSS - Utility Classes
   ================================ */

/* Spacing Utilities */
.bismillah-m-0 {
margin: 0;
}
.bismillah-m-1 {
margin: 4px;
}
.bismillah-m-2 {
margin: 8px;
}
.bismillah-m-3 {
margin: 12px;
}
.bismillah-m-4 {
margin: 16px;
}
.bismillah-m-5 {
margin: 20px;
}
.bismillah-m-auto {
margin: auto;
}
.bismillah-p-0 {
padding: 0;
}
.bismillah-p-1 {
padding: 4px;
}
.bismillah-p-2 {
padding: 8px;
}
.bismillah-p-3 {
padding: 12px;
}
.bismillah-p-4 {
padding: 16px;
}
.bismillah-p-5 {
padding: 20px;
}
.bismillah-p-auto {
padding: auto;
}
/* Typography */
.bismillah-text-xs {
font-size: 12px;
}
.bismillah-text-sm {
font-size: 14px;
}
.bismillah-text-base {
font-size: 16px;
}
.bismillah-text-lg {
font-size: 18px;
}
.bismillah-text-xl {
font-size: 20px;
}
.bismillah-text-2xl {
font-size: 24px;
}
.bismillah-text-3xl {
font-size: 30px;
}
.bismillah-font-light {
font-weight: 300;
}
.bismillah-font-normal {
font-weight: 400;
}
.bismillah-font-medium {
font-weight: 500;
}
.bismillah-font-bold {
font-weight: 700;
}
/* Colors */
.bismillah-text-primary {
color: #1E40AF;
}
.bismillah-text-secondary {
color: #64748B;
}
.bismillah-text-success {
color: #16A34A;
}
.bismillah-text-warning {
color: #EAB308;
}
.bismillah-text-danger {
color: #DC2626;
}
.bismillah-text-info {
color: #0EA5E9;
}
.bismillah-bg-primary {
background-color: #1E40AF;
}
.bismillah-bg-secondary {
background-color: #64748B;
}
.bismillah-bg-success {
background-color: #16A34A;
}
.bismillah-bg-warning {
background-color: #EAB308;
}
.bismillah-bg-danger {
background-color: #DC2626;
}
.bismillah-bg-info {
background-color: #0EA5E9;
}
/* Borders */
.bismillah-border {
border: 1px solid #e5e7eb;
}
.bismillah-border-0 {
border: none;
}
.bismillah-border-2 {
border-width: 2px;
}
.bismillah-border-4 {
border-width: 4px;
}
.bismillah-border-8 {
border-width: 8px;
}
.bismillah-border-primary {
border-color: #1E40AF;
}
.bismillah-border-secondary {
border-color: #64748B;
}
.bismillah-border-success {
border-color: #16A34A;
}
.bismillah-border-warning {
border-color: #EAB308;
}
.bismillah-border-danger {
border-color: #DC2626;
}
.bismillah-rounded-none {
border-radius: 0;
}
.bismillah-rounded-sm {
border-radius: 4px;
}
.bismillah-rounded {
border-radius: 8px;
}
.bismillah-rounded-lg {
border-radius: 12px;
}
.bismillah-rounded-full {
border-radius: 9999px;
}
/* Shadows */
.bismillah-shadow-sm {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bismillah-shadow {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.bismillah-shadow-md {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.bismillah-shadow-lg {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}
.bismillah-shadow-xl {
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.25);
}
.bismillah-shadow-none {
box-shadow: none;
}
/* BismillahCSS - Core Styles */

/* Reset & Base Styles */
body {
margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: var(--bg-color, #f8f9fa);
    color: var(--text-color, #212529);
}
/* Utility Classes */
  .bismillah-flex {
display: flex;
    justify-content: center;
    align-items: center;
}
.bismillah-grid {
display: grid;
    gap: 10px;
}
.bismillah-text-center {
text-align: center;
}
.bismillah-bg-dark {
    background-color: #1a1a1a !important;
    color: white;
}

/* Display and Visibility */
.bismillah-hidden {
    display: none !important;
}
.bismillah-block {
    display: block;
}
.bismillah-inline {
    display: inline;
}
.bismillah-inline-block {
    display: inline-block;
}

/* Flex and Alignment */
.bismillah-flex-col {
    flex-direction: column;
}
.bismillah-flex-wrap {
    flex-wrap: wrap;
}
.bismillah-justify-start {
    justify-content: flex-start;
}
.bismillah-justify-center {
    justify-content: center;
}
.bismillah-justify-between {
    justify-content: space-between;
}
.bismillah-items-start {
    align-items: flex-start;
}
.bismillah-items-center {
    align-items: center;
}
.bismillah-items-end {
    align-items: flex-end;
}

/* Typography Helpers */
.bismillah-text-uppercase {
    text-transform: uppercase;
}
.bismillah-text-lowercase {
    text-transform: lowercase;
}
.bismillah-text-capitalize {
    text-transform: capitalize;
}
.bismillah-text-italic {
    font-style: italic;
}
.bismillah-text-underline {
    text-decoration: underline;
}
.bismillah-text-line-through {
    text-decoration: line-through;
}

/* Transition Helpers */
.bismillah-transition-fast {
    transition: all 0.2s ease-in-out;
}
.bismillah-transition-normal {
    transition: all 0.3s ease-in-out;
}
.bismillah-transition-smooth {
    transition: all 0.5s ease-in-out;
}

/* Cursor */
.bismillah-cursor-pointer {
    cursor: pointer;
}

/* Width / Height */
.bismillah-w-100 {
    width: 100%;
}
.bismillah-h-100 {
    height: 100%;
}
.bismillah-max-w-none {
    max-width: none;
}

/* Unique utilities (not typical in standard frameworks) */
.bismillah-glass {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.bismillah-neumorphism {
    background: #e6ecf5;
    box-shadow: 8px 8px 18px #b8c4d7, -8px -8px 18px #ffffff;
}

.bismillah-frosted {
    background: rgba(10, 25, 47, 0.63);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.bismillah-gradient-border {
    border: 2px solid transparent;
    border-image: linear-gradient(135deg, #3b82f6 0%, #9333ea 45%, #ec4899 100%) 1;
}

.bismillah-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bismillah-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bismillah-aspect-16-9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.bismillah-aspect-16-9 > * {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.bismillah-text-gradient {
    background-image: linear-gradient(90deg, #0ea5e9, #f43f5e, #eab308);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bismillah-animate-pulse-quick {
    animation: bismillah-pulse 0.9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes bismillah-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}


.bismillah-container {
width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
/* Buttons */
  .bismillah-btn {
display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.bismillah-btn-primary {
background-color: #007bff;
    color: white;
}
.bismillah-btn-primary:hover {
background-color: #0056b3;
}
.bismillah-btn-secondary {
background-color: #6c757d;
    color: white;
}
.bismillah-btn-secondary:hover {
background-color: #545b62;
}
/* Card Component */
  .bismillah-card {
background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}
.bismillah-card:hover {
transform: translateY(-5px);
}
/* Responsive Grid */
  @media (max-width: 768px) {
.bismillah-grid {
      grid-template-columns: repeat(1, 1fr);
}
}
  
  @media (min-width: 769px) {
.bismillah-grid {
      grid-template-columns: repeat(3, 1fr);
}
}
  
  /* Sidebar */
  .bismillah-sidebar {
position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100%;
    background: #333;
    color: white;
    padding: 20px;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}
.bismillah-sidebar.open {
transform: translateX(0);
}
/* Footer */
  .bismillah-footer {
text-align: center;
    padding: 20px;
    background: #222;
    color: white;
}
/* Badges & Labels */
  .bismillah-badge {
display: inline-block;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}
.bismillah-badge-primary {
background-color: #007bff;
    color: white;
}
.bismillah-badge-secondary {
background-color: #6c757d;
    color: white;
}
.bismillah-badge-success {
background-color: #28a745;
    color: white;
}
.bismillah-badge-warning {
background-color: #ffc107;
    color: black;
}
.bismillah-badge-danger {
background-color: #dc3545;
    color: white;
}
/* BismillahCSS - Utilities.css (Part 6) */

/* ========================= */
/* 📌 Display Utilities */
/* ========================= */

.bismillah-block {
display: block;
}
.bismillah-inline {
display: inline;
}
.bismillah-inline-block {
display: inline-block;
}
.bismillah-flex {
display: flex;
}
.bismillah-inline-flex {
display: inline-flex;
}
.bismillah-hidden {
display: none;
}
/* ========================= */
  /* 📌 Position Utilities */
  /* ========================= */
  
  .bismillah-relative {
position: relative;
}
.bismillah-absolute {
position: absolute;
}
.bismillah-fixed {
position: fixed;
}
.bismillah-sticky {
position: sticky;
}
/* ========================= */
  /* 📌 Opacity Utilities */
  /* ========================= */
  
  .bismillah-opacity-0 {
opacity: 0;
}
.bismillah-opacity-25 {
opacity: 0.25;
}
.bismillah-opacity-50 {
opacity: 0.5;
}
.bismillah-opacity-75 {
opacity: 0.75;
}
.bismillah-opacity-100 {
opacity: 1;
}
/* ========================= */
  /* 📌 Overflow Utilities */
  /* ========================= */
  
  .bismillah-overflow-auto {
overflow: auto;
}
.bismillah-overflow-hidden {
overflow: hidden;
}
.bismillah-overflow-visible {
overflow: visible;
}
.bismillah-overflow-scroll {
overflow: scroll;
}
/* BismillahCSS - Utilities.css (Part 7) */

/* ========================= */
/* 📌 Spacing Utilities (Margin & Padding) */
/* ========================= */

.bismillah-m-0 {
margin: 0;
}
/* ========================= */
/* 📌 Typography Utilities */
/* ========================= */

.bismillah-text-xs {
font-size: 12px;
}
/* ========================= */
/* 📌 Text Alignment */
/* ========================= */

.bismillah-text-left {
text-align: left;
}
.bismillah-text-right {
text-align: right;
}
.bismillah-text-justify {
text-align: justify;
}
/* ========================= */
/* 📌 Text Transform */
/* ========================= */

.bismillah-uppercase {
text-transform: uppercase;
}
.bismillah-lowercase {
text-transform: lowercase;
}
.bismillah-capitalize {
text-transform: capitalize;
}
/* ========================= */
/* 📌 Letter Spacing & Line Height */
/* ========================= */

.bismillah-tracking-tight {
letter-spacing: -0.05em;
}
.bismillah-tracking-normal {
letter-spacing: 0;
}
.bismillah-tracking-wide {
letter-spacing: 0.05em;
}
.bismillah-leading-none {
line-height: 1;
}
.bismillah-leading-tight {
line-height: 1.25;
}
.bismillah-leading-normal {
line-height: 1.5;
}
.bismillah-leading-loose {
line-height: 2;
}
/* BismillahCSS - Utilities.css (Part 8) */

/* ========================= */
/* 🎨 Background Utilities */
/* ========================= */

.bismillah-bg-transparent {
background-color: transparent;
}
.bismillah-bg-white {
background-color: #ffffff;
}
.bismillah-bg-black {
background-color: #000000;
}
.bismillah-bg-gray {
background-color: #e5e7eb;
}
.bismillah-bg-red {
background-color: #ef4444;
}
.bismillah-bg-blue {
background-color: #3b82f6;
}
.bismillah-bg-green {
background-color: #10b981;
}
.bismillah-bg-yellow {
background-color: #facc15;
}
.bismillah-bg-purple {
background-color: #8b5cf6;
}
/* Background Gradient */
.bismillah-bg-gradient-to-r {
background-image: linear-gradient(to right, var(--bismillah-color-start), var(--bismillah-color-end));
}
.bismillah-bg-gradient-to-l {
background-image: linear-gradient(to left, var(--bismillah-color-start), var(--bismillah-color-end));
}
.bismillah-bg-gradient-to-t {
background-image: linear-gradient(to top, var(--bismillah-color-start), var(--bismillah-color-end));
}
.bismillah-bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--bismillah-color-start), var(--bismillah-color-end));
}
/* ========== BismillahCSS Neon Backgrounds ========== */
.bismillah-bg-neon-blue {
background-color: #00f; box-shadow: 0 0 10px #00f, 0 0 40px #00f;
}
.bismillah-bg-neon-green {
background-color: #0f0; box-shadow: 0 0 10px #0f0, 0 0 40px #0f0;
}
.bismillah-bg-neon-red {
background-color: #f00; box-shadow: 0 0 10px #f00, 0 0 40px #f00;
}
.bismillah-bg-neon-pink {
background-color: #ff00ff; box-shadow: 0 0 10px #ff00ff, 0 0 40px #ff00ff;
}
.bismillah-bg-neon-yellow {
background-color: #ff0; box-shadow: 0 0 10px #ff0, 0 0 40px #ff0;
}
/* ========== BismillahCSS Gradient Backgrounds ========== */
.bismillah-bg-gradient-primary {
background: linear-gradient(45deg, #007bff, #0056b3);
}
.bismillah-bg-gradient-success {
background: linear-gradient(45deg, #28a745, #218838);
}
.bismillah-bg-gradient-danger {
background: linear-gradient(45deg, #dc3545, #c82333);
}
.bismillah-bg-gradient-warning {
background: linear-gradient(45deg, #ffc107, #e0a800);
}
.bismillah-bg-gradient-info {
background: linear-gradient(45deg, #17a2b8, #117a8b);
}
.bismillah-bg-gradient-dark {
background: linear-gradient(45deg, #343a40, #1d2124);
}
/* Fancy Gradients */
.bismillah-bg-gradient-rainbow {
background: linear-gradient(90deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffee, #0048ff, #7a00ff);
    background-size: 400% 400%;
    animation: gradient-shift 6s infinite linear;
}
/* Gradient Animation */
@keyframes gradient-shift {
0% { background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}


/* Dark Mode Compatibility */
@media (prefers-color-scheme: dark) {
.bismillah-bg-neon-blue, .bg-neon-green, .bg-neon-red, .bg-neon-pink, .bg-neon-yellow {
        filter: brightness(1.2);
}
}


/* ========================= */
/* 🎨 Border Utilities */
/* ========================= */

.bismillah-border {
border: 1px solid #e5e7eb;
}
.bismillah-border-2 {
border-width: 2px;
}
.bismillah-border-4 {
border-width: 4px;
}
.bismillah-border-none {
border: none;
}
.bismillah-border-gray {
border-color: #e5e7eb;
}
.bismillah-border-red {
border-color: #ef4444;
}
.bismillah-border-blue {
border-color: #3b82f6;
}
.bismillah-border-green {
border-color: #10b981;
}
/* Border Radius */
.bismillah-rounded-none {
border-radius: 0;
}
/* ========================= */
/* 🎨 Box Shadow Utilities */
/* ========================= */

.bismillah-shadow-sm {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}
/* ========================= */
/* 🎨 Opacity Utilities */
/* ========================= */

.bismillah-opacity-0 {
opacity: 0;
}
/* ========================= */
/* 🎨 Mix Blend Mode */
/* ========================= */

.bismillah-mix-normal {
mix-blend-mode: normal;
}
.bismillah-mix-multiply {
mix-blend-mode: multiply;
}
.bismillah-mix-screen {
mix-blend-mode: screen;
}
.bismillah-mix-overlay {
mix-blend-mode: overlay;
}
.bismillah-mix-darken {
mix-blend-mode: darken;
}
.bismillah-mix-lighten {
mix-blend-mode: lighten;
}
/* ========================= */
/* 🎨 Filter Utilities */
/* ========================= */

.bismillah-blur-sm {
filter: blur(2px);
}
.bismillah-blur {
filter: blur(4px);
}
.bismillah-blur-lg {
filter: blur(8px);
}
.bismillah-grayscale {
filter: grayscale(100%);
}
.bismillah-invert {
filter: invert(100%);
}
.bismillah-sepia {
filter: sepia(100%);
}
/* ========================= */
/* 🎨 Transition & Animation */
/* ========================= */

.bismillah-transition {
transition: all 0.3s ease-in-out;
}
.bismillah-transition-fast {
transition: all 0.1s ease-in-out;
}
.bismillah-transition-slow {
transition: all 0.5s ease-in-out;
}
.bismillah-animate-spin {
animation: spin 1s linear infinite;
}
.bismillah-animate-pulse {
animation: pulse 2s infinite;
}
.bismillah-animate-bounce {
animation: bounce 1.5s infinite;
}
@keyframes spin {
0% { transform: rotate(0deg);
}
}

@keyframes pulse {
0%, 100% { opacity: 1;
}
}

@keyframes bounce {
0%, 100% { transform: translateY(0);
}
}
/* BismillahCSS - Utilities (Part 9) */

/* Advanced Display Utilities */
.bismillah-flex-center {
display: flex;
    justify-content: center;
    align-items: center;
}
.bismillah-grid-center {
display: grid;
    place-items: center;
}
/* Advanced Sizing */
.bismillah-w-90 {
width: 90%;
}
.bismillah-h-90 {
height: 90%;
}
.bismillah-min-w-50 {
min-width: 50px;
}
.bismillah-min-h-50 {
min-height: 50px;
}
/* Scrollbar Styling */
.bismillah-scrollbar {
scrollbar-width: thin;
    scrollbar-color: var(--bismillah-primary) var(--bismillah-light);
}
.bismillah-scrollbar::-webkit-scrollbar {
width: 6px;
}
.bismillah-scrollbar::-webkit-scrollbar-thumb {
background-color: var(--bismillah-primary);
    border-radius: 10px;
}
.bismillah-scrollbar::-webkit-scrollbar-track {
background-color: var(--bismillah-light);
}
/* Interactive Text Effects */
.bismillah-text-gradient {
background: linear-gradient(45deg, var(--bismillah-primary), var(--bismillah-secondary));
    background-clip: text;  /* Standard property */
    -webkit-background-clip: text; /* Vendor prefix for Safari */
    -webkit-text-fill-color: transparent;
}
.bismillah-text-blur:hover {
filter: blur(2px);
}
/* New Advanced Hover Effects */
.bismillah-hover-scale:hover {
transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}
.bismillah-hover-rotate:hover {
transform: rotate(5deg);
    transition: transform 0.3s ease-in-out;
}
.bismillah-hover-shadow:hover {
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-in-out;
}
/* Spacing & Padding Improvements */
.bismillah-px-5 {
padding-left: 5px;
    padding-right: 5px;
}
.bismillah-py-10 {
padding-top: 10px;
    padding-bottom: 10px;
}
.bismillah-mx-auto {
margin-left: auto;
    margin-right: auto;
}
.bismillah-my-auto {
margin-top: auto;
    margin-bottom: auto;
}
/* BismillahCSS - Utilities (Part 10) */

/* Advanced Display Utilities */
.bismillah-flex-center {
display: flex;
    justify-content: center;
    align-items: center;
}
/* Glassmorphism Effects */
.bismillah-glass {
background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
/* New Layout Utilities */
.bismillah-container {
width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.bismillah-responsive-grid {
display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.bismillah-box-shadow {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.bismillah-border-rounded {
border-radius: 10px;
}
/* BismillahCSS - Utilities (Part 11) */

/* Advanced Animation Utilities */
.bismillah-fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0;
}
to {
opacity: 1;
}
}

.bismillah-bounce {
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0);
}
}

.bismillah-shake:hover {
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
75% {
transform: translateX(-5px);
}
}

/* Advanced Button Effects */
.bismillah-btn-glow {
position: relative;
    overflow: hidden;
}
.bismillah-btn-glow::after {
content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, rgba(0,0,0,0) 70%);
    transition: top 0.3s ease-out, left 0.3s ease-out;
}
.bismillah-btn-glow:hover::after {
top: 0;
    left: 0;
}
/* Background Effects */
.bismillah-bg-animated {
background: linear-gradient(45deg, var(--bismillah-primary), var(--bismillah-secondary));
    background-size: 200% 200%;
    animation: gradientMove 3s infinite linear;
}
@keyframes gradientMove {
0% { background-position: 0% 50%;
}
}

/* Hover Effects */
.bismillah-hover-pulse:hover {
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1);
}
}

.bismillah-hover-glow:hover {
box-shadow: 0 0 15px var(--bismillah-primary);
    transition: box-shadow 0.3s ease-in-out;
}

/* Added extra utilities */
.bismillah-opacity-95 {
    opacity: 0.95;
}
.bismillah-opacity-80 {
    opacity: 0.8;
}
.bismillah-border-dashed {
    border-style: dashed;
}
.bismillah-border-double {
    border-style: double;
}
.bismillah-text-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.bismillah-text-shadow-lg {
    text-shadow: 2px 2px 6px rgba(0,0,0,0.45);
}
.bismillah-text-shadow-neon {
    text-shadow: 0 0 8px rgba(0,255,255,0.8), 0 0 12px rgba(0,255,255,0.6);
}
.bismillah-ringed {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35), 0 0 16px rgba(99, 102, 241, 0.2);
}
.bismillah-transition-backdrop {
    transition: backdrop-filter 0.3s ease, background-color 0.3s ease;
}
.bismillah-position-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Futuristic utilities */
.bismillah-future-glow {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(59, 130, 246, 0.25));
    border: 1px solid rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.6), 0 0 32px rgba(59, 130, 246, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.bismillah-future-digital {
    background: radial-gradient(circle at top left, rgba(99, 102, 241, 0.5), rgba(59, 130, 246, 0.1));
    color: #e0efff;
    border: 1px solid rgba(248, 250, 252, 0.2);
}

.bismillah-future-neon-border {
    border: 2px solid rgba(59, 130, 246, 0.6);
    box-shadow: inset 0 0 12px rgba(59, 130, 246, 0.7), 0 0 20px rgba(14, 165, 233, 0.5);
}

.bismillah-future-gradient-text {
    background: linear-gradient(90deg, #38bdf8, #8b5cf6, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bismillah-future-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.bismillah-future-border-animated {
    border: 2px solid transparent;
    background-image: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.25)),
                      linear-gradient(45deg, #0ea5e9, #8b5cf6, #ec4899);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

@keyframes neonPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(59, 130, 246, 0.6), 0 0 22px rgba(99, 102, 241, 0.55); }
    50% { box-shadow: 0 0 14px rgba(59, 130, 246, 0.8), 0 0 30px rgba(99, 102, 241, 0.75); }
}

.bismillah-future-pulse {
    animation: neonPulse 2.5s ease-in-out infinite;
}

/* Extra futuristic/neonic utilities */
.bismillah-quantum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    background: radial-gradient(circle at top left, rgba(8, 145, 178, .2), rgba(15, 23, 42, .85));
    border: 1px solid rgba(14, 165, 233, .4);
    box-shadow: inset 0 0 16px rgba(8, 145, 178, .35);
}

.bismillah-data-stream {
    background: linear-gradient(90deg, rgba(7,99,255,0.4), rgba(59,130,246,0.3), rgba(236,72,153,0.35));
    background-size: 200% 200%;
    animation: dataFlow 6s linear infinite;
}

@keyframes dataFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.bismillah-hologram {
    color: #c0f4ff;
    text-shadow: 0 0 5px rgba(0,255,255,0.7), 0 0 12px rgba(125,211,252,0.75);
    background-color: rgba(21, 39, 77, 0.45);
    border: 1px solid rgba(56, 189, 248, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bismillah-glitch {
    color: #8ecae6;
    position: relative;
    overflow: hidden;
}
.bismillah-glitch::before,
.bismillah-glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0.8;
    clip: rect(0, 9999px, 0, 0);
}
.bismillah-glitch::before { animation: glitchTop 2s infinite linear; color: #ff006e; }
.bismillah-glitch::after { animation: glitchBottom 2.5s infinite linear; color: #00fff3; }

@keyframes glitchTop {
    0% { clip: rect(0, 9999px, 0, 0); transform: translate(0); }
    10% { clip: rect(2px, 9999px, 15px, 0); transform: translate(-1px, -1px); }
    20% { clip: rect(0, 9999px, 50px, 0); transform: translate(1px, 2px); }
    30% { clip: rect(10px, 9999px, 35px, 0); transform: translate(-1px, 1px); }
    40% { clip: rect(0, 9999px, 22px, 0); transform: translate(0); }
    50% { clip: rect(8px, 9999px, 40px, 0); transform: translate(1px, 0); }
    60% { clip: rect(0, 9999px, 30px, 0); transform: translate(-1px, -1px); }
    70% { clip: rect(3px, 9999px, 20px, 0); transform: translate(1px, 2px); }
    80% { clip: rect(0, 9999px, 50px, 0); transform: translate(-1px, -2px); }
    90% { clip: rect(15px, 9999px, 40px, 0); transform: translate(0); }
    100% { clip: rect(0, 9999px, 0, 0); transform: translate(0); }
}

@keyframes glitchBottom {
    0% { clip: rect(0, 9999px, 0, 0); transform: translate(0); }
    10% { clip: rect(12px, 9999px, 60px, 0); transform: translate(2px, 1px); }
    20% { clip: rect(5px, 9999px, 100px, 0); transform: translate(-2px, -1px); }
    30% { clip: rect(20px, 9999px, 85px, 0); transform: translate(2px, 0); }
    40% { clip: rect(0, 9999px, 20px, 0); transform: translate(-1px, 1px); }
    50% { clip: rect(10px, 9999px, 45px, 0); transform: translate(0); }
    60% { clip: rect(8px, 9999px, 30px, 0); transform: translate(-1px, 0); }
    70% { clip: rect(25px, 9999px, 65px, 0); transform: translate(1px, -1px); }
    80% { clip: rect(0, 9999px, 52px, 0); transform: translate(2px, 1px); }
    90% { clip: rect(15px, 9999px, 80px, 0); transform: translate(-2px, -2px); }
    100% { clip: rect(0, 9999px, 0, 0); transform: translate(0); }
}

.bismillah-matrix-bg {
    position: relative;
    background: #020809;
    color: #0fef17;
    overflow: hidden;
}
.bismillah-matrix-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7));
}

.bismillah-vaporwave {
    background: linear-gradient(135deg, #ff7ce5 0%, #7f5af0 50%, #50d4ff 100%);
    color: #fff;
    text-shadow: 0 0 30px rgba(255,255,255,0.35);
}

.bismillah-glow-triangle {
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, rgba(56, 189, 248, 0.8), rgba(236, 72, 153, 0.8));
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.8);
    animation: spinHue 8s linear infinite;
}

@keyframes spinHue {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Neon / Neonic utilities */
.bismillah-neon-card {
    background: rgba(9, 15, 34, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.6);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6), 0 0 40px rgba(139, 92, 246, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bismillah-neon-btn {
    color: #f8fafc;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    border: 1px solid rgba(239, 68, 68, 0.75);
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.85), 0 0 25px rgba(139, 92, 246, 0.6);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
    transition: all 0.25s ease;
}
.bismillah-neon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(14, 165, 233, 1), 0 0 32px rgba(139, 92, 246, 0.75);
}

.bismillah-neon-text {
    color: #0ea5e9;
    text-shadow: 0 0 10px #0ea5e9, 0 0 20px #8b5cf6, 0 0 35px #ec4899;
}

.bismillah-neon-speck {
    position: relative;
}
.bismillah-neon-speck::before,
.bismillah-neon-speck::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none;
}
.bismillah-neon-speck::before {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #38bdf8, transparent);
    top: -10px;
    left: 10px;
}
.bismillah-neon-speck::after {
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #a855f7, transparent);
    bottom: -8px;
    right: 12px;
}

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

.bismillah-shadow-neon {
    box-shadow: 0 0 18px rgba(14, 165, 233, 0.4), 0 0 30px rgba(139, 92, 246, 0.4), inset 0 0 10px rgba(8, 145, 178, 0.35);
}

/* ========================= */
/* ✨ New expanded utilities */
/* ========================= */

/* Flex helpers */
.bismillah-flex-row {
    display: flex;
    flex-direction: row;
}
.bismillah-flex-col {
    display: flex;
    flex-direction: column;
}
.bismillah-flex-nowrap {
    flex-wrap: nowrap;
}
.bismillah-flex-wrap {
    flex-wrap: wrap;
}
.bismillah-justify-evenly {
    justify-content: space-evenly;
}

/* Grid helpers */
.bismillah-grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.bismillah-grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.bismillah-grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

/* Sizing helpers */
.bismillah-w-full {
    width: 100%;
}
.bismillah-h-full {
    height: 100%;
}
.bismillah-max-h-screen {
    max-height: 100vh;
}
.bismillah-min-h-screen {
    min-height: 100vh;
}

/* Transform utilities */
.bismillah-scale-95 {
    transform: scale(0.95);
}
.bismillah-scale-105 {
    transform: scale(1.05);
}
.bismillah-rotate-1 {
    transform: rotate(1deg);
}
.bismillah-rotate-3 {
    transform: rotate(3deg);
}

/* Overflow and text wrapping */
.bismillah-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bismillah-break-words {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Backdrop filter helpers */
.bismillah-backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.bismillah-backdrop-blur-lg {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Ring and focus helpers */
.bismillah-ring {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}
.bismillah-ring-2 {
    box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.45);
}
.bismillah-focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.45);
}

/* Misc utilities */
.bismillah-caret-pointer {
    cursor: pointer;
}
.bismillah-no-scroll {
    overflow: hidden;
}
.bismillah-icon-lg {
    font-size: 1.5rem;
    line-height: 1;
}
.bismillah-icon-xl {
    font-size: 2rem;
    line-height: 1;
}

/* Responsive helpers */
@media (max-width: 640px) {
    .bismillah-grid-cols-responsive {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .bismillah-grid-cols-responsive {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1025px) {
    .bismillah-grid-cols-responsive {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* BismillahCSS - Utilities (Part 13) */

/* Advanced Display Utilities */
.bismillah-inline-block {
display: inline-block;
}
.bismillah-flex-wrap {
display: flex;
    flex-wrap: wrap;
}
/* Aspect Ratio Utilities */
.bismillah-aspect-16-9 {
aspect-ratio: 16 / 9;
}
.bismillah-aspect-4-3 {
aspect-ratio: 4 / 3;
}
.bismillah-aspect-1-1 {
aspect-ratio: 1 / 1;
}
/* Enhanced Hover Effects */
.bismillah-hover-bright:hover {
filter: brightness(1.2);
    transition: filter 0.3s ease-in-out;
}
.bismillah-hover-grayscale:hover {
filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}
.bismillah-hover-opacity:hover {
opacity: 0.7;
    transition: opacity 0.3s ease-in-out;
}
/* New Animation Utilities */
.bismillah-animate-bounce {
animation: bismillah-bounce 1s infinite;
}
@keyframes bismillah-bounce {
0%, 100% {
        transform: translateY(0);
}
}

.bismillah-animate-spin {
animation: bismillah-spin 1s linear infinite;
}
@keyframes bismillah-spin {
from {
        transform: rotate(0deg);
}
}

.bismillah-animate-fade-in {
animation: bismillah-fade-in 1s ease-in-out;
}
@keyframes bismillah-fade-in {
from {
        opacity: 0;
}
}

/* Border Utilities */
.bismillah-border-1 {
border-width: 1px;
    border-style: solid;
    border-color: var(--bismillah-primary);
}
/* Box Shadow Enhancements */
.bismillah-shadow-lg {
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
}
.bismillah-shadow-sm {
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
/* BismillahCSS - Utilities (Part 14) */

/* Advanced Border Utilities */
.bismillah-border-dashed {
border: 2px dashed var(--bismillah-primary);
}
.bismillah-border-dotted {
border: 2px dotted var(--bismillah-secondary);
}
.bismillah-border-double {
border: 4px double var(--bismillah-dark);
}
.bismillah-border-glow {
border: 2px solid var(--bismillah-primary);
    box-shadow: 0 0 10px var(--bismillah-primary);
}
/* Advanced List Styles */
.bismillah-list-none {
list-style: none;
}
.bismillah-list-disc {
list-style-type: disc;
}
.bismillah-list-square {
list-style-type: square;
}
.bismillah-list-circle {
list-style-type: circle;
}
.bismillah-list-checkmarks li::before {
content: '\2713';
    color: var(--bismillah-primary);
    margin-right: 8px;
}
/* Gradient Borders */
.bismillah-border-gradient {
border: 3px solid;
    border-image-source: linear-gradient(45deg, var(--bismillah-primary), var(--bismillah-secondary));
    border-image-slice: 1;
}
/* Box Shadows */
.bismillah-shadow-sm {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.bismillah-shadow-glow {
box-shadow: 0px 0px 15px var(--bismillah-primary);
}
/* Extended Hover Effects */
.bismillah-hover-underline:hover {
text-decoration: underline;
}
.bismillah-hover-bg-scale:hover {
transform: scale(1.1);
    background-color: var(--bismillah-light);
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.bismillah-hover-border-flash:hover {
border-color: var(--bismillah-secondary);
    transition: border-color 0.3s ease-in-out;
}
/* Positioning Helpers */
.bismillah-absolute {
position: absolute;
}
.bismillah-relative {
position: relative;
}
/* Responsive Visibility */
@media (max-width: 768px) {
.bismillah-hide-mobile {
        display: none;
}
}

@media (min-width: 769px) {
.bismillah-hide-desktop {
        display: none;
}
}

/* BismillahCSS - Utilities (Part 15) */

/* Advanced Grid Layouts */
.bismillah-grid-auto-fit {
display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.bismillah-grid-auto-fill {
display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
/* Unique Border Effects */
.bismillah-border-gradient {
border: 3px solid transparent;
    background-clip: padding-box;
    border-image: linear-gradient(45deg, var(--bismillah-primary), var(--bismillah-secondary)) 1;
}
/* Neon Glow Text Effect */
.bismillah-text-neon {
color: var(--bismillah-light);
    text-shadow: 0 0 5px var(--bismillah-primary), 0 0 10px var(--bismillah-secondary);
}
/* Animated Backgrounds */
.bismillah-bg-animated {
background: linear-gradient(270deg, var(--bismillah-primary), var(--bismillah-secondary));
    background-size: 400% 400%;
    animation: bismillah-bg-animation 5s ease infinite;
}
@keyframes bismillah-bg-animation {
0% { background-position: 0% 50%;
}
}

/* Hover Effects */
.bismillah-hover-skew:hover {
transform: skewX(10deg);
    transition: transform 0.3s ease-in-out;
}
.bismillah-hover-translate:hover {
transform: translateY(-5px);
    transition: transform 0.3s ease-in-out;
}
.bismillah-hover-glow:hover {
box-shadow: 0 0 10px var(--bismillah-primary);
    transition: box-shadow 0.3s ease-in-out;
}
/* Advanced Positioning */
.bismillah-absolute-center {
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.bismillah-fixed-top {
position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
.bismillah-fixed-bottom {
position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}
/* BismillahCSS - Utilities (Part 16) */

/* Advanced Typography Utilities */
.bismillah-text-uppercase {
text-transform: uppercase;
}
.bismillah-text-lowercase {
text-transform: lowercase;
}
.bismillah-text-capitalize {
text-transform: capitalize;
}
.bismillah-letter-spacing-wide {
letter-spacing: 2px;
}
.bismillah-line-height-loose {
line-height: 1.8;
}
.bismillah-list-decimal {
list-style-type: decimal;
}
/* Advanced Background Effects */
.bismillah-bg-animated {
background: linear-gradient(270deg, var(--bismillah-primary), var(--bismillah-secondary));
    background-size: 400% 400%;
    animation: gradientBG 5s ease infinite;
}
@keyframes gradientBG {
0% {
        background-position: 0% 50%;
}
}

/* Box Shadows & Border Enhancements */
.bismillah-box-shadow-lg {
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
}
.bismillah-border-gradient {
border: 3px solid transparent;
    border-image: linear-gradient(45deg, var(--bismillah-primary), var(--bismillah-secondary));
    border-image-slice: 1;
}
/* Advanced Animation Effects */
.bismillah-hover-pulse:hover {
animation: pulse 1s infinite;
}


.bismillah-hover-translate:hover {
transform: translateY(-5px);
    transition: transform 0.3s ease-in-out;
}
/* Responsive Flexbox & Grid Enhancements */
@media (max-width: 768px) {
.bismillah-flex-responsive {
        display: block;
}
}

@media (max-width: 1024px) {
.bismillah-grid-responsive {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
}
}



/* BismillahCSS - Utilities (Part 17) */

/* Smart Adaptive Themes */
@media (prefers-color-scheme: dark) {
.bismillah-auto-theme {
        background-color: var(--bismillah-dark-bg);
        color: var(--bismillah-light-text);
}
}

@media (prefers-color-scheme: light) {
.bismillah-auto-theme {
        background-color: var(--bismillah-light-bg);
        color: var(--bismillah-dark-text);
}
}

/* 3D Depth Hover Effect */
.bismillah-hover-depth:hover {
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px);
    transition: all 0.3s ease-in-out;
}
/* Auto-responsive Font Sizing */
.bismillah-text-auto {
font-size: clamp(1rem, 2vw, 2rem);
}
/* AI-Powered Dynamic Color Adjustment (Experimental) */
.bismillah-dynamic-color {
filter: brightness(0.9) contrast(1.1);
    transition: all 0.3s ease-in-out;
}
.bismillah-dynamic-color:hover {
filter: brightness(1) contrast(1.2);
}
/* BismillahCSS - Utilities (Part 18) */

/* Glassmorphism Utility */
.bismillah-glass {
background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}
/* Animated Border Effects */
@keyframes borderAnimation {
0% { border-color: var(--bismillah-primary);
}
}
.bismillah-border-animate {
border: 2px solid;
    animation: borderAnimation 3s infinite alternate;
}
/* Auto Dark Mode Detection */
@media (prefers-color-scheme: dark) {
.bismillah-dark-auto {
        background-color: var(--bismillah-dark);
        color: var(--bismillah-light);
}
}

/* Perspective Tilt Effects */
.bismillah-tilt {
transition: transform 0.3s ease-in-out;
}
.bismillah-tilt:hover {
transform: perspective(500px) rotateY(10deg);
}
/* Additional Adaptive Utilities */
.bismillah-auto-grid {
display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}
/* BismillahCSS - Utilities (Part 19) */

/* 3D Depth Effects */
.bismillah-3d-depth {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease-in-out;
}
.bismillah-3d-depth:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Neon Glow Effects */
.bismillah-neon-glow {
text-shadow: 0 0 5px var(--bismillah-primary), 0 0 10px var(--bismillah-secondary);
}
.bismillah-neon-box {
box-shadow: 0 0 5px var(--bismillah-primary), 0 0 15px var(--bismillah-secondary);
}
/* Animated Underlines */
.bismillah-underline {
position: relative;
    display: inline-block;
    text-decoration: none;
}
.bismillah-underline::after {
content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--bismillah-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}
.bismillah-underline:hover::after {
transform: scaleX(1);
}
/* BismillahCSS - Utilities (Part 19) */

/* AI-Powered Adaptive Styling */
.bismillah-adaptive-bg {
background-color: var(--bismillah-light);
    transition: background-color 0.3s ease-in-out;
}
@media (prefers-color-scheme: dark) {
.bismillah-adaptive-bg {
        background-color: var(--bismillah-dark);
}
}

.bismillah-smart-text {
color: var(--bismillah-dark);
}


/* 3D Effects & Parallax Scrolling */
.bismillah-3d-card {
transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
    transition: transform 0.3s ease-in-out;
}
.bismillah-3d-card:hover {
transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
}
.bismillah-parallax {
background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
/* Glassmorphism & Frosted UI */
.bismillah-glass {
background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.bismillah-frosted-hover:hover {
background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
}
/* Dynamic Utility Generator */
.bismillah-auto-spacing {
margin: 5%;
    padding: 5%;
}
@media (max-width: 768px) {
.bismillah-auto-spacing {
        margin: 3%;
        padding: 3%;
}
}

.bismillah-adaptive-grid {
display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
/* BismillahCSS - Utilities (Part 20) */

/* Smart Adaptive Styling */
.bismillah-adaptive-bg {
background-color: var(--bismillah-light);
    transition: background-color 0.5s ease-in-out;
}
.bismillah-dark-mode .bismillah-adaptive-bg {
background-color: var(--bismillah-dark);
}
/* Dynamic 3D Effects */
.bismillah-3d-hover {
transform: perspective(500px) rotateX(10deg) rotateY(10deg);
    transition: transform 0.3s ease-in-out;
}
.bismillah-3d-hover:hover {
transform: perspective(500px) rotateX(5deg) rotateY(5deg);
}
/* Advanced Parallax Effects */
.bismillah-parallax {
background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
/* Glassmorphism Enhancements */
.bismillah-glassmorphism {
background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Dynamic Utility Generator */
.bismillah-dynamic-utility {
display: inline-block;
    padding: 10px;
    background-color: var(--bismillah-primary);
    color: #fff;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}
.bismillah-dynamic-utility:hover {
background-color: var(--bismillah-secondary);
    transform: scale(1.1);
}
/* Floating UI Components */
.bismillah-floating {
position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bismillah-primary);
    padding: 15px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}
.bismillah-floating:hover {
transform: translateY(-5px);
}
/* BismillahCSS - Utilities (Part 21) */

/* Neon Glow Effects */
.bismillah-neon-text {
text-shadow: 0 0 5px var(--bismillah-primary), 0 0 10px var(--bismillah-secondary);
}
.bismillah-neon-border {
border: 2px solid var(--bismillah-primary);
    box-shadow: 0 0 10px var(--bismillah-primary);
}
/* Advanced Grid Layouts */
.bismillah-grid-3 {
display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.bismillah-grid-auto {
display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
/* Typewriter Animation */
@keyframes bismillah-typewriter {
from { width: 0;
}
}

.bismillah-typewriter {
overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--bismillah-primary);
    width: 100%;
    animation: bismillah-typewriter 3s steps(30, end) infinite;
}
/* Perspective & Depth Effects */
.bismillah-3d-hover:hover {
transform: perspective(1000px) rotateY(10deg);
    transition: transform 0.4s ease-in-out;
}
/* Animated Borders */
@keyframes bismillah-border-animate {
0% { border-color: var(--bismillah-primary);
}
}

.bismillah-animated-border {
border: 2px solid var(--bismillah-primary);
    animation: bismillah-border-animate 3s infinite alternate;
}
/* Gradient Borders & Outlines */
.bismillah-gradient-border {
border: 3px solid;
    border-image: linear-gradient(to right, var(--bismillah-primary), var(--bismillah-secondary));
    border-image-slice: 1;
}
/* Floating Action Buttons (FABs) */
.bismillah-fab {
position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: var(--bismillah-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}
.bismillah-fab:hover {
transform: scale(1.1);
}
/* Interactive Glassmorphism Enhancements */
.bismillah-glass-hover:hover {
background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
}
/* BismillahCSS - Utilities (Part 22) */

/* Advanced Gradient Borders */
.bismillah-border-gradient {
border: 3px solid;
    border-image-source: linear-gradient(45deg, var(--bismillah-primary), var(--bismillah-secondary));
    border-image-slice: 1;
}
/* Fancy Underline Effects */
.bismillah-underline-fancy {
position: relative;
    text-decoration: none;
}
.bismillah-underline-fancy::after {
content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: linear-gradient(45deg, var(--bismillah-primary), var(--bismillah-secondary));
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}
.bismillah-underline-fancy:hover::after {
transform: scaleX(1);
}
/* Neon Glow Effect */
.bismillah-neon-text {
color: var(--bismillah-primary);
    text-shadow: 0 0 5px var(--bismillah-primary), 0 0 10px var(--bismillah-secondary);
}
/* Expanding Button Animation */
.bismillah-btn-expand {
display: inline-block;
    padding: 10px 20px;
    background: var(--bismillah-primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}
.bismillah-btn-expand:hover {
transform: scale(1.1);
}
/* Advanced 3D Box Effect */
.bismillah-3d-box {
display: inline-block;
    padding: 15px;
    background: var(--bismillah-light);
    border: 1px solid var(--bismillah-primary);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    transform: perspective(500px) rotateX(10deg);
    transition: transform 0.3s ease-in-out;
}
.bismillah-3d-box:hover {
transform: perspective(500px) rotateX(0deg);
}
/* Spinning Loader */
.bismillah-loader {
width: 40px;
    height: 40px;
    border: 4px solid var(--bismillah-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


/* BismillahCSS - Utilities (Part 23) */

/* Advanced Visibility Utilities */
.bismillah-visible {
visibility: visible;
}
.bismillah-invisible {
visibility: hidden;
}
.bismillah-collapse {
visibility: collapse;
}
/* Smooth Scroll Behavior */
.bismillah-smooth-scroll {
scroll-behavior: smooth;
}
/* Custom Opacity Levels */
.bismillah-opacity-10 {
opacity: 0.1;
}
/* Advanced Skew and Rotate Effects */
.bismillah-skew-x-10 {
transform: skewX(10deg);
}
.bismillah-skew-y-10 {
transform: skewY(10deg);
}
.bismillah-rotate-x-15 {
trans