:root {
    --csi-red: #E10A17;
    --csi-green: #6ABB88;
    --csi-yellow: #F6C812;
    --csi-dark: #0B0B0B;
    --csi-brown: #3E2C0E;
    --theme-primary: var(--csi-red);
    --theme-secondary: var(--csi-green);
    --theme-accent: var(--csi-yellow);
    --theme-dark: var(--csi-dark);
    --vtc-text-heading-text-1: var(--theme-dark);
    --vtc-text-heading-text-2: var(--theme-dark);
    --vtc-text-heading-text-3: var(--theme-dark);
    --vtc-bg-main-bg-1: var(--theme-primary);
    --vtc-bg-main-bg-2: var(--theme-secondary);
    --vtc-bg-main-bg-3: var(--theme-accent);
    --vtc-bg-main-bg-4: var(--theme-dark);
    --vtc-bg-main-bg-5: var(--csi-brown);
    --vtc-bg-main-bg-6: var(--theme-secondary);
    --motion-duration: 200ms;
    --motion-duration-fast: 180ms;
    --motion-duration-reduced: 80ms;
    --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
    --motion-shadow-hover: 0 24px 52px rgba(0, 0, 0, 0.14);
}

.theme-btn1,
.theme-btn3,
.theme-btn6,
.theme-btn8,
.theme-btn10,
.theme-btn12,
.theme-btn16 {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
    transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
    box-shadow: 0 8px 20px rgba(225, 10, 23, 0.18);
}

.theme-btn2,
.theme-btn4,
.theme-btn5,
.theme-btn7,
.theme-btn9,
.theme-btn15 {
    background-color: var(--theme-secondary);
    border-color: var(--theme-secondary);
    color: #fff;
    transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
    box-shadow: 0 8px 20px rgba(106, 187, 136, 0.2);
}

.theme-btn11,
.theme-btn14 {
    background-color: var(--theme-accent);
    border-color: var(--theme-accent);
    color: var(--theme-dark);
    transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
    box-shadow: 0 8px 20px rgba(246, 200, 18, 0.2);
}

.theme-btn13 {
    background-color: #fff;
    border-color: var(--theme-primary);
    color: var(--theme-primary);
    transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.theme-btn1::before,
.theme-btn2::before,
.theme-btn3::before,
.theme-btn4::before,
.theme-btn5::before,
.theme-btn6::before,
.theme-btn7::before,
.theme-btn8::before,
.theme-btn9::before,
.theme-btn10::before,
.theme-btn11::before,
.theme-btn12::before,
.theme-btn13::before,
.theme-btn14::before,
.theme-btn15::before,
.theme-btn16::before {
    background-color: var(--theme-accent);
}

.theme-btn1::after,
.theme-btn2::after,
.theme-btn3::after,
.theme-btn4::after,
.theme-btn5::after,
.theme-btn6::after,
.theme-btn7::after,
.theme-btn8::after,
.theme-btn9::after,
.theme-btn10::after,
.theme-btn11::after,
.theme-btn12::after,
.theme-btn13::after,
.theme-btn14::after,
.theme-btn15::after,
.theme-btn16::after {
    background-color: var(--theme-dark);
}

.theme-btn1:hover,
.theme-btn2:hover,
.theme-btn3:hover,
.theme-btn4:hover,
.theme-btn5:hover,
.theme-btn6:hover,
.theme-btn7:hover,
.theme-btn8:hover,
.theme-btn9:hover,
.theme-btn10:hover,
.theme-btn12:hover,
.theme-btn15:hover,
.theme-btn16:hover {
    background-color: var(--theme-dark);
    border-color: var(--theme-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.theme-btn11:hover,
.theme-btn14:hover {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.theme-btn1 span i,
.theme-btn2 span i,
.theme-btn3 span i,
.theme-btn4 span i,
.theme-btn5 span i,
.theme-btn6 span i,
.theme-btn7 span i,
.theme-btn8 span i,
.theme-btn9 span i,
.theme-btn10 span i,
.theme-btn11 span i,
.theme-btn12 span i,
.theme-btn13 span i,
.theme-btn14 span i,
.theme-btn15 span i,
.theme-btn16 span i {
    transition: transform var(--motion-duration-fast) var(--motion-ease);
}

.theme-btn1:hover span i,
.theme-btn2:hover span i,
.theme-btn3:hover span i,
.theme-btn4:hover span i,
.theme-btn5:hover span i,
.theme-btn6:hover span i,
.theme-btn7:hover span i,
.theme-btn8:hover span i,
.theme-btn9:hover span i,
.theme-btn10:hover span i,
.theme-btn11:hover span i,
.theme-btn12:hover span i,
.theme-btn13:hover span i,
.theme-btn14:hover span i,
.theme-btn15:hover span i,
.theme-btn16:hover span i {
    transform: translateX(3px);
}

.motion-card {
    transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease);
    box-shadow: var(--motion-shadow);
    will-change: transform;
}

.motion-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--motion-shadow-hover);
}

.motion-card:active {
    transform: translateY(0);
    box-shadow: var(--motion-shadow);
}

.motion-underline {
    position: relative;
    display: inline-block;
}

.motion-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background-color: var(--theme-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-duration) var(--motion-ease);
}

.motion-underline:hover::after,
.motion-underline:focus-visible::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .motion-card,
    .theme-btn1,
    .theme-btn2,
    .theme-btn3,
    .theme-btn4,
    .theme-btn5,
    .theme-btn6,
    .theme-btn7,
    .theme-btn8,
    .theme-btn9,
    .theme-btn10,
    .theme-btn11,
    .theme-btn12,
    .theme-btn13,
    .theme-btn14,
    .theme-btn15,
    .theme-btn16 {
        transition-duration: var(--motion-duration-reduced);
        transform: none;
    }

    .motion-card:hover,
    .theme-btn1:hover,
    .theme-btn2:hover,
    .theme-btn3:hover,
    .theme-btn4:hover,
    .theme-btn5:hover,
    .theme-btn6:hover,
    .theme-btn7:hover,
    .theme-btn8:hover,
    .theme-btn9:hover,
    .theme-btn10:hover,
    .theme-btn11:hover,
    .theme-btn12:hover,
    .theme-btn13:hover,
    .theme-btn14:hover,
    .theme-btn15:hover,
    .theme-btn16:hover {
        transform: none;
        box-shadow: none;
    }

    .theme-btn1 span i,
    .theme-btn2 span i,
    .theme-btn3 span i,
    .theme-btn4 span i,
    .theme-btn5 span i,
    .theme-btn6 span i,
    .theme-btn7 span i,
    .theme-btn8 span i,
    .theme-btn9 span i,
    .theme-btn10 span i,
    .theme-btn11 span i,
    .theme-btn12 span i,
    .theme-btn13 span i,
    .theme-btn14 span i,
    .theme-btn15 span i,
    .theme-btn16 span i {
        transition-duration: var(--motion-duration-reduced);
        transform: none;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition-duration: var(--motion-duration-reduced) !important;
    }
}

.theme-btn13:hover {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
}

.theme-pagination li a.active {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.main-menu-ex a:hover,
.main-menu-ex li:hover > a,
.main-menu-ex .active > a,
.main-menu-ex .active > .dropdown-toggle,
.main-menu-ex li ul li a:hover,
.main-menu-ex li ul li a:hover::after,
.main-menu-ex li.has-dropdown.has-dropdown1:hover a.main,
.main-menu-ex li.has-dropdown.has-dropdown1:hover a.main::after,
.main-menu-ex li.dropdown-menu-parrent:hover a.main1,
.main-menu-ex li.has-dropdown:hover a.main1 {
    color: var(--theme-primary);
}

.main-menu-ex li:hover > .dropdown-toggle,
.main-menu-ex li .dropdown-toggle:hover {
    color: var(--theme-primary);
}

.main-menu-ex li.has-dropdown.has-dropdown1:hover a.main::after,
.main-menu-ex li ul li a:hover::after {
    background-color: var(--theme-primary);
}

.header-area .main-menu-ex ul li ul:hover > a {
    color: var(--theme-primary);
}

.header-area .main-menu-ex ul li ul:hover > a::after {
    background-color: var(--theme-primary);
}

.header-area .header-elements .main-menu-ex ul li a:hover,
.header-area .header-elements .main-menu-ex ul li ul li a:hover,
.header-area .header-elements .main-menu-ex ul li ul li a:hover::after,
.header-area .header-elements .main-menu-ex ul li ul:hover > a,
.header-area .main-menu-ex.main-menu-ex1 li.has-dropdown:hover a.main1,
.header-area .main-menu-ex.main-menu-ex1 li.dropdown-menu-parrent:hover a.main1,
.header-area .main-menu-ex.main-menu-ex1 li.has-dropdown.has-dropdown1:hover a.main,
.header-area .main-menu-ex.main-menu-ex1 li.has-dropdown.has-dropdown1:hover a.main::after {
    color: var(--theme-primary) !important;
}

.header-area .header-elements .main-menu-ex ul li ul li a:hover::after,
.header-area .main-menu-ex.main-menu-ex1 li.has-dropdown.has-dropdown1:hover a.main::after {
    background-color: var(--theme-primary) !important;
}

.homemenu-thumb .bottom-heading:hover,
.homemenu-thumb:hover .bottom-text,
.homemenu-thumb:hover .homemenu-btn .header-btn1 {
    color: var(--theme-primary);
}

.header-btn1 {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
}

.header-btn1:hover {
    background-color: var(--theme-dark);
    border-color: var(--theme-dark);
    color: #fff;
}

.heading1 .span,
.heading1 span.span,
.heading1-w span.span,
.heading2 span.span,
.heading3 span.span,
.heading3-w span.span,
.heading4 span.span,
.heading4 span.span2,
.heading4-w span.span,
.heading5 span.span,
.heading6 span.span,
.heading6-w span.span,
.heading7 span.span,
.heading8 span.span,
.heading9 span.span,
.heading10 span.span {
    color: var(--theme-accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin-bottom: 16px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.heading1 .span img,
.heading1 span.span img,
.heading1-w span.span img,
.heading2 span.span img,
.heading3 span.span img,
.heading3-w span.span img,
.heading4 span.span img,
.heading4 span.span2 img,
.heading4-w span.span img,
.heading5 span.span img,
.heading6 span.span img,
.heading6-w span.span img,
.heading7 span.span img,
.heading8 span.span img,
.heading9 span.span img,
.heading10 span.span img {
    margin-right: 0;
    transform: none;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.2rem rgba(225, 10, 23, 0.15);
}

a:hover {
    color: var(--theme-primary);
}

.about3 .about3-icon-box .icon,
.about-page-sec1 .about3-icon-box .icon,
.mission .mission-box .icon,
.work1 .work1-box .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: auto;
    min-width: 32px;
    line-height: 1;
    padding: 0;
    margin-right: 16px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.about3 .about3-icon-box .icon img,
.about-page-sec1 .about3-icon-box .icon img,
.mission .mission-box .icon img,
.work1 .work1-box .icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: none;
}

.about3 .about3-icon-box:hover .icon,
.about-page-sec1 .about3-icon-box:hover .icon,
.mission .mission-box:hover .icon,
.work1 .work1-box:hover .icon {
    background: transparent;
}

.about3 .about3-icon-box:hover .icon img,
.about-page-sec1 .about3-icon-box:hover .icon img,
.mission .mission-box:hover .icon img,
.work1 .work1-box:hover .icon img {
    filter: none;
}

.mobile-sidebar .mobile-nav ul li a:hover,
.mobile-sidebar .mobile-nav ul li .submenu-button:hover {
    color: var(--theme-primary);
}

.header-area .main-menu-ex .dropdown-toggle {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    padding: 8px 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    outline: none;
    box-shadow: none;
}

.header-area .main-menu-ex .dropdown-toggle::after {
    display: none;
}

.header-area .main-menu-ex li.dropdown-open > ul {
    visibility: visible;
    opacity: 1;
    top: 50px;
    z-index: 99;
    transform: translateY(0);
}

.header-area .main-menu-ex ul li > ul {
    min-width: 220px;
    width: max-content;
    border-radius: 8px;
    z-index: 1001;
}

.header-area .main-menu-ex .dropdown-toggle:focus {
    outline: none;
    box-shadow: none;
}

.header-area .main-menu-ex .dropdown-toggle:focus-visible {
    outline: none;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-color: var(--theme-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/*
 Keep Header 10 dropdown open while moving cursor from menu item to submenu.
 This removes the hover dead-zone that causes submenu flicker/disappear.
*/
.header-area.header-area10 .header-elements .main-menu-ex > ul > li.has-dropdown,
.header-area.header-area10 .header-elements .main-menu-ex > ul > li.dropdown-menu-parrent {
    position: relative;
}

.header-area.header-area10 .header-elements .main-menu-ex > ul > li.has-dropdown::after,
.header-area.header-area10 .header-elements .main-menu-ex > ul > li.dropdown-menu-parrent::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: max(100%, 240px);
    height: 12px;
}

.header-area.header-area10 .header-elements .main-menu-ex > ul > li > ul,
.header-area.header-area10 .header-elements .main-menu-ex > ul > li > .sub-menu {
    top: calc(100% + 4px);
}

.csi-modal-video {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.csi-modal-video__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 11, 11, 0.6);
}

.csi-modal-video__panel {
    position: relative;
    width: min(90vw, 920px);
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 24px 60px rgba(11, 11, 11, 0.4);
}

.csi-modal-video__frame {
    position: relative;
    padding-top: 56.25%;
}

.csi-modal-video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.csi-modal-video__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/*
::::::::::::::::::::::::::
 LIQUID GLASS SYSTEM
::::::::::::::::::::::::::
*/
:root {
    --csi-glass-bg: rgba(255, 255, 255, 0.76);
    --csi-glass-bg-strong: rgba(255, 255, 255, 0.9);
    --csi-glass-border: rgba(255, 255, 255, 0.56);
    --csi-glass-border-soft: rgba(8, 17, 32, 0.1);
    --csi-glass-shadow: 0 20px 52px rgba(8, 17, 32, 0.18);
    --csi-glass-shadow-hover: 0 28px 62px rgba(8, 17, 32, 0.24);
    --csi-glass-blur: 18px;
    --csi-glass-radius-md: 16px;
    --csi-glass-radius-lg: 20px;
}

body.body {
    background-image: radial-gradient(1200px 560px at 2% -15%, rgba(225, 10, 23, 0.08), transparent 62%),
        radial-gradient(980px 520px at 100% -20%, rgba(106, 187, 136, 0.1), transparent 66%);
    background-color: #fff;
}

.body .header-area.header-area10 .header-elements {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
    border: 1px solid rgba(255, 255, 255, 0.66);
    box-shadow: var(--csi-glass-shadow);
    border-radius: var(--csi-glass-radius-lg);
    -webkit-backdrop-filter: blur(var(--csi-glass-blur)) saturate(1.15);
    backdrop-filter: blur(var(--csi-glass-blur)) saturate(1.15);
}

.body .header-area.header-area10 .header-elements .main-menu-ex > ul > li > ul,
.body .header-area.header-area10 .header-elements .main-menu-ex > ul > li > .sub-menu {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.86));
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: var(--csi-glass-shadow);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(var(--csi-glass-blur)) saturate(1.1);
    backdrop-filter: blur(var(--csi-glass-blur)) saturate(1.1);
}

.body :is(.theme-btn1, .theme-btn2, .theme-btn3, .theme-btn4, .theme-btn5, .theme-btn6, .theme-btn7, .theme-btn8, .theme-btn9, .theme-btn10, .theme-btn11, .theme-btn12, .theme-btn13, .theme-btn14, .theme-btn15, .theme-btn16) {
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 14px 32px rgba(8, 17, 32, 0.24);
}

.body :is(
    .about1-box,
    .about3-icon-box,
    .about4-box,
    .benefits-box,
    .blog-box,
    .blog1-box,
    .blog2-box,
    .blog3-box,
    .blog4-box,
    .blog-details-box,
    .case-box,
    .commnet-box,
    .commnet-box2,
    .contact-box,
    .contact-box2,
    .contact-page-box,
    .contact1-box,
    .contact3-box,
    .contact9-box,
    .details-box2,
    .details-box3,
    .hero10-icon-boxs,
    .industries-box,
    .mission-box,
    .others-boxs,
    .pricing-box,
    .pricing-box-single,
    .pricing-box2,
    .project-two__single-box,
    .service-box,
    .service1-box,
    .service2-box,
    .service3-box,
    .service4-box,
    .service5-box,
    .single-box,
    .solution4-box,
    .solutions-box,
    .team-box,
    .team1-box,
    .team3-box,
    .team4-box,
    .work-box,
    .work1-box,
    .work3-box,
    .work3-box2,
    .work87-box
) {
    border-radius: var(--csi-glass-radius-md);
    border: 1px solid var(--csi-glass-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), var(--csi-glass-shadow);
    -webkit-backdrop-filter: blur(var(--csi-glass-blur)) saturate(1.14);
    backdrop-filter: blur(var(--csi-glass-blur)) saturate(1.14);
    transition: transform var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease),
        box-shadow var(--motion-duration) var(--motion-ease);
}

.body :is(
    .about1-box,
    .about3-icon-box,
    .about4-box,
    .benefits-box,
    .blog-box,
    .blog1-box,
    .blog2-box,
    .blog3-box,
    .blog4-box,
    .blog-details-box,
    .case-box,
    .commnet-box,
    .commnet-box2,
    .contact-box,
    .contact-box2,
    .contact-page-box,
    .contact1-box,
    .contact3-box,
    .contact9-box,
    .details-box2,
    .details-box3,
    .hero10-icon-boxs,
    .industries-box,
    .mission-box,
    .others-boxs,
    .pricing-box,
    .pricing-box-single,
    .pricing-box2,
    .project-two__single-box,
    .service-box,
    .service1-box,
    .service2-box,
    .service3-box,
    .service4-box,
    .service5-box,
    .single-box,
    .solution4-box,
    .solutions-box,
    .team-box,
    .team1-box,
    .team3-box,
    .team4-box,
    .work-box,
    .work1-box,
    .work3-box,
    .work3-box2,
    .work87-box
):hover {
    border-color: rgba(225, 10, 23, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), var(--csi-glass-shadow-hover);
    transform: translateY(-4px);
}

.body :is(.contact-box, .contact-box2, .contact-page-box, .blog-details-box, .commnet-box, .commnet-box2) :is(input, textarea, select, .nice-select) {
    background: linear-gradient(135deg, var(--csi-glass-bg-strong), var(--csi-glass-bg));
    border: 1px solid var(--csi-glass-border-soft);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(14px) saturate(1.14);
    backdrop-filter: blur(14px) saturate(1.14);
}

.body :is(.contact-box, .contact-box2, .contact-page-box, .blog-details-box, .commnet-box, .commnet-box2) .nice-select .list {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.84));
    border: 1px solid var(--csi-glass-border-soft);
    box-shadow: var(--csi-glass-shadow);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(14px) saturate(1.14);
    backdrop-filter: blur(14px) saturate(1.14);
}

.body .work1 .work1-box {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.body .work1 .work1-box:not(:last-child) {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(8, 17, 32, 0.08);
}

.body .work1 .work1-box:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.body .work1 .work1-box .heading1 {
    flex: 1 1 auto;
}

.body .work1 .work1-box .heading1 h4,
.body .work1 .work1-box .heading1 h4 a,
.body .work1 .work1-box:hover .heading1 h4,
.body .work1 .work1-box:hover .heading1 h4 a {
    color: var(--vtc-text-heading-text-1);
}

.body .work1 .work1-box .heading1 p,
.body .work1 .work1-box:hover .heading1 p {
    color: var(--vtc-text-pera-text-1);
}

@media (max-width: 991px) {
    .body .header-area.header-area10 .header-elements {
        border-radius: 14px;
    }
}

/*
::::::::::::::::::::::::::
 GLASS UTILITIES
::::::::::::::::::::::::::
*/
:root {
    --csi-glass-bg: rgba(255, 255, 255, 0.8);
    --csi-glass-bg-strong: rgba(255, 255, 255, 0.94);
    --csi-glass-border: rgba(255, 255, 255, 0.62);
    --csi-glass-top-edge: rgba(255, 255, 255, 0.82);
    --csi-glass-shadow-soft: 0 12px 26px rgba(11, 11, 11, 0.14);
    --csi-glass-shadow: 0 18px 44px rgba(11, 11, 11, 0.19);
    --csi-glass-shadow-strong: 0 24px 56px rgba(11, 11, 11, 0.24);
    --csi-glass-focus-ring: rgba(225, 10, 23, 0.38);
    --csi-glass-blur: 18px;
    --csi-glass-blur-mobile: 12px;
    --csi-glass-saturate: 1.15;
}

.csi-glass-surface {
    position: relative;
    isolation: isolate;
    background: linear-gradient(160deg, var(--csi-glass-bg-strong), var(--csi-glass-bg));
    border: 1px solid var(--csi-glass-border);
    box-shadow: inset 0 1px 0 var(--csi-glass-top-edge), var(--csi-glass-shadow);
    -webkit-backdrop-filter: blur(var(--csi-glass-blur)) saturate(var(--csi-glass-saturate));
    backdrop-filter: blur(var(--csi-glass-blur)) saturate(var(--csi-glass-saturate));
}

.csi-glass-layered {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.csi-glass-layered::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08));
    opacity: 0.78;
    pointer-events: none;
    transition: opacity var(--motion-duration) var(--motion-ease);
}

.csi-glass-layered:hover::before {
    opacity: 0.95;
}

.csi-glass-navbar {
    border-radius: 18px;
}

.csi-glass-card {
    border-radius: 18px;
}

.csi-glass-menu {
    border-radius: 14px;
}

.csi-glass-pill {
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), var(--csi-glass-shadow-soft);
}

.csi-glass-holder {
    position: relative;
    padding: 5px;
    border-radius: 999px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.74));
    border: 1px solid rgba(255, 255, 255, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), var(--csi-glass-shadow-soft);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
    backdrop-filter: blur(16px) saturate(1.12);
}

.csi-glass-cta {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 14px 32px rgba(11, 11, 11, 0.24);
    transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease),
        border-color var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease);
}

.csi-glass-interactive {
    transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease),
        border-color var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease);
}

.csi-glass-interactive:hover {
    transform: translateY(-2px);
    border-color: rgba(225, 10, 23, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--csi-glass-shadow-strong);
}

.csi-glass-interactive:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), var(--csi-glass-shadow-soft);
}

.csi-glass-focus:focus-visible {
    outline: 2px solid var(--csi-glass-focus-ring);
    outline-offset: 2px;
}

.header-area.header-area10 .header-elements.csi-glass-surface {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
    border: 1px solid rgba(255, 255, 255, 0.66);
}

.header-area.header-area10 .header-elements .main-menu-ex > ul > li > ul.csi-glass-surface,
.header-area.header-area10 .header-elements .main-menu-ex > ul > li > .sub-menu.csi-glass-surface {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.86));
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--csi-glass-shadow);
}

.header-area.header-area10 .header-elements .main-menu-ex > ul > li > ul,
.header-area.header-area10 .header-elements .main-menu-ex > ul > li > .sub-menu {
    top: calc(100% + 4px);
}

.header-area.header-area10 .header-elements .main-menu-ex > ul > li > a.csi-glass-focus,
.header-area.header-area10 .header-elements .main-menu-ex > ul > li > .dropdown-toggle.csi-glass-focus {
    border-radius: 999px;
}

.header-area.header-area10 .header-elements .main-menu-ex > ul > li > .sub-menu a:focus-visible,
.header-area.header-area10 .header-elements .main-menu-ex > ul > li > ul a:focus-visible {
    outline: 2px solid rgba(225, 10, 23, 0.38);
    outline-offset: 2px;
    border-radius: 8px;
}

.header-area.header-area10 .header-elements .header2-buttons .theme-btn16.csi-glass-cta {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 16px 34px rgba(11, 11, 11, 0.24);
}

.hero10-icon-boxs.csi-glass-surface,
.about10-images.csi-glass-surface {
    border-radius: 18px;
}

.hero10-icon-boxs .single-box.csi-glass-surface,
.about10 .counter-box.csi-glass-surface {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.74));
    border: 1px solid rgba(255, 255, 255, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), var(--csi-glass-shadow-soft);
}

.hero10-icons-area .hero10-icon-boxs .single-box.csi-glass-layered .icon,
.hero10-icons-area .hero10-icon-boxs .single-box.csi-glass-layered .heading,
.about10 .counter-box.csi-glass-layered > *,
.service10 .service-box.csi-glass-layered .icon,
.service10 .service-box.csi-glass-layered .heading,
.work10 .work-box.csi-glass-layered .image-area,
.work10 .work-box.csi-glass-layered .heading,
.case10 .case-box.csi-glass-layered .image {
    position: relative;
    z-index: 1;
}

.case10 .case-box.csi-glass-layered .hover-area {
    z-index: 2;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
    border: 1px solid rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--csi-glass-shadow-soft);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
}

.hero10-icons-area .hero10-icon-boxs .single-box.csi-glass-layered:hover,
.service10 .service-box.csi-glass-layered:hover,
.work10 .work-box.csi-glass-layered:hover {
    transform: translateY(-2px);
}

.service10 .service-box.csi-glass-layered:hover {
    background-color: transparent;
}

.service10 .service-box.csi-glass-layered:hover h4 a,
.service10 .service-box.csi-glass-layered:hover a.learn {
    color: #081120;
}

.service10 .service-box.csi-glass-layered:hover p {
    color: #555;
}

.work10 .work-box.csi-glass-layered .heading {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.74));
    border: 1px solid rgba(255, 255, 255, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), var(--csi-glass-shadow-soft);
}

.work10 .work-box.csi-glass-layered:hover .heading {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.74));
    transform: translateY(0);
}

.work10 .work-box.csi-glass-layered:hover .heading h4 a {
    color: #000;
}

.work10 .work-box.csi-glass-layered:hover .heading p {
    color: #555;
}

.service10 .service-box.csi-glass-surface,
.work10 .work-box.csi-glass-surface,
.case10 .case-box.csi-glass-surface,
.tes10 .single-slider {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.74));
    border: 1px solid rgba(255, 255, 255, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), var(--csi-glass-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    backdrop-filter: blur(18px) saturate(1.12);
}

.tes10 .arrows-button button.csi-glass-surface {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
    border: 1px solid rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--csi-glass-shadow-soft);
}

.tes10 .single-slider {
    border-radius: 18px;
}

.service10 .service-box.csi-glass-interactive:hover,
.work10 .work-box.csi-glass-interactive:hover,
.case10 .case-box.csi-glass-interactive:hover,
.tes10 .single-slider:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), var(--csi-glass-shadow-strong);
}

.theme-btn13 {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.76));
    border-color: rgba(225, 10, 23, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), var(--csi-glass-shadow-soft);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
}

.theme-btn13:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), var(--csi-glass-shadow);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .csi-glass-surface,
    .csi-glass-holder,
    .theme-btn13 {
        background: rgba(255, 255, 255, 0.92);
    }
}

@media (prefers-reduced-motion: reduce) {
    .csi-glass-cta,
    .csi-glass-interactive,
    .tes10 .single-slider {
        transition: none !important;
        transform: none !important;
    }
}

@media (max-width: 991px) {
    .csi-glass-surface,
    .csi-glass-holder,
    .theme-btn13 {
        -webkit-backdrop-filter: blur(var(--csi-glass-blur-mobile)) saturate(1.1);
        backdrop-filter: blur(var(--csi-glass-blur-mobile)) saturate(1.1);
    }
}

/*
::::::::::::::::::::::::::
 WHY CHOOSE IMAGE ALIGNMENT
::::::::::::::::::::::::::
*/
.body .chosse1 .row.align-items-center {
    --bs-gutter-x: clamp(1.5rem, 2.8vw, 3rem);
}

.body .chosse1 .choose1-media {
    position: relative;
    display: block;
    width: min(100%, 560px);
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(8, 17, 32, 0.12);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(247, 245, 251, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 18px 42px rgba(8, 17, 32, 0.15);
}

.body .chosse1 .choose1-media img,
.body .chosse1 .choose1-media .choose1-media-image {
    display: block;
    width: 100%;
    aspect-ratio: 11 / 10;
    height: auto;
    object-fit: cover;
    object-position: center;
    transition: transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.body .chosse1 .choose1-media:hover img,
.body .chosse1 .choose1-media:hover .choose1-media-image {
    transform: scale(1.035);
}

.body .chosse1 .choose1-heading {
    padding-left: clamp(0px, 1.6vw, 20px);
}

@media (max-width: 991px) {
    .body .chosse1 .choose1-heading {
        padding-left: 0;
        padding-top: 24px;
    }
}