/* ----------------------------------

Template Name: Robok - AI Agency & Technology HTML Template
Author: validtheme
Description:
Version: 1.0

Main Font    : Sora
Main Color   : #7476ff

-------------------------------------

[Typography]

Body copy:    15px 'Sora', sans-serif
Header:     36px 'Sora', sans-serif
Input, textarea:  16px 'Sora', sans-serif
Sidebar heading:  20px 'Sora', sans-serif

>>> TABLE OF CONTENTS:
=======================
        
    01. Template default css
        - Animations
        - General
        - Section Title
        - Video Button
        - Typography
        - Tables
        - Forms
        - Buttons
        - Pagination
        - Colors
    02. Preloader
    03. Topbar
	    - Topbar Style One
        - Topbar Style Two
    04 Navbar
        - Navbar Default
        - Navbar Transparent
        - Navbar Sticky
        - Navbar Box
    05. Banner
        - Banner Fade
        - Banner Slide
        - Banner Zoom
    06. About Us
	    - About Style One
        - About Style Two
    07. Services
        - Tab Version
        - Grid Version
        - Services Single
    08. Features
    09. Work Process
    10. Why Choose Us
    11. Fun Factor
    12. Pricing Table
    12. Partner World Wide
    13. Team
        - Grid Version
        - Carousel Version
        - Team Details
    14. Testimonials
		- Single Slider
        - Center Slider
    15. Projects
		- Grid Version
        - Carousel Version
        - Project Details
    16. Blog
        - Standard
        - Left Sidebar
        - Right Sidebar
        - Single
    17. Request Call Back
    18. FAQ
    19. Error 404
    20. Footer
    21. PHP Contact Form
    22. Others

*/

/*
** Write you custom css below
*/

/* Binena site-wide colour system. The inline head script on each page sets
   data-theme before paint, so these rules do not flash the light palette. */
:root {
    --binena-night: #071126;
    --binena-night-soft: #0d1933;
    --binena-night-raised: #13203d;
    --binena-night-border: rgba(255, 255, 255, 0.11);
    --binena-night-text: #d9e0ef;
    --binena-night-muted: #aeb8ce;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #smooth-wrapper,
html[data-theme="dark"] #smooth-content,
html[data-theme="dark"] main,
html[data-theme="dark"] section,
html[data-theme="dark"] .site-main {
    background-color: var(--binena-night);
    color: var(--binena-night-text);
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .meta a,
html[data-theme="dark"] .post-date {
    color: var(--binena-night-muted) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .title,
html[data-theme="dark"] .title a,
html[data-theme="dark"] .widget-title,
html[data-theme="dark"] strong {
    color: #fff !important;
}

html[data-theme="dark"] a:not(.btn):not(.text-light) {
    color: #e8edff;
}

html[data-theme="dark"] a:not(.btn):hover {
    color: var(--color-primary);
}

html[data-theme="dark"] .post-author,
html[data-theme="dark"] .sidebar-item,
html[data-theme="dark"] .pricing-style-one,
html[data-theme="dark"] .pricing-style-two,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .contact-form-style-one,
html[data-theme="dark"] .contact-form-style-two {
    background: var(--binena-night-soft) !important;
    color: var(--binena-night-text) !important;
    border-color: var(--binena-night-border) !important;
}

/* Let the page use one continuous canvas. These classes are layout
   structures in the template, not cards; filling them created hard blocks. */
html[data-theme="dark"] body:not(.binena-light-canvas) {
    background:
        radial-gradient(circle at 92% 38%, rgba(101, 75, 255, .11), transparent 34%),
        radial-gradient(circle at 8% 82%, rgba(38, 132, 196, .08), transparent 30%),
        var(--binena-night) !important;
    background-attachment: fixed !important;
}

html[data-theme="dark"] body #smooth-wrapper,
html[data-theme="dark"] body #smooth-content,
html[data-theme="dark"] body main,
html[data-theme="dark"] body section,
html[data-theme="dark"] body .site-main,
html[data-theme="dark"] body .bg-gray,
html[data-theme="dark"] body .bg-light,
html[data-theme="dark"] body .bg-white,
html[data-theme="dark"] body [class*="bg-gray"],
html[data-theme="dark"] body .blog-item-box,
html[data-theme="dark"] body .comments-area,
html[data-theme="dark"] body .team-style-one-item,
html[data-theme="dark"] body .team-style-two-item,
html[data-theme="dark"] body .project-style-one,
html[data-theme="dark"] body .testimonial-style-one,
html[data-theme="dark"] body .project-details-main-info,
html[data-theme="dark"] body .single-grid {
    background-color: transparent !important;
}

html[data-theme="dark"] .post-author,
html[data-theme="dark"] .sidebar-item,
html[data-theme="dark"] .pricing-style-one,
html[data-theme="dark"] .pricing-style-two,
html[data-theme="dark"] .card,
html[data-theme="dark"] .contact-form-style-one,
html[data-theme="dark"] .contact-form-style-two {
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .14);
}

html[data-theme="dark"] .sidebar-item,
html[data-theme="dark"] .post-author,
html[data-theme="dark"] .comment-item,
html[data-theme="dark"] .post-tags,
html[data-theme="dark"] .post-pagi-area,
html[data-theme="dark"] .blog-item-box,
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] hr,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button {
    border-color: var(--binena-night-border) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .pagination li a,
html[data-theme="dark"] .pagination li span {
    background-color: var(--binena-night-raised) !important;
    border-color: var(--binena-night-border) !important;
    color: #fff !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #8792aa !important;
    opacity: 1;
}

html[data-theme="dark"] blockquote {
    background: var(--binena-night-raised) !important;
    border-color: var(--color-primary) !important;
    color: #eef2ff !important;
}

html[data-theme="dark"] .breadcrumb-area,
html[data-theme="dark"] .bg-theme,
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer-area {
    background-color: #08142d !important;
    color: var(--binena-night-text);
}

html[data-theme="dark"] img:not(.logo):not([class*="icon"]):not([src*="/icon/"]):not([src*="/shape/"]) {
    filter: brightness(.92) contrast(1.04);
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255, 255, 255, .035);
    color: var(--binena-night-text);
}

html[data-theme="dark"] ::selection {
    background: var(--color-primary);
    color: #fff;
}

/* High-contrast copy on the homepage enterprise gradient card. */
html[data-theme="light"] .card-style-one-item.bg-gradient,
html[data-theme="dark"] .card-style-one-item.bg-gradient {
    background: linear-gradient(135deg, #5548df 0%, #276ba8 100%) !important;
}

html[data-theme="light"] .card-style-one-item.bg-gradient h3,
html[data-theme="dark"] .card-style-one-item.bg-gradient h3,
html[data-theme="light"] .card-style-one-item.bg-gradient p,
html[data-theme="dark"] .card-style-one-item.bg-gradient p {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

/* Keep transparent company and partner marks legible on light surfaces.
   The primary Binena navigation logo is intentionally excluded because it
   lives at assets/img/logo.png rather than inside assets/img/logo/. */
html[data-theme="light"] .brand-item,
html[data-theme="light"] .brand-style-two-item .logo-icon,
html[data-theme="light"] img[src*="/logo/"] {
    background-color: #0a122a;
    background-image: linear-gradient(145deg, #101f43, #0a122a);
    border: 1px solid rgba(16, 46, 103, 0.16);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(10, 18, 42, 0.12);
}

html[data-theme="light"] .brand-item,
html[data-theme="light"] .brand-style-two-item .logo-icon {
    min-height: 82px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[data-theme="light"] .brand-item img[src*="/logo/"],
html[data-theme="light"] .brand-style-two-item .logo-icon img[src*="/logo/"] {
    max-width: 100%;
    object-fit: contain;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html[data-theme="light"] img[src*="/logo/"]:not(.brand-item img):not(.logo-icon img) {
    padding: 14px 18px;
}

@media (max-width: 767px) {
    html[data-theme="light"] .brand-item,
    html[data-theme="light"] .brand-style-two-item .logo-icon {
        min-height: 68px;
        padding: 14px 18px;
    }
}

/* FAQ contrast: keep questions and expanded answers legible in both themes. */
html[data-theme="light"] .accordion-style-one-item {
    background: #ffffff;
    border: 1px solid #d8deeb;
}

html[data-theme="light"] .accordion-style-one-item button.accordion-button.collapsed {
    background: #ffffff !important;
    border-color: #d8deeb !important;
    color: #0a122a !important;
}

html[data-theme="dark"] .accordion-style-one-item {
    background: #13203d !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

html[data-theme="dark"] .accordion-style-one-item button.accordion-button.collapsed {
    background: #13203d !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

html[data-theme="light"] .accordion-secondary .accordion-style-one-item button.accordion-button:not(.collapsed),
html[data-theme="dark"] .accordion-secondary .accordion-style-one-item button.accordion-button:not(.collapsed),
html[data-theme="light"] .accordion-secondary .accordion-style-one-item .accordion-body,
html[data-theme="dark"] .accordion-secondary .accordion-style-one-item .accordion-body {
    background: linear-gradient(135deg, #5146dc 0%, #25639f 100%) !important;
    color: #ffffff !important;
}

html[data-theme="light"] .accordion-style-one-item button.accordion-button:not(.collapsed),
html[data-theme="dark"] .accordion-style-one-item button.accordion-button:not(.collapsed),
html[data-theme="light"] .accordion-style-one-item .accordion-body,
html[data-theme="dark"] .accordion-style-one-item .accordion-body,
html[data-theme="light"] .accordion-style-one-item .accordion-body p,
html[data-theme="dark"] .accordion-style-one-item .accordion-body p {
    color: #ffffff !important;
}

html[data-theme="light"] .accordion-style-one-item .accordion-body::after,
html[data-theme="dark"] .accordion-style-one-item .accordion-body::after {
    border-color: rgba(255, 255, 255, 0.38) !important;
}

/* Blog article: one coherent surface system for light and dark mode. */
html[data-theme="light"] .binena-blog-detail {
    --blog-canvas: #f4f7fc;
    --blog-surface: #ffffff;
    --blog-surface-soft: #edf2fa;
    --blog-border: #dfe6f1;
    --blog-text: #38445a;
    --blog-muted: #69758b;
    --blog-heading: #0a122a;
    --blog-shadow: 0 22px 55px rgba(31, 49, 86, .09);
}

html[data-theme="dark"] .binena-blog-detail {
    --blog-canvas: #071126;
    --blog-surface: rgba(15, 28, 55, .88);
    --blog-surface-soft: #13203d;
    --blog-border: rgba(255, 255, 255, .1);
    --blog-text: #d5dced;
    --blog-muted: #aeb8ce;
    --blog-heading: #ffffff;
    --blog-shadow: 0 24px 60px rgba(0, 0, 0, .2);
}

html[data-theme="light"] body.binena-blog-detail,
html[data-theme="dark"] body.binena-blog-detail {
    background: var(--blog-canvas) !important;
    color: var(--blog-text) !important;
}

.binena-blog-detail #smooth-wrapper,
.binena-blog-detail #smooth-content,
.binena-blog-detail .blog-area,
.binena-blog-detail .blog-items,
.binena-blog-detail .blog-content,
.binena-blog-detail .blog-content > .item,
.binena-blog-detail .sidebar {
    background: transparent !important;
}

.binena-blog-detail .breadcrumb-area {
    min-height: 440px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-position: center;
    background-color: #0b1733 !important;
}

.binena-blog-detail .breadcrumb-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(7, 17, 38, .94), rgba(22, 43, 82, .78));
}

.binena-blog-detail .breadcrumb-area .container {
    position: relative;
    z-index: 1;
}

.binena-blog-detail .breadcrumb-area h1 {
    max-width: 880px;
    margin: 0 auto 22px;
    color: #fff !important;
    text-wrap: balance;
}

.binena-blog-detail .breadcrumb-area .breadcrumb,
.binena-blog-detail .breadcrumb-area .breadcrumb a,
.binena-blog-detail .breadcrumb-area .breadcrumb li {
    color: rgba(255, 255, 255, .82) !important;
}

.binena-blog-detail .blog-area {
    padding-top: 100px;
    padding-bottom: 110px;
}

.binena-blog-detail .blog-item-box,
.binena-blog-detail .post-author,
.binena-blog-detail .post-tags.share,
.binena-blog-detail .post-pagi-area,
.binena-blog-detail .comments-area,
.binena-blog-detail .sidebar .sidebar-item {
    background: var(--blog-surface) !important;
    border: 1px solid var(--blog-border) !important;
    border-radius: 20px;
    box-shadow: var(--blog-shadow);
}

.binena-blog-detail .blog-area.full-blog .item {
    box-shadow: none;
    border-radius: 20px;
    overflow: visible;
}

.binena-blog-detail .blog-area.full-blog.single .thumb {
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.binena-blog-detail .blog-area.full-blog.single .thumb img {
    width: 100%;
    height: clamp(300px, 38vw, 520px);
    object-fit: cover;
    transition: transform .6s ease;
}

.binena-blog-detail .blog-area.full-blog.single .thumb:hover img {
    transform: scale(1.025);
}

.binena-blog-detail .blog-area.full-blog.single .item .info {
    padding: 48px 52px 56px;
}

.binena-blog-detail .blog-item-box .info p,
.binena-blog-detail .post-author p,
.binena-blog-detail .comment-item p,
.binena-blog-detail .sidebar li,
.binena-blog-detail .sidebar span {
    color: var(--blog-text) !important;
}

.binena-blog-detail .blog-item-box .info > p,
.binena-blog-detail .blog-item-box .info > ul {
    font-size: 17px;
    line-height: 1.85;
}

.binena-blog-detail .blog-item-box .info > p {
    margin-bottom: 26px;
}

.binena-blog-detail .blog-item-box .info h3,
.binena-blog-detail .post-author h4,
.binena-blog-detail .comments-area h3,
.binena-blog-detail .comments-area h5,
.binena-blog-detail .sidebar .title {
    color: var(--blog-heading) !important;
}

.binena-blog-detail .blog-item-box .info > ul {
    margin: 0 0 30px;
    padding-left: 22px;
}

.binena-blog-detail .blog-item-box .info > ul li {
    color: var(--blog-text) !important;
    margin-bottom: 10px;
    padding-left: 6px;
}

.binena-blog-detail .blog-item-box .info > ul li::marker {
    color: var(--color-primary);
}

.binena-blog-detail .blog-item-box .meta {
    margin-bottom: 28px;
}

.binena-blog-detail .blog-item-box .meta a,
.binena-blog-detail .blog-item-box .meta li {
    color: var(--blog-muted) !important;
}

.binena-blog-detail blockquote {
    margin: 34px 0;
    padding: 38px 42px;
    border: 0 !important;
    border-left: 4px solid var(--color-primary) !important;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(116, 118, 255, .17), rgba(42, 126, 188, .1)) !important;
    color: var(--blog-heading) !important;
    box-shadow: none;
}

.binena-blog-detail .post-author,
.binena-blog-detail .post-tags.share,
.binena-blog-detail .post-pagi-area,
.binena-blog-detail .comments-area {
    margin-top: 28px;
    padding: 32px;
}

.binena-blog-detail .post-author {
    align-items: center;
}

.binena-blog-detail .post-author img {
    border: 3px solid rgba(116, 118, 255, .35);
}

.binena-blog-detail .post-tags.share .tags a,
.binena-blog-detail .sidebar-item.tags a,
.binena-blog-detail .sidebar-item.category a,
.binena-blog-detail .sidebar-item.archives a {
    background: var(--blog-surface-soft) !important;
    border-color: var(--blog-border) !important;
    color: var(--blog-text) !important;
}

.binena-blog-detail .post-pagi-area a,
.binena-blog-detail .post-pagi-area h5,
.binena-blog-detail .sidebar a {
    color: var(--blog-heading) !important;
}

.binena-blog-detail .post-pagi-area > div + div {
    border-color: var(--blog-border) !important;
}

.binena-blog-detail .comments-area .comment-item {
    border-color: var(--blog-border) !important;
}

.binena-blog-detail .comments-area .comment-item .avatar img,
.binena-blog-detail .sidebar-item.recent-post .thumb img,
.binena-blog-detail .sidebar-item.gallery img {
    border-radius: 10px;
    object-fit: cover;
}

.binena-blog-detail .comments-area .comments-form {
    border-color: var(--blog-border) !important;
}

.binena-blog-detail .comments-area input,
.binena-blog-detail .comments-area textarea,
.binena-blog-detail .sidebar-item.search input {
    background: var(--blog-surface-soft) !important;
    border: 1px solid var(--blog-border) !important;
    color: var(--blog-heading) !important;
}

.binena-blog-detail .comments-area input::placeholder,
.binena-blog-detail .comments-area textarea::placeholder,
.binena-blog-detail .sidebar-item.search input::placeholder {
    color: var(--blog-muted) !important;
}

.binena-blog-detail .sidebar aside {
    position: sticky;
    top: 110px;
}

.binena-blog-detail .sidebar .sidebar-item {
    padding: 28px;
    margin-bottom: 24px;
}

.binena-blog-detail .sidebar .sidebar-item:last-child {
    margin-bottom: 0;
}

.binena-blog-detail .sidebar-item.recent-post li,
.binena-blog-detail .sidebar-item.category li,
.binena-blog-detail .sidebar-item.archives li {
    border-color: var(--blog-border) !important;
}

.binena-blog-detail .sidebar-item.gallery ul {
    gap: 8px;
}

.binena-blog-detail .sidebar-item.gallery img {
    aspect-ratio: 1;
}

@media (max-width: 991px) {
    .binena-blog-detail .sidebar aside {
        position: static;
    }

    .binena-blog-detail .breadcrumb-area {
        min-height: 360px;
    }
}

@media (max-width: 767px) {
    .binena-blog-detail .breadcrumb-area {
        min-height: 320px;
        padding-top: 90px;
    }

    .binena-blog-detail .breadcrumb-area h1 {
        font-size: clamp(32px, 9vw, 44px);
    }

    .binena-blog-detail .blog-area {
        padding-top: 65px;
        padding-bottom: 75px;
    }

    .binena-blog-detail .blog-area.full-blog.single .item .info,
    .binena-blog-detail .post-author,
    .binena-blog-detail .post-tags.share,
    .binena-blog-detail .post-pagi-area,
    .binena-blog-detail .comments-area,
    .binena-blog-detail .sidebar .sidebar-item {
        padding: 24px;
    }

    .binena-blog-detail blockquote {
        padding: 28px 24px;
    }
}