/*
author: Boostraptheme
author URL: https://boostraptheme.com
License: Creative Commons Attribution 4.0 Unported
License URL: https://creativecommons.org/licenses/by/4.0/
*/ 

/*====================================================
                DEFAULT VALUES:

                Font Family                 : Roboto Condensed
                
                Greenish Blue               : #2196f3       (Buttons, Icons, Links, Lines & Backgrounds)
                Steel Gray                  : #41464b       (Headings)
                light Gray                  : #61666b       (Heading Second)
                Gray                        : #717171       (Paragraphs)
                Gray extra light            : #f5f5f5       (Content Background)
                White                       : #fff          (Text With Black Backgrounds)
                Black                       : #000 

======================================================*/

@import url('https://fonts.googleapis.com/css?family=Hind:400,600');

/* General CSS */

html,
body {
    height: 100%;
}

body {
    font-family: 'Hind', sans-serif;
}  

h1, h2, h3, h4, h5 {
    font-family: 'Roboto', sans-serif;
    color:#41464b;
    text-transform: uppercase;
} 

a {
    font-family: 'Hind', sans-serif;
    color: #2196f3;
}

p {
    font-family: 'Hind', sans-serif;
    color: #64707b;
    font-size: 15px;
    font-weight: 300;
}

@media (min-width: 1600px) {
    p {
        font-family: 'Hind', sans-serif;
        color: #64707b;
        font-size: 16px;
        font-weight: 300;
    }    
}
 
/*====================================================
                       NAVIGATION
======================================================*/
     
    /*Top Navbar*/

    .top-menubar-nav {
        display: none;
    }

    header .topmenu {
        background: #f0f0f0;
        border-top: solid 1px #f0f0f0;
        border-bottom: solid 1px #f0f0f0;
    }


    /*Top Contacts*/

    header .topmenu ul {
        margin: 0;
    }

    header .topmenu .top-contacts {
        line-height: 25px;
    }

    header .topmenu .top-contacts li {
        color: #666;
        padding: 5px 0;
        font-size: 12px;
        margin-right: 15px;
        display: inline-block;
    }

    header .topmenu .top-contacts li a {
        color: #666;
    }

    header .topmenu .top-contacts i {
        color: #999;
        font-size: 13px;
        margin-right: 3px;
    }


    /*Top Data*/

    header .topmenu .top-data {
        text-align: right;
    }

    header .topmenu .top-data li {
        padding: 5px 11px;
        margin-left: -4px;
        display: inline-block;
        border-right: solid 1px #eee;
    }

    header .topmenu .top-data li:first-child {
        margin-left: 0;
        border-left: solid 1px #eee;
    }

    header .topmenu .top-data li a {
        font-size: 12px;
    }

    header .topmenu .top-data li a:hover {
        text-decoration: none;
    }

    .top-social {
        height: 25px;
        line-height: 25px;
        text-align: center;
        width: 25px;
        border-radius: 50%;
        background: #fff;
    }

    header .topmenu .top-data li i.top-social.fa-facebook,
    .social-icon-f li i.top-social.fa-facebook {
        border: 2px solid #4267b2;
        color: #4267b2;
    }

    header .topmenu .top-data li i.top-social.fa-facebook:hover,
    .social-icon-f li i.top-social.fa-facebook:hover {
        background: #4267b2;
        color: #fff;
    }

    header .topmenu .top-data li i.top-social.fa-twitter,
    .social-icon-f li i.top-social.fa-twitter {
        border: 2px solid #4AB3F4;
        color: #4AB3F4;
    }

    header .topmenu .top-data li i.top-social.fa-twitter:hover,
    .social-icon-f li i.top-social.fa-twitter:hover {
        background: #4AB3F4;
        color: #fff;
    }

    header .topmenu .top-data li i.top-social.fa-google-plus,
    .social-icon-f li i.top-social.fa-google-plus {
        border: 2px solid #e24343;
        color: #e24343;
    }

    header .topmenu .top-data li i.top-social.fa-google-plus:hover,
    .social-icon-f li i.top-social.fa-google-plus:hover {
        background: #e24343;
        color: #fff;
    }

    header .topmenu .top-data li a.log-top {
        text-decoration: none;
        font-size: 15px;
        font-weight: 700;
        color:#888;
    }

    header .topmenu .top-data li a.log-top:hover {
        color:#555;
    }


    /*Responsive Topbar*/

    @media (max-width: 991px) {
        header .topmenu ul {
            text-align: center !important;
        }

        header .topmenu .top-data li {
            top: 1px;
            padding: 6px 10px;
            margin-left: -5px;
            position: relative;
            border: solid 1px #eee;
        }
    }


    /*Navbar*/
    .affix {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
        box-shadow: 0px 0.5px 4px #c3c2c2;
    }  

    .navbar {
        padding: 0;
        -webkit-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        background: #fff;
    }

    .navbar-header {
        padding-left: 85px;
    }

    .justify-content-end {
        padding-right: 85px;
    }

    .navbar-nav {
        float: right;
    }


    .navbar-nav>li {
        height: 65px;
        line-height: 65px;
        border-bottom: 3px solid rgba(0, 0, 0, 0);
        transition: all .5s ease-in-out;
    }

    .navbar-nav>li:hover,
    .navbar-nav>li:active {
        border-bottom: 2px solid #2196f3;
        background: #f0f0f0;
    }

    .navbar-nav>li>a {
        color: #808282 !important; 
        font-size: 14.5px;
        font-weight: 700;
        font-family: "hine", sans-serif;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 10px;
    }

    .navbar-nav>li>a:hover,
    .navbar-nav>li>a:active {
        color: #2196f3!important;
    }

    
    /*This is item search bar*/

    .navbar-nav li>.search {
        color: #aaa;
        cursor: pointer;
        font-size: 15px;
        z-index: 0;
        min-width: 30px;
        margin-top: 3px;
        padding: 28px 0;
        text-align: center;
        display: inline-block;
    }

    .navbar-nav li>.search:hover {
        color: #2196f3;
    }

    .navbar .search-open {
        right: 0;
        top: 65px;
        display: none;
        height: 50px;
        padding: 4px;
        position: absolute;
        background: #fff;
        box-shadow: 0 0 3px #ddd;
        z-index: 1001;
    }

    .navbar .search-open input,
    .navbar .search-open span {
        height: 40px;
        border-color: #2196f3;
        line-height: 50px;
    }

    .navbar .search-open span {
        background: #2196f3;
        color: #fff;
    }

    .navbar-toggle {
        background-color: rgba(0, 0, 0, 0.1);
        border: 1px solid #fff;
        border-radius: 0;
    }

    .navbar-toggle .navbar-toggler-icon {
        background-color: #fff!important;
    }

    .navbar-collapse {
        max-height: none !important;
    }

    .vesco-top-nav ul.navbar-nav>li>a.active {
        color: #2196f3!important;
    }
      
    @media (min-width: 992px){

        .navbar-expand-lg .navbar-nav .dropdown-menu.mega-menu {
            position: absolute;
            left: -280px;
        }

        .dropdown-cust.mega-menu .dropdown-item {
            border-right: 1px solid #e0e0e0;
        }    

        .dropdown-cust.mega-menu {
            margin-top: 0px;
            min-width: 450px;
            padding: 0;
            border-top: 2px solid #2196f3;
            border-left: 2px solid rgba(1, 1, 1, 0);
            border-right: 2px solid rgba(1, 1, 1, 0);
            border-bottom: 2px solid #2196f3;
            border-radius: 0;
        }
    } 

    @media (min-width: 992px) and (max-width: 1200px) {
        .navbar-expand-lg .navbar-nav .dropdown-menu.mega-menu {
            position: absolute;
            left: -300px;
        }    
    }

    .dropdown-cust {
        margin-top: 0px;
        min-width: 220px;
        padding: 0;
        border-top: 2px solid #2196f3;
        border-left: 2px solid rgba(1, 1, 1, 0);
        border-right: 2px solid rgba(1, 1, 1, 0);
        border-bottom: 2px solid #2196f3;
        border-radius: 0;
    } 

    .dropdown-cust .dropdown-item {
        display: block;
        width: 100%;
        padding: 0px 1rem;
        margin: 0px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        clear: both;
        font-weight: 400;
        color: #61666b;
        text-align: inherit;
        white-space: nowrap;
        text-transform: uppercase;
        background: 0 0;
        border-bottom: 1px solid #e0e0e0;
    } 

    .dropdown-cust .dropdown-item:hover,
    .dropdown-cust .dropdown-item.active {
        background: #f0f0f0;
    }

    .dropdown-cust.mega-menu .mega-menu-img img {
    }

    @media (max-width: 991px) {

        .navbar>.container .navbar-nav {
            float: left;
            border-top: 1px solid #ddd;
            width: 100%;
        }

        .navbar>.container .navbar-brand,
        .navbar>.container-fluid .navbar-brand {
            padding: 12px 0px;
            margin-left: -10px;
        }

        .navbar-toggle {
            margin-right: 0;
        }

        .navbar .search-open {
            width: 100%;
        }

        .navbar-nav>li {
            height: auto;
            line-height: 35px;
            border-bottom: 3px solid rgba(0, 0, 0, 0);
            transition: all .5s ease-in-out;
            border-bottom: 1px solid #ddd;
        }

        .navbar-nav>li.active,
        .navbar-nav>li:hover,
        .navbar-nav>li:active {
            border-bottom: 2px solid #ddd;
            background: #f0f0f0;
        }

        .navbar li>.search {
            display: none;
        }

        .navbar .search-open {
            right: 0;
            top: 0;
            display: block;
            height: auto;
            line-height: 50px;
            padding: 4px;
            position: relative;
            box-shadow: none;
            background: none;
            z-index: 1;
        }

        .dropdown-cust {
            margin-top: -2px;
            min-width: 220px;
            padding: 0;
            border-left: 2px solid rgba(1, 1, 1, 0);
            border-right: 2px solid rgba(1, 1, 1, 0);
            border-bottom: 2px solid #2196f3;
            border-radius: 0;
            z-index: 0;
            overflow: hidden;
        }
    }

    @media (max-width: 767px) {

        .affix {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1030;
            box-shadow: 0px 0.5px 4px #c3c2c2;
        }  

        .top-menubar {
            display: none;
        }

        .container {
            max-width: 100%;
        }

        .navbar>.container .navbar-brand,
        .navbar>.container .navbar-toggler,
        .navbar>.container-fluid .navbar-brand {
            margin: 8px 10px;
        }

        .navbar>.container .navbar-brand,
        .navbar>.container-fluid .navbar-brand {
            padding: 8px 0px;
        }

        .navbar-nav>li {
            line-height: 25px;
            padding: 0 20px;
            border-bottom: 3px solid rgba(0, 0, 0, 0);
            transition: all .5s ease-in-out;
            border-bottom: 1px solid #ddd;
        }

        .navbar-nav>li:last-child {
            padding: 0px;
        }
        .navbar-nav>li.dropdown .dropdown-menu {
            margin-bottom: 15px;
        }

        .top-menubar-nav {
            display: block;
        }
    }

    @media (min-width: 1600px) {
        .dropdown-cust .dropdown-item {
            font-size: 15px;
        }
    }

/*====================================================
                  BUTTON (Generic)
======================================================*/

    .btn-general {
        background-color: transparent;
        text-align: center;
        border-width: 1px;
        border-radius: 0px;
        font-size: 16px;
        padding: 10px 15px;
        font-weight: 400;
        text-transform: uppercase;
    }

    .btn-white {
        border-color: #2196f3;
        background-color: #2196f3;
        color: #fff;
    }

    .btn-white:hover,
    .btn-white:focus {
        background-color: transparent;
        color: #2196f3;
        cursor: pointer;
    }

    .btn-green {
        border-color: #2196f3;
        color: #2196f3;
    }

    .btn-green:hover,
    .btn-green:focus {
        background-color: #2196f3;
        color: #fff;
        cursor: pointer;
    }
     
/*====================================================
                       HOME
======================================================*/

    #home,
    .carousel-fade,
    .carousel-fade .carousel-inner,
    .carousel-fade .carousel-inner .carousel-item,
    .carousel-fade .carousel-inner .slides {
        min-height: 100vh;
    }

    .carousel-fade {
        height: 100vh;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-image: linear-gradient(rgba(7, 14, 28, 0.48), rgba(7, 14, 28, 0.72)), url('https://images.unsplash.com/photo-1753715613434-9c7cb58876b9?auto=format&fit=crop&fm=jpg&q=80&w=1920');
    }

    .carousel-fade .carousel-inner .carousel-item {
        -webkit-transition-property: opacity;
        transition-property: opacity;
    }

    .carousel-fade .carousel-control {
        z-index: 2;
    }

    .carousel-fade {
        position: relative;
        height: 100vh;
    }

    .hero {
        position: absolute;
        inset: 0;
        width: 100%;
        min-height: 100vh;
        padding: 120px clamp(24px, 6vw, 72px) 88px;
        z-index: 3;
        color: #fff;
        text-align: left;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero h1 {
        font-size: clamp(3.1em, 5vw, 5.2em);
        color: #fff;
        font-weight: 700;
        width: auto;
        max-width: 100%;
        margin: 0;
        padding: 0;
        opacity: 1;
        letter-spacing: 0;
        white-space: normal;
        line-height: 1.02;
        margin-bottom: 24px;
    }

    .hero h1 span a {
        color: #57d5ff;
        text-decoration: none;
    }

    .hero h3 {
        font-size: 1.1em;
        color: rgba(255, 255, 255, 0.86);
        letter-spacing: 0;
        margin-bottom: 0;
        line-height: 1.8;
        max-width: 700px;
    }

    .hero button {
        margin: 10px 0;
    }

    .carousel-fade .carousel-inner .carousel-item .hero {
        opacity: 0;
        -webkit-transition: 2s all ease-in-out .1s;
        -moz-transition: 2s all ease-in-out .1s;
        -ms-transition: 2s all ease-in-out .1s;
        -o-transition: 2s all ease-in-out .1s;
        transition: 2s all ease-in-out .1s;
    }

    .carousel-fade .carousel-inner .carousel-item.active .hero {
        opacity: 1;
        -webkit-transition: 2s all ease-in-out .1s;
        -moz-transition: 2s all ease-in-out .1s;
        -ms-transition: 2s all ease-in-out .1s;
        -o-transition: 2s all ease-in-out .1s;
        transition: 2s all ease-in-out .1s;
    }

    .overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
        background:
            radial-gradient(circle at 20% 20%, rgba(96, 227, 255, 0.18), transparent 30%),
            radial-gradient(circle at 80% 28%, rgba(33, 150, 243, 0.14), transparent 24%),
            linear-gradient(135deg, rgba(5, 10, 24, 0.56), rgba(5, 10, 24, 0.82));
    }

    .carousel-fade .carousel-inner .carousel-item {
        height: 100vh;
    }

    .hero-ai {
        text-transform: none;
    }

    .hero-ai__content,
    .hero-ai__cards {
        position: relative;
        z-index: 3;
    }

    .hero-ai__content {
        width: min(1180px, 100%);
        max-width: 1180px;
        padding-right: 380px;
    }

    .hero-ai__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        color: #dff6ff;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.18em;
    }

    .hero-ai__eyebrow:before {
        content: "";
        width: 56px;
        height: 1px;
        background: linear-gradient(90deg, rgba(87, 213, 255, 0), rgba(87, 213, 255, 1));
    }

    .hero-ai__footer {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-top: 34px;
        flex-wrap: wrap;
    }

    .hero-ai__footer .btn-green {
        border-width: 2px;
        border-color: #57d5ff;
        color: #57d5ff;
        background: rgba(7, 16, 33, 0.32);
        box-shadow: 0 0 0 1px rgba(87, 213, 255, 0.18);
    }

    .hero-ai__footer .btn-green:hover,
    .hero-ai__footer .btn-green:focus {
        background: #57d5ff;
        color: #081321;
        box-shadow: 0 16px 40px rgba(87, 213, 255, 0.28);
    }

    .hero-ai__signal {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        color: rgba(255, 255, 255, 0.84);
        font-size: 14px;
        font-weight: 500;
        max-width: 420px;
    }

    .hero-ai__signal span {
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #5ff3b1;
        box-shadow: 0 0 20px rgba(95, 243, 177, 0.8);
        flex: 0 0 auto;
    }

    .hero-ai__signal span:after {
        content: "";
        position: absolute;
        inset: -6px;
        border: 1px solid rgba(95, 243, 177, 0.35);
        border-radius: 50%;
        animation: heroPulse 2.4s ease-out infinite;
    }

    .hero-ai__grid,
    .hero-ai__glow,
    .hero-ai__beam,
    .hero-ai__orb {
        position: absolute;
        pointer-events: none;
    }

    .hero-ai__grid {
        inset: 0;
        background-image:
            linear-gradient(rgba(87, 213, 255, 0.12) 1px, transparent 1px),
            linear-gradient(90deg, rgba(87, 213, 255, 0.12) 1px, transparent 1px);
        background-size: 92px 92px;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.2));
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.2));
        opacity: 0.65;
        animation: heroGridDrift 18s linear infinite;
    }

    .hero-ai__glow {
        width: 720px;
        height: 720px;
        top: -180px;
        right: -120px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(87, 213, 255, 0.28), rgba(87, 213, 255, 0));
        filter: blur(10px);
        transform: translate3d(var(--hero-shift-x, 0px), var(--hero-shift-y, 0px), 0);
        transition: transform 0.4s ease-out;
    }

    .hero-ai__beam {
        inset: 12% auto auto 46%;
        width: 220px;
        height: 220px;
        background: linear-gradient(180deg, rgba(87, 213, 255, 0.34), rgba(87, 213, 255, 0));
        transform: rotate(30deg);
        filter: blur(4px);
        animation: heroBeam 8s ease-in-out infinite;
        opacity: 0.85;
    }

    .hero-ai__orb {
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(4px);
        box-shadow: inset 0 0 30px rgba(87, 213, 255, 0.12);
        animation: heroFloat 7s ease-in-out infinite;
    }

    .hero-ai__orb--one {
        width: 200px;
        height: 200px;
        right: 140px;
        top: 120px;
    }

    .hero-ai__orb--two {
        width: 74px;
        height: 74px;
        right: 320px;
        bottom: 96px;
        animation-duration: 5.5s;
        animation-direction: reverse;
    }

    .hero-ai__cards {
        position: absolute;
        right: clamp(24px, 6vw, 72px);
        top: 50%;
        transform: translateY(-50%);
        width: 320px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .hero-ai__card {
        padding: 18px 20px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        background: rgba(8, 17, 35, 0.46);
        backdrop-filter: blur(12px);
        box-shadow: 0 24px 70px rgba(2, 6, 16, 0.38);
    }

    .hero-ai__card small,
    .hero-ai__card span {
        display: block;
    }

    .hero-ai__card small {
        color: #7ddfff;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        margin-bottom: 10px;
    }

    .hero-ai__card strong {
        display: block;
        font-size: 20px;
        line-height: 1.4;
        color: #fff;
        margin-bottom: 8px;
    }

    .hero-ai__card span {
        color: rgba(255, 255, 255, 0.68);
        font-size: 13px;
        line-height: 1.7;
    }

    .hero-ai__card--score {
        margin-left: 36px;
    }

    @keyframes heroGridDrift {
        0% {
            transform: translate3d(0, 0, 0);
        }
        100% {
            transform: translate3d(-46px, 46px, 0);
        }
    }

    @keyframes heroFloat {
        0%, 100% {
            transform: translate3d(0, 0, 0);
        }
        50% {
            transform: translate3d(0, -16px, 0);
        }
    }

    @keyframes heroBeam {
        0%, 100% {
            transform: rotate(30deg) translateY(0);
            opacity: 0.35;
        }
        50% {
            transform: rotate(30deg) translateY(30px);
            opacity: 0.9;
        }
    }

    @keyframes heroPulse {
        0% {
            transform: scale(0.6);
            opacity: 0.9;
        }
        100% {
            transform: scale(1.6);
            opacity: 0;
        }
    }

    @media (max-width: 767px) {
        .hero {
            min-height: 100vh;
            padding: 110px 18px 48px;
        }
        .hero h1 {
            font-size: 2.7em;
            color: #fff;
            font-weight: 700;
            width: auto;
            margin: 0;
            padding: 0;
            opacity: 1;
            white-space: normal;
            margin-bottom: 20px;
        }
        .hero h3 {
            font-size: 1em;
            line-height: 25px;
        }
        .hero-ai__cards {
            display: none;
        }
        .hero-ai__content {
            padding-right: 0;
        }
        .hero-ai__beam {
            left: auto;
            right: -10px;
            top: 14%;
        }
        .hero-ai__orb--one {
            right: -20px;
            top: 90px;
        }
        .hero-ai__orb--two {
            right: 38px;
            bottom: 32px;
        }
    }

    @media (max-width: 575px) {
        .hero {
            min-height: 100vh;
            padding: 102px 18px 42px;
        }
        .hero h1 {
            font-size: 1.9em;
            color: #fff;
            font-weight: 700;
            width: auto;
            margin: 0;
            padding: 0;
            opacity: 1;
            white-space: normal;
            margin-bottom: 18px;
        }
        .hero h3 {
            font-size: .9em;
            color: #fff;
            line-height: 25px;
        }
        .hero-ai__eyebrow {
            font-size: 11px;
            letter-spacing: 0.12em;
        }
        .hero-ai__footer {
            margin-top: 26px;
            gap: 16px;
        }
        .hero-ai__signal {
            font-size: 13px;
        }
    }

    @media (max-width: 420px) {
        .hero {
            padding: 96px 16px 36px;
        }
        .hero h1 {
            font-size: 1.65em;
            color: #fff;
            font-weight: 700;
            width: auto;
            margin: 0;
            padding: 0;
            opacity: 1;
            white-space: normal;
            margin-bottom: 16px;
        }
        .hero h3 {
            font-size: .8em;
            color: #fff;
            line-height: 25px;
        }
        .hero-ai__glow {
            width: 440px;
            height: 440px;
            top: -80px;
            right: -120px;
        }
        .hero-ai__orb--one {
            width: 140px;
            height: 140px;
        }
    }

    @media (max-width: 991px) {
        .hero-ai__cards {
            display: none;
        }

        .hero-ai__content {
            padding-right: 0;
            max-width: 760px;
        }
    }

    .title-bar .heading-border,
    .heading-border-light {
        position: relative;
        overflow: hidden;
    }

    .title-bar .heading-border:after,
    .heading-border-light:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
        transform: translateX(-120%);
        animation: borderScan 5.5s linear infinite;
    }

    @keyframes borderScan {
        0%,
        18% {
            transform: translateX(-120%);
        }
        32% {
            transform: translateX(120%);
        }
        100% {
            transform: translateX(120%);
        }
    }

/*====================================================
               OTHER HOME PAGE
======================================================*/

      .home-p {
        z-index: 1;
        padding: 100px 0;
        position: relative;
      }

      .home-p.breadcrumbs-lg {
        padding: 200px 0;
      } 

      .home-p.pages-head1 {
        background: url(../img/img/banner-1.jpg) no-repeat;
        background-size: cover;
        background-position: center center;
      }

      .home-p.pages-head2 {
        background: url(../img/img/banner-2.jpg) no-repeat;
        background-size: cover;
        background-position: center center;
      } 

      .home-p.pages-head3 {
        background: url(../img/img/banner-3.jpg) no-repeat;
        background-size: cover;
        background-position: center center;
      }  

      .home-p.pages-head4 {
        background: url(../img/img/banner-4.jpg) no-repeat;
        background-size: cover;
        background-position: center center;
      }  

      .home-p:after {
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        content: " ";
        position: absolute;
        background: rgba(0,0,0,0.2);
      }

      .home-p h1 {
        color: #fff;
        font-size: 40px;
        line-height: 50px;
        text-transform: uppercase;
      }

      .home-p p {
        color: #fff;
        font-size: 24px;
        font-weight: 200;
        margin-bottom: 0;
        text-transform: uppercase;
      }

      @media (max-width: 992px) {
        .home-p.breadcrumbs-lg {
          padding: 100px 0;
        }
      }

      @media (max-width: 768px) {
        .home-p,
        .home-p.breadcrumbs-lg {
          padding: 50px 0;
        }

        .home-p h1 {
          font-size: 30px;
          line-height: 40px;
        }

        .home-p p {
          font-size: 18px;
        }
      }

/*====================================================
               TITLE CONTENT (Generic)
======================================================*/

    .title-bar {
        padding: 100px 0;
    }

    .title-bar h1 {
        color: #41464b;
        text-align: center;
        font-weight: 700;
        margin: 20px auto 10px auto;
    }

    .title-bar .heading-border {
        width: 60px;
        height: 10px;
        background-color: #2196f3;
        margin: 0 auto 20px auto;
    }

    .heading-border-light {
        width: 30px;
        height: 5px;
        background-color: #2196f3;
        margin: 0 0 20px 0;
    }

    .title-bar p {
        color: #717171;
    }

    .title-bar p {
        text-align: center;
        font-size: 15px;
        line-height: 1.5;
        padding-bottom: 40px;
        margin: 0 auto;
        max-width: 700px;
    }

    .title-bar .title-but {
        margin: 0;
        background-color: transparent;
        text-align: center;
    }

    @media (max-width: 575px) {

        .title-bar {
            padding: 50px 0;
        }

        .title-bar h1 {
            color: #41464b;
            font-size: 30px;
            text-align: center;
            font-weight: 700;
            margin: 20px auto 10px auto;
        }

        .title-bar p {
            text-align: center;
            font-size: 14px;
            line-height: 1.5;
            padding-bottom: 40px;
            margin: 0 auto;
            max-width: 700px;
        }
    }

    @media (min-width: 1600px) {
        .title-bar p {
            font-size: 16px;
        }
    }

/*====================================================
               COLOR (Generic)
======================================================*/

    .cl-white {
        color: #fff;
    }

    .cl-atlantis {
        color: #fff;
    }

    .bg-white {
        background: #fff;
    }

    .bg-atlantis {
        background: #2196f3;
    }

    .bg-starship {
        background: #cdd613;
    }

    .bg-matisse {
        background: #0b385d;
    }

    .bg-chathams {
        background: #0aa1b9;
    }

    .bg-gray {
        background: #f0f0f0;
    }

    .bg-light-gray {
        background: #f9f9f9;
    }

    .bg-gradiant {
        background: -moz-linear-gradient(45deg, rgba(34, 155, 242, 1) 0%, rgba(0, 128, 129, 1) 99%, rgba(0, 128, 128, 1) 100%);
        /* ff3.6+ */
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(34, 155, 242, 1)), color-stop(99%, rgba(0, 128, 129, 1)), color-stop(100%, rgba(0, 128, 128, 1)));
        /* safari4+,chrome */
        background: -webkit-linear-gradient(45deg, rgba(34, 155, 242, 1) 0%, rgba(0, 128, 129, 1) 99%, rgba(0, 128, 128, 1) 100%);
        /* safari5.1+,chrome10+ */
        background: -o-linear-gradient(45deg, rgba(34, 155, 242, 1) 0%, rgba(0, 128, 129, 1) 99%, rgba(0, 128, 128, 1) 100%);
        /* opera 11.10+ */
    }

/*====================================================
                LOGIN OR REGISTER
======================================================*/

        #login-modal .modal-dialog {
            margin-top: 170px;
            width: 400px;
        }

        #login-modal label {
            color: #888;
            margin-bottom: 0;
        }

        #login-modal input[type=text],
        input[type=password] {
            margin-bottom: 15px;
            border-radius: 0;
        }

        .modal-backdrop.in {
            filter: alpha(opacity=10);
            opacity: .8;
        }

        .modal-content {
            /*background-color: #ececec;*/
            border: 3px solid #2196f3;
            border-radius: 0px;
            outline: 0;
        }

        .modal-header {
            min-height: 16.43px;
            padding: 15px 15px 15px 15px;
            border-bottom: 0px;
        }

        .modal-body {
            position: relative;
            padding: 25px 45px;
        }

        .modal-footer {
            padding: 15px 45px 15px 45px;
            text-align: left;
            width: 100%;
            border-top: 0px;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: end;
            justify-content: center;
        }

        .modal-footer {
            display: -ms-flexbox;
            display: flex;
            padding: 15px;
            border-top: 1px solid #e9ecef;
        }

        .checkbox {
            margin-bottom: 0px;
        }


        .btn-link {
            padding: 5px 10px 0px 0px;
            color: #95a5a6;
        }

        .btn-link:hover,
        .btn-link:focus {
            color: #2c3e50;
            text-decoration: none;
        }

        @media (max-width: 575px) {
            #login-modal .modal-dialog {
                margin-top: 100px;
                width: 300px;
                margin: 100px auto;
            }
        }

/*====================================================
                        ABOUT
======================================================*/

    .about .about-content-box {
        padding: 80px 20px;
        text-align: center;
        position: relative;
        overflow: hidden;
        transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

    .about .about-content-box:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
        opacity: 0;
        transition: opacity 0.35s ease;
    }

    .about .about-content-box:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 60px rgba(8, 18, 32, 0.24);
    }

    .about .about-content-box:hover:before {
        opacity: 1;
    }

    .about-content-box>i {
        color: #fff;
        height: 150px;
        line-height: 150px;
        font-size: 100px;
    }

    .about-content-box>h5 {
        color: #fff;
        text-transform: none;
        font-weight: normal;
        padding: 20px 0 10px 0;
    }

    .about-content-box>p {
        color: #fff;
    }

    @media (max-width: 767px) {
        .about .container-fluid {
            width: 60%
        }

        .about .container-fluid .col-md-4 {
            margin: 15px 0;
        }
    }

    @media (max-width: 585px) {
        .about .container-fluid {
            width: 80%
        }

        .about .container-fluid .col-md-4 {
            margin: 15px 0;
        }
    }


    @media (max-width: 420px) {
        .about .container-fluid {
            width: 100%
        }

        .about .container-fluid .col-md-4 {
            margin: 0;
        }
    }


/*====================================================
                       STORY
======================================================*/

    #story {
        padding-bottom: 50px;
        position: relative;
        overflow: hidden;
    }

    #story:before {
        content: "";
        position: absolute;
        top: 100px;
        right: -120px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(87, 213, 255, 0.12), rgba(87, 213, 255, 0));
        pointer-events: none;
    }

    .story-desc {
        padding: 0 40px 40px 10px;
        position: relative;
    }

    .story-desc>h6 {
        color: #2196f3;
        font-weight: 700;
    }

    .story-desc>p {
        font-size: 15px;
    }

    .story-descb {
        padding: 10px 10px 30px 10px;
        margin: 60px 0;
        background: linear-gradient(180deg, #f8fbff, #f1f6fb);
        border: 1px solid rgba(33, 150, 243, 0.1);
        border-radius: 8px;
        text-align: center;
        -webkit-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        overflow: hidden;
    }

    .story-descb:hover {
        box-shadow: 0 24px 55px rgba(33, 150, 243, 0.16);
        border-bottom: 5px solid #2196f3;
        margin-top: 55px;
        cursor: pointer;
    }

    .story-descb>i {
        font-size: 45px;
        height: 60px;
        line-height: 60px;
        color: #999;
    }

    .story-descb h6 {
        font-size: 18px;
        color: #666;
        padding: 25px 0 5px;
    }

    .story-descb p {
        color: #867f7f;
        font-size: 14px;
    }

    @media (max-width: 767px) {
        .story-descb {
            padding: 10px 10px 30px 10px;
            margin: 20px 0;
            background: linear-gradient(180deg, #f8fbff, #f1f6fb);
            text-align: center;
            -webkit-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
        }
    }

    @media (max-width: 585px) {
        .story-descb {
            padding: 10px 10px 30px 10px;
            margin: 20px 10%;
            background: linear-gradient(180deg, #f8fbff, #f1f6fb);
            text-align: center;
            -webkit-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
        }
    }

    @media (max-width: 420px) {
        .story-descb {
            padding: 10px 10px 30px 10px;
            margin: 20px 0%;
            background: linear-gradient(180deg, #f8fbff, #f1f6fb);
            text-align: center;
            -webkit-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
        }
    }

    @media (min-width: 1600px) {
        .story-desc>p {
            font-size: 16px;
        }

        .story-descb p {
            color: #867f7f;
            font-size: 16px;
        }
    }

/*====================================================
                       THOUGHT
======================================================*/

    .bg-parallax {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        /*background-attachment: fixed;*/
    }

    .thought-bg {
        height: 400px;
        background-image: url(../img/thought-bg.jpg);
    }

    .title-bar-thought p {
        color: #fff;
        font-size: 17px;
        padding-top: 50px;
    }

    .title-bar-thought h6 {
        text-align: center;
        font-style: italic;
        color: #fff;
    }

    .overlay-thought {
        position: absolute;
        width: 100%;
        height: 400px;
        background: rgba(33, 150, 243, 0.53);
    }

    #thought .title-bar {
        padding: 50px 0;
    }


/*====================================================
                       OFFER
======================================================*/

    #comp-offer {
        padding: 100px 0;
        position: relative;
        overflow: hidden;
    }

    #comp-offer:before {
        content: "";
        position: absolute;
        left: -160px;
        top: 120px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(87, 213, 255, 0.1), rgba(87, 213, 255, 0));
        pointer-events: none;
    }

    .desc-comp-offer h2,
    .desc-comp-offer>.heading-border-light {
        margin-left: 20px;
    }

    .desc-comp-offer-cont {
        margin-bottom: 10px;
        box-shadow: 0 16px 40px rgba(17, 35, 63, 0.16);
        border: 1px solid rgba(33, 150, 243, 0.1);
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        -webkit-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }

    .desc-comp-offer-cont:hover {
        margin-bottom: 10px;
        border-bottom: 5px solid #2196f3;
        margin-top: -5px;
        box-shadow: 0 24px 58px rgba(17, 35, 63, 0.2);
        cursor: pointer;
    }

    .desc-comp-offer .btn-green {
        margin: 15px;
    }

    .desc-comp-offer .btn-white {
        margin: 15px;
        padding: 10px 18px;
    }

    .thumbnail-blogs {
        position: relative;
        overflow: hidden;
    }

    .caption {
        position: absolute;
        top: 0;
        right: 0;
        background: rgba(33, 150, 243, 0.72);
        width: 100%;
        height: 100%;
        padding: 2%;
        display: none;
        text-align: center;
        color: #fff !important;
        z-index: 2;
    }

    .caption i {
        margin: 30% 4px;
        border: 2px solid #fff;
        cursor: pointer;
        font-size: 25px;
        border-radius: 50%;
        padding: 5px;
        transition: border 0.2s ease, font-size 0.2s ease;
    }

    .desc-comp-offer-cont h3 {
        padding: 30px 10px 0 10px;
        font-size: 18px;
        text-transform: none;
    }

    .desc-comp-offer-cont p {
        padding: 0 10px;
        font-size: 14px;
    }

    .desc-comp-offer-cont a {
        padding: 0px 10px;
    }

    @media (min-width: 768px) and (max-width: 991px) {

        #comp-offer {
            margin-left: 10px
        }

        #comp-offer .col-md-3:first-child {
            -ms-flex: 0 0 90%;
            flex: 0 0 90%;
            max-width: 90%!important;
        }

        #comp-offer .col-md-3 {
            -ms-flex: 0 0 33%;
            flex: 0 0 33%;
            max-width: 33%!important;
        }
    }

    @media (max-width: 767px) {
        .desc-comp-offer {
            margin-top: 20px;
        }
    }

    @media (max-width: 575px) {
        #comp-offer .col-sm-6 {
            -ms-flex: 0 0 70%;
            flex: 0 0 70%;
            max-width: 70%!important;
        }

        .desc-comp-offer {
            margin: 20px auto;
        }
    }

    @media (max-width: 420px) {
        #comp-offer .col-sm-6 {
            -ms-flex: 0 0 95%;
            flex: 0 0 95%;
            max-width: 95%!important;
        }
    }

    @media (min-width: 1600px) {
        .desc-comp-offer-cont p {
            padding: 0 10px;
            font-size: 16px;
        }
    }

/*====================================================
                      WHAT WE DO
======================================================*/

    .what-we-do {
        padding: 110px 0;
        position: relative;
        overflow: hidden;
    }

    .what-we-do:before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(115deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
            linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
        background-size: auto, 120px 120px, 120px 120px;
        opacity: 0.35;
        pointer-events: none;
    }

    .what-we-do h3 {
        padding-top: 20px;
        color: #fff;
        font-weight: 700;
    }

    .what-we-do .heading-border-light {
        background-color: #fff;
    }

    .what-we-do p {
        color: #fff;
    }

    .what-we-desc {
        padding: 20px;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.03);
        transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease;
        min-height: 100%;
    }

    .what-we-desc:hover {
        transform: translateY(-6px);
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(95, 243, 177, 0.4);
    }

    .what-we-desc i {
        float: left;
        font-size: 35px;
        margin-right: 20px;
        height: 95px;
        line-height: 45px;
    }

    .what-we-desc h6 {
        height: 30px;
        font-size: 18px;
        line-height: 30px;
    }

    .what-we-desc p {
        font-size: 14px;
    }

    @media (min-width: 992px) and (max-width: 1199px) {
        .what-we-desc i {
            float: left;
            font-size: 35px;
            margin-right: 20px;
            height: 125px;
            line-height: 45px;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {

        .what-we-do {
            padding: 110px 50px;
        }

        .what-we-do .col-md-4 {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%!important;
        }
    }

    @media (max-width: 575px) {
        .what-we-do .col-sm-6 {
            -ms-flex: 0 0 80%;
            flex: 0 0 80%;
            max-width: 80%!important;
            margin: auto;
        }
    }

    @media (max-width: 575px) {
        .what-we-do .col-sm-6 {
            -ms-flex: 0 0 95%;
            flex: 0 0 95%;
            max-width: 95%!important;
            margin: auto;
        }
    }

    @media (min-width: 1600px) {
        .what-we-desc p {
            font-size: 15px;
        }
    }

/*====================================================
                   SERVICE-HOME
======================================================*/

    #service-h {
        padding: 120px 0 50px;
    }

    .service-h-desc {
        padding: 50px 10px 90px 60px;
    }

    .service-h-desc>h6 {
        color: #2196f3;
        font-weight: 700;
    }

    .service-himg {
        background: #F0F0F0;
        height: 475px;
        margin-top: 30px;
        width: 70%;
    }

    .service-himg iframe {
        height: 370px;
        width: 130%;
        margin: 50px -60px 70px 65px;
        box-shadow: 3px 3px 8px 1px #505050;
        border: 1px solid #2196f3;
    }

    .service-h-tab {
        position: relative;
        margin: 20px 0;
    }

    .service-h-tab .nav-tabs>a {
        border-radius: 0;
        width: 190px;
        text-align: center;
        height: 55px;
        line-height: 40px;
        border: 1px solid #ddd;
    }

    .service-h-tab .nav-tabs>a.active {
        color: #fff;
        border: 1px solid #2196f3;
        background: #2196f3;
    }

    .service-h-tab .tab-content .tab-pane {
        padding: 20px 20px 0px 10px;
    }

    @media (min-width: 768px) and (max-width: 1199px) {
        .service-himg {
            background: #fff;
            height: 475px;
            margin: auto;
        }

        #service-h .col-md-6 {
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%!important;
        }

        .service-himg iframe {
            height: 370px;
            width: 100%;
            margin: 50px auto 70px auto;
            box-shadow: 3px 3px 8px 1px #505050;
            border: 1px solid #2196f3;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {

        .service-himg iframe {
            height: 370px;
            width: 100%;
            box-shadow: 3px 3px 8px 1px #505050;
            border: 1px solid #2196f3;
        }
    }

    @media (max-width: 767px) {

        #service-h {
            padding: 30px 0 0px;
        }

        .service-himg {
            background: #fff;
            height: 315px;
            width: 100%;
        }
        .service-himg iframe {
            height: 270px;
            width: 100%;
            margin: 50px auto 70px auto;
            box-shadow: 3px 3px 8px 1px #505050;
            border: 1px solid #2196f3;
        }

        .service-h-tab .nav-tabs>a {
            border-radius: 0;
            width: 100%;
            text-align: center;
            height: 55px;
            line-height: 40px;
            border: 1px solid #ddd;
        }
    }

    @media (max-width: 420px) {
        .service-himg iframe {
            height: 200px;
            width: 100%;
            margin: 50px auto 70px auto;
            box-shadow: 3px 3px 8px 1px #505050;
            border: 1px solid #2196f3;
        }

        .service-h-desc {
            padding: 50px 10px 90px 10px;
        }
    }
/*====================================================
                  PORTFOLIO / GALLERY
======================================================*/

    .portfolio-section,
    .gallery-section,
    .delivered-section {
        padding: 70px 0;
    }

    .portfolio-section {
        background: #f8fbff;
    }

    .portfolio-card {
        background: #fff;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }

    .portfolio-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
    }

    .portfolio-card img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .portfolio-body {
        padding: 24px;
    }

    .portfolio-body h4 {
        color: #222;
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .portfolio-body p {
        color: #666;
        line-height: 1.8;
        margin-bottom: 16px;
    }

    .portfolio-tag {
        display: inline-block;
        background: #e9f3ff;
        color: #2196f3;
        padding: 6px 12px;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .gallery-section {
        background: #fff;
    }

    .delivered-section {
        background: #f3f8fd;
    }

    .delivered-card {
        background: #fff;
        padding: 28px;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        border-left: 4px solid #2196f3;
    }

    .delivered-card h4 {
        color: #222;
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 14px;
    }

    .delivered-card p {
        color: #666;
        line-height: 1.9;
        margin-bottom: 8px;
    }

    .delivered-card a {
        color: #2196f3;
        font-weight: 700;
        word-break: break-word;
    }

    .gallery-grid > div {
        margin-bottom: 30px;
    }

    .gallery-item {
        display: block;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }

    .gallery-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
    }

    .gallery-item img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .gallery-item:hover img {
        transform: scale(1.04);
    }

    @media (max-width: 767px) {
        .portfolio-card img,
        .gallery-item img {
            height: 220px;
        }
    }


/*====================================================
                       CLIENT
======================================================*/

    #client {
        padding-bottom: 100px;
        background: #f0f0f0;
    }

    .client-cont {
        width: 400px;
        padding: 30px;
        background: #fff;
        margin: 0 auto;
        border-bottom: 5px solid #2196F3;
    }

    .client-cont img {
        height: 90px;
        width: 90px;
        margin-right: 35px;
        border-radius: 50%;
        float: left;
    }

    .client-cont h5 {
        padding-top: 10px;
        height: 45px;
        line-height: 45px;
    }

    .client-cont h6 {
        font-size: 14px;
        font-weight: 700;
        padding-bottom: 25px;
    }

    .client-cont i {
        font-size: 20px;
        color: #666;
    }

    .client-cont p {
        width: 400px;
        padding: 5px 30px;
    }

    @media (max-width: 991px) {
    .client-cont {
        width: 330px;
        padding: 30px;
        background: #fff;
        margin: 0 auto;
    }
        .client-cont p {
            width: 320px;
            padding: 5px 30px;
        }
    }

    @media (max-width: 767px) {
        .client-cont {
            width: 100%;
            padding: 30px;
            background: #fff;
            margin: 0 auto;
            margin-top: 20px;
        }

        .client-cont p {
            width: 100%;
            padding: 5px 30px;
        }
    }

    @media (max-width: 420px) {
        h5 {
            color: #2196f3;
            font-size: 16px;
            text-transform: uppercase;
        }
    }


/*====================================================
                   CONTACT-HOME
======================================================*/

    .contact-h-bg {
        background-image: url(../img/contact-bg.jpg);
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .contact-h-cont {
        margin: 60px 0;
        padding: 50px;
        background: rgba(33, 150, 243, 0.65);
    }

    .contact-h-cont input.form-control,
    .contact-h-cont textarea.form-control {
        border-radius: 0px;
    }

    .contact-h-cont button {
        background: #fff;
        color: #2196f3;
        margin-top: 10px;
        text-align: center;
    }

    .contact-h-cont button:hover {
        background: #2196f3;
        color: #fff;
    }



/*====================================================
                    FOOTER
======================================================*/

    .footer-ai {
        position: relative;
        overflow: hidden;
    }

    .footer-s1 .footer {
        position: relative;
        padding: 88px 0 70px;
        background: linear-gradient(180deg, rgba(4, 11, 24, 0.98), rgba(4, 11, 24, 1)), #081321;
    }

    .footer-ai__grid,
    .footer-ai__glow {
        position: absolute;
        pointer-events: none;
    }

    .footer-ai__grid {
        inset: 0;
        background-image:
            linear-gradient(rgba(87, 213, 255, 0.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(87, 213, 255, 0.08) 1px, transparent 1px);
        background-size: 90px 90px;
        opacity: 0.5;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.18));
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.18));
    }

    .footer-ai__glow {
        border-radius: 50%;
        filter: blur(12px);
    }

    .footer-ai__glow--one {
        width: 340px;
        height: 340px;
        top: -80px;
        left: -80px;
        background: radial-gradient(circle, rgba(87, 213, 255, 0.18), rgba(87, 213, 255, 0));
    }

    .footer-ai__glow--two {
        width: 420px;
        height: 420px;
        right: -140px;
        bottom: -180px;
        background: radial-gradient(circle, rgba(95, 243, 177, 0.14), rgba(95, 243, 177, 0));
    }

    .footer-s1 .footer .container,
    .footer-s1 .footer .row {
        position: relative;
        z-index: 1;
    }

    .footer-ai__intro {
        max-width: 760px;
        margin-bottom: 46px;
    }

    .footer-ai__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        color: #dff6ff;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.18em;
    }

    .footer-ai__eyebrow:before {
        content: "";
        width: 48px;
        height: 1px;
        background: linear-gradient(90deg, rgba(87, 213, 255, 0), rgba(87, 213, 255, 1));
    }

    .footer-ai__intro h2 {
        color: #fff;
        font-size: clamp(2em, 3vw, 3.2em);
        line-height: 1.15;
        text-transform: none;
        max-width: 900px;
        margin: 0;
    }

    .footer-ai__brand {
        margin-bottom: 18px;
    }

    .footer-s1 .footer .comp-desc-f p {
        margin-top: 10px;
        color: rgba(223, 246, 255, 0.76);
        font-size: 15px;
        line-height: 1.8;
    }

    .footer-ai__status {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: 22px;
        padding: 16px 18px;
        border: 1px solid rgba(87, 213, 255, 0.16);
        border-radius: 8px;
        background: rgba(8, 17, 35, 0.42);
        backdrop-filter: blur(10px);
    }

    .footer-ai__status span {
        width: 10px;
        height: 10px;
        margin-top: 7px;
        border-radius: 50%;
        background: #5ff3b1;
        box-shadow: 0 0 18px rgba(95, 243, 177, 0.8);
        flex: 0 0 auto;
    }

    .footer-ai__status p {
        margin: 0;
        color: rgba(255, 255, 255, 0.78);
        font-size: 14px;
    }

    .footer-s1 .heading-footer {
        text-align: left;
        position: relative;
        margin-bottom: 30px;
        padding-bottom: 8px;
    }

    .footer-s1 .heading-footer:after {
        left: 0;
        bottom: 0;
        height: 1px;
        width: 50px;
        content: " ";
        background: linear-gradient(90deg, #57d5ff, rgba(87, 213, 255, 0));
        position: absolute;
    }

    .footer-s1 .heading-footer h2 {
        color: #eef8ff;
        font-size: 18px;
        text-transform: none;
    }

    .footer-s1 .footer .link-list {
        margin-bottom: 0;
    }

    .footer-s1 .footer .link-list li {
        padding: 7px 0px;
        border-bottom: solid 1px rgba(255, 255, 255, 0.08);
    }

    .footer-s1 .footer .link-list li:last-child {
        padding-top: 0;
        border-top: none;
    }

    .footer-s1 .footer .link-list li a {
        color: rgba(223, 246, 255, 0.78);
        font-size: 15px;
        margin-bottom: 3px;
        display: inline-block;
        transition: transform 0.25s ease, color 0.25s ease;
    }

    .footer-s1 .footer .link-list a:hover {
        color: #57d5ff;
        transform: translateX(5px);
    }

    .footer-s1 .footer .link-list li small {
        color: #555;
        display: block;
    }

    .footer-s1 .footer .thumb-list>li {
        margin-bottom: 20px;
    }

    .footer-s1 .footer .thumb-list>li:before,
    .footer-s1 .footer .thumb-list>li:after {
        content: " ";
        display: table;
    }

    .footer-s1 .footer .thumb-list>li:after {
        clear: both;
    }

    .footer-s1 .footer .thumb-list>li img {
        float: left;
        width: 80px;
        height: auto;
        margin-right: 10px;
    }

    .footer-s1 .footer .thumb-list>li a {
        color: #777;
        display: block;
        padding-bottom: 8px;
    }

    .footer-s1 .footer .thumb-list>li a:hover {
        color: #bbb;
    }

    .footer-s1 .footer .thumb-list>li small {
        color: #555;
        font-size: 13px;
    }

    address.address-details-f,
    address.address-details-f a {
        color: rgba(223, 246, 255, 0.82);
        font-size: 15px;
        line-height: 1.9;
    }

    .footer-ai__contact-card {
        margin-top: 18px;
        margin-bottom: 18px;
        padding: 18px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.04);
    }

    .footer-ai__contact-card small,
    .footer-ai__contact-card span {
        display: block;
    }

    .footer-ai__contact-card small {
        color: #7ddfff;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        margin-bottom: 10px;
    }

    .footer-ai__contact-card strong {
        display: block;
        color: #fff;
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 8px;
        font-weight: 600;
    }

    .footer-ai__contact-card span {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        line-height: 1.7;
    }

    .social-icon-f li {
        float: left;
        margin: 10px 10px 0 0;
    }

    #footer-bottom {
        background-color: #050b16;
        padding: 24px 0;
        border-top: 1px solid rgba(87, 213, 255, 0.08);
    }

    #footer-copyrights p {
        margin: 0;
        font-size: 14px;
        font-weight: normal;
        color: rgba(223, 246, 255, 0.68);
        text-align: center;
    }

    #footer-copyrights p a {
        color: #8ee7ff;
    }

    #footer-copyrights p a:last-child {
        border-left: 1px solid rgba(255, 255, 255, 0.24);
        padding-left: 10px;
        margin-left: 10px;
    }

    .btn-back-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 22px;
        padding: 3px 15px;
        border-radius: 0;
        display: none;
    }

    .ai-chatbot {
        position: fixed;
        right: 20px;
        bottom: 84px;
        z-index: 1050;
        width: 64px;
    }

    .ai-chatbot__toggle {
        position: relative;
        width: 64px;
        height: 64px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(87, 213, 255, 0.24);
        border-radius: 50%;
        background: linear-gradient(180deg, rgba(7, 16, 33, 0.96), rgba(5, 11, 24, 0.98));
        color: #eef8ff;
        padding: 0;
        font-size: 24px;
        font-weight: 600;
        box-shadow: 0 18px 50px rgba(4, 11, 24, 0.35);
    }

    .ai-chatbot__toggle-dot {
        position: absolute;
        right: 8px;
        top: 9px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #5ff3b1;
        box-shadow: 0 0 18px rgba(95, 243, 177, 0.75);
        flex: 0 0 auto;
    }

    .ai-chatbot__panel {
        position: absolute;
        right: 0;
        bottom: 76px;
        width: min(360px, calc(100vw - 24px));
        border: 1px solid rgba(87, 213, 255, 0.18);
        border-radius: 8px;
        overflow: hidden;
        background: linear-gradient(180deg, rgba(6, 14, 28, 0.98), rgba(4, 11, 24, 0.99));
        box-shadow: 0 24px 70px rgba(4, 11, 24, 0.45);
        backdrop-filter: blur(12px);
    }

    .ai-chatbot__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 16px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .ai-chatbot__header small {
        display: block;
        margin-bottom: 4px;
        color: #7ddfff;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.14em;
    }

    .ai-chatbot__header strong {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
    }

    .ai-chatbot__close {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        background: transparent;
        color: #dff6ff;
    }

    .ai-chatbot__messages {
        max-height: 320px;
        overflow-y: auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ai-chatbot__message {
        max-width: 88%;
        padding: 12px 14px;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.6;
    }

    .ai-chatbot__message--bot {
        align-self: flex-start;
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.86);
        border: 1px solid rgba(87, 213, 255, 0.12);
    }

    .ai-chatbot__message--user {
        align-self: flex-end;
        background: #57d5ff;
        color: #081321;
    }

    .ai-chatbot__quick-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 16px 14px;
    }

    .ai-chatbot__quick-actions button {
        border: 1px solid rgba(87, 213, 255, 0.16);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.04);
        color: #dff6ff;
        padding: 8px 10px;
        font-size: 12px;
    }

    .ai-chatbot__form {
        display: flex;
        gap: 10px;
        padding: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .ai-chatbot__form input {
        flex: 1 1 auto;
        min-width: 0;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.04);
        color: #fff;
        padding: 10px 12px;
        font-size: 14px;
    }

    .ai-chatbot__form input::placeholder {
        color: rgba(223, 246, 255, 0.44);
    }

    .ai-chatbot__form button {
        border: 0;
        border-radius: 8px;
        background: #57d5ff;
        color: #081321;
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 600;
    }

    @media (min-width: 1600px) {
        address.address-details-f,
        address.address-details-f a {
            color: rgba(223, 246, 255, 0.82);
            font-size: 17px;
        }
    }

    @media (max-width: 767px) {
        .footer .container {
            width: 90%;
        }

        .footer-s1 .footer {
            padding: 72px 0 54px;
        }

        .footer-ai__intro {
            margin-bottom: 24px;
        }

        .footer-ai__intro h2 {
            font-size: 1.8em;
        }

        .footer-s1 .heading-footer h2 {
            color: #eef8ff;
            font-size: 18px;
            margin-top: 50px;
            text-transform: none;
        }

        .footer-s1 .heading-footer {
            text-align: left;
            position: relative;
            margin-bottom: 10px;
            padding-bottom: 8px;
        }

        .ai-chatbot {
            right: 12px;
            bottom: 76px;
            width: 60px;
        }

        .ai-chatbot__toggle {
            width: 60px;
            height: 60px;
            font-size: 22px;
        }

        .ai-chatbot__panel {
            width: min(360px, calc(100vw - 16px));
        }
    }

/*====================================================
               HOME REDESIGN EXCEPT HERO
======================================================*/

    :root {
        --home-ink: #142033;
        --home-muted: #667085;
        --home-line: #dce7ef;
        --home-soft: #f6f9fc;
        --home-panel: #ffffff;
        --home-blue: #2196f3;
        --home-green: #39b980;
        --home-navy: #111b2d;
    }

    #portfolio,
    #gallery,
    #service-h,
    #about,
    #comp-offer,
    #what-we-do,
    #story,
    #thought,
    #delivered-projects,
    #client,
    #contact-h,
    #insights {
        scroll-margin-top: 86px;
    }

    #portfolio,
    #gallery,
    #service-h,
    #about,
    #comp-offer,
    #what-we-do,
    #story,
    #delivered-projects,
    #client,
    #insights {
        padding: 88px 0;
    }

    #portfolio .container,
    #gallery .container,
    #service-h .container-fluid,
    #about .container,
    #about .container-fluid,
    #comp-offer .container-fluid,
    #what-we-do .container-fluid,
    #story .container,
    #story .container-fluid,
    #delivered-projects .container,
    #client .container,
    #insights .container-fluid {
        max-width: 1180px;
    }

    #service-h .container-fluid,
    #comp-offer .container-fluid,
    #what-we-do .container-fluid,
    #story .container-fluid,
    #insights .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    #portfolio,
    #about,
    #delivered-projects {
        background: var(--home-soft);
    }

    #gallery,
    #service-h,
    #comp-offer,
    #story,
    #client,
    #insights {
        background: #fff;
    }

    .title-bar {
        padding: 0 0 42px;
    }

    .title-bar h1,
    #service-h h3,
    #what-we-do h3,
    .story-desc h3,
    .contact-h-cont h3 {
        color: var(--home-ink);
        font-size: 34px;
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
    }

    .title-bar p {
        color: var(--home-muted);
        font-size: 16px;
        line-height: 1.75;
        padding-bottom: 0;
    }

    .title-bar .heading-border,
    .heading-border-light {
        width: 58px;
        height: 4px;
        border-radius: 999px;
        background: var(--home-green);
    }

    .title-bar .heading-border:after,
    .heading-border-light:after {
        display: none;
    }

    .portfolio-card,
    .gallery-item,
    .delivered-card,
    .client-cont,
    .desc-comp-offer-cont,
    .story-descb,
    .what-we-desc,
    .about .about-content-box {
        border-radius: 8px;
    }

    .portfolio-card,
    .delivered-card,
    .client-cont,
    .desc-comp-offer-cont,
    .story-descb {
        height: calc(100% - 30px);
        border: 1px solid var(--home-line);
        box-shadow: 0 16px 38px rgba(20, 32, 51, 0.08);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .portfolio-card:hover,
    .delivered-card:hover,
    .client-cont:hover,
    .desc-comp-offer-cont:hover,
    .story-descb:hover,
    .gallery-item:hover {
        transform: translateY(-6px);
        border-color: rgba(33, 150, 243, 0.28);
        box-shadow: 0 22px 52px rgba(20, 32, 51, 0.14);
    }

    .portfolio-card img,
    .gallery-item img,
    .desc-comp-offer-cont img,
    .story-descb img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        height: auto;
        object-fit: cover;
    }

    .portfolio-card {
        overflow: hidden;
        background: var(--home-panel);
        margin-bottom: 30px;
    }

    .portfolio-body {
        padding: 24px;
    }

    .portfolio-body h4,
    .delivered-card h4,
    .desc-comp-offer-cont h3,
    .story-descb h6 {
        color: var(--home-ink);
        font-size: 20px;
        line-height: 1.35;
        font-weight: 700;
        text-transform: none;
    }

    .portfolio-body p,
    .delivered-card p,
    .desc-comp-offer-cont p,
    .story-descb p,
    .client-cont p,
    .story-desc p,
    .about-content-box > p,
    .what-we-desc p {
        color: var(--home-muted);
        font-size: 15px;
        line-height: 1.72;
    }

    .portfolio-tag {
        border-radius: 999px;
        background: rgba(57, 185, 128, 0.12);
        color: #16734d;
        letter-spacing: 0;
        text-transform: none;
    }

    .gallery-grid {
        margin-top: 4px;
    }

    .gallery-item {
        position: relative;
        background: var(--home-panel);
        border: 1px solid var(--home-line);
    }

    .gallery-item img {
        aspect-ratio: 4 / 3;
        transition: transform 0.35s ease;
    }

    .gallery-item:hover img {
        transform: scale(1.035);
    }

    #service-h {
        overflow: hidden;
    }

    #service-h .row {
        align-items: center;
    }

    .service-himg {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 12px;
        background: var(--home-navy);
        border: 1px solid rgba(33, 150, 243, 0.28);
        border-radius: 8px;
        box-shadow: 0 24px 60px rgba(17, 27, 45, 0.16);
    }

    .service-himg iframe {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 6px;
        box-shadow: none;
    }

    .service-h-desc {
        padding: 24px 0 24px 42px;
    }

    .service-h-desc > p {
        color: var(--home-muted);
        font-size: 16px;
        line-height: 1.75;
    }

    .service-h-tab .nav-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        border: 0;
        margin-bottom: 14px;
    }

    .service-h-tab .nav-tabs > a {
        flex: 1 1 170px;
        width: auto;
        min-height: 48px;
        height: auto;
        line-height: 1.25;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 14px;
        border: 1px solid var(--home-line);
        border-radius: 8px;
        color: var(--home-ink);
        background: #fff;
        font-weight: 700;
    }

    .service-h-tab .nav-tabs > a.active {
        background: var(--home-blue);
        border-color: var(--home-blue);
        color: #fff;
    }

    .service-h-tab .tab-content .tab-pane {
        padding: 22px;
        border: 1px solid var(--home-line);
        border-radius: 8px;
        background: var(--home-soft);
    }

    .service-h-tab .tab-content .tab-pane p {
        margin: 0;
        color: var(--home-muted);
        font-size: 15px;
        line-height: 1.75;
    }

    .about .container-fluid {
        width: 100%;
    }

    .about .container-fluid .row {
        margin-left: 0;
        margin-right: 0;
    }

    .about .container-fluid .col-md-4 {
        padding: 12px;
        background: transparent;
    }

    .about .about-content-box {
        height: 100%;
        padding: 34px 26px;
        background: var(--home-panel);
        border: 1px solid var(--home-line);
        box-shadow: 0 16px 38px rgba(20, 32, 51, 0.08);
    }

    .about-content-box > i {
        width: 66px;
        height: 66px;
        line-height: 66px;
        margin-bottom: 18px;
        border-radius: 8px;
        background: rgba(33, 150, 243, 0.1);
        color: var(--home-blue);
        font-size: 30px;
    }

    .about-content-box > h5 {
        color: var(--home-ink);
        font-size: 20px;
        line-height: 1.35;
        font-weight: 700;
        padding: 0 0 10px;
    }

    #comp-offer:before,
    #story:before,
    .what-we-do:before {
        display: none;
    }

    #comp-offer,
    #insights {
        position: relative;
    }

    #comp-offer .row,
    #insights .row {
        align-items: stretch;
    }

    .desc-comp-offer h2 {
        color: var(--home-ink);
        font-size: 32px;
        line-height: 1.2;
        font-weight: 700;
        text-transform: none;
    }

    .desc-comp-offer h2,
    .desc-comp-offer > .heading-border-light {
        margin-left: 0;
    }

    .desc-comp-offer .btn-green,
    .desc-comp-offer .btn-white {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        margin: 8px 8px 0 0;
        border-radius: 6px;
        white-space: normal;
    }

    .desc-comp-offer-cont {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin-bottom: 30px;
    }

    .desc-comp-offer-cont:hover {
        margin-top: 0;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(33, 150, 243, 0.28);
    }

    .desc-comp-offer-cont h3 {
        padding: 22px 22px 0;
    }

    .desc-comp-offer-cont p {
        flex: 1 1 auto;
        padding: 0 22px;
    }

    .desc-comp-offer-cont a {
        display: inline-block;
        padding: 0 22px 22px;
        color: var(--home-blue);
        font-weight: 700;
    }

    .caption {
        background: rgba(17, 27, 45, 0.62);
    }

    .what-we-do {
        background: var(--home-navy);
    }

    .what-we-do h3,
    .what-we-do p {
        color: #fff;
    }

    .what-we-do .col-md-9 .row {
        row-gap: 22px;
    }

    .what-we-desc {
        display: flex;
        min-height: 100%;
        padding: 24px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.13);
    }

    .what-we-desc i {
        flex: 0 0 46px;
        float: none;
        width: 46px;
        height: 46px;
        line-height: 46px;
        margin: 0 16px 0 0;
        border-radius: 8px;
        background: rgba(57, 185, 128, 0.16);
        color: #80e0b4;
        font-size: 20px;
        text-align: center;
    }

    .what-we-desc h6 {
        height: auto;
        min-height: 0;
        color: #fff;
        font-size: 18px;
        line-height: 1.3;
        font-weight: 700;
    }

    .what-we-desc p {
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.76);
    }

    .story-himg img {
        width: 100%;
        aspect-ratio: 16 / 11;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 22px 52px rgba(20, 32, 51, 0.14);
    }

    .story-desc {
        padding: 10px 20px 24px 40px;
    }

    .story-descb {
        overflow: hidden;
        padding: 0 0 26px;
        margin: 36px 0 0;
        background: var(--home-panel);
        text-align: left;
    }

    .story-descb:hover {
        margin-top: 36px;
        border-bottom: 1px solid rgba(33, 150, 243, 0.28);
    }

    .story-descb h6,
    .story-descb p,
    .story-descb a {
        padding-left: 22px;
        padding-right: 22px;
    }

    .story-descb h6 {
        padding-top: 22px;
    }

    .story-descb a {
        color: var(--home-blue);
        font-weight: 700;
    }

    .overlay-thought {
        height: 320px;
        background: rgba(17, 27, 45, 0.72);
    }

    .thought-bg {
        height: 320px;
    }

    #thought .title-bar {
        padding: 54px 0;
    }

    .title-bar-thought p {
        max-width: 820px;
        padding-top: 26px;
        color: #fff;
        font-size: 19px;
        line-height: 1.7;
    }

    .title-bar-thought h6 {
        font-size: 15px;
        font-weight: 700;
    }

    .delivered-card {
        padding: 28px;
        border-left: 4px solid var(--home-green);
        background: var(--home-panel);
    }

    #client {
        padding-bottom: 88px;
    }

    .client-cont {
        position: relative;
        width: 100%;
        min-height: 100%;
        padding: 30px;
        border-bottom: 0;
        background: var(--home-panel);
    }

    .client-cont img {
        float: none;
        display: inline-block;
        width: 74px;
        height: 74px;
        margin: 0 18px 18px 0;
        vertical-align: middle;
        border: 3px solid rgba(33, 150, 243, 0.16);
        object-fit: cover;
    }

    .client-cont h5 {
        display: inline-block;
        height: auto;
        padding: 0;
        color: var(--home-ink);
        line-height: 1.35;
        vertical-align: middle;
        text-transform: none;
    }

    .client-cont h6 {
        margin-top: -8px;
        color: var(--home-green);
    }

    .client-cont i {
        color: var(--home-blue);
    }

    .client-cont p {
        width: 100%;
        padding: 8px 0 0;
    }

    .contact-h-bg {
        background-attachment: scroll;
    }

    .overlay-contact-h {
        background: rgba(17, 27, 45, 0.68);
    }

    .contact-h-cont {
        margin: 76px 0;
        padding: 34px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        background: rgba(17, 27, 45, 0.82);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    }

    .contact-h-cont h3 {
        color: #fff;
    }

    .contact-h-cont input.form-control,
    .contact-h-cont textarea.form-control {
        min-height: 46px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.95);
    }

    .contact-h-cont textarea.form-control {
        min-height: 118px;
    }

    .contact-h-cont button {
        border-radius: 6px;
        font-weight: 700;
    }

    @media (max-width: 991px) {
        #portfolio,
        #gallery,
        #service-h,
        #about,
        #comp-offer,
        #what-we-do,
        #story,
        #delivered-projects,
        #client,
        #insights {
            padding: 70px 0;
        }

        .title-bar h1,
        #service-h h3,
        #what-we-do h3,
        .story-desc h3,
        .contact-h-cont h3 {
            font-size: 29px;
        }

        .service-h-desc {
            padding: 34px 0 0;
        }

        #comp-offer {
            margin-left: 0;
        }

        #comp-offer .col-md-3:first-child,
        #comp-offer .col-md-3,
        #what-we-do .col-md-4 {
            flex: 0 0 50%;
            max-width: 50% !important;
        }

        #comp-offer .col-md-3:first-child,
        #insights .col-md-3:first-child {
            flex: 0 0 100%;
            max-width: 100% !important;
            margin-bottom: 22px;
        }

        .story-desc {
            padding: 32px 0 0;
        }
    }

    @media (max-width: 767px) {
        #portfolio,
        #gallery,
        #service-h,
        #about,
        #comp-offer,
        #what-we-do,
        #story,
        #delivered-projects,
        #client,
        #insights {
            padding: 56px 0;
        }

        .title-bar {
            padding-bottom: 30px;
        }

        .title-bar h1,
        #service-h h3,
        #what-we-do h3,
        .story-desc h3,
        .contact-h-cont h3 {
            font-size: 25px;
        }

        .title-bar p,
        .service-h-desc > p {
            font-size: 15px;
        }

        #portfolio .col-sm-6,
        #portfolio .col-sm-12,
        #gallery .col-sm-6,
        #comp-offer .col-sm-6,
        #what-we-do .col-sm-6,
        #insights .col-sm-6,
        #comp-offer .col-md-3,
        #what-we-do .col-md-4 {
            flex: 0 0 100%;
            max-width: 100% !important;
        }

        .portfolio-card,
        .gallery-item,
        .delivered-card,
        .client-cont,
        .desc-comp-offer-cont,
        .story-descb {
            height: auto;
        }

        .service-himg {
            padding: 8px;
        }

        .service-h-tab .nav-tabs > a {
            flex-basis: 100%;
            justify-content: flex-start;
            text-align: left;
        }

        .about .container-fluid {
            width: 100%;
        }

        .about .container-fluid .col-md-4 {
            margin: 0;
        }

        .what-we-desc {
            margin-bottom: 16px;
        }

        .overlay-thought,
        .thought-bg {
            height: auto;
            min-height: 320px;
        }

        .title-bar-thought p {
            font-size: 16px;
            padding-top: 12px;
        }

        .client-cont {
            margin-top: 18px;
        }

        .contact-h-cont {
            margin: 52px 0;
            padding: 24px;
        }
    }

    @media (max-width: 420px) {
        .title-bar h1,
        #service-h h3,
        #what-we-do h3,
        .story-desc h3,
        .contact-h-cont h3 {
            font-size: 23px;
        }

        .portfolio-body,
        .delivered-card,
        .client-cont,
        .service-h-tab .tab-content .tab-pane,
        .contact-h-cont {
            padding: 20px;
        }

        .what-we-desc {
            display: block;
        }

        .what-we-desc i {
            margin: 0 0 14px;
        }
    }

/*====================================================
               HOME PREMIUM REFINEMENT EXCEPT HERO
======================================================*/

    #portfolio,
    #gallery,
    #service-h,
    #about,
    #comp-offer,
    #what-we-do,
    #story,
    #delivered-projects,
    #client,
    #insights {
        position: relative;
        isolation: isolate;
    }

    #portfolio:before,
    #gallery:before,
    #about:before,
    #comp-offer:before,
    #story:before,
    #delivered-projects:before,
    #client:before,
    #insights:before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image:
            linear-gradient(rgba(20, 32, 51, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(20, 32, 51, 0.035) 1px, transparent 1px);
        background-size: 46px 46px;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 76%);
    }

    #portfolio,
    #delivered-projects {
        background:
            linear-gradient(180deg, #f8fbff 0%, #eef6fb 100%);
    }

    #gallery,
    #comp-offer,
    #story,
    #client,
    #insights {
        background:
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    }

    #service-h {
        background:
            linear-gradient(90deg, #111b2d 0%, #111b2d 43%, #ffffff 43%, #ffffff 100%);
    }

    #what-we-do {
        background:
            linear-gradient(135deg, #0f1b2f 0%, #122e41 56%, #173c3b 100%);
    }

    .title-bar h1,
    .desc-comp-offer h2,
    #service-h h3,
    #what-we-do h3,
    .story-desc h3,
    .contact-h-cont h3 {
        font-weight: 800;
    }

    .title-bar h1 {
        max-width: 860px;
    }

    .title-bar .heading-border,
    .heading-border-light {
        height: 3px;
        background: linear-gradient(90deg, #39b980, #2196f3);
    }

    #portfolio .title-bar,
    #gallery .title-bar,
    #delivered-projects .title-bar,
    #client .title-bar {
        text-align: left;
    }

    #portfolio .title-bar h1,
    #gallery .title-bar h1,
    #delivered-projects .title-bar h1,
    #client .title-bar h1,
    #portfolio .title-bar p,
    #gallery .title-bar p,
    #delivered-projects .title-bar p,
    #client .title-bar p {
        margin-left: 0;
        text-align: left;
    }

    #portfolio .title-bar .heading-border,
    #gallery .title-bar .heading-border,
    #delivered-projects .title-bar .heading-border,
    #client .title-bar .heading-border {
        margin-left: 0;
    }

    #portfolio .title-bar .col-md-12,
    #gallery .title-bar .col-md-12,
    #delivered-projects .title-bar .col-md-12,
    #client .title-bar .col-md-12 {
        display: grid;
        grid-template-columns: minmax(260px, 0.85fr) minmax(280px, 1.15fr);
        align-items: end;
        gap: 34px;
    }

    #portfolio .title-bar .heading-border,
    #gallery .title-bar .heading-border,
    #delivered-projects .title-bar .heading-border,
    #client .title-bar .heading-border {
        grid-column: 1;
        margin-bottom: 0;
    }

    #portfolio .title-bar p,
    #gallery .title-bar p,
    #delivered-projects .title-bar p,
    #client .title-bar p {
        grid-column: 2;
        grid-row: 1 / span 2;
        padding: 22px 24px;
        border-left: 3px solid rgba(57, 185, 128, 0.7);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.76);
        box-shadow: 0 16px 42px rgba(20, 32, 51, 0.07);
    }

    .portfolio-card,
    .gallery-item,
    .delivered-card,
    .client-cont,
    .desc-comp-offer-cont,
    .story-descb {
        position: relative;
        overflow: hidden;
        border-color: rgba(161, 184, 202, 0.42);
        box-shadow: 0 18px 50px rgba(20, 32, 51, 0.1);
    }

    .portfolio-card:after,
    .delivered-card:after,
    .client-cont:after,
    .desc-comp-offer-cont:after,
    .story-descb:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 4px;
        background: linear-gradient(90deg, #2196f3, #39b980, #f3b23f);
        opacity: 0.92;
    }

    .portfolio-card img,
    .desc-comp-offer-cont img,
    .story-descb img {
        filter: saturate(1.04) contrast(1.03);
    }

    .portfolio-card:hover img,
    .desc-comp-offer-cont:hover img,
    .story-descb:hover img {
        transform: scale(1.035);
    }

    .portfolio-card img,
    .desc-comp-offer-cont img,
    .story-descb img {
        transition: transform 0.4s ease, filter 0.4s ease;
    }

    .portfolio-body h4,
    .desc-comp-offer-cont h3,
    .story-descb h6 {
        margin-bottom: 10px;
    }

    .portfolio-body p,
    .desc-comp-offer-cont p,
    .story-descb p {
        margin-bottom: 18px;
    }

    .portfolio-tag {
        padding: 7px 13px;
        border: 1px solid rgba(57, 185, 128, 0.22);
        background: #effaf5;
    }

    .gallery-grid {
        align-items: stretch;
    }

    .gallery-grid > div:nth-child(2n) .gallery-item img {
        aspect-ratio: 4 / 3.35;
    }

    .gallery-grid > div:nth-child(3n) .gallery-item img {
        aspect-ratio: 4 / 2.75;
    }

    .gallery-item:before {
        content: "View Project";
        position: absolute;
        left: 18px;
        bottom: 18px;
        z-index: 2;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(17, 27, 45, 0.86);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .gallery-item:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 48%, rgba(17, 27, 45, 0.58));
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .gallery-item:hover:before,
    .gallery-item:hover:after {
        opacity: 1;
        transform: translateY(0);
    }

    #service-h .service-himg {
        transform: translateX(18px);
        border: 1px solid rgba(255, 255, 255, 0.16);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
            #111b2d;
    }

    .service-h-desc {
        border: 1px solid rgba(161, 184, 202, 0.42);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.92);
        padding: 38px 40px;
        box-shadow: 0 24px 60px rgba(20, 32, 51, 0.1);
    }

    .service-h-tab .nav-tabs > a {
        justify-content: flex-start;
        position: relative;
        overflow: hidden;
    }

    .service-h-tab .nav-tabs > a:before {
        content: "";
        width: 9px;
        height: 9px;
        margin-right: 9px;
        border-radius: 50%;
        background: #d0dde8;
        transition: background 0.25s ease;
    }

    .service-h-tab .nav-tabs > a.active:before {
        background: #fff;
    }

    .service-h-tab .tab-content .tab-pane {
        background:
            linear-gradient(135deg, rgba(33, 150, 243, 0.08), rgba(57, 185, 128, 0.08)),
            #f8fbff;
    }

    .about .about-content-box {
        text-align: left;
    }

    .about .about-content-box:hover {
        transform: translateY(-7px);
        box-shadow: 0 24px 58px rgba(20, 32, 51, 0.14);
    }

    .about-content-box > i {
        text-align: center;
    }

    #comp-offer .col-md-3:first-child,
    #insights .col-md-3:first-child {
        padding-right: 24px;
    }

    #comp-offer .col-md-3:first-child .heading-border-light,
    #insights .col-md-3:first-child .heading-border-light {
        margin-bottom: 24px;
    }

    #comp-offer .col-md-3:first-child,
    #insights .col-md-3:first-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 414px;
        border-radius: 8px;
        background:
            linear-gradient(145deg, rgba(17, 27, 45, 0.96), rgba(18, 46, 65, 0.96));
        color: #fff;
        box-shadow: 0 22px 58px rgba(17, 27, 45, 0.18);
    }

    #comp-offer .col-md-3:first-child h2,
    #insights .col-md-3:first-child h2 {
        color: #fff;
    }

    #comp-offer .col-md-3:first-child:before,
    #insights .col-md-3:first-child:before {
        content: attr(data-app-name);
        display: inline-flex;
        width: fit-content;
        margin-bottom: 16px;
        padding: 6px 10px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .desc-comp-offer .btn-white {
        border-color: rgba(255, 255, 255, 0.72);
        background: transparent;
        color: #fff;
    }

    .desc-comp-offer .btn-green {
        border-color: #39b980;
        background: #39b980;
        color: #081321;
    }

    .desc-comp-offer-cont {
        background: rgba(255, 255, 255, 0.96);
    }

    .desc-comp-offer-cont a {
        margin-top: auto;
    }

    .what-we-do .col-md-3 {
        padding-right: 34px;
    }

    .what-we-desc {
        backdrop-filter: blur(8px);
    }

    .what-we-desc:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(128, 224, 180, 0.44);
    }

    .story-desc {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100%;
    }

    .story-desc .title-but .btn-green {
        border-radius: 6px;
        background: #39b980;
        border-color: #39b980;
        color: #081321;
    }

    .delivered-card {
        border-left: 0;
    }

    .delivered-card p:first-of-type {
        display: inline-flex;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(33, 150, 243, 0.09);
        color: #155f99;
        font-weight: 800;
    }

    .delivered-card a {
        display: inline-flex;
        align-items: center;
        padding: 8px 10px;
        border-radius: 6px;
        background: #f3f9ff;
    }

    .client-cont {
        display: grid;
        grid-template-columns: 86px 1fr;
        align-items: center;
        gap: 0 16px;
    }

    .client-cont img {
        grid-row: 1 / span 2;
        margin: 0;
    }

    .client-cont h5,
    .client-cont h6 {
        display: block;
        margin: 0;
    }

    .client-cont i,
    .client-cont p {
        grid-column: 1 / -1;
    }

    .client-cont i {
        margin-top: 20px;
    }

    .contact-h-cont {
        backdrop-filter: blur(8px);
    }

    #insights .row {
        gap: 0;
    }

    #insights .desc-comp-offer-cont {
        min-height: 414px;
    }

    #insights .desc-comp-offer-cont h3 {
        font-size: 21px;
    }

    #insights .desc-comp-offer-cont p {
        font-size: 15px;
    }

    #insights .thumbnail-blogs:after {
        content: "Insight";
        position: absolute;
        left: 18px;
        top: 18px;
        z-index: 3;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        color: #111b2d;
        font-size: 12px;
        font-weight: 800;
    }

    @media (min-width: 992px) {
        #portfolio .row:not(.title-bar) > div:nth-child(1) .portfolio-card img {
            aspect-ratio: 16 / 11.5;
        }

        #portfolio .row:not(.title-bar) > div:nth-child(4) .portfolio-card,
        #portfolio .row:not(.title-bar) > div:nth-child(5) .portfolio-card {
            display: grid;
            grid-template-columns: minmax(210px, 0.85fr) 1fr;
        }

        #portfolio .row:not(.title-bar) > div:nth-child(4) .portfolio-card img,
        #portfolio .row:not(.title-bar) > div:nth-child(5) .portfolio-card img {
            height: 100%;
            aspect-ratio: auto;
        }

        #insights .col-md-3,
        #comp-offer .col-md-3 {
            padding-left: 12px;
            padding-right: 12px;
        }
    }

    @media (max-width: 991px) {
        #service-h {
            background: linear-gradient(180deg, #111b2d 0 38%, #fff 38% 100%);
        }

        #service-h .service-himg {
            transform: none;
            margin-bottom: 22px;
        }

        .service-h-desc {
            padding: 30px;
        }

        #portfolio .title-bar .col-md-12,
        #gallery .title-bar .col-md-12,
        #delivered-projects .title-bar .col-md-12,
        #client .title-bar .col-md-12 {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        #portfolio .title-bar p,
        #gallery .title-bar p,
        #delivered-projects .title-bar p,
        #client .title-bar p {
            grid-column: 1;
            grid-row: auto;
        }

        #comp-offer .col-md-3:first-child,
        #insights .col-md-3:first-child {
            min-height: auto;
            padding: 30px;
        }

        .client-cont {
            margin-bottom: 22px;
        }
    }

    @media (max-width: 767px) {
        #service-h {
            background: #fff;
        }

        .service-h-desc {
            padding: 24px;
        }

        #comp-offer .col-md-3:first-child,
        #insights .col-md-3:first-child {
            margin-bottom: 22px;
        }

        #comp-offer .col-md-3:first-child:before,
        #insights .col-md-3:first-child:before {
            margin-bottom: 12px;
        }

        .client-cont {
            grid-template-columns: 72px 1fr;
        }

        .client-cont img {
            width: 64px;
            height: 64px;
        }
    }

    @media (max-width: 420px) {
        #portfolio .title-bar p,
        #gallery .title-bar p,
        #delivered-projects .title-bar p,
        #client .title-bar p,
        .service-h-desc,
        #comp-offer .col-md-3:first-child,
        #insights .col-md-3:first-child {
            padding: 20px;
        }
    }

/*====================================================
               SERVICE SECTION FOCUSED REDESIGN
======================================================*/

    #service-h {
        padding: 110px 0;
        overflow: hidden;
        background:
            radial-gradient(circle at 20% 22%, rgba(57, 185, 128, 0.16), transparent 25%),
            radial-gradient(circle at 82% 72%, rgba(33, 150, 243, 0.14), transparent 28%),
            linear-gradient(105deg, #0d1728 0%, #111b2d 52%, #f7fbff 52%, #ffffff 100%);
    }

    #service-h:before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 54px 54px;
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 58%);
    }

    #service-h .container-fluid {
        position: relative;
        max-width: 1190px;
    }

    #service-h .row {
        align-items: center;
        min-height: 560px;
    }

    .service-showcase {
        position: relative;
        padding: 34px 22px 54px 0;
    }

    .service-showcase:before {
        content: "";
        position: absolute;
        left: -34px;
        top: 8px;
        width: 78%;
        height: 92%;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    }

    .service-showcase__label {
        position: absolute;
        left: 28px;
        top: 0;
        z-index: 4;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 10px 14px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        background: rgba(7, 15, 28, 0.78);
        color: rgba(255, 255, 255, 0.88);
        font-size: 13px;
        font-weight: 800;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    }

    .service-showcase__label span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #39b980;
        box-shadow: 0 0 0 6px rgba(57, 185, 128, 0.14);
    }

    #service-h .service-himg {
        position: relative;
        z-index: 2;
        width: min(660px, 100%);
        margin: 0;
        padding: 10px;
        transform: translateX(20px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
            #111b2d;
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.36);
    }

    #service-h .service-himg:before {
        content: "";
        display: block;
        height: 18px;
        margin: -2px 0 10px;
        border-radius: 6px;
        background:
            radial-gradient(circle at 12px 9px, #ff6b6b 0 4px, transparent 5px),
            radial-gradient(circle at 30px 9px, #f7c948 0 4px, transparent 5px),
            radial-gradient(circle at 48px 9px, #39b980 0 4px, transparent 5px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    }

    #service-h .service-himg iframe {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 6px;
        box-shadow: none;
    }

    .service-showcase__stats {
        position: absolute;
        right: 10px;
        bottom: 0;
        z-index: 3;
        display: grid;
        grid-template-columns: repeat(2, minmax(124px, 1fr));
        gap: 12px;
        width: min(330px, 78%);
    }

    .service-showcase__stats div {
        padding: 16px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.18);
    }

    .service-showcase__stats strong {
        display: block;
        color: #111b2d;
        font-size: 26px;
        line-height: 1;
        font-weight: 900;
    }

    .service-showcase__stats span {
        display: block;
        margin-top: 6px;
        color: #667085;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    #service-h .service-h-desc {
        position: relative;
        z-index: 2;
        padding: 42px;
        border: 1px solid rgba(161, 184, 202, 0.44);
        border-radius: 8px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.94));
        box-shadow: 0 34px 90px rgba(20, 32, 51, 0.14);
    }

    #service-h .service-h-desc:before {
        content: "";
        position: absolute;
        inset: 12px;
        z-index: -1;
        border-radius: 6px;
        background:
            linear-gradient(135deg, rgba(33, 150, 243, 0.08), transparent 42%),
            linear-gradient(315deg, rgba(57, 185, 128, 0.1), transparent 36%);
    }

    .service-eyebrow {
        display: inline-flex;
        align-items: center;
        margin-bottom: 14px;
        padding: 7px 12px;
        border-radius: 999px;
        background: #eef8ff;
        color: #155f99;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    #service-h .service-h-desc h3 {
        max-width: 500px;
        margin-bottom: 12px;
        color: #111b2d;
        font-size: 38px;
        line-height: 1.12;
        font-weight: 900;
    }

    #service-h .service-h-desc > p {
        max-width: 540px;
        color: #5f6f89;
        font-size: 16px;
        line-height: 1.8;
    }

    #service-h .heading-border-light {
        width: 70px;
        height: 4px;
        margin-bottom: 22px;
        background: linear-gradient(90deg, #39b980, #2196f3);
    }

    #service-h .service-h-tab {
        margin-top: 24px;
    }

    #service-h .service-h-tab .nav-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 14px;
    }

    #service-h .service-h-tab .nav-tabs > a {
        min-height: 56px;
        padding: 14px 16px;
        border: 1px solid #d7e4ef;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.9);
        color: #111b2d;
        font-weight: 900;
        box-shadow: 0 10px 24px rgba(20, 32, 51, 0.04);
    }

    #service-h .service-h-tab .nav-tabs > a:hover {
        border-color: rgba(33, 150, 243, 0.55);
        color: #155f99;
    }

    #service-h .service-h-tab .nav-tabs > a.active {
        border-color: #2196f3;
        background: linear-gradient(135deg, #2196f3, #1f7fd1);
        color: #fff;
        box-shadow: 0 16px 34px rgba(33, 150, 243, 0.24);
    }

    #service-h .service-h-tab .nav-tabs > a:before {
        flex: 0 0 auto;
        width: 10px;
        height: 10px;
        background: #c9d9e7;
    }

    #service-h .service-h-tab .tab-content .tab-pane {
        padding: 24px;
        border: 1px solid #cfe0ec;
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(57, 185, 128, 0.13)),
            #f4fbfd;
    }

    #service-h .service-h-tab .tab-content .tab-pane p {
        margin: 0;
        color: #42617c;
        font-size: 16px;
        line-height: 1.78;
    }

    .service-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
    }

    .service-actions .btn-green {
        min-height: 46px;
        padding: 12px 20px;
        border-radius: 6px;
        border-color: #39b980;
        background: #39b980;
        color: #081321;
        font-weight: 900;
        box-shadow: 0 16px 34px rgba(57, 185, 128, 0.22);
    }

    .service-actions__link {
        color: #155f99;
        font-weight: 900;
    }

    @media (max-width: 991px) {
        #service-h {
            padding: 76px 0;
            background:
                linear-gradient(180deg, #0d1728 0 44%, #ffffff 44% 100%);
        }

        #service-h .row {
            min-height: 0;
        }

        .service-showcase {
            padding: 24px 0 58px;
        }

        #service-h .service-himg {
            transform: none;
            width: 100%;
        }

        #service-h .service-h-desc {
            padding: 32px;
        }

        #service-h .service-h-desc h3 {
            font-size: 32px;
        }
    }

    @media (max-width: 767px) {
        #service-h {
            padding: 58px 0;
            background: linear-gradient(180deg, #0d1728 0 36%, #ffffff 36% 100%);
        }

        .service-showcase:before {
            left: 0;
            width: 100%;
        }

        .service-showcase__label {
            left: 18px;
        }

        .service-showcase__stats {
            position: relative;
            right: auto;
            bottom: auto;
            width: 100%;
            margin-top: 14px;
        }

        #service-h .service-h-desc {
            padding: 24px;
        }

        #service-h .service-h-desc h3 {
            font-size: 28px;
        }

        #service-h .service-h-tab .nav-tabs {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 420px) {
        .service-showcase__stats {
            grid-template-columns: 1fr;
        }

        #service-h .service-h-desc {
            padding: 20px;
        }

        #service-h .service-h-desc h3 {
            font-size: 25px;
        }
    }

/*====================================================
               WHAT WE DO SECTION FIX
======================================================*/

    #what-we-do {
        padding: 104px 0;
        background:
            radial-gradient(circle at 15% 18%, rgba(57, 185, 128, 0.18), transparent 24%),
            radial-gradient(circle at 88% 80%, rgba(33, 150, 243, 0.16), transparent 26%),
            linear-gradient(135deg, #0d1728 0%, #123146 58%, #123f3f 100%);
    }

    #what-we-do .container-fluid {
        max-width: 1180px;
    }

    #what-we-do .row {
        align-items: stretch;
    }

    #what-we-do .col-md-3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: 42px;
    }

    #what-we-do h3 {
        color: #fff;
        font-size: 34px;
        line-height: 1.15;
        font-weight: 900;
        padding-top: 0;
        margin-bottom: 14px;
    }

    #what-we-do .heading-border-light {
        width: 70px;
        height: 4px;
        margin-bottom: 22px;
        background: linear-gradient(90deg, #39b980, #2196f3);
    }

    #what-we-do .col-md-3 > p {
        max-width: 310px;
        color: rgba(255, 255, 255, 0.84);
        font-size: 16px;
        line-height: 1.75;
        font-weight: 600;
    }

    #what-we-do .col-md-9 > .row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
        margin: 0;
    }

    #what-we-do .col-md-9 > .row > [class*="col-"] {
        flex: none;
        max-width: none !important;
        width: auto;
        padding: 0;
    }

    #what-we-do .what-we-desc {
        display: block;
        min-height: 100%;
        padding: 28px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045));
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.16);
        backdrop-filter: blur(8px);
        transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    #what-we-do .what-we-desc:hover {
        transform: translateY(-6px);
        border-color: rgba(128, 224, 180, 0.48);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.07));
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
    }

    #what-we-do .what-we-desc i {
        float: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        line-height: 1;
        margin: 0 0 22px;
        border-radius: 8px;
        background: rgba(57, 185, 128, 0.17);
        color: #83e6b7;
        font-size: 23px;
    }

    #what-we-do .what-we-desc h6 {
        height: auto;
        min-height: 0;
        margin: 0 0 12px;
        color: #fff;
        font-size: 19px;
        line-height: 1.32;
        font-weight: 900;
    }

    #what-we-do .what-we-desc p {
        margin: 0;
        color: rgba(255, 255, 255, 0.76);
        font-size: 15px;
        line-height: 1.72;
    }

    @media (max-width: 991px) {
        #what-we-do {
            padding: 78px 0;
        }

        #what-we-do .col-md-3 {
            padding-right: 15px;
            margin-bottom: 30px;
        }

        #what-we-do .col-md-3,
        #what-we-do .col-md-9 {
            flex: 0 0 100%;
            max-width: 100% !important;
        }

        #what-we-do .col-md-3 > p {
            max-width: 680px;
        }

        #what-we-do .col-md-9 > .row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575px) {
        #what-we-do {
            padding: 60px 0;
        }

        #what-we-do h3 {
            font-size: 28px;
        }

        #what-we-do .col-md-9 > .row {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        #what-we-do .what-we-desc {
            padding: 24px;
        }
    }

/*====================================================
                    YANA IT HOMEPAGE
======================================================*/

:root {
    --yana-navy: #00172d;
    --yana-navy-deep: #001225;
    --yana-blue: #087cf0;
    --yana-blue-light: #26a2ff;
    --yana-text: #0d1b2c;
    --yana-muted: #5d6878;
    --yana-border: #dfe6ee;
    --yana-soft: #f7faff;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    background: #fff;
    color: var(--yana-text);
    font-family: "Inter", sans-serif;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body p,
body a,
body button,
body input,
body textarea {
    font-family: "Inter", sans-serif;
}

body h1,
body h2,
body h3,
body h4,
body h5 {
    text-transform: none;
}

.yana-header {
    position: relative;
    z-index: 1000;
    background: var(--yana-navy-deep);
    border-bottom: 1px solid rgba(60, 139, 220, 0.16);
}

.yana-header .navbar,
.yana-header .navbar.affix {
    min-height: 74px;
    padding: 0;
    background: rgba(0, 18, 37, 0.98);
    box-shadow: none;
}

.yana-header .navbar-brand {
    display: flex;
    align-items: center;
    height: 74px;
    margin-right: 50px;
    padding: 10px 0;
}

.yana-header .navbar-brand img {
    width: auto;
    max-width: 175px;
    max-height: 58px;
    object-fit: contain;
}

.yana-header .navbar-nav {
    align-items: center;
}

.yana-header .navbar-nav > li {
    height: 74px;
    line-height: 74px;
    border: 0;
}

.yana-header .navbar-nav > li:hover,
.yana-header .navbar-nav > li:active {
    border: 0;
    background: transparent;
}

.yana-header .navbar-nav > li > a {
    margin: 0;
    padding: 0 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.yana-header .navbar-nav > li > a:hover,
.yana-header .navbar-nav > li > a.active {
    color: var(--yana-blue-light) !important;
}

.yana-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-left: 24px;
    padding: 0 20px;
    border: 1px solid #178bf5;
    border-radius: 5px;
    background: linear-gradient(180deg, #158df8, #0876df);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0, 119, 239, 0.25);
}

.yana-nav-cta:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.yana-home p {
    color: var(--yana-muted);
}

.yana-hero {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 46%, rgba(0, 123, 255, 0.28), transparent 29%),
        linear-gradient(115deg, #00182f 0%, #00152a 58%, #001a34 100%);
}

.yana-home #home {
    height: auto;
    min-height: 570px;
}

.yana-hero:after {
    position: absolute;
    right: -130px;
    top: -170px;
    width: 760px;
    height: 760px;
    border: 1px solid rgba(18, 129, 235, 0.15);
    border-radius: 50%;
    content: "";
    box-shadow:
        0 0 0 70px rgba(10, 104, 205, 0.035),
        0 0 0 145px rgba(10, 104, 205, 0.025);
}

.yana-hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.24;
    background-image:
        linear-gradient(rgba(44, 129, 211, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 129, 211, 0.07) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, transparent, #000 62%, transparent);
}

.yana-hero .container,
.yana-hero .row {
    min-height: 570px;
}

.yana-hero .container {
    position: relative;
    z-index: 2;
}

.yana-kicker,
.yana-section-heading > span,
.yana-process-intro > span,
.yana-blog-intro > span,
.yana-contact-panel > div > span {
    display: block;
    margin: 0 0 12px;
    color: var(--yana-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.yana-hero h1 {
    max-width: 620px;
    margin: 0 0 20px;
    color: #fff;
    font-size: 45px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.yana-hero h1 span {
    display: block;
    color: var(--yana-blue);
}

.yana-hero-copy {
    max-width: 620px;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 15px;
    line-height: 1.75;
}

.yana-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.yana-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
    transition: 0.2s ease;
}

.yana-btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.yana-btn-primary {
    border-color: #158ef9;
    background: linear-gradient(180deg, #168efa, #0877e2);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 117, 239, 0.25);
}

.yana-btn-primary:hover {
    color: #fff;
}

.yana-btn-outline {
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
}

.yana-btn-outline:hover {
    border-color: var(--yana-blue);
    color: var(--yana-blue-light);
}

.yana-hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.yana-hero-metrics > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.yana-hero-metrics i {
    color: var(--yana-blue);
    font-size: 20px;
}

.yana-hero-metrics span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    line-height: 1.35;
}

.yana-hero-metrics strong {
    display: block;
    color: #fff;
    font-size: 11px;
}

.yana-hero-art {
    position: relative;
    width: 100%;
    height: 470px;
    overflow: visible;
    filter: drop-shadow(0 35px 45px rgba(0, 73, 151, 0.24));
}

.yana-hero-art img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 112%;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
}

.yana-section {
    padding: 76px 0;
}

.yana-section-heading {
    max-width: 680px;
    margin: 0 auto 44px;
    text-align: center;
}

.yana-section-heading > span {
    margin-bottom: 7px;
}

.yana-section-heading h2,
.yana-process-intro h2,
.yana-blog-intro h2,
.yana-contact-panel h2 {
    margin: 0 0 10px;
    color: var(--yana-text);
    font-size: 29px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.yana-section-heading p {
    margin: 0 auto;
    font-size: 13px;
}

.yana-services {
    background: #fff;
}

.yana-service-card {
    min-height: 245px;
    margin-bottom: 22px;
    padding: 27px;
    border: 1px solid var(--yana-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(20, 42, 72, 0.04);
    transition: 0.25s ease;
}

.yana-service-card:hover {
    border-color: rgba(8, 124, 240, 0.45);
    box-shadow: 0 15px 38px rgba(20, 42, 72, 0.09);
    transform: translateY(-4px);
}

.yana-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    margin-bottom: 19px;
    border-radius: 8px;
    background: #e8f3ff;
    color: var(--yana-blue);
    font-size: 22px;
}

.yana-service-card h3,
.yana-product-card h3,
.yana-process-grid h3,
.yana-blog-card h3 {
    margin: 0 0 10px;
    color: var(--yana-text);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
}

.yana-service-card p {
    display: -webkit-box;
    min-height: 65px;
    margin-bottom: 15px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.yana-service-card > a,
.yana-blog-card a {
    color: var(--yana-blue);
    font-size: 12px;
    font-weight: 700;
}

.yana-products {
    padding-top: 18px;
    background: #fff;
}

.yana-product-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.yana-product-card {
    min-height: 260px;
    padding: 18px 14px;
    border: 1px solid var(--yana-border);
    border-radius: 7px;
    background: #fff;
    text-align: center;
    box-shadow: 0 7px 20px rgba(20, 42, 72, 0.035);
}

.yana-product-card:first-child {
    border-bottom-color: var(--yana-blue);
}

.yana-product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    border-radius: 9px;
    font-size: 25px;
}

.yana-product-icon.mint { background: #dcf8ed; color: #19a97f; }
.yana-product-icon.blue { background: #e5f0ff; color: #2583ed; }
.yana-product-icon.cyan { background: #dff8f9; color: #18a5ad; }
.yana-product-icon.orange { background: #fff0db; color: #ef9a16; }
.yana-product-icon.coral { background: #ffebe5; color: #ec7454; }

.yana-product-card h3 {
    min-height: 43px;
    font-size: 13px;
}

.yana-product-card p {
    display: -webkit-box;
    min-height: 62px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.yana-product-card a {
    color: var(--yana-blue);
    font-size: 11px;
    font-weight: 700;
}

.yana-stat-band {
    padding: 26px 0;
    background:
        linear-gradient(90deg, rgba(0, 24, 48, 0.96), rgba(0, 19, 38, 0.98)),
        var(--yana-navy);
}

.yana-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.yana-stat-grid > div {
    position: relative;
    display: grid;
    grid-template-columns: 45px auto;
    align-items: center;
    padding: 0 26px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.yana-stat-grid > div:last-child {
    border-right: 0;
}

.yana-stat-grid i {
    grid-row: 1 / 3;
    color: var(--yana-blue);
    font-size: 29px;
}

.yana-stat-grid strong {
    color: #fff;
    font-size: 28px;
    line-height: 1;
}

.yana-stat-grid span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
}

.yana-process {
    background: #f8fbff;
}

.yana-process-intro {
    padding-right: 35px;
}

.yana-process-intro p,
.yana-blog-intro p {
    font-size: 12px;
    line-height: 1.6;
}

.yana-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.yana-process-grid:before {
    position: absolute;
    left: 9%;
    right: 9%;
    top: 36px;
    height: 1px;
    background: #d8e3ef;
    content: "";
}

.yana-process-grid article {
    position: relative;
    text-align: center;
}

.yana-process-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: #eaf4ff;
    color: var(--yana-blue);
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(25, 106, 190, 0.08);
}

.yana-process-grid b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -3px auto 10px;
    border-radius: 50%;
    background: #aeb7c2;
    color: #263343;
    font-size: 10px;
}

.yana-process-grid h3 {
    margin-bottom: 7px;
    font-size: 13px;
}

.yana-process-grid p {
    margin: 0 auto;
    padding: 0 9px;
    font-size: 10px;
    line-height: 1.55;
}

.yana-testimonials {
    padding-top: 52px;
    background: #fff;
}

.yana-testimonials .yana-section-heading {
    margin-bottom: 28px;
}

.yana-quote-card {
    min-height: 205px;
    margin-bottom: 20px;
    padding: 27px;
    border: 1px solid var(--yana-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(20, 42, 72, 0.06);
}

.yana-quote-card > i {
    margin-bottom: 15px;
    color: var(--yana-blue);
    font-size: 24px;
}

.yana-quote-card > p {
    min-height: 70px;
    font-size: 12px;
    line-height: 1.65;
}

.yana-quote-card > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.yana-quote-card img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.yana-quote-card span {
    color: var(--yana-muted);
    font-size: 10px;
}

.yana-quote-card strong {
    display: block;
    color: var(--yana-text);
    font-size: 11px;
}

.yana-blog {
    padding-top: 32px;
    background: #fff;
}

.yana-blog-intro {
    padding-right: 28px;
}

.yana-btn-light {
    min-height: 42px;
    margin-top: 12px;
    border-color: #8491a1;
    color: var(--yana-text);
}

.yana-btn-light:hover {
    border-color: var(--yana-blue);
    color: var(--yana-blue);
}

.yana-blog-card {
    min-height: 315px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--yana-border);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(20, 42, 72, 0.05);
}

.yana-blog-card > img {
    width: 100%;
    height: 135px;
    object-fit: cover;
}

.yana-blog-card > div {
    padding: 16px;
}

.yana-blog-card > div > span {
    display: block;
    margin-bottom: 6px;
    overflow: hidden;
    color: var(--yana-blue);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yana-blog-card h3 {
    min-height: 42px;
    font-size: 13px;
}

.yana-blog-card small {
    display: block;
    margin-bottom: 15px;
    color: #788391;
    font-size: 10px;
}

.yana-contact {
    padding: 70px 0;
    background: #f6f9fd;
}

.yana-contact-panel {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 55px;
    padding: 42px;
    border-radius: 10px;
    background: var(--yana-navy);
    box-shadow: 0 20px 60px rgba(0, 27, 55, 0.14);
}

.yana-contact-panel h2 {
    color: #fff;
}

.yana-contact-panel > div > p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.7;
}

.yana-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.yana-contact input,
.yana-contact textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 5px;
    outline: 0;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 12px;
}

.yana-contact input {
    height: 44px;
    padding: 0 14px;
}

.yana-contact textarea {
    margin-top: 12px;
    padding: 13px 14px;
    resize: vertical;
}

.yana-contact input::placeholder,
.yana-contact textarea::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.yana-contact button {
    border: 0;
    border-radius: 5px;
    background: var(--yana-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.yana-form-message {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 5px;
    background: rgba(226, 67, 67, 0.18);
    color: #ffd7d7;
    font-size: 11px;
}

.yana-form-message-success {
    background: rgba(45, 186, 120, 0.18);
    color: #c9ffe4;
}

.yana-footer {
    padding-top: 48px;
    background: #00172d;
    color: rgba(255, 255, 255, 0.72);
}

.yana-footer .row > div {
    margin-bottom: 34px;
}

.yana-footer-brand img {
    width: auto;
    max-width: 175px;
    max-height: 65px;
    margin-bottom: 18px;
    object-fit: contain;
}

.yana-footer p {
    color: rgba(255, 255, 255, 0.64);
    font-size: 11px;
    line-height: 1.7;
}

.yana-footer h3 {
    margin: 8px 0 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.yana-footer .row > div > a {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
}

.yana-footer a:hover {
    color: var(--yana-blue-light);
    text-decoration: none;
}

.yana-socials {
    display: flex;
    gap: 9px;
    margin-top: 18px;
}

.yana-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
}

.yana-contact-line {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.yana-contact-line i {
    width: 14px;
    color: #fff;
    font-size: 13px;
}

.yana-contact-line a {
    color: rgba(255, 255, 255, 0.66);
}

.yana-footer-bottom {
    padding: 17px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.yana-footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.56);
    font-size: 10px;
}

.yana-footer-bottom a {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.68);
}

.yana-footer-bottom b {
    color: rgba(255, 255, 255, 0.23);
}

.yana-footer #back-to-top {
    border-color: var(--yana-blue);
    background: var(--yana-blue);
    color: #fff;
}

@media (min-width: 1200px) {
    .yana-header .container,
    .yana-home .container,
    .yana-footer .container {
        max-width: 1170px;
    }
}

@media (max-width: 1199px) {
    .yana-header .navbar-nav > li > a {
        padding: 0 10px !important;
    }

    .yana-nav-cta {
        margin-left: 12px;
    }

    .yana-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .yana-product-card {
        min-height: 230px;
    }

    .yana-stat-grid > div {
        padding: 0 12px;
    }
}

@media (max-width: 991px) {
    .yana-header {
        position: relative;
        z-index: 1050;
    }

    .yana-header .navbar {
        min-height: 78px;
        padding: 0;
    }

    .yana-header .navbar > .container {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        padding: 0 18px;
    }

    .yana-header .navbar-brand {
        height: 78px;
        margin: 0;
        padding: 9px 0;
    }

    .yana-header .navbar-toggler {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 44px;
        padding: 0;
        border: 1px solid rgba(84, 174, 255, 0.55);
        border-radius: 7px;
        outline: 0;
        background: rgba(10, 111, 207, 0.09);
        box-shadow: none;
    }

    .yana-header .navbar-toggler:focus {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(21, 141, 248, 0.15);
    }

    .yana-menu-icon {
        position: relative;
        display: block;
        width: 23px;
        height: 18px;
    }

    .yana-menu-icon i {
        position: absolute;
        left: 0;
        display: block;
        width: 23px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        transition: top 0.22s ease, transform 0.22s ease, opacity 0.18s ease;
    }

    .yana-menu-icon i:nth-child(1) { top: 0; }
    .yana-menu-icon i:nth-child(2) { top: 8px; }
    .yana-menu-icon i:nth-child(3) { top: 16px; }

    .yana-header .navbar-toggler[aria-expanded="true"] {
        border-color: var(--yana-blue);
        background: rgba(8, 124, 240, 0.17);
    }

    .yana-header .navbar-toggler[aria-expanded="true"] .yana-menu-icon i:nth-child(1) {
        top: 8px;
        transform: rotate(45deg);
    }

    .yana-header .navbar-toggler[aria-expanded="true"] .yana-menu-icon i:nth-child(2) {
        opacity: 0;
    }

    .yana-header .navbar-toggler[aria-expanded="true"] .yana-menu-icon i:nth-child(3) {
        top: 8px;
        transform: rotate(-45deg);
    }

    .yana-header .navbar-collapse {
        flex-basis: calc(100% + 36px);
        width: calc(100% + 36px);
        max-height: calc(100vh - 78px) !important;
        margin: 0 -18px;
        padding: 12px 18px 22px;
        overflow-x: hidden;
        overflow-y: auto;
        border-top: 1px solid rgba(82, 164, 239, 0.2);
        background:
            radial-gradient(circle at 100% 0, rgba(14, 118, 219, 0.17), transparent 32%),
            #00172d;
        box-shadow: 0 22px 35px rgba(0, 10, 22, 0.28);
    }

    .yana-header .navbar-nav {
        float: none;
        align-items: stretch;
        width: 100%;
        margin: 0 !important;
    }

    .yana-header .navbar-nav > li {
        height: auto;
        min-height: 0;
        line-height: normal;
        border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    }

    .yana-header .navbar-nav > li > a {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0 4px !important;
        color: rgba(255, 255, 255, 0.82) !important;
        font-size: 13px;
        font-weight: 600;
    }

    .yana-header .navbar-nav > li > a:after {
        position: absolute;
        right: 4px;
        color: rgba(102, 185, 255, 0.58);
        font-family: FontAwesome;
        font-size: 12px;
        content: "\f105";
    }

    .yana-header .navbar-nav > li > a:hover,
    .yana-header .navbar-nav > li > a.active {
        padding-left: 10px !important;
        color: #fff !important;
    }

    .yana-header .navbar-nav > li > a:hover:before,
    .yana-header .navbar-nav > li > a.active:before {
        position: absolute;
        left: 0;
        width: 3px;
        height: 19px;
        border-radius: 99px;
        background: var(--yana-blue);
        content: "";
    }

    .yana-nav-cta {
        width: 100%;
        min-height: 48px;
        margin: 18px 0 0;
        border-radius: 6px;
        font-size: 13px;
        box-shadow: 0 12px 25px rgba(0, 104, 218, 0.24);
    }

    .yana-hero,
    .yana-home #home,
    .yana-hero .container,
    .yana-hero .row {
        min-height: auto;
    }

    .yana-hero {
        padding: 78px 0 48px;
    }

    .yana-hero h1 {
        font-size: 42px;
    }

    .yana-hero-art {
        width: 560px;
        max-width: 100%;
        height: 420px;
        margin: 40px auto 0;
    }

    .yana-process-intro,
    .yana-blog-intro {
        margin-bottom: 35px;
        padding-right: 0;
        text-align: center;
    }

    .yana-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 30px;
    }

    .yana-stat-grid > div {
        border-right: 0;
    }

    .yana-contact-panel {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

@media (max-width: 767px) {
    .yana-section {
        padding: 60px 0;
    }

    .yana-hero {
        padding-top: 62px;
    }

    .yana-hero h1 {
        font-size: 36px;
    }

    .yana-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yana-hero-art {
        height: 350px;
        transform: none;
    }

    .yana-hero-art img {
        left: 50%;
        width: 108%;
        transform: translate(-50%, -50%);
    }

    .yana-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yana-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yana-process-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .yana-process-grid:before {
        display: none;
    }

    .yana-process-grid p {
        max-width: 300px;
    }

    .yana-blog-intro {
        text-align: left;
    }

    .yana-contact-panel {
        padding: 28px;
    }

    .yana-form-grid {
        grid-template-columns: 1fr;
    }

    .yana-contact button {
        min-height: 44px;
    }

    .yana-footer-bottom .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .yana-header .navbar-brand img,
    .yana-footer-brand img {
        max-width: 130px;
    }

    .yana-hero h1 {
        font-size: 31px;
    }

    .yana-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .yana-hero-art {
        height: 310px;
    }

    .yana-hero-art img {
        width: 115%;
        transform: translate(-50%, -50%);
    }

    .yana-section-heading h2,
    .yana-process-intro h2,
    .yana-blog-intro h2,
    .yana-contact-panel h2 {
        font-size: 25px;
    }

    .yana-product-grid,
    .yana-stat-grid {
        grid-template-columns: 1fr;
    }

    .yana-product-card {
        min-height: 0;
    }

    .yana-stat-grid > div {
        max-width: 220px;
        width: 100%;
        margin: 0 auto;
    }

    .yana-contact-panel {
        padding: 24px 20px;
    }
}

/* Homepage enhancement: AI, carousels, process, blog and contact */
.yana-ai {
    position: relative;
    overflow: hidden;
    padding: 82px 0;
    background:
        radial-gradient(circle at 83% 20%, rgba(0, 133, 255, 0.23), transparent 28%),
        linear-gradient(125deg, #00152b, #002b50 58%, #001a35);
}

.yana-ai:before {
    position: absolute;
    right: 8%;
    top: 50%;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(63, 167, 255, 0.18);
    border-radius: 50%;
    content: "";
    transform: translateY(-50%);
    box-shadow: 0 0 0 55px rgba(32, 139, 241, 0.035), 0 0 0 110px rgba(32, 139, 241, 0.025);
}

.yana-ai-grid {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(33, 137, 230, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33, 137, 230, 0.08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, transparent, #000 65%, transparent);
}

.yana-ai .container {
    position: relative;
    z-index: 2;
}

.yana-ai-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 8px 13px;
    border: 1px solid rgba(62, 169, 255, 0.35);
    border-radius: 99px;
    background: rgba(22, 137, 242, 0.1);
    color: #62b9ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.yana-ai-label i {
    color: #3de0a4;
    font-size: 7px;
    box-shadow: 0 0 12px #3de0a4;
}

.yana-ai-copy h2 {
    max-width: 510px;
    margin-bottom: 18px;
    color: #fff;
    font-size: 38px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.yana-ai-copy > p {
    max-width: 520px;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.8;
}

.yana-ai-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-left: 35px;
}

.yana-ai-features article {
    display: flex;
    gap: 16px;
    min-height: 145px;
    padding: 24px;
    border: 1px solid rgba(117, 191, 255, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.065);
    backdrop-filter: blur(10px);
    transition: 0.25s ease;
}

.yana-ai-features article:hover {
    border-color: rgba(83, 180, 255, 0.45);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
}

.yana-ai-features article > i {
    display: flex;
    flex: 0 0 47px;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(28, 145, 250, 0.28), rgba(38, 201, 255, 0.13));
    color: #60bcff;
    font-size: 21px;
}

.yana-ai-features h3 {
    margin: 2px 0 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.yana-ai-features p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    line-height: 1.65;
}

.yana-products {
    position: relative;
    z-index: 2;
    overflow: visible;
    padding: 82px 0 92px;
    background: #fff;
}

.yana-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
}

.yana-heading-row .yana-section-heading {
    max-width: 700px;
    margin: 0;
    text-align: left;
}

.yana-carousel-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 9px;
    padding-bottom: 4px;
}

.yana-carousel-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid #d7e2ee;
    border-radius: 50%;
    outline: 0;
    background: #fff;
    color: #17304a;
    cursor: pointer;
    transition: 0.2s ease;
}

.yana-carousel-actions button:hover {
    border-color: var(--yana-blue);
    background: var(--yana-blue);
    color: #fff;
    box-shadow: 0 8px 20px rgba(8, 124, 240, 0.2);
}

.yana-product-carousel,
.yana-testimonial-carousel {
    position: relative;
    width: 100%;
}

.yana-product-carousel .owl-stage-outer,
.yana-testimonial-carousel .owl-stage-outer {
    overflow: hidden;
    padding: 10px 2px 26px;
}

.yana-product-carousel .owl-stage,
.yana-testimonial-carousel .owl-stage {
    display: flex;
}

.yana-product-carousel .owl-item,
.yana-testimonial-carousel .owl-item {
    display: flex;
    min-height: 100%;
}

.yana-product-card {
    position: relative;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-height: 300px;
    width: 100%;
    padding: 27px 24px 24px;
    overflow: hidden;
    border: 1px solid #e0e8f1;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(19, 47, 78, 0.055);
    transition: 0.25s ease;
}

.yana-product-card:after {
    position: absolute;
    right: -35px;
    bottom: -48px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(8, 124, 240, 0.055);
    content: "";
}

.yana-product-card:hover {
    border-color: rgba(8, 124, 240, 0.4);
    box-shadow: 0 18px 45px rgba(15, 74, 132, 0.12);
    transform: translateY(-5px);
}

.yana-product-number {
    position: absolute;
    right: 20px;
    top: 17px;
    color: #e4ebf3;
    font-size: 29px;
    font-weight: 800;
}

.yana-product-card .yana-product-icon {
    margin: 0 0 21px;
}

.yana-product-card h3 {
    min-height: 44px;
    font-size: 15px;
}

.yana-product-card p {
    min-height: 69px;
    margin-bottom: 20px;
    font-size: 11px;
    -webkit-line-clamp: 4;
}

.yana-product-card a {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 11px;
}

.yana-product-carousel .owl-dots,
.yana-testimonial-carousel .owl-dots {
    margin-top: 4px !important;
}

.yana-product-carousel .owl-dot span,
.yana-testimonial-carousel .owl-dot span {
    width: 7px !important;
    height: 7px !important;
    margin: 5px !important;
    background: #c9d5e2 !important;
}

.yana-product-carousel .owl-dot.active span,
.yana-testimonial-carousel .owl-dot.active span {
    width: 24px !important;
    border-radius: 99px !important;
    background: var(--yana-blue) !important;
}

.yana-stat-band {
    position: relative;
    z-index: 1;
    clear: both;
}

#portfolio.yana-stat-band {
    padding: 26px 0;
    isolation: auto;
    background:
        radial-gradient(circle at 80% 50%, rgba(16, 118, 220, 0.16), transparent 25%),
        linear-gradient(90deg, #001a34, #001328);
}

#portfolio.yana-stat-band:before {
    display: none;
}

.yana-process {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(8, 124, 240, 0.07), transparent 24%),
        #f6f9fd;
}

.yana-process .yana-section-heading {
    max-width: 720px;
    margin-bottom: 50px;
}

.yana-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.yana-process-grid:before {
    display: none;
}

.yana-process-grid article {
    position: relative;
    min-height: 240px;
    padding: 22px 20px;
    border: 1px solid #dce6f0;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    box-shadow: 0 10px 28px rgba(18, 53, 88, 0.055);
    transition: 0.25s ease;
}

.yana-process-grid article:hover {
    border-color: rgba(8, 124, 240, 0.38);
    box-shadow: 0 18px 38px rgba(18, 76, 133, 0.1);
    transform: translateY(-5px);
}

.yana-process-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 23px;
}

.yana-process-top > span {
    color: #8392a3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.yana-process-icon {
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #e8f4ff, #f3f9ff);
    font-size: 19px;
    box-shadow: none;
}

.yana-process-grid h3 {
    margin-bottom: 12px;
    font-size: 16px;
}

.yana-process-grid p {
    margin: 0;
    padding: 0;
    font-size: 11px;
    line-height: 1.7;
}

.yana-process-arrow {
    position: absolute;
    z-index: 3;
    right: -24px;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #dce6ef;
    border-radius: 50%;
    background: #f6f9fd;
    color: var(--yana-blue);
    transform: translateY(-50%);
}

.yana-process-note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding: 18px 22px;
    border: 1px solid #dce6ef;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
}

.yana-process-note > i {
    color: #1fb07c;
    font-size: 23px;
}

.yana-process-note span {
    flex: 1;
    color: #667386;
    font-size: 11px;
}

.yana-process-note strong {
    color: #172a40;
}

.yana-process-note > a {
    color: var(--yana-blue);
    font-size: 11px;
    font-weight: 700;
}

.yana-testimonials {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: #fff;
}

.yana-heading-row-center {
    align-items: center;
}

.yana-quote-card {
    position: relative;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-height: 290px;
    width: 100%;
    margin: 0;
    padding: 28px;
    border-radius: 13px;
    box-shadow: 0 12px 35px rgba(14, 49, 84, 0.07);
    transition: 0.25s ease;
}

.yana-testimonial-carousel .owl-item.center .yana-quote-card {
    border-color: rgba(8, 124, 240, 0.4);
    box-shadow: 0 20px 50px rgba(8, 87, 164, 0.14);
    transform: translateY(-7px);
}

.yana-quote-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 25px;
}

.yana-quote-rating span {
    margin-right: 7px;
    color: #16283c;
    font-size: 10px;
    font-weight: 700;
}

.yana-quote-rating i {
    color: #ffb51b;
    font-size: 10px;
}

.yana-quote-card > i.fa-quote-left {
    position: absolute;
    right: 27px;
    top: 22px;
    color: #e7f2fd;
    font-size: 42px;
}

.yana-quote-card > p {
    min-height: 105px;
    margin-bottom: 25px;
    color: #526174;
    font-size: 12px;
    line-height: 1.8;
}

.yana-quote-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #edf1f5;
}

.yana-quote-person img {
    flex: 0 0 52px;
    width: 52px !important;
    min-width: 52px;
    max-width: 52px;
    height: 52px;
    border: 3px solid #e8f3fe;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.yana-quote-person span {
    flex: 1;
    min-width: 0;
    font-size: 10px;
}

.yana-quote-person strong {
    margin-bottom: 3px;
    font-size: 12px;
    line-height: 1.35;
}

.yana-quote-person > i {
    flex: 0 0 auto;
    color: #1b9bff;
    font-size: 17px;
}

.yana-blog {
    padding: 90px 0;
    background: #f6f9fd;
}

.yana-blog-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--yana-blue);
    color: var(--yana-blue);
    font-size: 11px;
    font-weight: 700;
}

.yana-blog-all:hover {
    color: #005ebd;
    text-decoration: none;
}

.yana-blog-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 18px;
}

.yana-blog-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    min-height: 205px;
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 49, 81, 0.055);
    transition: 0.25s ease;
}

.yana-blog-card:hover {
    border-color: rgba(8, 124, 240, 0.35);
    box-shadow: 0 18px 42px rgba(16, 67, 116, 0.11);
    transform: translateY(-4px);
}

.yana-blog-card > img {
    width: 100%;
    height: 100%;
    min-height: 205px;
    object-fit: cover;
}

.yana-blog-featured {
    grid-row: 1 / 3;
    grid-template-columns: 1fr;
    min-height: 428px;
}

.yana-blog-featured > img {
    height: 230px;
    min-height: 230px;
}

.yana-blog-content {
    display: flex;
    flex-direction: column;
    padding: 22px !important;
}

.yana-blog-meta,
.yana-blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.yana-blog-meta {
    margin-bottom: 12px;
}

.yana-blog-meta span {
    color: var(--yana-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.yana-blog-meta small,
.yana-blog-footer small {
    color: #8793a2;
    font-size: 9px;
}

.yana-blog-card h3 {
    min-height: 0;
    margin-bottom: 10px;
    font-size: 14px;
}

.yana-blog-featured h3 {
    font-size: 20px;
}

.yana-blog-card p {
    display: -webkit-box;
    margin-bottom: 14px;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.yana-blog-footer {
    margin-top: auto;
}

.yana-blog-footer a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
}

.yana-contact {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background:
        radial-gradient(circle at 8% 20%, rgba(8, 124, 240, 0.08), transparent 25%),
        #fff;
}

.yana-contact-panel {
    position: relative;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 58px;
    padding: 55px;
    overflow: hidden;
    border: 1px solid rgba(78, 168, 255, 0.16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 95% 5%, rgba(23, 135, 240, 0.22), transparent 28%),
        linear-gradient(135deg, #00182f, #002743);
    box-shadow: 0 28px 75px rgba(0, 35, 68, 0.16);
}

.yana-contact-panel:before {
    position: absolute;
    left: -120px;
    bottom: -170px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(71, 171, 255, 0.12);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 65px rgba(35, 139, 234, 0.025);
}

.yana-contact-copy,
.yana-contact-form {
    position: relative;
    z-index: 2;
}

.yana-contact-copy h2 {
    max-width: 430px;
    margin-bottom: 17px;
    font-size: 36px;
}

.yana-contact-copy > p {
    max-width: 430px;
    margin-bottom: 29px;
    font-size: 12px;
    line-height: 1.8;
}

.yana-contact-benefits {
    display: grid;
    gap: 17px;
}

.yana-contact-benefits > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.yana-contact-benefits > div > i {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(40, 160, 255, 0.13);
    color: #51b2ff;
    font-size: 12px;
}

.yana-contact-benefits span {
    color: rgba(255, 255, 255, 0.56);
    font-size: 9px;
    line-height: 1.55;
}

.yana-contact-benefits strong {
    display: block;
    color: #fff;
    font-size: 11px;
}

.yana-contact-form {
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(12px);
}

.yana-contact-form .yana-form-grid {
    gap: 17px;
}

.yana-contact-form label {
    display: block;
    margin: 0;
}

.yana-contact-form label > span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 10px;
    font-weight: 600;
}

.yana-contact-form label > div {
    position: relative;
}

.yana-contact-form label > div > i {
    position: absolute;
    z-index: 2;
    left: 14px;
    top: 50%;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    transform: translateY(-50%);
}

.yana-contact-form .yana-textarea-wrap > i {
    top: 17px;
    transform: none;
}

.yana-contact-form .yana-form-wide {
    grid-column: 1 / -1;
}

.yana-contact-form input,
.yana-contact-form textarea {
    margin: 0;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(0, 18, 36, 0.34);
    transition: 0.2s ease;
}

.yana-contact-form input {
    height: 47px;
    padding: 0 14px 0 38px;
}

.yana-contact-form textarea {
    min-height: 105px;
    padding: 14px 14px 14px 38px;
}

.yana-contact-form input:focus,
.yana-contact-form textarea:focus {
    border-color: #269eff;
    background: rgba(0, 18, 36, 0.5);
    box-shadow: 0 0 0 3px rgba(38, 158, 255, 0.1);
}

.yana-contact-form > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: 18px;
    background: linear-gradient(180deg, #168ffa, #0876df);
    box-shadow: 0 12px 30px rgba(0, 107, 220, 0.24);
}

.yana-contact-form > button:hover {
    background: #168ffa;
}

.yana-contact-form > small {
    display: block;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.47);
    font-size: 9px;
    text-align: center;
}

@media (max-width: 1199px) {
    .yana-ai-features {
        margin-left: 0;
    }

    .yana-process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .yana-process-arrow {
        display: none;
    }
}

@media (max-width: 991px) {
    .yana-ai-copy {
        margin-bottom: 40px;
    }

    .yana-blog-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .yana-blog-featured {
        grid-row: auto;
    }

    .yana-contact-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .yana-ai,
    .yana-products,
    .yana-process,
    .yana-testimonials,
    .yana-blog,
    .yana-contact {
        padding: 65px 0;
    }

    .yana-ai-copy h2,
    .yana-contact-copy h2 {
        font-size: 30px;
    }

    .yana-heading-row {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 30px;
    }

    .yana-heading-row .yana-section-heading {
        text-align: left;
    }

    .yana-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yana-process-note {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .yana-process-note span {
        min-width: calc(100% - 45px);
    }

    .yana-blog-card,
    .yana-blog-featured {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .yana-blog-card > img,
    .yana-blog-featured > img {
        height: 210px;
        min-height: 210px;
    }

    .yana-contact-panel {
        padding: 32px;
    }
}

@media (max-width: 575px) {
    .yana-ai-features,
    .yana-process-grid,
    .yana-contact-form .yana-form-grid {
        grid-template-columns: 1fr;
    }

    .yana-ai-features article {
        min-height: 0;
    }

    .yana-process-grid article {
        min-height: 205px;
    }

    .yana-contact-panel {
        padding: 26px 20px;
    }

    .yana-contact-form {
        padding: 22px 16px;
    }

    .yana-contact-form .yana-form-wide {
        grid-column: auto;
    }
}

/* Premium AI studio visual refresh */
:root {
    --yana-violet: #7357ff;
    --yana-cyan: #3dd9ff;
    --yana-green: #35e2a2;
    --yana-ink: #07111f;
}

body {
    background: #f8fbff;
}

.yana-header {
    position: absolute;
    right: 0;
    left: 0;
    border-bottom-color: rgba(255, 255, 255, 0.09);
    background: transparent;
}

.yana-header .navbar,
.yana-header .navbar.affix {
    min-height: 82px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(4, 13, 27, 0.72);
    backdrop-filter: blur(18px);
}

.yana-header .navbar.affix {
    background: rgba(4, 13, 27, 0.94);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

.yana-header .navbar-brand,
.yana-header .navbar-nav > li {
    height: 82px;
    line-height: 82px;
}

.yana-header .navbar-nav > li > a {
    position: relative;
    padding: 0 14px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 12px;
}

.yana-header .navbar-nav > li > a:before {
    position: absolute;
    right: 14px;
    bottom: 23px;
    left: 14px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--yana-cyan), var(--yana-violet));
    content: "";
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.yana-header .navbar-nav > li > a:hover:before,
.yana-header .navbar-nav > li > a.active:before {
    transform: scaleX(1);
}

.yana-nav-cta {
    min-height: 44px;
    gap: 10px;
    border: 1px solid rgba(87, 186, 255, 0.5);
    border-radius: 10px;
    background: linear-gradient(135deg, #168ffb, #7357ff);
    box-shadow: 0 10px 30px rgba(64, 108, 255, 0.28);
}

.yana-hero,
.yana-home #home {
    min-height: 790px;
}

.yana-hero {
    --hero-shift-x: 0px;
    --hero-shift-y: 0px;
    padding-top: 82px;
    background:
        radial-gradient(circle at 78% 25%, rgba(115, 87, 255, 0.24), transparent 25%),
        radial-gradient(circle at 61% 64%, rgba(18, 159, 255, 0.22), transparent 31%),
        linear-gradient(125deg, #050d19 0%, #071528 53%, #08152d 100%);
}

.yana-hero:before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 72px 72px;
    content: "";
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.yana-hero:after {
    right: -250px;
    top: -260px;
    width: 850px;
    height: 850px;
    border-color: rgba(121, 148, 255, 0.11);
    box-shadow:
        0 0 0 90px rgba(92, 94, 255, 0.024),
        0 0 0 180px rgba(27, 166, 255, 0.018);
}

.yana-hero-grid {
    opacity: 0.5;
    background-image:
        radial-gradient(circle at center, rgba(101, 208, 255, 0.7) 0 1px, transparent 1.5px);
    background-size: 30px 30px;
    mask-image: radial-gradient(circle at 72% 48%, #000, transparent 38%);
}

.yana-hero .container,
.yana-hero .row {
    min-height: 708px;
}

.yana-hero .row > .col-lg-6:first-child {
    padding-top: 46px;
    padding-right: 34px;
    padding-bottom: 28px;
    padding-left: 30px;
}

.yana-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 8px 13px;
    border: 1px solid rgba(83, 192, 255, 0.24);
    border-radius: 99px;
    background: rgba(51, 147, 255, 0.08);
    color: #8dd4ff;
    font-size: 10px;
    letter-spacing: 0.13em;
}

.yana-kicker i {
    color: var(--yana-green);
    font-size: 6px;
    box-shadow: 0 0 12px var(--yana-green);
}

.yana-hero h1 {
    max-width: 650px;
    margin-bottom: 22px;
    font-size: clamp(48px, 4.5vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.yana-hero h1 span {
    display: inline;
    background: linear-gradient(95deg, #38c6ff, #7587ff 52%, #a775ff);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.yana-hero-copy {
    max-width: 590px;
    margin-bottom: 30px;
    color: rgba(225, 236, 255, 0.7) !important;
    font-size: 15px;
}

.yana-btn {
    min-height: 52px;
    padding: 0 24px;
    border-radius: 10px;
}

.yana-btn-primary {
    border-color: rgba(105, 180, 255, 0.35);
    background: linear-gradient(135deg, #129bf6, #6659f6);
    box-shadow: 0 14px 35px rgba(56, 94, 238, 0.3);
}

.yana-btn-outline {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(8px);
}

.yana-btn-outline > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-size: 8px;
}

.yana-hero-actions {
    margin-bottom: 25px;
}

.yana-hero-proof {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 35px;
}

.yana-proof-faces {
    display: flex;
}

.yana-proof-faces b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    margin-left: -7px;
    border: 2px solid #091629;
    border-radius: 50%;
    background: linear-gradient(135deg, #1ca8ff, #7659f6);
    color: #fff;
    font-size: 7px;
}

.yana-proof-faces b:first-child {
    margin-left: 0;
}

.yana-proof-faces b:nth-child(2) { background: linear-gradient(135deg, #25c595, #158ccf); }
.yana-proof-faces b:nth-child(3) { background: linear-gradient(135deg, #ff9a49, #e4528d); }
.yana-proof-faces b:last-child { background: #152a42; }

.yana-hero-proof > span:last-child {
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px;
    line-height: 1.5;
}

.yana-hero-proof strong {
    display: block;
    color: rgba(255, 255, 255, 0.86);
    font-size: 10px;
}

.yana-hero-proof i {
    margin-right: 4px;
    color: #ffc43d;
}

.yana-hero-metrics {
    max-width: 510px;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.yana-hero-metrics > div {
    display: block;
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, 0.11);
}

.yana-hero-metrics > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.yana-hero-metrics strong {
    margin-bottom: 5px;
    background: linear-gradient(90deg, #fff, #77c9ff);
    color: transparent;
    font-size: 23px;
    -webkit-background-clip: text;
    background-clip: text;
}

.yana-hero-metrics span {
    color: rgba(255, 255, 255, 0.46);
    font-size: 9px;
}

.yana-hero-art {
    height: 590px;
    filter: none;
    perspective: 1200px;
    transform: translate3d(calc(var(--hero-shift-x) * 0.16), calc(var(--hero-shift-y) * 0.16), 0);
    transition: transform 0.2s ease-out;
}

.yana-command {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 52%;
    width: 650px;
    overflow: hidden;
    border: 1px solid rgba(137, 196, 255, 0.22);
    border-radius: 18px;
    background: rgba(9, 24, 44, 0.9);
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.42), 0 0 70px rgba(49, 129, 255, 0.13);
    backdrop-filter: blur(20px);
    transform: translate(-50%, -50%) rotateY(-5deg) rotateX(2deg);
}

.yana-command-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
}

.yana-command-bar > span {
    display: flex;
    gap: 5px;
}

.yana-command-bar > span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff6e67;
}

.yana-command-bar > span i:nth-child(2) { background: #ffc553; }
.yana-command-bar > span i:nth-child(3) { background: #37d690; }

.yana-command-bar small {
    color: rgba(255, 255, 255, 0.38);
    font-size: 8px;
}

.yana-command-bar small i {
    margin-right: 5px;
}

.yana-command-bar > b {
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(53, 226, 162, 0.1);
    color: var(--yana-green);
    font-size: 6px;
    letter-spacing: 0.12em;
}

.yana-command-body {
    display: grid;
    grid-template-columns: 52px 1fr;
    min-height: 405px;
}

.yana-command-body aside {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 25px;
    padding-top: 17px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.32);
}

.yana-command-body aside > i {
    font-size: 12px;
}

.yana-command-body aside > i.active {
    color: #5ebdff;
    filter: drop-shadow(0 0 8px rgba(71, 175, 255, 0.7));
}

.yana-command-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    margin-bottom: 5px;
    border-radius: 8px;
    background: linear-gradient(135deg, #20a9ff, #7357ff);
    color: #fff;
    font-size: 12px;
}

.yana-command-main {
    padding: 19px;
}

.yana-command-heading,
.yana-command-heading > span,
.yana-command-stats article,
.yana-command-stats article > span,
.yana-chart-card > div:first-child,
.yana-prompt {
    display: flex;
    align-items: center;
}

.yana-command-heading {
    justify-content: space-between;
    margin-bottom: 16px;
}

.yana-command-heading small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 6px;
    letter-spacing: 0.12em;
}

.yana-command-heading strong {
    color: #f4f8ff;
    font-size: 16px;
}

.yana-command-heading > span {
    gap: 10px;
    color: rgba(255, 255, 255, 0.55);
}

.yana-command-heading > span b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #20a9ff, #7357ff);
    color: #fff;
    font-size: 8px;
}

.yana-command-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 10px;
}

.yana-command-stats article {
    gap: 10px;
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.yana-command-stats article > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(45, 162, 255, 0.11);
    color: #53baff;
    font-size: 12px;
}

.yana-command-stats article:nth-child(2) > i { background: rgba(53, 226, 162, 0.1); color: var(--yana-green); }
.yana-command-stats article:nth-child(3) > i { background: rgba(140, 103, 255, 0.12); color: #a18bff; }

.yana-command-stats article > span {
    align-items: flex-start;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.4);
    font-size: 6px;
}

.yana-command-stats strong {
    color: #fff;
    font-size: 13px;
    line-height: 1.25;
}

.yana-command-stats em {
    color: var(--yana-green);
    font-size: 6px;
    font-style: normal;
}

.yana-command-grid {
    display: grid;
    grid-template-columns: 1.65fr 0.85fr;
    gap: 10px;
}

.yana-chart-card,
.yana-ai-card {
    min-height: 183px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.028);
}

.yana-chart-card > div:first-child {
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.78);
    font-size: 8px;
}

.yana-chart-card small {
    color: rgba(255, 255, 255, 0.3);
    font-size: 6px;
}

.yana-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 112px;
    margin-top: 10px;
    padding: 0 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.045) 1px, transparent 1px, transparent 28px);
}

.yana-chart > span {
    width: 18px;
    height: var(--bar);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to top, #2769ee, #3fd1ff);
    box-shadow: 0 0 14px rgba(41, 165, 255, 0.18);
}

.yana-chart > span:last-child {
    background: linear-gradient(to top, #7257f6, #a674ff);
}

.yana-chart-labels {
    display: flex;
    justify-content: space-around;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.25);
    font-size: 5px;
}

.yana-ai-card {
    background:
        radial-gradient(circle at 100% 0, rgba(119, 86, 255, 0.23), transparent 45%),
        linear-gradient(145deg, rgba(27, 90, 157, 0.15), rgba(104, 67, 191, 0.12));
}

.yana-ai-card > span {
    display: inline-flex;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 99px;
    background: rgba(119, 89, 255, 0.12);
    color: #ae9aff;
    font-size: 6px;
    font-weight: 700;
    text-transform: uppercase;
}

.yana-ai-card p {
    margin: 28px 0 5px;
    color: #fff;
    font-size: 11px;
    line-height: 1.5;
}

.yana-ai-card small {
    display: block;
    color: var(--yana-green);
    font-size: 6px;
}

.yana-ai-card button {
    margin-top: 25px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #69c1ff;
    font-size: 7px;
}

.yana-prompt {
    gap: 8px;
    height: 38px;
    margin-top: 10px;
    padding: 0 7px 0 12px;
    border: 1px solid rgba(99, 179, 255, 0.2);
    border-radius: 9px;
    background: rgba(10, 35, 62, 0.7);
    color: #6ac4ff;
    font-size: 8px;
}

.yana-prompt > span {
    flex: 1;
    color: rgba(255, 255, 255, 0.32);
}

.yana-prompt > b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: linear-gradient(135deg, #20a9ff, #7357ff);
    color: #fff;
    font-size: 8px;
}

.yana-float-chip {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(151, 205, 255, 0.21);
    border-radius: 11px;
    background: rgba(9, 26, 47, 0.86);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(14px);
    animation: yanaFloat 5s ease-in-out infinite;
}

.yana-float-chip > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(53, 226, 162, 0.1);
    color: var(--yana-green);
}

.yana-float-chip span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 6px;
}

.yana-float-chip strong {
    display: block;
    color: #fff;
    font-size: 8px;
}

.yana-chip-ai {
    right: -10px;
    top: 74px;
}

.yana-chip-growth {
    left: -12px;
    bottom: 70px;
    animation-delay: -2.5s;
}

.yana-chip-growth > i {
    background: rgba(74, 170, 255, 0.12);
    color: #5bbcff;
}

.yana-orbit {
    position: absolute;
    border: 1px solid rgba(83, 172, 255, 0.12);
    border-radius: 50%;
}

.yana-orbit-one {
    inset: 30px -40px;
    animation: yanaSpin 24s linear infinite;
}

.yana-orbit-two {
    inset: 95px 20px;
    border-style: dashed;
    animation: yanaSpin 32s linear infinite reverse;
}

.yana-section {
    padding: 96px 0;
}

.yana-section-heading > span {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 99px;
    background: #eaf5ff;
    font-size: 9px;
    letter-spacing: 0.1em;
}

.yana-section-heading h2,
.yana-contact-panel h2 {
    font-size: clamp(30px, 3vw, 42px);
    letter-spacing: -0.045em;
}

.yana-services {
    background:
        radial-gradient(circle at 50% 0, rgba(77, 160, 255, 0.08), transparent 35%),
        #f8fbff;
}

.yana-service-card {
    position: relative;
    min-height: 270px;
    padding: 30px;
    overflow: hidden;
    border-color: #e5ebf3;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(25, 54, 87, 0.05);
}

.yana-service-card:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #1ca9ff, #7758ff);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.yana-service-card:hover:before {
    transform: scaleX(1);
}

.yana-service-card:hover {
    border-color: rgba(86, 141, 255, 0.3);
    box-shadow: 0 25px 60px rgba(29, 75, 130, 0.12);
    transform: translateY(-8px);
}

.yana-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: linear-gradient(135deg, #e4f6ff, #eeeaff);
    color: #347ff2;
}

.yana-service-card > a,
.yana-product-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.yana-ai {
    background:
        radial-gradient(circle at 80% 20%, rgba(115, 87, 255, 0.22), transparent 26%),
        radial-gradient(circle at 14% 80%, rgba(26, 164, 255, 0.15), transparent 30%),
        linear-gradient(125deg, #07111f, #0b1b35 58%, #101738);
}

.yana-ai-features article,
.yana-product-card,
.yana-process-grid article,
.yana-quote-card,
.yana-blog-card {
    border-radius: 16px;
}

.yana-ai-features article {
    border-color: rgba(135, 189, 255, 0.13);
    background: rgba(255, 255, 255, 0.05);
}

.yana-products,
.yana-testimonials,
.yana-contact {
    background: #fff;
}

.yana-process,
.yana-blog {
    background:
        linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at 10% 15%, rgba(73, 168, 255, 0.18), transparent 27%),
        #f4f8fd;
}

.yana-product-card:hover,
.yana-process-grid article:hover,
.yana-blog-card:hover {
    transform: translateY(-8px);
}

.yana-contact-panel {
    border-radius: 24px;
    background:
        radial-gradient(circle at 95% 5%, rgba(115, 87, 255, 0.27), transparent 30%),
        radial-gradient(circle at 8% 95%, rgba(25, 164, 255, 0.18), transparent 30%),
        linear-gradient(135deg, #071427, #0a2440);
}

.yana-footer {
    background:
        radial-gradient(circle at 15% 0, rgba(30, 132, 226, 0.12), transparent 25%),
        #050e1a;
}

.yana-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.yana-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes yanaFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@keyframes yanaSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1199px) {
    .yana-command {
        left: 48%;
        width: 570px;
    }

    .yana-chip-ai {
        right: -5px;
    }

    .yana-chip-growth {
        left: -20px;
    }
}

@media (max-width: 991px) {
    .yana-header {
        position: relative;
        background: #050f1d;
    }

    .yana-header .navbar,
    .yana-header .navbar.affix {
        min-height: 78px;
    }

    .yana-header .navbar-nav > li > a:before {
        display: none;
    }

    .yana-hero {
        padding: 70px 0 55px;
    }

    .yana-hero,
    .yana-home #home {
        min-height: auto;
    }

    .yana-hero h1 {
        max-width: 720px;
    }

    .yana-hero .row > .col-lg-6:first-child {
        padding-top: 24px;
        padding-right: 28px;
        padding-bottom: 0;
        padding-left: 28px;
    }

    .yana-hero-art {
        width: 680px;
        height: 560px;
        margin-top: 35px;
    }

    .yana-command {
        left: 50%;
        width: 630px;
    }
}

@media (max-width: 767px) {
    .yana-hero {
        padding-top: 55px;
    }

    .yana-hero h1 {
        font-size: 45px;
    }

    .yana-hero-art {
        width: 100%;
        height: 460px;
        margin-top: 25px;
    }

    .yana-command {
        width: 570px;
        transform: translate(-50%, -50%) scale(0.88);
    }

    .yana-chip-ai {
        right: 0;
        top: 25px;
    }

    .yana-chip-growth {
        left: 0;
        bottom: 25px;
    }
}

@media (max-width: 575px) {
    .yana-hero .row > .col-lg-6:first-child {
        padding-top: 18px;
        padding-right: 22px;
        padding-left: 22px;
    }

    .yana-hero h1 {
        font-size: 38px;
    }

    .yana-hero-copy {
        font-size: 13px;
    }

    .yana-hero-proof {
        align-items: flex-start;
        flex-direction: column;
    }

    .yana-hero-metrics {
        gap: 12px;
    }

    .yana-hero-metrics > div {
        padding-left: 12px;
    }

    .yana-hero-metrics strong {
        font-size: 19px;
    }

    .yana-hero-art {
        height: 345px;
    }

    .yana-command {
        width: 560px;
        transform: translate(-50%, -50%) scale(0.57);
    }

    .yana-float-chip {
        display: none;
    }

    .yana-orbit-one {
        inset: 5px -90px;
    }

    .yana-orbit-two {
        inset: 50px -30px;
    }

    .yana-section {
        padding: 70px 0;
    }

    .yana-service-card {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yana-float-chip,
    .yana-orbit,
    .yana-reveal {
        animation: none;
        transition: none;
    }

    .yana-reveal {
        opacity: 1;
        transform: none;
    }
}