/**
Theme Name: Astra
Theme URI: https://wpastra.com/
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Version: 4.13.4
Requires at least: 5.3
WC requires at least: 3.0
WC tested up to: 10.7.0
Tested up to: 7.0
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra
Domain Path: /languages
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
AMP: true

Astra WordPress Theme, Copyright 2020 WPAstra.
Astra is distributed under the terms of the GNU GPL.

Astra is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of.
Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/

Astra icon font is based on IcoMoon-Free vector icon by Keyamoon.
IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html)
Source: http://keyamoon.com/

Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility)
Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md )

Screenshot image is a collage of actual sites created using the Astra WordPress Theme.

Icons used in the Screenshot image are all licensed under Creative Commons ( CC BY 4.0 ) License ( https://fontawesome.com/license/free )
https://fontawesome.com/v5.15/icons/store?style=solid
https://fontawesome.com/v5.15/icons/shopping-cart?style=solid
https://fontawesome.com/v5.15/icons/pen-square?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid

Illustrations used in the Screenshot images are all licensed under Creative Commons ( CC0 ) License ( https://gumroad.com/l/humaaans )
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/standing-24.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/sitting-2.png

Hand-drawn illustrations used are created by Brainstorm Force and released under Creative Commons ( CC0 ) License.
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/girl-with-image-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/boy-with-code-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/web-browser.png

The same site as screenshot can be imported from here https://websitedemos.net/web-design-agency-08/.

For more information, refer to this document on how to create a page like in the screenshot - https://wpastra.com/docs/replicating-the-screenshot/.

Astra default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail)
Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later.

Astra local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader)
Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE )

/* Note: The CSS files are loaded from assets/css/ folder. */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.tisa-header {
      background: rgba(255, 255, 255, 0.08);
    width: 90%;
    position: fixed;
    height: 78px;
    top: 15px;
    border-radius: 50px;
    left: 71px;
    z-index: 9999;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}


.header-container{
       max-width: 1320px;
    margin: auto;
    margin-top: -35px;
    padding: 0px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img{
    height: auto;
    background: #1c1c1c;
    display: block;
    width: 149px !important;
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:42px;
}

.header-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.search-box{
    width:70px;
    height:38px;
    border-radius:999px;
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
}

.search-box i{
    color:#8a8a8a;
}

.search-box input{
    flex:1;
    border:none !important;
    outline:none;
    background:none !important;
    color:#fff;
}

.search-box input::placeholder{
    color:#777;
}

.search-box span {
    background: #1f1f1f;
    color: #aaa;
    padding: 4px 8px;
    font-size: 8px;
    border-radius: 6px;
    transform: translateX(-49px);
}

.strategy-btn {
    position: relative;
    background: #fff !important;
    color: #000 !important;
    text-decoration: none;
    height: 40px;
    padding: 0 24px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* ONLY BOTTOM BORDER */
.strategy-btn::after {
    content: "";
    position: absolute;
    left: 10%;
    bottom: 0px;
    width: 81%;
    height: 2px;
    background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
    background-size: 300%;
    animation: gradientMove 4s linear infinite;
    border-radius: 37px;
}

/* ANIMATION */
@keyframes gradientMove {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 300%;
    }
}



.strategy-btn:hover{
 color:black !important;
}

.mobile-toggle{
    display:none;
    background:none;
    border:none;
    color:#fff;
    font-size:24px;
}

@media (max-width: 1440px) {

    .tisa-header{
        width: calc(100% - 60px);
        max-width: 1320px;
        left: 50%;
        transform: translateX(-50%);
        top: 15px;
        height: 74px;
    }

    .header-container{
        max-width: 1240px;
        margin: 0 auto;
        height: 74px;
        padding: 0 24px;
    }

    .nav-menu{
        gap: 30px;
    }

    .header-right{
        gap: 16px;
    }

    .logo img{
        width: 135px;
    }

    .strategy-btn{
        padding: 0 20px;
        height: 38px;
        font-size: 14px;
    }

}

@media(max-width:768px){

    .strategy-btn{
        display:none;
    }

    .header-container{
        padding:16px 20px;
    }
}


.search-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.search-modal.active {
    display: block;
}

/* BLUR BG */
.search-overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(20px);
    background: rgba(0,0,0,0.6);
}

/* MAIN BOX */
.search-content {
    position: relative;
    width: 750px;
    margin: 60px auto;
    background: #0d0d0d;
    border-radius: 16px;
    border: 1px solid #222;
    overflow: hidden;
    color: #fff;
}

/* HEADER */
.search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #1f1f1f;
}

.search-header i {
    color: #888;
}

.search-header input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #fff;
    font-size: 16px;
    outline: none;
}

.shortcut {
    font-size: 12px;
    background: #1a1a1a;
    padding: 4px 8px;
    border-radius: 6px;
    color: #aaa;
}

.close-search {
    cursor: pointer;
    color:gray;
}

.close-search:hover{
color:white;
}

/* BODY */
.search-body {
    display: flex;
}

/* SIDEBAR */
.search-sidebar {
    width: 100%;
    padding: 10px;
    max-height: 400px; 
    overflow-y: auto;  
}

.sidebar-title {
    font-size: 12px;
    color: #666;
    margin: 10px;
}

/* ITEMS */
.search-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.search-item:hover {
    background: #1a1a1a;
}

.search-item .icon {
    width: 45px;
    height: 45px;
    background: #141414;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #aaa;
}

.search-item h4 {
    margin: 0;
    font-size: 16px;
}

.search-item span {
    font-size: 14px;
    color: #777;
}

.search-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 12px;
    color: #777;
    border-top: 1px solid #1f1f1f;
    background: #0d0d0d;
}

.search-footer span {
    opacity: 0.8;
}

.search-footer .esc {
    margin-left: auto;
}

/* MEGA MENU */
.mega-parent {
    position: relative;
}

/* DROPDOWN */
.mega-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 1000px;
    margin-top: 30px;
    background: #0b0b0b;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 999;
}

/* SHOW */
.mega-parent:hover .mega-dropdown {
    opacity: 1;
    visibility: visible;
    height:530px !important;
    margin-top:50px !important;
    width: 1200px !important;
    transform: translateX(-70%) translateY(0);
}

/* BOX */
.mega-box {
    display: flex;
    flex-direction: column;
    padding: 30px;
}

/* TOP SECTION */
.mega-top {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

/* LEFT */
.mega-left {
    display: flex;
    gap: 160px;
}

.col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.heading {
    font-size: 11px;
    color: #888;
    letter-spacing: 1px;
}

/* RIGHT CARD */
.mega-right {
    width: 525px;
    border: 1px solid gray;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 2px 0 20px rgba(0, 191, 255, 0.4), -8px 0 20px rgba(138, 43, 226, 0.4);
}

.mega-right a {
    position: relative;
    display: inline-block;
    border: 1px solid gray;
    padding: 10px;
    width:116px !important;
    border-radius: 50px;
    text-decoration: none;
}

.mega-right a i{
    color: #00cfff;
    font-size: 12px;
    transition: 0.3s;
}

/* hover effect */
.mega-right a:hover i{
    transform: translateX(5px);
    color: #fff;
}

/* bottom animated gradient border */
.mega-right a::after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: 0px;
    width: 75%;
    height: 2px;
    background: linear-gradient(90deg, #ff0000, #ff7a00, #ffe600, #00ff6a, #00cfff, #7a00ff, #ff00c8, #ff0000);
    background-size: 300% 100%;
    animation: borderMove 4s linear infinite;
}

/* animation */
@keyframes borderMove{
    0%{
        background-position: 0% 50%;
    }
    100%{
        background-position: 300% 50%;
    }
}


.mega-right .tag {
    font-size: 9px;
    background: #222;
    padding: 4px 8px;
    border-radius: 4px;
}

.mega-right h2 {
    font-size: 25px;
    margin-top: 83px;
    color: white !important;
}

.mega-right p {
    font-size: 18px;
    color: #aaa;
}

/* FOOTER */
.mega-footer {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.08);

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 12px;
    color: #777;
}


.mega-footer a {
  display: inline-block;
  padding: 10px 18px;
  color: #fff !important;
  text-decoration: none;
  border-radius: 50px;
  position: relative;
  background: rgba(255,255,255,0.05);
  transition: 0.3s;
  overflow: hidden;
}

/* 🔥 Animated 7 color bottom border */
.mega-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;

  background: linear-gradient(
    270deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff
  );

  background-size: 400% 400%;
  animation: moveBorder 5s linear infinite;
}

/* ✨ Hover Effect */
.mega-footer a:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

/* 🔁 Animation */
@keyframes moveBorder {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* PARENT */
.proof-parent {
    position: relative;
}

/* DROPDOWN */
.proof-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;                /* 🔥 center */
    transform: translateX(-50%); /* 🔥 perfect center */

    width: 1000px;
    background: linear-gradient(135deg, #0b0b0b, #111);
    border-radius: 20px;
    padding: 30px;
    display: none;
    box-shadow: 0 25px 80px rgba(0,0,0,0.7);
    z-index: 999;
}

/* SHOW */
.proof-parent:hover .proof-dropdown {
    display: block;
    width:1200px;
    margin-top: 50px;
    transform: translateX(-61%);
}

/* LAYOUT */
.proof-box {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

/* LEFT */
.proof-left ul {
    margin-left:10px;
    padding: 0;
}
.proof-left li {
    margin-bottom: 12px;
    color: #aaa;
}

/* HEADING */
.proof-heading {
    font-size: 12px;
    color: #666 !important;
    margin-bottom: 15px;
}

/* CENTER */
.proof-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}
.proof-metrics h2 {
    color: #fff !important;
    margin: 0;
}
.proof-metrics span {
    font-size: 12px;
    color: #777;
}

/* RIGHT */
.proof-right {
    background: rgba(255,255,255,0.05);
    border:1px solid gray;
    padding: 20px;
    border-radius: 16px;
    height: 260px;
    width: 400px;
}

.proof-tag {
    color: #00ff88;
    font-size: 10px;
}

.proof-mini {
    display: flex;
    height: 78px;
    width: 355px;
    gap: 10px;
    margin: 15px 0;
}
.proof-mini div {
    background: #111;
    padding: 10px;
    width: 173px;
    border-radius: 10px;
}

.proof-mini div p{
font-size: 13px;
}

.proof-btn {
    display: block;
    text-align: center;
    color: #000 !important;
    background: #fff;
    padding: 12px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

/* 🌈 Moving Gradient Bottom Border */
.proof-btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    border-radius: 0 0 30px 30px;

    background: linear-gradient(
        90deg,
        #ff0000,
        #ff7f00,
        #ffff00,
        #00ff00,
        #0000ff,
        #4b0082,
        #8f00ff,
        #ff0000
    );

    background-size: 300% 100%;
    animation: moveGradient 4s linear infinite;
}

/* 🔥 Animation */
@keyframes moveGradient {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* FOOTER */
.proof-footer {
    margin-top: 20px;
    border-top: 1px solid #222;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    color: #666;
}

.proof-footer a {
  display: inline-block;
  padding: 10px 18px;
  color: #fff !important;
  text-decoration: none;
  border-radius: 50px;
  position: relative;
  background: rgba(255,255,255,0.05);
  transition: 0.3s;
  overflow: hidden;
}


.proof-footer span{
 font-size:13px !important;
}

/* 🎨 7 Color Moving Border */
.proof-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;

  background: linear-gradient(
    270deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff
  );

  background-size: 400% 400%;
  animation: moveBorder 5s linear infinite;
}

/* ✨ Hover */
.proof-footer a:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

/* 🔁 Animation */
@keyframes moveBorder {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}



/* =========================
   INDUSTRIES DROPDOWN
========================= */

.industries-parent{
    position: relative;
}

.industries-dropdown{
    position: absolute;
    top: 75px;
    left: 50%;
    transform: translateX(-50%);
    width: 1280px;
    background: #050505;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 30px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
    z-index: 999;
    box-shadow:
        0 20px 80px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.industries-parent:hover .industries-dropdown{
       opacity: 1;
    visibility: visible;
    width: 1200px;
    transform: translateX(-52%);
}

.industries-container{
    display: flex;
    min-height: 380px;
    padding: 30px;
}


.industry-menu li{
    position:relative;
    overflow:visible;
}

.industry-menu li::after {
    content: "";
    position: absolute;
    left: 28px;
    bottom: -6px;
    width: 105px;
    height: 10px;
    background: linear-gradient(90deg, #ff0000, #ff7b00, #ffee00, #00ff55, #00e5ff, #3b82f6, #d946ef);
    background-size: 300% 100%;
    filter: blur(12px);
    opacity: 0.9;
    animation: rainbowMove 4s linear infinite;
}

@keyframes rainbowMove{
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}

/* =========================
   LEFT PANEL
========================= */

.industries-left{
    padding-right: 35px;
    border-right: 1px solid rgba(255,255,255,.08);
}

.industries-title{
    font-size: 11px;
    letter-spacing: 4px;
    color: #7d7d7d;
    margin-bottom: 28px;
}

.industries-left ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
}

.industries-left li{
    display: flex;
    align-items: center;
    gap: 12px;
    color:white;
    cursor: pointer;
    background:#000;
    border: 1px solid rgba(255,255,255,.08);
    width:160px !important;
    padding: 14px 16px;
    border-radius: 18px;
    transition: .3s;
    font-size: 14px;
}

.industries-left li i{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 1px solid #00E5FF;
    display: flex;
    color:#00E5FF;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.industries-left li:hover{
    color: #fff;
}

.industries-left li.active{
    background: #000;
    color: white;
   border: 1px solid rgba(255,255,255,.08);
}

.industries-left li.active i{
     border: 1px solid #00E5FF;
    color: #00E5FF;
}

/* =========================
   RIGHT PANEL
========================= */

.industries-right{
    flex: 1;
    padding-left: 30px;
}

.industry-image{
    width: 180px;
    margin-bottom: 18px;
}

.industries-right .tag{
    font-size: 10px;
    letter-spacing: 4px;
    color: #8c8c8c;
    margin-bottom: 20px;
}

.industries-right h2 {
    color: #fff !important;
    font-size: 25px;
    line-height: 1.1;
    font-weight: 400;
    max-width: 760px;
    margin-bottom: 30px;
}

.industry-features{
    padding-left: 22px;
    margin-bottom: 35px;
}

.industry-features li{
    color: #cfcfcf;
    font-size: 15px;
    margin-bottom: 16px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #111 !important;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 40px;
    font-weight: 600 !important;
    position: relative !important;
    overflow: hidden;
}

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

.industries-footer{
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 18px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,.02);
}

.industries-footer span{
    color: #7a7a7a;
    font-size: 13px !important;
    letter-spacing: 1px;
}

.industries-footer a {
  color: #fff;
  text-decoration: none;
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  transition: 0.3s;
  background: rgba(255,255,255,0.03);
}

/* 🔥 Moving Gradient Bottom Line */
.industries-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;

  background: linear-gradient(
    270deg,
    #3b01f8,
    #9911a4,
    #d01974,
    #f74910,
    #00ffff,
    #00ff00,
    #ffff00
  );

  background-size: 400% 400%;
  animation: moveBorder 5s linear infinite;
}

/* ✨ Hover Effect */
.industries-footer a:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.3);
}

/* 🔁 Animation */
@keyframes moveBorder {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}




/* main item */
.tisa-menu-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 0 14px;
    text-decoration:none;
    color:#bfbfbf;
    font-weight:500;
    transition:.3s;
    position:relative;
}

.tisa-menu-item::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background:linear-gradient(
        90deg,
        #00E5FF,
        #8B5CF6,
        #FF4ECD
    );
}

/* icon circle */
.tisa-menu-item i{
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #111;
    border: 1px solid rgba(255,255,255,0.08);

    color: #9aa0a6;
    font-size: 16px;

    transition: 0.3s;
}

/* hover */
.tisa-menu-item:hover{
    color: #fff;
}

.tisa-menu-item i{
    background: #1a1a1a;
    color: #00cfff;
    border-color: rgba(0,207,255,0.3);
}

/* main list */
.tisa-mega-list-v2{
    list-style: none;
    padding: 0;
    margin: 0;
}

/* list item */
.tisa-mega-list-v2 li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0;
    color: #cfcfcf;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 12px;
    cursor: pointer;
}

.tisa-mega-list-v2 li::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background:linear-gradient(
        90deg,
        #00E5FF,
        #8B5CF6,
        #FF4ECD
    );
}

.tisa-mega-list-v2 li i,
.tisa-mega-list-v2 li svg{
    transition: all 0.3s ease;
}

.tisa-mega-list-v2 li:hover{
    color: #fff;
}

tisa-list-icon{
    color:#00E5FF;
    fill: #00E5FF; /* SVG ke liye */
}

/* icon circle */
.tisa-list-icon{
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #9aa0a6;
    font-size: 14px;

    transition: 0.3s;
}

/* hover effect */
.tisa-mega-list-v2 li:hover{
    color: #fff;
}

.tisa-mega-list-v2 li .tisa-list-icon{
    background: rgba(255,255,255,0.08);
    color:#00E5FF;
    border-color:#00E5FF;
}


.systems-parent{
    position:relative;
}

.systems-dropdown{
    position:absolute;
    top:70px;
    left:50%;
    transform:translateX(-50%);
    width:1280px;
    background:#050505;
    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;
    padding:30px;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:999;
}

.systems-parent:hover .systems-dropdown {
    opacity: 1;
    visibility: visible;
    width: 1200px;
    transform: translateX(-42%);
}

.systems-label{
    color:#707070;
    font-size:11px;
    letter-spacing:3px;
    margin-bottom:25px;
}

.systems-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.system-card{
    background:#090909;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:22px;
    min-height:190px;
    position:relative;
    transition:.3s;
}

.system-card:hover{
    transform:translateY(-4px);
    border-color:#8b5cf6;
}

.status{
    display:inline-flex;
    align-items:center;
    padding:3px 9px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    font-size:8px;
    color:#d4d4d4;
}

.card-arrow{
    position:absolute;
    right:22px;
    top:22px;
    color:#777;
}

.system-card h3{
    color:#fff;
    font-size:16px;
    margin:6px 0 6px;
}

.system-card p{
    color:#a1a1a1;
    line-height:1.7;
    font-size:11px;
}

.metric{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#070707;
    padding:0px 14px;
    border-radius:50px;
    color:#8e8e8e;
    font-size:11px;
}

.dot{
    width:8px;
    height:8px;
    background:#00ff88;
    border-radius:50%;
}

.system-card::after{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    bottom:0;
    height:2px;
    border-radius:20px;
    background:linear-gradient(
    90deg,
    #00e5ff,
    #8b5cf6,
    #ff4ecd
    );
}

.systems-footer{
    margin-top:30px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.systems-footer span{
    color:#777;
    font-size:13px !important;
}

.systems-footer a{
    color:#fff;
    text-decoration:none;
}


/* NAV LINK */
.nav-item > a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ccc;
  text-decoration: none;
  font-size: 15px;
}

/* PARENT */
.capabilities-parent {
  position: relative;
}

/* DROPDOWN FULL WIDTH */
.capabilities-dropdown {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: 90vw;
  max-width: 1200px;

  background: #0b0b0c;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);

  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
}

/* SHOW */
.capabilities-parent:hover .capabilities-dropdown {
    margin-top: 40px;
    opacity: 1;
    visibility: visible;
    transform: translateX(-32%) translateY(0);
}

/* INNER */
.capabilities-container {
  padding: 35px;
}

/* GRID */
.capabilities-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

/* COLUMN */
.cap-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* HEADING */
.cap-heading {
  font-size: 11px;
  letter-spacing: 2px;
  color: #777;
}

/* LINKS */
.cap-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ddd;
  text-decoration: none;
  font-size: 16px !imporatnt;
  padding-bottom: 10px;
  position: relative;
}

/* ICON */
.cap-link i {
  width: 34px;
  height: 34px;
  background: #1a1a1a;
    color: #00cfff;
    border-color: rgba(0, 207, 255, 0.3) !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* GRADIENT LINE */
.cap-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;   /* 👈 yaha change */
  height: 2px;
  background: linear-gradient(90deg, #00e0ff, #ff00aa);
}

.cap-link:hover::after {
  width: 100%;
}

.cap-link:hover {
  color: #fff;
}

/* FOOTER */
.cap-footer {
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cap-footer span {
  font-size: 13px !important;
  color: #666;
}

.cap-footer a {
  position: relative;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  background: #0b0b0c; /* simple bg */
  overflow: hidden; /* IMPORTANT */
}

/* 🔥 MOVING 7-COLOR BOTTOM BORDER */
.cap-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 300%;
  height: 2px;

  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  );

  animation: capMove 3s linear infinite;
}

/* 🎬 ANIMATION */
@keyframes capMove {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-66%);
  }
}

/* ARROW ROTATE */
.nav-item a i:last-child {
  transition: 0.3s;
}

.capabilities-parent:hover a i:last-child {
  transform: rotate(180deg);
}

.platform-parent{
    position:relative;
}

.platform-dropdown{
    position:absolute;
    top:65px;
    width:100%;
    background:#050505;
    border:1px solid rgba(255,255,255,.08);
    border-radius:34px;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:all .3s ease;
    z-index:999;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.platform-parent:hover .platform-dropdown {
  width:1200px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-18%) translateY(0);
}

.platform-content{
    display:grid;
    grid-template-columns:1.2fr 1fr 480px;
    gap:50px;
    padding:32px;
}

.platform-title{
    color:#666;
    font-size:11px;
    letter-spacing:3px;
    margin-bottom:28px;
    text-transform:uppercase;
}

/* LEFT SIDE */

.platform-link{
    display:flex;
    gap:16px;
    position:relative;
    text-decoration:none;
    margin-bottom:23px;
    color:#fff;
}

.platform-link::before{
    content:"";
    position:absolute;
  left: -8px;
    right: 0;
    bottom: -7px;
    height:2px;
    background: linear-gradient(90deg, #00e0ff, #ff00aa);
}


.platform-link i{
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
  background: rgba(255, 255, 255, 0.08);
    color: #00E5FF;
    border:1px solid #00E5FF !important;
}


.platform-link h4{
    margin:0 0 6px;
    font-size:18px;
    font-weight:600;
    color:#fff;
}

.platform-link span{
    color:#8d8d8d;
    line-height:1.7;
    font-size:13px;
}

/* FRAMEWORK COLUMN */

.framework-link{
    display:flex;
    align-items:center;
    position:relative;
    gap:14px;
    text-decoration:none;
    color:#fff;
    margin-bottom:34px;
}

.framework-link::before{
    content:"";
    position:absolute;
    left: -3px;
    right: 0;
    bottom: -7px;
    height:2px;
    background: linear-gradient(90deg, #00e0ff, #ff00aa);
}

.framework-link i{
   background: rgba(255, 255, 255, 0.08) !important;
    color: #00E5FF !important;
    border:1px solid #00E5FF !important;
}

.framework-link > i:first-child{
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9c9c9c;
    background:#0c0c0c;
}

.framework-link span{
    flex:1;
    font-size:15px;
    font-weight:600;
}

.framework-link .bi-chevron-right{
    color:#777;
}

/* RIGHT PANEL */

.platform-path{
    background:#0b0b0b;
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    padding:30px;
    position:relative;
    overflow:hidden;
}

.platform-path::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size:24px 24px;
}

.platform-path>*{
    position:relative;
    z-index:2;
}

.platform-path h3{
    color:#fff;
    margin:0 0 28px;
    font-size:18px;
    font-weight:600;
}

.step{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:16px;
    color:#6d6d6d;
}

.step-number{
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color:#7d7d7d;
    flex-shrink:0;
}

.step.active .step-number{
    background:#fff;
    color:#111;
    border-color:#fff;
}

.step span{
    font-size:15px;
}

.step.active{
    color:#fff;
    font-weight:600;
}

.step.active::before{
    background:#fff;
}

.step.active b{
    width:8px;
    height:8px;
    background:#00d95f;
    border-radius:50%;
    display:block;
    margin-left:6px;
}

.platform-btn {
    position: absolute !important;
    left: 30px;
    bottom: 40px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #111 !important;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    overflow: hidden; /* important */
}

/* ANIMATED BORDER */
.platform-btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 300%;
    height: 3px;

    background: linear-gradient(
        90deg,
        red,
        orange,
        yellow,
        green,
        cyan,
        blue,
        violet,
        red
    );

    animation: moveGradient 4s linear infinite;
}

/* ANIMATION */
@keyframes moveGradient {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

.platform-btn i{
    font-size:18px;
}

/* FOOTER */

.platform-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 32px;
    border-top:1px solid rgba(255,255,255,.08);
    background:#090909;
}

.platform-footer span{
    color:#777;
    font-size:13px !important;
    letter-spacing:1px;
}

.platform-footer a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  background: #050505;

  position: relative;
  overflow: hidden;
  transition: 0.3s;
}

/* 🔥 moving gradient line */
.platform-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;

  background: linear-gradient(
    270deg,
    #9911a4,
    #d01974,
    #f74910,
    #3b01f8,
    #9911a4
  );

  background-size: 400% 400%;
  animation: platformMove 4s linear infinite;

  box-shadow: 0 0 8px rgba(215, 25, 116, 0.5);
}

@keyframes platformMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.platform-footer a:hover {
  background: rgba(255,255,255,0.05);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.2);
}


.nav-menu {
  display: flex;
  gap: 25px;
  background: #1c1c1c;
  padding: 12px 20px;
}

.nav-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ccc;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.nav-menu a i:last-child {
  font-size: 12px;
  opacity: 0.7;
}

.toc-box::-webkit-scrollbar {
    width: 8px;
}

.toc-box::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
}

.toc-box::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 20px;
}

.toc-box::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.28);
}




























.form-box::-webkit-scrollbar {
    width: 8px;
}

.form-box::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
}

.form-box::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 20px;
}

.form-box::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.28);
}





























































































































































.tisa-footer{
    position:relative;
    background:#000;
    color:#fff;
    padding:70px 60px 30px;
    border-radius:40px 40px 0 0;
    overflow:hidden;
}

.tisa-footer::before{
    content:'';
    position:absolute;
    left:-10%;
    right:-10%;
    bottom:-165px;
    height:650px;

    background:
    linear-gradient(
        to top,
        #ff4a1c 35%,
        #d14d68 28%,
        #6b3a78 55%,
        #1a143f 78%,
        transparent 100%
    );

    filter:blur(90px);
    pointer-events:none;
}

.tisa-footer>*{
    position:relative;
    z-index:2;
}

.footer-top{
    display:flex;
    justify-content:space-between;
    gap:40px;
    margin-bottom:60px;
}

.footer-brand img{
  width: 200px;
    margin-bottom: 30px;
    margin-top:8px;
}

.footer-brand p{
    max-width:650px;
    color:#d1d1d1;
    font-size:18px;
    line-height:1.8;
}

.social-links{
    display:flex;
    gap:12px;
    margin-top:30px;
}

@media (max-width: 768px){

    .social-links{
        flex-direction:row;
        gap:9px;
        align-items:flex-start;
    }

}

.social-links a{
    padding:12px 22px;
    border:1px solid #222;
    border-radius:999px;
    text-decoration:none;
    color:#fff;
}

.social-links a:hover{
 border:1px solid #365BB6;
}

.footer-rating{
    display:flex;
    gap:16px;
}

.rating-card{
    background:#0f0f0f;
    border:1px solid #222;
    height: 100px !important;
    padding:22px;
    border-radius:20px;
    min-width:180px;
}

@media (max-width: 768px){

    .rating-card{
        min-width: 160px;
        height: 85px !important;
        padding: 12px;
        border-radius: 16px;
    }

}

.tech{
    color: #9cff57;
    font-size: 14px;
}


.rating-card.white{
    background:#fff;
    color:#000;
}


.rating-card.white h4{
 color:black !important;
}

.office-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
    margin-bottom:60px;
}

.office-card{
    border:1px solid #222;
    border-radius:24px;
    padding:30px;
    background:#050505;
}

.office-card:hover{
    border:1px solid #365BB6;
    transform: translateY(-8px);
    transition: all 0.3s ease;
}

.office-card h3{
    font-size:20px;
    margin-bottom:15px;
}

.office-card h4{
    margin-bottom:20px;
}

.office-card p {
    color: #b8b8b8 !important;
    line-height: 1.8;
    font-size: 14px;
}

.footer-links{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    font-size: 16px;
    gap:40px;
    border-top:1px solid #222;
    padding-top:50px;
}

.footer-links h4{
    margin-bottom:25px;
    font-size:21px;
}

.footer-links a{
    display:block;
    color:#d4d4d4;
    text-decoration:none;
    margin-bottom:16px;
    transition:.3s;
}



.footer-links a:hover{
    color:white;
}

.footer-bottom{
    margin-top:60px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.footer-bottom a{
    color:#fff;
    text-decoration:none;
    margin-left:25px;
}

@media(max-width:1200px){

    .office-grid,
    .footer-links{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){

    .office-grid,
    .footer-links{
        grid-template-columns:1fr;
    }

    .tisa-footer{
        padding:40px 25px;
    }
}

.view-more-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#fff;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    padding-bottom:8px;
}

.view-more-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:50%;
    height:1px;
    background:rgba(255,255,255,.7);
}

@media (max-width: 768px){

    .view-more-link::after{
        width: 25%;
    }

}

@media (max-width: 768px) {
  .footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }
}


@media (max-width: 768px) {
  .footer-bottom a {
    margin: 0 10px;
    display: inline-block;
  }
  
  .footer-bottom div{
      transform: translateX(-56px);
  }
}

.view-more-link svg{
    width:12px;
    height:12px;
    margin-top:-2px;
}

.get-in-touch-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:140px;
    height:50px;
    background:#ffffff;
    color:#111111 !important;
    border-radius:999px;
    text-decoration:none;
    font-size:16px;
    font-weight:600;

    transition:all .3s ease;
}

.get-in-touch-btn:hover{
    background:#4a7dff;
    color:white !important;
}

















/* =========================
   BLOG SECTION WRAPPER
========================= */

.tisa-blog-section {
  padding: 80px 40px;
  background: #f4f6fb;
}

.blog-image {
  margin: 12px 0;
  border-radius: 10px;
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  transition: 0.3s;
}

.tisa-blog-card:hover .blog-image img {
  transform: scale(1.05);
}

.ast-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* =========================
   HEADING SECTION
========================= */

.tisa-blog-header {
  text-align: center;
  margin: 60px auto 50px;
}


@media (max-width: 768px) {
    .tisa-blog-header {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}

.tisa-blog-header h2{
font-size:50px;
animation:elastic 3s ease infinite;

}

@keyframes elastic{

0%,100%{

transform:scale(1);

}

25%{

transform:scaleX(1.04)
scaleY(.96);

}

50%{

transform:scaleX(.98)
scaleY(1.03);

}

75%{

transform:scale(1.01);

}

}


.tisa-blog-header h2::after {
  content: "";
  width: 70px;
  height: 3px;
  background: #ff7a18;
  display: block;
  margin: 10px auto 0;
  border-radius: 2px;
}

.tisa-blog-header p {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
  margin-top: 15px;
}

/* =========================
   BLOG CONTAINER
========================= */

    .tisa-blog-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .tisa-blog-container {
        margin-left: 0;
        grid-template-columns: 1fr;
        padding: 0 15px;
        gap: 20px;
    }
}

/* =========================
   BLOG CARD
========================= */

.tisa-blog-card {
  width:100%;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: 0.3s ease;
  border-top: 3px solid #FF6A00;
  border-bottom: 3px solid #03072e;
}

.tisa-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}


.blog-img img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: 0.4s ease;
}

.tisa-blog-card:hover .blog-img img {
  transform: scale(1.05);
}

.blog-category {
        position: absolute;
    left: 16px;
    bottom: 0px;
    z-index: 10;
    background: rgba(35, 35, 35, .9);
    color: #fff;
    padding: 5px 12px !important;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

.blog-category a {
    color:white;
    font-weight: 800;
    text-decoration: none;
}

.blog-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
}

.blog-author-date{
    display:flex;
    flex-direction:column;
}

.author-name1{
    font-size:15px;
    font-weight:600;
    color:#FF6A00;
}

.post-date{
    font-size:11px;
    font-weight: bold;
    margin-top:4px;
}

.blog-arrow{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#03072e;
    color:#fff;
    text-decoration:none;
    display:flex;
    align-items:center;
     line-height:1;
    justify-content:center;
    font-size:22px;
    font-weight:700;
}



.blog-arrow:hover{
    transform:translateX(3px);
    color:white !important;
}


.blog-content {
  padding: 22px;
}


.blog-content h3 a{
  font-size: 15px;
  margin-bottom: 12px;
  font-weight: bold;
  line-height: 1.1;
}


.blog-content h3{
 line-height:0.9;
}



/* =========================
   RESPONSIVE DESIGN
========================= */

@media (max-width: 921px) {

  .tisa-blog-section {
    padding: 60px 20px;
  }

  .tisa-blog-card {
    width: 100%;
  }

  .blog-img img {
    height: 200px;
  }

  .tisa-blog-header h2 {
    font-size: 26px;
  }

  .tisa-blog-header p {
    font-size: 14px;
    padding: 0 10px;
  }
}



.tisa-pagination {
  margin-top: 40px;
}

.tisa-pagination ul {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
}

.tisa-pagination li a,
.tisa-pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: #111;
  color: #aaa;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

/* ACTIVE PAGE */
.tisa-pagination .current {
  background: linear-gradient(
    90deg,
    #3b01f8,
    #9911a4,
    #d01974,
    #f74910
  );
  color: #fff;
}

/* HOVER */
.tisa-pagination a:hover {
  background: #1a1a1a;
  color: #fff;
}

/* NEXT BUTTON */
.tisa-pagination .next {
  background: #111;
  color: #fff;
}








/* =========================
   PAGE BACKGROUND
========================= */

body.single {
  background: #f4f6fb;
}

.tisa-content h1 {
  font-size: 34px;
  color: #03072e;
  margin-bottom: 15px;
  line-height: 1.3;
  font-weight: 700;
}

.tisa-content p {
  font-size: 16px;
  line-height: 1.9;
  color:white !important;
  margin-bottom: 18px;
}

.tisa-content h2 {
  font-size: 30px;
  margin-bottom: 15px;
}

.tisa-content h3 {
  font-size: 23px;
  margin-bottom: 12px;
  color: mediumpurple !important;
  margin-top: 25px;
}

.tisa-content img {
  max-width: 100%;
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.tisa-content a {
  color:deeppink;
  font-weight: 600;
  text-decoration: none;
}

.tisa-content ul,
.tisa-content ol {
  margin-left: 20px;
  margin-bottom: 15px;
}

.tisa-content li {
  margin-bottom: 8px;
}

.tisa-content blockquote {
  border-left: 4px solid #ff7a18;
  background: transparent !important;
  padding: 15px 20px;
  margin: 20px 0;
  font-style: italic;
}

.tisa-content hr {
  display: none !important;
}


.tisa-toc {
    position: sticky;
    top: 120px;
    align-self: flex-start; /* VERY IMPORTANT */
      display:flex;
    flex-direction:column;
    width:300px;
    gap:25px;
}


.toc-box {
    width: 100% !important;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
    max-height: 450px;
    overflow-y: auto;
}


.toc-box h3 {
      font-size: 20px;
    margin-bottom: 12px;
    color: #03072e;
}


.toc-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


.toc-box a {
  display: block;
  padding: 15px 10px;
  text-decoration: none;
  color: white;
  border-left: 3px solid transparent;
  transition: 0.3s;
  font-size: 12px;
}


.toc-box a:hover {
  color: #ff6600;
  background: #fff7f2;
  border-left: 3px solid deeppink;
}


.toc-box a.active {
  color:white;
  background: rgba(255, 20, 147, 0.12);
  border-left: 3px solid deeppink;
  font-weight: 600;
}



.tisa-form {
    position: sticky;
    top: 120px;
    width: 100%;
    align-self: flex-start; /* important */
}


.form-box {
    background-color: #0F172A;
    position: sticky;
    padding: 22px;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
    max-height: 450px;
    overflow-y: auto;
}


.form-box h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #03072e;;
}


.form-box input,
.form-box textarea {
  width: 100%;
  padding: 21px 12px;
  margin-bottom: 12px;
  border: 1px solid darkgray;
  color: black;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: 0.3s;
}


.form-box input:focus,
.form-box textarea:focus {
  border-color: #ff6600;
  box-shadow: 0 0 0 3px rgba(255,102,0,0.15);
}


.form-box textarea {
  min-height: 100px;
  resize: none;
}


.form-box button {
  width: 100%;
  padding: 12px;
  background:linear-gradient(90deg, #7C5CFF, #FF4ECD, #FF7A00);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}


.form-box button:hover {
  background: #e85c00;
  transform: translateY(-1px);
}

.post-hero{
    margin: 20px 0 30px;
}

.post-hero img{
    width: 100%;
    height:auto;
    object-fit: cover;
    border-radius: 12px;
}

.post-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:15px 0 25px;
}

.post-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border:1px solid deeppink;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    color:deeppink;
    line-height:1;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder {
    color: #333;
    opacity: 1;
}

.post-meta a{
    color:deeppink;
    text-decoration:none;
}

.post-meta a:hover{
    text-decoration:none;
}

@media (max-width: 768px) {

  .tisa-single-layout {
    display: block;
    padding: 0 15px;
  }
  
    .post-meta {
    display: flex;
    flex-direction:row;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 20px;
  }

  .tisa-content {
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px;
    box-sizing: border-box;
  }

  /* Image full width */
  .tisa-content img {
    height: auto;
    display: block;
    border-radius: 12px;
  }

  

}


@media (max-width:768px){

    /* Left sidebar ko normal block bana do */
    .tisa-toc{
        display:block;
        width:100%;
        position:static;
    }

    /* Sirf TOC hide karo */
    .toc-box{
        display:none;
    }

    /* Contact card dikhao */
    .contact-card{
        display:block;
        margin:0;
        width:100%;
    }

}





.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  padding: 12px 18px;
  border-radius: 50px;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: 0.3s ease;
}

.whatsapp-float:hover{
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color:white !important;
  padding: 12px 18px;
  border-radius: 50px;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: 0.3s ease;
}

.whatsapp-float i {
  font-size: 22px;
}

.chat{
color:white !important;
}

.whatsapp-float:hover {
  transform: translateY(-3px);
  background: #1ebe5d;
}

.wa-popup{
    position: fixed;
    bottom: 95px;
    right: 25px;
    width: 350px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0,0,0,.2);
    z-index: 99999;
    display: none;
}

.wa-popup.active{
    display:block;
}

.wa-header{
    background:#0f6a5a;
    padding:18px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
}

.wa-header img{
    width:45px;
    height:45px;
    border-radius:50%;
    background:#fff;
}

.wa-header h4{
    margin:0;
    color:#fff;
    font-weight: 100;
    font-size:16;
}

.wa-header span{
    color:#fff;
    font-size:13px;
}

.wa-close{
    margin-left:auto;
    background:none;
    border:none;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}


.wa-close:hover{
    margin-left:auto;
    background:transparent;
    border:none;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

.wa-body{
    background-color:#efeae2;
    background-image:url("https://static.whatsapp.net/rsrc.php/v4/yB/r/bg-chat-tile-light_a.png");
    background-repeat:repeat;
    padding:18px;
    min-height:140px;
}

.wa-message{
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    width: 80%;
    color:gray !important;
}

.wa-message p{
    margin:5px 0 0;
    color:gray !important;
}

.wa-footer{
    padding:18px;
}

.wa-start-chat{
        display: block;
    text-align: center;
    background:#4dc247;
    color: #000;
    text-decoration: none;
    padding: 5px;
    border-radius: 30px;
    font-size: 14px;
}



.quick-summary-box{
    display:grid;
    grid-template-columns:230px 1fr auto;
    align-items:center;
    gap:22px;
    padding:0px 11px;
    background:rgba(15, 23, 42, 0.7);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:22px;
    position:relative;
    overflow:hidden;
}

/* Decorative corner */
.quick-summary-box::before{
    content:"";
    position:absolute;
    right:-70px;
    top:-70px;

    width:180px;
    height:180px;

    border-radius:50%;
    background:rgba(255,106,0,.08);
}

.qs-left{
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    background: rgba(30, 41, 59, 0.75);
border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius:18px;
    font-size:28px;
    box-shadow:0 8px 18px rgba(255,106,0,.12);
}

.qs-content{
    position:relative;
    padding-left:20px;
}

.qs-content::before{
    content:"";
    position:absolute;
    left:0;
    top:4px;
    bottom:4px;
    width:2px;

    background:#ff6a00;
    border-radius:10px;
}

.qs-content h3{
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#111;
}


.qs-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.qs-btn img{
    width:25px;
    height:26px;
    object-fit:contain;
}

.qs-btn span{
    width:auto;
}

.qs-content p{
    margin:6px 0 0;
    font-size:12px;
    color:#555;
    line-height:1.6;
}

.qs-right{
    display:grid;
    grid-template-columns:auto auto;
    gap:10px;
    padding:8px;
    border-radius:16px;
}

.qs-right span{
    grid-column:1 / -1;
    font-size:12px;
    font-weight:600;
    color:black;
    margin-bottom:2px;
}


.explore-text{
    color:white !important;
    font-size:13px;
    font-weight:500;
}

.qs-right a{
    min-width:95px;
    height:33px;
    display:flex;
    align-items:center;
    gap:3px;
    justify-content:center;
    border-radius:10px;
    text-decoration:none;
    background:white;
    color:#fff;
    font-size:14px;
    font-weight:600;
    transition:.25s;
}

.qs-right a:hover{
    transform:translateY(-2px);
    background:white;
}

@media(max-width:768px){

    .quick-summary-box{
        grid-template-columns:1fr;
        gap:18px;
        padding:18px;
    }

    .qs-left{
        width:56px;
        height:56px;
    }

    .qs-content{
        padding-left:16px;
    }

    .qs-content h3{
        font-size:20px;
    }

    .qs-content p{
        font-size:13px;
    }

    .qs-right{
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .qs-right a{
        min-width:0;
        width:100%;
    }
}


.g-recaptcha {
  transform: scale(0.85);
  transform-origin: 0 0;
}




.phone-row{
  display: flex;
  gap: 10px;
}

.phone-row select{
  flex: 0.3;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

.phone-row input{
  flex: 0.7;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.phone-row select:focus,
.phone-row input:focus{
  outline: none;
  border-color: #007bff;
}

/* mobile responsive */
@media(max-width: 600px){
  .phone-row{
    flex-direction:row;
  }
}





@media (max-width: 768px) {
    .blog-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }
}




  
  
  /* =========================
   GLOBAL BACKGROUND (WOW EFFECT)
========================= */

html, body {
  background: #05070C !important;
  color: #EEF2FF !important;
}

body {
  background:
    radial-gradient(circle at 20% 20%, rgba(124,92,255,0.15), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255,78,205,0.12), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255,122,0,0.10), transparent 40%),
    #05070C !important;
}

/* subtle glow layer */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 220px;
  background: linear-gradient(90deg, #7C5CFF, #FF4ECD, #FF7A00);
  opacity: 0.08;
  filter: blur(90px);
  pointer-events: none;
}

/* =========================
   WORDPRESS / ASTRA FIX
========================= */

#page,
.site,
.site-content,
.ast-container,
.ast-separate-container {
  background: transparent !important;
}

#content,
#primary,
main,
article,
section {
  background: transparent !important;
}

/* =========================
   BLOG CARD (GLASS + GLOW)
========================= */

.tisa-blog-card {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(14px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);

  box-shadow:
    0 10px 40px rgba(0,0,0,0.6);

  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* gradient border magic */
.tisa-blog-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;

  background: linear-gradient(120deg, #7C5CFF, #FF4ECD, #FF7A00);

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0;
  transition: 0.4s;
}

/* hover WOW */
.tisa-blog-card:hover {
  transform: translateY(-10px) scale(1.02);

  box-shadow:
    0 25px 80px rgba(0,0,0,0.8),
    0 0 25px rgba(255,78,205,0.25),
    0 0 60px rgba(124,92,255,0.15);
}

.tisa-blog-card:hover::before {
  opacity: 1;
}

/* =========================
   TEXT SYSTEM
========================= */

h1, h2 {
  background: linear-gradient(90deg, #7C5CFF, #FF4ECD, #FF7A00);
  -webkit-background-clip: text;
  color: transparent !important;
}

h3, h4, h5 {
  color: #ffffff !important;
}

p {
  color: rgba(238,242,255,0.72) !important;
  line-height: 1.85;
}

/* =========================
   LINKS
========================= */

a {
  color: #7C5CFF;
  transition: 0.2s;
}

a:hover {
  color:white;
}

/* =========================
   CATEGORY BADGE
========================= */

.blog-category {
  background: rgba(124,92,255,0.12);
  border: 1px solid rgba(255,78,205,0.25);
  color: #fff !important;
  border-radius: 20px;
  padding: 6px 14px;
}

/* =========================
   BUTTONS (PREMIUM)
========================= */

.read-more,
.blog-arrow {
  background: linear-gradient(135deg, #7C5CFF, #FF4ECD, #FF7A00);
  color: #fff !important;
  border-radius: 12px;
  padding: 10px 18px;
  position: relative;
  overflow: hidden;

  box-shadow: 0 15px 35px rgba(124,92,255,0.25);
}

/* shine animation */
.read-more::after,
.blog-arrow::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: 0.5s;
}

.read-more:hover::after,
.blog-arrow:hover::after {
  left: 100%;
}

.read-more:hover,
.blog-arrow:hover {
  transform: translateY(-3px);
  box-shadow: 0 25px 60px rgba(255,78,205,0.22);
}

/* =========================
   SINGLE PAGE
========================= */

.tisa-single-layout{
    max-width:1280px;
    margin:60px 20px;
    padding:0 6px;

    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:35px;
    align-items:start;
}

/* main article */
.tisa-content {
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 52px;

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 40px 100px rgba(0,0,0,0.7);
}

/* =========================
   TOC
========================= */

.toc-box {
  background: rgba(15, 23, 42, 0.7);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
}

.toc-box a {
  display: block;
  padding: 10px;
  border-radius: 8px;
  transition: 0.2s;
}

.toc-box a:hover {
  background: rgba(124,92,255,0.12);
  color: #7C5CFF;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
  .tisa-single-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tisa-content {
    padding: 26px;
    margin-top: -10px;
  }
}


.tisa-author-card-dark {
    text-align: center;
    padding: 50px 25px;
    margin-top: 50px;
    border-radius: 20px;
    background: linear-gradient(145deg, #081a2f, #061425);
    border: 1px solid purple;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* IMAGE */
.author-img-wrapper {
    position: relative;
    display: inline-block;
}

.author-img-wrapper img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 4px solid purple;
    object-fit: cover;
}


/* NAME */
.author-name {
    margin-top: 20px;
    font-size: 32px;
    color: #00eaff;
    font-weight: 700;
}

/* TEXT */
.author-desc {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.8;
    color: #cfd8e3;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* HOVER GLOW */
.tisa-author-card-dark:hover {
    box-shadow: 0 0 25px purple;
    transition: 0.3s;
}

.author-img-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.author-img-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* 🔥 LINKEDIN ICON */
.author-linkedin {
    position: absolute;
    bottom: -13px;
    right: 0;
    width: 36px;
    height: 36px;
    background:purple;
    color:white !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* ICON FIX */
.author-linkedin i {
    font-size: 14px;
    line-height: 1;
}

/* HOVER EFFECT 🔥 */
.author-linkedin:hover {
    transform: scale(1.1);
    background: #004182;
}

.view-all-btn {
  border: 2px solid deeppink;
    font-size: 14px;
    border-radius: 50px;
    margin: 10px;
    padding: 8px 20px;
    text-decoration: none;
    color: deeppink;
    background-color: transparent;
    font-weight: 600;
    transition: 0.3s;
}

.view-all-btn:hover {
  color: mediumpurple;
  border:2px solid mediumpurple;
}


.g-recaptcha {
    transform: scale(0.75) !important;
    transform-origin: left top !important;
}

@media (max-width: 480px) {
  .g-recaptcha {
    transform: scale(0.75);
    transform-origin: left top;
  }
}


/* Popup always on top */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999 !important;
}

/* Popup inner box */
.popup-content {
    position: relative;
    z-index: 1000000 !important;
}

/* Astra / site content ko neeche rakho */
.site-content,
.ast-container,
#page {
    position: relative;
}


.phone-wrapper{
    display:flex;
    gap:10px;
}

.country-code{
    width:90px;
    height:40px;
    border-radius:8px;
    border:1px solid #ccc;
    padding:5px;
    background:#fff;
}

.phone-input{
    flex:1;
}

.green-toast-text {
    background: #e8f5e9 !important;
    color: #1b5e20 !important;
    background-image: none !important;
}

.green-toast-text * {
    color: #1b5e20 !important;
}


.red-toast {
    background: #ffebee !important;   /* light red bg */
    color: #b71c1c !important;        /* dark red text */
    background-image: none !important;
}

.red-toast * {
    color: #b71c1c !important;
}



.loader-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* spinner */
.btn-loader {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid darkgray;
    border-top: 2px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    margin-left:10px;
    animation: spin 0.8s linear infinite;
}

/* show loader when loading */
.submit-btn.loading .btn-loader {
    display: inline-block;
}

/* optional: fade text when loading */
.submit-btn.loading span:first-child {
    opacity: 0.7;
}

/* animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



#submitBtn.loading .btn-loader {
    display: inline-block;
}

/* optional: fade text */
#submitBtn.loading .btn-text {
    opacity: 0.6;
}

/* animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



.cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 18px;
    border-radius: 999px;
    font-weight:bold;
    color: #c084fc;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.5px;
    border: 2px solid rgba(192, 132, 252, 0.4);
    background: rgba(192, 132, 252, 0.08);
    transition: 0.3s;
}

/* 🔥 Hover effect */
.cat-pill:hover {
    color: #fff;
    background: linear-gradient(135deg, #9333ea, #6d28d9);
    border-color: transparent;
}

.cat-icon {
  font-size: 14px;
}


.tisa-ux-meta-wrapper {
  display: flex;
  align-items: center;
  margin-top:-8px;
  gap: 8px;
}

.tisa-ux-author-img img {
  width: 35px;
  height: 35px;
  border: 2px solid purple;
  border-radius: 50%;
}

.tisa-ux-meta-content {
  display: flex;
  flex-direction:row;
}

.tisa-ux-author-name {
    font-weight: 600;
    display: flex;
    margin-top: 28px;
    align-items: center;
    color: #aaa;
}

.tisa-ux-meta-info {
    font-size: 15px;
    color: #aaa;
    margin-left:12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tisa-ux-dot {
  opacity: 0.6;
}

.tisa-ux-date,
.tisa-ux-readtime {
  white-space: nowrap;
  font-weight:bold;
}


.tisa-blog-card {
  position: relative;
}

.card-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 999; /* must be highest */
  display: block;
}


@media (max-width: 768px) {
  .qs-content {
    transform: translateX(0) !important;
    text-align:left;
  }
}


@media (max-width: 768px) {
  .qs-right a {
    width: auto;
    height: auto;
    padding: 5px 10px;
    font-size: 12px;
    display: inline-block;
  }
}


@media (max-width: 768px) {
  .tisa-ux-meta-wrapper {
    flex-wrap:initial;
    justify-content: flex-start; 
    gap: 6px;
  }
  
       .tisa-ux-meta-info {
        font-size: 14px;
        color: #aaa;
        margin-left: 10px;
        display: flex;
        align-items: center;
        gap: 4px;
    }
}


@media (max-width: 768px) {
  .tisa-header {
    width: calc(100% - 20px);
    left: 10px;
    right: 10px;
    top: 10px;
    border-radius: 20px;
  }
}


.tisa-main-card {
    display: flex;
    background: rgba(15, 23, 42, 0.65);
    margin-bottom: 40px;
    border-radius: 20px;
    border:1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}

.main-card-image{
    width:65%;
}

.main-card-image img{
    width:100%;
    height:auto;
    display:block;
}

.main-card-content {
    width: 35%;
    padding: 27px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main-category a{
 color:white;
}

.main-title{
    margin:20px 0;
    font-size:28px;
    font-weight:bold;
    line-height:1.2;
}

.main-title a{
    text-decoration:none;
}

.main-excerpt{
    font-size:15px;
    line-height:1.8;
    margin-bottom:25px;
    color: lightgray !important;
}

.main-meta{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    font-weight:bold;
    margin-bottom:20px;
    font-size:15px;
}

.main-readmore{
    text-decoration:none;
    font-weight:600;
    color: #FF6A00;
}

.tisa-main-card{
    position:relative;
}

.main-card-overlay{
    position:absolute;
    inset:0;
    z-index:5;
}

.main-card-content,
.main-card-image{
    position:relative;
    z-index:1;
}


@media (max-width: 768px) {

  .tisa-main-card {
    flex-direction: column;
    margin-bottom: 25px;
    border-radius: 16px;
  }

  .main-card-image,
  .main-card-content {
    width: 100%;
  }

  .main-card-image img {
    width: 100%;
    height: auto;
  }

  .main-card-content {
    padding: 18px;
  }

  .main-title {
    font-size: 20px;
    margin: 12px 0;
    line-height: 1.3;
  }

  .main-category {
    font-size: 14px;
  }

  .main-excerpt {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
  }

  .main-meta {
    font-size: 13px;
    gap: 10px;
  }

  .main-readmore {
    font-size: 14px;
  }

  /* overlay fix (important) */
  .main-card-overlay {
    display: none;
  }
}


/* =========================
   CATEGORY NAV PILLS
========================= */

.tisa-category-nav {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    border-radius: 20px;
    padding: 12px 30px;
    margin: 20px 0 30px;
    scroll-behavior: smooth;
    justify-content: center;
    position: sticky;
    top:96px;
    z-index: 999;
    border-top: 2px solid #ff2d9530;
    border-bottom: 2px solid #ff2d9530;
    background: linear-gradient(135deg, #111827, #000000);
}

/* hide scrollbar */
.tisa-category-nav::-webkit-scrollbar {
  display: none;
}

.cat-pill {
  flex: 0 0 auto;
  padding: 8px 16px;
  background:rgba(15, 23, 42, 0.65);
  border: 1px solid deeppink;
  border-radius: 999px;
  font-size: 14px;
  color:deeppink;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s ease;
}

/* hover effect */
.cat-pill:hover {
  background:rgba(15, 23, 42, 0.65);
  color:mediumpurple;
  transform: translateY(-2px);
  border-color:mediumpurple;
}

/* active feel (optional class later JS se add kar sakte ho) */
.cat-pill.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* mobile touch smooth feel */
.cat-pill {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}


.cat-pill.active {
  background: linear-gradient(90deg, #7C5CFF, #FF4ECD, #FF7A00);
  border:1px solid transparent;
  color: #fff;
}



#showMoreBtn {
  display: block;
  margin: 40px auto;
  padding: 12px 30px;
  background: black;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
}

/*=============================
      HERO SECTION
==============================*/

.tisa-hero-modern{
    position:relative;
    overflow:hidden;
    padding:70px 1% 60px;
    background:#fff;
}

.tisa-hero-modern-content{
    position:relative;
    max-width:100%;
    z-index:2;
}

/*=============================
      HEADING
==============================*/

.tisa-hero-modern h1{

    position:relative;

    margin:0;

    text-align:center;

    font-size:75px;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    color:#111;

    perspective:1500px;

}

/*=============================
      PREMIUM TEXT
==============================*/

.tisa-hero-modern h1 span{

    position:relative;

    display:inline-block;

    padding:8px 10px;

    color:transparent;

    background:
    linear-gradient(
        120deg,
        #ff0080 0%,
        #ff5db8 18%,
        #ffffff 28%,
        #ffd8ef 38%,
        #ff4fa8 48%,
        #ffffff 60%,
        #ff2d95 75%,
        #ff0080 100%
    );

    background-size:400% auto;

    -webkit-background-clip:text;
    background-clip:text;

    animation:
    liquidFlow 7s linear infinite,
    luxuryFloat 5s ease-in-out infinite;

    transform-style:preserve-3d;

    filter:drop-shadow(0 18px 35px rgba(255,20,147,.18));

}

/*=============================
      METAL SHINE
==============================*/

.tisa-hero-modern h1 span::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:18px;

    background:
    linear-gradient(
        115deg,
        transparent 20%,
        rgba(255,255,255,.85) 42%,
        rgba(255,255,255,0) 60%
    );

    mix-blend-mode:screen;

    transform:translateX(-180%) skewX(-25deg);

    animation:glassMove 5s linear infinite;

    pointer-events:none;

}

/*=============================
      PINK GLOW
==============================*/

.tisa-hero-modern h1 span::after{

    content:"";

    position:absolute;

    left:50%;

    top:70%;

    width:110%;

    height:65%;

    transform:translateX(-50%);

    background:

    radial-gradient(circle,
    rgba(255,20,147,.38),
    rgba(255,20,147,.18),
    transparent 72%);

    filter:blur(35px);

    z-index:-1;

    animation:glowPulse 4s ease-in-out infinite;

}

/*=============================
      BACKGROUND GLOW
==============================*/

.tisa-hero-modern::before{

    content:"";

    position:absolute;

    left:50%;

    top:-180px;

    width:650px;

    height:650px;

    transform:translateX(-50%);

    background:
    radial-gradient(circle,
    rgba(255,20,147,.12),
    transparent 70%);

    filter:blur(70px);

    animation:bgFloat 8s ease-in-out infinite alternate;

}

/*=============================
      ANIMATIONS
==============================*/

@keyframes liquidFlow{

    0%{

        background-position:0%;

    }

    100%{

        background-position:400%;

    }

}

@keyframes luxuryFloat{

    0%,100%{

        transform:
        rotateX(0deg)
        rotateY(0deg)
        translateY(0);

    }

    50%{

        transform:
        rotateX(7deg)
        rotateY(-6deg)
        translateY(-9px);

    }

}

@keyframes glassMove{

    0%{

        transform:
        translateX(-180%)
        skewX(-25deg);

    }

    100%{

        transform:
        translateX(230%)
        skewX(-25deg);

    }

}

@keyframes glowPulse{

    0%,100%{

        opacity:.45;

        transform:
        translateX(-50%)
        scale(1);

    }

    50%{

        opacity:1;

        transform:
        translateX(-50%)
        scale(1.15);

    }

}

@keyframes bgFloat{

    from{

        transform:
        translateX(-50%)
        scale(.9);

    }

    to{

        transform:
        translateX(-50%)
        scale(1.2);

    }

}

/*=============================
      PARAGRAPH
==============================*/

.tisa-hero-modern p{

    margin:18px auto 0;

    max-width:760px;

    text-align:center;

    font-size:15px;

    line-height:1.8;

    color:#666;

}

/* search bar */
.hero-search{
  margin-top: 28px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  margin-bottom: -60px;
  padding: 3px;
  background: rgba(20, 20, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.hero-search input{
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 12px 14px;
  font-size: 15px;
  color:white !important;
}


.hero-search input:focus{
  background: rgba(20, 20, 30, 0.75);
  border:1px solid transparent !important;
}

.hero-search button{
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.hero-search button:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(153, 17, 164, 0.25);
}

.category-section.hide{
    display:none;
}

.category-tabs{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:90px 0 40px;
    padding:12px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
}

.tab-btn{
    background:transparent;
    border:1px solid rgba(255,255,255,0.08);

    color:#94a3b8;
    font-size:14px;
    font-weight:500;

    padding:10px 18px;
    border-radius:999px;

    cursor:pointer;

    transition:all .3s ease;
}

.tab-btn:hover{
    color:#fff;
    border-color:rgba(37,99,235,.4);
    background:rgba(37,99,235,.12);
    transform:translateY(-2px);
}

.tab-btn.active{
    color:#fff;
    border-color:transparent;
    box-shadow:
        0 10px 25px rgba(37,99,235,.25),
        0 0 0 1px rgba(255,255,255,.08) inset;
}




.subcategory-list{
    display:none;
    gap:10px;
    flex-wrap:wrap;
}

.subcategory-list.active{
    display:flex;
}


.sub-tab{
    color: white;
    border: 1px solid gray;
    font-size: 13px;
    padding: 7px 15px;
    border-radius: 20px;
}



.blog-image{
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.blog-image img{
    display: block;
    width: 100%;
    height: auto;
}

.blog-category{
    position: absolute;
    left: 16px;
    bottom: 16px; 
    z-index: 10;

    background: rgba(35,35,35,.9);
    color:#fff;

    padding:10px 18px;
    border-radius:999px;

    font-size:14px;
    font-weight:600;
}




.main-card-image{
    position: relative;
    overflow: hidden;
  
}

.main-card-image img{
    width: 100%;
    display: block;
 
}

.main-category{
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    background-image:
        linear-gradient(rgba(12,12,18,.82), rgba(12,12,18,.82));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    overflow: hidden;
    transition: all .35s ease;
    box-shadow:
        0 10px 30px rgba(0,0,0,.35),
        inset 0 1px 1px rgba(255,255,255,.08);
}

/* Moving Shine */
.main-category::before{
    content:"";
    position:absolute;
    top:0;
    left:-130%;
    width:55%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

    animation:tisaShine 4s ease-in-out infinite;
}

/* Soft Glow */
.main-category::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;

    box-shadow:
        0 0 18px rgba(124,58,237,.18),
        0 0 28px rgba(236,72,153,.15);

    opacity:0;

    transition:.35s;
}

/* Hover */
.tisa-main-card:hover .main-category{
    transform:translateY(-3px) scale(1.04);

    box-shadow:
        0 15px 35px rgba(0,0,0,.45),
        0 0 22px rgba(124,58,237,.22),
        0 0 30px rgba(236,72,153,.18);
}

.tisa-main-card:hover .main-category::after{
    opacity:1;
}

/* Shine Animation */
@keyframes tisaShine{

    0%{
        left:-130%;
    }

    35%{
        left:160%;
    }

    100%{
        left:160%;
    }

}


@media (max-width: 768px) {

    .view-all-btn{
        font-size: 12px;
        padding: 6px 14px;
        margin: 0;
        border-width: 1.5px;
        border-radius: 30px;
        white-space: nowrap;
    }

}



.tisa-hero-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    padding: 120px 45px;
}

.tisa-hero-wrapper h1{
 font-size:28px;
 font-weight:bold;
}

.hero-left{
    flex:1;
    min-width:0;
}

.hero-right{
    width:45%;
    flex-shrink:0;
}

.post-hero{
    width:100%;
    margin-left: -5px;
}

.post-hero img{
    width:100%;
    height:auto;
    display:block;
    border-radius:20px;
}

@media (max-width: 768px) {

    .tisa-hero-wrapper{
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 130px 20px 40px;
    }

    .hero-left{
        width: 100%;
        order: 1;
    }

    .hero-right{
        width: 100%;
        order: 2;
    }

    .post-hero{
        width: 100%;
        margin-left: 0;
    }

    .post-hero img{
        width: 100%;
        height: auto;
        border-radius: 16px;
        display: block;
    }

}





.contact-card{
    background:#0F172A;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:25px;
    text-align:center;
}

.contact-card h3{
    color:#fff !important;
    margin-bottom:15px;
    font-size:23px;
}

.contact-card p{
    color:#cbd5e1 !important;
    line-height:1.7;
    margin-bottom:20px;
    font-size:13px;
}

.contact-btn{
    width:100%;
    padding:14px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    color:#fff;
    font-weight:600;
    background:linear-gradient(90deg,#7C5CFF,#FF4ECD,#FF7A00);
}




.contact-modal{
    position: fixed;
    inset: 0;
    display: none;

    justify-content: center;
    align-items: center;

    background: rgba(0,0,0,.65);
    z-index: 99999;
}

.contact-modal.active{
    display: flex;
}

.contact-modal-content{
    width: 90%;
    max-width: 600px;
    max-height: 90vh;

    overflow-y: auto;

    background: #0F172A;
    border-radius: 18px;
    padding: 30px;

    position: relative;
    box-sizing: border-box;
}

.close-modal{
    position:absolute;
    right:20px;
    top:15px;
    font-size:28px;
    cursor:pointer;
    color:#fff;
}


@media (max-width: 768px) {

    .contact-card{
        padding: 20px;
        border-radius: 14px;
    }

    .contact-card h3{
        font-size: 22px;
        margin-bottom: 12px;
    }

    .contact-card p{
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 18px;
    }

    .contact-btn{
        padding: 13px;
        font-size: 15px;
        border-radius: 8px;
    }

    .close-modal{
        top: 10px;
        right: 15px;
        font-size: 24px;
    }

}


.contact-modal-content{
    width: 90%;
    max-width: 600px;
    max-height: 90vh;

    overflow-y: auto;

    background: #0F172A;
    border-radius: 18px;
    padding: 30px;

    position: relative;
    box-sizing: border-box;
}

@media (max-width:768px){

    .contact-modal{
        padding:15px;
        align-items:flex-start;
        overflow-y:auto;
    }

    .contact-modal-content{
        width:100%;
        max-width:100%;
        max-height:none;
        margin:30px auto;
        padding:20px;
        border-radius:14px;
    }

}


@media (max-width: 768px) {

    .contact-modal .form-box{
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
        max-height: none;
        overflow: visible;
    }

}




.explore-more-section{
    max-width:1280px;
    margin:5px auto;
    padding:0 20px;
}

.explore-more-header{
    margin-bottom:35px;
}

.explore-more-header h2{
    color:#fff;
    font-size:34px;
    margin-bottom:10px;
    display:inline-block;
    transform-origin:center;
    animation:flipReveal 2s ease-in-out infinite;
}

@keyframes flipReveal{

    0%{
        opacity:0;
        transform:perspective(600px) rotateX(-90deg);
    }

    20%{
        opacity:1;
        transform:perspective(600px) rotateX(0);
    }

    80%{
        opacity:1;
        transform:perspective(600px) rotateX(0);
    }

    100%{
        opacity:0;
        transform:perspective(600px) rotateX(90deg);
    }

}


@media (max-width:768px){

    .explore-more-section{
        margin:50px auto;
        padding:0 15px;
    }

    .explore-more-header h2{
        font-size:28px;
        margin: 1px 21px;
    }

}



.share-card{
    padding:28px;
    background:#0F172A;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
}

.share-card h3{
    color:#fff;
    font-size:20px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:22px;
}

.share-icons{
    display:flex;
    gap:5px;
}

.share-icons a{
    width:47px;
    height:47px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    text-decoration:none;
    font-size:22px;
    background:linear-gradient(135deg,#7C5CFF,#FF4ECD,#FF7A00);
    border:1px solid rgba(255,255,255,.10);
    transition:.35s;
}

.share-icons a:hover{
    transform:translateY(-6px) scale(1.08);
    border-color:transparent;
    box-shadow:0 12px 25px rgba(124,92,255,.35);
}


@media (max-width:768px){

    .share-card{
        margin-top:20px;
        padding:22px;
        display: none;
    }

    .share-icons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .share-icons a{
        width:48px;
        height:48px;
        font-size:20px;
    }

}

@media (max-width: 768px){

    .tisa-hero-wrapper h1{
        font-size: 28px;
        line-height: 1.3;
        font-weight: 700;
    }

}




.tisa-breadcrumb{
    max-width: 1280px;
    margin: 30px auto 40px;
    margin-top: -85px;
    padding: 0 25px;
    font-size: 15px;
    text-align: center;
}

.tisa-breadcrumb a{
    color:#ffffff;
    text-decoration:none;
    font-weight:500;
    transition:.3s;
}

.tisa-breadcrumb a:hover{
    color:deeppink;
}

.tisa-breadcrumb span{
    color:#94a3b8;
}

.tisa-breadcrumb i{
    color:#f97316;
    font-size:13px;
}

.tisa-breadcrumb .current-page{
    color:#ffffff;
    font-weight:600;
}

/* Mobile Only */
@media (max-width:768px){

    .tisa-breadcrumb{
        max-width:100%;
        margin-top:-20px;      /* apne hisaab se -15px ya 0 bhi kar sakti ho */
        margin-bottom:20px;
        padding:0 15px;
        font-size:14px;
        text-align:center;
    }

    .tisa-breadcrumb a,
    .tisa-breadcrumb span,
    .tisa-breadcrumb .current-page{
        font-size:14px;
    }

    .tisa-breadcrumb i{
        font-size:10px;
    }

}

/* Default */
.mobile-contact-card{
    display:none;
}

.desktop-contact-card{
    display:block;
}

/* Mobile */
@media (max-width:768px){

    .desktop-contact-card{
        display:none;
    }

    .mobile-contact-card{
        display:block;
        margin:30px 1px;
    }

}


@media (max-width: 768px) {

    .tisa-category-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;

        padding: 12px 15px;
        margin: 15px 0 20px;

        position: sticky;
        top: 70px;

        border-radius: 12px;
        background: linear-gradient(135deg, #111827, #000000);

        border-top: 1px solid rgba(255, 45, 149, 0.2);
        border-bottom: 1px solid rgba(255, 45, 149, 0.2);
    }

    .tisa-category-nav .tab-btn {
        flex: 0 1 auto;
        white-space: nowrap;
    }

}


.tisa-ux-updated{
    display:flex;
    align-items:center;
    margin-bottom:5px;
    gap:6px;
    font-weight:bold;
    color:white;
    font-size:12px;
}

.tisa-ux-updated i{
    color:deeppink;
    font-size:13px;
}

.qs-btn.perplexity img{
    width: 19px !important;
    height: 19px !important;
    object-fit: contain;
}


.article-overview{
    background: rgba(30, 41, 59, 0.75);
border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius:16px;
    padding:24px;
    margin-bottom:30px;
}

.article-overview h2{
    font-size:28px;
    font-weight:700;
    margin-bottom:12px;
}

.article-overview p{
    color:#555;
    line-height:1.8;
    margin:0;
}