/*
Theme Name: Maktab
Theme URI: https://ifelsetech.com/maktab
Author: ifelse
Author URI: https://ifelsetech.com
Version: 4.0
License: GNU General Public License v2 or later
Text Domain: maktab.info
*/

:root {
    /* ── Brand ── */
    --color-primary: #a0ca00;
    --color-primary-dark: #87a91f;
    --color-primary-darker: #76980d;
    --color-primary-rgb: 160, 202, 0;
    --color-primary-light: rgba(var(--color-primary-rgb), 0.12);
    --color-primary-lighter: rgba(var(--color-primary-rgb), 0.08);
    
        /* ── Semantic Colors ── */
    --color-success: #10b981;
    --color-success-light: #ecfdf5;
    --color-danger: #ef4444;
    --color-danger-light: #fee2e2;
    --color-info: #3b82f6;
    --color-info-light: #eff6ff;
    --color-warning: #f97316;
    --color-warning-light: #fff7ed;


    /* ── Secondary / Accent ── */
    --color-secondary: #006451;
    --color-secondary-light: #009075;
    --color-secondary-muted: var(--color-secondary);

    /* ── Neutrals ── */
    --color-white: #ffffff;
    --color-off-white: #F7F5F2;
    --color-bg-green-light: #E8FCF2;
    --color-bg-light: #f1f5f9;
    --color-bg-feature: #fbfff1;

    /* ── Text ── */
    --color-text: #333333;
    --color-text-dark: #2c2c2c;
    --color-text-darker: #0f172a;
    --color-text-heading: #2d3748;
    --color-text-muted: #777777;
    --color-text-muted-dark: #666666;
    --color-text-body: #555555;
    --color-text-light: #636161;

    /* ── Borders ── */
    --color-border: #dddddd;
    --color-border-light: #eeeeee;
    --color-border-subtle: rgba(1, 2, 1, 0.08);
    --color-border-card: #e9ecef;

    /* ── Stars / Rating ── */
    --color-star: #ffc107;

    /* ── Utility ── */
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-overlay-light: rgba(0, 0, 0, 0.5);
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-green: rgba(var(--color-primary-rgb), 0.3);
    --color-shadow-card: rgba(214, 215, 216, 0.57);

    /* ── WhatsApp ── */
    --color-whatsapp: #00a822;

    /* ── Reading Progress ── */
    --color-progress-start: var(--color-primary);
    --color-progress-end: #7aaa00;

    /* ── Bootstrap Overrides ── */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-dark: var(--color-text);
    --bs-muted: var(--color-text-muted);
    --bs-secondary-color: var(--color-text-muted);
    --bs-border-radius: 1rem;
    --bs-body-color: var(--color-text);
    --bs-list-group-color: var(--color-text-body);

    /* ── Misc ── */
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-text);
    --bg-off-white: var(--color-off-white);
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

    --font-size-section-label: clamp(0.75rem, 0.8vw, 0.85rem);
    --font-size-section-title: clamp(1.4rem, 2.5vw, 2rem);
    --font-size-hero-section-title: clamp(1.6rem, 4vw, 2.5rem);
    --font-size-section-desc: clamp(1rem, 1.2vw, 1.1rem);

    /* ── Typography ── */
    --font-main: 'Poppins', sans-serif;
    --fw-regular: 400;
    --fw-semibold: 600;
}




img.video-image {
    width: 100%;
    filter: brightness(0.8);
}

a {
    text-decoration: none;
    color: var(--color-primary);
}

html {
    margin: 0 !important;
}

body {
    background-color: var(--color-white);
}

img.custom-logo {
    width: 180px;
    height: fit-content;
}

.text-column {
    position: relative;
    z-index: 2;
    width: 550px;
}

img.mobile-image {
    display: none;
}

.site-branding {
    width: 15%;
}

img.app-icons {
    width: 60px !important;
}

.hero-image {
    opacity: 0;
    transform: translateY(50px);
    /*animation: slideUp 1s ease-out forwards;*/
    animation: slideUp 2s cubic-bezier(0, 0, 0.2, 1) forwards;
}

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





.btn-primary {
    --bs-btn-color: var(--color-white) !important;
    --bs-btn-bg: var(--color-primary) !important;
    --bs-btn-border-color: var(--color-primary) !important;
    --bs-btn-hover-color: var(--color-white) !important;
    --bs-btn-hover-bg: var(--color-primary) !important;
    --bs-btn-hover-border-color: #0a58ca !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: #0a58ca !important;
    --bs-btn-active-border-color: #0a53be !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: var(--color-white);
    --bs-btn-disabled-bg: var(--color-primary) !important;
    --bs-btn-disabled-border-color: var(--color-primary) !important;

}

.section-subtitle-left {
    font-size: var(--font-size-section-desc);
    color: var(--bs-muted);
    max-width: 560px;
    line-height: 1.6;
    font-weight: var(--fw-regular);
}

.text-muted {
    --bs-text-opacity: 1;
    color: #777 !important;
}

/* Ensure footer links use the correct muted color */
.footer-section .text-muted {
    color: #777 !important;
    text-decoration: none;
}

.footer-section .text-muted:hover {
    color: var(--color-primary) !important;
}

.text-success {
    color: #a0ca00 !important;
}

.btn-primary:hover {
    border:unset;
}