@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    padding: 0;
    margin: 0;
    height: auto;
}

img {
    max-width: 100%;
}

.container {
    max-width: 1140px;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.wrapper {
    overflow-x: hidden;
}

/* topbar-section-css-start */

.topbar {
    background: #000;
    color: #fff;
    font-size: 14px;
    overflow: hidden;
}

/* Left Links */
.topbar-left {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 8px 0px 8px 0;
}

.topbar-left a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 50px;
    transition: .35s ease;
    position: relative;
}

.topbar-left a {
    overflow: hidden;
}

.topbar-left a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .25),
            transparent);
    transform: skewX(-25deg);
    transition: .6s;
}

.topbar-left a:hover::before {
    left: 140%;
}

/* Small Circle Icon */
.topbar-left i {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgb(51, 49, 233) !important;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff !important;
    font-size: 13px;
    transition: .35s ease;
}

/* Full Box Hover */

.topbar-left a:hover {
    background: rgba(255, 255, 255, .08);
    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, .05),
        0 0 12px rgba(13, 110, 253, .35);
    color: #fff;
}

/* Icon Hover */

/* .topbar-left a:hover i {
    background: #ffd54a;
    color: #083e8f;
    transform: rotate(360deg);
    box-shadow: 0 0 15px rgba(255, 213, 74, .6);
} */
.topbar-left a:hover i {
    background: #3331e9;
    color: #fff;
    transform: rotate(360deg);
    box-shadow: 0 0 15px rgba(255, 213, 74, .6);
}

/*=========================
      MARQUEE
==========================*/

.topbar-marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 12px 0;
}

.topbar-track {
    display: flex;
    width: max-content;
    animation: scroll 28s linear infinite;
}

.topbar-track>span {
    padding-right: 80px;
    color: #fff;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    font-size: 13px;
}

.topbar-track:hover {
    animation-play-state: paused;
}

@keyframes scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}

.topbar-star {
    color: #FFD700 !important;
    display: inline-block;
    margin-right: 8px;
    font-size: 16px;
    text-shadow:
        0 0 5px #FFD700,
        0 0 10px #FFD700,
        0 0 20px rgba(255, 215, 0, .6);
}

.topbar-star i {
    color: inherit;
}

@keyframes starGlow {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: .8;
    }
}

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

@media(max-width:991px) {

    .topbar-left {
        display: none;
    }

    .topbar .row {
        margin: 0;
    }

    .topbar-marquee {
        padding: 10px 0;
    }

    .topbar-track span {
        font-size: 13px;
    }

}

/* topbar-section-css-end */





/* navbar-section-css-start */

.custom-navbar {
    background: #000519;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    position: relative;
    z-index: 999;
    transition: .35s;
    border-top: 1px solid #fff6;
    border-bottom: 1px solid #ffca3945;
    box-shadow: 0px 0px 15px #ffc83733;
}


.custom-navbar.scrolled {
    background: #06152d;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .30);
    padding: 10px 0;
}

/* .sticky-top {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1020;

} */

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

.navbar-left {
    display: flex;
    align-items: center;
}

.navbar-brand {
    margin-right: 20px;
}

.navbar-brand {
    margin-right: 20px;
    text-decoration: none;
}
.company-name {
	display: inline-flex;
	align-items: center;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .3px;
	white-space: nowrap;
	transition: .35s;
}

.company-name strong {
    color: #FFD54A;
    font-weight: 800;
    margin-left: 5px;

    text-shadow: 0 0 12px rgba(255, 213, 74, .25);
}

.navbar-brand:hover .company-name {
    transform: translateY(-1px);
}

.navbar-brand:hover .company-name strong {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 213, 74, .55);
}

.navbar-divider {
    width: 1px;
    height: 42px;
    background: rgba(255, 255, 255, 0.42);
}
@media (max-width:767px){
.company-name {
	display: inline-flex;
	align-items: center;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .3px;
	white-space: nowrap;
	transition: .35s;
	border: 1px solid #fff;
	padding: 5px;
	box-shadow: 0px 0px 15px #ffffff73;
}




}

/*==================================
        MENU
==================================*/

.navbar-collapse {
    display: flex;
    align-items: center;
}

.navbar-nav {
    margin-left: 20px;
    gap: 8px;
}

.navbar-nav .nav-link {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 14px !important;
    border-radius: 30px;
    position: relative;
    transition: .35s;
}

/* .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
	color: #FFD54A !important;
	background: rgba(255, 255, 255, 0.2);
} */

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: #FFF !important;
    background: rgba(255, 255, 255, 0.54);
    border: 1px solid #3331e9;
    box-shadow: 0px 0px 15px #3331e9;
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 0;
    height: 2px;
    /* background: #FFD54A; */
    transform: translateX(-50%);
    transition: .35s;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 60%;
}

/*==================================
      BLOG DROPDOWN
==================================*/

.blog-dropdown {
    position: relative;
}

.blog-link {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.blog-link i {
    font-size: 11px;
    transition: .3s;
}

.blog-dropdown:hover .blog-link i {
    transform: rotate(180deg);
}

.blog-menu {
    position: absolute;
    top: 115%;
    left: 0;
    width: 310px;
    background: #081a39;
    border-radius: 18px;
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: .35s;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
}

.blog-dropdown:hover .blog-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.blog-menu a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 12px 15px;
    border-radius: 10px;
    transition: .3s;
    font-size: 14px;
}

.blog-menu a:hover {
    background: #FFD54A;
    color: #071B3B;
    transform: translateX(6px);
}

/*==================================
        BUTTONS
==================================*/

.navbar-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-btn,
.demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    border-radius: 50px;
    padding: 11px 24px;
    font-size: 14px;
    font-weight: 600;
    transition: .35s;
}

.login-btn {
    color: #fff;
    border: 1px solid rgb(51, 49, 233);
    box-shadow: 0px 0px 15px #3331e9;
}

.login-btn:hover {
    background: rgba(255, 255, 255, .08);
    color: #FFD54A;
    border-color: #FFD54A;
}

.demo-btn {
    background: #3331E9;
    color: #fff !important;
}

.demo-btn:hover {
    color: #071B3B;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 213, 74, .45);
}

/*==================================
      TOGGLER
==================================*/

.navbar-toggler {
    color: #FFD54A;
    font-size: 30px !important;
}

.navbar-toggler i {
    color: #FFD54A;
}

/* .navbar-toggler {
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: 10px;
	background: rgba(255,255,255,.05);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .35s;
	box-shadow: 0px 0px 15px #ffd54a1f !important;
} */
.navbar-toggler {
    width: 48px;
    height: 48px;
    border: 1px solid #3331e9 !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .35s;
    box-shadow: 0px 0px 15px #3331e9;
}

.navbar-toggler i {
    color: #FFD54A;
    font-size: 28px;
}

.navbar-toggler:hover {
    border-color: #FFD54A !important;
    background: rgba(255, 213, 74, .12);
}

.navbar-toggler:focus {
    box-shadow: none;
}

.mobile-dropdown-menu {
    display: none;
    overflow: hidden;
}

.mobile-dropdown-menu.show {
    display: block;
}

/*=========================
    PREMIUM OFFCANVAS
==========================*/

.custom-offcanvas {
    width: 330px;
    background: linear-gradient(180deg, #041C4A 0%, #082B72 100%);
    color: #fff;
}

.custom-offcanvas .offcanvas-header {
    padding: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/*=========================
      CLOSE BUTTON
==========================*/

.offcanvas-close {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .35s;
}

.offcanvas-close:hover {
    background: #FFD54A;
    color: #041C4A;
    transform: rotate(90deg);
}

/*=========================
        BODY
==========================*/

.offcanvas-body {
    padding: 22px;
}

/*=========================
        MENU
==========================*/
.mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav li {
    margin-bottom: 14px;
}

.mobile-nav a, .mobile-dropdown-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    background: #fff;
    border: none;
    border-radius: 14px;
    text-decoration: none;
    color: #082B72;
    font-weight: 600;
    transition: .35s;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
    font-size: 13px;
    margin: 3px 0px;
}

.mobile-nav a span {
    flex: 1;
    margin-left: 10px;
}

.mobile-nav a i:first-child {
    color: #0D6EFD;
    font-size: 18px;
}

.mobile-nav a:hover,
.mobile-dropdown-btn:hover {
    background: #FFD54A;
    color: #041C4A;
    transform: translateX(6px);
}

.mobile-nav a:hover i:first-child,
.mobile-dropdown-btn:hover i:first-child {
    color: #041C4A;
}

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

.mobile-dropdown-btn div {
    display: flex;
    align-items: center;
}

.mobile-dropdown-btn div span {
    margin-left: 14px;
}

.mobile-dropdown-btn .arrow {
    color: #082B72;
    transition: .35s;
}

.mobile-dropdown-btn.active .arrow {
    transform: rotate(180deg);
}

/*=========================
      SUB MENU
==========================*/

.mobile-dropdown-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
    overflow: hidden;
}

.mobile-dropdown-btn>a {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 10px 18px;
    background: transparent;
    color: #082B72;
    text-decoration: none;
    box-shadow: none;
}

.mobile-dropdown-arrow {
    width: 48px;
    height: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #082B72;
    cursor: pointer;
}

.mobile-dropdown-arrow .arrow {
    font-size: 13px;
    transition: .35s;
}

.mobile-dropdown-btn>a i {
    color: #0D6EFD;
    font-size: 18px;
}

.mobile-dropdown-arrow:hover {
    background: #FFD54A;
    color: #041C4A;
}

.mobile-dropdown-btn.active .arrow {
    transform: rotate(180deg);
}

/* .mobile-dropdown-menu {
    display: none;
    margin-top: 10px;
    padding-left: 22px;
}

.mobile-dropdown-menu.show {
    display: block;
}

.mobile-dropdown-menu a {
    display: block;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    text-decoration: none;
    padding: 12px 15px;
    margin-bottom: 8px;
    border-radius: 10px;
    transition: .35s;
    border-left: 3px solid transparent;
}

.mobile-dropdown-menu a:hover {
    background: #FFD54A;
    color: #041C4A;
    border-left-color: #fff;
    padding-left: 22px;
} */

/*=========================
       BUTTONS
==========================*/

.mobile-buttons {
    margin-top: 35px;
}

.mobile-buttons .login-btn,
.mobile-buttons .demo-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 15px;
}

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

@media(max-width:1199px) {

    .navbar-collapse {
        display: none !important;
    }

    .navbar-divider {
        display: none;
    }

}

@media(min-width:1200px) {

    .navbar-toggler {
        display: none;
    }

}

@media(max-width:767px) {

    .navbar-brand img {
        height: 48px;
    }

    .custom-navbar {
        padding: 12px 0;
    }

}

/* navbar-section-css-end */

/* hero-banner-section-css-start */

.hero-banner {
    position: relative;
    width: 100%;
    padding: 55px 0 145px;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 18%,
            rgba(35, 102, 255, 0.28) 0%,
            rgba(35, 102, 255, 0.08) 25%,
            transparent 48%),
        radial-gradient(circle at 8% 80%,
            rgba(0, 174, 255, 0.16) 0%,
            transparent 38%),
        linear-gradient(135deg,
            #020817 0%,
            #061536 48%,
            #041d4c 100%);
}

/* =========================================================
BACKGROUND EFFECT
========================================================= */

.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 90%);
    pointer-events: none;
}

/* glowing orb */

.hero-banner::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    right: -280px;
    top: -300px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(37, 105, 255, 0.22) 0%,
            rgba(37, 105, 255, 0.08) 35%,
            transparent 70%);
    filter: blur(15px);
    pointer-events: none;
}

/* =========================================================
HERO CONTENT
========================================================= */

.hero-content {
    position: relative;
    z-index: 5;
    color: #ffffff;
}

/* =========================================================
TAG
========================================================= */

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.11);
    color: #9ccaff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 22px;
    backdrop-filter: blur(12px);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-tag i {
    color: #FFD54A;
    font-size: 15px;
}

/* =========================================================
HEADING
========================================================= */
.hero-content h1 {
    position: relative;
    max-width: 650px;
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.hero-content h1 span {
    display: block;
    background:
        linear-gradient(90deg,
            #38bdf8 0%,
            #4f8cff 45%,
            #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================================
DESCRIPTION
========================================================= */

.hero-content>p {
    max-width: 610px;
    margin: 0 0 30px;
    color: #b9c9e8;
    font-size: 16px;
    line-height: 1.8;
}

/* =========================================================
BUTTONS
========================================================= */

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}

/* demo */

.hero-buttons .demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 155px;
    padding: 13px 23px;
    border-radius: 12px;
    background:
        linear-gradient(135deg,
            #FFD54A,
            #ffbf2f);
    color: #071b3b;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow:
        0 12px 30px rgba(255, 193, 7, 0.22);
    transition: all .3s ease;
}

.hero-buttons .demo-btn i {
    font-size: 17px;
}

.hero-buttons .demo-btn\:hover {
    transform: translateY(-3px);
    box-shadow:
        0 17px 38px rgba(255, 193, 7, 0.32);
    color: #071b3b;
}

/* login */

.hero-buttons .login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 135px;
    padding: 13px 23px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: all .3s ease;
}

.hero-buttons .login-btn\:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 213, 74, 0.7);
    background: rgba(255, 213, 74, 0.08);
    color: #FFD54A;
}

/* =========================================================
USERS / TRUST
========================================================= */

.hero-users-area {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 28px;
}

.hero-avatar {
    display: flex;
    align-items: center;
}

.hero-avatar img {
    width: 43px;
    height: 43px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #071b3b;
    margin-left: -10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

.hero-avatar img\:first-child {
    margin-left: 0;
}

.hero-rating {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hero-rating .stars {
    display: flex;
    gap: 3px;
}

.hero-rating .stars i {
    color: #FFD54A;
    font-size: 12px;
}

.hero-rating span {
    color: #aebfdd;
    font-size: 12px;
    font-weight: 500;
}

/* =========================================================
RIGHT HERO IMAGE AREA
========================================================= */

.hero-image-area {
    position: relative;
    width: 100%;
    height: 590px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

/* =========================================================
MAIN IMAGE
========================================================= */

.hero-main-image {
    position: relative;
    width: 475px;
    height: 475px;
    border-radius: 50%;
    padding: 9px;
    overflow: visible;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.25),
            rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 0 70px rgba(32, 108, 255, 0.22);
    z-index: 5;
}

/* image */

.hero-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.08);
}

/* =========================================================
ROTATING OUTER RING
========================================================= */

.hero-main-image::before {
    content: "";
    position: absolute;
    inset: -24px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 213, 74, 0.55);
    animation: rotateRing 18s linear infinite;
    pointer-events: none;
}

.hero-main-image::after {
    content: "";
    position: absolute;
    inset: -48px;
    border-radius: 50%;
    border: 1px solid rgba(58, 142, 255, 0.22);
    box-shadow:
        0 0 30px rgba(45, 126, 255, 0.08);
    animation: rotateRingReverse 25s linear infinite;
    pointer-events: none;
}

/* =========================================================
FLOATING CARDS
========================================================= */

.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 190px;
    padding: 11px 13px;
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            rgba(12, 35, 78, 0.96),
            rgba(6, 24, 56, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(18px);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    color: #fff;
    z-index: 15;
}

.floating-card i {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background:
        linear-gradient(135deg,
            #FFD54A,
            #ffbe28);
    color: #071b3b;
    font-size: 20px;
    box-shadow:
        0 8px 18px rgba(255, 193, 7, 0.16);
}

.floating-card h6 {
    margin: 0 0 3px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.floating-card p {
    margin: 0;
    color: #9eb3d4;
    font-size: 11px;
}

/* =========================================================
FLOATING CARD POSITIONS
========================================================= */

.card-one {
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    animation: floatTop 5s ease-in-out infinite;
}

.card-two {
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
    animation: floatLeft 5.5s ease-in-out infinite;
}

.card-three {
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
    animation: floatRight 6s ease-in-out infinite;
}

.card-four {
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    animation: floatBottom 5.5s ease-in-out infinite;
}

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

@keyframes rotateRing {
    from {
        transform: rotate(0deg);
    }

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

@keyframes rotateRingReverse {
    from {
        transform: rotate(360deg);
    }

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

@keyframes floatTop {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-12px);
    }
}

@keyframes floatBottom {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(12px);
    }
}

@keyframes floatLeft {

    0%,
    100% {
        transform: translateY(-50%) translateX(0);
    }

    50% {
        transform: translateY(-50%) translateX(-12px);
    }
}

@keyframes floatRight {

    0%,
    100% {
        transform: translateY(-50%) translateX(0);
    }

    50% {
        transform: translateY(-50%) translateX(12px);
    }
}

/* banner-features-overlaping-hero-setion */

.banner-features {
    position: relative;
    margin-top: -95px;
    padding-bottom: 0px;
    z-index: 20;
    background: linear-gradient(180deg, #042448 0%, #042749 55%, #03163f 100%);
}

/* top glow behind feature box */

.banner-features::before {
    content: "";
    position: absolute;
    width: 80%;
    height: 180px;
    left: 10%;
    top: -30px;
    background:
        radial-gradient(ellipse,
            rgba(37, 111, 255, 0.18),
            transparent 70%);
    filter: blur(25px);
    pointer-events: none;
}

/* =========================================================
FEATURE CONTAINER
========================================================= */

.banner-features .container {
    position: relative;
    z-index: 2;
}

/* glass wrapper */

.banner-features .row {
    position: relative;
    padding: 18px;
    border-radius: 24px;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* subtle top highlight */

.banner-features .row::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 0;
    height: 1px;
    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent);
}

/* =========================================================
FEATURE CARD
========================================================= */

.feature-card {
    position: relative;
    height: 100%;
    min-height: 125px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 10px;
    border-radius: 17px;
    /* background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025)); */
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.banner-features {
    position: relative;
    margin-top: -95px;
    padding-bottom: 0px;
    z-index: 20;
    background: linear-gradient(180deg, #042448 0%, #042749 55%, #03163f 100%);
}

/* card shine */

.feature-card::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    top: -55px;
    right: -45px;
    border-radius: 50%;
    background: rgba(255, 213, 74, 0.10);
    filter: blur(15px);
    transition: .35s;
}

/* hover */

.feature-card\:hover {
    transform: translateY(-7px);
    background:
        linear-gradient(145deg,
            rgba(255, 213, 74, 0.10),
            rgba(255, 255, 255, 0.035));
    border-color: rgba(255, 213, 74, 0.55);
    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.25),
        0 0 25px rgba(255, 213, 74, 0.08);
}

.feature-card\:hover::before {
    transform: scale(1.5);
}

/* =========================================================
FEATURE ICON
========================================================= */

.feature-card i {
    width: 53px;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border-radius: 15px;
    color: #FFD54A;
    background:
        linear-gradient(135deg,
            rgba(255, 213, 74, 0.15),
            rgba(255, 213, 74, 0.05));
    border: 1px solid rgba(255, 213, 74, 0.12);
    font-size: 23px;
    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.feature-card\:hover i {
    transform: translateY(-2px) scale(1.06);
    background: #FFD54A;
    color: #071b3b;
    box-shadow:
        0 8px 20px rgba(255, 213, 74, 0.18);
}

/* =========================================================
FEATURE TITLE
========================================================= */

.feature-card h6 {
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

/* =========================================================
LARGE TABLET
========================================================= */

@media (max-width: 1199px) {
    .hero-content h1 {
        font-size: 42px;
    }

    .hero-main-image {
        width: 410px;
        height: 410px;
    }

    .floating-card {
        min-width: 175px;
    }

    .card-two {
        left: 0;
    }

    .card-three {
        right: 0;
    }
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {
    .hero-banner {
        padding: 45px 0 100px;
    }

    .hero-content {
        text-align: center;
        margin-bottom: 15px;
    }

    .hero-content h1 {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        font-size: 42px;
    }

    .hero-content>p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-users-area {
        justify-content: center;
    }

    .hero-image-area {
        height: 540px;
        margin-top: 10px;
    }

    .hero-main-image {
        width: 330px;
        height: 330px;
    }

    .floating-card {
        min-width: 165px;
    }

    .card-two {
        left: 3%;
    }

    .card-three {
        right: 3%;
    }

    .banner-features {
        margin-top: -45px;
        padding-bottom: 65px;
    }

    .banner-features .row {
        padding: 15px;
    }

    .feature-card {
        min-height: 110px;
        padding: 15px 8px;
    }
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {
    .hero-banner {
        padding: 35px 0 75px;
    }

    .hero-content h1 {
        font-size: 30px;
        line-height: 1.25;
        letter-spacing: -0.5px;
    }

    .hero-content>p {
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 23px;
    }

    .hero-tag {
        font-size: 11px;
        padding: 8px 13px;
        margin-bottom: 17px;
    }

    .hero-buttons {
        gap: 9px;
    }

    .hero-buttons .demo-btn,
    .hero-buttons .login-btn {
        min-width: 125px;
        padding: 11px 17px;
        font-size: 12px;
    }

    .hero-users-area {
        flex-direction: column;
        gap: 8px;
        margin-top: 23px;
    }

    .hero-avatar img {
        width: 38px;
        height: 38px;
    }

    .hero-rating {
        align-items: center;
    }

    .hero-image-area {
        height: 400px;
        margin-top: 15px;
    }

    .hero-main-image {
        width: 270px;
        height: 270px;
    }

    .hero-main-image::before {
        inset: -16px;
    }

    .hero-main-image::after {
        inset: -30px;
    }

    .floating-card {
        min-width: 140px;
        padding: 9px 10px;
        gap: 8px;
        border-radius: 12px;
    }

    .floating-card i {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 17px;
    }

    .floating-card h6 {
        font-size: 11px;
    }

    .floating-card p {
        display: none;
    }

    .card-one {
        top: 10px;
    }

    .card-four {
        bottom: 5px;
    }

    .card-two {
        left: -3px;
    }

    .card-three {
        right: -3px;
    }

    .banner-features {
        margin-top: -20px;
        padding-bottom: 0px;
    }

    .banner-features .row {
        padding: 12px;
        border-radius: 18px;
    }

    .feature-card {
        min-height: 95px;
        padding: 12px 5px;
        border-radius: 13px;
    }

    .feature-card i {
        width: 43px;
        height: 43px;
        margin-bottom: 8px;
        border-radius: 12px;
        font-size: 18px;
    }

    .feature-card h6 {
        font-size: 10px;
    }
}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 576px) {
    .hero-banner {
        padding: 30px 0 70px;
    }

    .hero-content h1 {
        font-size: 25px;
    }

    .hero-content>p {
        font-size: 13px;
        line-height: 1.6;
    }

    .hero-image-area {
        height: 340px;
    }

    .hero-main-image {
        width: 245px;
        height: 245px;
    }

    .floating-card {
        min-width: 125px;
        padding: 8px;
    }

    .floating-card i {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .floating-card h6 {
        font-size: 10px;
    }

    .card-two {
        left: -5px;
    }

    .card-three {
        right: -5px;
    }

    .banner-features {
        margin-top: -15px;
    }

    .banner-features .row {
        padding: 10px;
        row-gap: 10px !important;
    }

    .feature-card {
        min-height: 85px;
        padding: 10px 3px;
    }

    .feature-card i {
        width: 39px;
        height: 39px;
        font-size: 17px;
        margin-bottom: 6px;
    }

    .feature-card h6 {
        font-size: 9px;
    }
}

/* =========================================================
VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {
    .hero-content h1 {
        font-size: 18px;
    }

    .hero-buttons .demo-btn,
    .hero-buttons .login-btn {
        min-width: 115px;
        padding: 10px 12px;
    }

    .hero-image-area {
        height: 315px;
    }

    .hero-main-image {
        width: 220px;
        height: 220px;
    }

    .floating-card {
        min-width: 112px;
    }

    .floating-card h6 {
        font-size: 9px;
    }

    .floating-card i {
        width: 31px;
        height: 31px;
        font-size: 14px;
    }
}

/* hero-banner-section-css-end */


/* about-section-css-start */

.about-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, #071B3B 0%, #06152f 100%);
    overflow: hidden;
}

/* Background Glow */

.about-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #0d6efd20 0%, transparent 70%);
    top: -180px;
    left: -150px;
    filter: blur(50px);
}

.about-section::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #FFD54A12 0%, transparent 70%);
    right: -120px;
    bottom: -120px;
    filter: blur(60px);
}

/*=========================================
            CONTENT
=========================================*/

.about-content {
    position: relative;
    z-index: 2;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 40px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #7ab8ff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 22px;
}

.section-tag i {
    color: #FFD54A;
}

.about-content h2 {
    color: #fff;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 20px;
}

.about-content h2 span {
    display: block;
    color: #FFD54A;
}

.about-content p {
    color: #c8d7ff;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 18px;
}

.about-content strong {
    color: #fff;
}

/*=========================================
        FEATURE LIST
=========================================*/

.about-feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 35px;
}

.about-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    transition: .35s;
}

.about-item:hover {
    transform: translateY(-5px);
    border-color: #FFD54A;
    background: rgba(255, 213, 74, .08);
}

.about-item i {
    color: #FFD54A;
    font-size: 20px;
}

.about-item span {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}


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

.about-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.about-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, #0d6efd30 0%, transparent 70%);
    filter: blur(45px);
    animation: pulseGlow 4s ease-in-out infinite;
}

.about-image img {
    position: relative;
    width: 100%;
    max-width: 500px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #fff;
    padding: 10px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
    z-index: 2;
}

/* Floating Card */

.about-image::before {
    content: "1000+ Businesses";
    position: absolute;
    top: 40px;
    left: -20px;
    padding: 14px 20px;
    border-radius: 14px;
    background: rgba(7, 27, 59, .92);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .30);
    animation: floatCard 4s ease-in-out infinite;
    z-index: 5;
}

.about-image::after {
    content: "GST Ready Software";
    position: absolute;
    bottom: 40px;
    right: -20px;
    padding: 14px 20px;
    border-radius: 14px;
    background: #FFD54A;
    color: #041C4A;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 15px 35px rgba(255, 213, 74, .35);
    animation: floatCard 4s ease-in-out infinite .8s;
    z-index: 5;
}

/*=========================================
            ANIMATION
=========================================*/

@keyframes floatCard {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}

@keyframes pulseGlow {

    0%, 100% {
        transform: scale(1);
        opacity: .8;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

}

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

@media(max-width:991px) {

    .about-section {
        padding: 80px 0;
    }

    .about-content {
        text-align: center;
        margin-bottom: 60px;
    }

    .about-content h2 {
        font-size: 32px;
    }

    .about-feature-list {
        grid-template-columns: 1fr 1fr;
    }

    .about-image::before {
        left: 0;
    }

    .about-image::after {
        right: 0;
    }

}

@media(max-width:767px) {

    .about-section {
        padding: 70px 0;
    }

    .about-content h2 {
        font-size: 25px;
    }

    .about-content p {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    .about-feature-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .about-image img {
        max-width: 100%;
    }

    .about-image::before,
    .about-image::after {
        font-size: 12px;
        padding: 10px 14px;
    }

    .about-image::before {
        top: 15px;
        left: 10px;
    }

    .about-image::after {
        right: 10px;
        bottom: 15px;
    }

    .about-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 12px;
        border-radius: 12px;
        justify-content: left;
        text-align: left;
        /* font-size: 13px; */
    }

    .about-item span {
        font-size: 11px;
    }

}

/* about-section-css-end */

/* company-section-css-start */

.company-showcase-section {
    position: relative;
    width: 100%;
    padding: 60px 0 60px;
    overflow: hidden;
    background: radial-gradient(circle at 15% 50%, rgba(0, 174, 255, 0.10), transparent 35%), radial-gradient(circle at 85% 40%, rgba(77, 92, 255, 0.12), transparent 35%), linear-gradient(180deg, #03163f 0%, #042448 50%, #031a3b 100%);
}

/* background-grid */
.company-showcase-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8), transparent);
    pointer-events: none;
}

/* background-glow */
.company-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    animation: companyGlowMove 8s ease-in-out infinite alternate;
}

.company-glow-one {
    width: 280px;
    height: 280px;
    top: 15%;
    left: -120px;
    background: rgba(0, 174, 255, 0.12);
}

.company-glow-two {
    width: 320px;
    height: 320px;
    right: -150px;
    bottom: 5%;
    background: rgba(84, 92, 255, 0.12);
    animation-delay: 2s;
}

/* section-heading- */
/* .company-section-heading {
    position: relative;
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
    z-index: 2;
} */

.company-section-heading {
    position: relative;
    max-width: 900px;
    margin: 0 auto 25px;
    text-align: center;
    z-index: 2;
}

/* section-tag- */
.company-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 18px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #9ccaff;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 25px rgba(0, 0, 0, 0.12);
}

.company-section-tag i {
    color: #FFD54A;
    font-size: 14px;
    animation: companyStarPulse 2s ease-in-out infinite;
}

/* heading */
.company-section-heading h2 {
    margin: 0 0 15px;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -1px;
}

.company-section-heading h2 span {
    display: inline-block;
    background: linear-gradient(90deg, #38bdf8 0%, #4f8cff 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: companyTextGradient 4s linear infinite;
}

.company-section-heading p {
    max-width: 620px;
    margin: 0 auto;
    color: #aebfdd;
    font-size: 15px;
    line-height: 1.7;
}

/* marquee-wrapper */
.company-marquee-wrapper {
    position: relative;
    width: 100%;
    z-index: 3;
}

/* =========================================================
LEFT / RIGHT FADE
========================================================= */

.company-marquee-wrapper::before,
.company-marquee-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 5;
    pointer-events: none;
}

.company-marquee-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, #031a3b, transparent);
}

.company-marquee-wrapper::after {
    right: 0;
    background: linear-gradient(270deg, #031a3b, transparent);
}

/* =========================================================
MARQUEE
========================================================= */

.company-marquee {
    width: 100%;
    overflow: hidden;
    padding: 15px 0 25px;
}

/* =========================================================
TRACK
========================================================= */

.company-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 22px;
    animation: companyInfiniteScroll 28s linear infinite;
    will-change: transform;
}

.company-marquee:hover .company-track {
    animation-play-state: paused;
}

/* =========================================================
COMPANY CARD
========================================================= */

.company-logo-card {
    position: relative;
    width: 190px;
    height: 105px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(18px);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

/* =========================================================
CARD GLOW
========================================================= */

.company-logo-card::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    top: -55px;
    right: -40px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.10);
    filter: blur(18px);
    transition: .4s ease;
}

.company-logo-card::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 1px;
    bottom: 0;
    left: 15%;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.45), transparent);
    opacity: 0;
    transition: .35s ease;
}

/* =========================================================
COMPANY LOGO
========================================================= */

/* .company-logo-card img {
    position: relative;
    z-index: 2;
    max-width: 135px;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(0) invert(1);
    opacity: 0.72;
    transition:
        transform .4s ease,
        opacity .4s ease,
        filter .4s ease;
} */
 .company-logo-card img {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 135px;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;

    opacity: 1;
    filter: none;

    transition:
        transform .4s ease,
        opacity .4s ease;
}

/* =========================================================
CARD HOVER
========================================================= */

.company-logo-card:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: rgba(56, 189, 248, 0.40);
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.10), rgba(255, 255, 255, 0.035));
    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.30),
        0 0 30px rgba(56, 189, 248, 0.08);
}

.company-logo-card:hover::before {
    transform: scale(1.7);
}

.company-logo-card:hover::after {
    opacity: 1;
}

/* .company-logo-card:hover img {
    opacity: 1;
    transform: scale(1.08);
    filter: grayscale(0%) brightness(1) invert(0);
} */

.company-logo-card:hover img {
    opacity: 1;
    transform: scale(1.08);
}

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

@keyframes companyInfiniteScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 11px));
    }
}

@keyframes companyGlowMove {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(40px, -20px, 0) scale(1.08);
    }

    100% {
        transform: translate3d(-20px, 30px, 0) scale(0.95);
    }
}

@keyframes companyStarPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes companyTextGradient {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* =========================================================
LARGE TABLET
========================================================= */

@media (max-width: 1199px) {
    .company-showcase-section {
        padding: 80px 0 75px;
    }

    .company-section-heading h2 {
        font-size: 34px;
    }

    .company-logo-card {
        width: 175px;
        height: 100px;
    }

    .company-track {
        gap: 18px;
    }
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {
    .company-showcase-section {
        padding: 70px 0 65px;
    }

    .company-section-heading {
        margin-bottom: 38px;
    }

    .company-section-heading h2 {
        font-size: 32px;
    }

    .company-section-heading p {
        font-size: 14px;
    }

    .company-logo-card {
        width: 160px;
        height: 92px;
        padding: 16px;
    }

    .company-logo-card img {
        max-width: 115px;
        max-height: 50px;
    }

    .company-marquee {
        padding-bottom: 20px;
    }

    .company-track {
        gap: 16px;
        animation-duration: 25s;
    }

    .company-marquee-wrapper::before,
    .company-marquee-wrapper::after {
        width: 100px;
    }
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {
    .company-showcase-section {
        padding: 55px 0 55px;
    }

    .company-section-heading {
        padding: 0 15px;
        margin-bottom: 30px;
    }

    .company-section-tag {
        padding: 7px 13px;
        font-size: 11px;
        margin-bottom: 15px;
    }

    .company-section-heading h2 {
        font-size: 27px;
        line-height: 1.3;
        letter-spacing: -0.5px;
    }

    .company-section-heading p {
        font-size: 13px;
        line-height: 1.6;
    }

    .company-logo-card {
        width: 145px;
        height: 82px;
        padding: 14px;
        border-radius: 14px;
    }

    .company-logo-card img {
        max-width: 105px;
        max-height: 43px;
    }

    .company-track {
        gap: 13px;
        animation-duration: 22s;
    }

    .company-marquee-wrapper::before,
    .company-marquee-wrapper::after {
        width: 60px;
    }
}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 576px) {
    .company-showcase-section {
        padding: 48px 0;
    }

    .company-section-heading {
        margin-bottom: 25px;
    }

    .company-section-heading h2 {
        font-size: 24px;
    }

    .company-section-heading p {
        font-size: 12px;
    }

    .company-logo-card {
        width: 125px;
        height: 72px;
        padding: 10px;
        border-radius: 12px;
    }

    .company-logo-card img {
        max-width: 90px;
        max-height: 38px;
    }

    .company-track {
        gap: 10px;
        animation-duration: 19s;
    }

    .company-marquee-wrapper::before,
    .company-marquee-wrapper::after {
        width: 35px;
    }
}

/* =========================================================
VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {
    .company-showcase-section {
        padding: 42px 0;
    }

    .company-section-heading h2 {
        font-size: 22px;
    }

    .company-section-heading p {
        font-size: 11px;
    }

    .company-logo-card {
        width: 112px;
        height: 65px;
    }

    .company-logo-card img {
        max-width: 80px;
        max-height: 34px;
    }

    .company-track {
        gap: 8px;
        animation-duration: 17s;
    }
}

/* company-section-css-end */


/* why-choose-us-section-css-start */

.why-choose-us-section {
    position: relative;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    background: linear-gradient(180deg, #071B3B 0%, #06152f 100%);
}

/* =========================================================
BACKGROUND EFFECT
========================================================= */

.why-choose-us-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .8), transparent);
    pointer-events: none;
}

.why-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: whyGlowMove 9s ease-in-out infinite alternate;
}

.why-glow-one {
    width: 350px;
    height: 350px;
    left: -180px;
    top: 10%;
    background: rgba(0, 174, 255, .12);
}

.why-glow-two {
    width: 400px;
    height: 400px;
    right: -200px;
    bottom: 8%;
    background: rgba(87, 92, 255, .12);
    animation-delay: 2s;
}

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

.why-section-heading {
    position: relative;
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
    z-index: 2;
}

.why-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 10px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #9ccaff;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 8px 25px rgba(0, 0, 0, .15);
}

.why-section-tag i {
    color: #FFD54A;
    font-size: 14px;
    animation: whyIconPulse 2s ease-in-out infinite;
}

.why-section-heading h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1px;
}

.why-section-heading h2 span {
    background: linear-gradient(90deg, #38bdf8, #4f8cff, #8b5cf6);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: whyGradientMove 4s linear infinite;
}

.why-section-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: #aebfdd;
    font-size: 14px;
    line-height: 1.8;
}

/* =========================================================
FEATURE CARDS
========================================================= */

.why-feature-grid {
    position: relative;
    z-index: 2;
}

.why-feature-card {
    position: relative;
    height: 100%;
    min-height: 205px;
    padding: 28px 22px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018));
    border: 1px solid rgba(255, 255, 255, .09);
    backdrop-filter: blur(18px);
    overflow: hidden;
    transition: all .4s ease;
}

.why-feature-card::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    top: -65px;
    right: -55px;
    border-radius: 50%;
    background: rgba(56, 189, 248, .10);
    filter: blur(20px);
    transition: .45s ease;
}

.why-feature-card::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 213, 74, .6), transparent);
    opacity: 0;
    transition: .4s ease;
}

.why-feature-card:hover {
    transform: translateY(-9px);
    border-color: rgba(255, 213, 74, .38);
    background: linear-gradient(145deg, rgba(255, 213, 74, .09), rgba(255, 255, 255, .025));
    box-shadow:
        0 25px 55px rgba(0, 0, 0, .28),
        0 0 30px rgba(255, 213, 74, .06);
}

.why-feature-card:hover::before {
    transform: scale(1.7);
}

.why-feature-card:hover::after {
    opacity: 1;
}

.why-feature-icon {
    position: relative;
    z-index: 2;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 15px;
    color: #FFD54A;
    background: linear-gradient(135deg, rgba(255, 213, 74, .16), rgba(255, 213, 74, .04));
    border: 1px solid rgba(255, 213, 74, .15);
    font-size: 23px;
    transition: .4s ease;
}

.why-feature-card:hover .why-feature-icon {
    transform: scale(1.08) rotate(-4deg);
    background: #FFD54A;
    color: #071B3B;
    box-shadow: 0 10px 25px rgba(255, 213, 74, .18);
}

.why-feature-card h5 {
    position: relative;
    z-index: 2;
    margin: 0 0 9px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.why-feature-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #9eb3d4;
    font-size: 12px;
    line-height: 1.65;
}

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

.why-industries-section {
    position: relative;
    margin-top: 105px;
    z-index: 2;
}

.why-industry-heading {
    margin-bottom: 38px;
}

.industry-card {
    position: relative;
    min-height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    padding: 15px;
    text-align: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .075);
    color: #fff;
    overflow: hidden;
    transition: all .35s ease;
}

.industry-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(56, 189, 248, .10), transparent 65%);
    opacity: 0;
    transition: .4s ease;
}

.industry-card i,
.industry-card span {
    position: relative;
    z-index: 2;
}

.industry-card i {
    color: #FFD54A;
    font-size: 21px;
    transition: .35s ease;
}

.industry-card span {
    font-size: 12px;
    font-weight: 600;
}

.industry-card:hover {
    transform: translateY(-6px);
    border-color: rgba(56, 189, 248, .35);
    background: rgba(56, 189, 248, .06);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .22);
}

.industry-card:hover::before {
    opacity: 1;
}

.industry-card:hover i {
    transform: translateY(-3px) scale(1.12);
}

/* =========================================================
COMMITMENT
========================================================= */

.why-commitment {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-top: 105px;
    padding: 45px;
    border-radius: 25px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018));
    border: 1px solid rgba(255, 255, 255, .11);
    backdrop-filter: blur(20px);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    overflow: hidden;
}

.why-commitment::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    top: -180px;
    right: -100px;
    border-radius: 50%;
    background: rgba(56, 189, 248, .09);
    filter: blur(30px);
}

.why-commitment-icon {
    position: relative;
    flex-shrink: 0;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #071B3B;
    background: linear-gradient(135deg, #FFD54A, #ffbe28);
    font-size: 30px;
    box-shadow: 0 12px 30px rgba(255, 193, 7, .18);
    animation: commitmentFloat 4s ease-in-out infinite;
}

.why-commitment-content {
    position: relative;
    z-index: 2;
}

.why-small-label {
    display: inline-block;
    margin-bottom: 10px;
    color: #FFD54A;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.why-commitment-content h3 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
}

.why-commitment-content h3 span {
    color: #38bdf8;
}

.why-commitment-content p {
    margin: 0 0 13px;
    color: #aebfdd;
    font-size: 14px;
    line-height: 1.8;
}

.why-commitment-content strong {
    color: #fff;
}

.why-commitment-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 20px;
    border-radius: 11px;
    background: linear-gradient(135deg, #FFD54A, #ffbf2f);
    color: #071B3B;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(255, 193, 7, .18);
    transition: .3s ease;
}

.why-commitment-btn:hover {
    transform: translateY(-3px);
    color: #071B3B;
    box-shadow: 0 15px 32px rgba(255, 193, 7, .28);
}

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

@keyframes whyGlowMove {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(45px, -25px, 0) scale(1.08);
    }

    100% {
        transform: translate3d(-25px, 30px, 0) scale(.95);
    }
}

@keyframes whyIconPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

@keyframes whyGradientMove {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes commitmentFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* =========================================================
LARGE TABLET
========================================================= */

@media (max-width: 1199px) {
    .why-choose-us-section {
        padding: 85px 0;
    }

    .why-section-heading h2 {
        font-size: 36px;
    }

    .why-feature-card {
        min-height: 195px;
    }
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {
    .why-choose-us-section {
        padding: 75px 0;
    }

    .why-section-heading {
        margin-bottom: 42px;
    }

    .why-section-heading h2 {
        font-size: 32px;
    }

    .why-feature-card {
        min-height: 185px;
        padding: 24px 18px;
    }

    .why-industries-section {
        margin-top: 80px;
    }

    .why-commitment {
        margin-top: 80px;
        padding: 35px;
    }
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {
    .why-choose-us-section {
        padding: 60px 0;
    }

    .why-section-heading {
        padding: 0 15px;
        margin-bottom: 32px;
    }

    .why-section-tag {
        padding: 7px 13px;
        font-size: 11px;
        margin-bottom: 14px;
    }

    .why-section-heading h2 {
        font-size: 27px;
        line-height: 1.3;
    }

    .why-section-heading p {
        font-size: 13px;
        line-height: 1.65;
    }

    .why-feature-card {
        min-height: 175px;
        padding: 21px 16px;
        border-radius: 15px;
    }

    .why-feature-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 14px;
        border-radius: 13px;
        font-size: 20px;
    }

    .why-feature-card h5 {
        font-size: 13px;
    }

    .why-feature-card p {
        font-size: 11px;
    }

    .why-industries-section {
        margin-top: 65px;
    }

    .why-industry-heading {
        margin-bottom: 28px;
    }

    .industry-card {
        min-height: 85px;
        padding: 12px 8px;
    }

    .industry-card i {
        font-size: 19px;
    }

    .industry-card span {
        font-size: 10px;
    }

    .why-commitment {
        flex-direction: column;
        gap: 22px;
        margin-top: 65px;
        padding: 28px 22px;
        border-radius: 20px;
    }

    .why-commitment-icon {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        font-size: 24px;
    }

    .why-commitment-content h3 {
        font-size: 24px;
    }

    .why-commitment-content p {
        font-size: 12px;
        line-height: 1.7;
    }
}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 576px) {
    .why-choose-us-section {
        padding: 50px 0;
    }

    .why-section-heading h2 {
        font-size: 24px;
    }

    .why-section-heading p {
        font-size: 12px;
    }

    .why-feature-card {
        min-height: 160px;
        padding: 18px 12px;
    }

    .why-feature-icon {
        width: 43px;
        height: 43px;
        font-size: 18px;
        margin-bottom: 11px;
    }

    .why-feature-card h5 {
        font-size: 12px;
    }

    .why-feature-card p {
        font-size: 10px;
    }

    .industry-card {
        min-height: 78px;
    }

    .industry-card i {
        font-size: 17px;
    }

    .industry-card span {
        font-size: 9px;
    }

    .why-commitment {
        padding: 23px 17px;
    }

    .why-commitment-content h3 {
        font-size: 21px;
    }

    .why-commitment-content p {
        font-size: 11px;
    }

    .why-commitment-btn {
        padding: 10px 16px;
        font-size: 11px;
    }
}

/* =========================================================
VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {
    .why-section-heading h2 {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .why-feature-card {
        min-height: 150px;
    }

    .why-feature-card h5 {
        font-size: 11px;
    }

    .why-feature-card p {
        font-size: 9px;
    }

    .industry-card {
        min-height: 72px;
    }

    .industry-card span {
        font-size: 8px;
    }

    .why-commitment-content h3 {
        font-size: 19px;
    }
}

@media (max-width: 576px) {

    .why-feature-grid {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    .why-feature-grid>div {
        width: 50%;
    }

    .why-feature-card {
        min-height: 160px;
        padding: 18px 10px;
    }

    .why-feature-icon {
        width: 43px;
        height: 43px;
        font-size: 18px;
        margin-bottom: 11px;
    }

    .why-feature-card h5 {
        font-size: 12px;
    }

    .why-feature-card p {
        font-size: 10px;
    }
}


/* why-choose-us-section-css-end */

/* who-we-are-section-css-start */

.who-we-are-section {
    position: relative;
    width: 100%;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    overflow: hidden;
    background-image: url("../img/who-we-are.webp");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* =========================================================
DARK OVERLAY
========================================================= */
.who-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(2, 8, 23, 0.7), rgba(4, 29, 76, 0.88));
    z-index: 1;
}

/* =========================================================
BACKGROUND GLOW
========================================================= */
.who-we-are-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -180px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(0, 174, 255, 0.12);
    filter: blur(100px);
    animation: whoGlowLeft 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 2;
}

.who-we-are-section::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    right: -180px;
    bottom: -150px;
    border-radius: 50%;
    background: rgba(77, 92, 255, 0.14);
    filter: blur(100px);
    animation: whoGlowRight 9s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 2;
}

/* =========================================================
CONTAINER
========================================================= */
.who-we-are-section .container {
    position: relative;
    z-index: 5;
}

/* content-box */

/* .who-content {
    position: relative;
    max-width: 850px;
    margin: 0 auto;
    padding: 55px 60px;
    text-align: center;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.025));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
    overflow: hidden;
    animation: whoContentFloat 5s ease-in-out infinite;
} */
.who-content {
    position: relative;
    max-width: 850px;
    margin: 0 auto;
    padding: 55px 60px;
    text-align: center;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(51, 49, 233, 0.4), rgba(223, 35, 167, 0.21));
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    overflow: hidden;
    animation: whoContentFloat 5s ease-in-out infinite;
}

/* =========================================================
CONTENT TOP GLOW
========================================================= */
.who-content::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.13);
    filter: blur(35px);
    pointer-events: none;
}

/* =========================================================
CONTENT BORDER LIGHT
========================================================= */
.who-content::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 213, 74, 0.7), rgba(56, 189, 248, 0.7), transparent);
    animation: whoBorderGlow 4s ease-in-out infinite;
}

/* =========================================================
SECTION TAG
========================================================= */
.who-section-tag {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 17px;
    margin-bottom: 8px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #9ccaff;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 25px rgba(0, 0, 0, 0.15);
}

.who-section-tag i {
    color: #FFD54A;
    font-size: 14px;
    animation: whoTagPulse 2s ease-in-out infinite;
}

/* heading */
.who-content h2 {
    position: relative;
    z-index: 2;
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1px;
}

.who-content h2 span {
    background: linear-gradient(90deg, #38bdf8, #4f8cff, #8b5cf6);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: whoTextGradient 4s linear infinite;
}

/* =========================================================
PARAGRAPH
========================================================= */
.who-content p {
    position: relative;
    z-index: 2;
    max-width: 730px;
    margin: 0 auto 10px;
    color: #b8c8e4;
    font-size: 14px;
    line-height: 1.9;
}

.who-content p strong {
    color: #ffffff;
    font-weight: 700;
}

/* =========================================================
BOTTOM FEATURES
========================================================= */
.who-bottom-line {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.who-info-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #aebfdd;
    font-size: 12px;
    font-weight: 600;
}

.who-info-item i {
    color: #FFD54A;
    font-size: 13px;
}

/* =========================================================
ANIMATIONS
========================================================= */
@keyframes whoGlowLeft {
    0% {
        transform: translateY(-50%) translateX(0) scale(1);
    }

    100% {
        transform: translateY(-50%) translateX(70px) scale(1.12);
    }
}

@keyframes whoGlowRight {
    0% {
        transform: translateX(0) scale(1);
    }

    100% {
        transform: translateX(-60px) scale(1.12);
    }
}

@keyframes whoContentFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes whoBorderGlow {
    0%, 100% {
        opacity: 0.45;
    }

    50% {
        opacity: 1;
    }
}

@keyframes whoTagPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

@keyframes whoTextGradient {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* =========================================================
LARGE TABLET
========================================================= */
@media (max-width: 1199px) {
    .who-we-are-section {
        min-height: 600px;
        padding: 85px 0;
    }

    .who-content {
        max-width: 800px;
        padding: 50px;
    }

    .who-content h2 {
        font-size: 38px;
    }
}

/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
    .who-we-are-section {
        min-height: auto;
        padding: 75px 0;
    }

    .who-content {
        max-width: 720px;
        padding: 45px 40px;
    }

    .who-content h2 {
        font-size: 34px;
    }

    .who-content p {
        font-size: 13px;
        line-height: 1.8;
    }

    .who-bottom-line {
        gap: 12px 20px;
    }
}

/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
    .who-we-are-section {
        padding: 60px 0;
        /* background-attachment: scroll; */
        background-position: center;
    }

    .who-content {
        padding: 35px 22px;
        border-radius: 21px;
    }

    .who-section-tag {
        padding: 7px 13px;
        font-size: 11px;
        margin-bottom: 15px;
    }

    .who-content h2 {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .who-content p {
        font-size: 12px;
        line-height: 1.75;
        margin-bottom: 14px;
    }

    .who-bottom-line {
        flex-direction: column;
        /* align-items: flex-start; */
        gap: 0px;
        margin-top: 15px;
        padding-top: 10px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .who-info-item {
        font-size: 11px;
    }
}

/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 576px) {
    .who-we-are-section {
        padding: 50px 0;
    }

    .who-content {
        padding: 30px 18px;
        border-radius: 18px;
    }

    .who-content h2 {
        font-size: 25px;
    }

    .who-content p {
        font-size: 11px;
        line-height: 1.7;
    }

    .who-info-item {
        font-size: 10px;
        text-align: left;
    }

    .who-info-item i {
        font-size: 12px;
    }
}

/* =========================================================
VERY SMALL DEVICES
========================================================= */
@media (max-width: 380px) {
    .who-we-are-section {
        padding: 42px 0;
    }

    .who-content {
        padding: 26px 15px;
    }

    .who-content h2 {
        font-size: 22px;
    }

    .who-content p {
        font-size: 10px;
    }

    .who-section-tag {
        font-size: 10px;
    }

    .who-info-item {
        font-size: 9px;
        /* align-items: start; */
        text-align: left;
        justify-content: left;
        gap: 3px;
    }


}

/* who-we-are-section-css-end */

/* mission-vision-section-css-start */

.mission-vision-section {
    position: relative;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 20%,
            rgba(0, 174, 255, 0.08),
            transparent 32%),
        radial-gradient(circle at 90% 80%,
            rgba(139, 92, 246, 0.08),
            transparent 32%),
        linear-gradient(180deg,
            #071B3B 0%,
            #06152f 100%);
}

/* Background Grid */

.mission-vision-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px);
    background-size: 55px 55px;
    mask-image: linear-gradient(to bottom,
            transparent,
            rgba(0, 0, 0, .8),
            transparent);
    pointer-events: none;
}

/* Floating Glow */

.mission-vision-section::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -180px;
    top: 15%;
    border-radius: 50%;
    background: rgba(56, 189, 248, .08);
    filter: blur(90px);
    animation: missionGlowMove 8s ease-in-out infinite alternate;
    pointer-events: none;
}

/* =========================================================
HEADING
========================================================= */
.mission-vision-heading {
    position: relative;
    z-index: 2;
    max-width: 830px;
    margin: 0 auto 35px;
    text-align: center;
}

.mission-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 18px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #9ccaff;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(12px);
}

.mission-section-tag i {
    color: #FFD54A;
    animation: missionIconPulse 2s ease-in-out infinite;
}

.mission-vision-heading h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 38px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -1px;
}

.mission-vision-heading h2 span {
    background: linear-gradient(90deg,
            #38bdf8,
            #4f8cff,
            #8b5cf6);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: missionGradient 4s linear infinite;
}

.mission-vision-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: #aebfdd;
    font-size: 14px;
    line-height: 1.8;
}

/* =========================================================
CARDS
========================================================= */

.mission-vision-card {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 38px;
    border-radius: 24px;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .075),
            rgba(255, 255, 255, .018));
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(18px);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden;
    transition: .4s ease;
}

.mission-vision-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -100px;
    right: -70px;
    border-radius: 50%;
    background: rgba(56, 189, 248, .09);
    filter: blur(25px);
    transition: .5s ease;
}

.mission-vision-card:hover {
    transform: translateY(-8px);
    border-color: rgba(56, 189, 248, .32);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, .35),
        0 0 35px rgba(56, 189, 248, .06);
}

.mission-vision-card:hover::before {
    transform: scale(1.5);
}

/* =========================================================
CARD ICON
========================================================= */

.mission-card-icon {
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border-radius: 17px;
    background: linear-gradient(135deg,
            rgba(255, 213, 74, .16),
            rgba(255, 213, 74, .04));
    border: 1px solid rgba(255, 213, 74, .18);
    color: #FFD54A;
    font-size: 26px;
    box-shadow: 0 10px 25px rgba(255, 213, 74, .06);
    transition: .4s ease;
}

.mission-vision-card:hover .mission-card-icon {
    transform: scale(1.08) rotate(-5deg);
    background: #FFD54A;
    color: #071B3B;
    box-shadow: 0 12px 30px rgba(255, 213, 74, .18);
}

/* =========================================================
CARD CONTENT
========================================================= */

.mission-card-content {
    position: relative;
    z-index: 2;
}

.mission-card-label {
    display: inline-block;
    margin-bottom: 9px;
    color: #38bdf8;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.mission-card-content h3 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 25px;
    line-height: 1.35;
    font-weight: 800;
}

.mission-card-content p {
    margin: 0;
    color: #aebfdd;
    font-size: 14px;
    line-height: 1.85;
}

/* =========================================================
MISSION LIST
========================================================= */

.mission-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.mission-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    color: #aebfdd;
    font-size: 13px;
    line-height: 1.65;
}

.mission-list li:last-child {
    margin-bottom: 0;
}

.mission-list li i {
    flex-shrink: 0;
    margin-top: 3px;
    color: #FFD54A;
    font-size: 15px;
}

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

@keyframes missionGlowMove {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-35px, 25px, 0) scale(1.08);
    }

    100% {
        transform: translate3d(20px, -25px, 0) scale(.95);
    }
}

@keyframes missionIconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

@keyframes missionGradient {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* =========================================================
LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

    .mission-vision-section {
        padding: 85px 0;
    }

    .mission-vision-heading h2 {
        font-size: 36px;
    }

    .mission-vision-card {
        padding: 32px;
    }
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {

    .mission-vision-section {
        padding: 75px 0;
    }

    .mission-vision-heading {
        margin-bottom: 42px;
    }

    .mission-vision-heading h2 {
        font-size: 32px;
    }

    .mission-vision-card {
        padding: 28px;
    }

    .mission-card-content h3 {
        font-size: 22px;
    }
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {

    .mission-vision-section {
        padding: 60px 0;
    }

    .mission-vision-heading {
        padding: 0 15px;
        margin-bottom: 32px;
    }

    .mission-section-tag {
        padding: 7px 13px;
        font-size: 11px;
        margin-bottom: 14px;
    }

    .mission-vision-heading h2 {
        font-size: 27px;
        line-height: 1.3;
    }

    .mission-vision-heading p {
        font-size: 13px;
        line-height: 1.65;
    }

    .mission-vision-card {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .mission-card-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 18px;
        border-radius: 14px;
        font-size: 22px;
    }

    .mission-card-label {
        font-size: 11px;
    }

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

    .mission-card-content p {
        font-size: 12px;
        line-height: 1.75;
    }

    .mission-list li {
        gap: 9px;
        margin-bottom: 12px;
        font-size: 11px;
        line-height: 1.6;
    }

    .mission-list li i {
        font-size: 13px;
    }
}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .mission-vision-section {
        padding: 50px 0;
    }

    .mission-vision-heading h2 {
        font-size: 24px;
    }

    .mission-vision-heading p {
        font-size: 12px;
    }

    .mission-vision-card {
        padding: 21px 17px;
    }

    .mission-card-content h3 {
        font-size: 18px;
    }

    .mission-card-content p {
        font-size: 11px;
    }

    .mission-list li {
        font-size: 10px;
    }
}

/* =========================================================
VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

    .mission-vision-heading h2 {
        font-size: 22px;
    }

    .mission-vision-heading p {
        font-size: 11px;
    }

    .mission-vision-card {
        padding: 19px 14px;
    }

    .mission-card-content h3 {
        font-size: 17px;
    }

    .mission-card-content p {
        font-size: 10px;
    }

    .mission-list li {
        font-size: 9px;
    }
}

/* mission-vision-section-css-end */

/* faq-section-css-start */

.faq-section {
    position: relative;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 45%,
            rgba(0, 174, 255, .08),
            transparent 30%),
        radial-gradient(circle at 92% 55%,
            rgba(255, 213, 74, .05),
            transparent 30%),
        linear-gradient(180deg,
            #071B3B 0%,
            #04122b 100%);
}

.faq-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .015) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .015) 1px,
            transparent 1px);
    background-size: 55px 55px;
    pointer-events: none;
}

.faq-content {
    position: relative;
    z-index: 2;
}

.faq-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 18px;
    border-radius: 50px;
    background: #0b2855;
    border: 1px solid #1a4274;
    color: #9ccaff;
    font-size: 12px;
    font-weight: 600;
}

.faq-section-tag i {
    color: #FFD54A;
    font-size: 14px;
    animation: faqTagPulse 2s ease-in-out infinite;
}

.faq-content h2 {
    max-width: 700px;
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -1px;
}

.faq-content h2 span {
    display: inline-block;
    background:
        linear-gradient(90deg,
            #38bdf8,
            #4f8cff,
            #FFD54A);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: faqGradientMove 4s linear infinite;
}

.faq-intro {
    max-width: 650px;
    margin: 0 0 20px;
    color: #9eb3d4;
    font-size: 14px;
    line-height: 1.8;
}

.faq-list {
    position: relative;
    width: 100%;
}

.faq-item {
    position: relative;
    margin-bottom: 14px;
    background: #0a2349;
    border: 1px solid #163966;
    border-radius: 28px 42px 28px 42px;
    overflow: hidden;
    transition:
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.faq-item:hover {
    border-color: #285687;
}

.faq-item.active {
    background: #0c2a55;
    border-color: rgba(255, 213, 74, .38);
    box-shadow:
        0 12px 35px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .03);
}

.faq-question {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 24px;
    border: 0;
    outline: none;
    background: transparent;
    color: #ffffff;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.faq-question span {
    line-height: 1.5;
}

.faq-question i {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #12335f;
    color: #FFD54A;
    font-size: 11px;
    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
    background: #FFD54A;
    color: #071B3B;
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition:
        grid-template-rows .4s ease,
        padding .4s ease;
    padding: 0 24px;
}

.faq-answer p {
    min-height: 0;
    overflow: hidden;
    margin: 0;
    color: #9eb3d4;
    font-size: 12px;
    line-height: 1.75;
    opacity: 0;
    transform: translateY(-5px);
    transition:
        opacity .3s ease,
        transform .3s ease;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
    padding-bottom: 20px;
}

.faq-item.active .faq-answer p {
    opacity: 1;
    transform: translateY(0);
}

.faq-image-area {
    position: relative;
    min-height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.faq-image-shape {
    position: relative;
    width: 490px;
    height: 490px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 48% 52% 45% 55% / 52% 46% 54% 48%;
    background: #0b2852;
    border: 6px solid rgb(255, 213, 74);
    box-shadow: 0 35px 80px rgba(0, 0, 0, .35), 0 0 50px rgba(0, 174, 255, .08);
    animation: faqShapeFloat 6s ease-in-out infinite;
}

.faq-image-shape img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .92;
    transform: scale(1.04);
    transition: transform .8s ease;
}

.faq-image-shape:hover img {
    transform: scale(1.10);
}

.faq-image-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(56, 189, 248, .18);
    filter: blur(70px);
    z-index: 2;
    pointer-events: none;
    animation: faqImageGlow 4s ease-in-out infinite alternate;
}

.faq-orbit {
    position: absolute;
    border: 1px solid rgba(56, 189, 248, .15);
    border-radius: 50%;
    pointer-events: none;
}

.faq-orbit-one {
    width: 480px;
    height: 480px;
    animation: faqOrbitRotate 18s linear infinite;
}

.faq-orbit-two {
    width: 540px;
    height: 540px;
    border-color: rgba(255, 213, 74, .08);
    animation:
        faqOrbitRotateReverse 24s linear infinite;
}

.faq-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    background: #0b2852;
    border: 1px solid #214a78;
    border-radius: 14px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, .28);
    z-index: 5;
    animation: faqFloating 4s ease-in-out infinite;
}

.faq-floating-card i {
    color: #FFD54A;
    font-size: 15px;
}

.faq-card-one {
    top: 19%;
    left: 2%;
}

.faq-card-two {
    right: 0;
    top: 43%;
    animation-delay: 1s;
}

.faq-card-three {
    left: 8%;
    bottom: 16%;
    animation-delay: 2s;
}

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

@keyframes faqTagPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

@keyframes faqGradientMove {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes faqShapeFloat {

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

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

@keyframes faqImageGlow {

    0% {
        transform: translate(-50%, -50%) scale(.8);
        opacity: .45;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: .8;
    }
}

@keyframes faqOrbitRotate {

    from {
        transform: rotate(0deg);
    }

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

@keyframes faqOrbitRotateReverse {

    from {
        transform: rotate(360deg);
    }

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

@keyframes faqFloating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

/* =========================================================
LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

    .faq-section {
        padding: 85px 0;
    }

    .faq-content h2 {
        font-size: 36px;
    }

    .faq-image-area {
        min-height: 500px;
    }

    .faq-image-shape {
        width: 360px;
        height: 440px;
    }

    .faq-orbit-one {
        width: 420px;
        height: 420px;
    }

    .faq-orbit-two {
        width: 470px;
        height: 470px;
    }
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {

    .faq-section {
        padding: 75px 0;
    }

    .faq-content h2 {
        font-size: 32px;
    }

    .faq-intro {
        font-size: 13px;
    }

    .faq-image-area {
        min-height: 460px;
        margin-top: 15px;
    }

    .faq-image-shape {
        width: 410px;
        height: 410px;
    }

    .faq-orbit-one {
        width: 390px;
        height: 390px;
    }

    .faq-orbit-two {
        width: 440px;
        height: 440px;
    }
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {

    .faq-section {
        padding: 60px 0;
    }

    .faq-content {
        padding: 0 8px;
    }

    .faq-section-tag {
        padding: 7px 13px;
        font-size: 11px;
        margin-bottom: 14px;
    }

    .faq-content h2 {
        font-size: 27px;
        line-height: 1.3;
    }

    .faq-intro {
        font-size: 12px;
        line-height: 1.7;
        margin-bottom: 28px;
    }

    .faq-item {
        margin-bottom: 11px;

        border-radius:
            22px 32px 22px 32px;
    }

    .faq-question {
        padding: 16px 17px;

        font-size: 12px;

        gap: 12px;
    }

    .faq-question i {
        width: 27px;
        height: 27px;

        font-size: 10px;
    }

    .faq-answer {
        padding-left: 17px;
        padding-right: 17px;
    }

    .faq-item.active .faq-answer {
        padding-bottom: 17px;
    }

    .faq-answer p {
        font-size: 10px;
        line-height: 1.7;
    }

    .faq-image-area {
        min-height: 390px;
        margin-top: 20px;
    }

    .faq-image-shape {
        width: 340px;
        height: 340px;
    }

    .faq-orbit-one {
        width: 320px;
        height: 320px;
    }

    .faq-orbit-two {
        width: 365px;
        height: 365px;
    }

    .faq-floating-card {
        padding: 8px 11px;
        border-radius: 10px;
        font-size: 9px;
    }

    .faq-floating-card i {
        font-size: 12px;
    }

    .faq-card-one {
        left: 2%;
        top: 15%;
    }

    .faq-card-two {
        right: 0;
        top: 42%;
    }

    .faq-card-three {
        left: 5%;
        bottom: 13%;
    }
}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .faq-section {
        padding: 50px 0;
    }

    .faq-content h2 {
        font-size: 24px;
    }

    .faq-intro {
        font-size: 11px;
    }

    .faq-question {
        padding: 14px 14px;
        font-size: 11px;
    }

    .faq-answer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .faq-answer p {
        font-size: 9px;
    }

    .faq-image-area {
        min-height: 330px;
    }

    .faq-image-shape {
        width: 290px;
        height: 290px;
    }

    .faq-orbit-one {
        width: 275px;
        height: 275px;
    }

    .faq-orbit-two {
        width: 315px;
        height: 315px;
    }

    .faq-floating-card {
        font-size: 8px;
        padding: 7px 9px;
    }

    .faq-floating-card i {
        font-size: 10px;
    }
}

/* =========================================================
VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

    .faq-section {
        padding: 42px 0;
    }

    .faq-content h2 {
        font-size: 22px;
    }

    .faq-intro {
        font-size: 10px;
    }

    .faq-question {
        font-size: 10px;
    }

    .faq-answer p {
        font-size: 8px;
    }

    .faq-image-area {
        min-height: 290px;
    }

    .faq-image-shape {
        width: 205px;
        height: 260px;
    }

    .faq-orbit-one {
        width: 245px;
        height: 245px;
    }

    .faq-orbit-two {
        width: 280px;
        height: 280px;
    }
}

/* faq-section-css-end */


/* demo-section-css-start */


/* =========================================================
DEMO SECTION
========================================================= */

.demo-section {
    position: relative;
    width: 100%;
    padding: 38px 0;
    background: linear-gradient(135deg, #071B3B 0%, #04132d 100%);
    overflow: hidden;
}

.demo-section::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -150px;
    top: -180px;
    border-radius: 50%;
    background: rgba(0, 174, 255, .10);
    filter: blur(70px);
    animation: demoGlow 6s ease-in-out infinite alternate;
}

.demo-section::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -120px;
    bottom: -160px;
    border-radius: 50%;
    background: rgba(255, 213, 74, .07);
    filter: blur(70px);
    animation: demoGlow 7s ease-in-out infinite alternate-reverse;
}

.demo-content {
    position: relative;
    z-index: 2;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 25px 35px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background: #092044;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .22);
}

.demo-left {
    flex: 1;
}

.demo-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: #FFD54A;
    font-size: 11px;
    font-weight: 700;
}

.demo-tag i {
    font-size: 13px;
    animation: demoPulse 2s ease-in-out infinite;
}

.demo-left h2 {
    margin: 0;
    color: #ffffff;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 800;
}

.demo-left h2 span {
    color: #38bdf8;
}

.demo-right {
    flex-shrink: 0;
}

.demo-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 21px;
    border-radius: 10px;
    background: #FFD54A;
    color: #071B3B;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(255, 213, 74, .16);
    transition: all .3s ease;
}

.demo-action-btn:hover {
    transform: translateY(-3px);
    color: #071B3B;
    box-shadow: 0 12px 28px rgba(255, 213, 74, .25);
}

.demo-action-btn i {
    font-size: 15px;
}

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

@keyframes demoGlow {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(30px, 20px) scale(1.12);
    }
}

@keyframes demoPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {

    .demo-section {
        padding: 32px 0;
    }

    .demo-content {
        padding: 22px 28px;
    }

    .demo-left h2 {
        font-size: 22px;
    }

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {

    .demo-section {
        padding: 28px 0;
    }

    .demo-content {
        min-height: auto;
        padding: 22px 20px;
        border-radius: 15px;
        gap: 20px;
    }

    .demo-left h2 {
        font-size: 19px;
    }

    .demo-tag {
        font-size: 10px;
    }

    .demo-action-btn {
        padding: 10px 15px;
        font-size: 10px;
        white-space: nowrap;
    }

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .demo-section {
        padding: 22px 0;
    }

    .demo-content {
        padding: 18px 15px;
        gap: 12px;
    }

    .demo-left h2 {
        font-size: 15px;
    }

    .demo-tag {
        margin-bottom: 5px;
        font-size: 9px;
    }

    .demo-action-btn {
        padding: 9px 12px;
        font-size: 9px;
    }

    .demo-action-btn i {
        font-size: 12px;
    }

}

/* demo-section-css-end */



/* footer-section-css-start */

.site-footer {
    position: relative;
    width: 100%;
    padding: 80px 0 25px;
    background:
        radial-gradient(circle at 10% 20%, rgba(0, 174, 255, 0.06), transparent 30%),
        radial-gradient(circle at 90% 70%, rgba(77, 92, 255, 0.06), transparent 30%),
        #02060d;
    color: #ffffff;
    overflow: hidden;
}

/* subtle grid */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
    background-size: 55px 55px;
    pointer-events: none;
}

/* footer-main */
.footer-main {
    position: relative;
    z-index: 2;
    padding-bottom: 60px;
}

.footer-column {
    position: relative;
}


.footer-column h5 {
    position: relative;
    margin: 0 0 22px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.footer-column h5::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    margin-top: 9px;
    border-radius: 10px;
    background: #FFD54A;
}

/* logo */
.footer-logo {
    display: inline-block;
    margin-bottom: 18px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -0.5px;
}

.footer-logo span {
    color: #38bdf8;
}

.footer-about p {
    max-width: 300px;
    margin: 0 0 22px;
    color: #fff;
    font-size: 14px;
    line-height: 1.8;
}

/* social */
.footer-social {
    display: flex;
    align-items: center;
    gap: 9px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #aebfdd;
    font-size: 17px;
    text-decoration: none;
    transition: all .3s ease;
    /* color: #fff; */
}

.footer-social a:hover {
    transform: translateY(-4px);
    background: #FFD54A;
    border-color: #FFD54A;
    color: #071B3B;
    box-shadow: 0 8px 20px rgba(255, 213, 74, 0.15);
}

/* footer-links */
.footer-links {
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: all .3s ease;
}

.footer-links a::before {
    content: "›";
    margin-right: 7px;
    color: #FFD54A;
    font-size: 15px;
    transition: .3s ease;
}

.footer-links a:hover {
    color: #ffffff;
    transform: translateX(4px);
}

.footer-links a:hover::before {
    color: #38bdf8;
}

/* contact */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
}

.footer-contact-item i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #FFD54A;
    font-size: 14px;
}

.footer-contact-item a {
    color: #fff;
    text-decoration: none;
    transition: .3s ease;
}

.footer-contact-item a:hover {
    color: #ffffff;
}

/* book-now-button */
.footer-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 11px 19px;
    border-radius: 10px;
    background: linear-gradient(135deg, #FFD54A, #ffbf2f);
    color: #071B3B;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(255, 193, 7, 0.15);
    transition: all .3s ease;
}

.footer-book-btn:hover {
    transform: translateY(-3px);
    color: #071B3B;
    box-shadow: 0 15px 30px rgba(255, 193, 7, 0.25);
}

/* copyright-box */
.footer-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 15px 40px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(15px);
}

.footer-bottom-left span {
    color: #fff;
    font-size: 14px;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-bottom-links a {
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    transition: .3s ease;
}

.footer-bottom-links a:hover {
    color: #FFD54A;
}

/* large-tablet */
@media (max-width: 1199px) {
    .site-footer {
        padding-top: 70px;
    }


}

/* tablet */
@media (max-width: 991px) {

    .footer-about p {
        max-width: 330px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* mobile */
@media (max-width: 767px) {
    .site-footer {
        padding: 55px 0 20px;
    }

    .footer-about {
        grid-column: span 2;
    }

    /* .footer-contact {
        grid-column: span 2;
    } */

    .footer-column h5 {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .footer-about p {
        max-width: 100%;
        font-size: 11px;
    }

    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-links a {
        font-size: 13px;
    }

    .footer-contact-item {
        font-size: 11px;
    }

    .footer-bottom {
        padding: 16px;
        gap: 12px;
        border-radius: 13px;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 15px;
    }
}

/* small-mobile */
@media (max-width: 576px) {
    .site-footer {
        padding: 48px 0 18px;
    }

    .footer-main {
        gap: 30px 15px;
    }

    .footer-logo {
        font-size: 20px;
    }

    .footer-about p {
        font-size: 10px;
        line-height: 1.7;
    }

    .footer-column h5 {
        font-size: 13px;
    }

    .footer-links a {
        font-size: 12px;
    }

    .footer-contact-item {
        font-size: 12px;
    }

    .footer-book-btn {
        padding: 10px 16px;
        font-size: 10px;
    }

    .footer-bottom-left span,
    .footer-bottom-links a {
        font-size: 12px;
    }
}

/* very-small-device */
@media (max-width: 380px) {


    .footer-about {
        grid-column: span 2;
    }

    /* .footer-contact {
        grid-column: span 2;
    } */

    .footer-logo {
        font-size: 18px;
    }

    .footer-column h5 {
        font-size: 12px;
    }

    .footer-links a {
        font-size: 11px;
    }

    .footer-contact-item {
        font-size: 10px;
        align-items: center;
    }

}


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

.footer-column h5.footer-blog-title {
    text-align: center;
}

.footer-column h5.footer-blog-title::after {
    margin: 9px auto 0;
}

/* footer-bottam-line */

.footer-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 10px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    backdrop-filter: none;
}

.footer-bottom-left span {
    color: #fff;
    font-size: 13px;
}

/* .footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-bottom-links a {
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    transition: .3s ease;
}

.footer-bottom-links a:hover {
    color: #FFD54A;
} */

/* footer-bottom-links */
.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 0;
}

.footer-bottom-links a {
    position: relative;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    transition: .3s ease;
    padding: 0 14px;
}

/* small separator line */
.footer-bottom-links a:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%);
}

.footer-bottom-links a:hover {
    color: #FFD54A;
}

@media (max-width: 767px) {

    .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0;
    }

    .footer-bottom-links a {
        font-size: 11px;
        padding: 0 12px;
    }

    .footer-bottom-links a:not(:last-child)::after {
        height: 12px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 12px;
        padding-top: 20px;
    }

    .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 15px;
    }

}


/* SMALL MOBILE */

@media (max-width: 576px) {

    .footer-bottom-left span {
        font-size: 11px;
    }

    .footer-bottom-links a {
        font-size: 11px;
    }

}

/* footer-section-css-end */

/* about-us-main-section-css-start */

.about-us-main-section {
    position: relative;
    width: 100%;
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 50%, rgba(255, 213, 74, .16), transparent 30%),
        radial-gradient(circle at 85% 30%, rgba(51, 49, 233, .18), transparent 32%),
        linear-gradient(135deg, #02050c 0%, #071B3B 48%, #06152f 100%);
}


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

.about-us-main-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 100%,
            rgba(255, 213, 74, .08),
            transparent 35%),
        linear-gradient(115deg,
            transparent 25%,
            rgba(255, 213, 74, .035),
            transparent 70%);
    pointer-events: none;
}

.about-us-main-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: linear-gradient(to bottom, transparent, #000, transparent);
    pointer-events: none;
}


/* =========================================================
   ANIMATED SHAPES
========================================================= */

.about-us-bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(75px);
    pointer-events: none;
}

.about-us-shape-one {
    width: 300px;
    height: 300px;
    left: -130px;
    top: 10px;
    background: rgba(255, 213, 74, .13);
    animation: aboutShapeOne 9s ease-in-out infinite alternate;
}

.about-us-shape-two {
    width: 340px;
    height: 340px;
    right: -150px;
    bottom: -110px;
    background: rgba(51, 49, 233, .16);
    animation: aboutShapeTwo 11s ease-in-out infinite alternate;
}


/* =========================================================
   CONTENT
========================================================= */

.about-us-main-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 60px 15px;
}

.about-us-main-content h1 {
    margin: 0;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    animation: aboutTitleReveal .8s ease both;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.about-us-breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
    padding: 9px 18px;
    border-radius: 50px;

    background: rgba(255, 213, 74, .12);
    border: 1px solid rgba(255, 213, 74, .28);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .06);

    animation: aboutBreadcrumbReveal 1s ease both;
}

.about-us-breadcrumb a,
.about-us-breadcrumb span {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.about-us-breadcrumb a {
    color: #FFD54A;
    transition: .3s ease;
}

.about-us-breadcrumb a:hover {
    color: #ffffff;
}

.about-us-breadcrumb span {
    color: #d5dfef;
}

.about-us-breadcrumb i {
    color: #FFD54A;
    font-size: 10px;
}


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

@keyframes aboutShapeOne {

    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(70px, -25px, 0) scale(1.1);
    }

    100% {
        transform: translate3d(25px, 45px, 0) scale(.95);
    }
}

@keyframes aboutShapeTwo {

    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-60px, -35px, 0) scale(1.08);
    }

    100% {
        transform: translate3d(-20px, 30px, 0) scale(.94);
    }
}

@keyframes aboutTitleReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

@keyframes aboutBreadcrumbReveal {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

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


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .about-us-main-section {
        min-height: 290px;
    }

    .about-us-main-content {
        padding: 55px 15px;
    }

    .about-us-main-content h1 {
        font-size: 36px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .about-us-main-section {
        min-height: 250px;
    }

    .about-us-main-content {
        padding: 50px 15px;
    }

    .about-us-main-content h1 {
        font-size: 29px;
        line-height: 1.3;
    }

    .about-us-breadcrumb {
        margin-top: 15px;
        gap: 7px;
        padding: 8px 15px;
    }

    .about-us-breadcrumb a,
    .about-us-breadcrumb span {
        font-size: 11px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .about-us-main-section {
        min-height: 220px;
    }

    .about-us-main-content {
        padding: 45px 12px;
    }

    .about-us-main-content h1 {
        font-size: 24px;
    }

    .about-us-breadcrumb {
        padding: 7px 13px;
    }

    .about-us-breadcrumb a,
    .about-us-breadcrumb span {
        font-size: 10px;
    }

    .about-us-shape-one {
        width: 200px;
        height: 200px;
    }

    .about-us-shape-two {
        width: 220px;
        height: 220px;
    }

}

/* about-us-main-section-css-end */

/* gst-about-section-css-start */

.gst-about-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #06152f;
}

.gst-about-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .015) 1px, transparent 1px);
    background-size: 55px 55px;
    pointer-events: none;
}

.gst-about-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.gst-about-glow-one {
    width: 300px;
    height: 300px;
    left: -150px;
    top: 20%;
    background: rgba(255, 213, 74, .08);
}

.gst-about-glow-two {
    width: 350px;
    height: 350px;
    right: -180px;
    bottom: -100px;
    background: rgba(51, 49, 233, .12);
}

/* CONTENT */

.gst-about-content {
    position: relative;
    z-index: 2;
}

.gst-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 15px;
    border-radius: 50px;
    color: #FFD54A;
    background: rgba(255, 213, 74, .08);
    border: 1px solid rgba(255, 213, 74, .18);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.gst-section-label i {
    font-size: 14px;
}

.gst-about-content h2 {
    margin: 0 0 20px;
    color: #fff;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
}

.gst-about-content h2 span {
    color: #FFD54A;
}

.gst-about-content p {
    margin: 0 0 15px;
    color: #aebfdd;
    font-size: 14px;
    line-height: 1.85;
}

.gst-about-points {
    display: grid;
    gap: 11px;
    margin-top: 25px;
}

.gst-about-point {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #dbe6f8;
    font-size: 13px;
}

.gst-about-point i {
    color: #FFD54A;
    font-size: 16px;
}

/* VISUAL */

/* RIGHT SIDE GST FLOW */

.gst-about-visual {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    padding: 10px 20px;
}

.gst-flow-card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 18px 20px;
    border-radius: 16px;
    background: #0b2348;
    border: 1px solid rgba(255, 213, 74, .16);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
    transition: .35s ease;
}

.gst-flow-card:hover {
    transform: translateX(8px);
    border-color: rgba(255, 213, 74, .45);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .38);
}

.gst-flow-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #FFD54A;
    color: #071B3B;
    font-size: 19px;
}

.gst-flow-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gst-flow-content small {
    color: #8196b7;
    font-size: 10px;
}

.gst-flow-content strong {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.gst-flow-status {
    margin-left: auto;
    color: #FFD54A;
    font-size: 17px;
}

.gst-flow-line {
    position: relative;
    width: 2px;
    height: 30px;
    margin: 0 0 0 43px;
    background: linear-gradient(to bottom,
            rgba(255, 213, 74, .7),
            rgba(255, 213, 74, .15));
}

.gst-flow-success {
    border-color: rgba(117, 217, 155, .25);
}

.gst-flow-success .gst-flow-icon {
    background: #75d99b;
}

.gst-flow-success .gst-flow-status {
    color: #75d99b;
}

/* SUBTLE ANIMATION */

.gst-flow-card {
    animation: gstFlowCard 4s ease-in-out infinite;
}

.gst-flow-card:nth-of-type(3) {
    animation-delay: .5s;
}

.gst-flow-card:nth-of-type(5) {
    animation-delay: 1s;
}

.gst-flow-card:nth-of-type(7) {
    animation-delay: 1.5s;
}

@keyframes gstFlowCard {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* TABLET */

@media (max-width: 991px) {

    .gst-about-visual {
        max-width: 430px;
        margin: 0 auto;
    }

}

/* MOBILE */

@media (max-width: 767px) {

    .gst-about-visual {
        max-width: 100%;
        padding: 5px 10px;
    }

    .gst-flow-card {
        padding: 15px;
        gap: 12px;
        border-radius: 14px;
    }

    .gst-flow-icon {
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 16px;
    }

    .gst-flow-content small {
        font-size: 9px;
    }

    .gst-flow-content strong {
        font-size: 13px;
    }

    .gst-flow-status {
        font-size: 15px;
    }

    .gst-flow-line {
        height: 22px;
        margin-left: 36px;
    }

}

/* SMALL MOBILE */

@media (max-width: 576px) {

    .gst-about-visual {
        padding: 5px 0;
    }

    .gst-flow-card {
        padding: 13px;
    }

    .gst-flow-icon {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .gst-flow-content strong {
        font-size: 12px;
    }

    .gst-flow-status {
        font-size: 13px;
    }

    .gst-flow-line {
        height: 18px;
        margin-left: 32px;
    }

}

/* FLOATING CARDS */

.gst-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 17px;
    border-radius: 14px;
    background: #0a1f42;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .3);
    animation: gstFloating 4s ease-in-out infinite;
}

.gst-floating-card>i {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #071B3B;
    background: #FFD54A;
    font-size: 16px;
}

.gst-floating-card div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gst-floating-card small {
    color: #8196b7;
    font-size: 9px;
}

.gst-floating-card strong {
    color: #fff;
    font-size: 13px;
}

.gst-floating-one {
    top: 55px;
    right: 10px;
}

.gst-floating-two {
    bottom: 55px;
    left: 5px;
    animation-delay: 1.5s;
}

@keyframes gstFloating {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .gst-about-section {
        padding: 80px 0;
    }

    .gst-about-content h2 {
        font-size: 34px;
    }

    .gst-about-visual {
        min-height: 330px;
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .gst-about-section {
        padding: 60px 0;
    }

    .gst-about-content h2 {
        font-size: 28px;
    }

    .gst-about-content p {
        font-size: 12px;
    }

    .gst-about-visual {
        min-height: 300px;
    }

    .gst-about-card-main {
        width: 90%;
        padding: 18px;
    }

    .gst-card-status {
        display: none;
    }

    .gst-floating-one {
        right: 0;
        top: 25px;
    }

    .gst-floating-two {
        left: 0;
        bottom: 25px;
    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .gst-about-section {
        padding: 50px 0;
    }

    .gst-about-content h2 {
        font-size: 24px;
    }

    .gst-section-label {
        font-size: 9px;
    }

    .gst-about-point {
        font-size: 11px;
    }

    .gst-about-visual {
        min-height: 260px;
    }

    .gst-about-card-main {
        width: 88%;
    }

    .gst-card-icon {
        width: 45px;
        height: 45px;
        font-size: 19px;
    }

    .gst-about-card-main strong {
        font-size: 15px;
    }

    .gst-floating-card {
        padding: 10px 12px;
    }

    .gst-floating-card>i {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

}

/* gst-about-section-css-end */

/* gst-features-section-css-start */

.gst-features-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #071B3B;
}

.gst-features-heading {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.gst-features-heading h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 38px;
    font-weight: 800;
}

.gst-features-heading h2 span {
    color: #FFD54A;
}

.gst-features-heading p {
    margin: 0;
    color: #9fb2d0;
    font-size: 14px;
    line-height: 1.8;
}

.gst-feature-card {
    position: relative;
    height: 100%;
    min-height: 245px;
    padding: 30px 25px;
    overflow: hidden;
    border-radius: 18px;
    background: #0a2348;
    border: 1px solid rgba(255, 255, 255, .07);
    transition: .4s ease;
}

.gst-feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 213, 74, .35);
    box-shadow: 0 25px 55px rgba(0, 0, 0, .28);
}

.gst-feature-number {
    position: absolute;
    top: 15px;
    right: 20px;
    color: rgba(255, 213, 74, .18);
    font-size: 38px;
    font-weight: 800;
}

.gst-feature-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 14px;
    color: #071B3B;
    background: #FFD54A;
    font-size: 22px;
    transition: .4s ease;
}

.gst-feature-card:hover .gst-feature-icon {
    transform: rotate(-5deg) scale(1.08);
    box-shadow: 0 12px 25px rgba(255, 213, 74, .2);
}

.gst-feature-card h4 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.gst-feature-card p {
    margin: 0;
    color: #91a6c5;
    font-size: 12px;
    line-height: 1.75;
}

@media (max-width: 991px) {

    .gst-features-section {
        padding: 80px 0;
    }

    .gst-features-heading h2 {
        font-size: 34px;
    }

}

@media (max-width: 767px) {

    .gst-features-section {
        padding: 60px 0;
    }

    .gst-features-heading {
        margin-bottom: 35px;
    }

    .gst-features-heading h2 {
        font-size: 28px;
    }

    .gst-features-heading p {
        font-size: 12px;
    }

    .gst-feature-card {
        min-height: 210px;
        padding: 23px 20px;
    }

}

@media (max-width: 576px) {

    .gst-features-heading h2 {
        font-size: 24px;
    }

    .gst-feature-card {
        min-height: 190px;
    }

    .gst-feature-icon {
        width: 48px;
        height: 48px;
        font-size: 19px;
    }

    .gst-feature-card h4 {
        font-size: 14px;
    }

    .gst-feature-card p {
        font-size: 11px;
    }

}

/* gst-features-section-css-end */


/* gst-tax-section-css-start */

.gst-tax-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #06152f;
}

.gst-tax-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    right: -250px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255, 213, 74, .07);
    filter: blur(100px);
    pointer-events: none;
}

/* =========================
   LEFT CONTENT
========================= */

.gst-tax-heading {
    position: relative;
    z-index: 2;
}

.gst-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 14px;
    border-radius: 50px;
    background: rgba(255, 213, 74, .08);
    border: 1px solid rgba(255, 213, 74, .15);
    color: #FFD54A;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
}

.gst-section-label i {
    font-size: 13px;
}

.gst-tax-heading h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
}

.gst-tax-heading h2 span {
    display: block;
    color: #FFD54A;
}

.gst-tax-heading>p {
    margin: 0 0 25px;
    color: #9fb2d0;
    font-size: 13px;
    line-height: 1.8;
}

.gst-tax-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
}

.gst-tax-benefit>i {
    flex-shrink: 0;
    color: #FFD54A;
    font-size: 18px;
}

.gst-tax-benefit div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gst-tax-benefit strong {
    color: #fff;
    font-size: 12px;
}

.gst-tax-benefit span {
    color: #8298ba;
    font-size: 10px;
}

/* =========================
   CALCULATOR
========================= */

.gst-tax-calculator {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 28px;
    border-radius: 22px;
    background: #0a2348;
    border: 1px solid rgba(255, 213, 74, .15);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
    animation: gstCalculatorFloat 4s ease-in-out infinite;
}

.gst-tax-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 22px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.gst-tax-top div:first-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gst-tax-top span {
    color: #8499b8;
    font-size: 9px;
}

.gst-tax-top strong {
    color: #fff;
    font-size: 15px;
}

.gst-tax-top-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #071B3B;
    background: #FFD54A;
    font-size: 18px;
}

.gst-tax-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
}

.gst-tax-row span {
    color: #8fa4c3;
    font-size: 11px;
}

.gst-tax-row strong {
    color: #fff;
    font-size: 12px;
}

.gst-tax-divider {
    height: 1px;
    margin: 8px 0;
    background: rgba(255, 255, 255, .08);
}

.gst-tax-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 0 9px;
}

.gst-tax-total span {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.gst-tax-total strong {
    color: #FFD54A;
    font-size: 19px;
}

.gst-tax-success {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(76, 175, 80, .08);
    color: #75d99b;
    font-size: 9px;
}

/* =========================
   IMAGE
========================= */

.gst-tax-image {
    position: relative;
    z-index: 2;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 24px;
    overflow: hidden;
    background: #081d3d;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .3);
}

.gst-tax-image-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 213, 74, .12);
    filter: blur(60px);
    animation: gstImageGlow 5s ease-in-out infinite alternate;
}

.gst-tax-image img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    animation: gstImageFloat 4s ease-in-out infinite;
}

/* =========================
   ANIMATION
========================= */

@keyframes gstCalculatorFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}

@keyframes gstImageFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}

@keyframes gstImageGlow {

    0% {
        transform: scale(.9);
        opacity: .5;
    }

    100% {
        transform: scale(1.2);
        opacity: 1;
    }

}

/* =========================
   TABLET
========================= */

@media (max-width: 1199px) {

    .gst-tax-heading h2 {
        font-size: 34px;
    }

    .gst-tax-calculator {
        padding: 24px;
    }

    .gst-tax-image {
        min-height: 270px;
    }

}

/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .gst-tax-section {
        padding: 80px 0;
    }

    .gst-tax-heading h2 {
        font-size: 32px;
    }

    .gst-tax-calculator {
        max-width: 400px;
        margin: 0 auto;
    }

    .gst-tax-image {
        max-width: 450px;
        min-height: 280px;
        margin: 0 auto;
    }

}

/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .gst-tax-section {
        padding: 60px 0;
    }

    .gst-tax-heading h2 {
        font-size: 28px;
    }

    .gst-tax-heading>p {
        font-size: 12px;
    }

    .gst-tax-calculator {
        padding: 22px;
        border-radius: 18px;
    }

    .gst-tax-image {
        min-height: 230px;
        padding: 15px;
        border-radius: 18px;
    }

    .gst-tax-image img {
        max-height: 230px;
    }

}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 576px) {

    .gst-tax-section {
        padding: 50px 0;
    }

    .gst-tax-heading h2 {
        font-size: 24px;
    }

    .gst-section-label {
        font-size: 9px;
    }

    .gst-tax-calculator {
        padding: 18px;
    }

    .gst-tax-row {
        padding: 11px 0;
    }

    .gst-tax-total strong {
        font-size: 17px;
    }

    .gst-tax-image {
        min-height: 200px;
    }

    .gst-tax-image img {
        max-height: 200px;
    }

}

/* gst-tax-section-css-end */

/* gst-features-section-css-start */

.gst-features-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #071a38;
}

.gst-features-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .014) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px);
    background-size: 55px 55px;
    pointer-events: none;
}

.gst-features-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.gst-features-glow-one {
    width: 350px;
    height: 350px;
    left: -180px;
    top: 20%;
    background: rgba(255, 213, 74, .08);
}

.gst-features-glow-two {
    width: 400px;
    height: 400px;
    right: -200px;
    bottom: -150px;
    background: rgba(51, 49, 233, .10);
}

.gst-features-heading {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto 30px;
}

.gst-features-heading h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
}

.gst-features-heading h2 span {
    color: #FFD54A;
}

.gst-features-heading p {
    max-width: 570px;
    margin: 0 auto;
    color: #9fb2d0;
    font-size: 14px;
    line-height: 1.8;
}

.gst-feature-grid {
    position: relative;
    z-index: 2;
}

.gst-feature-card {
    position: relative;
    height: 100%;
    padding: 32px 28px;
    overflow: hidden;
    border-radius: 22px;
    background: #0b2348;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .25);
    transition: .4s ease;
}

.gst-feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 213, 74, .3);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}

.gst-feature-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -60px;
    top: -60px;
    border-radius: 50%;
    background: rgba(255, 213, 74, .06);
}

.gst-feature-number {
    position: absolute;
    top: 20px;
    right: 22px;
    color: rgba(255, 213, 74, .3);
    font-size: 12px;
    font-weight: 800;
}

.gst-feature-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border-radius: 16px;
    background: #FFD54A;
    color: #071B3B;
    font-size: 23px;
    box-shadow: 0 12px 30px rgba(255, 213, 74, .12);
}

.gst-feature-card h3 {
    margin: 0 0 13px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.gst-feature-card p {
    margin: 0 0 22px;
    color: #91a6c6;
    font-size: 12px;
    line-height: 1.8;
}

.gst-feature-list {
    display: grid;
    gap: 10px;
}

.gst-feature-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dce6f5;
    font-size: 11px;
}

.gst-feature-list i {
    color: #FFD54A;
    font-size: 13px;
}

.gst-feature-highlight {
    border-color: rgba(255, 213, 74, .22);
    background: linear-gradient(145deg,
            #0d2b55,
            #0a2042);
}

/* TABLET */

@media (max-width: 991px) {

    .gst-features-section {
        padding: 80px 0;
    }

    .gst-features-heading {
        margin-bottom: 40px;
    }

    .gst-features-heading h2 {
        font-size: 34px;
    }

}

/* MOBILE */

@media (max-width: 767px) {

    .gst-features-section {
        padding: 60px 0;
    }

    .gst-features-heading {
        margin-bottom: 35px;
    }

    .gst-features-heading h2 {
        font-size: 28px;
    }

    .gst-features-heading p {
        font-size: 12px;
    }

    .gst-feature-card {
        padding: 25px 22px;
        border-radius: 18px;
    }

    .gst-feature-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 20px;
        font-size: 20px;
    }

    .gst-feature-card h3 {
        font-size: 18px;
    }

}

/* SMALL MOBILE */

@media (max-width: 576px) {

    .gst-features-section {
        padding: 50px 0;
    }

    .gst-features-heading h2 {
        font-size: 24px;
    }

    .gst-feature-card {
        padding: 22px 18px;
    }

    .gst-feature-card p {
        font-size: 11px;
    }

    .gst-feature-list span {
        font-size: 10px;
    }

}

/* gst-features-section-css-end */


/* why-star-crm-section-css-start */

.why-star-crm-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #06152f;
}

.why-star-crm-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px);
    background-size: 55px 55px;
    pointer-events: none;
}

.why-star-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.why-star-glow-one {
    width: 350px;
    height: 350px;
    left: -180px;
    bottom: -100px;
    background: rgba(51, 49, 233, .12);
}

.why-star-glow-two {
    width: 300px;
    height: 300px;
    right: -150px;
    top: 10%;
    background: rgba(255, 213, 74, .07);
}

/* VISUAL */

.why-star-visual {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-star-main-card {
    position: relative;
    z-index: 2;
    width: 330px;
    padding: 35px;
    border-radius: 26px;
    background: linear-gradient(145deg,
            #0d2b55,
            #081d3d);
    border: 1px solid rgba(255, 213, 74, .2);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
    text-align: center;
}

.why-star-logo {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 18px;
    background: #FFD54A;
    color: #071B3B;
    font-size: 28px;
    box-shadow: 0 15px 35px rgba(255, 213, 74, .15);
}

.why-star-main-card>span {
    color: #8196b7;
    font-size: 9px;
    letter-spacing: 2px;
}

.why-star-main-card h3 {
    margin: 8px 0 10px;
    color: #fff;
    font-size: 27px;
    font-weight: 800;
}

.why-star-main-card>p {
    margin: 0;
    color: #91a6c6;
    font-size: 11px;
    line-height: 1.7;
}

.why-star-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.why-star-stat-row div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.why-star-stat-row strong {
    color: #FFD54A;
    font-size: 15px;
}

.why-star-stat-row small {
    color: #8196b7;
    font-size: 8px;
}

/* FLOATING */

.why-star-floating {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    border-radius: 13px;
    background: #0b2348;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 10px;
    animation: whyStarFloat 4s ease-in-out infinite;
}

.why-star-floating i {
    color: #FFD54A;
    font-size: 16px;
}

.why-star-floating-one {
    top: 60px;
    right: 5px;
}

.why-star-floating-two {
    left: 0;
    bottom: 60px;
    animation-delay: 1.5s;
}

@keyframes whyStarFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}

/* CONTENT */

.why-star-content {
    position: relative;
    z-index: 2;
}

.why-star-content h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
}

.why-star-content h2 span {
    display: block;
    color: #FFD54A;
}

.why-star-intro {
    max-width: 620px;
    margin: 0 0 30px;
    color: #9fb2d0;
    font-size: 14px;
    line-height: 1.8;
}

.why-star-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.why-star-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px;
    border-radius: 15px;
    background: #0a2042;
    border: 1px solid rgba(255, 255, 255, .06);
    transition: .35s ease;
}

.why-star-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 213, 74, .22);
}

.why-star-item-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255, 213, 74, .1);
    color: #FFD54A;
    font-size: 16px;
}

.why-star-item h4 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.why-star-item p {
    margin: 0;
    color: #8196b7;
    font-size: 10px;
    line-height: 1.65;
}

/* TABLET */

@media (max-width: 991px) {

    .why-star-crm-section {
        padding: 80px 0;
    }

    .why-star-visual {
        min-height: 380px;
        margin-bottom: 10px;
    }

    .why-star-content h2 {
        font-size: 34px;
    }

}

/* MOBILE */

@media (max-width: 767px) {

    .why-star-crm-section {
        padding: 60px 0;
    }

    .why-star-visual {
        min-height: 330px;
    }

    .why-star-main-card {
        width: 85%;
        padding: 27px;
    }

    .why-star-content h2 {
        font-size: 28px;
    }

    .why-star-intro {
        font-size: 12px;
    }

    .why-star-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .why-star-item {
        padding: 15px;
    }

}

/* SMALL MOBILE */

@media (max-width: 576px) {

    .why-star-crm-section {
        padding: 50px 0;
    }

    .why-star-visual {
        min-height: 285px;
    }

    .why-star-main-card {
        width: 90%;
        padding: 22px;
    }

    .why-star-logo {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }

    .why-star-main-card h3 {
        font-size: 23px;
    }

    .why-star-content h2 {
        font-size: 24px;
    }

    .why-star-content h2 span {
        display: inline;
    }

    .why-star-item h4 {
        font-size: 12px;
    }

    .why-star-item p {
        font-size: 9px;
    }

    .why-star-floating {
        padding: 9px 11px;
        font-size: 9px;
    }

    .why-star-floating-one {
        right: -3px;
        top: 25px;
    }

    .why-star-floating-two {
        left: -3px;
        bottom: 25px;
    }

}

/* why-star-crm-section-css-end */



/* retail-billing-content-section-css-start */
.retail-billing-content-section {
    position: relative;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 15%, rgba(51, 49, 233, .12), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(255, 213, 74, .07), transparent 30%),
        linear-gradient(135deg, #02050c 0%, #06152f 48%, #020817 100%);
}

.retail-billing-content-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .015) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
    pointer-events: none;
}

.retail-billing-content-section::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -250px;
    top: 35%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(51, 49, 233, .13), transparent 70%);
    filter: blur(25px);
    pointer-events: none;
}

/* CONTENT BLOCK */

.retail-content-block {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 35px;
    margin-bottom: 45px;
    padding: 45px;
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
        0 25px 70px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(15px);
    overflow: hidden;
}

.retail-content-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 213, 74, .35), transparent);
}

.retail-content-block:last-child {
    margin-bottom: 0;
}

/* NUMBER */

.retail-content-number {
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(51, 49, 233, .30), rgba(255, 213, 74, .08));
    border: 1px solid rgba(255, 213, 74, .20);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.retail-content-number::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #FFD54A;
    box-shadow: 0 0 15px rgba(255, 213, 74, .7);
}

.retail-content-number span {
    color: #FFD54A;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* SECTION TAG */

.retail-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    padding: 8px 14px;
    border-radius: 50px;
    color: #FFD54A;
    background: rgba(255, 213, 74, .08);
    border: 1px solid rgba(255, 213, 74, .15);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
}

.retail-section-tag i {
    font-size: 13px;
}

/* HEADINGS */

.retail-content-text h2 {
    max-width: 850px;
    margin: 0 0 20px;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.8px;
}

.retail-content-text h2 span {
    display: inline;
    background: linear-gradient(90deg, #38bdf8 0%, #4f8cff 45%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* PARAGRAPHS */

.retail-content-text>p {
    max-width: 920px;
    margin: 0 0 17px;
    color: #aebed8;
    font-size: 15px;
    line-height: 1.85;
}

.retail-content-text>p strong {
    color: #ffffff;
    font-weight: 700;
}

/* FEATURE GRID */

.retail-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 30px;
}

/* FEATURE CARD */

.retail-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
    border: 1px solid rgba(255, 255, 255, .07);
    transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.retail-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 213, 74, .35);
    background: linear-gradient(145deg, rgba(255, 213, 74, .07), rgba(255, 255, 255, .025));
    box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
}

/* FEATURE ICON */

.retail-feature-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #FFD54A;
    background: linear-gradient(135deg, rgba(255, 213, 74, .14), rgba(51, 49, 233, .12));
    border: 1px solid rgba(255, 213, 74, .13);
    font-size: 20px;
    transition: .35s ease;
}

.retail-feature-card:hover .retail-feature-icon {
    background: #FFD54A;
    color: #071B3B;
    transform: scale(1.07);
}

/* FEATURE CONTENT */

.retail-feature-card h3 {
    margin: 2px 0 7px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.retail-feature-card p {
    margin: 0;
    color: #91a5c5;
    font-size: 12px;
    line-height: 1.65;
}

/* BENEFIT LIST */

.retail-benefit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 28px;
}

.retail-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    transition: .3s ease;
}

.retail-benefit-item:hover {
    border-color: rgba(51, 49, 233, .45);
    background: rgba(51, 49, 233, .06);
    transform: translateY(-3px);
}

/* CHECK ICON */

.retail-check {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 213, 74, .10);
    color: #FFD54A;
    border: 1px solid rgba(255, 213, 74, .15);
    font-size: 15px;
}

/* BENEFIT TEXT */

.retail-benefit-item h3 {
    margin: 1px 0 5px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.retail-benefit-item p {
    margin: 0;
    color: #91a5c5;
    font-size: 12px;
    line-height: 1.65;
}

/* FINAL BOX */

.retail-final-box {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 30px;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(51, 49, 233, .12), rgba(255, 213, 74, .05));
    border: 1px solid rgba(255, 213, 74, .15);
}

.retail-final-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFD54A, #ffbd25);
    color: #071B3B;
    font-size: 22px;
    box-shadow: 0 10px 25px rgba(255, 193, 7, .18);
}

.retail-final-box h3 {
    margin: 2px 0 7px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 750;
}

.retail-final-box p {
    margin: 0;
    color: #9cafcb;
    font-size: 13px;
    line-height: 1.75;
}

/* LARGE TABLET */

@media (max-width: 991px) {
    .retail-billing-content-section {
        padding: 75px 0;
    }

    .retail-content-block {
        grid-template-columns: 65px 1fr;
        gap: 25px;
        padding: 35px;
        border-radius: 22px;
    }

    .retail-content-number {
        width: 55px;
        height: 55px;
        border-radius: 15px;
    }

    .retail-content-number span {
        font-size: 16px;
    }

    .retail-content-text h2 {
        font-size: 29px;
    }

    .retail-content-text>p {
        font-size: 14px;
        line-height: 1.8;
    }

    .retail-feature-grid,
    .retail-benefit-list {
        grid-template-columns: 1fr 1fr;
    }
}

/* MOBILE */

@media (max-width: 767px) {
    .retail-billing-content-section {
        padding: 55px 0;
    }

    .retail-content-block {
        display: block;
        padding: 25px 20px;
        margin-bottom: 25px;
        border-radius: 19px;
    }

    .retail-content-number {
        margin-bottom: 23px;
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .retail-content-number::after {
        display: none;
    }

    .retail-section-tag {
        font-size: 10px;
        padding: 7px 11px;
        margin-bottom: 12px;
    }

    .retail-content-text h2 {
        font-size: 24px;
        line-height: 1.3;
        letter-spacing: -.4px;
        margin-bottom: 16px;
    }

    .retail-content-text>p {
        font-size: 13px;
        line-height: 1.75;
        margin-bottom: 14px;
    }

    .retail-feature-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 22px;
    }

    .retail-feature-card {
        padding: 16px;
        gap: 12px;
    }

    .retail-feature-icon {
        width: 43px;
        height: 43px;
        min-width: 43px;
        border-radius: 11px;
        font-size: 18px;
    }

    .retail-feature-card h3 {
        font-size: 14px;
    }

    .retail-feature-card p {
        font-size: 11px;
    }

    .retail-benefit-list {
        grid-template-columns: 1fr;
        gap: 11px;
        margin-top: 22px;
    }

    .retail-benefit-item {
        padding: 14px;
        gap: 10px;
    }

    .retail-check {
        width: 31px;
        height: 31px;
        min-width: 31px;
    }

    .retail-benefit-item h3 {
        font-size: 13px;
    }

    .retail-benefit-item p {
        font-size: 11px;
    }

    .retail-final-box {
        padding: 17px;
        gap: 12px;
        margin-top: 22px;
    }

    .retail-final-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 18px;
        border-radius: 11px;
    }

    .retail-final-box h3 {
        font-size: 15px;
    }

    .retail-final-box p {
        font-size: 11px;
        line-height: 1.7;
    }
}

/* SMALL MOBILE */

@media (max-width: 576px) {
    .retail-billing-content-section {
        padding: 45px 0;
    }

    .retail-content-block {
        padding: 22px 16px;
        border-radius: 16px;
    }

    .retail-content-number {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        margin-bottom: 19px;
    }

    .retail-content-number span {
        font-size: 14px;
    }

    .retail-content-text h2 {
        font-size: 21px;
    }

    .retail-content-text>p {
        font-size: 12px;
        line-height: 1.7;
    }

    .retail-feature-card {
        padding: 14px;
        border-radius: 13px;
    }

    .retail-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 17px;
    }

    .retail-feature-card h3 {
        font-size: 13px;
    }

    .retail-feature-card p {
        font-size: 10px;
    }

    .retail-benefit-item {
        padding: 13px;
    }

    .retail-benefit-item h3 {
        font-size: 12px;
    }

    .retail-benefit-item p {
        font-size: 10px;
    }

    .retail-final-box {
        display: block;
    }

    .retail-final-icon {
        margin-bottom: 12px;
    }
}

/* VERY SMALL DEVICES */

@media (max-width: 380px) {
    .retail-content-block {
        padding: 20px 14px;
    }

    .retail-content-text h2 {
        font-size: 19px;
    }

    .retail-content-text>p {
        font-size: 11px;
    }

    .retail-feature-card {
        gap: 9px;
    }

    .retail-feature-card p {
        font-size: 9px;
    }

    .retail-benefit-item p {
        font-size: 9px;
    }
}

/* retail-billing-content-section-css-end */

/* inventory-section-css-start */

.inventory-management-content-section {
    position: relative;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 15%, rgba(51, 49, 233, .12), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(255, 213, 74, .07), transparent 30%),
        linear-gradient(135deg, #02050c 0%, #06152f 48%, #020817 100%);
}

.inventory-management-content-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .015) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
    pointer-events: none;
}

.inventory-management-content-section::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -250px;
    top: 35%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(51, 49, 233, .13), transparent 70%);
    filter: blur(25px);
    pointer-events: none;
}

/* =========================================================
CONTENT BLOCK
========================================================= */

.inventory-content-block {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 35px;
    margin-bottom: 45px;
    padding: 45px;
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
        0 25px 70px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(15px);
    overflow: hidden;
}

.inventory-content-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 213, 74, .35), transparent);
}

.inventory-content-block:last-child {
    margin-bottom: 0;
}

/* =========================================================
NUMBER
========================================================= */

.inventory-content-number {
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(51, 49, 233, .30), rgba(255, 213, 74, .08));
    border: 1px solid rgba(255, 213, 74, .20);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.inventory-content-number::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #FFD54A;
    box-shadow: 0 0 15px rgba(255, 213, 74, .7);
}

.inventory-content-number span {
    color: #FFD54A;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* =========================================================
SECTION TAG
========================================================= */

.inventory-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    padding: 8px 14px;
    border-radius: 50px;
    color: #FFD54A;
    background: rgba(255, 213, 74, .08);
    border: 1px solid rgba(255, 213, 74, .15);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
}

.inventory-section-tag i {
    font-size: 13px;
}

/* =========================================================
HEADINGS
========================================================= */

.inventory-content-text h2 {
    max-width: 850px;
    margin: 0 0 20px;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.8px;
}

.inventory-content-text h2 span {
    display: inline;
    background: linear-gradient(90deg, #38bdf8 0%, #4f8cff 45%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================================
PARAGRAPHS
========================================================= */

.inventory-content-text>p {
    max-width: 920px;
    margin: 0 0 17px;
    color: #aebed8;
    font-size: 15px;
    line-height: 1.85;
}

.inventory-content-text>p strong {
    color: #ffffff;
    font-weight: 700;
}

/* =========================================================
FEATURE GRID
========================================================= */

.inventory-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 30px;
}

/* =========================================================
FEATURE CARD
========================================================= */

.inventory-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
    border: 1px solid rgba(255, 255, 255, .07);
    transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.inventory-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 213, 74, .35);
    background: linear-gradient(145deg, rgba(255, 213, 74, .07), rgba(255, 255, 255, .025));
    box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
}

/* =========================================================
FEATURE ICON
========================================================= */

.inventory-feature-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #FFD54A;
    background: linear-gradient(135deg, rgba(255, 213, 74, .14), rgba(51, 49, 233, .12));
    border: 1px solid rgba(255, 213, 74, .13);
    font-size: 20px;
    transition: .35s ease;
}

.inventory-feature-card:hover .inventory-feature-icon {
    background: #FFD54A;
    color: #071B3B;
    transform: scale(1.07);
}

/* =========================================================
FEATURE CONTENT
========================================================= */

.inventory-feature-card h3 {
    margin: 2px 0 7px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.inventory-feature-card p {
    margin: 0;
    color: #91a5c5;
    font-size: 12px;
    line-height: 1.65;
}

/* =========================================================
BENEFIT LIST
========================================================= */

.inventory-benefit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 28px;
}

.inventory-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    transition: .3s ease;
}

.inventory-benefit-item:hover {
    border-color: rgba(51, 49, 233, .45);
    background: rgba(51, 49, 233, .06);
    transform: translateY(-3px);
}

/* =========================================================
CHECK ICON
========================================================= */

.inventory-check {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 213, 74, .10);
    color: #FFD54A;
    border: 1px solid rgba(255, 213, 74, .15);
    font-size: 15px;
}

/* =========================================================
BENEFIT TEXT
========================================================= */

.inventory-benefit-item h3 {
    margin: 1px 0 5px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.inventory-benefit-item p {
    margin: 0;
    color: #91a5c5;
    font-size: 12px;
    line-height: 1.65;
}

/* =========================================================
FINAL BOX
========================================================= */

.inventory-final-box {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 30px;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(51, 49, 233, .12), rgba(255, 213, 74, .05));
    border: 1px solid rgba(255, 213, 74, .15);
}

.inventory-final-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFD54A, #ffbd25);
    color: #071B3B;
    font-size: 22px;
    box-shadow: 0 10px 25px rgba(255, 193, 7, .18);
}

.inventory-final-box h3 {
    margin: 2px 0 7px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 750;
}

.inventory-final-box p {
    margin: 0;
    color: #9cafcb;
    font-size: 13px;
    line-height: 1.75;
}

/* =========================================================
LARGE TABLET
========================================================= */

@media (max-width: 991px) {
    .inventory-management-content-section {
        padding: 75px 0;
    }

    .inventory-content-block {
        grid-template-columns: 65px 1fr;
        gap: 25px;
        padding: 35px;
        border-radius: 22px;
    }

    .inventory-content-number {
        width: 55px;
        height: 55px;
        border-radius: 15px;
    }

    .inventory-content-number span {
        font-size: 16px;
    }

    .inventory-content-text h2 {
        font-size: 29px;
    }

    .inventory-content-text>p {
        font-size: 14px;
        line-height: 1.8;
    }

    .inventory-feature-grid,
    .inventory-benefit-list {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {
    .inventory-management-content-section {
        padding: 55px 0;
    }

    .inventory-content-block {
        display: block;
        padding: 25px 20px;
        margin-bottom: 25px;
        border-radius: 19px;
    }

    .inventory-content-number {
        margin-bottom: 23px;
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .inventory-content-number::after {
        display: none;
    }

    .inventory-section-tag {
        font-size: 10px;
        padding: 7px 11px;
        margin-bottom: 12px;
    }

    .inventory-content-text h2 {
        font-size: 24px;
        line-height: 1.3;
        letter-spacing: -.4px;
        margin-bottom: 16px;
    }

    .inventory-content-text>p {
        font-size: 13px;
        line-height: 1.75;
        margin-bottom: 14px;
    }

    .inventory-feature-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 22px;
    }

    .inventory-feature-card {
        padding: 16px;
        gap: 12px;
    }

    .inventory-feature-icon {
        width: 43px;
        height: 43px;
        min-width: 43px;
        border-radius: 11px;
        font-size: 18px;
    }

    .inventory-feature-card h3 {
        font-size: 14px;
    }

    .inventory-feature-card p {
        font-size: 11px;
    }

    .inventory-benefit-list {
        grid-template-columns: 1fr;
        gap: 11px;
        margin-top: 22px;
    }

    .inventory-benefit-item {
        padding: 14px;
        gap: 10px;
    }

    .inventory-check {
        width: 31px;
        height: 31px;
        min-width: 31px;
    }

    .inventory-benefit-item h3 {
        font-size: 13px;
    }

    .inventory-benefit-item p {
        font-size: 11px;
    }

    .inventory-final-box {
        padding: 17px;
        gap: 12px;
        margin-top: 22px;
    }

    .inventory-final-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 18px;
        border-radius: 11px;
    }

    .inventory-final-box h3 {
        font-size: 15px;
    }

    .inventory-final-box p {
        font-size: 11px;
        line-height: 1.7;
    }
}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 576px) {
    .inventory-management-content-section {
        padding: 45px 0;
    }

    .inventory-content-block {
        padding: 22px 16px;
        border-radius: 16px;
    }

    .inventory-content-number {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        margin-bottom: 19px;
    }

    .inventory-content-number span {
        font-size: 14px;
    }

    .inventory-content-text h2 {
        font-size: 21px;
    }

    .inventory-content-text>p {
        font-size: 12px;
        line-height: 1.7;
    }

    .inventory-feature-card {
        padding: 14px;
        border-radius: 13px;
    }

    .inventory-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 17px;
    }

    .inventory-feature-card h3 {
        font-size: 13px;
    }

    .inventory-feature-card p {
        font-size: 10px;
    }

    .inventory-benefit-item {
        padding: 13px;
    }

    .inventory-benefit-item h3 {
        font-size: 12px;
    }

    .inventory-benefit-item p {
        font-size: 10px;
    }

    .inventory-final-box {
        display: block;
    }

    .inventory-final-icon {
        margin-bottom: 12px;
    }
}

/* =========================================================
VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {
    .inventory-content-block {
        padding: 20px 14px;
    }

    .inventory-content-text h2 {
        font-size: 19px;
    }

    .inventory-content-text>p {
        font-size: 11px;
    }

    .inventory-feature-card {
        gap: 9px;
    }

    .inventory-feature-card p {
        font-size: 9px;
    }

    .inventory-benefit-item p {
        font-size: 9px;
    }
}

/* inventory-section-css-end */

/* contact-demo-section-css-start */

.contact-demo-section {
    position: relative;
    padding: 90px 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(51, 49, 233, .12), transparent 35%),
        radial-gradient(circle at 90% 80%, rgba(255, 213, 74, .08), transparent 35%),
        #050d22;
    overflow: hidden;
}


/* BACKGROUND */

.contact-demo-bg {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.contact-demo-bg-one {
    width: 280px;
    height: 280px;
    background: rgba(51, 49, 233, .10);
    top: -100px;
    left: -100px;
}

.contact-demo-bg-two {
    width: 320px;
    height: 320px;
    background: rgba(255, 213, 74, .07);
    bottom: -150px;
    right: -100px;
}


/* HEADER */

.contact-demo-header {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.contact-demo-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #FFD54A;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 15px;
}

.contact-demo-tag i {
    font-size: 16px;
}

.contact-demo-header h2 {
    color: #fff;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 18px;
}

.contact-demo-header h2 span {
    color: #FFD54A;
}

.contact-demo-header p {
    color: rgba(255, 255, 255, .70);
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}


/* CONTACT INFO */

.contact-demo-info {
    height: 100%;
    padding: 35px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 22px;
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 2;
}

.contact-demo-info-heading {
    margin-bottom: 30px;
}

.contact-demo-info-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #FFD54A;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 12px;
}

.contact-demo-info-heading h3 {
    color: #fff;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 14px;
}

.contact-demo-info-heading h3 strong {
    color: #FFD54A;
}

.contact-demo-info-heading p {
    color: rgba(255, 255, 255, .65);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}


/* CONTACT ITEM */

.contact-demo-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.contact-demo-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(51, 49, 233, .18);
    color: #FFD54A;
    font-size: 18px;
}

.contact-demo-item-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contact-demo-item-content span {
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.contact-demo-item-content a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: .3s;
    word-break: break-word;
}

.contact-demo-item-content a:hover {
    color: #FFD54A;
}

.contact-demo-item-content p {
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}


/* WHATSAPP */

.contact-demo-whatsapp {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 25px;
    padding: 15px 18px;
    border-radius: 14px;
    background: rgba(37, 211, 102, .10);
    border: 1px solid rgba(37, 211, 102, .25);
    text-decoration: none;
    transition: .35s;
}

.contact-demo-whatsapp:hover {
    background: rgba(37, 211, 102, .18);
    transform: translateY(-3px);
}

.contact-demo-whatsapp-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 21px;
}

.contact-demo-whatsapp div:nth-child(2) {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.contact-demo-whatsapp span {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
}

.contact-demo-whatsapp strong {
    color: #fff;
    font-size: 14px;
}

.contact-demo-whatsapp > i {
    color: #25D366;
    font-size: 17px;
}


/* FORM CARD */

.contact-demo-form-card {
    height: 100%;
    padding: 35px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .25);
    position: relative;
    z-index: 2;
}

.contact-demo-form-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.contact-demo-form-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #071B3B;
    color: #FFD54A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.contact-demo-form-header span {
    color: #3331E9;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.contact-demo-form-header h3 {
    color: #071B3B;
    font-size: 28px;
    font-weight: 800;
    margin: 3px 0 0;
}

.contact-demo-form-description {
    color: #687080;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 25px;
}


/* FORM INPUT */

.contact-demo-input-group label {
    display: block;
    color: #071B3B;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.contact-demo-input-group label span {
    color: #e63946;
}

.contact-demo-input {
    position: relative;
}

.contact-demo-input > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #3331E9;
    font-size: 16px;
    z-index: 2;
}

.contact-demo-input input,
.contact-demo-input textarea {
    width: 100%;
    border: 1px solid #e2e5eb;
    background: #f8f9fc;
    border-radius: 11px;
    padding: 13px 15px 13px 45px;
    outline: none;
    color: #071B3B;
    font-size: 14px;
    transition: .3s;
}

.contact-demo-input input {
    height: 50px;
}

.contact-demo-input textarea {
    resize: vertical;
    min-height: 120px;
    padding-top: 14px;
}

.contact-demo-textarea > i {
    top: 20px;
    transform: none;
}

.contact-demo-input input:focus,
.contact-demo-input textarea:focus {
    border-color: #3331E9;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(51, 49, 233, .08);
}

.contact-demo-input input::placeholder,
.contact-demo-input textarea::placeholder {
    color: #9aa1ad;
}


/* SUBMIT BUTTON */

.contact-demo-submit {
    width: 100%;
    border: none;
    border-radius: 11px;
    padding: 14px 20px;
    background: #3331E9;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: .35s;
    margin-top: 5px;
}

.contact-demo-submit:hover {
    background: #071B3B;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(51, 49, 233, .25);
}

.contact-demo-submit i {
    transition: .3s;
}

.contact-demo-submit:hover i {
    transform: translateX(5px);
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .contact-demo-header h2 {
        font-size: 26px;
    }

    .contact-demo-info,
    .contact-demo-form-card {
        padding: 30px;
    }

}

/* ================================
   MOBILE TYPOGRAPHY
================================ */

@media (max-width: 767px) {

    .contact-demo-section {
        padding: 55px 0;
    }

    .contact-demo-header {
        margin-bottom: 35px;
    }

    /* HEADER */
    .contact-demo-tag {
        font-size: 11px;
    }

    .contact-demo-tag i {
        font-size: 12px;
    }

    .contact-demo-header h2 {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .contact-demo-header p {
        font-size: 12px;
        line-height: 1.6;
    }

    /* CONTACT INFO */
    .contact-demo-info,
    .contact-demo-form-card {
        padding: 20px;
        border-radius: 16px;
    }

    .contact-demo-info-heading {
        margin-bottom: 20px;
    }

    .contact-demo-info-heading > span {
        font-size: 10px;
    }

    .contact-demo-info-heading h3 {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .contact-demo-info-heading p {
        font-size: 11px;
        line-height: 1.6;
    }

    /* CONTACT ITEMS */
    .contact-demo-item {
        gap: 10px;
        padding: 13px 0;
    }

    .contact-demo-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 10px;
        font-size: 14px;
    }

    .contact-demo-item-content {
        gap: 3px;
    }

    .contact-demo-item-content span {
        font-size: 10px;
    }

    .contact-demo-item-content a {
        font-size: 12px;
    }

    .contact-demo-item-content p {
        font-size: 11px;
        line-height: 1.6;
    }

    /* WHATSAPP */
    .contact-demo-whatsapp {
        gap: 10px;
        margin-top: 18px;
        padding: 11px 12px;
        border-radius: 11px;
    }

    .contact-demo-whatsapp-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 17px;
    }

    .contact-demo-whatsapp span {
        font-size: 10px;
    }

    .contact-demo-whatsapp strong {
        font-size: 11px;
    }

    .contact-demo-whatsapp > i {
        font-size: 13px;
    }

    /* FORM */
    .contact-demo-form-header {
        gap: 10px;
        margin-bottom: 10px;
    }

    .contact-demo-form-icon {
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 17px;
    }

    .contact-demo-form-header span {
        font-size: 10px;
    }

    .contact-demo-form-header h3 {
        font-size: 18px;
    }

    .contact-demo-form-description {
        font-size: 11px;
        line-height: 1.6;
        margin-bottom: 18px;
    }

    /* FORM LABEL */
    .contact-demo-input-group label {
        font-size: 11px;
        margin-bottom: 6px;
    }

    /* INPUT */
    .contact-demo-input > i {
        left: 13px;
        font-size: 13px;
    }

    .contact-demo-input input,
    .contact-demo-input textarea {
        font-size: 11px;
        border-radius: 9px;
        padding-left: 38px;
    }

    .contact-demo-input input {
        height: 44px;
    }

    .contact-demo-input textarea {
        min-height: 100px;
    }

    .contact-demo-input input::placeholder,
    .contact-demo-input textarea::placeholder {
        font-size: 11px;
    }

    /* SUBMIT */
    .contact-demo-submit {
        padding: 12px 15px;
        border-radius: 9px;
        font-size: 12px;
    }

    .contact-demo-submit i {
        font-size: 12px;
    }
}


/* ================================
   SMALL MOBILE
================================ */

@media (max-width: 480px) {

    .contact-demo-section {
        padding: 45px 0;
    }

    .contact-demo-header {
        margin-bottom: 28px;
    }

    .contact-demo-header h2 {
        font-size: 20px;
    }

    .contact-demo-header p {
        font-size: 11px;
    }

    .contact-demo-info,
    .contact-demo-form-card {
        padding: 16px;
        border-radius: 14px;
    }

    .contact-demo-info-heading h3 {
        font-size: 16px;
    }

    .contact-demo-info-heading p {
        font-size: 10px;
    }

    .contact-demo-item-content a {
        font-size: 11px;
    }

    .contact-demo-item-content p {
        font-size: 10px;
    }

    .contact-demo-form-header h3 {
        font-size: 16px;
    }

    .contact-demo-form-description {
        font-size: 10px;
    }

    .contact-demo-input-group label {
        font-size: 10px;
    }

    .contact-demo-input input,
    .contact-demo-input textarea {
        font-size: 10px;
    }

    .contact-demo-input input::placeholder,
    .contact-demo-input textarea::placeholder {
        font-size: 10px;
    }

    .contact-demo-submit {
        font-size: 11px;
    }
}

/* contact-demo-section-css-end */


/* blog-section-css-start */

.star-blog-section {
    position: relative;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 5% 10%,
            rgba(51, 49, 233, .12),
            transparent 28%),
        radial-gradient(circle at 95% 85%,
            rgba(255, 213, 74, .06),
            transparent 30%),
        linear-gradient(135deg,
            #02050c 0%,
            #06152f 50%,
            #020817 100%);
}

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

.star-blog-bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(30px);
}

.star-blog-glow-one {
    width: 400px;
    height: 400px;
    left: -250px;
    top: 25%;
    background: radial-gradient(circle,
            rgba(51, 49, 233, .12),
            transparent 70%);
}

.star-blog-glow-two {
    width: 450px;
    height: 450px;
    right: -250px;
    bottom: 5%;
    background: radial-gradient(circle,
            rgba(255, 213, 74, .07),
            transparent 70%);
}

/* =========================================================
   BLOG HEADER
========================================================= */

.star-blog-header {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto 30px;
    text-align: center;
}

.star-blog-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 15px;
    border-radius: 50px;
    color: #FFD54A;
    background: rgba(255, 213, 74, .08);
    border: 1px solid rgba(255, 213, 74, .15);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
}

.star-blog-tag i {
    font-size: 14px;
}

.star-blog-header h2 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.8px;
}

.star-blog-header h2 span {
    display: inline;
    background: linear-gradient(90deg,
            #38bdf8 0%,
            #4f8cff 45%,
            #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.star-blog-header p {
    max-width: 650px;
    margin: 0 auto;
    color: #9cafcb;
    font-size: 14px;
    line-height: 1.8;
}

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

.star-blog-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .055),
            rgba(255, 255, 255, .018));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
        0 20px 55px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(12px);
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.star-blog-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 213, 74, .28);
    box-shadow:
        0 25px 65px rgba(0, 0, 0, .38),
        0 0 30px rgba(51, 49, 233, .08);
}

/* =========================================================
   BLOG IMAGE
========================================================= */

.star-blog-image {
    position: relative;
    width: 100%;
    height: 205px;
    overflow: hidden;
    background: #07152d;
}

.star-blog-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            transparent 55%,
            rgba(2, 5, 12, .65) 100%);
    pointer-events: none;
}

.star-blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.star-blog-card:hover .star-blog-image img {
    transform: scale(1.08);
}

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

.star-blog-category {
    position: absolute;
    z-index: 2;
    left: 15px;
    bottom: 14px;
    padding: 6px 11px;
    border-radius: 50px;
    color: #FFD54A;
    background: rgba(7, 27, 59, .88);
    border: 1px solid rgba(255, 213, 74, .22);
    backdrop-filter: blur(8px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* =========================================================
   BLOG CONTENT
========================================================= */

.star-blog-content {
    display: flex;
    flex-direction: column;
    min-height: 245px;
    padding: 23px 20px 20px;
}

.star-blog-content h3 {
    margin: 0 0 11px;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 750;
    transition: color .3s ease;
}

.star-blog-card:hover .star-blog-content h3 {
    color: #FFD54A;
}

.star-blog-content p {
    margin: 0 0 20px;
    color: #91a5c5;
    font-size: 12px;
    line-height: 1.75;
}

/* =========================================================
   READ MORE BUTTON
========================================================= */

.star-blog-read-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    margin-top: auto;
    padding: 10px 15px;
    overflow: hidden;
    border-radius: 9px;
    color: #FFD54A;
    background: transparent;
    border: 1px solid rgba(255, 213, 74, .28);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    transition: color .35s ease,
        border-color .35s ease;
}

.star-blog-read-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 0;
    background: #FFD54A;
    transition: width .4s ease;
}

.star-blog-read-btn span,
.star-blog-read-btn i {
    position: relative;
    z-index: 2;
}

.star-blog-read-btn i {
    font-size: 13px;
    transition: transform .35s ease;
}

.star-blog-read-btn:hover {
    color: #071B3B;
    border-color: #FFD54A;
}

.star-blog-read-btn:hover::before {
    width: 100%;
}

.star-blog-read-btn:hover i {
    transform: translateX(4px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .star-blog-section {
        padding: 75px 0;
    }

    .star-blog-header {
        margin-bottom: 40px;
    }

    .star-blog-header h2 {
        font-size: 32px;
    }

    .star-blog-image {
        height: 190px;
    }

    .star-blog-content {
        min-height: 235px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .star-blog-section {
        padding: 60px 0;
    }

    .star-blog-header {
        margin-bottom: 35px;
        padding: 0 10px;
    }

    .star-blog-tag {
        font-size: 10px;
        padding: 7px 12px;
    }

    .star-blog-header h2 {
        font-size: 27px;
        line-height: 1.3;
    }

    .star-blog-header p {
        font-size: 12px;
        line-height: 1.7;
    }

    .star-blog-card {
        border-radius: 17px;
    }

    .star-blog-image {
        height: 210px;
    }

    .star-blog-content {
        min-height: auto;
        padding: 20px 17px 18px;
    }

    .star-blog-content h3 {
        font-size: 16px;
    }

    .star-blog-content p {
        font-size: 11px;
        line-height: 1.7;
        margin-bottom: 18px;
    }

    .star-blog-read-btn {
        font-size: 10px;
        padding: 9px 13px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .star-blog-section {
        padding: 50px 0;
    }

    .star-blog-header {
        margin-bottom: 30px;
    }

    .star-blog-header h2 {
        font-size: 23px;
    }

    .star-blog-header p {
        font-size: 11px;
    }

    .star-blog-image {
        height: 200px;
    }

    .star-blog-content {
        padding: 18px 15px 16px;
    }

    .star-blog-content h3 {
        font-size: 15px;
    }

    .star-blog-content p {
        font-size: 10px;
    }

    .star-blog-category {
        left: 12px;
        bottom: 11px;
        font-size: 9px;
        padding: 5px 9px;
    }
}

/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

    .star-blog-header h2 {
        font-size: 21px;
    }

    .star-blog-image {
        height: 180px;
    }

    .star-blog-content h3 {
        font-size: 14px;
    }

    .star-blog-content p {
        font-size: 10px;
        line-height: 1.65;
    }

    .star-blog-read-btn {
        font-size: 9px;
        padding: 8px 11px;
    }
}

/* blog-section-css-end */

/* low-cose-billing-section-css-start */

.low-cost-blog-section {
    position: relative;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 12%,
            rgba(51, 49, 233, .13),
            transparent 28%),
        radial-gradient(circle at 92% 75%,
            rgba(255, 213, 74, .06),
            transparent 30%),
        linear-gradient(135deg,
            #02050c 0%,
            #06152f 48%,
            #020817 100%);
}

.low-cost-blog-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(30px);
}

.low-cost-glow-one {
    width: 450px;
    height: 450px;
    left: -280px;
    top: 25%;
    background: radial-gradient(circle,
            rgba(51, 49, 233, .13),
            transparent 70%);
}

.low-cost-glow-two {
    width: 500px;
    height: 500px;
    right: -300px;
    bottom: 10%;
    background: radial-gradient(circle,
            rgba(255, 213, 74, .07),
            transparent 70%);
}

/* intro */
.low-cost-blog-intro {
    position: relative;
    z-index: 2;
    max-width: 950px;
    margin: 0 auto 30px;
    text-align: center;
}

.low-cost-blog-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 15px;
    border-radius: 50px;
    color: #FFD54A;
    background: rgba(255, 213, 74, .08);
    border: 1px solid rgba(255, 213, 74, .16);
    font-size: 12px;
    font-weight: 700;
}

.low-cost-blog-intro h2 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.8px;
}

.low-cost-blog-intro h2 span {
    background: linear-gradient(90deg,
            #38bdf8,
            #4f8cff,
            #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.low-cost-blog-lead {
    max-width: 790px;
    margin: auto;
    color: #9cafcb;
    font-size: 14px;
    line-height: 1.85;
}

.low-cost-blog-lead strong {
    color: #ffffff;
}

/* =========================================================
   FEATURED IMAGE
========================================================= */

.low-cost-blog-featured-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 470px;
    margin-bottom: 55px;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .45);
}

.low-cost-blog-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.low-cost-blog-featured-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            transparent 45%,
            rgba(2, 5, 12, .72) 100%);
    pointer-events: none;
}

.low-cost-image-overlay {
    position: absolute;
    z-index: 2;
    left: 30px;
    bottom: 28px;
}

.low-cost-image-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 50px;
    color: #FFD54A;
    background: rgba(7, 27, 59, .88);
    border: 1px solid rgba(255, 213, 74, .25);
    backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 700;
}

/* =========================================================
   BLOG CONTENT
========================================================= */

.low-cost-blog-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1050px;
    margin: auto;
}

.low-cost-blog-main {
    width: 100%;
}

/* =========================================================
   CONTENT CARD
========================================================= */

.low-cost-content-card {
    position: relative;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 28px;
    margin-bottom: 28px;
    padding: 38px;
    overflow: hidden;
    border-radius: 22px;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .045),
            rgba(255, 255, 255, .015));
    border: 1px solid rgba(255, 255, 255, .075);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(14px);
    transition:
        transform .35s ease,
        border-color .35s ease;
}

.low-cost-content-card:hover {
    border-color: rgba(255, 213, 74, .18);
    transform: translateY(-3px);
}

.low-cost-content-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 213, 74, .3),
            transparent);
}

/* =========================================================
   CARD NUMBER
========================================================= */

.low-cost-card-number {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #FFD54A;
    background:
        linear-gradient(135deg,
            rgba(51, 49, 233, .25),
            rgba(255, 213, 74, .07));
    border: 1px solid rgba(255, 213, 74, .18);
    font-size: 15px;
    font-weight: 800;
}

/* =========================================================
   CONTENT
========================================================= */

.low-cost-section-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    color: #FFD54A;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.low-cost-card-content h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 29px;
    line-height: 1.3;
    font-weight: 800;
}

.low-cost-card-content p {
    margin: 0 0 17px;
    color: #aebed8;
    font-size: 14px;
    line-height: 1.9;
}

.low-cost-card-content p strong {
    color: #ffffff;
}

/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.low-cost-highlight-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 25px;
    padding: 20px;
    border-radius: 16px;
    background:
        linear-gradient(135deg,
            rgba(51, 49, 233, .12),
            rgba(255, 213, 74, .04));
    border: 1px solid rgba(255, 213, 74, .12);
}

.low-cost-highlight-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #071B3B;
    background: #FFD54A;
    font-size: 18px;
}

.low-cost-highlight-box h3 {
    margin: 1px 0 6px;
    color: #ffffff;
    font-size: 15px;
}

.low-cost-highlight-box p {
    margin: 0;
    font-size: 12px;
}

/* =========================================================
   PRICE GRID
========================================================= */

.low-cost-price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 25px 0;
}

.low-cost-price-card {
    padding: 20px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .07);
    transition: .35s ease;
}

.low-cost-price-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 213, 74, .3);
}

.low-cost-price-card i {
    color: #FFD54A;
    font-size: 22px;
}

.low-cost-price-card h3 {
    margin: 13px 0 7px;
    color: #ffffff;
    font-size: 14px;
}

.low-cost-price-card p {
    margin: 0;
    color: #91a5c5;
    font-size: 11px;
    line-height: 1.65;
}

.low-cost-note {
    padding: 15px 17px;
    border-left: 3px solid #FFD54A;
    background: rgba(255, 213, 74, .04);
}

/* =========================================================
   FEATURES
========================================================= */

.low-cost-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 25px;
}

.low-cost-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    transition: .35s ease;
}

.low-cost-feature-item:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 213, 74, .25);
    background: rgba(255, 213, 74, .035);
}

.low-cost-feature-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #FFD54A;
    background: rgba(255, 213, 74, .08);
    border: 1px solid rgba(255, 213, 74, .13);
}

.low-cost-feature-item h3 {
    margin: 2px 0 6px;
    color: #ffffff;
    font-size: 14px;
}

.low-cost-feature-item p {
    margin: 0;
    color: #91a5c5;
    font-size: 11px;
    line-height: 1.65;
}

/* =========================================================
   BUSINESS GRID
========================================================= */

.low-cost-business-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 25px;
}

.low-cost-business-card {
    padding: 20px 15px;
    text-align: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    transition: .35s ease;
}

.low-cost-business-card:hover {
    transform: translateY(-4px);
    border-color: rgba(51, 49, 233, .35);
}

.low-cost-business-card i {
    color: #FFD54A;
    font-size: 24px;
}

.low-cost-business-card h3 {
    margin: 12px 0 7px;
    color: #ffffff;
    font-size: 13px;
}

.low-cost-business-card p {
    margin: 0;
    color: #91a5c5;
    font-size: 10px;
    line-height: 1.6;
}

/* =========================================================
   STAR CRM BENEFITS
========================================================= */

.low-cost-star-card {
    background:
        linear-gradient(145deg,
            rgba(51, 49, 233, .08),
            rgba(255, 255, 255, .018));
}

.low-cost-star-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
    margin: 25px 0;
}

.low-cost-star-benefits div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-radius: 11px;
    color: #aebed8;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .05);
    font-size: 12px;
}

.low-cost-star-benefits i {
    color: #FFD54A;
}

.low-cost-final-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border-radius: 14px;
    background: rgba(255, 213, 74, .05);
    border: 1px solid rgba(255, 213, 74, .12);
}

.low-cost-final-message>i {
    color: #FFD54A;
    font-size: 20px;
}

.low-cost-final-message p {
    margin: 0;
    font-size: 12px;
}

/* =========================================================
   FAQ
========================================================= */

.low-cost-faq-list {
    margin-top: 25px;
}

.low-cost-faq-item {
    margin-bottom: 11px;
    padding: 17px 18px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
}

.low-cost-faq-item h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
}

.low-cost-faq-item h3 i {
    color: #FFD54A;
    font-size: 16px;
}

.low-cost-faq-item p {
    margin: 12px 0 0;
    color: #91a5c5;
    font-size: 12px;
    line-height: 1.75;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .low-cost-blog-section {
        padding: 75px 0;
    }

    .low-cost-blog-intro h2 {
        font-size: 34px;
    }

    .low-cost-blog-featured-image {
        height: 400px;
    }

    .low-cost-content-card {
        grid-template-columns: 60px 1fr;
        gap: 22px;
        padding: 30px;
    }

    .low-cost-card-number {
        width: 52px;
        height: 52px;
    }

    .low-cost-card-content h2 {
        font-size: 25px;
    }

    .low-cost-business-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .low-cost-blog-section {
        padding: 55px 0;
    }

    .low-cost-blog-intro {
        margin-bottom: 30px;
    }

    .low-cost-blog-tag {
        font-size: 10px;
        padding: 7px 12px;
    }

    .low-cost-blog-intro h2 {
        font-size: 27px;
        line-height: 1.3;
    }

    .low-cost-blog-lead {
        font-size: 12px;
        line-height: 1.75;
    }

    .low-cost-blog-featured-image {
        height: 260px;
        margin-bottom: 30px;
        border-radius: 18px;
    }

    .low-cost-image-overlay {
        left: 15px;
        bottom: 15px;
    }

    .low-cost-image-badge {
        font-size: 10px;
        padding: 7px 10px;
    }

    .low-cost-content-card {
        display: block;
        padding: 23px 18px;
        margin-bottom: 20px;
        border-radius: 17px;
    }

    .low-cost-card-number {
        width: 46px;
        height: 46px;
        margin-bottom: 20px;
        border-radius: 13px;
        font-size: 13px;
    }

    .low-cost-section-label {
        font-size: 9px;
    }

    .low-cost-card-content h2 {
        font-size: 21px;
        margin-bottom: 14px;
    }

    .low-cost-card-content p {
        font-size: 12px;
        line-height: 1.75;
        margin-bottom: 14px;
    }

    .low-cost-price-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .low-cost-price-card {
        padding: 16px;
    }

    .low-cost-feature-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .low-cost-feature-item {
        padding: 14px;
    }

    .low-cost-business-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .low-cost-star-benefits {
        grid-template-columns: 1fr;
    }

    .low-cost-highlight-box {
        padding: 15px;
    }

    .low-cost-highlight-box p {
        font-size: 11px;
    }

    .low-cost-faq-item {
        padding: 14px;
    }

    .low-cost-faq-item h3 {
        font-size: 12px;
    }

    .low-cost-faq-item p {
        font-size: 11px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .low-cost-blog-section {
        padding: 45px 0;
    }

    .low-cost-blog-intro h2 {
        font-size: 23px;
    }

    .low-cost-blog-lead {
        font-size: 11px;
    }

    .low-cost-blog-featured-image {
        height: 210px;
        border-radius: 15px;
    }

    .low-cost-content-card {
        padding: 20px 15px;
    }

    .low-cost-card-content h2 {
        font-size: 19px;
    }

    .low-cost-card-content p {
        font-size: 11px;
    }

    .low-cost-business-card {
        padding: 16px 10px;
    }

    .low-cost-business-card h3 {
        font-size: 12px;
    }

    .low-cost-business-card p {
        font-size: 9px;
    }

    .low-cost-star-benefits div {
        font-size: 10px;
    }

    .low-cost-final-message {
        align-items: flex-start;
    }

    .low-cost-final-message p {
        font-size: 10px;
    }
}

/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

    .low-cost-blog-intro h2 {
        font-size: 21px;
    }

    .low-cost-blog-featured-image {
        height: 180px;
    }

    .low-cost-card-content h2 {
        font-size: 18px;
    }

    .low-cost-card-content p {
        font-size: 10px;
        line-height: 1.7;
    }

    .low-cost-business-grid {
        grid-template-columns: 1fr;
    }

    .low-cost-business-card p {
        font-size: 10px;
    }
}

/* =========================================================
   SMOOTH COMPARISON TABLE
========================================================= */

.low-cost-comparison-table-wrapper {
    width: 100%;
    margin-top: 28px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .018);
    box-shadow:
        0 15px 45px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .025);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 213, 74, .35) rgba(255, 255, 255, .04);
    margin-bottom: 15px;
}

/* Scrollbar - Chrome / Edge / Safari */

.low-cost-comparison-table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.low-cost-comparison-table-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .04);
    border-radius: 20px;
}

.low-cost-comparison-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 213, 74, .35);
    border-radius: 20px;
}

.low-cost-comparison-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 213, 74, .60);
}


/* =========================================================
   TABLE
========================================================= */

.low-cost-comparison-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    color: #ffffff;
    font-size: 13px;
}


/* =========================================================
   TABLE HEADER
========================================================= */

.low-cost-comparison-table thead th {
    padding: 17px 18px;
    text-align: left;
    vertical-align: middle;

    color: #FFD54A;
    background:
        linear-gradient(135deg,
            rgba(255, 213, 74, .10),
            rgba(51, 49, 233, .08));

    border-bottom: 1px solid rgba(255, 213, 74, .16);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .2px;
    white-space: nowrap;
}


/* Header first / last corners */

.low-cost-comparison-table thead th:first-child {
    border-top-left-radius: 15px;
}

.low-cost-comparison-table thead th:last-child {
    border-top-right-radius: 15px;
}


/* =========================================================
   TABLE BODY
========================================================= */

.low-cost-comparison-table tbody tr {
    transition:
        background .25s ease,
        transform .25s ease;
}

.low-cost-comparison-table tbody tr:hover {
    background: rgba(255, 213, 74, .035);
}


/* =========================================================
   TABLE CELLS
========================================================= */

.low-cost-comparison-table tbody td {
    padding: 16px 18px;

    color: #aebed8;
    background: rgba(255, 255, 255, .012);

    border-bottom: 1px solid rgba(255, 255, 255, .055);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.65;
    vertical-align: middle;

    transition:
        color .25s ease,
        background .25s ease;
}


/* First column */

.low-cost-comparison-table tbody td:first-child {
    color: #ffffff;
    font-weight: 700;
}


/* Hover cells */

.low-cost-comparison-table tbody tr:hover td {
    color: #c7d4e8;
}

.low-cost-comparison-table tbody tr:hover td:first-child {
    color: #FFD54A;
}


/* Remove last border */

.low-cost-comparison-table tbody tr:last-child td {
    border-bottom: none;
}


/* Bottom corners */

.low-cost-comparison-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 15px;
}

.low-cost-comparison-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 15px;
}


/* =========================================================
   COLUMN SEPARATION
========================================================= */

.low-cost-comparison-table th+th,
.low-cost-comparison-table td+td {
    border-left: 1px solid rgba(255, 255, 255, .045);
}


/* =========================================================
   TABLE NOTE
========================================================= */

.low-cost-table-note {
    margin-top: 16px;
    padding: 14px 16px;

    color: #91a5c5;
    background: rgba(255, 255, 255, .025);

    border-left: 3px solid #FFD54A;
    border-radius: 0 10px 10px 0;

    font-size: 11px;
    line-height: 1.7;
}

.low-cost-table-note strong {
    color: #ffffff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .low-cost-comparison-table-wrapper {
        border-radius: 14px;
    }

    .low-cost-comparison-table {
        min-width: 700px;
        font-size: 12px;
    }

    .low-cost-comparison-table thead th {
        padding: 15px 15px;
        font-size: 11px;
    }

    .low-cost-comparison-table tbody td {
        padding: 14px 15px;
        font-size: 11px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .low-cost-comparison-table-wrapper {
        margin-top: 20px;
        border-radius: 12px;
    }

    .low-cost-comparison-table {
        min-width: 680px;
    }

    .low-cost-comparison-table thead th {
        padding: 13px 13px;
        font-size: 10px;
    }

    .low-cost-comparison-table tbody td {
        padding: 13px;
        font-size: 10px;
        line-height: 1.6;
    }

    .low-cost-table-note {
        padding: 12px 13px;
        font-size: 10px;
        line-height: 1.65;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .low-cost-comparison-table-wrapper {
        margin-top: 18px;
    }

    .low-cost-comparison-table {
        min-width: 650px;
    }

    .low-cost-comparison-table thead th {
        padding: 12px;
        font-size: 9px;
    }

    .low-cost-comparison-table tbody td {
        padding: 12px;
        font-size: 9px;
    }
}


/* low-cost-billing-section-css-end */


/* pricing-section-css-start */

.billing-pages-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    /* YOUR BACKGROUND */
    background:
        radial-gradient(circle at 10% 15%,
            rgba(51, 49, 233, 0.12),
            transparent 28%),
        radial-gradient(circle at 90% 80%,
            rgba(255, 213, 74, 0.07),
            transparent 30%),
        linear-gradient(135deg,
            #02050c 0%,
            #06152f 48%,
            #020817 100%);
}

/* =========================================================
   ANIMATED BACKGROUND GLOW
========================================================= */
.billing-pages-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -180px;
    left: -180px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(51, 49, 233, 0.16),
            transparent 68%);
    filter: blur(20px);
    pointer-events: none;
    animation: billingGlowOne 8s ease-in-out infinite alternate;
}

.billing-pages-section::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    right: -170px;
    bottom: -180px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(255, 213, 74, 0.09),
            transparent 68%);
    filter: blur(25px);
    pointer-events: none;
    animation: billingGlowTwo 10s ease-in-out infinite alternate;
}


/* =========================================================
   BACKGROUND ANIMATION
========================================================= */

@keyframes billingGlowOne {

    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.55;
    }

    50% {
        transform: translate(100px, 60px) scale(1.15);
        opacity: 0.8;
    }

    100% {
        transform: translate(40px, 130px) scale(0.95);
        opacity: 0.6;
    }

}


@keyframes billingGlowTwo {

    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.45;
    }

    50% {
        transform: translate(-90px, -70px) scale(1.15);
        opacity: 0.75;
    }

    100% {
        transform: translate(-40px, -120px) scale(0.9);
        opacity: 0.5;
    }

}

/* =========================================================
   KEEP CONTENT ABOVE BACKGROUND
========================================================= */
.billing-pages-section .container {
    position: relative;
    z-index: 2;
}

/* SECTION HEADER */
.billing-pages-header {
    max-width: 850px;
    margin: 0 auto 40px;
    text-align: center;
}

.billing-pages-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 213, 74, 0.35);
    border-radius: 30px;
    color: #FFD54A;
    background: rgba(255, 213, 74, 0.06);
    font-size: 14px;
    font-weight: 600;
}

.billing-pages-header h2 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
}

.billing-pages-header h2 span {
    color: #FFD54A;
}

.billing-pages-header p {
    max-width: 700px;
    margin: auto;
    color: #aebbd1;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   MAIN CARD
========================================================= */

.billing-page-card {
    position: relative;
    display: grid;
    grid-template-columns: 38% 62%;
    min-height: 390px;
    margin-bottom: 35px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.15);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.billing-page-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 213, 74, 0.35);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   REVERSE ROW
========================================================= */

.billing-page-card-reverse {
    grid-template-columns: 62% 38%;
}

.billing-page-card-reverse .billing-page-image {
    order: 2;
}

.billing-page-card-reverse .billing-page-content {
    order: 1;
}

/* =========================================================
   IMAGE
========================================================= */
.billing-page-image {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    border: 2px solid #FFD54A;
    border-radius: 20px;
    background: #071B3B;
}

.billing-page-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(7, 27, 59, 0.05),
            rgba(7, 27, 59, 0.55));
    pointer-events: none;
}

.billing-page-image img {
    width: 100%;
    height: 100%;
    min-height: 390px;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.billing-page-card:hover .billing-page-image img {
    transform: scale(1.05);
}


/* IMAGE BADGE */

.billing-page-image-badge {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 30px;
    color: #071B3B;
    background: #FFD54A;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   CONTENT
========================================================= */
.billing-page-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 45px 50px;
}

.billing-page-number {
    position: absolute;
    top: 22px;
    right: 30px;
    color: rgba(255, 213, 74, 0.12);
    font-size: 55px;
    line-height: 1;
    font-weight: 800;
}

.billing-page-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-bottom: 12px;
    color: #FFD54A;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.billing-page-content h3 {
    margin: 0 0 15px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;
}

.billing-page-content>p {
    max-width: 720px;
    margin: 0 0 22px;
    color: #aebbd1;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   FEATURE LIST
========================================================= */

.billing-page-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 27px;
}

.billing-page-features span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #d7dfeb;
    font-size: 13px;
    line-height: 1.5;
}

.billing-page-features i {
    color: #FFD54A;
    font-size: 13px;
}


/* =========================================================
   BUTTON
========================================================= */

.billing-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    padding: 12px 20px;
    border: 1px solid #FFD54A;
    border-radius: 8px;
    color: #071B3B;
    background: #FFD54A;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.billing-page-btn i {
    transition: transform 0.3s ease;
}

.billing-page-btn:hover {
    color: #FFD54A;
    background: transparent;

    transform: translateX(3px);
}

.billing-page-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .billing-pages-section {
        padding: 80px 0;
    }

    .billing-pages-header {
        margin-bottom: 45px;
    }

    .billing-pages-header h2 {
        font-size: 36px;
    }

    .billing-page-card,
    .billing-page-card-reverse {
        grid-template-columns: 45% 55%;
    }

    .billing-page-card-reverse .billing-page-image {
        order: 2;
    }

    .billing-page-card-reverse .billing-page-content {
        order: 1;
    }

    .billing-page-content {
        padding: 35px 30px;
    }

    .billing-page-content h3 {
        font-size: 25px;
    }

    .billing-page-image,
    .billing-page-image img {
        min-height: 390px;
    }

    .billing-page-number {
        font-size: 45px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .billing-pages-section {
        padding: 65px 0;
    }

    .billing-pages-header {
        margin-bottom: 35px;
    }

    .billing-pages-header h2 {
        font-size: 30px;
    }

    .billing-pages-header p {
        font-size: 14px;
        line-height: 1.7;
    }


    /* ONE CARD BELOW ANOTHER */

    .billing-page-card,
    .billing-page-card-reverse {
        display: flex;
        flex-direction: column;
        margin-bottom: 25px;
        border-radius: 18px;
    }


    /* RESET REVERSE */

    .billing-page-card-reverse .billing-page-image,
    .billing-page-card-reverse .billing-page-content {
        order: initial;
    }


    /* IMAGE */

    .billing-page-image {
        width: 100%;
        min-height: 240px;
        border-radius: 16px 16px 0 0;
        border-width: 2px;
    }

    .billing-page-image img {
        width: 100%;
        min-height: 240px;
        height: 240px;
    }

    .billing-page-image-badge {
        left: 15px;
        bottom: 15px;
        padding: 8px 13px;
        font-size: 12px;
    }


    /* CONTENT */

    .billing-page-content {
        padding: 30px 22px 27px;
    }

    .billing-page-number {
        top: 18px;
        right: 20px;
        font-size: 40px;
    }

    .billing-page-label {
        font-size: 11px;
    }

    .billing-page-content h3 {
        padding-right: 45px;

        font-size: 23px;
    }

    .billing-page-content>p {
        font-size: 14px;
        line-height: 1.75;
    }


    /* FEATURES */

    .billing-page-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 25px;
    }

    .billing-page-features span {
        align-items: flex-start;
        font-size: 12px;
    }


    /* BUTTON */

    .billing-page-btn {
        width: 100%;
        padding: 12px 15px;
        font-size: 12px;
    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .billing-pages-header h2 {
        font-size: 26px;
    }

    .billing-pages-tag {
        font-size: 12px;
    }

    .billing-page-content {
        padding: 27px 18px 23px;
    }

    .billing-page-content h3 {
        font-size: 21px;
    }

    .billing-page-features {
        grid-template-columns: 1fr;
    }

    .billing-page-image,
    .billing-page-image img {
        min-height: 220px;
        height: 220px;
    }

}

/* pricing-section-end */


/* pricing-inner-section-start */

.pricing-inner-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 15%,
            rgba(51, 49, 233, 0.12),
            transparent 28%),
        radial-gradient(circle at 90% 80%,
            rgba(255, 213, 74, 0.07),
            transparent 30%),
        linear-gradient(135deg,
            #02050c 0%,
            #06152f 48%,
            #020817 100%);
}


/* BACKGROUND GLOW */
.pricing-inner-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(20px);
}

.pricing-inner-glow-one {
    width: 500px;
    height: 500px;
    top: -220px;
    left: -200px;
    background: radial-gradient(circle,
            rgba(51, 49, 233, 0.18),
            transparent 70%);
    animation: pricingInnerGlowOne 9s ease-in-out infinite alternate;
}

.pricing-inner-glow-two {
    width: 450px;
    height: 450px;
    right: -180px;
    bottom: -180px;
    background: radial-gradient(circle,
            rgba(255, 213, 74, 0.10),
            transparent 70%);
    animation: pricingInnerGlowTwo 11s ease-in-out infinite alternate;
}

@keyframes pricingInnerGlowOne {

    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(100px, 80px) scale(1.15);
        opacity: 0.8;
    }

    100% {
        transform: translate(40px, 140px) scale(0.95);
        opacity: 0.6;
    }
}

@keyframes pricingInnerGlowTwo {

    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.45;
    }

    50% {
        transform: translate(-80px, -80px) scale(1.15);
        opacity: 0.75;
    }

    100% {
        transform: translate(-40px, -120px) scale(0.9);
        opacity: 0.5;
    }
}

/* CONTAINER */
.pricing-inner-section .container {
    position: relative;
    z-index: 2;
}

/* HEADER */
.pricing-inner-header {
    max-width: 1070px;
    margin: 0 auto 40px;
    text-align: center;
}

.pricing-inner-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 213, 74, 0.35);
    border-radius: 30px;
    color: #FFD54A;
    background: rgba(255, 213, 74, 0.06);
    font-size: 13px;
    font-weight: 700;
}

.pricing-inner-header h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.25;
}

.pricing-inner-header h2 span {
    color: #FFD54A;
}

.pricing-inner-header p {
    max-width: 720px;
    margin: auto;
    color: #aebbd1;
    font-size: 15px;
    line-height: 1.8;
}


/* INTRO */
.pricing-inner-intro {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 30px;
    margin-bottom: 45px;
    border: 1px solid rgba(255, 213, 74, 0.15);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.18);
}

.pricing-inner-intro-icon {
    flex: 0 0 65px;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #071B3B;
    background: #FFD54A;
    font-size: 27px;
}

.pricing-inner-intro-content {
    flex: 1;
}

.pricing-inner-intro-content>span {
    display: block;
    margin-bottom: 7px;
    color: #FFD54A;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.pricing-inner-intro-content h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 800;
}

.pricing-inner-intro-content p {
    margin: 0 0 10px;
    color: #aebbd1;
    font-size: 14px;
    line-height: 1.8;
}

.pricing-inner-intro-content p:last-child {
    margin-bottom: 0;
}

/* FEATURE GRID */
.pricing-inner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}


/* CARD */
.pricing-inner-card {
    position: relative;
    padding: 30px;
    min-height: 360px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.pricing-inner-card::before {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    top: -70px;
    right: -70px;
    border-radius: 50%;
    background: rgba(255, 213, 74, 0.06);
    transition: transform 0.4s ease;
}

.pricing-inner-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 213, 74, 0.35);
    background: rgba(255, 213, 74, 0.035);
    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(255, 213, 74, 0.04);
}

.pricing-inner-card:hover::before {
    transform: scale(2);
}


/* CARD TOP */
.pricing-inner-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.pricing-inner-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 213, 74, 0.3);
    border-radius: 14px;
    color: #FFD54A;
    background: rgba(255, 213, 74, 0.08);
    font-size: 23px;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.pricing-inner-card:hover .pricing-inner-icon {
    color: #071B3B;
    background: #FFD54A;
    transform: rotate(-5deg);
}

.pricing-inner-number {
    color: rgba(255, 213, 74, 0.15);
    font-size: 45px;
    font-weight: 800;
    line-height: 1;
}


/* CARD CONTENT */

.pricing-inner-card h3 {
    position: relative;
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.pricing-inner-card>p {
    position: relative;
    margin: 0 0 20px;
    color: #aebbd1;
    font-size: 13px;
    line-height: 1.75;
}


/* LIST */

.pricing-inner-card ul {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-inner-card ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #d7dfeb;
    font-size: 12px;
    line-height: 1.5;
}

.pricing-inner-card ul li i {
    flex-shrink: 0;
    color: #FFD54A;
    font-size: 13px;
}


/* CTA */
.pricing-inner-cta {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 30px 35px;
    border: 1px solid rgba(255, 213, 74, 0.22);
    border-radius: 20px;
    background:
        linear-gradient(135deg,
            rgba(255, 213, 74, 0.07),
            rgba(255, 255, 255, 0.025));

    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.18);
}

.pricing-inner-cta-icon {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #071B3B;
    background: #FFD54A;
    font-size: 22px;
}

.pricing-inner-cta-content {
    flex: 1;
}

.pricing-inner-cta-content>span {
    display: block;
    margin-bottom: 5px;
    color: #FFD54A;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.pricing-inner-cta-content h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.pricing-inner-cta-content p {
    margin: 0;
    color: #aebbd1;
    font-size: 13px;
    line-height: 1.7;
}

.pricing-inner-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-shrink: 0;
    padding: 12px 20px;
    border: 1px solid #FFD54A;
    border-radius: 8px;
    color: #071B3B;
    background: #FFD54A;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.pricing-inner-cta-btn:hover {
    color: #FFD54A;
    background: transparent;
    transform: translateX(4px);
}

.pricing-inner-cta-btn i {
    transition: transform 0.3s ease;
}

.pricing-inner-cta-btn:hover i {
    transform: translateX(4px);
}


/* TABLET */

@media (max-width: 991px) {

    .pricing-inner-section {
        padding: 80px 0;
    }

    .pricing-inner-header h2 {
        font-size: 34px;
    }

    .pricing-inner-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-inner-card {
        min-height: auto;
    }

    .pricing-inner-cta {
        flex-wrap: wrap;
    }

    .pricing-inner-cta-btn {
        margin-left: 77px;
    }
}


/* MOBILE */

@media (max-width: 767px) {

    .pricing-inner-section {
        padding: 65px 0;
    }

    .pricing-inner-header {
        margin-bottom: 40px;
    }

    .pricing-inner-header h2 {
        font-size: 29px;
    }

    .pricing-inner-header p {
        font-size: 13px;
        line-height: 1.5;
    }

    .pricing-inner-intro {
        flex-direction: column;

        padding: 25px;

        gap: 18px;
    }

    .pricing-inner-intro-icon {
        width: 55px;
        height: 55px;

        flex-basis: 55px;

        font-size: 22px;
    }

    .pricing-inner-intro-content h3 {
        font-size: 16px;
    }

    .pricing-inner-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pricing-inner-card {
        padding: 25px;
    }

    .pricing-inner-card h3 {
        font-size: 21px;
    }

    .pricing-inner-cta {
        flex-direction: column;
        align-items: flex-start;

        padding: 25px;
    }

    .pricing-inner-cta-btn {
        width: 100%;
        margin-left: 0;
    }
}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .pricing-inner-header h2 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .pricing-inner-tag {
        font-size: 11px;
    }

    .pricing-inner-intro {
        padding: 20px;
    }

    .pricing-inner-card {
        padding: 22px;
    }

    .pricing-inner-card-number {
        font-size: 38px;
    }

    .pricing-inner-cta {
        padding: 22px;
    }

    .pricing-inner-cta-content h3 {
        font-size: 20px;
    }

    .pricing-inner-intro-content p {
        margin: 0 0 8px;
        font-size: 12px;
        line-height: 1.6;
    }
}

/* pricing-inner-section-end */

/* pos-billing-software-section-css-start */

.pos-billing-inner-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 15%, rgba(51, 49, 233, 0.12), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(255, 213, 74, 0.07), transparent 30%),
        linear-gradient(135deg, #02050c 0%, #06152f 48%, #020817 100%);
}

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

.pos-billing-inner-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(20px);
}

.pos-billing-glow-one {
    width: 500px;
    height: 500px;
    top: -220px;
    left: -200px;
    background: radial-gradient(circle, rgba(51, 49, 233, 0.18), transparent 70%);
    animation: posBillingGlowOne 9s ease-in-out infinite alternate;
}

.pos-billing-glow-two {
    width: 450px;
    height: 450px;
    right: -180px;
    bottom: -180px;
    background: radial-gradient(circle, rgba(255, 213, 74, 0.10), transparent 70%);
    animation: posBillingGlowTwo 11s ease-in-out infinite alternate;
}

@keyframes posBillingGlowOne {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(100px, 80px) scale(1.15);
        opacity: 0.8;
    }

    100% {
        transform: translate(40px, 140px) scale(0.95);
        opacity: 0.6;
    }
}

@keyframes posBillingGlowTwo {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.45;
    }

    50% {
        transform: translate(-80px, -80px) scale(1.15);
        opacity: 0.75;
    }

    100% {
        transform: translate(-40px, -120px) scale(0.9);
        opacity: 0.5;
    }
}

.pos-billing-inner-section .container {
    position: relative;
    z-index: 2;
}

/* =========================================================
HEADER
========================================================= */

.pos-billing-inner-header {
    max-width: 950px;
    margin: 0 auto 45px;
    text-align: center;
}

.pos-billing-inner-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 213, 74, 0.35);
    border-radius: 30px;
    color: #FFD54A;
    background: rgba(255, 213, 74, 0.06);
    font-size: 13px;
    font-weight: 700;
}

.pos-billing-inner-header h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.25;
}

.pos-billing-inner-header h2 span {
    color: #FFD54A;
}

.pos-billing-inner-header p {
    max-width: 750px;
    margin: auto;
    color: #aebbd1;
    font-size: 15px;
    line-height: 1.8;
}

/* =========================================================
INTRO
========================================================= */

.pos-billing-inner-intro {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 30px;
    margin-bottom: 50px;
    border: 1px solid rgba(255, 213, 74, 0.15);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.18);
}

.pos-billing-inner-intro-icon {
    flex: 0 0 65px;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #071B3B;
    background: #FFD54A;
    font-size: 27px;
}

.pos-billing-inner-intro-content {
    flex: 1;
}

.pos-billing-inner-intro-content>span {
    display: block;
    margin-bottom: 7px;
    color: #FFD54A;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.pos-billing-inner-intro-content h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 800;
}

.pos-billing-inner-intro-content p {
    margin: 0 0 10px;
    color: #aebbd1;
    font-size: 14px;
    line-height: 1.8;
}

.pos-billing-inner-intro-content p:last-child {
    margin-bottom: 0;
}

/* =========================================================
FEATURE GRID
========================================================= */

.pos-billing-inner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 55px;
}

/* =========================================================
FEATURE CARD
========================================================= */

.pos-billing-inner-card {
    position: relative;
    min-height: 350px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.pos-billing-inner-card::before {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    top: -70px;
    right: -70px;
    border-radius: 50%;
    background: rgba(255, 213, 74, 0.06);
    transition: transform 0.4s ease;
}

.pos-billing-inner-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 213, 74, 0.35);
    background: rgba(255, 213, 74, 0.035);
    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(255, 213, 74, 0.04);
}

.pos-billing-inner-card:hover::before {
    transform: scale(2);
}

/* =========================================================
CARD TOP
========================================================= */

.pos-billing-inner-card-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.pos-billing-inner-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 213, 74, 0.3);
    border-radius: 14px;
    color: #FFD54A;
    background: rgba(255, 213, 74, 0.08);
    font-size: 23px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.pos-billing-inner-card:hover .pos-billing-inner-icon {
    color: #071B3B;
    background: #FFD54A;
    transform: rotate(-5deg);
}

.pos-billing-inner-number {
    color: rgba(255, 213, 74, 0.15);
    font-size: 45px;
    font-weight: 800;
    line-height: 1;
}

/* =========================================================
CARD CONTENT
========================================================= */

.pos-billing-inner-card h3 {
    position: relative;
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.pos-billing-inner-card>p {
    position: relative;
    margin: 0 0 20px;
    color: #aebbd1;
    font-size: 13px;
    line-height: 1.75;
}

.pos-billing-inner-card ul {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pos-billing-inner-card ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #d7dfeb;
    font-size: 12px;
    line-height: 1.5;
}

.pos-billing-inner-card ul li i {
    flex-shrink: 0;
    color: #FFD54A;
    font-size: 13px;
}

/* =========================================================
CONTENT BLOCK
========================================================= */

.pos-billing-inner-content-block {
    position: relative;
    display: flex;
    gap: 25px;
    padding: 35px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.14);
}

.pos-billing-inner-content-number {
    flex: 0 0 60px;
}

.pos-billing-inner-content-number span {
    color: rgba(255, 213, 74, 0.15);
    font-size: 45px;
    font-weight: 800;
    line-height: 1;
}

.pos-billing-inner-content {
    flex: 1;
}

.pos-billing-inner-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #FFD54A;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.pos-billing-inner-content h2 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
}

.pos-billing-inner-content h2 span {
    color: #FFD54A;
}

.pos-billing-inner-content>p {
    margin: 0 0 15px;
    color: #aebbd1;
    font-size: 14px;
    line-height: 1.85;
}

/* =========================================================
BENEFIT GRID
========================================================= */

.pos-billing-inner-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 25px;
}

.pos-billing-inner-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.pos-billing-inner-benefit:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 213, 74, 0.25);
}

.pos-billing-inner-benefit>i {
    flex-shrink: 0;
    margin-top: 3px;
    color: #FFD54A;
    font-size: 15px;
}

.pos-billing-inner-benefit h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.pos-billing-inner-benefit p {
    margin: 0;
    color: #aebbd1;
    font-size: 12px;
    line-height: 1.7;
}

/* =========================================================
FINAL CTA
========================================================= */

.pos-billing-inner-final {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 30px 35px;
    border: 1px solid rgba(255, 213, 74, 0.22);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 213, 74, 0.07), rgba(255, 255, 255, 0.025));
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.18);
}

.pos-billing-inner-final-icon {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #071B3B;
    background: #FFD54A;
    font-size: 22px;
}

.pos-billing-inner-final-content {
    flex: 1;
}

.pos-billing-inner-final-content>span {
    display: block;
    margin-bottom: 5px;
    color: #FFD54A;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.pos-billing-inner-final-content h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.pos-billing-inner-final-content p {
    margin: 0 0 8px;
    color: #aebbd1;
    font-size: 13px;
    line-height: 1.75;
}

.pos-billing-inner-final-content p:last-child {
    margin-bottom: 0;
}

.pos-billing-inner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-shrink: 0;
    padding: 12px 20px;
    border: 1px solid #FFD54A;
    border-radius: 8px;
    color: #071B3B;
    background: #FFD54A;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.pos-billing-inner-btn:hover {
    color: #FFD54A;
    background: transparent;
    transform: translateX(4px);
}

.pos-billing-inner-btn i {
    transition: transform 0.3s ease;
}

.pos-billing-inner-btn:hover i {
    transform: translateX(4px);
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {
    .pos-billing-inner-section {
        padding: 80px 0;
    }

    .pos-billing-inner-header h2 {
        font-size: 34px;
    }

    .pos-billing-inner-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pos-billing-inner-card {
        min-height: auto;
    }

    .pos-billing-inner-final {
        flex-wrap: wrap;
    }

    .pos-billing-inner-btn {
        margin-left: 77px;
    }
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {
    .pos-billing-inner-section {
        padding: 65px 0;
    }

    .pos-billing-inner-header {
        margin-bottom: 40px;
    }

    .pos-billing-inner-header h2 {
        font-size: 29px;
    }

    .pos-billing-inner-header p {
        font-size: 13px;
        line-height: 1.7;
    }

    .pos-billing-inner-intro {
        flex-direction: column;
        padding: 25px;
        gap: 18px;
    }

    .pos-billing-inner-intro-icon {
        width: 55px;
        height: 55px;
        flex-basis: 55px;
        font-size: 22px;
    }

    .pos-billing-inner-intro-content h3 {
        font-size: 20px;
    }

    .pos-billing-inner-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pos-billing-inner-card {
        padding: 25px;
    }

    .pos-billing-inner-card h3 {
        font-size: 21px;
    }

    .pos-billing-inner-content-block {
        flex-direction: column;
        gap: 15px;
        padding: 25px;
    }

    .pos-billing-inner-content-number {
        flex: initial;
    }

    .pos-billing-inner-content h2 {
        font-size: 24px;
    }

    .pos-billing-inner-benefit-grid {
        grid-template-columns: 1fr;
    }

    .pos-billing-inner-final {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
    }

    .pos-billing-inner-btn {
        width: 100%;
        margin-left: 0;
    }
}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
    .pos-billing-inner-header h2 {
        font-size: 24px;
    }

    .pos-billing-inner-tag {
        font-size: 11px;
    }

    .pos-billing-inner-intro {
        padding: 20px;
    }

    .pos-billing-inner-intro-content h3 {
        font-size: 18px;
    }

    .pos-billing-inner-intro-content p {
        font-size: 12px;
        line-height: 1.7;
    }

    .pos-billing-inner-card {
        padding: 22px;
    }

    .pos-billing-inner-number {
        font-size: 38px;
    }

    .pos-billing-inner-content-block {
        padding: 22px;
    }

    .pos-billing-inner-content h2 {
        font-size: 21px;
    }

    .pos-billing-inner-content>p {
        font-size: 13px;
    }

    .pos-billing-inner-final {
        padding: 22px;
    }

    .pos-billing-inner-final-content h3 {
        font-size: 20px;
    }
}

/* pos-billing-software-section-css-end */




/* whatsapp-floation-btn-css-start */

/* ============================= */
/* WHATSAPP FLOATING BUTTON */
/* ============================= */

.whatsapp-floating-btn {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    width: 58px;
    height: 58px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    background: linear-gradient(145deg, #25D366, #18b957);
    color: #fff;

    border: 3px solid #fff;
    border-radius: 50%;

    text-decoration: none;
    font-size: 30px;

    z-index: 999999 !important;

    box-shadow:
        0 8px 25px rgba(37, 211, 102, 0.35),
        0 0 0 0 rgba(37, 211, 102, 0.45);

    transition: all 0.35s ease;
}

/* Icon */

.whatsapp-floating-btn i {
    position: relative;
    z-index: 2;
    line-height: 1;
}

/* Hover */

.whatsapp-floating-btn:hover {
    color: #fff;
    transform: translateY(-5px) scale(1.06);
    box-shadow:
        0 14px 35px rgba(37, 211, 102, 0.45),
        0 0 0 8px rgba(37, 211, 102, 0.08);
}

/* Pulse */

.whatsapp-pulse {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.45);

    animation: whatsappPulse 2s infinite;

    pointer-events: none;
}

@keyframes whatsappPulse {

    0% {
        transform: scale(.9);
        opacity: .9;
    }

    70% {
        transform: scale(1.35);
        opacity: 0;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

/* Tooltip */

.whatsapp-tooltip {
    position: absolute;
    right: 72px;
    top: 50%;

    transform: translateY(-50%) translateX(10px);

    background: #071B3B;
    color: #fff;

    padding: 9px 15px;
    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    transition: all .3s ease;
}

.whatsapp-tooltip::after {
    content: "";

    position: absolute;
    right: -6px;
    top: 50%;

    transform: translateY(-50%);

    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #071B3B;
}

.whatsapp-floating-btn:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}


/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 767px) {

    .whatsapp-floating-btn {
        position: fixed !important;
        right: 15px !important;
        bottom: 200px !important;
        width: 54px;
        height: 54px;
        display: flex !important;
        font-size: 27px;
        z-index: 999999 !important;
    }
}

@media (max-width: 576px) {

    .whatsapp-floating-btn {
        position: fixed !important;
        right: 15px !important;
        bottom: 200px !important;
        width: 54px;
        height: 54px;
        display: flex !important;
        font-size: 27px;
        z-index: 999999 !important;
    }

    .whatsapp-tooltip {
        display: none !important;
    }

}

/* whatsapp-floation-btn-css-end */

/* bottam-to-top-btn scroll-start */

.scroll-top-btn {
    position: fixed !important;
    right: 20px !important;
    bottom: 90px !important;

    width: 52px;
    height: 52px;

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

    background: linear-gradient(145deg, #071B3B, #0b326b);
    color: #fff;

    border: 3px solid #fff;
    border-radius: 50%;

    text-decoration: none;
    font-size: 22px;

    z-index: 999998 !important;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    box-shadow: 0 8px 25px rgba(7, 27, 59, 0.30);

    transition: all 0.35s ease;
}

/* Show Button */

.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover */

.scroll-top-btn:hover {
    color: #fff;
    transform: translateY(-5px) scale(1.06);

    background: linear-gradient(145deg, #0b326b, #071B3B);

    box-shadow: 0 14px 35px rgba(7, 27, 59, 0.40);
}

/* Icon */

.scroll-top-btn i {
    line-height: 1;
}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 767px) {
    .scroll-top-btn {
        right: 15px !important;
        bottom: 265px !important;
        width: 50px;
        height: 50px;
        font-size: 21px;
    }
}

/* bottam-to-top-btn scroll-end */