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

Template Name: Crysa - It Solution Template
Author: validtheme
Description:
Version: 1.6

Main Font    : Yantramanav
Main Color   : #8A6552

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

[Typography]

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


>>> TABLE OF CONTENTS:
=======================
        
    01. Template default css
        - Animations
        - General
        - Section Title
        - Video Button
        - Typography
        - Tables
        - Forms
        - Buttons
        - Pagination
        - Colors
        - Accordion
        - Tabs
    02. Preloader
    03. Topbar
    04 Navbar
        - Navbar Default
        - Navbar Transparent
        - Navbar Sticky
        - Navbar Box
    05. Banner
        - Slide Effect
        - Fade Effect
    06. Features
    07. About Us
        - Full Width Version
        - Default Version
    08. Services
        - Version One
        - Version Two
        - Services Single
    09. Why Choose Us
    10. Company Analysis/Graph
    11. Companies/Clients/Partner
    12. Team
    13. Testimonials
    14. Projects
    15. Gallery
    16. Our Expertise
    17. Work Process
    18. FAQ
    19. Blog
        - Standard
        - Left Sidebar
        - Right Sidebar
        - Single
    20. Error 404
    21. Footer
    22. PHP Contact Form
    23. Others

*/

/*
** General Styles for HTML tags
*/


/* ============================================================== 
     # Demo 
=================================================================== */

.demo-banner {
    padding-top: 300px;
    padding-bottom: 230px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

@media only screen and (max-width: 676px) {
    .demo-banner {
        padding-top: 140px;
        padding-bottom: 60px;
    }

    .demo-banner p {
        padding-right: 0;
    }

    .demo-banner h2 {
        font-size: 36px !important;
    }
}

.demo-banner h2 {
    font-weight: 600;
    font-size: 50px;
    margin-bottom: 25px;
}

.demo-banner p {
    font-size: 20px;
    padding-right: 30%;
    line-height: 1.8;
}

.demo-banner a {
    margin-top: 20px;
}

.demo-banner .demo-item {
    position: absolute;
    right: -150px;
    top: 0;
    width: 500px;
    border: 10px solid #ffffff;
    border-radius: 5px;
    z-index: -1;
}

.demo-banner .demo-item:first-child {
    transform: rotate(-25deg);
    top: 50px;
}

.demo-banner .demo-item:nth-child(2) {
    transform: rotate(-25deg);
    right: 420px;
    top: 14%;
    width: 300px;
    margin-right: 10px;
}

.demo-banner .demo-item:nth-child(3) {
    transform: rotate(-25deg);
    right: 215px;
    top: auto;
    bottom: -26%;
    width: 600px;
}

.demo-banner .demo-item img {
    border-radius: 5px;
}

@media only screen and (max-width: 1399px) {
    .demo-banner .demo-item:nth-child(3) {
        right: 214px;
        bottom: -19%;
    }
}

@media only screen and (max-width: 1299px) {
    .demo-banner .demo-item {
        display: none;
    }
}

.demo-area .single-item {
    margin-bottom: 30px;
}

.demo-area .single-item>a {
    position: relative;
    z-index: 1;
    padding: 50px 30px;
    padding-bottom: 0;
    display: block;
    overflow: hidden;
    border-radius: 10px;
}

.demo-area .single-item img:nth-child(2) {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.demo-area .single-item img:first-child {
    filter: inherit;
    z-index: 9;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px 10px 0 0;
    border-bottom: none;
}

.demo-area .single-item img {
    border-radius: 8px;
}


.demo-area .single-item h4 {
    margin: 0;
    margin-top: 30px;
    font-weight: 600;
}

.demo-area .site-heading h4 {
    text-transform: uppercase;
    font-weight: 600;
    color: #0059fc;
}

.demo-area .site-heading h2 {
    font-weight: 600;
    margin: 0;
    text-transform: capitalize;
    font-size: 42px;
}

.demo-area.bg-gray {
    background: #fbfbfb;
}

footer.demo img {
    height: 60px;
}

footer.demo .logo {
    height: auto;
    margin-bottom: 20px;
}

footer.demo {
    padding: 80px 0;
}

/* ============================================================== 
     # Navbar - Logo & Height Fix (All Pages)
=================================================================== */

/* ---------------------------------------------------------------
   Base Navbar: consistent height & padding for all breakpoints
---------------------------------------------------------------- */
nav.navbar.validnavs,
.navbar {
    padding: 0 !important;
}

nav.navbar.validnavs.small-pad {
    padding: 0 !important;
}

/* ---------------------------------------------------------------
   // FIX: Task 1 — Navbar logo: 32px desktop, 30px tablet/mobile
---------------------------------------------------------------- */
.navbar-brand>img,
.navbar-header .logo,
.navbar-brand img.logo,
.navbar-brand img.logo-display,
.navbar-brand img.logo-scrolled {
    max-height: 32px !important;
    height: 32px !important;
    max-width: 100% !important;
    width: auto !important;
    display: block;
    object-fit: contain;
    transition: max-height 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Allow logo to sit cleanly within the navbar bar */
.navbar-brand,
.navbar-header .navbar-brand {
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    max-width: 100% !important;
}

/* Inner pages — same size */
.inner-page-header .navbar-brand img,
.inner-page-header .navbar-header .logo {
    max-height: 32px !important;
    height: 32px !important;
}

/* Sticked state */
.navbar.sticked .navbar-brand>img,
.navbar.sticked .navbar-brand img.logo {
    max-height: 30px !important;
    height: 30px !important;
}

/* Tablet (768px – 1023px) */
@media only screen and (max-width: 1023px) {

    .navbar-brand>img,
    .navbar-header .logo,
    .navbar-brand img.logo,
    .navbar-brand img.logo-display,
    .navbar-brand img.logo-scrolled {
        max-height: 30px !important;
        height: 30px !important;
    }

    .inner-page-header .navbar-brand img,
    .inner-page-header .navbar-header .logo {
        max-height: 30px !important;
        height: 30px !important;
    }
}

/* Mobile (≤ 767px) */
@media only screen and (max-width: 767px) {

    .navbar-brand>img,
    .navbar-header .logo,
    .navbar-brand img.logo,
    .navbar-brand img.logo-display,
    .navbar-brand img.logo-scrolled {
        max-height: 28px !important;
        height: 28px !important;
    }
}

/* ---------------------------------------------------------------
   Nav links styling — Modern, SaaS style, clean and minimal
---------------------------------------------------------------- */
nav.navbar.validnavs ul.nav>li>a,
.navbar .navbar-nav>li>a {
    padding: 10px 18px !important;
    line-height: 1.5 !important;
    font-size: 15px !important;
    font-weight: 500 !important; /* Medium weight instead of bold */
    letter-spacing: 0.2px !important;
}

/* ---------------------------------------------------------------
   Nav links hover effect — on mouse hover only, not active state
---------------------------------------------------------------- */
nav.navbar.validnavs ul.nav>li>a,
.navbar .navbar-nav>li>a {
    transition: color 0.25s ease, background-color 0.25s ease !important;
}

nav.navbar.validnavs ul.nav>li>a:hover,
.navbar .navbar-nav>li>a:hover {
    color: var(--color-primary) !important;
    background-color: transparent !important;
}

.attr-nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.attr-nav .button a,
.navbar .attr-right .attr-nav li.button a {
    padding: 9px 18px !important;
    line-height: normal !important;
    white-space: nowrap;
    font-size: 14px !important;
}

/* Style the navbar email link */
.attr-nav li.email-link a {
    font-weight: 500 !important;
    font-size: 14.5px !important;
    display: flex !important;
    align-items: center !important;
    color: inherit !important;
    transition: color 0.3s ease !important;
}

.attr-nav li.email-link a i {
    color: var(--color-primary) !important;
    font-size: 15px !important;
}

.attr-nav li.email-link a:hover {
    color: var(--color-primary) !important;
}

/* ---------------------------------------------------------------
   brand-style-bg slanted logo block — DESKTOP ONLY (≥ 1200px)
   Bar stays 80px. navbar-header overflow:visible so 110px logo
   protrudes above/below without inflating the bar.
   Sticked: theme handles naturally.
---------------------------------------------------------------- */
@media (min-width: 1200px) {
    .navbar.brand-style-bg:not(.sticked) .navbar-header {
        padding: 0 !important;
        top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        /* Constrain the ::after blue bg to 80px, not the logo height */
        min-height: 80px !important;
        height: 80px !important;
    }

    /* Blue background block — removed */
    .navbar.brand-style-bg:not(.sticked) .navbar-header::after {
        display: none !important;
    }

    /* Slanted right edge — removed */
    .navbar.brand-style-bg:not(.sticked) .navbar-header::before {
        display: none !important;
    }

    /* Nav links — compact */
    .navbar.brand-style-bg nav.navbar.validnavs ul.nav>li>a,
    .navbar.brand-style-bg .navbar-nav>li>a {
        padding: 8px 12px !important;
    }
}

/* Prevent brand-style overflow on medium screens — default state only */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar.brand-style-bg:not(.sticked) .navbar-header {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .navbar.brand-style-bg:not(.sticked) .navbar-header::before,
    .navbar.brand-style-bg:not(.sticked) .navbar-header::after {
        display: none !important;
    }

    .navbar.brand-style-bg .navbar-header img.logo.logo-display {
        display: inline-block !important;
    }
}

/* ---------------------------------------------------------------
   Force Font Awesome icons to render correctly
--------------------------------------------------------------- */
nav.navbar.validnavs .navbar-toggle i,
nav.navbar.validnavs .navbar-collapse.collapse button i,
.side .close-side i,
.navbar-toggle i,
.close-side i,
.navbar-header .navbar-toggle i {
    font-weight: 900 !important;
}

/* ==============================================================
   // FIX: Task 1 — Remove circle/border from mobile sidebar
   close button. Theme (.side .close-side) applies border-radius:
   50% + border which creates a visible circle around the ✕ icon.
   Override to show only the raw icon, no shape.
================================================================= */

/* Target 1: .side .close-side (side panel close button) */
.side .close-side {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

/* Target 2: the ✕ navbar-toggle button inside .navbar-collapse
   (mobile-sidenav close button — has 35x35px circle with #ddd border) */
nav.navbar.validnavs .navbar-collapse.collapse button,
nav.navbar.validnavs .navbar-collapse.collapse .navbar-toggle {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 0 !important;
}

/* Target 3: any Bootstrap btn-close or generic [class*=close] wrappers */
.btn-close {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    border-radius: 0 !important;
}

button.close-btn,
.sidebar .close-btn,
.offcanvas .btn-close,
.mobile-menu .close-btn,
[class*="close-btn"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* ==============================================================
   // FIX: Task 3 — Breadcrumb separator: replace broken FA5 Pro
   icon (□ empty box) with a clean "/" text separator.
   The theme uses font-family: "Font Awesome 5 Pro" which is not
   loaded, causing an empty glyph box to render between breadcrumb
   items. Override both ::before and ::after pseudo-elements.
================================================================= */
.breadcrumb-area .breadcrumb > li + li::before,
.breadcrumb-area .breadcrumb li::after {
    /* // FIX: Task 3 — reset icon font, use "/" text */
    content: "/" !important;
    font-family: inherit !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    position: absolute !important;
    font-weight: 400 !important;
}

/* Keep last item's ::after hidden (theme already does this, reinforce) */
.breadcrumb-area .breadcrumb li:last-child::after {
    display: none !important;
}

/* ---------------------------------------------------------------
   Override validnavs.css text-transform: uppercase on nav links
   Theme forces all nav items to CAPS — reset to normal case so
   title-case text (Home, About Us, etc.) renders as written.
---------------------------------------------------------------- */
nav.navbar ul.nav>li>a,
nav.navbar.validnavs ul.nav>li>a {
    text-transform: none !important;
}

/* Dropdown items also affected — keep them normal case */
nav.navbar.validnavs li.dropdown ul.dropdown-menu>li>a {
    text-transform: none !important;
}

/* ============================================================== 
     # Services Cards — Equal Height
=================================================================== */
.services-style-one-box .row {
    display: flex;
    flex-wrap: wrap;
}

.services-style-one {
    display: flex;
    flex-direction: column;
}

.services-style-one .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.services-style-one .item p {
    flex-grow: 1;
    margin-bottom: 20px;
}

/* ============================================================== 
     # Team Cards — Equal Height
=================================================================== */
.team-style-one {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-style-one .thumb {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0 0 30px 30px;
}

.team-style-one .thumb img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: top center;
    border-radius: 0 0 30px 30px;
}

.team-style-one .info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100px;
}

/* ============================================================== 
     # Footer Overrides
=================================================================== */
footer .f-items {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

footer .widget-title {
    font-size: 17px !important;
    margin-bottom: 20px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Footer logo: 38px desktop, 36px tablet, 34px mobile */
footer img.logo.footer-logo,
footer .logo {
    max-height: 38px !important;
    height: 38px !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin-bottom: 16px !important;
}
/* Ensure footer containers don't clip the logo */
.f-items,
.f-item.about,
.col-lg-4,
.col-md-6 {
    overflow: visible !important;
}
/* Responsive footer logo scaling */
@media only screen and (max-width: 1023px) {
    footer img.logo.footer-logo,
    footer .logo {
        max-height: 36px !important;
        height: 36px !important;
        margin-bottom: 14px !important;
    }
}

@media only screen and (max-width: 767px) {
    footer img.logo.footer-logo,
    footer .logo {
        max-height: 34px !important;
        height: 34px !important;
        margin-bottom: 12px !important;
    }
}


footer p,
footer .link li a,
footer .address li,
footer .address li strong,
footer .newsletter p {
    font-size: 13.5px !important;
    line-height: 1.8 !important;
}

footer .link li {
    margin-top: 8px !important;
}

footer .address li {
    margin-top: 15px !important;
}

footer .address li i {
    font-size: 20px !important;
    margin-right: 12px !important;
    top: 3px !important;
}

footer .address li i.fal.fa-clock {
    font-size: 18px !important;
}

footer .social {
    margin-top: 20px !important;
}

footer .social li a {
    height: 34px !important;
    width: 34px !important;
    line-height: 38px !important;
    font-size: 13px !important;
}

footer .newsletter {
    padding-left: 0px !important;
}

@media only screen and (max-width: 991px) {
    footer .item {
        margin-top: 30px !important;
    }
}

.footer-bottom {
    padding: 20px 0 !important;
}

.footer-bottom p,
.footer-bottom ul li a {
    font-size: 12.5px !important;
}

/* ============================================================== 
     # Google Map — Responsive & Aligned Fix
=================================================================== */

/* Map is now in-flow (2-column Bootstrap row: map left, form right) */
.contact-form-area {
    position: relative;
    overflow: visible !important;
}

/* The map wrapper inside the row column */
.contact-form-area .google-maps {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 460px !important;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

.contact-form-area .google-maps iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 460px !important;
    border: 0 !important;
    display: block !important;
}

/* Form padding on desktop */
@media (min-width: 992px) {
    .contact-form-area .form {
        padding-left: 20px;
        margin-top: 0 !important;
    }
}

/* Tablet: map stacks above form */
@media only screen and (max-width: 991px) {
    .contact-form-area .google-maps {
        min-height: 360px !important;
        margin-bottom: 30px;
    }

    .contact-form-area .google-maps iframe {
        min-height: 360px !important;
    }

    .contact-form-area .form {
        padding-left: 0 !important;
        margin-top: 0 !important;
    }
}

/* Mobile: compact map */
@media only screen and (max-width: 767px) {

    .contact-form-area .google-maps,
    .contact-form-area .google-maps iframe {
        min-height: 260px !important;
    }
}

/* ============================================================== 
     # Antigravity / Floating Animation System
     Smooth, responsive floating and entrance animations
=================================================================== */

/* --- Floating Shape Animation --- */
@keyframes zx-float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-12px) rotate(1deg);
    }

    50% {
        transform: translateY(-18px) rotate(-1deg);
    }

    75% {
        transform: translateY(-8px) rotate(0.5deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

@keyframes zx-float-slow {
    0% {
        transform: translateY(0px) translateX(0px);
    }

    33% {
        transform: translateY(-14px) translateX(6px);
    }

    66% {
        transform: translateY(-8px) translateX(-4px);
    }

    100% {
        transform: translateY(0px) translateX(0px);
    }
}

@keyframes zx-pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 0px 0px rgba(26, 192, 198, 0);
    }

    50% {
        box-shadow: 0 0 24px 8px rgba(26, 192, 198, 0.3);
    }
}

@keyframes zx-spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes zx-fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Apply floating to shape-animated elements */
.shape-animated,
.shape-animated img {
    animation: zx-float 5s ease-in-out infinite !important;
    will-change: transform;
}

/* Slow float for blur backgrounds and large decorative shapes */
.blur-bg,
.shape-left-top,
.shape-right-bottom-large {
    animation: zx-float-slow 8s ease-in-out infinite !important;
    will-change: transform;
}

/* Spinning decorative elements */
.shape-animated img[src*="shape/11"] {
    animation: zx-spin-slow 20s linear infinite !important;
}

/* Achievement section pulse */
.achivement-style-one .item {
    transition: box-shadow 0.4s ease-in-out;
}

.achivement-style-one .item:hover {
    animation: zx-pulse-glow 1.5s ease-in-out infinite;
}

/* --- WOW.js entrance animation optimization --- */
.wow {
    visibility: hidden;
}

.wow.animated {
    visibility: visible;
}

/* Ensure WOW animations don't break on mobile */
@media only screen and (max-width: 767px) {
    .wow {
        visibility: visible !important;
        animation: none !important;
    }

    .shape-animated,
    .blur-bg,
    .shape-left-top,
    .shape-right-bottom-large {
        animation: zx-float 6s ease-in-out infinite !important;
    }
}

/* --- Service card hover lift --- */
.services-style-one .item,
.choose-us-card .item {
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.35s ease;
}

.services-style-one .item:hover,
.choose-us-card .item:hover {
    transform: translateY(-8px) scale(1.01);
}

/* --- Button hover micro-animation --- */
.btn,
button[type="submit"] {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease !important;
}

.btn:hover,
button[type="submit"]:hover {
    transform: translateY(-2px);
}

/* --- Navbar toggle smooth animation on mobile --- */
.navbar-toggle {
    transition: transform 0.25s ease;
}

.navbar-toggle:active {
    transform: scale(0.9);
}

/* ============================================================== 
     # Responsive Navbar — Mobile & Tablet Safety
=================================================================== */

/* Ensure nav does not overflow viewport on any size */
nav.navbar.validnavs {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* Mobile: collapse menu below 992px */
@media only screen and (max-width: 991px) {

    .navbar-brand>img,
    .navbar-brand img.logo-display {
        display: inline-block !important;
    }

    .navbar-brand img.logo-scrolled {
        display: none !important;
    }

    /* Ensure toggle button aligns correctly */
    nav.navbar.validnavs .navbar-toggle {
        padding: 8px 0 !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    /* Row height for tablet — matches 65px logo */
    .navbar:not(.sticked) .row.align-center {
        min-height: 65px !important;
    }
}

/* ============================================================== 
     # Contact Form — Remove Empty Icon Boxes
     quick-contact-style-one li::after uses FA5 Pro (not loaded),
     creating blank square boxes. Items already have inline <i> icons.
=================================================================== */
.quick-contact-style-one li::after {
    display: none !important;
    content: none !important;
}

/* Remove the left padding that was reserved for the now-hidden ::after icon */
.quick-contact-style-one li {
    padding-left: 0 !important;
}

/* ============================================================== 
     # Contact Form — In-page Success / Error Messages
=================================================================== */
.alert-msg {
    display: none;
    margin-top: 16px;
    padding: 12px 18px;
    border-radius: 6px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
}

.alert-msg.alert-success {
    background: rgba(26, 192, 198, 0.15);
    border: 1px solid rgba(26, 192, 198, 0.5);
    color: #d0fffe;
}

.alert-msg.alert-error {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.45);
    color: #ffd0d4;
}

/* ============================================================== 
     # Contact Form — Hide Broken Loader Image Placeholder
     theme's main.js injects <img src="...loader.gif"> into the form
     on submit. loader.gif is missing so it renders as a broken
     image placeholder after the form resets. Hide it.
=================================================================== */
.contact-form img.loading,
.consultation-form img.loading,
.contact-form img[src*="loader"],
.consultation-form img[src*="loader"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* ============================================================== 
     # Certified Company Award Box — Icon Fix
     Theme sets font-weight: 100 on .award i which breaks FA Solid icons.
     Force FA Solid weight so fas fa-medal renders correctly.
=================================================================== */
.award i.fas,
.award i.fa-solid {
    font-weight: 900 !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}

/* ============================================================== 
     # Contact Page Specific Fixes
=================================================================== */

/* Tighten vertical gap between contact info cards section and the form below */
.contact-area.default-padding {
    padding-top: 60px !important;
    padding-bottom: 0 !important;
}

.contact-form-area.default-padding {
    padding-top: 50px !important;
    padding-bottom: 80px !important;
}

/* Ensure the contact cards don't overlap the form on small screens */
@media only screen and (max-width: 991px) {
    .contact-style-two-items {
        margin-bottom: 0 !important;
    }

    .contact-style-two-items .contact-style-two {
        margin-bottom: 20px;
    }

    .contact-area.default-padding {
        padding-top: 40px !important;
        padding-bottom: 0 !important;
    }

    .contact-form-area.default-padding {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }
}

/* ============================================================== 
     # Banner Heading Typography Fix
=================================================================== */
.banner-area h2 {
    font-size: 68px !important;
    line-height: 1.15 !important;
    letter-spacing: -1.5px !important;
}

@media only screen and (max-width: 991px) {
    .banner-area h2 {
        font-size: 52px !important;
        letter-spacing: -1px !important;
    }
}

@media only screen and (max-width: 767px) {
    .banner-area h2 {
        font-size: 34px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.5px !important;
    }
}

/* ============================================================== 
     # Who We Are - Icon Rendering Fix
     Only fixing the Font Awesome pseudo-element so checkmarks render
=================================================================== */
.short-feature-list h4::after {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* Breadcrumb banner styles — no custom overrides, using original theme styles */

/* ============================================================== 
     # Footer Fixes & Enhancements
=================================================================== */
footer {
    overflow: hidden !important;
    background-color: #0b0c10 !important;
    /* Premium dark background */
}

/* Fix newsletter background extension issue */
footer .newsletter::after {
    width: 2000px !important;
    /* Ensure it covers to the right but doesn't cause overflow on mobile */
    max-width: 100vw !important;
    /* Keep it safe */
    display: none !important;
    /* Disable this hacky background extension */
}

/* Instead, style the newsletter widget container with a premium subtle border or card-like background */
footer .newsletter {
    padding: 24px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-left: 24px !important;
}

footer .newsletter::before {
    display: none !important;
    /* Hide old border hack */
}

/* Adjust grid gutters for footer on desktop and tablet */
@media (min-width: 992px) {
    footer .f-items .row {
        align-items: stretch;
    }
}

/* Social icons increase size and center properly */
footer .social li a {
    height: 42px !important;
    width: 42px !important;
    line-height: 42px !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
}

footer .social li a:hover {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary)) !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(26, 192, 198, 0.3);
}

/* Address icons visibility */
footer .address li {
    display: flex !important;
    align-items: flex-start !important;
    margin-top: 18px !important;
    font-size: 14px !important;
}

footer .address li .icon {
    margin-right: 12px !important;
    color: var(--color-primary) !important;
    font-size: 18px !important;
    margin-top: 3px;
}

footer .address li i {
    color: var(--color-primary) !important;
    font-size: 18px !important;
    margin: 0 !important;
    top: 0 !important;
    display: inline-block !important;
    height: auto !important;
    width: auto !important;
    background: transparent !important;
}

footer .address li .content {
    flex: 1;
}

/* Newsletter form layout */
footer .newsletter form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 20px !important;
}

footer .newsletter input {
    width: 100% !important;
    height: 46px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
}

footer .newsletter input:focus {
    border-color: var(--color-primary) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    outline: none !important;
    box-shadow: 0 0 8px rgba(26, 192, 198, 0.2) !important;
}

footer .newsletter button {
    height: 46px !important;
    margin-top: 0 !important;
    width: 100% !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary)) !important;
    border: none !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

footer .newsletter button::after {
    display: none !important;
    /* Hide old background hack */
}

footer .newsletter button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(26, 192, 198, 0.4) !important;
}


/* Project Cards Larger */
.gallery-items.colums-3 .gallery-item {
    width: 33.3333%;
    padding: 15px;
}

/* Card wrapper premium look */
.gallery-style-one .item {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.35s ease-in-out;
}

/* Hover effect */
.gallery-style-one .item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

/* Image */
.gallery-style-one .thumb img {
    width: 100%;
    height: 340px; /* Premium height */
    object-fit: cover;
    border-radius: 16px; /* slight curve all sides */
    transition: all 0.35s ease-in-out;
}

/* Content */
.gallery-style-one .content {
    padding: 20px;
}

.gallery-style-one .info h4 {
    font-size: 22px;
    margin-bottom: 10px;
}

.gallery-style-one .info span {
    font-size: 16px;
    color: #666;
}

/* Responsive */
@media (max-width: 991px) {
    .gallery-items.colums-3 .gallery-item {
        width: 50%;
    }

    .gallery-style-one .thumb img {
        height: 280px;
    }
}

@media (max-width: 767px) {
    .gallery-items.colums-3 .gallery-item {
        width: 100%;
    }

    .gallery-style-one .thumb img {
        height: 250px;
    }
}

/* ============================================================== 
     # Breadcrumb Padding - Clear Navbar Gap
     Default navbar = 80px logo, zero padding.
=================================================================== */
.breadcrumb-area {
    padding: 120px 0 100px !important;
}

@media (max-width: 767px) {
    .breadcrumb-area {
        padding: 90px 0 70px !important;
    }
}
/* ============================================================== 
     # General UI/UX Quality Review — Site-wide Polish
=================================================================== */

/* Brand text selection color */
::selection {
    background: var(--color-primary);
    color: #fff;
}

/* Contact Info Cards hover lift */
.contact-style-two .item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
}

.contact-style-two .item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(26, 192, 198, 0.2) !important;
}

/* Services page: Choose-Us-Style-Two cards equal image height */
.choose-us-style-two .thumb img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.4s ease;
}

.choose-us-style-two:hover .thumb img {
    transform: scale(1.04);
}

/* About page: Experience box premium look */
.about-style-one .experience {
    margin-top: 30px;
    padding: 20px 28px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 8px 28px rgba(26, 192, 198, 0.25);
}

.about-style-one .experience .left h2 {
    font-size: 52px !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.about-style-one .experience .left h4 {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* FAQ Accordion visual refinements */
.accordion-item {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.accordion-item:hover {
    box-shadow: 0 4px 16px rgba(26, 192, 198, 0.12);
}

.accordion-button {
    font-weight: 600 !important;
    font-size: 15px !important;
}

.accordion-button:not(.collapsed) {
    color: var(--color-primary) !important;
    background-color: rgba(26, 192, 198, 0.05) !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Testimonials: avatar circle fix */
.testimonial-style-one .quote-icon img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--color-primary) !important;
    margin-bottom: 20px !important;
}

/* Process list icon alignment — consolidated into Our Solutions section below */
.process-list li img {
    width: 30px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    margin-top: 4px !important;
}

/* Site-wide sub-title uppercase consistency */
.site-heading .sub-title,
.site-heading h4.sub-title {
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Mobile: choose-us card image height */
@media only screen and (max-width: 767px) {
    .choose-us-style-two .thumb img {
        height: 220px;
    }
}

/* cards styling*/
.gallery-style-one {
    padding: 15px;
}

.gallery-style-one .item {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
}

/* ============================================================== 
     # Our Solutions (Process Section) — Clean Layout Fix
     Removes conflicting duplicate rules and ensures clean arrow + text alignment
=================================================================== */

.process-area {
    padding: 100px 0;
}

.process-style-one img {
    max-width: 100%;
    height: auto;
}

.process-list {
    margin-top: 24px;
    padding: 0;
    list-style: none;
}

/* Single rule for list items — flex layout, arrow left */
.process-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 30px !important;
    position: relative !important;
}

/* Arrow image */
.process-list li > img {
    width: 30px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    margin-top: 5px !important;
    opacity: 0.85;
}

/* Text block */
.process-list li h4 {
    margin-bottom: 8px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

.process-list li p {
    margin: 0 !important;
    opacity: 0.85;
    line-height: 1.7;
    padding-right: 0 !important;
    font-size: 14.5px;
}

/* Responsive: hide arrow image on small screens for clean look */
@media only screen and (max-width: 991px) {
    .process-list li > img {
        display: none !important;
    }

    .process-list li {
        gap: 0 !important;
    }
}

/* ==============================================================
   # FIX: T3 — Contact Form Mobile Layout (375px+)
   Prevents horizontal overflow on small screens
================================================================= */
@media only screen and (max-width: 767px) {
    /* FIX: T3 - form wrapper: full width, no bleed */
    .contact-form-area .form {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* FIX: T3 - all inputs, textareas: full width, box-sizing */
    .contact-form-area .contact-form input,
    .contact-form-area .contact-form textarea,
    .contact-form-area .contact-form select,
    .contact-form-area .contact-form .form-control {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* FIX: T3 - map column stacks cleanly above form */
    .contact-form-area .google-maps {
        margin-bottom: 24px !important;
    }
}

/* ==============================================================
   # FIX: T4 — Our Solutions (Process Area) Mobile Overlap Fix
   Prevents content overlap at max-width: 768px
================================================================= */
@media only screen and (max-width: 768px) {
    /* FIX: T4 - make columns stack, remove absolute positioning issues */
    .process-area .row.align-center {
        flex-wrap: wrap !important;
    }

    .process-area .col-xl-6,
    .process-area .col-lg-5,
    .process-area .col-xl-5,
    .process-area .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* FIX: T4 - illustration image doesn't overflow */
    .process-area .process-style-one .thumb img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* FIX: T4 - ensure content block has min padding to prevent overlap */
    .process-area .process-style-one {
        padding-top: 30px !important;
        position: relative !important;
    }

    /* FIX: T4 - process list items stack cleanly */
    .process-list li {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 24px !important;
    }
}

/* ==============================================================
   Mobile Sidebar Logo — 32px to match navbar logo size.
   Target: the <img> shown inside .navbar-collapse when the
   mobile menu slides open (validnavs sets height: 65px there).
================================================================= */
@media only screen and (max-width: 1023px) {
    nav.navbar.validnavs .navbar-collapse.collapse.show img:not([class*="logo-display"]):not([class*="logo-scrolled"]) {
        height: 32px !important;
        max-height: 32px !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
}