:root {
    --blue: #007bff;
    --hov-blue: #1f6dc2;
    --soft-blue: rgba(0, 123, 255, 0.15);
    --secondary-base: #ffc519;
    --hov-secondary-base: #dbaa17;
    --soft-secondary-base: rgba(255, 197, 25, 0.15);
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --soft-white: #b5b5bf;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #0c3226;
    --secondary: #233f25;
    --hov-primary: #e56f0e;
    --soft-primary: rgba(247, 123, 11, 0.15);
    --soft-secondary: rgba(143, 151, 171, 0.15);
    --success: #0abb75;
    --soft-success: rgba(10, 187, 117, 0.15);
    --info: #25bcf1;
    --soft-info: rgba(37, 188, 241, 0.15);
    --warning: #ffc519;
    --soft-warning: rgba(255, 197, 25, 0.15);
    --danger: #ef486a;
    --soft-danger: rgba(239, 72, 106, 0.15);
    --light: #f2f3f8;
    --soft-light: #dfdfe6;
    --dark: #111723;
    --soft-dark: rgba(42, 50, 66, 0.15);
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1500px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}


body{background:#f2f2f2;font-family:'SolaimanLipi','Noto Serif Bengali',serif;}

.border-radius-8px {
    border-radius: 8px !important;
}
/* ===== HEADER ===== */
 /* Desktop Navigation */
    .navbar-nav .nav-link {
        color: #333;
        transition: all 0.3s ease;
        position: relative;
    }
    
    .navbar-nav .nav-link:hover {
        color: #dc3545;
    }
    
    /* .navbar-nav .nav-link:hover::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 2px;
        background: #dc3545;
    } */
    
    .dropdown-menu {
        min-width: 200px;
        border-radius: 8px;
    }
    
    .dropdown-item {
        transition: all 0.2s ease;
    }
    
    .dropdown-item:hover {
        background-color: #dc3545;
        color: white;
    }

    /* Mobile Offcanvas Styling */
    .mobile-offcanvas {
        width: 50vh !important;
        max-width: 350px;
    }
    
    .offcanvas-header {
        background-color: #fff;
    }
    
    .offcanvas-title {
        color: #dc3545;
    }
    
    .offcanvas-body {
        overflow-y: auto;
    }
    
    /* Mobile Menu Items */
    .nav-link {
        color: #333;
        transition: all 0.2s ease;
    }
    
    /* .nav-link:hover {
        background-color: #f8f9fa;
        color: #dc3545;
    } */
    
    /* Mobile Dropdown */
    .collapse .dropdown-item {
        padding: 10px 20px;
        color: #555;
        border-left: 3px solid transparent;
        transition: all 0.2s ease;
    }
    
    /* .collapse .dropdown-item:hover {
        background-color: #e9ecef;
        color: #dc3545;
        border-left-color: #dc3545;
    } */
    
    /* Responsive Design */
    @media (max-width: 991.98px) {
        .mobile-offcanvas {
            width: 50vh !important;
        }
        
        .navbar-toggler {
            border: none;
        }
        
        .navbar-toggler:focus {
            box-shadow: none;
        }
    }
    
    @media (max-width: 576px) {
        .mobile-offcanvas {
            width: 85vw !important;
        }
        
        .offcanvas-body {
            padding: 0;
        }
    }



/* ===== LAYOUT ===== */
.sidebar{
  width:110px;
  background:#fff;
  border-right:1px solid var(--gray);
  height:calc(100vh - 120px);
  overflow-y:auto;
}
.sidebar img{
border:1px solid #ccc;
cursor:pointer
    
}
.sidebar img.active{border:2px solid var(--red)}

.main-view{
  background:#fff;
  border-right:1px solid var(--gray);
  padding:10px;
}
.main-view img{width:100%;}

.article-panel{
  background:#fff;
  height:calc(100vh - 120px);
  overflow-y:auto;
  padding:15px;
}
.article-panel h2{color:var(--red);font-size:22px;font-weight:700}
.article-panel p{font-size:15px;line-height:1.8;text-align:justify}

/* ==============================
   BASE STYLES
   ============================== */
pre {
    white-space: initial;
}

html,
body {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
}

a {
    text-decoration: none !important;
}

.des-color > p {
    color: #6c757d !important;
}

/* ==============================
   COMPONENT STYLES
   ============================== */
.softtech-checkbox input[type="checkbox"] {
    display: none;
}

.softtech-square-check {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 4px;
}

.softtech-checkbox input[type="checkbox"]:checked + .softtech-square-check {
    background-color: var(--primary);
    border-color: var(--primary);
}

.softtech-checkbox input[type="checkbox"]:checked + .softtech-square-check::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Overlay and hover */
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all 0.3s ease-in;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.6);
}

.overlay.overlay-fixed {
    position: fixed;
}

.hov-overlay .overlay,
.hov-container .hov-box {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s ease, opacity 0.3s ease;
}

.hov-overlay:hover .overlay,
.hov-container:hover .hov-box {
    visibility: visible;
    opacity: 1;
}

.hov-scale-img:hover img,
.hov-scale:hover {
    transform: scale(1.05);
}

.fullscreen {
    min-height: 100vh;
}

/* ==============================
   UTILITY CLASSES
   ============================== */

/* Z-index */
.z-0 { z-index: 0 !important; }
.z--1 { z-index: -1 !important; }
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !important; }
.z-4 { z-index: 4 !important; }
.z-5 { z-index: 5 !important; }
.z-1020 { z-index: 1020 !important; }
.z-1025 { z-index: 1025 !important; }
.z-1035 { z-index: 1035 !important; }
.z-1045 { z-index: 1045 !important; }

/* Text truncate */
.text-truncate-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.text-truncate-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.text-truncate-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.text-truncate-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* Cursor */
.c-pointer { cursor: pointer !important; }
.c-not-allowed { cursor: not-allowed !important; }
.c-default { cursor: default !important; }

/* Position */
.attached-top,
.attached-bottom {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;
}
.attached-top { top: 0; }
.attached-bottom { bottom: 0; }

.separator {
    position: relative;
    text-align: center;
    z-index: 1;
}
.separator:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: #ebedf2;
    left: 0;
    right: 0;
    top: 50%;
    z-index: -1;
}

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.absolute-full {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.absolute-top-right { position: absolute; top: 0; right: 0; }
.absolute-top-left { position: absolute; top: 0; left: 0; }
.absolute-bottom-right { position: absolute; bottom: 0; right: 0; }
.absolute-bottom-left { position: absolute; bottom: 0; left: 0; }
.absolute-top-center {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
}

.top-0 { top: 0 !important; }
.top-100 { top: 100% !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-100 { bottom: 100% !important; }
.left-0 { left: 0 !important; }
.left-100 { left: 100% !important; }
.right-0 { right: 0 !important; }
.right-100 { right: 100% !important; }

/* Font weight */
.fw-100 { font-weight: 100 !important; }
.fw-200 { font-weight: 200 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }

/* Font size */
.fs-8 { font-size: 8px !important; }
.fs-9 { font-size: 9px !important; }
.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-17 { font-size: 17px !important; }
.fs-18 { font-size: 18px !important; }
.fs-19 { font-size: 19px !important; }
.fs-20 { font-size: 20px !important; }
.fs-21 { font-size: 21px !important; }
.fs-22 { font-size: 22px !important; }
.fs-23 { font-size: 23px !important; }
.fs-24 { font-size: 24px !important; }
.fs-25 { font-size: 25px !important; }
.fs-26 { font-size: 26px !important; }
.fs-27 { font-size: 27px !important; }
.fs-28 { font-size: 28px !important; }
.fs-30 { font-size: 30px !important; }
.fs-35 { font-size: 35px !important; }
.fs-40 { font-size: 40px !important; }
.fs-45 { font-size: 45px !important; }


/* Line height */
.lh-1 { line-height: 1 !important; }
.lh-1-1 { line-height: 1.1 !important; }
.lh-1-2 { line-height: 1.2 !important; }
.lh-1-3 { line-height: 1.3 !important; }
.lh-1-4 { line-height: 1.4 !important; }
.lh-1-5 { line-height: 1.5 !important; }
.lh-1-6 { line-height: 1.6 !important; }
.lh-1-7 { line-height: 1.7 !important; }
.lh-1-8 { line-height: 1.8 !important; }
.lh-1-9 { line-height: 1.9 !important; }
.lh-2 { line-height: 2 !important; }

/* Opacity */
.opacity-0, .hov-opacity-0:hover { opacity: 0 !important; }
.opacity-10, .hov-opacity-10:hover { opacity: 0.1 !important; }
.opacity-20, .hov-opacity-20:hover { opacity: 0.2 !important; }
.opacity-30, .hov-opacity-30:hover { opacity: 0.3 !important; }
.opacity-40, .hov-opacity-40:hover { opacity: 0.4 !important; }
.opacity-50, .hov-opacity-50:hover { opacity: 0.5 !important; }
.opacity-60, .hov-opacity-60:hover { opacity: 0.6 !important; }
.opacity-70, .hov-opacity-70:hover { opacity: 0.7 !important; }
.opacity-80, .hov-opacity-80:hover { opacity: 0.8 !important; }
.opacity-90, .hov-opacity-90:hover { opacity: 0.9 !important; }
.opacity-100, .hov-opacity-100:hover { opacity: 1 !important; }

/* Shadow */
.shadow-xs, .hov-shadow-xs:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important; }
.shadow-sm, .hov-shadow-sm:hover { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.shadow, .hov-shadow:hover { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important; }
.shadow-md, .hov-shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; }
.shadow-lg, .hov-shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
.shadow-xl, .hov-shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
.shadow-2xl, .hov-shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }
.shadow-out, .hov-shadow-out:hover { 
    z-index: 2 !important; 
    box-shadow: 0px 20px 40px rgb(0 0 0 / 16%) !important; 
}
.shadow-none, .hov-shadow-none:hover { box-shadow: none !important; }

/* Background */
.bg-cover { background-size: cover; }
.bg-center { background-position: center center; }
.bg-no-repeat { background-repeat: no-repeat; }

.bg-primary, .hov-bg-primary:hover { background-color: var(--primary) !important; }
.bg-soft-primary, .hov-bg-soft-primary:hover { background-color: var(--soft-primary) !important; }
.bg-secondary, .hov-bg-secondary:hover { background-color: var(--secondary) !important; }
.bg-soft-secondary, .hov-bg-soft-secondary:hover { background-color: var(--soft-secondary) !important; }
.bg-success, .hov-bg-success:hover { background-color: var(--success) !important; }
.bg-soft-success, .hov-bg-soft-success:hover { background-color: var(--soft-success) !important; }
.bg-info, .hov-bg-info:hover { background-color: var(--info) !important; }
.bg-soft-info, .hov-bg-soft-info:hover { background-color: var(--soft-info) !important; }
.bg-warning, .hov-bg-warning:hover { background-color: var(--warning) !important; }
.bg-soft-warning, .hov-bg-soft-warning:hover { background-color: var(--soft-warning) !important; }
.bg-secondary-base, .hov-bg-secondary-base:hover { background-color: var(--secondary-base) !important; }
.bg-soft-secondary-base, .hov-bg-soft-secondary-base:hover { background-color: var(--soft-secondary-base) !important; }
.bg-danger, .hov-bg-danger:hover { background-color: var(--danger) !important; }
.bg-soft-danger, .hov-bg-soft-danger:hover { background-color: var(--soft-danger) !important; }
.bg-dark, .hov-bg-dark:hover { background-color: var(--dark) !important; }
.bg-soft-dark, .hov-bg-soft-dark:hover { background-color: var(--soft-dark) !important; }
.bg-blue, .hov-bg-blue:hover { background-color: var(--blue) !important; }
.bg-soft-blue, .hov-bg-soft-blue:hover { background-color: var(--soft-blue) !important; }
.bg-light, .hov-bg-light:hover { background-color: var(--light) !important; }
.bg-black, .hov-bg-black:hover { background-color: #17171f !important; }
.bg-soft-light, .hov-bg-soft-light:hover { background-color: var(--soft-light) !important; }
.bg-gray, .hov-bg-gray:hover { background-color: var(--gray) !important; }
.bg-soft-white { background-color: var(--soft-white) !important; }
.hov-bg-white:hover { background-color: #fff !important; }

.bg-black-10, .hov-bg-black-10:hover { background-color: rgb(0 0 0 / 10%) !important; }
.bg-black-20, .hov-bg-black-20:hover { background-color: rgb(0 0 0 / 20%) !important; }

.bg-grad-1 { background-color: #eb4786; background-image: linear-gradient(315deg, #eb4786 0%, #b854a6 74%); }
.bg-grad-2 { background-color: #875fc0; background-image: linear-gradient(315deg, #875fc0 0%, #5346ba 74%); }
.bg-grad-3 { background-color: #47c5f4; background-image: linear-gradient(315deg, #47c5f4 0%, #6791d9 74%); }
.bg-grad-4 { background-color: #ffb72c; background-image: linear-gradient(315deg, #ffb72c 0%, #f57f59 74%); }
.bg-grad-5 { background-color: #f2d470; background-image: linear-gradient(120deg, #f2d470 0%, #f39f3d 100%); }

/* Box shadow */
.shadow-primary, .hov-shadow-primary:hover { box-shadow: -5px 5px 18px rgba(1, 158, 247, 0.39); }
.shadow-secondary, .hov-shadow-secondary:hover { box-shadow: -2px 5px 15px rgba(0, 0, 0, 0.08); }
.shadow-success, .hov-shadow-success:hover { box-shadow: -5px 5px 18px rgba(81, 204, 138, 0.39); }

/* Border */
.border-2 { border: 2px solid !important; }
.border-3 { border: 3px solid !important; }

.border-gray-100 { border-color: #f7fafc !important; }
.border-gray-200 { border-color: #edf2f7 !important; }
.border-gray-300 { border-color: #e2e8f0 !important; }
.border-gray-400 { border-color: #cbd5e0 !important; }
.border-gray-500 { border-color: #a0aec0 !important; }
.border-gray-600 { border-color: #718096 !important; }
.border-gray-700 { border-color: #4a5568 !important; }
.border-gray-800 { border-color: #2d3748 !important; }
.border-gray-900 { border-color: #1a202c !important; }

.border-primary { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-success { border-color: var(--success) !important; }
.border-info { border-color: var(--info) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-secondary-base { border-color: var(--secondary-base) !important; }
.border-danger { border-color: var(--danger) !important; }
.border-light { border-color: var(--light) !important; }
.border-dark { border-color: var(--dark) !important; }
.border-blue { border-color: var(--blue) !important; }

.border-soft-primary { border-color: var(--soft-primary) !important; }
.border-soft-secondary { border-color: var(--soft-secondary) !important; }
.border-soft-success { border-color: var(--soft-success) !important; }
.border-soft-info { border-color: var(--soft-info) !important; }
.border-soft-warning { border-color: var(--soft-warning) !important; }
.border-soft-secondary-base { border-color: var(--soft-secondary-base) !important; }
.border-soft-danger { border-color: var(--soft-danger) !important; }
.border-soft-dark { border-color: var(--soft-dark) !important; }
.border-soft-light { border-color: var(--soft-light) !important; }
.border-soft-blue { border-color: var(--soft-blue) !important; }

.spinner-border { border-right-color: transparent !important; }

.border-width-2 { border-width: 2px !important; }
.border-width-3 { border-width: 3px !important; }
.border-width-4 { border-width: 4px !important; }

.border-bottom-6px { 
    border-bottom: 6px solid !important; 
    border-bottom-color: var(--soft-light) !important; 
}
.done .border-bottom-6px { border-bottom-color: var(--success) !important; }
.active .border-bottom-6px { border-bottom-color: var(--primary) !important; }

.border-dotted { border-style: dotted !important; }
.border-dashed { border-style: dashed !important; }
.border-transparent { border-color: transparent !important; }
.hov-border:hover { border-color: #dee2e6 !important; }
.hov-border-primary:hover { border-color: var(--primary) !important; }

/* Text */
.border-left-thick { border-left: 15px solid var(--secondary); }

.text-primary, .hov-text-primary:hover { color: var(--primary) !important; }
.text-soft-primary, .hov-text-soft-primary:hover { color: var(--soft-primary) !important; }
.text-secondary, .hov-text-secondary:hover { color: var(--secondary) !important; }
.text-soft-secondary, .hov-text-soft-secondary:hover { color: var(--soft-secondary) !important; }
.text-success, .hov-text-success:hover { color: var(--success) !important; }
.text-soft-success, .hov-text-soft-success:hover { color: var(--soft-success) !important; }
.text-info, .hov-text-info:hover { color: var(--info) !important; }
.text-soft-info, .hov-text-soft-info:hover { color: var(--soft-info) !important; }
.text-warning, .hov-text-warning:hover { color: var(--warning) !important; }
.text-soft-warning, .hov-text-soft-warning:hover { color: var(--soft-warning) !important; }
.text-secondary-base, .hov-text-secondary-base:hover { color: var(--secondary-base) !important; }
.text-soft-secondary-base, .hov-text-soft-secondary-base:hover { color: var(--soft-secondary-base) !important; }
.text-danger, .hov-text-danger:hover { color: var(--danger) !important; }
.text-soft-danger, .hov-text-soft-danger:hover { color: var(--soft-danger) !important; }
.text-dark, .hov-text-dark:hover { color: var(--dark) !important; }
.text-soft-dark, .hov-text-soft-dark:hover { color: var(--soft-dark) !important; }
.text-gray, .hov-text-gray:hover { color: var(--gray) !important; }
.text-gray-dark { color: var(--gray-dark) !important; }
.text-blue, .hov-text-blue:hover { color: var(--blue) !important; }
.text-soft-blue, .hov-text-soft-blue:hover { color: var(--soft-blue) !important; }
.text-light, .hov-text-light:hover { color: var(--light) !important; }
.text-soft-light { color: var(--soft-light) !important; }
.text-soft-white { color: var(--soft-white) !important; }
.text-inherit { color: inherit !important; }
.hov-text-white:hover { color: #fff !important; }
.hov-text-bold:hover { font-weight: bold !important; }

/* Width */
.w-auto { width: auto; }

/* Width/Height utility classes - using a loop pattern for brevity */
/* 5px to 50px in 5px increments */
.w-5px, .size-5px { width: 5px; height: 5px; }
.w-10px, .size-10px { width: 10px; height: 10px; }
.w-15px, .size-15px { width: 15px; height: 15px; }
.w-20px, .size-20px { width: 20px; height: 20px; }
.w-25px, .size-25px { width: 25px; height: 25px; }
.w-30px, .size-30px { width: 30px; height: 30px; }
.w-35px, .size-35px { width: 35px; height: 35px; }
.w-40px, .size-40px { width: 40px; height: 40px; }
.w-45px, .size-45px { width: 45px; height: 45px; }
.w-48px, .size-48px { width: 48px; height: 48px; }
.w-50px, .size-50px { width: 50px; height: 50px; }

/* 60px to 300px in 10px increments */
.w-60px, .size-60px { width: 60px; height: 60px; }
.w-64px, .size-64px { width: 64px; height: 64px; }
.w-70px, .size-70px { width: 70px; height: 70px; }
.w-80px, .size-80px { width: 80px; height: 80px; }
.w-90px, .size-90px { width: 90px; height: 90px; }
.w-100px, .size-100px { width: 100px; height: 100px; }
.w-110px, .size-110px { width: 110px; height: 110px; }
.w-120px, .size-120px { width: 120px; height: 120px; }
.w-130px, .size-130px { width: 130px; height: 130px; }
.w-140px, .size-140px { width: 140px; height: 140px; }
.w-150px, .size-150px { width: 150px; height: 150px; }
.w-160px, .size-160px { width: 160px; height: 160px; }
.w-170px, .size-170px { width: 170px; height: 170px; }
.w-180px, .size-180px { width: 180px; height: 180px; }
.w-190px, .size-190px { width: 190px; height: 190px; }
.w-200px, .size-200px { width: 200px; height: 200px; }
.w-210px, .size-210px { width: 210px; height: 210px; }
.w-220px, .size-220px { width: 220px; height: 220px; }
.w-230px, .size-230px { width: 230px; height: 230px; }
.w-240px, .size-240px { width: 240px; height: 240px; }
.w-250px, .size-250px { width: 250px; height: 250px; }
.w-260px, .size-260px { width: 260px; height: 260px; }
.w-270px, .size-270px { width: 270px; height: 270px; }
.w-280px, .size-280px { width: 280px; height: 280px; }
.w-290px, .size-290px { width: 290px; height: 290px; }
.w-300px, .size-300px { width: 300px; height: 300px; }

/* Additional sizes */
.w-310px, .size-310px { width: 310px; height: 310px; }
.w-320px, .size-320px { width: 320px; height: 320px; }
.w-330px, .size-330px { width: 330px; height: 330px; }
.w-340px, .size-340px { width: 340px; height: 340px; }
.w-350px, .size-350px { width: 350px; height: 350px; }
.w-360px, .size-360px { width: 360px; height: 360px; }
.w-370px, .size-370px { width: 370px; height: 370px; }
.w-380px, .size-380px { width: 380px; height: 380px; }
.w-390px, .size-390px { width: 390px; height: 390px; }
.w-400px, .size-400px { width: 400px; height: 400px; }
.w-410px, .size-410px { width: 410px; height: 410px; }
.w-420px, .size-420px { width: 420px; height: 420px; }
.w-450px, .size-450px { width: 450px; height: 450px; }
.w-500px, .size-500px { width: 500px; height: 500px; }
.w-553px, .size-553px { width: 553px; height: 553px; }
.w-640px, .size-640px { width: 640px; height: 640px; }
.w-800px, .size-800px { width: 800px; height: 800px; }

/* Height-specific classes */
.h-auto { height: auto; }
.h-255px, .size-255px { height: 255px; }
.h-197px, .size-197px { height: 197px; }
.h-212px, .size-212px { height: 212px; }
.h-215px, .size-215px { height: 215px; }
.h-226px, .size-226px { height: 226px; }
.h-460px, .size-460px { height: 460px; }
.h-475px, .size-475px { height: 475px; }
.h-485px, .size-485px { height: 485px; }
.h-490px, .size-490px { height: 490px; }
.h-600px, .size-600px { height: 600px; }
.h-620px, .size-620px { height: 620px; }
.h-630px, .size-630px { height: 630px; }

/* Spacing utilities - simplified pattern */
.pl-6 { padding-left: 6px; }
.pl-7 { padding-left: 7px; }
.pl-8 { padding-left: 8px; }
.pl-9 { padding-left: 9px; }
.pl-10 { padding-left: 10px; }
.pl-11 { padding-left: 11px; }
.pl-12 { padding-left: 12px; }
.pl-13 { padding-left: 13px; }
.pl-14 { padding-left: 14px; }
.pl-15 { padding-left: 15px; }
.pl-16 { padding-left: 16px; }
.pl-17 { padding-left: 17px; }
.pl-18 { padding-left: 18px; }
.pl-19 { padding-left: 19px; }
.pl-20 { padding-left: 20px; }
.pl-21 { padding-left: 21px; }
.pl-22 { padding-left: 22px; }
.pl-23 { padding-left: 23px; }
.pl-24 { padding-left: 24px; }
.pl-25 { padding-left: 25px; }

/* Similar pattern for pr, ml, mr, px, py */

/* Gutters */
.gutters-5 { margin-right: -5px; margin-left: -5px; }
.gutters-5 > .col,
.gutters-5 > [class*="col-"] { padding-right: 5px; padding-left: 5px; }

.gutters-10 { margin-right: -10px; margin-left: -10px; }
.gutters-10 > .col,
.gutters-10 > [class*="col-"] { padding-right: 10px; padding-left: 10px; }

.gutters-15 { margin-right: -15px; margin-left: -15px; }
.gutters-15 > .col,
.gutters-15 > [class*="col-"] { padding-right: 15px; padding-left: 15px; }

.gutters-16 { margin-right: -16px; margin-left: -16px; }
.gutters-16 > .col,
.gutters-16 > [class*="col-"] { padding-right: 0px; padding-left: 0px; }

.gutters-17 { margin-right: -17px; margin-left: -17px; }
.gutters-17 > .col,
.gutters-17 > [class*="col-"] { padding-right: 17px; padding-left: 17px; }

.gutters-20 { margin-right: -20px; margin-left: -20px; }
.gutters-20 > .col,
.gutters-20 > [class*="col-"] { padding-right: 20px; padding-left: 20px; }

.gutters-25 { margin-right: -25px; margin-left: -25px; }
.gutters-25 > .col,
.gutters-25 > [class*="col-"] { padding-right: 25px; padding-left: 25px; }

.gutters-30 { margin-right: -30px; margin-left: -30px; }
.gutters-30 > .col,
.gutters-30 > [class*="col-"] { padding-right: 30px; padding-left: 30px; }

/* Image fit */
.img-fit {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* RTL support */
[dir="rtl"] .absolute-top-right { right: auto; left: 0; }
[dir="rtl"] .absolute-top-left { left: auto; right: 0; }
[dir="rtl"] .absolute-bottom-right { left: auto; right: 0; }
[dir="rtl"] .absolute-bottom-left { left: auto; right: 0; }

/* ==============================
   MEDIA QUERIES
   Organized from largest to smallest screen
   ============================== */

/* XXL devices (≥1500px) */
@media (min-width: 1500px) {
    .container, .container-xxl { max-width: 1400px; }
    
    /* Grid system for XXL */
    .col-xxl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-xxl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    
    /* Column widths */
    .col-xxl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xxl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xxl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xxl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xxl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xxl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xxl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xxl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xxl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xxl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xxl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xxl-12 { flex: 0 0 100%; max-width: 100%; }
    
    /* Offsets */
    .offset-xxl-0 { margin-left: 0; }
    .offset-xxl-1 { margin-left: 8.333333%; }
    .offset-xxl-2 { margin-left: 16.666667%; }
    .offset-xxl-3 { margin-left: 25%; }
    .offset-xxl-4 { margin-left: 33.333333%; }
    .offset-xxl-5 { margin-left: 41.666667%; }
    .offset-xxl-6 { margin-left: 50%; }
    .offset-xxl-7 { margin-left: 58.333333%; }
    .offset-xxl-8 { margin-left: 66.666667%; }
    .offset-xxl-9 { margin-left: 75%; }
    .offset-xxl-10 { margin-left: 83.333333%; }
    .offset-xxl-11 { margin-left: 91.666667%; }
    
    /* Row columns */
    .row-cols-xxl-1 > * { flex: 0 0 100%; max-width: 100%; }
    .row-cols-xxl-2 > * { flex: 0 0 50%; max-width: 50%; }
    .row-cols-xxl-3 > * { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .row-cols-xxl-4 > * { flex: 0 0 25%; max-width: 25%; }
    .row-cols-xxl-5 > * { flex: 0 0 20%; max-width: 20%; }
    .row-cols-xxl-6 > * { flex: 0 0 16.666667%; max-width: 16.666667%; }
    
    /* Specific utilities for XXL */
    .h-xxl-465px, .size-xxl-465px { height: 465px; }
    .h-xxl-416px, .size-xxl-416px { height: 416px; }
    .h-xxl-675px, .size-xxl-675px { height: 675px; }
    .h-xxl-200px, .size-xxl-200px { height: 200px; }
    .h-xxl-250px, .size-xxl-250px { height: 250px; }
    .h-xxl-300px, .size-xxl-300px { height: 300px; }
    .h-xxl-350px, .size-xxl-350px { height: 350px; }
    .h-xxl-400px, .size-xxl-400px { height: 400px; }
    .h-xxl-450px, .size-xxl-450px { height: 450px; }
    .h-xxl-500px, .size-xxl-500px { height: 500px; }
    .h-xxl-550px, .size-xxl-550px { height: 550px; }
    .h-xxl-600px, .size-xxl-600px { height: 600px; }
    
    /* Flex utilities */
    .flex-grow-xxl-0 { flex-grow: 0 !important; }
    .flex-grow-xxl-1 { flex-grow: 1 !important; }
    .flex-xxl-nowrap { flex-wrap: nowrap !important; }
    .flex-xxl-row { flex-direction: row !important; }
    
    /* RTL support */
    [dir="rtl"] .row-cols-xxl-1 > * { flex: 0 0 100%; max-width: 100%; }
    [dir="rtl"] .row-cols-xxl-2 > * { flex: 0 0 50%; max-width: 50%; }
    [dir="rtl"] .row-cols-xxl-3 > * { flex: 0 0 33.333333%; max-width: 33.333333%; }
    [dir="rtl"] .row-cols-xxl-4 > * { flex: 0 0 25%; max-width: 25%; }
    [dir="rtl"] .row-cols-xxl-5 > * { flex: 0 0 20%; max-width: 20%; }
    [dir="rtl"] .row-cols-xxl-6 > * { flex: 0 0 16.666667%; max-width: 16.666667%; }
}

/* XL devices (≥1200px) */
@media (min-width: 1200px) {
    /* Width utilities */
    .w-xl-25 { width: 25% !important; }
    .w-xl-50 { width: 50% !important; }
    .w-xl-75 { width: 75% !important; }
    .w-xl-100 { width: 100% !important; }
    .w-xl-auto { width: auto !important; }
    
    /* Flex utilities */
    .flex-grow-xl-0 { flex-grow: 0 !important; }
    .flex-grow-xl-1 { flex-grow: 1 !important; }
    .flex-xl-nowrap { flex-wrap: nowrap !important; }
    
    /* Row columns */
    [dir="rtl"] .row-cols-xl-1 > * { flex: 0 0 100%; max-width: 100%; }
    [dir="rtl"] .row-cols-xl-2 > * { flex: 0 0 50%; max-width: 50%; }
    [dir="rtl"] .row-cols-xl-3 > * { flex: 0 0 33.333333%; max-width: 33.333333%; }
    [dir="rtl"] .row-cols-xl-4 > * { flex: 0 0 25%; max-width: 25%; }
    [dir="rtl"] .row-cols-xl-5 > * { flex: 0 0 20%; max-width: 20%; }
    [dir="rtl"] .row-cols-xl-6 > * { flex: 0 0 16.666667%; max-width: 16.666667%; }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
    /* Specific height utilities */
    .h-lg-283px, .size-lg-283px { height: 283px; }
    .h-lg-520px, .size-lg-520px { height: 520px; }
    .h-lg-540px, .size-lg-540px { height: 540px; }
    .h-lg-584px, .size-lg-584px { height: 584px; }
    .h-lg-622px, .size-lg-622px { height: 622px; }
    
    /* Width utilities */
    .w-lg-25 { width: 25% !important; }
    .w-lg-50 { width: 50% !important; }
    .w-lg-75 { width: 75% !important; }
    .w-lg-100 { width: 100% !important; }
    .w-lg-auto { width: auto !important; }
    
    /* Flex utilities */
    .flex-grow-lg-0 { flex-grow: 0 !important; }
    .flex-grow-lg-1 { flex-grow: 1 !important; }
    .flex-lg-nowrap { flex-wrap: nowrap !important; }
    
    /* Row columns */
    [dir="rtl"] .row-cols-lg-1 > * { flex: 0 0 100%; max-width: 100%; }
    [dir="rtl"] .row-cols-lg-2 > * { flex: 0 0 50%; max-width: 50%; }
    [dir="rtl"] .row-cols-lg-3 > * { flex: 0 0 33.333333%; max-width: 33.333333%; }
    [dir="rtl"] .row-cols-lg-4 > * { flex: 0 0 25%; max-width: 25%; }
    [dir="rtl"] .row-cols-lg-5 > * { flex: 0 0 20%; max-width: 20%; }
    [dir="rtl"] .row-cols-lg-6 > * { flex: 0 0 16.666667%; max-width: 16.666667%; }
}

/* Medium devices (≥768px) */
@media (min-width: 768px) {
    /* Specific height utilities */
    .h-md-255px, .size-md-255px { height: 255px; }
    .h-md-316px, .size-md-316px { height: 316px; }
    .h-md-337px, .size-md-337px { height: 337px; }
    .h-md-374px, .size-md-374px { height: 374px; }
    .h-md-416px, .size-md-416px { height: 416px; }
    .h-md-425px, .size-md-425px { height: 425px; }
    .h-md-570px { height: 570px; }
    
    /* Position utilities */
    .absolute-md-top-right {
        position: absolute;
        top: 0;
        right: 0;
        bottom: inherit;
        left: inherit;
    }
    
    /* Width utilities */
    .w-md-25 { width: 25% !important; }
    .w-md-50 { width: 50% !important; }
    .w-md-75 { width: 75% !important; }
    .w-md-100 { width: 100% !important; }
    .w-md-auto { width: auto !important; }
    
    /* Flex utilities */
    .flex-grow-md-0 { flex-grow: 0 !important; }
    .flex-grow-md-1 { flex-grow: 1 !important; }
    .flex-md-nowrap { flex-wrap: nowrap !important; }
    
    /* Row columns */
    [dir="rtl"] .row-cols-md-1 > * { flex: 0 0 100%; max-width: 100%; }
    [dir="rtl"] .row-cols-md-2 > * { flex: 0 0 50%; max-width: 50%; }
    [dir="rtl"] .row-cols-md-3 > * { flex: 0 0 33.333333%; max-width: 33.333333%; }
    [dir="rtl"] .row-cols-md-4 > * { flex: 0 0 25%; max-width: 25%; }
    [dir="rtl"] .row-cols-md-5 > * { flex: 0 0 20%; max-width: 20%; }
    [dir="rtl"] .row-cols-md-6 > * { flex: 0 0 16.666667%; max-width: 16.666667%; }
}

/* Small devices (≥576px) */
@media (min-width: 576px) {
    /* Width utilities */
    .w-sm-25 { width: 25% !important; }
    .w-sm-50 { width: 50% !important; }
    .w-sm-75 { width: 75% !important; }
    .w-sm-100 { width: 100% !important; }
    .w-sm-auto { width: auto !important; }
    
    /* Specific height utility */
    .h-sm-55px, .size-sm-55px { height: 55px; }
    .w-sm-55px, .size-sm-55px { width: 55px; }
    
    /* Flex utilities */
    .flex-grow-sm-0 { flex-grow: 0 !important; }
    .flex-grow-sm-1 { flex-grow: 1 !important; }
    .flex-sm-nowrap { flex-wrap: nowrap !important; }
    
    /* Row columns */
    [dir="rtl"] .row-cols-sm-1 > * { flex: 0 0 100%; max-width: 100%; }
    [dir="rtl"] .row-cols-sm-2 > * { flex: 0 0 50%; max-width: 50%; }
    [dir="rtl"] .row-cols-sm-3 > * { flex: 0 0 33.333333%; max-width: 33.333333%; }
    [dir="rtl"] .row-cols-sm-4 > * { flex: 0 0 25%; max-width: 25%; }
    [dir="rtl"] .row-cols-sm-5 > * { flex: 0 0 20%; max-width: 20%; }
    [dir="rtl"] .row-cols-sm-6 > * { flex: 0 0 16.666667%; max-width: 16.666667%; }
}

/* ==============================
   RESPONSIVE BEHAVIOR (Max-width queries)
   ============================== */

/* Extra large devices (≤1799px) */
@media (max-width: 1799px) {
    /* Add specific styles for ≤1799px if needed */
}

/* Desktop to tablet transition (≤1599px) */
@media (max-width: 1599px) {
    /* Add specific styles for ≤1599px if needed */
}

/* Tablet landscape (≤1399px) */
@media (max-width: 1399px) {
    /* Add specific styles for ≤1399px if needed */
}

/* Tablet portrait (≤1199px) */
@media (max-width: 1199px) {
    /* Add specific styles for ≤1199px if needed */
}

/* Mobile landscape (≤991px) */
@media (max-width: 991.98px) {
    .mobile-hor-swipe {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .modal-body .nav-link {
        font-size: 18px;
        padding: 10px 0;
    }
}

/* Mobile portrait (≤767px) */
@media (max-width: 767px) {
    /* Add specific styles for ≤767px if needed */
}

/* Small mobile (≤575px) */
@media (max-width: 575px) {
    /* Add specific styles for ≤575px if needed */
}

/* Additional responsive utilities */
@media (max-width: 1530px) {
    /* Add specific styles for ≤1530px if needed */
}

@media (max-width: 1220px) {
    /* Add specific styles for ≤1220px if needed */
}

/* Horizontal swipe for touch devices */
.hor-swipe {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}