/* P4.AZ: one modern look for every public page (home, courses, course pages, learning paths, about, gallery, projects,
   contact, FAQ, verify, legal pages). Loaded after each page's own styles by the page filter (includes/p4az_theme.php);
   rules start with "html" so they win over the page's rules without !important. Brand colours come from Website
   settings: --az-brand (readable under white text), --az-glow (the colour as chosen), --az-deep (secondary, darker). */
:root {
    --az-ink: #0f172a;
    --az-muted: #556070;
    --az-line: #e4e8f0;
    --az-soft: #f5f7fb;
    --az-card: #ffffff;
    --az-radius: 18px;
    --az-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px -14px rgba(15, 23, 42, .18);
    --az-shadow-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 24px 48px -18px rgba(15, 23, 42, .28);
    --az-ease: cubic-bezier(.2, .7, .2, 1);
    --az-head: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --az-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- base */
html body { font-family: var(--az-body); color: var(--az-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html h1, html h2, html h3, html h4, html h5, html .display-4, html .display-5, html .section-title { font-family: var(--az-head); letter-spacing: -.015em; }
html a { text-underline-offset: 3px; }
html :focus-visible { outline: 3px solid var(--az-glow); outline-offset: 2px; border-radius: 6px; }
html ::selection { background: color-mix(in srgb, var(--az-glow) 28%, transparent); }
html .text-primary { color: var(--az-brand) !important; }
html .bg-primary { background-color: var(--az-brand) !important; }
html img { max-width: 100%; }
html img.az-ph { object-fit: cover; }

/* ---------- buttons */
html .btn { border-radius: 12px; font-weight: 600; transition: transform .15s var(--az-ease), box-shadow .2s, background-color .2s, border-color .2s, color .2s; }
html .btn:active { transform: translateY(1px); }
html .btn-primary { background: var(--az-brand); border-color: var(--az-brand); color: #fff; box-shadow: 0 10px 22px -12px var(--az-glow); }
html .btn-primary:hover, html .btn-primary:focus { background: var(--az-brand-hover); border-color: var(--az-brand-hover); color: #fff; box-shadow: 0 14px 28px -12px var(--az-glow); }
html .btn-outline-primary { color: var(--az-brand); border: 1.5px solid var(--az-brand); background: transparent; }
html .btn-outline-primary:hover { background: var(--az-brand); color: #fff; border-color: var(--az-brand); }
html .btn-lg { padding: .8rem 1.6rem; font-size: 1.02rem; }
html .btn-light { border-radius: 12px; }

/* ---------- header */
html .header { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(15, 23, 42, .06); box-shadow: none; transition: box-shadow .25s, background .25s; }
html .header.az-scrolled { background: rgba(255, 255, 255, .95); box-shadow: 0 8px 28px -18px rgba(15, 23, 42, .35); }
html .header .navbar { background: transparent !important; padding: 14px 0; transition: padding .25s var(--az-ease); }
html .header.az-scrolled .navbar { padding: 8px 0; }
html .header .navbar-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--az-head); font-weight: 800; color: var(--az-ink); }
/* the logo: rounded, framed, soft glow in the brand colour */
html .header .navbar-brand img, html .footer .footer-widget > img, html .az-logo {
    max-height: 52px; height: 52px; width: auto; padding: 5px 10px; border-radius: 14px; background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--az-glow) 35%, #fff);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-glow) 8%, transparent), 0 6px 22px -6px color-mix(in srgb, var(--az-glow) 70%, transparent);
    transition: box-shadow .3s var(--az-ease), transform .3s var(--az-ease);
}
html .header .navbar-brand:hover img { transform: translateY(-1px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-glow) 14%, transparent), 0 10px 30px -6px var(--az-glow); }
html .header.az-scrolled .navbar-brand img { height: 44px; }
html .az-mark { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--az-brand); color: #fff; font-weight: 800;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-glow) 12%, transparent), 0 6px 20px -4px var(--az-glow); }
html .navbar-nav .nav-link { color: #334155 !important; font-weight: 600; font-size: .95rem; padding: 9px 14px !important; border-radius: 10px; transition: color .2s, background .2s; }
html .navbar-nav .nav-link::after { display: none; }
html .navbar-nav .nav-link.dropdown-toggle::after { display: inline-block; position: static; content: ""; width: 0; height: 0; background: none; margin-left: .4em; vertical-align: .15em;
    border-top: .32em solid; border-right: .32em solid transparent; border-left: .32em solid transparent; border-bottom: 0; transition: transform .2s; }
html .navbar-nav .nav-link.dropdown-toggle.show::after { transform: rotate(180deg); }
html .navbar-nav .nav-link:hover, html .navbar-nav .nav-link:focus { color: var(--az-brand) !important; background: color-mix(in srgb, var(--az-glow) 9%, transparent); }
html .navbar-nav .nav-link.active, html .navbar-nav .nav-link[aria-current="page"] { color: var(--az-brand) !important; background: color-mix(in srgb, var(--az-glow) 12%, transparent); }
html .navbar-nav .nav-link i { opacity: .75; }
html .navbar .btn { border-radius: 999px; padding: 9px 20px; font-size: .92rem; }
html .navbar .btn-outline-primary { background: #fff; }
html .navbar-toggler { border: 1.5px solid var(--az-line); border-radius: 12px; padding: 8px 10px; }
html .navbar-toggler:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-glow) 25%, transparent); }
html .dropdown-menu { border: 1px solid var(--az-line); border-radius: 14px; box-shadow: var(--az-shadow-hover); padding: 8px; animation: az-drop .18s var(--az-ease); }
html .dropdown-item { border-radius: 10px; padding: 9px 14px; font-weight: 500; }
html .dropdown-item:hover, html .dropdown-item:focus { background: color-mix(in srgb, var(--az-glow) 10%, transparent); color: var(--az-brand); }
@keyframes az-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 991px) {
    html .header .navbar-collapse { margin-top: 10px; background: #fff; border: 1px solid var(--az-line); border-radius: 18px; padding: 10px 12px 14px; box-shadow: var(--az-shadow-hover); }
    html .navbar-nav .nav-link { padding: 12px 14px !important; font-size: 1rem; }
    html .navbar .btn { width: 100%; margin: 8px 0 0 !important; padding: 12px 20px; }
    html .header .navbar-brand img { height: 44px; }
}

/* ---------- page headers (inner pages) */
html .page-header, html .projects-hero, html .course-header, html .lp-hero {
    position: relative; overflow: hidden; color: #fff; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px);
    background: radial-gradient(900px 420px at 85% -10%, rgba(255, 255, 255, .16), transparent 60%),
                radial-gradient(700px 380px at -10% 120%, color-mix(in srgb, var(--az-glow) 55%, transparent), transparent 60%),
                linear-gradient(135deg, var(--az-brand) 0%, var(--az-deep) 100%) !important;
}
html .page-header::after, html .projects-hero::after, html .course-header::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
    background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.4px); background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
}
html .page-header > *, html .projects-hero > *, html .course-header > * { position: relative; z-index: 1; }
html .page-header h1, html .projects-hero h1, html .course-header h1, html .lp-hero h1 { font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.1; color: #fff; }
html .page-header .lead, html .projects-hero .lead { opacity: .92; max-width: 640px; margin-left: auto; margin-right: auto; }
html .breadcrumb { display: inline-flex; gap: 2px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); margin-top: 14px; }
html .page-header .breadcrumb a, html .course-header .breadcrumb a { color: #fff; text-decoration: none; opacity: .9; }
html .page-header .breadcrumb-item.active, html .course-header .breadcrumb-item.active { color: #fff; opacity: .75; }
html .page-header .breadcrumb-item + .breadcrumb-item::before, html .course-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .6); }

/* ---------- home hero */
html .hero-slider .carousel-item { position: relative; }
html .hero-slider .hero-slide { position: relative; background-color: var(--az-deep); }
html .hero-slider .hero-slide::before, html .hero-slider .overlay {
    background: linear-gradient(100deg, rgba(10, 16, 34, .78) 0%, rgba(10, 16, 34, .45) 55%, rgba(10, 16, 34, .15) 100%) !important;
}
html .hero-title { font-family: var(--az-head); font-weight: 800 !important; font-size: clamp(2.1rem, 5vw, 4rem) !important; line-height: 1.06 !important; letter-spacing: -.025em; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
html .hero-subtitle { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25);
    font-size: .85rem !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html .hero-description { font-size: clamp(1rem, 1.6vw, 1.2rem) !important; opacity: .92; max-width: 640px; }
html .hero-buttons .btn { border-radius: 999px; padding: .85rem 1.8rem; }
html .hero-buttons .btn-outline-light { border-width: 1.5px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(255, 255, 255, .08); }
html .hero-slider .carousel-indicators [data-bs-target] { width: 26px; height: 6px; border-radius: 99px; border: 0; opacity: .5; transition: width .3s, opacity .3s; }
html .hero-slider .carousel-indicators .active { width: 44px; opacity: 1; }
html .carousel-control-prev-icon, html .carousel-control-next-icon { width: 46px; height: 46px; border-radius: 50%; background-color: rgba(10, 16, 34, .38); background-size: 45%;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .25); }

/* ---------- section headings */
html .py-6 { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
html[data-p222] body .section-subtitle { color: var(--az-brand-hover) !important; }
html .section-subtitle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .78rem; letter-spacing: .14em;
    color: var(--az-brand); background: color-mix(in srgb, var(--az-glow) 10%, #fff); border: 1px solid color-mix(in srgb, var(--az-glow) 22%, #fff); }
html .section-title, html .section-header h2, html .display-5 { font-weight: 800 !important; font-size: clamp(1.8rem, 3.6vw, 2.75rem) !important; line-height: 1.12; }
html .section-title, html .section-header h2 { color: var(--az-ink); }
html .section-description, html .section-header .lead { color: var(--az-muted) !important; font-size: 1.06rem; }
html .bg-light { background: linear-gradient(180deg, var(--az-soft), #fff) !important; }

/* ---------- cards: courses, services, projects, categories, events, team, contact, videos */
html .course-card, html .service-card, html .project-card, html .category-card, html .event-card, html .team-card, html .contact-card,
html .mission-vision-card, html .video-card, html .testimonial-card, html .path-card, html .lp-card, html .stat-item {
    background: var(--az-card); border: 1px solid var(--az-line) !important; border-radius: var(--az-radius) !important; box-shadow: var(--az-shadow) !important;
    overflow: hidden; transition: transform .35s var(--az-ease), box-shadow .35s var(--az-ease), border-color .35s;
}
html .course-card:hover, html .service-card:hover, html .project-card:hover, html .category-card:hover, html .event-card:hover, html .team-card:hover,
html .contact-card:hover, html .video-card:hover, html .path-card:hover, html .lp-card:hover {
    transform: translateY(-6px); box-shadow: var(--az-shadow-hover) !important; border-color: color-mix(in srgb, var(--az-glow) 35%, var(--az-line)) !important;
}
html .course-image, html .service-image, html .project-image, html .team-image, html .video-thumbnail { position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--az-glow) 22%, #eef2f7), #eef2f7); }
html .course-image img, html .service-image img, html .project-image img, html .team-image img, html .video-thumbnail img {
    width: 100%; aspect-ratio: 16 / 10; height: auto !important; object-fit: cover; transition: transform .6s var(--az-ease);
}
html .course-card:hover .course-image img, html .service-card:hover .service-image img, html .project-card:hover .project-image img, html .video-card:hover img { transform: scale(1.06); }
html .course-body, html .service-content, html .project-content, html .course-content { padding: 20px 22px 22px !important; }
html .course-title, html .service-title, html .project-title { font-family: var(--az-head); font-weight: 700 !important; font-size: 1.12rem !important; line-height: 1.3; }
html .course-title a, html .service-title a, html .project-title a { color: var(--az-ink) !important; text-decoration: none; }
html .course-title a:hover, html .service-title a:hover, html .project-title a:hover { color: var(--az-brand) !important; }
html .course-description, html .service-desc, html .project-desc { color: var(--az-muted) !important; font-size: .92rem; }
html .course-meta, html .project-meta { font-size: .8rem; }
html .course-meta span, html .project-type, html .project-client { display: inline-flex; align-items: center; gap: 6px; }
html .price-new, html .course-price { color: var(--az-brand) !important; font-family: var(--az-head); font-weight: 800 !important; }
html .badge-sale, html .badge-free, html .project-status, html .image-count-badge { border-radius: 999px !important; font-weight: 700; letter-spacing: .02em; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); }
html .service-link, html .project-link { font-weight: 700; color: var(--az-brand) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
html .service-link i, html .project-link i { transition: transform .2s var(--az-ease); }
html .service-link:hover i, html .project-link:hover i { transform: translateX(4px); }
html .course-instructor img { border: 2px solid #fff; box-shadow: 0 0 0 1px var(--az-line); }
html .category-card { padding: 22px !important; }
html .category-card i, html .category-card .category-icon { color: var(--az-brand); }
html .event-date { background: linear-gradient(135deg, var(--az-brand), var(--az-deep)) !important; border-radius: 14px !important; }
html .stat-item { padding: 26px 18px; text-align: center; }
html .stat-item .counter, html .stat-item .count, html .stats-section h2, html .stats-section h3 { font-family: var(--az-head); font-weight: 800; color: var(--az-brand); }
html .stats-section { background: linear-gradient(135deg, var(--az-brand), var(--az-deep)) !important; color: #fff; }
html .stats-section .stat-item { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22) !important; color: #fff; box-shadow: none !important; }
html .stats-section .stat-item .counter, html .stats-section .stat-item .count, html .stats-section .stat-item h2, html .stats-section .stat-item h3 { color: #fff; }

/* cards on a coloured band (FAQ "Still have questions?") */
html .contact-section .contact-card { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24) !important; box-shadow: none !important; color: #fff;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html .contact-section .contact-card:hover { background: rgba(255, 255, 255, .16); }

/* ---------- testimonials */
html .testimonial-card { padding: clamp(28px, 4vw, 48px) !important; position: relative; }
html .testimonials .testimonial-card::before { content: "\201C"; position: absolute; top: 4px; left: 24px; font: 800 6rem/1 var(--az-head); color: color-mix(in srgb, var(--az-glow) 20%, transparent); }
html .testimonial-content p, html .testimonial-card p { font-size: 1.08rem; line-height: 1.7; color: #334155; }
html .testimonial-image img { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--az-glow); }

/* ---------- forms */
html .form-control, html .form-select { border-radius: 12px; border: 1.5px solid #d3dae6; padding: .7rem .95rem; transition: border-color .2s, box-shadow .2s; }
html .form-control:focus, html .form-select:focus { border-color: var(--az-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-glow) 20%, transparent); }
html .form-label { font-weight: 600; font-size: .92rem; color: #1e293b; }
html .input-group .form-control, html .input-group .input-group-text { border-radius: 0; }
html .input-group > :first-child { border-top-left-radius: 12px !important; border-bottom-left-radius: 12px !important; }
html .input-group > :last-child { border-top-right-radius: 12px !important; border-bottom-right-radius: 12px !important; }
html .form-check-input:checked { background-color: var(--az-brand); border-color: var(--az-brand); }
html .search-box, html .search-section .input-group { border-radius: 999px; box-shadow: var(--az-shadow); }

/* ---------- filters, tabs, pagination (courses, gallery) */
html .filter-section { padding: 14px 2px; border-bottom: 1px solid var(--az-line); }
html .filter-section:last-child { border-bottom: 0; }
html .category-pills .btn, html .tab-btn, html .filter-option { border-radius: 999px !important; }
html .tab-btn.active, html .nav-pills .nav-link.active { background: var(--az-brand) !important; color: #fff !important; border-color: var(--az-brand) !important; }
html .nav-tabs { border-bottom: 1px solid var(--az-line); gap: 4px; }
html .nav-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; border-radius: 0; font-weight: 600; color: #475569; background: transparent; }
html body .nav-tabs .nav-link.active { background: transparent !important; border: 0 !important; border-bottom: 3px solid var(--az-brand) !important; }
html .pagination { gap: 6px; }
html .page-link { border-radius: 10px !important; border: 1px solid var(--az-line); color: #334155; font-weight: 600; min-width: 40px; text-align: center; }
html .page-item.active .page-link { background: var(--az-brand); border-color: var(--az-brand); color: #fff; box-shadow: 0 8px 18px -10px var(--az-glow); }

html .az-filter-toggle { display: none; }
@media (max-width: 991px) {
    html .az-filter-toggle { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; margin-top: 10px; }
    html .filter-sidebar:not(.az-open) .az-filter-body { display: none; }
    html .filter-sidebar { position: static !important; }
}
html .breadcrumb { flex-wrap: wrap; border-radius: 14px; }

/* ---------- accordion (FAQ, course curriculum) */
html .accordion-item { border: 1px solid var(--az-line) !important; border-radius: 14px !important; overflow: hidden; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
html .accordion-button { font-family: var(--az-head); font-weight: 700; color: var(--az-ink); padding: 1.05rem 1.25rem; }
html .accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--az-glow) 8%, #fff); color: var(--az-brand); box-shadow: inset 0 -1px 0 var(--az-line); }
html .accordion-button:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-glow) 22%, transparent); }
html .accordion-body { color: #334155; line-height: 1.7; }

/* ---------- newsletter and call-to-action bands */
html .newsletter, html .cta-section {
    position: relative; overflow: hidden;
    background: radial-gradient(600px 300px at 100% 0, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(120deg, var(--az-brand), var(--az-deep)) !important;
}
html .newsletter h2, html .newsletter h3, html .cta-section h2 { font-family: var(--az-head); font-weight: 800; }
html .newsletter .input-group { border-radius: 999px !important; overflow: hidden; background: #fff; padding: 5px; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5); }
html .newsletter .input-group > * { border-radius: 999px !important; }
html .newsletter .btn { border-radius: 999px !important; background: var(--az-ink); border-color: var(--az-ink); color: #fff; padding-left: 1.4rem; padding-right: 1.4rem; }
html .newsletter .btn:hover { background: #1e293b; }

/* ---------- footer */
html .footer { position: relative; background: linear-gradient(160deg, #0d1424 0%, color-mix(in srgb, var(--az-deep) 70%, #0d1424) 100%) !important; color: #e2e8f0 !important; }
html .footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--az-glow), var(--az-brand), transparent); }
html .footer h5 { font-family: var(--az-head); font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: #fff; }
html body footer.footer .footer-widget a { color: rgba(226, 232, 240, .88) !important; transition: color .2s, padding .2s; }
html body footer.footer .footer-widget a:hover { color: #fff !important; }
html .footer .footer-widget li a:hover { padding-left: 4px; }
html .footer .footer-widget .opacity-75, html .footer .opacity-75 { opacity: .82 !important; }
html .footer .social-links a, html .social-link { display: inline-grid !important; place-items: center; width: 40px; height: 40px; margin: 0 6px 6px 0 !important; border-radius: 12px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff !important; transition: background .2s, transform .2s, box-shadow .2s; }
html .footer .social-links a:hover, html .social-link:hover { background: var(--az-brand); transform: translateY(-2px); box-shadow: 0 10px 20px -10px var(--az-glow); }
html .footer .footer-widget > img { background: #fff; }
html .footer-bottom { background: rgba(0, 0, 0, .22) !important; border-top: 1px solid rgba(255, 255, 255, .08); }
html .footer-bottom a { color: #fff !important; }
html #backToTop { width: 48px !important; height: 48px !important; border-radius: 14px !important; background: var(--az-brand); border: 0;
    box-shadow: 0 14px 30px -12px var(--az-glow); z-index: 50; }

/* ---------- empty states, alerts, modals */
html .empty-state { border: 2px dashed var(--az-line); border-radius: var(--az-radius); padding: 40px 20px; background: #fff; }
html .alert { border-radius: 14px; }
html .modal-content { border-radius: 20px; border: 0; box-shadow: 0 30px 80px -30px rgba(15, 23, 42, .55); }

/* ---------- scroll reveal (not for people who ask for less motion) */
@media (prefers-reduced-motion: no-preference) {
    html.az-motion .az-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--az-ease), transform .7s var(--az-ease); }
    html.az-motion .az-reveal.az-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html *, html *::before, html *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- phones */
@media (max-width: 575px) {
    html .page-header h1, html .projects-hero h1, html .course-header h1 { font-size: 1.85rem; }
    html .course-body, html .service-content, html .project-content { padding: 16px 18px 18px !important; }
    html .hero-buttons .btn { width: 100%; margin: 6px 0 0 !important; }
}