/*==================================================
            GOOGLE FONT
==================================================*/

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


/*==================================================
            ROOT VARIABLES
==================================================*/

:root {

    --primary: #4F7CFF;
    --primary-dark: #2E63FF;
    --secondary: #6D5DFB;

    --bg: #050816;
    --bg2: #0B1022;
    --bg3: #10182F;

    --card: #131D36;

    --white: #ffffff;

    --text: #D7DEEF;

    --muted: #9BA8C8;

    --border: rgba(255, 255, 255, .08);

    --success: #22C55E;

    --danger: #EF4444;

    --warning: #F59E0B;

    --radius: 18px;

    --shadow: 0 25px 70px rgba(0, 0, 0, .35);

    --transition: .35s ease;

}


/*==================================================
            RESET
==================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Poppins', sans-serif;

    background: var(--bg);

    color: var(--white);

    overflow-x: hidden;

    line-height: 1.7;

}

img {

    max-width: 100%;

    display: block;

}

a {

    text-decoration: none;

}

ul {

    list-style: none;

}

section {

    position: relative;

    padding: 110px 0;

}


/*==================================================
            CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #070b18;

}

::-webkit-scrollbar-thumb {

    background: linear-gradient(180deg,
            var(--primary),
            var(--secondary));

    border-radius: 50px;

}


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

.container {

    max-width: 1320px;

}


/*==================================================
            TYPOGRAPHY
==================================================*/

h1,
h2,
h3,
h4,
h5,
h6 {

    font-weight: 700;

    color: #fff;

}

p {

    color: var(--text);

    font-size: 1rem;

}

.hero-content h1 {

    font-size: 3.8rem;

    font-weight: 800;

    line-height: 1.15;

    margin: 25px 0;

}

.hero-content h1 span {

    color: var(--primary);

}

.hero-content p {

    max-width: 600px;

    margin-bottom: 40px;

    color: var(--muted);

}


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

.btn {

    border-radius: 15px;

    font-weight: 600;

    padding: 15px 34px;

    transition: var(--transition);

}

.btn-download {

    background: linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    color: #fff;

    border: none;

    box-shadow:
        0 15px 40px rgba(79, 124, 255, .35);

}

.btn-download:hover {

    transform: translateY(-5px);

    color: #fff;

}

.btn-outline-custom {

    border: 1px solid rgba(255, 255, 255, .18);

    color: #fff;

    margin-left: 15px;

    backdrop-filter: blur(12px);

}

.btn-outline-custom:hover {

    background: #fff;

    color: #111;

}


/*==================================================
            HEADER
==================================================*/

/*=========================================
        HEADER
=========================================*/

.main-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 99999;

    background: transparent;

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease,
        padding .35s ease;

}

.main-header.scrolled {

    background: rgba(5, 8, 22, .88);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);

}


/*==================================================
            NAVBAR
==================================================*/


.navbar {

    padding: 22px 0;

}

.navbar-brand img {

    height: 65px;

}

.navbar-nav {

    gap: 14px;

}

.nav-link {

    color: rgba(255, 255, 255, .78);

    font-weight: 500;

    transition: .35s;

    position: relative;

}

.nav-link:hover {

    color: #fff;

}

.nav-link.active {

    color: #fff;

}

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: var(--primary);

    transition: .35s;

}

.nav-link:hover::after {

    width: 100%;

}

.nav-download {

    background: linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    border: none;

    color: #fff;

    padding: 13px 28px;

    border-radius: 14px;

}

.nav-download:hover {

    color: #fff;

    transform: translateY(-4px);

}

.nav-login {

    border: 1px solid rgba(255, 255, 255, .12);

    color: #fff;

    backdrop-filter: blur(10px);

}

.nav-login:hover {

    background: #fff;

    color: #111;

}

/* Bootstrap navbar variables */
.main-header .navbar {

    --bs-navbar-color: rgba(255, 255, 255, .75);

    --bs-navbar-hover-color: #ffffff;

    --bs-navbar-active-color: #4F7CFF;

}

/* Normal links */
.main-header .navbar-nav .nav-link {

    color: rgba(255, 255, 255, .75);

}

/* Hover */
.main-header .navbar-nav .nav-link:hover {

    color: #ffffff;

}

/* Active page only */
.main-header .navbar-nav .nav-link.active {

    color: #4F7CFF !important;

}

/* Underline */
.main-header .navbar-nav .nav-link.active::after {

    width: 100%;

}

.main-header .navbar-nav .nav-link:hover::after {

    width: 100%;

}

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

.mobile-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:1.45rem;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.mobile-toggle:hover{

    background:var(--primary);

}

.mobile-toggle:focus{

    box-shadow:none;

}

/*==================================================
            OVERLAY
==================================================*/

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(6px);

    -webkit-backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99998;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

/*==================================================
            DRAWER
==================================================*/

.mobile-drawer{

    position:fixed;

    top:0;

    left:-340px;

    width:320px;

    max-width:90vw;

    height:100vh;

    background:linear-gradient(
    180deg,
    #081224,
    #050816);

    border-right:1px solid rgba(255,255,255,.08);

    box-shadow:20px 0 60px rgba(0,0,0,.35);

    transition:left .45s ease;

    z-index:99999;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}

.mobile-drawer.active{

    left:0;

}

/*==================================================
            HEADER
==================================================*/

.drawer-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:24px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.drawer-header img{

    height:42px;

}

.drawer-close{

    width:44px;

    height:44px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:1.2rem;

    transition:.35s;

}

.drawer-close:hover{

    background:var(--primary);

}

/*==================================================
            NAVIGATION
==================================================*/

.drawer-nav{

    list-style:none;

    margin:0;

    padding:28px 18px;

    flex:1;

    overflow-y:auto;

}

.drawer-nav li{

    margin-bottom:10px;

}

.drawer-nav a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px 18px;

    border-radius:16px;

    color:rgba(255,255,255,.82);

    text-decoration:none;

    font-weight:500;

    transition:.35s;

}

.drawer-nav a i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:rgba(255,255,255,.06);

    color:var(--primary);

    font-size:1.1rem;

}

.drawer-nav a:hover{

    background:rgba(79,124,255,.12);

    color:#fff;

    transform:translateX(6px);

}

.drawer-nav a.active{

    background:linear-gradient(
    135deg,
    rgba(79,124,255,.18),
    rgba(79,124,255,.05));

    color:#fff;

    border:1px solid rgba(79,124,255,.35);

}

.drawer-nav a.active i{

    background:var(--primary);

    color:#fff;

}

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

.drawer-buttons{

    padding:24px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    flex-direction:column;

    gap:14px;

}

.drawer-buttons .btn{

    padding:14px;

    border-radius:14px;

    font-weight:600;

}

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

body.drawer-open{

    overflow:hidden;

}

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

@media(max-width:991.98px){

.desktop-menu{

display:none !important;

}

.mobile-toggle{

display:flex;

}

}

@media(min-width:992px){

.mobile-drawer,

.mobile-overlay{

display:none;

}

}

@media(max-width:576px){

.mobile-drawer{

width:290px;

}

.drawer-header{

padding:20px;

}

.drawer-nav{

padding:20px 14px;

}

.drawer-buttons{

padding:20px;

}

}




/*==================================================
            HERO BADGE
==================================================*/

.hero-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 20px;

    border-radius: 50px;

    background: rgba(79, 124, 255, .10);

    border: 1px solid rgba(79, 124, 255, .25);

    color: #CFE0FF;

    font-size: .95rem;

    font-weight: 500;

}

.hero-tag i {

    color: var(--primary);

}

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

.hero-section {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(circle at 15% 20%, rgba(79, 124, 255, .18), transparent 28%),
        radial-gradient(circle at 85% 15%, rgba(109, 93, 251, .18), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(37, 99, 235, .15), transparent 45%),
        linear-gradient(135deg, #050816 0%, #0B1022 45%, #131C35 100%);

}


/*==================================================
            HERO BACKGROUND GRID
==================================================*/

.hero-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);

    background-size: 50px 50px;

    opacity: .18;

    pointer-events: none;

}


/*==================================================
            AURORA GLOW
==================================================*/

.hero-bg-circle {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    animation: floatGlow 10s ease-in-out infinite;

}

.circle-1 {

    width: 420px;

    height: 420px;

    left: -120px;

    top: 120px;

    background: #4F7CFF;

    opacity: .18;

}

.circle-2 {

    width: 350px;

    height: 350px;

    right: -80px;

    top: 60px;

    background: #6D5DFB;

    opacity: .16;

}


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

.hero-content {

    position: relative;

    z-index: 5;

}

.hero-content p {

    max-width: 570px;

    margin-top: 20px;

    margin-bottom: 38px;

}


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

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

    margin-bottom: 45px;

}


/*==================================================
            COMPATIBILITY
==================================================*/

/*==================================================
            HERO STATS
==================================================*/

.hero-stats {

    display: flex;

    gap: 55px;

    flex-wrap: wrap;

}

.hero-stats div {

    position: relative;

}

.hero-stats div::after {

    content: "";

    position: absolute;

    right: -28px;

    top: 8px;

    width: 1px;

    height: 55px;

    background: rgba(255, 255, 255, .08);

}

.hero-stats div:last-child::after {

    display: none;

}

.hero-stats h2 {

    font-size: 2.3rem;

    font-weight: 800;

    color: #fff;

    margin-bottom: 4px;

}

.hero-stats span {

    color: var(--muted);

    font-size: .95rem;

}


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



/*==================================================
        HERO DECORATIVE ELEMENTS
==================================================*/

.hero-section::before {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -250px;
    top: -250px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(79, 124, 255, .22),
            transparent 70%);

    pointer-events: none;

}

.hero-section::after {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: -180px;
    bottom: -180px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(109, 93, 251, .18),
            transparent 70%);

}


/*==================================================
        DASHBOARD GLOW
==================================================*/

/*=========================================
        HERO IMAGE
=========================================*/

.hero-image-wrapper{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:2;

}

/* Glow */

.hero-image-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(59,130,246,.22),
        rgba(109,93,251,.14),
        transparent 72%);

    filter:blur(60px);

    animation:heroGlow 5s ease-in-out infinite;

    z-index:1;

}

/* Image */

.hero-dashboard-image{

    position:relative;

    z-index:2;

    width:100%;

    max-width:680px;


    transition:.4s ease;

    animation:heroFloat 6s ease-in-out infinite;

}

.hero-dashboard-image:hover{

    transform:translateY(-10px);

}

/* Floating Animation */

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* Glow Animation */

@keyframes heroGlow{

    0%{

        transform:scale(1);

        opacity:.8;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.8;

    }

}


/*==================================================
            GLASS REFLECTION
==================================================*/

.software-window::before {

    content: "";

    position: absolute;

    left: -35%;

    top: -120px;

    width: 180px;

    height: 700px;

    transform: rotate(25deg);

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .05),

            transparent);

    animation: glassMove 7s linear infinite;

}


/*==================================================
            DASHBOARD HOVER
==================================================*/

.software-window {

    transition: .45s;

}

.software-window:hover {

    transform: translateY(-12px) scale(1.01);

}


/*==================================================
            FLOATING BOX HOVER
==================================================*/

.floating-box {

    transition: .35s;

}

.floating-box:hover {

    transform: translateY(-8px);

    border-color: rgba(79, 124, 255, .45);

}


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

.btn-download {

    position: relative;

    overflow: hidden;

}

.btn-download::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 100%;

    height: 100%;

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .25),

            transparent);

    transition: .8s;

}

.btn-download:hover::before {

    left: 120%;

}


/*==================================================
            HERO IMAGE
==================================================*/

.hero-image img {

    border-radius: 22px;

}


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

@keyframes glassMove {

    from {

        left: -45%;

    }

    to {

        left: 150%;

    }

}


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

@media(max-width:1199px) {

    .hero-content h1 {

        font-size: 3.2rem;

    }

    .dashboard-body {

        grid-template-columns: 1fr;

    }

    .scan-card {

        margin-bottom: 20px;

    }

    .box1 {

        left: -25px;

    }

    .box2 {

        right: -20px;

    }

}

@media(max-width:991px) {

    .hero-section {

        padding-top: 150px;

        padding-bottom: 100px;

        text-align: center;

    }

    .hero-content p {

        margin-left: auto;

        margin-right: auto;

    }

    .hero-buttons {

        justify-content: center;

    }

    .compatibility {

        justify-content: center;

    }

    .hero-stats {

        justify-content: center;

    }

    .dashboard {

        margin-top: 70px;

        min-height: auto;

    }

    .box1 {

        left: 0;

        top: -20px;

    }

    .box2 {

        right: 0;

    }

    .box3 {

        left: 0;

        bottom: -25px;

    }

}

@media(max-width:767px) {

    .hero-content h1 {

        font-size: 2.5rem;

    }

    .hero-stats {

        gap: 30px;

    }

    .hero-stats h2 {

        font-size: 1.8rem;

    }

    .dashboard-body {

        padding: 20px;

    }

    .window-top {

        padding: 0 18px;

    }

    .software-window {

        border-radius: 22px;

    }

    .floating-box {

        position: relative;

        margin-top: 15px;

        left: auto;

        right: auto;

        top: auto;

        bottom: auto;

    }

    .dashboard {

        display: block;

    }

}

@media(max-width:576px) {

    .hero-content h1 {

        font-size: 2rem;

        line-height: 1.3;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .hero-buttons .btn {

        width: 100%;

    }

    .os-card {

        width: 100%;

        min-width: 100%;

    }

    .hero-stats {

        flex-direction: column;

        align-items: center;

        gap: 20px;

    }

    .hero-stats div::after {

        display: none;

    }

    .circle {

        width: 120px;

        height: 120px;

    }

    .circle::before {

        width: 92px;

        height: 92px;

    }

    .circle strong {

        font-size: 1.5rem;

    }

}

/*==================================================
            SECTION TITLE
==================================================*/

.section-title,
.trusted-heading {

    max-width: 720px;

    margin: 0 auto 70px;

}

.section-title span,
.trusted-heading span {

    display: inline-flex;

    align-items: center;

    padding: 10px 22px;

    border-radius: 50px;

    background: rgba(79, 124, 255, .12);

    border: 1px solid rgba(79, 124, 255, .25);

    color: var(--primary);

    font-size: .9rem;

    font-weight: 600;

    margin-bottom: 18px;

}

.section-title h2,
.trusted-heading h2 {

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 18px;

    line-height: 1.2;

}

.section-title p,
.trusted-heading p {

    color: var(--muted);

    font-size: 1.05rem;

}


/*==================================================
            TRUSTED SECTION
==================================================*/

.trusted-section {

    position: relative;

    background: linear-gradient(180deg,
            rgba(255, 255, 255, .02),
            transparent);

}

.brand-card {

    height: 110px;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(18px);

    transition: .35s;

    overflow: hidden;

    position: relative;

}

.brand-card::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

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

    opacity: 0;

    transition: .35s;

}

.brand-card:hover::before {

    opacity: 1;

}

.brand-card:hover {

    transform: translateY(-10px);

    border-color: rgba(79, 124, 255, .35);

    box-shadow: 0 20px 45px rgba(79, 124, 255, .18);

}

.brand-card img {

    max-width: 85px;

    max-height: 42px;

    filter: brightness(0) invert(1);

    opacity: .75;

    transition: .35s;

}

.brand-card:hover img {

    opacity: 1;

    transform: scale(1.08);

}


/*==================================================
            FEATURES
==================================================*/

.features-section {

    position: relative;

    overflow: hidden;

}

.features-section::before {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    left: -250px;

    top: 100px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(79, 124, 255, .12),
            transparent);

    filter: blur(30px);

}

.features-section::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -220px;

    bottom: -120px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(109, 93, 251, .12),
            transparent);

    filter: blur(40px);

}


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

.feature-card {

    position: relative;

    height: 100%;

    padding: 38px 30px;

    border-radius: 24px;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(20px);

    transition: .4s;

    overflow: hidden;

}

.feature-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

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

    transition: .8s;

}

.feature-card:hover::before {

    left: 120%;

}

.feature-card:hover {

    transform: translateY(-15px);

    border-color: rgba(79, 124, 255, .35);

    box-shadow: 0 30px 60px rgba(0, 0, 0, .28);

}


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

.feature-icon {

    width: 78px;

    height: 78px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 22px;

    background: linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    margin-bottom: 28px;

    position: relative;

    overflow: hidden;

}

.feature-icon::after {

    content: "";

    position: absolute;

    width: 130%;

    height: 130%;

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

    transform: translateX(-120%) rotate(20deg);

}

.feature-card:hover .feature-icon::after {

    animation: shine 1s linear;

}

.feature-icon i {

    font-size: 2rem;

    color: #fff;

}


/*==================================================
            FEATURE TEXT
==================================================*/

.feature-card h4 {

    font-size: 1.4rem;

    margin-bottom: 16px;

    font-weight: 700;

}

.feature-card p {

    color: var(--muted);

    margin: 0;

}


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

@keyframes shine {

    from {

        transform: translateX(-120%) rotate(20deg);

    }

    to {

        transform: translateX(160%) rotate(20deg);

    }

}


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

@media(max-width:991px) {

    .section-title h2,
    .trusted-heading h2 {

        font-size: 2.4rem;

    }

}

@media(max-width:767px) {

    .section-title,
    .trusted-heading {

        margin-bottom: 50px;

    }

    .section-title h2,
    .trusted-heading h2 {

        font-size: 2rem;

    }

    .brand-card {

        height: 90px;

    }

    .feature-card {

        padding: 30px 22px;

    }

    .feature-icon {

        width: 65px;
        height: 65px;

        border-radius: 18px;

    }

    .feature-icon i {

        font-size: 1.6rem;

    }

}

/*==================================================
            WHY CHOOSE HEWLS
==================================================*/

.why-hewls-section {

    position: relative;

    overflow: hidden;

}

.why-image {

    position: relative;

}

.image-glow {

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(79, 124, 255, .25), transparent 70%);

    filter: blur(50px);

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

}

.main-image {

    border-radius: 28px;

    position: relative;

    z-index: 2;

    box-shadow: var(--shadow);

}

.floating-info {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 18px 22px;

    border-radius: 18px;

    background: rgba(18, 28, 50, .9);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .08);

    box-shadow: 0 20px 40px rgba(0, 0, 0, .25);

    z-index: 5;

    animation: floatCard 6s ease-in-out infinite;

}

.floating-info i {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    color: #fff;

    font-size: 1.3rem;

}

.info-1 {

    top: 40px;

    left: -40px;

}

.info-2 {

    right: -40px;

    bottom: 60px;

    animation-delay: 2s;

}

.why-list {

    display: flex;

    flex-direction: column;

    gap: 28px;

}

.why-item {

    display: flex;

    gap: 20px;

    padding: 24px;

    border-radius: 20px;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

    transition: .35s;

}

.why-item:hover {

    transform: translateX(12px);

    border-color: rgba(79, 124, 255, .35);

    box-shadow: 0 20px 40px rgba(0, 0, 0, .2);

}

.why-icon {

    width: 70px;

    height: 70px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    flex-shrink: 0;

}

.why-icon i {

    color: #fff;

    font-size: 1.6rem;

}

.why-item h5 {

    margin-bottom: 8px;

    font-size: 1.2rem;

}

.why-item p {

    margin: 0;

    color: var(--muted);

}

@keyframes floatCard {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}

@media(max-width:991px) {

    .info-1,
    .info-2 {

        left: 20px;

        right: auto;

    }

    .info-2 {

        bottom: 20px;

    }

    .why-item {

        text-align: left;

    }

}

@media(max-width:576px) {

    .floating-info {

        position: relative;

        left: auto;

        right: auto;

        top: auto;

        bottom: auto;

        margin-top: 20px;

    }

    .why-item {

        flex-direction: column;

        align-items: flex-start;

    }

}

/*==================================================
        SUPPORT SECTION
==================================================*/
/*==================================================
        SUPPORT SECTION
==================================================*/

.support-section{

    position:relative;

    padding:6rem 0;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,
    rgba(66,99,255,.10),
    transparent 45%),
    linear-gradient(180deg,
    rgba(255,255,255,.02),
    transparent);

}

/* Blue Glow */

.support-section::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:rgba(66,99,255,.08);

    filter:blur(140px);

    top:-180px;

    right:-12px;

    pointer-events:none;

}

.support-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(79,124,255,.05);

    filter:blur(120px);

    bottom:-200px;

    left:-150px;

}

/*==================================================
        MAIN LAYOUT
==================================================*/

.support-layout{

    display:grid;

    grid-template-columns:650px 1fr;

    gap:70px;

    align-items:center;

    position:relative;

    z-index:2;

}

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

.support-content{

    position:relative;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(66,99,255,.12);

    border:1px solid rgba(66,99,255,.20);

    color:var(--primary);

    font-weight:600;

    font-size:.85rem;

    letter-spacing:.6px;

    margin-bottom:1.6rem;

}

.support-content h2{

    font-size:clamp(2.5rem,5vw,3.8rem);

    font-weight:800;

    line-height:1.1;

    margin-bottom:1.5rem;

}

.support-content h2 span{

    color:var(--primary);

}

.support-content p{

    color:var(--muted);

    font-size:1rem;

    line-height:1.9;

    margin-bottom:2.3rem;

    max-width:520px;

}

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

.support-os{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-bottom:2.5rem;

}

.support-os-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px 22px;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    transition:.35s ease;

}

.support-os-card:hover{

    transform:translateX(10px);

    border-color:rgba(66,99,255,.35);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

.os-icon{

    width:66px;

    height:66px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(135deg,
    var(--primary),
    var(--secondary));

}

.os-icon i{

    color:#fff;

    font-size:1.8rem;

}

.os-content h5{

    margin:0 0 6px;

    font-size:1.1rem;

    font-weight:700;

}

.os-content span{

    color:var(--muted);

    font-size:.92rem;

}

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

.support-content .btn-download{

    padding:16px 34px;

    border-radius:14px;

    font-weight:600;

    transition:.35s;

}

.support-content .btn-download:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 35px rgba(66,99,255,.28);

}

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

@media(max-width:1200px){

.support-layout{

grid-template-columns:360px 1fr;

gap:50px;

}

}

@media(max-width:991px){

.support-layout{

grid-template-columns:1fr;

gap:60px;

}

.support-content{

text-align:center;

}

.support-content p{

margin-inline:auto;

}

.support-os{

max-width:550px;

margin-inline:auto;

margin-bottom:2rem;

}

.support-content .btn-download{

display:inline-flex;

}

}

@media(max-width:576px){

.support-section{

padding:5rem 0;

}

.support-content h2{

font-size:2.2rem;

}

.support-os-card{

padding:18px;

}

.os-icon{

width:58px;

height:58px;

}

.os-icon i{

font-size:1.5rem;

}

.support-content .btn-download{

width:100%;

justify-content:center;

}

}

/*==================================================
            DRIVER GRID
==================================================*/

.driver-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(170px,1fr));

    gap:24px;

    position:relative;

    align-items:start;

}

/* Background Glow */

.driver-grid::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:50%;

    top:45%;

    transform:translate(-50%,-50%);

    background:rgba(66,99,255,.12);

    filter:blur(120px);

    border-radius:50%;

    z-index:-1;

}

/*==================================================
            STAGGERED LAYOUT
==================================================*/

.driver-card:nth-child(2),
.driver-card:nth-child(5),
.driver-card:nth-child(8),
.driver-card:nth-child(11){

    margin-top:40px;

}

/*==================================================
            LARGE CARD
==================================================*/

.driver-card.large{

    grid-column:span 2;

}

/*==================================================
            DRIVER CARD
==================================================*/

.driver-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:185px;

    padding:28px 22px;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    transition:all .4s ease;

}

/* Hover Overlay */

.driver-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(135deg,

    rgba(66,99,255,.18),

    transparent);

    opacity:0;

    transition:.4s;

}

.driver-card:hover::before{

    opacity:1;

}

.driver-card:hover{

    transform:translateY(-10px);

    border-color:rgba(66,99,255,.45);

    box-shadow:

    0 25px 45px rgba(0,0,0,.28),

    0 0 30px rgba(66,99,255,.18);

}

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

.driver-card i{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    border-radius:22px;

    background:

    linear-gradient(135deg,

    var(--primary),

    var(--secondary));

    color:#fff;

    font-size:2rem;

    transition:.4s;

}

.driver-card:hover i{

    transform:

    scale(1.08)

    rotate(-6deg);

    box-shadow:

    0 12px 30px rgba(66,99,255,.35);

}

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

.driver-card h4{

    font-size:1.2rem;

    font-weight:700;

    margin-bottom:10px;

}

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

.driver-card p{

    margin:0;

    color:var(--muted);

    font-size:.92rem;

    line-height:1.7;

}

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

.driver-card{

    animation:floatingCard 7s ease-in-out infinite;

}

.driver-card:nth-child(2){

    animation-delay:.4s;

}

.driver-card:nth-child(3){

    animation-delay:.8s;

}

.driver-card:nth-child(4){

    animation-delay:1.2s;

}

.driver-card:nth-child(5){

    animation-delay:1.6s;

}

.driver-card:nth-child(6){

    animation-delay:2s;

}

.driver-card:nth-child(7){

    animation-delay:2.4s;

}

.driver-card:nth-child(8){

    animation-delay:2.8s;

}

.driver-card:nth-child(9){

    animation-delay:3.2s;

}

.driver-card:nth-child(10){

    animation-delay:3.6s;

}

.driver-card:nth-child(11){

    animation-delay:4s;

}

.driver-card:nth-child(12){

    animation-delay:4.4s;

}

@keyframes floatingCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media(max-width:1199px){

.driver-grid{

grid-template-columns:repeat(2,1fr);

}

.driver-card.large{

grid-column:span 2;

}

.driver-card:nth-child(2),
.driver-card:nth-child(5),
.driver-card:nth-child(8),
.driver-card:nth-child(11){

margin-top:0;

}

}

@media(max-width:767px){

.driver-grid{

grid-template-columns:1fr;

gap:20px;

}

.driver-card.large{

grid-column:auto;

}

.driver-card{

min-height:170px;

padding:25px;

}

.driver-card:nth-child(2),
.driver-card:nth-child(5),
.driver-card:nth-child(8),
.driver-card:nth-child(11){

margin-top:0;

}

.driver-card i{

width:64px;

height:64px;

font-size:1.7rem;

}

.driver-card h4{

font-size:1.1rem;

}

}

/*==================================================
                HOW IT WORKS
==================================================*/

.process-section {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            transparent,
            rgba(255, 255, 255, .02));

}

.process-wrapper {

    position: relative;

    margin-top: 70px;

}

.process-line {

    position: absolute;

    top: 60px;

    left: 8%;

    right: 8%;

    height: 2px;

    background: linear-gradient(90deg,
            var(--primary),
            var(--secondary));

    opacity: .25;

}

.process-card {

    position: relative;

    text-align: center;

    padding: 45px 28px;

    border-radius: 24px;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(18px);

    transition: .4s;

    overflow: hidden;

    height: 100%;

}

.process-card:hover {

    transform: translateY(-14px);

    border-color: rgba(79, 124, 255, .35);

    box-shadow: 0 30px 60px rgba(0, 0, 0, .28);

}

.process-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(135deg,
            rgba(79, 124, 255, .12),
            transparent);

    opacity: 0;

    transition: .35s;

}

.process-card:hover::before {

    opacity: 1;

}

.process-number {

    position: absolute;

    top: 18px;

    right: 20px;

    font-size: 3rem;

    font-weight: 800;

    color: rgba(255, 255, 255, .05);

}

.process-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    margin-bottom: 30px;

    border-radius: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    color: #fff;

    font-size: 2rem;

    position: relative;

    z-index: 2;

}

.process-card h4 {

    margin-bottom: 18px;

}

.process-card p {

    color: var(--muted);

    margin: 0;

}

.process-cta {

    margin-top: 90px;

    text-align: center;

    padding: 60px;

    border-radius: 30px;

    background: linear-gradient(135deg,
            rgba(79, 124, 255, .15),
            rgba(109, 93, 251, .15));

    border: 1px solid rgba(255, 255, 255, .08);

}

.process-cta h3 {

    font-size: 2rem;

    margin-bottom: 18px;

}

.process-cta p {

    max-width: 650px;

    margin: 0 auto 35px;

    color: var(--muted);

}

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

@media(max-width:991px) {

    .process-line {

        display: none;

    }

    .process-cta {

        padding: 45px 30px;

    }

}

@media(max-width:576px) {

    .process-icon {

        width: 72px;

        height: 72px;

        font-size: 1.6rem;

    }

    .process-number {

        font-size: 2.3rem;

    }

    .process-cta {

        padding: 35px 20px;

    }

    .process-cta h3 {

        font-size: 1.6rem;

    }

}

/*==================================================
            STATISTICS SECTION
==================================================*/

.stats-section {

    position: relative;

    background: linear-gradient(180deg,
            rgba(255, 255, 255, .02),
            transparent);

}

/* Dashboard */

.stats-dashboard {

    padding: 40px;

    border-radius: 28px;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(20px);

    height: 100%;

}

.dashboard-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 35px;

}

.dashboard-top span {

    color: var(--success);

    font-weight: 600;

}

/* Circle */

.performance-circle {

    width: 240px;

    height: 240px;

    margin: auto;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        conic-gradient(var(--primary) 0deg,
            var(--secondary) 320deg,
            rgba(255, 255, 255, .08) 320deg);

    margin-bottom: 40px;

}

.performance-inner {

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background: var(--bg3);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.performance-inner h2 {

    font-size: 3rem;

}

.performance-inner small {

    color: var(--muted);

}

/* Progress */

.bar-item {

    margin-bottom: 25px;

}

.bar-item span {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

}

.progress {

    height: 10px;

    background: rgba(255, 255, 255, .08);

    border-radius: 30px;

    overflow: hidden;

}

.progress-bar {

    background: linear-gradient(90deg,
            var(--primary),
            var(--secondary));

}

.security-bar {

    width: 95%;

}

.performance-bar {

    width: 98%;

}

/* Counter */

.counter-card {

    height: 100%;

    padding: 35px;

    border-radius: 22px;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

    transition: .35s;

    text-align: center;

}

.counter-card:hover {

    transform: translateY(-12px);

    border-color: rgba(79, 124, 255, .35);

}

.counter-card i {

    width: 80px;

    height: 80px;

    margin: auto;

    margin-bottom: 22px;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    color: #fff;

    font-size: 2rem;

}

.counter-card h2 {

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 10px;

}

.counter-card span {

    color: var(--muted);

}

/* Responsive */

@media(max-width:991px) {

    .stats-dashboard {

        margin-bottom: 40px;

    }

}

@media(max-width:576px) {

    .performance-circle {

        width: 180px;

        height: 180px;

    }

    .performance-inner {

        width: 130px;

        height: 130px;

    }

    .performance-inner h2 {

        font-size: 2rem;

    }

    .counter-card {

        padding: 28px;

    }

    .counter-card h2 {

        font-size: 2.2rem;

    }

}

/*==================================================
            TESTIMONIALS
==================================================*/

.testimonial-section {

    position: relative;

    overflow: hidden;

    background: linear-gradient(180deg,
            transparent,
            rgba(255, 255, 255, .02));

}

.testimonial-slider {

    padding-bottom: 70px;

}

.testimonial-card {

    padding: 40px;

    border-radius: 26px;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(18px);

    height: 100%;

    transition: .35s;

}

.testimonial-card:hover {

    transform: translateY(-10px);

    border-color: rgba(79, 124, 255, .35);

    box-shadow: 0 25px 50px rgba(0, 0, 0, .22);

}

.stars {

    margin-bottom: 25px;

}

.stars i {

    color: #FFC107;

    margin-right: 4px;

}

.testimonial-card p {

    color: var(--muted);

    line-height: 1.8;

    min-height: 120px;

}

.testimonial-user {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 30px;

}

.testimonial-user img {

    width: 70px;

    height: 70px;

    object-fit: cover;

    border-radius: 50%;

}

.testimonial-user h5 {

    margin: 0 0 6px;

}

.testimonial-user span {

    color: var(--success);

    font-size: .9rem;

}

.swiper-pagination-bullet {

    width: 12px;

    height: 12px;

    background: #fff;

    opacity: .3;

}

.swiper-pagination-bullet-active {

    width: 30px;

    border-radius: 20px;

    background: var(--primary);

    opacity: 1;

}

@media(max-width:767px) {

    .testimonial-card {

        padding: 28px;

    }

    .testimonial-card p {

        min-height: auto;

    }

}

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

.blog-card {

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 24px;

    overflow: hidden;

    transition: .35s;

    height: 100%;

}

.blog-card:hover {

    transform: translateY(-12px);

    border-color: rgba(79, 124, 255, .35);

}

.blog-image {

    position: relative;

    overflow: hidden;

}

.blog-image img {

    height: 260px;

    width: 100%;

    object-fit: cover;

    transition: .5s;

}

.blog-card:hover img {

    transform: scale(1.08);

}

.blog-category {

    position: absolute;

    left: 20px;

    top: 20px;

    background: var(--primary);

    padding: 8px 18px;

    border-radius: 30px;

    font-size: .85rem;

    color: #fff;

}

.blog-content {

    padding: 30px;

}

.blog-meta {

    display: flex;

    gap: 20px;

    margin-bottom: 18px;

    color: var(--muted);

    font-size: .9rem;

}

.blog-content h4 {

    margin-bottom: 18px;

}

.blog-content a {

    color: var(--primary);

    font-weight: 600;

}

/*==================================================
            DOWNLOAD CTA
==================================================*/

.download-banner {

    padding: 90px 0;

}

.download-content {

    text-align: center;

    padding: 70px;

    border-radius: 32px;

    background: linear-gradient(135deg,
            var(--primary),
            var(--secondary));

}

.download-content h2 {

    font-size: 3rem;

    margin-bottom: 20px;

}

.download-content p {

    color: #fff;

    max-width: 700px;

    margin: auto;

    margin-bottom: 35px;

}

.banner-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

/*==================================================
            NEWSLETTER
==================================================*/

.newsletter-box {

    text-align: center;

    padding: 70px;

    border-radius: 30px;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

}

.newsletter-form {

    display: flex;

    max-width: 650px;

    margin: 35px auto 0;

}

.newsletter-form input {

    flex: 1;

    height: 60px;

    padding: 0 20px;

    border: none;

    outline: none;

    border-radius: 16px 0 0 16px;

    background: #fff;

}

.newsletter-form button {

    width: 180px;

    border: none;

    background: var(--primary);

    color: #fff;

    border-radius: 0 16px 16px 0;

    font-weight: 600;

}

@media(max-width:768px) {

    .download-content {

        padding: 45px 25px;

    }

    .download-content h2 {

        font-size: 2rem;

    }

    .newsletter-box {

        padding: 45px 20px;

    }

    .newsletter-form {

        flex-direction: column;

        gap: 15px;

    }

    .newsletter-form input,

    .newsletter-form button {

        width: 100%;

        border-radius: 16px;

    }

}

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

.footer-section {

    position: relative;

    background: linear-gradient(180deg,
            #070b18 0%,
            #050816 100%);

    padding: 110px 0 0;

    overflow: hidden;

    border-top: 1px solid rgba(255, 255, 255, .06);

}

.footer-section::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    left: -250px;
    top: -250px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(79, 124, 255, .15),
            transparent 70%);

    filter: blur(40px);

}

.footer-section::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    bottom: -180px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(109, 93, 251, .12),
            transparent 70%);

    filter: blur(40px);

}

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

.footer-widget {

    position: relative;

    z-index: 2;

}

.footer-logo {

    display: inline-block;

    margin-bottom: 28px;

}

.footer-logo img{
    height: 70px;
}

.footer-about {

    color: var(--muted);

    line-height: 1.9;

    margin-bottom: 30px;

}

/*=========================================
        SOFTWARE OWNER
=========================================*/

.footer-owner{

    margin-top:2rem;

}

.footer-owner h6{

    color:#ffffff;

    font-size:1rem;

    font-weight:600;

    margin-bottom:1rem;

}

.footer-owner img{

    max-width:220px;

    width:100%;

    height:auto;

    border-radius:10px;

    transition:.35s ease;

}

.footer-owner img:hover{

    transform:translateY(-3px);

}

/*=========================================
        EXTRA FOOTER LOGOS
=========================================*/

.footer-extra-logo{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:12px;

    margin-top:15px;

}

.footer-extra-logo a{

    display:block !important;

    width:auto !important;

    flex:0 0 auto;

}

.footer-extra-logo img{

    display:block;

    width:120px;

    height:auto;

    border-radius:8px;

    transition:.35s;

}

.footer-extra-logo img:hover{

    transform:translateY(-4px);

}
/*==================================================
            FOOTER TITLES
==================================================*/

.footer-widget h4 {

    color: #fff;

    font-size: 1.3rem;

    margin-bottom: 28px;

    position: relative;

}

.footer-widget h4::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -10px;

    width: 55px;
    height: 3px;

    border-radius: 50px;

    background: linear-gradient(90deg,
            var(--primary),
            var(--secondary));

}

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

.footer-widget ul {

    padding: 0;

    margin: 0;

}

.footer-widget ul li {

    margin-bottom: 14px;

    list-style: none;

}

.footer-widget ul li a {

    color: var(--muted);

    transition: .35s;

    display: inline-flex;

    align-items: center;

}

.footer-widget ul li a::before {

    content: "›";

    margin-right: 10px;

    color: var(--primary);

    opacity: 0;

    transform: translateX(-8px);

    transition: .35s;

}

.footer-widget ul li a:hover {

    color: #fff;

    transform: translateX(8px);

}

.footer-widget ul li a:hover::before {

    opacity: 1;

    transform: translateX(0);

}

/*==================================================
            CONTACT
==================================================*/

.footer-contact li {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    color: var(--muted);

}

.footer-contact i {

    color: var(--primary);

    font-size: 1.1rem;

    margin-top: 3px;

}

/*==================================================
            PAYMENT METHODS
==================================================*/

.footer-payments{

    margin-top:30px;

}

.footer-payments img{

    width:100%;

    max-width:180px;

    height:auto;

    border-radius:10px;

    transition:.35s ease;

}

.footer-payments img:hover{

    transform:scale(1.05);

}

/*==================================================
        DOWNLOAD BAR
==================================================*/

.footer-download {

    margin-top: 80px;

    padding: 45px;

    border-radius: 26px;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(18px);

}

.footer-download h3 {

    font-size: 1.8rem;

    margin-bottom: 12px;

}

.footer-download p {

    color: var(--muted);

    margin: 0;

}

/*==================================================
            COPYRIGHT
==================================================*/

.footer-bottom {

    margin-top: 70px;

    padding: 28px 0;

    border-top: 1px solid rgba(255, 255, 255, .08);

}

.footer-bottom p {

    margin: 0;

    color: var(--muted);

    font-size: .95rem;

}

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

.footer-disclaimer{

    padding:35px 0 45px;

    border-bottom:1px solid rgba(255,255,255,.08);

    margin-bottom:20px;

}

.footer-disclaimer-box{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:28px 32px;

    border-radius:20px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

}

.footer-disclaimer-box i{

    flex:0 0 60px;

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.8rem;

    color:#fff;

    border-radius:16px;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

}

.footer-disclaimer-box h4{

    color:#fff;

    margin-bottom:12px;

    font-size:1.2rem;

}

.footer-disclaimer-box p{

    color:var(--muted);

    line-height:1.8;

    margin-bottom:12px;
    font-size: 0.88rem;

}

.footer-disclaimer-box p:last-child{

    margin-bottom:0;

}

.footer-disclaimer-box strong{

    color:#fff;

}

@media(max-width:768px){

    .footer-disclaimer{

        padding:30px 0 40px;

        margin-bottom:40px;

    }

    .footer-disclaimer-box{

        flex-direction:column;

        text-align:center;

        padding:24px;

    }

    .footer-disclaimer-box i{

        margin:auto;

    }

}

/*==================================================
            BACK TO TOP
==================================================*/

#backToTop {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 58px;

    height: 58px;

    border: none;

    border-radius: 18px;

    cursor: pointer;

    color: #fff;

    font-size: 1.3rem;

    background: linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    box-shadow: 0 20px 45px rgba(79, 124, 255, .35);

    z-index: 999;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: .35s;

}

#backToTop.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

#backToTop:hover {

    transform: translateY(-8px);

}

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

@media(max-width:991px) {

    .footer-section {

        text-align: center;

    }

    .footer-widget h4::after {

        left: 50%;

        transform: translateX(-50%);

    }

    .footer-social {

        justify-content: center;

    }

    .footer-contact li {

        justify-content: center;

    }

    .footer-download {

        text-align: center;

        padding: 35px;

    }

}

@media(max-width:767px) {

    .footer-section {

        padding-top: 80px;

    }

    .footer-download {

        padding: 30px 20px;

    }

    .footer-download h3 {

        font-size: 1.7rem;

    }

    .footer-bottom {

        text-align: center;

    }

    #backToTop {

        width: 52px;

        height: 52px;

        right: 18px;

        bottom: 18px;

    }

}

/*=========================================
        Reveal Animation
=========================================*/

.feature-card,
.why-item,
.counter-card,
.driver-category,
.blog-card {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity .6s ease,
        transform .6s ease;

}

.feature-card.visible,
.why-item.visible,
.counter-card.visible,
.driver-category.visible,
.blog-card.visible {

    opacity: 1;

    transform: translateY(0);

}


/*=========================================
        Image Fade
=========================================*/

img {

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

}

img.loaded {

    opacity: 1;

}


/*=========================================
        Hidden Page
=========================================*/

.page-hidden {

    pointer-events: none;

}

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

.about-hero{

    position:relative;

    overflow:hidden;

    padding:10rem 0 8rem;

    background:#050816;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(rgba(5,8,22,.82),
    rgba(5,8,22,.92)),
    url('assets/images/about.bg.avif');

    background-size:cover;

    background-position:center;

}

.about-hero .container{

    position:relative;

    z-index:5;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(79,124,255,.12);

    color:#4F7CFF;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:22px;

}

.about-hero h1{

    color:#fff;

    font-size:4rem;

    line-height:1.15;

    font-weight:800;

    margin-bottom:28px;

}

.about-hero h1 span{

    display:block;

    color:#4F7CFF;

}

.about-hero p{

    color:rgba(255,255,255,.82);

    line-height:1.9;

    max-width:560px;

}

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

    margin-top:45px;

}

.hero-feature{

    display:flex;

    align-items:center;

    gap:15px;

}

.hero-feature h6{

    color:#fff;

    margin-bottom:4px;

}

.hero-feature span{

    color:rgba(255,255,255,.72);

    font-size:.92rem;

}

.feature-icon{

    width:62px;

    height:62px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#4F7CFF,#6D5DFB);

    color:#fff;

    font-size:1.45rem;

}

.about-hero-image{

    position:relative;

}

.hero-main-img{

    border-radius:28px;

    width:100%;

    display:block;

}

.screen-card{

    position:absolute;

    right:25px;

    top:40px;

    width:340px;

    background:#0d1328;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.08);

    overflow:hidden;

    box-shadow:0 30px 60px rgba(0,0,0,.3);

}

.screen-top{

    display:flex;

    gap:8px;

    padding:14px 18px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.screen-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#4F7CFF;

}

.screen-content{

    padding:40px;

    text-align:center;

}

.success-circle{

    width:95px;

    height:95px;

    margin:auto auto 25px;

    border-radius:50%;

    border:5px solid #4F7CFF;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#4F7CFF;

    font-size:2.4rem;

}

.screen-content h4{

    color:#fff;

    margin-bottom:12px;

}

.screen-content p{

    color:rgba(255,255,255,.65);

    margin:0;

}

.hero-wave{

    position:absolute;

    left:0;

    bottom:-1px;

    width:100%;

    height:120px;

}

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

@media(max-width:991px){

.about-hero{

padding:8rem 0 7rem;

}

.about-hero h1{

font-size:3rem;

}

.screen-card{

position:relative;

right:auto;

top:-60px;

width:100%;

max-width:420px;

margin:auto;

}

}

@media(max-width:576px){

.about-hero{

padding:7rem 0 6rem;

}

.about-hero h1{

font-size:2.3rem;

}

.hero-features{

flex-direction:column;

gap:18px;

}

.screen-content{

padding:30px;

}

}

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

.our-story{

    background:#fff;

    position:relative;

}

.story-content h2{

    font-size:3rem;

    font-weight:800;

    margin:22px 0 28px;

    color:#111827;

}

.story-content h2 span{

    color:var(--primary);

}

.story-content p{

    color:#5f6678;

    line-height:1.9;

    margin-bottom:22px;

}

.story-signature{

    margin-top:45px;

}

.story-signature img{

    width:170px;

    margin-bottom:18px;

}

.story-signature h5{

    color:#111827;

    margin-bottom:6px;

}

.story-signature span{

    color:var(--primary);

    font-weight:500;

}

.story-image-wrapper{

    position:relative;

}

.story-image{

    width:100%;

    border-radius:28px;

    display:block;

    box-shadow:0 25px 70px rgba(0,0,0,.15);

}

.story-stats{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-45px;

    width:82%;

    background:linear-gradient(
    135deg,
    #4F7CFF,
    #6D5DFB);

    border-radius:24px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:32px 20px;

    box-shadow:0 30px 60px rgba(79,124,255,.30);

}

.story-stat{

    flex:1;

    text-align:center;

}

.story-stat h3{

    color:#fff;

    font-size:2.5rem;

    font-weight:800;

    margin-bottom:10px;

}

.story-stat span{

    color:rgba(255,255,255,.92);

    line-height:1.6;

    display:block;

    font-size:.95rem;

}

.story-divider{

    width:1px;

    height:70px;

    background:rgba(255,255,255,.28);

}

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

@media(max-width:991px){

.story-content{

margin-bottom:40px;

}

.story-content h2{

font-size:2.5rem;

}

.story-stats{

position:relative;

left:auto;

transform:none;

bottom:auto;

width:100%;

margin-top:-50px;

}

}

@media(max-width:767px){

.story-content h2{

font-size:2rem;

}

.story-stats{

flex-direction:column;

gap:30px;

padding:35px;

}

.story-divider{

width:70px;

height:1px;

}

.story-stat h3{

font-size:2rem;

}

.story-signature img{

width:140px;

}

}

/*=========================================
            STATS RIBBON
==========================================*/

.about-stats{

    position:relative;

    padding:4rem 0;

    background:
    linear-gradient(
    135deg,
    #07112b,
    #101b4b);

    overflow:hidden;

}

.stats-pattern{

    position:absolute;

    inset:0;

    background:url("https://www.transparenttextures.com/patterns/cartographer.png");

    opacity:.08;

}

.about-stats .container{

    position:relative;

    z-index:2;

}

.stats-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    height:100%;

}

.stats-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    background:rgba(79,124,255,.15);

    border:1px solid rgba(79,124,255,.25);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:.35s;

}

.stats-item:hover .stats-icon{

    transform:translateY(-6px);

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

}

.stats-icon i{

    font-size:1.8rem;

    color:#fff;

}

.stats-content h3{

    color:#fff;

    font-size:2.2rem;

    font-weight:700;

    margin-bottom:6px;

}

.stats-content h5{

    color:#fff;

    margin-bottom:8px;

    font-size:1.15rem;

}

.stats-content p{

    color:rgba(255,255,255,.75);

    line-height:1.7;

    margin:0;

}

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

@media(max-width:991px){

.stats-item{

margin-bottom:30px;

}

}

@media(max-width:767px){

.about-stats{

padding:3rem 0;

}

.stats-item{

text-align:center;

flex-direction:column;

align-items:center;

}

.stats-content h3{

font-size:1.9rem;

}

.stats-icon{

width:65px;

height:65px;

}

}

/*=========================================
        MISSION & VISION
==========================================*/

.mission-section{

    background:#ffffff;

    position:relative;

}

.mission-card,
.vision-card{

    height:100%;

    border-radius:28px;

    padding:45px;

    display:flex;

    gap:28px;

    align-items:flex-start;

    transition:.4s;

    overflow:hidden;

    position:relative;

}

.mission-card{

    background:linear-gradient(135deg,#eef2ff,#f8faff);

}

.vision-card{

    background:linear-gradient(135deg,#eefcf8,#f9fffd);

}

.mission-card:hover,
.vision-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.mission-icon,
.vision-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.mission-icon{

    background:#dbe8ff;

    color:#4F7CFF;

}

.vision-icon{

    background:#dff9ef;

    color:#16b67a;

}

.mission-icon i,
.vision-icon i{

    font-size:2.4rem;

}

.mission-tag,
.vision-tag{

    display:inline-block;

    font-size:.8rem;

    font-weight:700;

    margin-bottom:15px;

    color:var(--primary);

    letter-spacing:.08em;

}

.vision-tag{

    color:#16b67a;

}

.mission-card h3,
.vision-card h3{

    font-size:2rem;

    margin-bottom:18px;

    line-height:1.3;

    color: #07112d;

}

.mission-card p,
.vision-card p{

    color:#6b7280;

    line-height:1.8;

}

/*=========================================
        CORE VALUES
==========================================*/

.value-card{

    background:#fff;

    border-radius:22px;

    padding:35px 30px;

    height:100%;

    border:1px solid #edf2f7;

    transition:.35s;

    text-align:left;

}

.value-card:hover{

    transform:translateY(-10px);

    border-color:#4F7CFF;

    box-shadow:0 20px 45px rgba(79,124,255,.12);

}

.value-icon{

    width:72px;

    height:72px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef2ff;

    color:#4F7CFF;

    margin-bottom:25px;

}

.value-icon i{

    font-size:2rem;

}

.value-card h4{

    margin-bottom:15px;

    font-size:1.4rem;

    color:#111827;

}

.value-card p{

    color:#6b7280;

    line-height:1.8;

    margin:0;

}

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

@media(max-width:991px){

.mission-card,
.vision-card{

flex-direction:column;

padding:35px;

}

}

@media(max-width:576px){

.mission-card,
.vision-card{

padding:28px;

}

.mission-card h3,
.vision-card h3{

font-size:1.6rem;

}

.value-card{

text-align:center;

}

.value-icon{

margin:0 auto 20px;

}

}

/*=========================================
            DOWNLOAD CTA
==========================================*/

.about-cta{

    position:relative;

    padding:7rem 0;

    overflow:hidden;

}

.cta-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    background:linear-gradient(
    135deg,
    #3467ff 0%,
    #5b74ff 50%,
    #7d5fff 100%);

    padding:80px;

    box-shadow:0 40px 90px rgba(52,103,255,.30);

}

.cta-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(10px);

    opacity:.15;

}

.shape-1{

    width:380px;

    height:380px;

    background:#ffffff;

    top:-180px;

    left:-140px;

}

.shape-2{

    width:320px;

    height:320px;

    background:#ffffff;

    right:-120px;

    bottom:-140px;

}

.cta-content{

    position:relative;

    z-index:5;

}

.section-tag.light{

    background:rgba(255,255,255,.15);

    color:#fff;

    border:1px solid rgba(255,255,255,.18);

}

.cta-content h2{

    color:#fff;

    font-size:3rem;

    font-weight:800;

    line-height:1.2;

    margin:25px 0;

}

.cta-content p{

    color:rgba(255,255,255,.88);

    max-width:620px;

    line-height:1.9;

    margin-bottom:35px;

}

.cta-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.btn-light-blue{

    background:#fff;

    color:#3467ff;

    padding:16px 34px;

    border-radius:14px;

    font-weight:600;

    transition:.35s;

}

.btn-light-blue:hover{

    transform:translateY(-5px);

    color:#fff;

    background: #07112d;

}

.btn-outline-white{

    border:2px solid rgba(255,255,255,.35);

    color:#fff;

    padding:16px 34px;

    border-radius:14px;

    transition:.35s;

}

.btn-outline-white:hover{

    background:#fff;

    color:#3467ff;

}

.cta-icon{

    display:flex;

    justify-content:center;

}

.icon-circle{

    width:220px;

    height:220px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.25);

    box-shadow:0 30px 70px rgba(0,0,0,.18);

}

.icon-circle i{

    font-size:5rem;

    color:#fff;

}

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

@media(max-width:991px){

.cta-wrapper{

padding:60px 40px;

text-align:center;

}

.cta-content h2{

font-size:2.4rem;

}

.cta-buttons{

justify-content:center;

}

.icon-circle{

width:180px;

height:180px;

margin:auto;

}

.icon-circle i{

font-size:4rem;

}

}

@media(max-width:576px){

.about-cta{

padding:5rem 0;

}

.cta-wrapper{

padding:45px 25px;

}

.cta-content h2{

font-size:2rem;

}

.cta-buttons{

flex-direction:column;

}

.btn-light-blue,
.btn-outline-white{

width:100%;

}

.icon-circle{

width:150px;

height:150px;

}

.icon-circle i{

font-size:3.2rem;

}

}

/*=========================================
            SUPPORT HERO
==========================================*/

.support-hero{

    position:relative;

    overflow:hidden;

    padding:9rem 0 8rem;

    background:
    radial-gradient(circle at 15% 30%,rgba(79,124,255,.18),transparent 35%),
    radial-gradient(circle at 90% 15%,rgba(109,93,251,.18),transparent 30%),
    linear-gradient(180deg,#050816 0%,#07112d 100%);

}

/*=========================================
            GRID BACKGROUND
==========================================*/

.support-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(79,124,255,.08) 1px,transparent 1px),

    linear-gradient(90deg,rgba(79,124,255,.08) 1px,transparent 1px);

    background-size:60px 60px;

    mask-image:linear-gradient(to bottom,transparent 0%,#000 25%,#000 80%,transparent);

    animation:gridMove 18s linear infinite;

}

@keyframes gridMove{

0%{

transform:translateY(0);

}

100%{

transform:translateY(60px);

}

}

/*=========================================
            GLOW EFFECTS
==========================================*/

.support-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.25;

}

.glow-1{

    width:380px;

    height:380px;

    background:#4F7CFF;

    left:-120px;

    top:40px;

}

.glow-2{

    width:320px;

    height:320px;

    background:#6D5DFB;

    right:-120px;

    bottom:30px;

}

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

.support-content{

    position:relative;

    z-index:5;

}

.support-content h1{

    color:#fff;

    font-size:3.9rem;

    font-weight:800;

    line-height:1.18;

    margin:22px 0 28px;

}

.support-content h1 span{

    display:block;

    color:var(--primary);

}

.support-content p{

    color:rgba(255,255,255,.82);

    font-size:1.08rem;

    line-height:1.9;

    max-width:560px;

}

/*=========================================
            SEARCH
==========================================*/

/* .support-search{

    position:relative;

    margin:42px 0;

}

.support-search i{

    position:absolute;

    left:24px;

    top:50%;

    transform:translateY(-50%);

    color:#8ea8ff;

    font-size:1.1rem;

}

.support-search input{

    width:100%;

    height:68px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.05);

    color:#fff;

    padding-left:62px;

    outline:none;

    transition:.35s;

}

.support-search input::placeholder{

    color:rgba(255,255,255,.55);

}

.support-search input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(79,124,255,.15);

} */

/*=========================================
            FEATURES
==========================================*/

.support-features{

    display:flex;

    flex-wrap:wrap;

    gap:22px;

}

.support-feature{

    display:flex;

    align-items:flex-start;

    gap:14px;

    flex:1;

    min-width:170px;

}

.support-feature .feature-icon{

    width:56px;

    height:56px;

    border-radius:16px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#4F7CFF;

    font-size:1.3rem;

    transition:.35s;

}

.support-feature:hover .feature-icon{

    background:linear-gradient(135deg,#4F7CFF,#6D5DFB);

    color:#fff;

    transform:translateY(-6px);

}

.support-feature h6{

    color:#fff;

    margin-bottom:5px;

}

.support-feature span{

    color:rgba(255,255,255,.72);

    font-size:.92rem;

    line-height:1.6;

}

/*=========================================
            RIGHT SIDE
==========================================*/

.support-image{

    position:sticky;

    display:flex;
    top:120px;

    justify-content:center;

    align-items:center;

}

.support-orbit{

    position:relative;

    width:560px;

    height:560px;

    border-radius:50%;

    border:1px dashed rgba(79,124,255,.35);

}

.support-center{

    position:absolute;

    left:50%;

    top:50%;

    width:360px;

    height:360px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    overflow:hidden;

    box-shadow:0 35px 80px rgba(0,0,0,.35);

}

.support-center img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.orbit-icon{

    position:absolute;

    width:74px;

    height:74px;

    border-radius:50%;

    background:#111d45;

    border:1px solid rgba(79,124,255,.25);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:1.6rem;

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

}

.orbit-1{

    left:50%;

    top:-36px;

    transform:translateX(-50%);

}

.orbit-2{

    right:-36px;

    top:50%;

    transform:translateY(-50%);

}

.orbit-3{

    left:50%;

    bottom:-36px;

    transform:translateX(-50%);

}

.orbit-4{

    left:-36px;

    top:50%;

    transform:translateY(-50%);

}

@keyframes floatIcon{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

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

@media(max-width:1199px){

.support-orbit{

width:480px;

height:480px;

}

.support-center{

width:300px;

height:300px;

}

}

@media(max-width:991px){

.support-hero{

padding:8rem 0 7rem;

text-align:center;

}

.support-content h1{

font-size:3rem;

}

.support-content p{

margin:auto;

}

.support-search{

max-width:600px;

margin:40px auto;

}

.support-features{

justify-content:center;

}

.support-orbit{

width:420px;

height:420px;

margin:auto;

}

.support-center{

width:260px;

height:260px;

}

}

@media(max-width:767px){

.support-hero{

padding:7rem 0 6rem;

}

.support-content h1{

font-size:2.35rem;

}

.support-features{

flex-direction:column;

}

.support-feature{

justify-content:center;

text-align:left;

}

.support-orbit{

width:300px;

height:300px;

}

.support-center{

width:180px;

height:180px;

}

.orbit-icon{

width:58px;

height:58px;

font-size:1.2rem;

}

}


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

.support-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    border:1px solid #edf2f7;

    box-shadow:0 15px 40px rgba(15,23,42,.05);

    transition:.35s;

}

.support-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(79,124,255,.10);

}

.support-card-icon{

    width:80px;

    height:80px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    font-size:2rem;

    margin-bottom:25px;

}

.support-card h3{

    font-size:2rem;

    margin-bottom:15px;

    color:#111827;

}

.support-card h4{

    font-size:1.45rem;

    margin-bottom:25px;

    color:#111827;

}

.support-card p{

    color:#6b7280;

    line-height:1.9;

    margin-bottom:25px;

}

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

.support-links{

    padding:0;

    margin:0;

    list-style:none;

}

.support-links li{

    margin-bottom:14px;

}

.support-links li:last-child{

    margin-bottom:0;

}

.support-links a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px 18px;

    border-radius:14px;

    background:#f7f9fc;

    color:#4b5563;

    transition:.35s;

    text-decoration:none;

    font-weight:500;

}

.support-links a:hover{

    background:var(--primary);

    color:#fff;

    transform:translateX(8px);

}

.support-links i{

    font-size:1.2rem;

}

/*=========================================
        CONTACT INFO
=========================================*/

.support-contact{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.contact-item i{

    width:52px;

    height:52px;

    border-radius:14px;

    background:#eef3ff;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.2rem;

    flex-shrink:0;

}

.contact-item h6{

    margin-bottom:5px;

    color:#111827;

}

.contact-item span{

    color:#6b7280;

    line-height:1.7;

}

/*=========================================
        FAQ
=========================================*/

.faq-wrapper{

    background:#fff;

    border-radius:30px;

    padding:50px;

    border:1px solid #edf2f7;

    box-shadow:0 20px 60px rgba(15,23,42,.06);

}

.faq-wrapper h2{

    font-size:3rem;

    margin:20px 0;

    color:#111827;

}

.faq-wrapper p{

    color:#6b7280;

    line-height:1.9;

    margin-bottom:40px;

}

/*=========================================
        ACCORDION
=========================================*/

.accordion{

    --bs-accordion-border-width:0;

    --bs-accordion-bg:transparent;

    --bs-accordion-btn-focus-box-shadow:none;

}

.accordion-item{

    border:1px solid #edf2f7;

    border-radius:18px !important;

    margin-bottom:18px;

    overflow:hidden;

    background:#fff;

    transition:.35s;

}

.accordion-item:hover{

    box-shadow:0 15px 35px rgba(79,124,255,.08);

}

.accordion-button{

    padding:22px 28px;

    font-size:1.1rem;

    font-weight:600;

    color:#111827;

    background:#fff;

}

.accordion-button:not(.collapsed){

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

}

.accordion-button::after{

    filter:brightness(0);

}

.accordion-button:not(.collapsed)::after{

    filter:brightness(100);

}

.accordion-body{

    padding:25px 28px;

    color:#6b7280;

    line-height:1.9;

    background:#fff;

}

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

.support-card .btn{

    border-radius:14px;

    padding:15px;

    font-weight:600;

}

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

@media(max-width:991px){

.support-section{

padding:5rem 0;

}

.faq-wrapper{

padding:40px;

}

.faq-wrapper h2{

font-size:2.4rem;

}

}

@media(max-width:767px){

.support-card{

padding:28px;

}

.faq-wrapper{

padding:30px 22px;

}

.faq-wrapper h2{

font-size:2rem;

}

.accordion-button{

padding:18px;

font-size:1rem;

}

.accordion-body{

padding:20px 18px;

}

.support-links a{

padding:14px 16px;

}

.contact-item{

gap:14px;

}

.contact-item i{

width:46px;

height:46px;

}

}

/*=========================================
        FAQ ACTIVE
=========================================*/

.accordion-item.active{

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(79,124,255,.15);

}

.accordion-item{

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}

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

.support-search input{

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}

.support-search input:focus{

    background:rgba(255,255,255,.08);

}

/*=========================================
            CONTACT HERO
=========================================*/

.contact-hero{

    position:relative;

    overflow:hidden;

    padding:9rem 0 10rem;

    background:
    radial-gradient(circle at 15% 20%,rgba(79,124,255,.16),transparent 35%),
    radial-gradient(circle at 90% 25%,rgba(109,93,251,.15),transparent 30%),
    linear-gradient(180deg,#050816 0%,#07112d 100%);

}

/*=========================================
            GRID
=========================================*/

.contact-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(79,124,255,.06) 1px,transparent 1px),

    linear-gradient(90deg,rgba(79,124,255,.06) 1px,transparent 1px);

    background-size:60px 60px;

    opacity:.6;

    animation:gridMove 18s linear infinite;

}

@keyframes gridMove{

0%{

transform:translateY(0);

}

100%{

transform:translateY(60px);

}

}

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

.contact-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.25;

}

.glow-1{

    width:380px;

    height:380px;

    background:#3f6cff;

    left:-140px;

    top:80px;

}

.glow-2{

    width:320px;

    height:320px;

    background:#6D5DFB;

    right:-100px;

    bottom:20px;

}

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

.contact-content{

    position:relative;

    z-index:5;

}

.contact-content h1{

    color:#fff;

    font-size:4rem;

    font-weight:800;

    line-height:1.18;

    margin:24px 0;

}

.contact-content h1 span{

    display:block;

    color:var(--primary);

}

.contact-content p{

    color:rgba(255,255,255,.82);

    line-height:1.9;

    max-width:560px;

}

/*=========================================
            FEATURES
=========================================*/

.contact-features{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

    margin-top:45px;

}

.contact-feature{

    display:flex;

    align-items:flex-start;

    gap:15px;

    min-width:170px;

}

.contact-feature-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    color:#4F7CFF;

    font-size:1.35rem;

    transition:.35s;

}

.contact-feature:hover .contact-feature-icon{

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

    transform:translateY(-6px);

}

.contact-feature h6{

    color:#fff;

    margin-bottom:6px;

}

.contact-feature span{

    color:rgba(255,255,255,.72);

    font-size:.92rem;

}

/*=========================================
            RIGHT IMAGE
=========================================*/

.contact-illustration{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.illustration-ring{

    position:absolute;

    width:560px;

    height:560px;

    border-radius:50%;

    border:1px dashed rgba(79,124,255,.25);

    animation:spinSlow 35s linear infinite;

}

@keyframes spinSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

.contact-illustration img{

    position:relative;

    z-index:5;

    max-width:520px;

    animation:floatHero 5s ease-in-out infinite;

}

@keyframes floatHero{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}

/*=========================================
        CONTACT INFO SECTION
=========================================*/

.contact-info-section{

    position:relative;


    z-index:20;

}

.contact-info-wrapper{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 30px 70px rgba(0,0,0,.08);
    

}

.contact-info-card{

    padding:42px 30px;

    height:100%;

    text-align:left;

    border-right:1px solid #edf2f7;

    transition:.35s;

}

.contact-info-card:last-child{

    border-right:none;

}

.contact-info-card:hover{

    background:#f8fbff;

}

.info-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef3ff;

    color:var(--primary);

    font-size:1.8rem;

    margin-bottom:22px;

    transition:.35s;

}

.contact-info-card:hover .info-icon{

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

}

.contact-info-card h5{

    font-size:1.4rem;

    margin-bottom:12px;

    color:#111827;

}

.contact-info-card p{

    margin-bottom:8px;

    color:#111827;

    font-weight:600;

}

.contact-info-card span{

    color:#6b7280;

    line-height:1.7;

}

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

@media(max-width:1199px){

.contact-content h1{

font-size:3.4rem;

}

.illustration-ring{

width:460px;

height:460px;

}

.contact-illustration img{

max-width:420px;

}

}

@media(max-width:991px){

.contact-hero{

padding:8rem 0 9rem;

text-align:center;

}

.contact-content h1{

font-size:3rem;

}

.contact-content p{

margin:auto;

}

.contact-features{

justify-content:center;

}

.contact-info-section{

margin-top:-60px;

}

.contact-info-card{

border-right:none;

border-bottom:1px solid #edf2f7;

}

.contact-info-card:last-child{

border-bottom:none;

}

}

@media(max-width:767px){

.contact-hero{

padding:7rem 0 8rem;

}

.contact-content h1{

font-size:2.3rem;

}

.contact-features{

flex-direction:column;

align-items:flex-start;

gap:18px;

}

.contact-feature{

width:100%;

}

.illustration-ring{

width:300px;

height:300px;

}

.contact-illustration img{

max-width:260px;

}

.contact-info-card{

padding:30px 24px;

text-align:center;

}

.info-icon{

margin:0 auto 20px;

}

}

/*=========================================
        CONTACT MAIN
=========================================*/

.contact-main{

     background:
    radial-gradient(circle at 15% 20%,rgba(79,124,255,.16),transparent 35%),
    radial-gradient(circle at 90% 25%,rgba(109,93,251,.15),transparent 30%),
    linear-gradient(180deg,#050816 0%,#07112d 100%);

    padding:7rem 0;

}

/*=========================================
        CONTACT FORM
=========================================*/

.contact-form-card{

    background:#fff;

    border-radius:28px;

    padding:45px;

    border:1px solid #edf2f7;

    box-shadow:0 20px 60px rgba(15,23,42,.06);

}

.contact-form-card h2{

    font-size:2.5rem;

    color:#111827;

    margin-bottom:15px;

}

.contact-form-card>p{

    color:#6b7280;

    margin-bottom:35px;

    line-height:1.8;

}

.contact-form-card label{

    font-weight:600;

    color:#111827;

    margin-bottom:10px;

    display:block;

}

.contact-form-card .form-control,

.contact-form-card .form-select{

    height:58px;

    border-radius:14px;

    border:1px solid #dbe4f0;

    background:#fff;

    box-shadow:none;

    transition:.35s;

}

.contact-form-card textarea.form-control{

    height:150px;

    resize:none;

    padding-top:16px;

}

.contact-form-card .form-control:focus,

.contact-form-card .form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(79,124,255,.15);

}

.contact-submit{

    height:58px;

    border:none;

    border-radius:14px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    font-weight:600;

    transition:.35s;

}

.contact-submit:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(79,124,255,.25);

}

.contact-submit i{

    margin-right:10px;

}

.form-note{

    margin-top:18px;

    text-align:center;

    color:#6b7280;

    font-size:.92rem;

}

.form-note i{

    color:var(--primary);

    margin-right:6px;

}

/*=========================================
        FAQ
=========================================*/

.contact-faq{

    background:#fff;

    border-radius:28px;

    padding:40px;

    border:1px solid #edf2f7;

    box-shadow:0 20px 60px rgba(15,23,42,.06);

}

.contact-faq h2{

    font-size:2.3rem;

    margin-bottom:30px;

    color:#111827;

}

.contact-faq .accordion{

    --bs-accordion-border-width:0;

    --bs-accordion-bg:transparent;

    --bs-accordion-btn-focus-box-shadow:none;

}

.contact-faq .accordion-item{

    border:1px solid #edf2f7;

    border-radius:16px !important;

    overflow:hidden;

    margin-bottom:18px;

    transition:.35s;

}

.contact-faq .accordion-item:hover{

    box-shadow:0 15px 35px rgba(79,124,255,.08);

}

.contact-faq .accordion-button{

    background:#fff;

    padding:20px 24px;

    font-weight:600;

    color:#111827;

}

.contact-faq .accordion-button:not(.collapsed){

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

}

.contact-faq .accordion-button::after{

    filter:brightness(0);

}

.contact-faq .accordion-button:not(.collapsed)::after{

    filter:brightness(100);

}

.contact-faq .accordion-body{

    padding:22px 24px;

    color:#6b7280;

    line-height:1.8;

}

/*=========================================
        HELP CARD
=========================================*/

.help-card{

     background:linear-gradient(
    180deg,
    #081224,
    #050816);

    border-radius:26px;

    overflow:hidden;

    padding:40px;

    position:relative;

    color:#fff;

    box-shadow:0 25px 55px rgba(30,64,255,.25);

}

.help-card::before{

    content:"";

    position:absolute;

    right:-120px;

    top:-120px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

.help-card h3{

    font-size:2rem;

    margin-bottom:15px;

}

.help-card p{

    color:rgba(255,255,255,.85);

    line-height:1.8;

    margin-bottom:28px;

}

.help-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.help-buttons .btn{

    border-radius:12px;

    padding:14px 24px;

    font-weight:600;

}

.help-buttons .btn-light{

    color:var(--primary);

}

.help-buttons .btn-outline-light:hover{

    background:#fff;

    color:var(--primary);

}

.help-card img{

    max-width:180px;

    animation:floatHelp 5s ease-in-out infinite;

}

@keyframes floatHelp{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

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

@media(max-width:991px){

.contact-form-card,

.contact-faq{

padding:35px;

}

.contact-form-card h2,

.contact-faq h2{

font-size:2rem;

}

.help-card{

text-align:center;

padding:35px;

}

.help-buttons{

justify-content:center;

margin-bottom:25px;

}

}

@media(max-width:767px){

.contact-main{

padding:5rem 0;

}

.contact-form-card,

.contact-faq{

padding:28px 22px;

}

.contact-form-card h2,

.contact-faq h2{

font-size:1.75rem;

}

.contact-submit{

height:54px;

}

.help-card{

padding:28px 22px;

}

.help-card h3{

font-size:1.6rem;

}

.help-buttons{

flex-direction:column;

}

.help-buttons .btn{

width:100%;

}

.help-card img{

max-width:140px;

margin-top:20px;

}

}

/*=========================================
            LOCATION
=========================================*/

.location-section{

    padding:7rem 0;

    background:#fff;

}

.location-content h2{

    font-size:3rem;

    margin:20px 0;

}

.location-content p{

    color:#6b7280;

    line-height:1.9;

    margin-bottom:35px;

}

.location-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.location-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.location-item i{

    width:58px;

    height:58px;

    border-radius:16px;

    background:#eef3ff;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.35rem;

}

.location-item h6{

    margin-bottom:6px;

}

.location-item span{

    color:#6b7280;

    line-height:1.7;

}

/*=========================================
            MAP
=========================================*/

.map-card{

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(15,23,42,.08);

}

.map-card iframe{

    width:100%;

    height:500px;

    border:none;

}

/*=========================================
            NEWSLETTER
=========================================*/

.contact-newsletter{

    padding:0 0 7rem;

    background:
    radial-gradient(circle at 15% 20%,rgba(79,124,255,.16),transparent 35%),
    radial-gradient(circle at 90% 25%,rgba(109,93,251,.15),transparent 30%),
    linear-gradient(180deg,#050816 0%,#07112d 100%);

}

.newsletter-box{

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    padding:70px;

    border-radius:30px;

    color:#fff;

    box-shadow:0 30px 70px rgba(79,124,255,.25);

}

.newsletter-box h2{

    font-size:2.8rem;

    margin-bottom:15px;

}

.newsletter-box p{

    color:rgba(255,255,255,.88);

    margin:0;

}

.newsletter-form{

    display:flex;

    background:#fff;

    border-radius:16px;

    overflow:hidden;

}

.newsletter-form input{

    flex:1;

    border:none;

    padding:18px 24px;

    outline:none;

}

.newsletter-form .btn{

    border-radius:0;

    padding:0 34px;

}

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

@media(max-width:991px){

.location-content{

margin-bottom:40px;

}

.location-content h2{

font-size:2.4rem;

}

.newsletter-box{

padding:45px;

text-align:center;

}

.newsletter-form{

margin-top:20px;

}

}

@media(max-width:767px){

.location-section{

padding:5rem 0;

}

.location-content h2{

font-size:2rem;

}

.map-card iframe{

height:350px;

}

.newsletter-box{

padding:30px 22px;

}

.newsletter-box h2{

font-size:2rem;

}

.newsletter-form{

flex-direction:column;

background:none;

gap:15px;

}

.newsletter-form input{

border-radius:14px;

}

.newsletter-form .btn{

border-radius:14px;

padding:15px;

}

}

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

.blog-hero{

    position:relative;

    overflow:hidden;

    padding:9rem 0 8rem;

    background:
    radial-gradient(circle at 15% 20%,rgba(79,124,255,.16),transparent 35%),
    radial-gradient(circle at 90% 25%,rgba(109,93,251,.15),transparent 30%),
    linear-gradient(180deg,#050816 0%,#07112d 100%);

}

/*=========================================
            GRID
=========================================*/

.blog-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(79,124,255,.06) 1px,transparent 1px),

    linear-gradient(90deg,rgba(79,124,255,.06) 1px,transparent 1px);

    background-size:60px 60px;

    animation:gridMove 18s linear infinite;

}

@keyframes gridMove{

0%{

transform:translateY(0);

}

100%{

transform:translateY(60px);

}

}

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

.blog-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.25;

}

.blog-glow.glow-1{

    width:360px;

    height:360px;

    background:#4F7CFF;

    left:-120px;

    top:60px;

}

.blog-glow.glow-2{

    width:320px;

    height:320px;

    background:#6D5DFB;

    right:-120px;

    bottom:0;

}

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

.blog-hero-content{

    position:relative;

    z-index:5;

}

.blog-hero-content h1{

    color:#fff;

    font-size:4rem;

    font-weight:800;

    line-height:1.18;

    margin:22px 0;

}

.blog-hero-content h1 span{

    display:block;

    color:var(--primary);

}

.blog-hero-content p{

    color:rgba(255,255,255,.82);

    max-width:560px;

    line-height:1.9;

}

/*=========================================
            SEARCH
=========================================*/

.blog-search{

    position:relative;

    margin-top:40px;

}

.blog-search i{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    color:#8ea8ff;

}

.blog-search input{

    width:100%;

    height:66px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.05);

    color:#fff;

    padding-left:58px;

    outline:none;

    transition:.35s;

}

.blog-search input::placeholder{

    color:rgba(255,255,255,.55);

}

.blog-search input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(79,124,255,.15);

}

/*=========================================
            HERO IMAGE
=========================================*/

.blog-hero-image{

    position:relative;

    display:flex;

    justify-content:center;

}

.blog-hero-image img{

    max-width:540px;

    border-radius:24px;

    box-shadow:0 35px 80px rgba(0,0,0,.35);

    animation:floatHero 5s ease-in-out infinite;

}

@keyframes floatHero{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/* Floating Icon */

.floating-blog-icon{

    position:absolute;

    top:30px;

    left:20px;

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(13,25,65,.95);

    border:1px solid rgba(79,124,255,.35);

    color:#4F7CFF;

    font-size:2rem;

    box-shadow:0 20px 50px rgba(79,124,255,.20);

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

}

@keyframes floatIcon{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

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

@media(max-width:991px){

.blog-hero{

padding:8rem 0 7rem;

text-align:center;

}

.blog-hero-content h1{

font-size:3rem;

}

.blog-hero-content p{

margin:auto;

}

.blog-search{

max-width:600px;

margin:35px auto 0;

}

.blog-hero-image img{

max-width:420px;

}

}

@media(max-width:767px){

.blog-hero{

padding:7rem 0 6rem;

}

.blog-hero-content h1{

font-size:2.3rem;

}

.blog-hero-image img{

max-width:100%;

}

.floating-blog-icon{

width:70px;

height:70px;

font-size:1.5rem;

}

}

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

.blog-main{

    background:#f8fbff;

    padding:7rem 0;

}

.blog-list-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    margin-bottom:30px;

    border:1px solid #edf2f7;

    box-shadow:0 15px 45px rgba(15,23,42,.05);

    transition:.35s;

}

.blog-list-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(79,124,255,.12);

}

.blog-image{

    position:relative;

    height:100%;

}

.blog-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    min-height:260px;

}

.featured-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    padding:8px 16px;

    border-radius:40px;

    font-size:.75rem;

    font-weight:600;

    z-index:5;

}

.blog-content{

    padding:40px;

}

.blog-meta{

    color:#6b7280;

    font-size:.92rem;

    margin-bottom:18px;

}


.blog-meta span{

    color:var(--primary);

    font-weight:600;

    text-transform:uppercase;

}

.blog-content h2{

    font-size:2rem;

    line-height:1.3;

    margin-bottom:18px;

    color:#111827;

}

.blog-content p{

    color:#6b7280;

    line-height:1.9;

    margin-bottom:25px;

}

.blog-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.blog-footer a{

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

}

.blog-footer a i{

    margin-left:6px;

}

.blog-footer span{

    color:#6b7280;

}

.blog-footer span i{

    margin-right:5px;

}

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

@media(max-width:991px){

.blog-content{

padding:30px;

}

.blog-content h2{

font-size:1.7rem;

}

}

@media(max-width:767px){

.blog-image img{

min-height:220px;

}

.blog-content{

padding:25px;

}

.blog-content h2{

font-size:1.45rem;

}

.blog-footer{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

}

/*=========================================
        DOWNLOAD CARD
=========================================*/

.blog-download-card{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    padding:38px;

    background:linear-gradient(
    135deg,
    #081332,
    #12235d);

    color:#fff;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.blog-download-card h3{

    margin:18px 0;

    font-size:2rem;

    line-height:1.3;

}

.blog-download-card p{

    color:rgba(255,255,255,.78);

    line-height:1.8;

}

.blog-download-card .btn{

    margin-top:20px;

    border-radius:14px;

    padding:14px 26px;

}

.learn-link{

    display:inline-flex;

    margin-top:22px;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    gap:8px;

}

.blog-download-card img{

    display:block;

    width:180px;

    margin:30px auto 0;

}

/*=========================================
        POPULAR POSTS
=========================================*/

.popular-post{

    display:flex;

    gap:15px;

    margin-bottom:22px;

}

.popular-post:last-child{

    margin-bottom:0;

}

.popular-post img{

    width:90px;

    height:90px;

    border-radius:12px;

    object-fit:contain;

}

.popular-post h5{

    font-size:1rem;

    line-height:1.45;

    margin-bottom:8px;

    color:#111827;

}

.popular-post span{

    color:#6b7280;

    font-size:.9rem;

}

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

@media(max-width:991px){

.blog-sidebar-card{

margin-top:40px;

}

.blog-download-card{

margin-top:10px;

}

}

@media(max-width:767px){

.blog-sidebar-card{

padding:28px 22px;

}

.blog-download-card{

padding:28px 22px;

}

.blog-download-card h3{

font-size:1.7rem;

}

.popular-post{

align-items:flex-start;

}

.popular-post img{

width:80px;

height:65px;

}

}

/*=========================================
        NEWSLETTER
=========================================*/

.blog-newsletter{

    padding:0 0 7rem;

    background:#f8fbff;

}

.newsletter-card{

    background:linear-gradient(
    135deg,
    #07112d,
    #10256c);

    border-radius:28px;

    padding:55px;

    color:#fff;

    overflow:hidden;

    position:relative;

    box-shadow:0 30px 70px rgba(0,0,0,.18);

}

.newsletter-card::before{

    content:"";

    position:absolute;

    right:-120px;

    top:-120px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

}

.newsletter-left{

    display:flex;

    align-items:center;

    gap:25px;

}

.newsletter-icon{

    width:85px;

    height:85px;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    color:#fff;

    flex-shrink:0;

}

.newsletter-left h2{

    font-size:2rem;

    margin-bottom:12px;

}

.newsletter-left p{

    color:rgba(255,255,255,.82);

    margin:0;

    line-height:1.8;

}

.newsletter-form{

    display:flex;

    gap:15px;

}

.newsletter-form input{

    flex:1;

    height:60px;

    border:none;

    border-radius:14px;

    padding:0 22px;

    outline:none;

}

.newsletter-form button{

    min-width:180px;

    border-radius:14px;

}

.newsletter-form button i{

    margin-right:8px;

}

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

@media(max-width:991px){

.newsletter-card{

padding:40px;

text-align:center;

}

.newsletter-left{

justify-content:center;

flex-direction:column;

}

.newsletter-form{

margin-top:20px;

}

}

@media(max-width:767px){

.blog-newsletter{

padding-bottom:5rem;

}

.newsletter-card{

padding:30px 22px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form button{

width:100%;

}

.newsletter-form input{

width:100%;

}

}

/*==================================================
            POLICY HERO
==================================================*/

.policy-hero{

    position:relative;

    overflow:hidden;

    padding:9rem 0 8rem;

    background:
    radial-gradient(circle at 15% 25%,rgba(66,99,255,.16),transparent 32%),
    radial-gradient(circle at 88% 20%,rgba(88,118,255,.14),transparent 30%),
    linear-gradient(180deg,#050816 0%,#08132f 100%);

}

/*==================================================
            GRID BACKGROUND
==================================================*/

.policy-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(66,99,255,.06) 1px,transparent 1px),

    linear-gradient(90deg,rgba(66,99,255,.06) 1px,transparent 1px);

    background-size:60px 60px;

    animation:policyGrid 18s linear infinite;

    opacity:.6;

}

@keyframes policyGrid{

0%{

transform:translateY(0);

}

100%{

transform:translateY(60px);

}

}

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

.policy-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.22;

}

.policy-glow.glow-1{

    width:360px;

    height:360px;

    left:-130px;

    top:70px;

    background:#4263ff;

}

.policy-glow.glow-2{

    width:320px;

    height:320px;

    right:-120px;

    bottom:0;

    background:#5b7dff;

}

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

.policy-content{

    position:relative;

    z-index:10;

}

.policy-content h1{

    color:#fff;

    font-size:4rem;

    font-weight:800;

    line-height:1.15;

    margin:24px 0;

}

.policy-content h1 span{

    display:block;

    color:var(--primary);

}

.policy-content p{

    color:rgba(255,255,255,.82);

    font-size:1.08rem;

    line-height:1.9;

    max-width:560px;

}

/*==================================================
            FEATURES
==================================================*/

.policy-features{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

    margin-top:45px;

}

.policy-feature{

    display:flex;

    align-items:flex-start;

    gap:15px;

    min-width:180px;

}

.policy-feature i{

    width:60px;

    height:60px;

    border-radius:18px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:1.4rem;

    transition:.35s;

}

.policy-feature:hover i{

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

    transform:translateY(-6px);

}

.policy-feature h6{

    color:#fff;

    margin-bottom:5px;

    font-size:1rem;

}

.policy-feature span{

    color:rgba(255,255,255,.72);

    font-size:.92rem;

    line-height:1.6;

}

/*==================================================
            ILLUSTRATION
==================================================*/

.policy-illustration{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.policy-orbit{

    position:relative;

    width:560px;

    height:560px;

    border-radius:50%;

    border:1px dashed rgba(66,99,255,.25);

    animation:orbitRotate 35s linear infinite;

}

@keyframes orbitRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

.policy-center{

    position:absolute;

    left:50%;

    top:50%;

    width:360px;

    height:360px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    overflow:hidden;

    background:linear-gradient(135deg,#12256d,#08173e);

    box-shadow:0 35px 80px rgba(0,0,0,.35);

}

.policy-center img{

    width:100%;

    height:100%;

    object-fit:cover;

    animation:policyFloat 5s ease-in-out infinite;

}

@keyframes policyFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

/*==================================================
            FLOATING ICONS
==================================================*/

.orbit-icon{

    position:absolute;

    width:72px;

    height:72px;

    border-radius:50%;

    background:#101c48;

    border:1px solid rgba(66,99,255,.25);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:1.5rem;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

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

}

.icon-1{

    top:-36px;

    left:50%;

    transform:translateX(-50%);

}

.icon-2{

    right:-36px;

    top:50%;

    transform:translateY(-50%);

}

.icon-3{

    bottom:-36px;

    left:50%;

    transform:translateX(-50%);

}

.icon-4{

    left:-36px;

    top:50%;

    transform:translateY(-50%);

}

@keyframes iconFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

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

@media(max-width:1199px){

.policy-orbit{

width:480px;

height:480px;

}

.policy-center{

width:300px;

height:300px;

}

.policy-content h1{

font-size:3.4rem;

}

}

@media(max-width:991px){

.policy-hero{

padding:8rem 0 7rem;

text-align:center;

}

.policy-content h1{

font-size:3rem;

}

.policy-content p{

margin:auto;

}

.policy-features{

justify-content:center;

}

.policy-orbit{

width:420px;

height:420px;

margin:auto;

}

.policy-center{

width:260px;

height:260px;

}

}

@media(max-width:767px){

.policy-hero{

padding:7rem 0 6rem;

}

.policy-content h1{

font-size:2.35rem;

}

.policy-features{

flex-direction:column;

align-items:flex-start;

gap:18px;

}

.policy-feature{

width:100%;

}

.policy-orbit{

width:300px;

height:300px;

}

.policy-center{

width:180px;

height:180px;

}

.orbit-icon{

width:56px;

height:56px;

font-size:1.2rem;

}

}

/*==================================================
            POLICY META
==================================================*/

.policy-meta-section{

    position:relative;

    margin-top:-70px;

    z-index:20;

}

.policy-meta-card{

    height:100%;

    display:flex;

    align-items:center;

    gap:18px;

    padding:30px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-radius:22px;

    border:1px solid rgba(255,255,255,.45);

    box-shadow:0 20px 50px rgba(15,23,42,.08);

    transition:.35s;

}

.policy-meta-card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 60px rgba(66,99,255,.15);

}

.meta-icon{

    width:72px;

    height:72px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    font-size:1.6rem;

}

.policy-meta-card small{

    display:block;

    color:#6b7280;

    margin-bottom:6px;

    font-size:.88rem;

    letter-spacing:.4px;

    text-transform:uppercase;

}

.policy-meta-card h5{

    margin:0;

    font-size:1.2rem;

    font-weight:700;

    color:#111827;

}

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

@media(max-width:991px){

.policy-meta-section{

margin-top:-50px;

}

.policy-meta-card{

padding:24px;

}

.meta-icon{

width:64px;

height:64px;

font-size:1.4rem;

}

}

@media(max-width:767px){

.policy-meta-section{

margin-top:-35px;

}

.policy-meta-card{

padding:22px;

}

.meta-icon{

width:58px;

height:58px;

font-size:1.2rem;

}

.policy-meta-card h5{

font-size:1rem;

}

}

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

.policy-content-section{

    padding:5rem 0;

     background:
    radial-gradient(circle at 15% 20%,rgba(79,124,255,.16),transparent 35%),
    radial-gradient(circle at 90% 25%,rgba(109,93,251,.15),transparent 30%),
    linear-gradient(180deg,#050816 0%,#07112d 100%);

}

.policy-wrapper{

    max-width:1280px;

    margin:auto;

}

.policy-card{

    position:relative;

    display:flex;

    gap:35px;

    background:#fff;

    border-radius:24px;

    padding:30px;

    margin-bottom:30px;

    border-left:5px solid var(--primary);

    box-shadow:0 18px 45px rgba(15,23,42,.05);

    transition:.35s;

}

.policy-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(66,99,255,.12);

}

.policy-number{

    min-width:75px;

    height:75px;

    border-radius:20px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    font-size:1.5rem;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

}

.policy-card-title{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

}

.policy-icon{

    width:60px;

    height:60px;

    border-radius:16px;

    background:#eef3ff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:1.4rem;

}

.policy-card h2{

    margin:0;

    font-size:2rem;

    color:#111827;

}

.policy-card p{

    color:#6b7280;

    line-height:1.9;

    margin-bottom:16px;

}

.policy-card ul{

    padding-left:20px;

    margin:0;

}

.policy-card li{

    margin-bottom:14px;

    color:#6b7280;

    line-height:1.8;

}

.policy-card li:last-child{

    margin-bottom:0;

}

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

@media(max-width:991px){

.policy-card{

padding:35px;

gap:25px;

}

.policy-card h2{

font-size:1.6rem;

}

}

@media(max-width:767px){

.policy-content-section{

padding:4rem 0;

}

.policy-card{

flex-direction:column;

padding:28px 22px;

gap:20px;

}

.policy-number{

width:65px;

height:65px;

min-width:65px;

font-size:1.25rem;

}

.policy-card-title{

align-items:flex-start;

}

.policy-icon{

width:52px;

height:52px;

font-size:1.2rem;

}

.policy-card h2{

font-size:1.35rem;

}

}

/*==================================================
            POLICY CTA
==================================================*/

.policy-cta{

    padding:0 0 7rem;

     background:
    radial-gradient(circle at 15% 20%,rgba(79,124,255,.16),transparent 35%),
    radial-gradient(circle at 90% 25%,rgba(109,93,251,.15),transparent 30%),
    linear-gradient(180deg,#050816 0%,#07112d 100%);

}

.policy-cta-box{

    position:relative;

    overflow:hidden;

    padding:70px;

    border-radius:32px;

    background:linear-gradient(
    135deg,
    #07112d,
    #10256c);

    color:#fff;

    box-shadow:0 30px 80px rgba(15,23,42,.18);

}

.policy-cta-box::before{

    content:"";

    position:absolute;

    right:-140px;

    top:-140px;

    width:360px;

    height:360px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

}

.policy-cta-content{

    position:relative;

    z-index:2;

}

.policy-cta-content h2{

    font-size:3rem;

    font-weight:700;

    margin:20px 0;

}

.policy-cta-content p{

    color:rgba(255,255,255,.82);

    line-height:1.9;

    max-width:600px;

    margin-bottom:35px;

}

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

.policy-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.policy-buttons .btn{

    padding:16px 30px;

    border-radius:14px;

    font-weight:600;

}

.policy-buttons .btn i{

    margin-right:8px;

}

.policy-buttons .btn-light{

    color:var(--primary);

}

.policy-buttons .btn-outline-light:hover{

    color:var(--primary);

    background:#fff;

}

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

.policy-cta-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.cta-circle{

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

.policy-cta-image img{

    position:relative;

    z-index:2;

    max-width:330px;

    animation:ctaFloat 5s ease-in-out infinite;

}

@keyframes ctaFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

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

@media(max-width:991px){

.policy-cta-box{

padding:45px;

text-align:center;

}

.policy-buttons{

justify-content:center;

}

.policy-cta-content h2{

font-size:2.3rem;

}

.policy-cta-image{

margin-top:30px;

}

}

@media(max-width:767px){

.policy-cta{

padding-bottom:5rem;

}

.policy-cta-box{

padding:30px 22px;

}

.policy-cta-content h2{

font-size:1.9rem;

}

.policy-buttons{

flex-direction:column;

}

.policy-buttons .btn{

width:100%;

}

.policy-cta-image img{

max-width:220px;

}

.cta-circle{

width:220px;

height:220px;

}

}

/*==================================================
            INNER HERO
==================================================*/





/*==================================================
        RELATED
==================================================*/

.related-articles{

    padding-bottom:7rem;

    background:#f8fbff;

}

.related-articles h2{
    color: #111827;
}

.related-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 45px rgba(15,23,42,.05);

    transition:.35s;

}

.related-card:hover{

    transform:translateY(-8px);

}

.related-card img{

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

}

.related-content{

    padding:28px;

}

.related-content span{

    color:var(--primary);

    font-size:.85rem;

    font-weight:600;

}

.related-content h4{

    margin:18px 0;

    line-height:1.45;

    color: #08173e;

}

.related-content a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

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

@media(max-width:991px){

.summary-card{

flex-direction:column;

padding:35px;

}

}

@media(max-width:767px){

.summary-card{

padding:25px;

}

.summary-icon{

width:65px;

height:65px;

font-size:1.5rem;

}

.article-nav-card{

padding:25px;

}

.article-nav-card.next{

text-align:left;

}

.related-articles{

padding-bottom:5rem;

}

}

/*=========================================
        ARTICLE PROGRESS
=========================================*/

.article-progress{

position:fixed;

top:0;

left:0;

width:0;

height:4px;

background:linear-gradient(
90deg,
var(--primary),
var(--secondary));

z-index:999999;

transition:width .15s linear;

}

/* correction */

/*==================================================
            HEWLS UNINSTALL HERO
==================================================*/

.hdun-hero{

    position:relative;

    overflow:hidden;

    padding:5rem 0;

    background:linear-gradient(135deg,#040816 0%,#07112d 45%,#0b1845 100%);

    color:#fff;

}

.hdun-pattern{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at 15% 25%,rgba(37,99,235,.18),transparent 28%),
    radial-gradient(circle at 85% 80%,rgba(79,70,229,.18),transparent 35%);

    pointer-events:none;

}

.hdun-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

}

.hdun-glow-one{

    width:380px;

    height:380px;

    background:#2563eb;

    top:-180px;

    left:-120px;

    opacity:.18;

}

.hdun-glow-two{

    width:500px;

    height:500px;

    background:#4f46e5;

    right:-180px;

    bottom:-220px;

    opacity:.18;

}

/*==================================================
            BREADCRUMB
==================================================*/

.hdun-breadcrumb{

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:.75rem;

    margin-bottom:3rem;

    font-size:.92rem;

}

.hdun-breadcrumb a{

    color:#bfc8ea;

    text-decoration:none;

    transition:.35s;

}

.hdun-breadcrumb a:hover{

    color:#fff;

}

.hdun-breadcrumb span{

    color:#8ea2da;

}

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

.hdun-content{

    position:relative;

    z-index:5;

}

.hdun-tag{

    display:inline-block;

    padding:.55rem 1.1rem;

    border-radius:50px;

    background:#2c5bff;

    color:#fff;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:1.5rem;

}

.hdun-content h1{

    font-size:clamp(2.2rem,5vw,4rem);

    font-weight:800;

    line-height:1.15;

    margin-bottom:1.5rem;

}

.hdun-content h1 span{

    display:block;

    color:#3d66ff;

}

.hdun-content p{

    max-width:36rem;

    color:#d7dcef;

    line-height:1.9;

    font-size:1.08rem;

    margin-bottom:2.5rem;

}

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

.hdun-platforms{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

}

.hdun-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    padding:1rem 2rem;

    min-width:10rem;

    border-radius:14px;

    text-decoration:none;

    font-weight:600;

    color:#fff;

    border:1px solid rgba(255,255,255,.18);

    background:rgba(255,255,255,.04);

    transition:.35s;

}

.hdun-btn i{

    font-size:1.2rem;

}

.hdun-btn.active{

    background:#2c5bff;

    border-color:#2c5bff;

}

.hdun-btn:hover{

    color:#fff;

    background:#2c5bff;

    border-color:#2c5bff;

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(37,99,235,.35);

}

/*==================================================
            HERO IMAGE
==================================================*/

.hdun-image{

    position:relative;

    z-index:5;

    text-align:center;

}

.hdun-image img{

    width:100%;

    max-width:36rem;

    border-radius:1.5rem;

}

/*==================================================
            NOTE SECTION
==================================================*/

.hdun-note-section{

    padding:4rem 0;

    background:#fff;

}

.hdun-note-card{

    padding:2.2rem;

    border-radius:1.5rem;

    background:linear-gradient(90deg,#eef3ff,#f9fbff);

    border:1px solid #dfe7ff;

    box-shadow:0 15px 35px rgba(20,35,90,.06);

}

.hdun-note-icon{

    width:4.3rem;

    height:4.3rem;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#2c5bff;

    color:#fff;

    font-size:1.8rem;

}

.hdun-note-card h4{

    font-size:1.45rem;

    font-weight:700;

    margin-bottom:.65rem;

    color:#111827;

}

.hdun-note-card p{

    margin:0;

    line-height:1.8;

    color:#5b6478;

}

.hdun-note-shield{

    font-size:4.5rem;

    color:#d7dfff;

}

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

@media(max-width:991px){

    .hdun-hero{

        padding:4rem 0;

    }

    .hdun-content{

        text-align:center;

    }

    .hdun-content p{

        margin-inline:auto;

    }

    .hdun-platforms{

        justify-content:center;

    }

    .hdun-image{

        margin-top:2rem;

    }

    .hdun-note-card{

        text-align:center;

    }

    .hdun-note-icon{

        margin:0 auto 1.25rem;

    }

}

@media(max-width:767px){

    .hdun-breadcrumb{

        font-size:.82rem;

        margin-bottom:2rem;

    }

    .hdun-platforms{

        flex-direction:column;

    }

    .hdun-btn{

        width:100%;

    }

    .hdun-note-card{

        padding:1.75rem;

    }

}

@media(max-width:575px){

    .hdun-content h1{

        line-height:1.2;

    }

    .hdun-content p{

        font-size:1rem;

    }

    .hdun-note-icon{

        width:3.8rem;

        height:3.8rem;

        font-size:1.5rem;

    }

}

/*==================================================
            WINDOWS SECTION
==================================================*/

.hdun-win-section{

    padding:5rem 0;

    background:#fff;

}

.hdun-section-heading{

    margin-bottom:2.8rem;

}

.hdun-section-heading h2{

    font-size:2.2rem;

    font-weight:800;

    color:#0f172a;

    margin-bottom:.7rem;

}

.hdun-section-heading p{

    color:#667085;

    font-size:1.02rem;

    margin:0;

}

/*==================================================
            STEP CARD
==================================================*/

.hdun-step-card{

    position:relative;

    background:#fff;

    border:1px solid #e6ebff;

    border-radius:20px;

    padding:1.4rem;

    height:100%;

    transition:.35s;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(15,23,42,.05);

}

.hdun-step-card:hover{

    transform:translateY(-10px);

    border-color:#2c5bff;

    box-shadow:0 30px 60px rgba(44,91,255,.15);

}

.hdun-step-number{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#2c5bff;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    margin-bottom:1rem;

    box-shadow:0 10px 25px rgba(44,91,255,.25);

}

.hdun-step-card h5{

    font-size:1.1rem;

    font-weight:700;

    color:#111827;

    margin-bottom:.7rem;

}

.hdun-step-card p{

    font-size:.95rem;

    color:#6b7280;

    line-height:1.7;

    margin-bottom:1.2rem;

    min-height:70px;

}

.hdun-step-card img{

    width:100%;

    border-radius:14px;

    border:1px solid #edf2ff;

    transition:.4s;

}

.hdun-step-card:hover img{

    transform:scale(1.03);

}

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

@media(max-width:1200px){

    .hdun-step-card{

        margin-bottom:1rem;

    }

}

@media(max-width:768px){

    .hdun-win-section{

        padding:4rem 0;

    }

    .hdun-section-heading{

        text-align:center;

    }

    .hdun-step-card p{

        min-height:auto;

    }

}

@media(max-width:576px){

    .hdun-section-heading h2{

        font-size:1.8rem;

    }

}

/*==================================================
            SUPPORT CTA
==================================================*/

.hdun-support-section{

    padding:6rem 0;

    background:#fff;

}

.hdun-support-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    padding:4rem;

    background:linear-gradient(135deg,#081127,#0b1845);

    color:#fff;

}

.hdun-support-wrapper::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(37,99,235,.15);

    left:-150px;

    top:-150px;

    filter:blur(20px);

}

.hdun-support-wrapper::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(79,70,229,.15);

    right:-180px;

    bottom:-180px;

    filter:blur(30px);

}

.hdun-support-content{

    position:relative;

    z-index:2;

}

.hdun-support-tag{

    display:inline-block;

    background:#2563eb;

    color:#fff;

    padding:.55rem 1.2rem;

    border-radius:50px;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:1.5rem;

}

.hdun-support-content h2{

    font-size:clamp(2rem,5vw,3.3rem);

    font-weight:800;

    line-height:1.2;

    margin-bottom:1.25rem;

}

.hdun-support-content h2 span{

    display:block;

    color:#5b8cff;

}

.hdun-support-content p{

    color:#cbd5e1;

    line-height:1.9;

    max-width:620px;

    margin-bottom:2rem;

}

.hdun-support-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:1rem;

    margin-bottom:2.5rem;

}

.hdun-support-item{

    display:flex;

    align-items:center;

    gap:.75rem;

    color:#fff;

    font-weight:500;

}

.hdun-support-item i{

    color:#4ade80;

    font-size:1.1rem;

}

.hdun-support-buttons{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

}

.hdun-btn-primary{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    padding:1rem 2rem;

    background:#2563eb;

    color:#fff;

    border-radius:14px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.hdun-btn-primary:hover{

    background:#1d4ed8;

    color:#fff;

    transform:translateY(-4px);

}

.hdun-btn-outline{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    padding:1rem 2rem;

    border:1px solid rgba(255,255,255,.2);

    color:#fff;

    border-radius:14px;

    text-decoration:none;

    transition:.35s;

}

.hdun-btn-outline:hover{

    background:#fff;

    color:#081127;

}

.hdun-support-image{

    position:relative;

    z-index:2;

    text-align:center;

}

.hdun-support-image img{

    max-width:100%;

    border-radius:22px;

}

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

@media(max-width:991px){

    .hdun-support-wrapper{

        padding:2.5rem;

    }

    .hdun-support-content{

        text-align:center;

    }

    .hdun-support-content p{

        margin-inline:auto;

    }

    .hdun-support-list{

        grid-template-columns:1fr;

    }

    .hdun-support-buttons{

        justify-content:center;

    }

    .hdun-support-image{

        margin-top:2rem;

    }

}

@media(max-width:576px){

    .hdun-support-wrapper{

        padding:2rem 1.5rem;

        border-radius:22px;

    }

    .hdun-support-buttons{

        flex-direction:column;

    }

    .hdun-btn-primary,

    .hdun-btn-outline{

        width:100%;

        justify-content:center;

    }

}

/*=========================================
        BLOG DETAILS HERO
==========================================*/

.hdbd-hero-section{

    position:relative;

    overflow:hidden;

    background:#050816;

    padding:5rem 0;

    color:#fff;

}

.hdbd-grid-bg{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:42px 42px;

    opacity:.35;

}

.hdbd-hero-section .container{

    position:relative;

    z-index:2;

}

.hdbd-breadcrumb{

    display:flex;

    flex-wrap:wrap;

    gap:.7rem;

    margin-bottom:2rem;

    font-size:.92rem;

}

.hdbd-breadcrumb a{

    color:#bfc9e8;

    text-decoration:none;

}

.hdbd-breadcrumb .active{

    color:#fff;

}

.hdbd-category{

    display:inline-block;

    background:#2d63ff;

    padding:.45rem 1rem;

    border-radius:50px;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:1.5rem;

}

.hdbd-title{

    font-size:clamp(2.3rem,5vw,4rem);

    font-weight:800;

    line-height:1.15;

    margin-bottom:1.8rem;

}

.hdbd-meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:1rem;

    color:#d0d8f0;

    margin-bottom:1.5rem;

}

.hdbd-author{

    display:flex;

    align-items:center;

    gap:.8rem;

}

.hdbd-author img{

    width:46px;

    height:46px;

    border-radius:50%;

    object-fit:cover;

}

.hdbd-share{

    display:flex;

    align-items:center;

    gap:.8rem;

    margin-bottom:2rem;

}

.hdbd-share a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.hdbd-share a:hover{

    background:#2d63ff;

}

.hdbd-featured{

    overflow:hidden;

    border-radius:22px;

    border:1px solid rgba(255,255,255,.08);

    margin-bottom:2rem;

}

.hdbd-featured img{

    width:100%;
    max-height: 600px;

    display:block;

}

.hdbd-introduction{

    color:#d7def5;

    line-height:1.9;

}

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

.hdbd-article-wrap{

    margin-top:2rem;

}

.hdbd-article-box{

    margin-bottom:3rem;

}

.hdbd-article-box h2{

    font-size:2rem;

    font-weight:700;

    margin-bottom:.8rem;

    color:#fff;

}

.hdbd-article-box p{

    color:#cfd7f3;

    line-height:1.9;

    font-size:1.03rem;

}

.hdbd-tip-card{

    display:flex;

    gap:1.4rem;

    padding:1.7rem;

    border-radius:18px;

    margin-top:1.6rem;

    border:1px solid rgba(255,255,255,.08);

}

.hdbd-tip-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.35rem;

    flex-shrink:0;

}

.hdbd-tip-card h5{

    color:#fff;

    margin-bottom:.45rem;

    font-size:1.1rem;

}

.hdbd-tip-card p{

    margin:0;

    color:#d9e0f5;

}

/* Green */

.hdbd-tip-success{

    background:rgba(9,83,55,.35);

    border-color:#19875455;

}

.hdbd-tip-success .hdbd-tip-icon{

    background:#198754;

    color:#fff;

}

/* Blue */

.hdbd-tip-primary{

    background:rgba(23,78,205,.18);

    border-color:#2d63ff55;

}

.hdbd-tip-primary .hdbd-tip-icon{

    background:#2d63ff;

    color:#fff;

}

/* Orange */

.hdbd-tip-warning{

    background:rgba(180,120,0,.18);

    border-color:#d79c0055;

}

.hdbd-tip-warning .hdbd-tip-icon{

    background:#d79c00;

    color:#fff;

}

/* Cyan */

.hdbd-tip-info{

    background:rgba(0,137,201,.16);

    border-color:#00b3ff55;

}

.hdbd-tip-info .hdbd-tip-icon{

    background:#00b3ff;

    color:#fff;

}

/* Red */

.hdbd-tip-danger{

    background:rgba(167,32,32,.18);

    border-color:#ff4d4d55;

}

.hdbd-tip-danger .hdbd-tip-icon{

    background:#ff4d4d;

    color:#fff;

}

/* Read More */

.hdbd-readmore-wrap{

    text-align:center;

    margin:4rem 0;

}

.hdbd-readmore-btn{

    display:inline-flex;

    align-items:center;

    gap:.8rem;

    padding:1rem 2rem;

    border:1px solid #2d63ff;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    transition:.35s;

    font-weight:600;

}

.hdbd-readmore-btn:hover{

    background:#2d63ff;

    color:#fff;

    transform:translateY(-3px);

}

@media(max-width:768px){

    .hdbd-tip-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

}



/*=====================================
        RELATED POSTS
======================================*/

.hdbd-related-posts{

    margin-top:4rem;

}

.hdbd-related-title{

    margin-bottom:2rem;

}

.hdbd-related-title h2{

    color:#fff;

    font-size:2rem;

    font-weight:700;

}

.hdbd-related-card{

    background:#0f1628;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

    height:100%;

}

.hdbd-related-card:hover{

    transform:translateY(-8px);

    border-color:#2d63ff;

}

.hdbd-related-img{

    overflow:hidden;

}

.hdbd-related-img img{

    width:100%;

    height:200px;

    object-fit:cover;

    transition:.5s;

}

.hdbd-related-card:hover img{

    transform:scale(1.08);

}

.hdbd-related-content{

    padding:1.4rem;

}

.hdbd-related-content h5{

    color:#fff;

    font-size:1.15rem;

    line-height:1.5;

    margin-bottom:.75rem;

}

.hdbd-related-content span{

    color:#98a7cf;

    display:block;

    margin-bottom:1rem;

    font-size:.9rem;

}

.hdbd-related-content a{

    color:#3c82ff;

    text-decoration:none;

    font-weight:600;

    display:inline-flex;

    gap:.5rem;

    align-items:center;

}

.hdbd-related-content a:hover{

    color:#fff;

}

@media(max-width:991px){

    .hdbd-related-posts{

        margin-top:3rem;

    }

}

@media(max-width:576px){

    .hdbd-post-item{

        align-items:flex-start;

    }

}

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

@media (max-width:1200px){

    .hdbd-feature-image img{

        height:420px;

    }

}

@media (max-width:991px){

    /* Sidebar moves below article */

    .hdbd-sidebar{

        margin-top:3rem;

    }

    .hdbd-main-content{

        margin-bottom:2rem;

    }

    .hdbd-feature-image img{

        height:360px;

    }

    .hdbd-related-title h2{

        font-size:1.8rem;

    }

}

@media (max-width:768px){

    .hdbd-breadcrumb{

        flex-wrap:wrap;

        gap:.6rem;

    }

    .hdbd-blog-title{

        font-size:2.2rem;

        line-height:1.25;

    }

    .hdbd-meta-bar{

        flex-direction:column;

        align-items:flex-start;

        gap:1rem;

    }

    .hdbd-share-links{

        justify-content:flex-start;

    }

    .hdbd-feature-image img{

        height:300px;

    }

    .hdbd-article-box h2{

        font-size:1.7rem;

    }

    .hdbd-related-posts{

        margin-top:3rem;

    }

}

@media (max-width:576px){

    .hdbd-blog-title{

        font-size:1.9rem;

    }

    .hdbd-feature-image img{

        height:240px;

    }

    .hdbd-post-item{

        flex-direction:column;

        align-items:flex-start;

    }

    .hdbd-post-item img{

        width:100%;

        height:180px;

    }

    .hdbd-related-img img{

        height:190px;

    }

    .hdbd-tip-card{

        padding:1.3rem;

    }

    .hdbd-readmore-btn{

        width:100%;

        justify-content:center;

    }

}

@media (max-width:420px){

    .hdbd-blog-title{

        font-size:1.65rem;

    }

    .hdbd-feature-image img{

        height:210px;

    }

    .hdbd-article-box p{

        font-size:.96rem;

    }

    .hdbd-widget-heading h4{

        font-size:1.2rem;

    }

    .hdbd-related-content{

        padding:1.2rem;

    }

    .hdbd-related-content h5{

        font-size:1rem;

    }

}

/*==================================================
        MICROSOFT STORE SECTION
==================================================*/

.hdms-section{
    position:relative;
    padding:6rem 0;
    overflow:hidden;
    background:
    radial-gradient(circle at top right,#1b46ff22 0%,transparent 35%),
    radial-gradient(circle at bottom left,#0d6efd15 0%,transparent 40%),
    linear-gradient(180deg,#020716 0%,#071124 100%);
}

/*=========================
        Wrapper
=========================*/

.hdms-wrapper{
    position:relative;
    padding:4rem;
    border-radius:38px;
    overflow:hidden;
    background:
    linear-gradient(145deg,
    rgba(20,30,72,.82),
    rgba(6,10,28,.94));

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    box-shadow:
    0 40px 80px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.03);
}

/*=========================
        Blue Orbs
=========================*/

.hdms-blue-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
    z-index:0;
}

.hdms-orb-left{
    width:320px;
    height:320px;
    background:#2563ff;
    opacity:.18;
    left:-120px;
    bottom:-80px;
}

.hdms-orb-right{
    width:420px;
    height:420px;
    background:#3478ff;
    opacity:.25;
    right:-120px;
    top:-80px;
}

/*=========================
        Floating Lights
=========================*/

.hdms-floating-light{
    position:absolute;
    border-radius:50%;
    background:#3a76ff;
    filter:blur(55px);
    opacity:.35;
    animation:hdmsGlowMove 7s ease-in-out infinite;
}

.hdms-light-1{
    width:130px;
    height:130px;
    top:18%;
    right:22%;
}

.hdms-light-2{
    width:90px;
    height:90px;
    bottom:12%;
    left:42%;
    animation-delay:2s;
}

@keyframes hdmsGlowMove{

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

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

}

/*=========================
        Left Content
=========================*/

.hdms-left-panel{
    position:relative;
    z-index:2;
}

/*=========================
        Badge
=========================*/

.hdms-partner-badge{
    display:inline-flex;
    align-items:center;
    gap:.8rem;
    padding:.8rem 1.7rem;
    margin-bottom:2rem;

    border-radius:60px;

    background:
    linear-gradient(90deg,#5d59ff,#1d63ff);

    color:#fff;

    font-weight:600;

    letter-spacing:.05rem;

    font-size:.9rem;

    box-shadow:
    0 12px 28px rgba(37,99,255,.35);
}

.hdms-partner-badge i{
    font-size:1.15rem;
}

/*=========================
        Heading
=========================*/

.hdms-title{

    color:#fff;

    font-size:clamp(2.9rem,5vw,5rem);

    line-height:1.04;

    font-weight:800;

    margin-bottom:1.3rem;

    letter-spacing:-1px;

}

.hdms-title-highlight{

    display:block;

    background:
    linear-gradient(90deg,
    #27b8ff,
    #3286ff,
    #6549ff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*=========================
        Divider
=========================*/

.hdms-divider{

    display:block;

    width:70px;

    height:4px;

    border-radius:20px;

    background:
    linear-gradient(90deg,#38a6ff,#4a62ff);

    margin-bottom:2rem;

}

/*=========================
        Paragraph
=========================*/

.hdms-description{

    color:#cbd5e1;

    font-size:1.08rem;

    line-height:1.9;

    max-width:560px;

    margin-bottom:2.7rem;

}

.hdms-description strong{

color:#fff;

}

/*==================================================
        MICROSOFT STORE BUTTON
==================================================*/

.hdms-store-button{

display:flex;
align-items:center;
gap:1.25rem;

width:max-content;

padding:1.4rem 2rem;

border-radius:22px;

text-decoration:none;

background:
linear-gradient(145deg,
rgba(10,15,32,.95),
rgba(18,25,55,.92));

border:1px solid rgba(75,125,255,.45);

box-shadow:
0 18px 45px rgba(0,0,0,.35),
inset 0 0 0 1px rgba(255,255,255,.03);

transition:.35s ease;

margin-bottom:3.5rem;

}

.hdms-store-button:hover{

transform:translateY(-6px);

text-decoration:none;

border-color:#4b7dff;

box-shadow:
0 25px 60px rgba(37,99,255,.35);

}

.hdms-store-button img{

width:72px;

height:auto;

object-fit:contain;

}

.hdms-store-button small{

display:block;

font-size:1rem;

color:#d7deef;

margin-bottom:.15rem;

}

.hdms-store-button strong{

display:block;

font-size:2.2rem;

line-height:1;

font-weight:700;

color:#fff;

}

/*==================================================
        FEATURES
==================================================*/

.hdms-feature-row{

display:flex;

align-items:center;

justify-content:space-between;

gap:2rem;

margin-top:1rem;

}

.hdms-feature-item{

display:flex;

align-items:center;

gap:1rem;

flex:1;

padding-right:1.5rem;

position:relative;

}

.hdms-feature-item:not(:last-child)::after{

content:"";

position:absolute;

right:0;

top:50%;

transform:translateY(-50%);

width:1px;

height:70px;

background:rgba(255,255,255,.08);

}

.hdms-feature-icon{

width:72px;

height:72px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

color:#4b7dff;

background:
linear-gradient(145deg,
rgba(20,35,80,.95),
rgba(10,16,38,.98));

border:1px solid rgba(75,125,255,.25);

box-shadow:
0 10px 25px rgba(0,0,0,.35);

transition:.35s;

}

.hdms-feature-item:hover .hdms-feature-icon{

transform:translateY(-6px);

background:#2563ff;

color:#fff;

}

.hdms-feature-content h5{

margin:0;

font-size:1.45rem;

font-weight:700;

color:#fff;

}

.hdms-feature-content span{

display:block;

font-size:1rem;

margin-top:.2rem;

color:#d5dcef;

line-height:1.5;

}

/*==================================================
        RIGHT SIDE
==================================================*/

.hdms-right-panel{

position:relative;

display:flex;

align-items:center;

justify-content:center;

min-height:700px;

overflow:visible;

z-index:2;

}

.hdms-product-stage{

position:relative;

width:660px;

height:620px;

display:flex;

align-items:flex-end;

justify-content:center;

}

/*==================================================
        PLATFORM
==================================================*/

.hdms-platform{

position:absolute;
bottom: 0;

width:460px;

height:170px;

border-radius:50%;

background:
linear-gradient(180deg,
#303a56,
#111827);

box-shadow:

0 60px 70px rgba(0,0,0,.55),

inset 0 12px 18px rgba(255,255,255,.08),

inset 0 -12px 18px rgba(0,0,0,.45);

}

.hdms-platform-ring{

position:absolute;

left:50%;

transform:translateX(-50%);

top:22px;

width:92%;

height:18px;

border-radius:100px;

background:

linear-gradient(90deg,
#2196ff,
#5d6dff,
#2196ff);

filter:blur(.5px);

box-shadow:

0 0 25px #2563ff,

0 0 60px rgba(37,99,255,.55);

}

/*==================================================
        PRODUCT BOX
==================================================*/

.hdms-product-box{

position:absolute;

bottom:90px;

left:50%;

transform:translateX(-50%);

width:410px;

height:470px;

border-radius:8px;

background:

linear-gradient(180deg,
#141d39,
#070b18);

border:1px solid rgba(255,255,255,.08);

box-shadow:

0 55px 90px rgba(0,0,0,.65),

0 0 45px rgba(37,99,255,.20);

transition:.45s;

overflow:hidden;

}

.hdms-product-box:hover{

transform:translateX(-50%) translateY(-10px);

box-shadow:

0 70px 100px rgba(0,0,0,.7),

0 0 80px rgba(37,99,255,.45);

}

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

.hdms-product-box::before{

content:"";

position:absolute;

left:-42px;

top:28px;

width:42px;

height:410px;

background:

linear-gradient(180deg,
#11182f,
#060914);

transform:skewY(-42deg);

border-left:1px solid rgba(255,255,255,.05);

}

.hdms-side-text{

position:absolute;

left:-110px;

top:190px;

width:330px;

text-align:center;

transform:rotate(-90deg);

font-size:1.5rem;

font-weight:700;

letter-spacing:3px;

color:#fff;

opacity:.95;

}

/*==================================================
        PRODUCT LOGO
==================================================*/

.hdms-product-logo{

padding:2rem 1.8rem .5rem;

text-align:center;

}

.hdms-product-logo img{

max-width:200px;

}

/*==================================================
        PRODUCT IMAGE
==================================================*/

.hdms-product-image{

padding:1rem 2rem 2rem;

display:flex;

align-items:center;

justify-content:center;

height:300px;

}

.hdms-product-image img{

max-width:100%;

height:60%;

object-fit:contain;

filter:drop-shadow(0 20px 30px rgba(37,99,255,.45));

transition:.45s;

}

.hdms-product-box:hover .hdms-product-image img{

transform:scale(1.05);

}

/*==================================================
        PRODUCT GLOW EFFECT
==================================================*/

.hdms-product-box::after{

content:"";

position:absolute;

left:50%;

bottom:-60px;

transform:translateX(-50%);

width:220px;

height:80px;

border-radius:50%;

background:rgba(37,99,255,.45);

filter:blur(40px);

z-index:-1;

}

/*==================================================
        PLATFORM GLOW
==================================================*/

.hdms-platform::before{

content:"";

position:absolute;

left:50%;

bottom:-18px;

transform:translateX(-50%);

width:85%;

height:45px;

border-radius:50%;

background:rgba(37,99,255,.35);

filter:blur(30px);

z-index:-2;

}

.hdms-platform::after{

content:"";

position:absolute;

left:50%;

top:42px;

transform:translateX(-50%);

width:72%;

height:10px;

border-radius:100px;

background:rgba(255,255,255,.12);

}

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

.hdms-product-box{

animation:hdmsFloat 5s ease-in-out infinite;

}

@keyframes hdmsFloat{

0%{

transform:translateX(-50%) translateY(0px);

}

50%{

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

}

100%{

transform:translateX(-50%) translateY(0px);

}

}

/*==================================================
        HOVER EFFECTS
==================================================*/

.hdms-feature-item{

transition:.35s ease;

}

.hdms-feature-item:hover{

transform:translateY(-5px);

}

.hdms-store-button img{

transition:.35s;

}

.hdms-store-button:hover img{

transform:rotate(-6deg) scale(1.08);

}

.hdms-product-logo img{

transition:.4s;

}

.hdms-product-box:hover .hdms-product-logo img{

transform:scale(1.08);

}

.hdms-title-highlight{

background-size:200% auto;

animation:hdmsGradient 6s linear infinite;

}

@keyframes hdmsGradient{

0%{

background-position:0% center;

}

100%{

background-position:200% center;

}

}

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

@media (max-width:1400px){

.hdms-wrapper{

padding:3.5rem;

}

.hdms-product-box{

width:285px;

height:435px;

}

.hdms-platform{

width:420px;

}

}

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

@media (max-width:1200px){

.hdms-title{

font-size:3.5rem;

}

.hdms-description{

font-size:1rem;

}

.hdms-feature-row{

gap:1rem;

}

.hdms-feature-icon{

width:62px;

height:62px;

font-size:1.5rem;

}

.hdms-feature-content h5{

font-size:1.2rem;

}

.hdms-platform{

width:360px;

height:150px;

}

.hdms-product-box{

width:250px;

height:390px;

bottom:115px;

}

.hdms-product-image{

height:240px;

}

.hdms-side-text{

font-size:1.5rem;

left:-128px;

}

}

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

@media (max-width:991px){

.hdms-wrapper{

padding:3rem 2rem;

}

.hdms-left-panel{

text-align:center;

}

.hdms-partner-badge{

margin-inline:auto;

}

.hdms-divider{

margin-inline:auto;

}

.hdms-description{

max-width:100%;

}

.hdms-store-button{

margin-inline:auto;

}

.hdms-feature-row{

justify-content:center;

flex-wrap:wrap;

}

.hdms-feature-item{

flex:0 0 calc(50% - 1rem);

}

.hdms-feature-item::after{

display:none;

}

.hdms-right-panel{

margin-top:3rem;

min-height:520px;

}

}

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

@media (max-width:767px){

.hdms-section{

padding:4rem 0;

}

.hdms-wrapper{

padding:2rem 1.5rem;

border-radius:28px;

}

.hdms-title{

font-size:2.8rem;

}

.hdms-store-button{

padding:1rem 1.4rem;

}

.hdms-store-button img{

width:55px;

}

.hdms-store-button strong{

font-size:1.6rem;

}

.hdms-feature-item{

flex:0 0 100%;

justify-content:flex-start;

}

.hdms-platform{

width:300px;

height:125px;

}

.hdms-product-box{

width:205px;

height:320px;

bottom:90px;

}

.hdms-product-image{

height:185px;

padding:1rem;

}

.hdms-product-logo{

padding:1.2rem;

}

.hdms-product-logo img{

max-width:130px;

}

.hdms-side-text{

display:none;

}

}

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

@media (max-width:576px){

.hdms-title{

font-size:2.25rem;

}

.hdms-description{

font-size:.95rem;

line-height:1.8;

}

.hdms-partner-badge{

padding:.7rem 1.2rem;

font-size:.8rem;

}

.hdms-feature-icon{

width:55px;

height:55px;

font-size:1.3rem;

}

.hdms-feature-content h5{

font-size:1rem;

}

.hdms-feature-content span{

font-size:.88rem;

}

.hdms-platform{

width:250px;

height:105px;

}

.hdms-product-box{

width:175px;

height:280px;

bottom:75px;

}

.hdms-product-image{

height:160px;

}

.hdms-blue-orb{

display:none;

}

.hdms-floating-light{

display:none;

}

}

/* buy now page */

/*==================================================
        BUY NOW COMPARISON SECTION
==================================================*/

.hdbuy-comparison-section{

position:relative;

padding:7rem 0;

overflow:hidden;

background:
radial-gradient(circle at top left,#2E63FF12 0%,transparent 35%),
radial-gradient(circle at bottom right,#6D5DFB12 0%,transparent 35%),
linear-gradient(180deg,#08101d 0%,#111827 100%);

}

.hdbuy-comparison-section::before{

content:"";

position:absolute;

left:-180px;

top:-180px;

width:420px;

height:420px;

border-radius:50%;

background:#2E63FF;

opacity:.10;

filter:blur(130px);

}

.hdbuy-comparison-section::after{

content:"";

position:absolute;

right:-180px;

bottom:-180px;

width:380px;

height:380px;

border-radius:50%;

background:#6D5DFB;

opacity:.12;

filter:blur(130px);

}

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

.hdbuy-section-heading{

position:relative;

max-width:850px;

margin:auto auto 4rem;

z-index:2;

}

.hdbuy-section-badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:.8rem 1.6rem;

border-radius:60px;

background:

linear-gradient(90deg,#2E63FF,#6D5DFB);

color:#fff;

font-size:.85rem;

font-weight:700;

letter-spacing:.08rem;

margin-bottom:1.5rem;

box-shadow:

0 15px 35px rgba(46,99,255,.30);

}

.hdbuy-section-heading h2{

font-size:clamp(3.1rem,5vw,2.8rem);

font-weight:800;

line-height:1.1;

color:#fff;

margin-bottom:1.25rem;

}

.hdbuy-section-heading h2 span{

display:block;

margin-top:.35rem;

background:

linear-gradient(90deg,#55B3FF,#7A61FF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hdbuy-section-heading p{

max-width:720px;

margin:auto;

font-size:1.05rem;

line-height:1.9;

color:#D7DEEF;

}

/*==================================================
        TABLE CONTAINER
==================================================*/

.hdbuy-table-container{

position:relative;

z-index:2;

overflow:hidden;

border-radius:30px;

background:

linear-gradient(180deg,

rgba(18,28,55,.96),

rgba(8,15,30,.98));

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

box-shadow:

0 35px 80px rgba(0,0,0,.45),

inset 0 1px 0 rgba(255,255,255,.05);

}

/*==================================================
        TABLE
==================================================*/

.hdbuy-feature-table{

width:100%;

border-collapse:collapse;

margin:0;

}

.hdbuy-feature-table th,

.hdbuy-feature-table td{

padding:1.1rem 1.1rem;

border-bottom:1px solid rgba(255,255,255,.07);

vertical-align:middle;

}

.hdbuy-feature-table tbody tr{

transition:.35s;

}

.hdbuy-feature-table tbody tr:hover{

background:rgba(255,255,255,.03);

}

/*==================================================
        TABLE HEADER
==================================================*/

.hdbuy-feature-table thead{

background:

linear-gradient(180deg,

rgba(255,255,255,.03),

rgba(255,255,255,.01));

}

.hdbuy-feature-heading{

width:60%;

font-size:1.4rem;

font-weight:700;

color:#fff;

text-align:left;

}

.hdbuy-free-heading,

.hdbuy-premium-heading{

width:22.5%;

text-align:center;

}

/*==================================================
        PLAN CARD
==================================================*/

.hdbuy-plan-card{

padding:1.5rem;

border-radius:22px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.06);

transition:.35s;

}

.hdbuy-plan-card h4{

margin:0;

font-size:1.4rem;

font-weight:700;

color:#fff;

}

.hdbuy-plan-card span{

display:block;

margin-top:.6rem;

font-size:.92rem;

color:#C5D0E8;

}

.hdbuy-plan-active{

background:

linear-gradient(135deg,#2E63FF,#6D5DFB);

border:none;

box-shadow:

0 20px 45px rgba(46,99,255,.35);

}

/*==================================================
        FEATURE ROWS
==================================================*/

.hdbuy-feature-info{

display:flex;

align-items:center;

gap:1.25rem;

}

.hdbuy-feature-icon{

width:50px;

height:50px;

min-width:50px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:

linear-gradient(135deg,#2E63FF,#6D5DFB);

color:#fff;

font-size:1.45rem;

box-shadow:

0 15px 30px rgba(46,99,255,.28);

transition:.35s;

}

.hdbuy-feature-table tbody tr:hover .hdbuy-feature-icon{

transform:rotate(-8deg) scale(1.08);

box-shadow:

0 18px 35px rgba(46,99,255,.45);

}

.hdbuy-feature-info h5{

margin:0;

font-size:1.2rem;

font-weight:700;

color:#ffffff;

}

.hdbuy-feature-info p{

margin:.45rem 0 0;

font-size:.84rem;

line-height:1.5;

color:#C7D1E6;

}

/*==================================================
        CENTER COLUMN
==================================================*/

.hdbuy-center{

text-align:center;

vertical-align:middle;

}

/*==================================================
        CHECK ICONS
==================================================*/

.hdbuy-check-free,

.hdbuy-check-pro{

width:40px;

height:40px;

display:inline-flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:1.1rem;

color:#fff;

}

.hdbuy-check-free{

background:

linear-gradient(135deg,#22C55E,#16A34A);

box-shadow:

0 15px 30px rgba(34,197,94,.30);

}

.hdbuy-check-pro{

background:

linear-gradient(135deg,#2E63FF,#6D5DFB);

box-shadow:

0 15px 30px rgba(46,99,255,.35);

}

.feature-not-available{
    width:40px;
    height:40px;
    border-radius:50%;
    display:inline-flex;

align-items:center;

justify-content:center;
    background:linear-gradient(135deg,#ff6b6b 0%, #ef4444 50%, #b91c1c 100%);
    color:#fff;
    font-size:1.2rem;
    box-shadow:
        0 10px 25px rgba(239,68,68,.35),
        inset 0 1px 1px rgba(255,255,255,.25);
}

.feature-not-available i{
    line-height:1;
}

/*==================================================
        TEXT CELLS
==================================================*/

.hdbuy-text-basic,

.hdbuy-text-premium{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

font-weight:700;

font-size:1.1rem;

}

.hdbuy-text-basic{

color:#ffffff;

}

.hdbuy-text-premium{

color:#69B8FF;

}

.hdbuy-text-basic small,

.hdbuy-text-premium small{

margin-top:.35rem;

font-size:.8rem;

font-weight:600;

letter-spacing:.05rem;

text-transform:uppercase;

color:#AFC0DD;

}

/*==================================================
        PREMIUM COLUMN
==================================================*/

.hdbuy-feature-table td:last-child{

background:

linear-gradient(180deg,

rgba(46,99,255,.05),

rgba(109,93,251,.08));

}

.hdbuy-feature-table th:last-child{

background:

linear-gradient(180deg,

rgba(46,99,255,.10),

rgba(109,93,251,.18));

}

/*==================================================
        TABLE DIVIDER
==================================================*/

.hdbuy-feature-table td,

.hdbuy-feature-table th{

position:relative;

}

.hdbuy-feature-table td:not(:last-child)::after,

.hdbuy-feature-table th:not(:last-child)::after{

content:"";

position:absolute;

right:0;

top:50%;

transform:translateY(-50%);

width:1px;

height:70%;

background:

rgba(255,255,255,.06);

}

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

.hdbuy-feature-table tbody tr{

transition:.35s ease;

}

.hdbuy-feature-table tbody tr:hover{

background:

rgba(46,99,255,.05);

}

.hdbuy-feature-table tbody tr:hover .hdbuy-check-pro{

transform:scale(1.08);

}

.hdbuy-feature-table tbody tr:hover .hdbuy-check-free{

transform:scale(1.08);

}

/*==================================================
        ROW TITLE
==================================================*/

.hdbuy-feature-heading{

padding-left:2rem;

}

.hdbuy-feature-heading h4{

margin:0;

font-size:1.5rem;

font-weight:800;

color:#ffffff;

}

/*==================================================
        LAST ROW
==================================================*/

.hdbuy-feature-table tbody tr:last-child td{

border-bottom:none;

}

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

.hdbuy-footer-note{

padding:1rem !important;

background:

rgba(255,255,255,.02);

}

.hdbuy-footer-info{

display:flex;

align-items:flex-start;

gap:1.2rem;

}

.hdbuy-footer-info i{

width:50px;

height:50px;

min-width:50px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:

linear-gradient(135deg,#2E63FF,#6D5DFB);

color:#fff;

font-size:1.4rem;

box-shadow:

0 15px 30px rgba(46,99,255,.25);

}

.hdbuy-footer-info h5{

margin:0 0 .6rem;

font-size:1.1rem;

font-weight:700;

color:#fff;

}

.hdbuy-footer-info p{

margin:0;

font-size:.84rem;

line-height:1.8;

color:#C6D2E8;

}

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

.hdbuy-download-btn,

.hdbuy-purchase-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:.75rem;

padding:1rem 2rem;

border-radius:60px;

font-size:1rem;

font-weight:700;

text-decoration:none;

transition:.35s;

white-space:nowrap;

}

.hdbuy-download-btn{

background:

rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.08);

color:#ffffff;

}

.hdbuy-download-btn:hover{

background:#ffffff;

color:#111827;

transform:translateY(-4px);

text-decoration:none;

}

.hdbuy-purchase-btn{

background:

linear-gradient(135deg,#2E63FF,#6D5DFB);

color:#fff;

box-shadow:

0 20px 40px rgba(46,99,255,.35);

}

.hdbuy-purchase-btn:hover{

color:#fff;

transform:translateY(-4px);

text-decoration:none;

box-shadow:

0 28px 50px rgba(46,99,255,.45);

}

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

.hdbuy-security-card{

height:100%;

padding:2rem 1.5rem;

text-align:center;

border-radius:24px;

background:

linear-gradient(180deg,

rgba(255,255,255,.05),

rgba(255,255,255,.03));

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.hdbuy-security-card:hover{

transform:translateY(-8px);

border-color:#2E63FF;

box-shadow:

0 20px 40px rgba(0,0,0,.30);

}

.hdbuy-security-card i{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 1.25rem;

border-radius:20px;

background:

linear-gradient(135deg,#2E63FF,#6D5DFB);

color:#fff;

font-size:1.7rem;

box-shadow:

0 15px 35px rgba(46,99,255,.30);

}

.hdbuy-security-card h5{

margin-bottom:.8rem;

font-size:1.2rem;

font-weight:700;

color:#fff;

}

.hdbuy-security-card p{

margin:0;

font-size:.92rem;

line-height:1.7;

color:#C8D2E8;

}

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

@media(max-width:991px){

.hdbuy-table-container{

overflow-x:auto;

border-radius:24px;

}

.hdbuy-feature-table{

min-width:980px;

}

.hdbuy-feature-table thead th{

position:sticky;

top:0;

z-index:5;

}

}

@media(max-width:768px){

.hdbuy-comparison-section{

padding:5rem 0;

}

.hdbuy-section-heading{

margin-bottom:3rem;

}

.hdbuy-section-heading h2{

font-size:2.3rem;

}

.hdbuy-section-heading p{

font-size:.95rem;

}

.hdbuy-security-card{

padding:1.6rem;

}

.hdbuy-download-btn,

.hdbuy-purchase-btn{

padding:.9rem 1.4rem;

font-size:.92rem;

}

}

@media(max-width:576px){

.hdbuy-comparison-section{

padding:4rem 0;

}

.hdbuy-section-heading h2{

font-size:2rem;

}

.hdbuy-section-badge{

font-size:.75rem;

padding:.65rem 1.2rem;

}

.hdbuy-footer-info{

flex-direction:column;

}

.hdbuy-footer-info i{

margin-bottom:.4rem;

}

.hdbuy-security-card{

padding:1.4rem;

border-radius:20px;

}

.hdbuy-security-card h5{

font-size:1.05rem;

}

.hdbuy-security-card p{

font-size:.88rem;

}

}

/*==================================================
        CUSTOM SCROLLBAR
==================================================*/

.hdbuy-table-container::-webkit-scrollbar{

height:8px;

}

.hdbuy-table-container::-webkit-scrollbar-track{

background:#1a2338;

border-radius:50px;

}

.hdbuy-table-container::-webkit-scrollbar-thumb{

background:

linear-gradient(90deg,#2E63FF,#6D5DFB);

border-radius:50px;

}

/*==================================================
        PRODUCT PACKAGE SECTION
==================================================*/

.hdbuy-package-section{

position:relative;

padding:7rem 0;

overflow:hidden;

background:
radial-gradient(circle at top left,#2E63FF15 0%,transparent 35%),
radial-gradient(circle at bottom right,#6D5DFB15 0%,transparent 35%),
linear-gradient(180deg,#08111f,#101a2d);

}

.hdbuy-package-section::before{

content:"";

position:absolute;

left:-220px;

top:-220px;

width:500px;

height:500px;

border-radius:50%;

background:#2E63FF;

opacity:.10;

filter:blur(130px);

}

.hdbuy-package-section::after{

content:"";

position:absolute;

right:-180px;

bottom:-180px;

width:420px;

height:420px;

border-radius:50%;

background:#6D5DFB;

opacity:.12;

filter:blur(130px);

}

/*==================================================
        WRAPPER
==================================================*/

.hdbuy-package-wrapper{

position:relative;

padding:4rem;

overflow:hidden;

border-radius:32px;

background:

linear-gradient(180deg,

rgba(17,27,46,.96),

rgba(7,13,25,.98));

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

box-shadow:

0 35px 80px rgba(0,0,0,.45),

inset 0 1px 0 rgba(255,255,255,.04);

z-index:2;

}

/*==================================================
        PRODUCT AREA
==================================================*/

.hdbuy-product-area{

position:relative;

display:flex;

align-items:center;

justify-content:center;

min-height:650px;

}

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

.hdbuy-product-glow{

position:absolute;

width:360px;

height:360px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(46,99,255,.45),

transparent 70%);

filter:blur(35px);

animation:hdbuyGlow 5s ease-in-out infinite;

}

@keyframes hdbuyGlow{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

}

/*==================================================
        FLOATING CIRCLES
==================================================*/

.hdbuy-circle{

position:absolute;

border-radius:50%;

background:

linear-gradient(135deg,#2E63FF,#6D5DFB);

opacity:.18;

animation:hdbuyCircle 6s linear infinite;

}

.hdbuy-circle-one{

width:20px;

height:20px;

left:15%;

top:18%;

}

.hdbuy-circle-two{

width:12px;

height:12px;

right:12%;

top:35%;

animation-delay:2s;

}

.hdbuy-circle-three{

width:26px;

height:26px;

bottom:18%;

left:20%;

animation-delay:4s;

}

@keyframes hdbuyCircle{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

/*==================================================
        PRODUCT BOX
==================================================*/

.hdbuy-product-card{

position:relative;

width:320px;

height:490px;

overflow:hidden;

border-radius:14px;

background:

linear-gradient(180deg,#182746,#08111e);

border:1px solid rgba(255,255,255,.08);

box-shadow:

0 40px 80px rgba(0,0,0,.55),

0 0 50px rgba(46,99,255,.18);

transition:.45s;

animation:hdbuyFloat 5s ease-in-out infinite;

}

.hdbuy-product-card:hover{

transform:translateY(-10px);

box-shadow:

0 55px 90px rgba(0,0,0,.6),

0 0 70px rgba(46,99,255,.35);

}

@keyframes hdbuyFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-14px);

}

}

/*==================================================
        PRODUCT SPINE
==================================================*/

.hdbuy-product-spine{

position:absolute;

left:-42px;

top:28px;

width:42px;

height:430px;

background:

linear-gradient(180deg,#0F1A33,#060A14);

transform:skewY(-42deg);

border-left:1px solid rgba(255,255,255,.08);

box-shadow:

inset -2px 0 5px rgba(0,0,0,.35);

}

.hdbuy-product-spine span{

position:absolute;

left:-145px;

top:185px;

width:330px;

text-align:center;

transform:rotate(-90deg);

font-size:1.7rem;

font-weight:700;

letter-spacing:3px;

color:#fff;

opacity:.92;

white-space:nowrap;

}

/*==================================================
        PRODUCT HEADER
==================================================*/

.hdbuy-product-header{

padding:2rem 1.5rem 1rem;

display:flex;

align-items:center;

justify-content:center;

}

.hdbuy-product-header img{

max-width:180px;

transition:.4s;

}

.hdbuy-product-card:hover .hdbuy-product-header img{

transform:scale(1.06);

}

/*==================================================
        PRODUCT IMAGE
==================================================*/

.hdbuy-product-image{

position:relative;

height:300px;

display:flex;

align-items:center;

justify-content:center;

padding:1rem 2rem 2rem;

}

.hdbuy-product-image img{

width:100%;

height:60%;

object-fit:contain;

filter:

drop-shadow(0 25px 35px rgba(46,99,255,.35));

transition:.45s;

}

.hdbuy-product-card:hover .hdbuy-product-image img{

transform:scale(1.06);

}

/*==================================================
        REFLECTION
==================================================*/

.hdbuy-product-reflection{

position:absolute;

left:50%;

bottom:-50px;

transform:translateX(-50%);

width:220px;

height:70px;

border-radius:50%;

background:

rgba(46,99,255,.45);

filter:blur(40px);

z-index:-1;

}

/*==================================================
        PRODUCT PLATFORM
==================================================*/

.hdbuy-product-platform{

position:absolute;

bottom:65px;

left:50%;

transform:translateX(-50%);

width:430px;

height:165px;

border-radius:50%;

background:

linear-gradient(180deg,#303A56,#101827);

box-shadow:

0 60px 70px rgba(0,0,0,.55),

inset 0 10px 18px rgba(255,255,255,.05),

inset 0 -12px 18px rgba(0,0,0,.45);

z-index:-2;

}

.hdbuy-platform-ring{

position:absolute;

left:50%;

top:22px;

transform:translateX(-50%);

width:92%;

height:18px;

border-radius:100px;

background:

linear-gradient(90deg,#2E63FF,#6D5DFB,#2E63FF);

box-shadow:

0 0 30px rgba(46,99,255,.55);

}

/*==================================================
        PLATFORM GLOW
==================================================*/

.hdbuy-product-platform::before{

content:"";

position:absolute;

left:50%;

bottom:-22px;

transform:translateX(-50%);

width:88%;

height:45px;

border-radius:50%;

background:

rgba(46,99,255,.35);

filter:blur(35px);

}

.hdbuy-product-platform::after{

content:"";

position:absolute;

left:50%;

top:42px;

transform:translateX(-50%);

width:72%;

height:10px;

border-radius:100px;

background:

rgba(255,255,255,.10);

}

/*==================================================
        CARD SHINE
==================================================*/

.hdbuy-product-card::before{

content:"";

position:absolute;

left:-80%;

top:0;

width:45%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.12),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.hdbuy-product-card:hover::before{

left:140%;

}

/*==================================================
        CARD BORDER
==================================================*/

.hdbuy-product-card::after{

content:"";

position:absolute;

inset:0;

border-radius:14px;

padding:1px;

background:

linear-gradient(

135deg,

rgba(255,255,255,.10),

transparent,

rgba(46,99,255,.18)

);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

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

.hdbuy-package-content{

position:relative;

z-index:2;

}

.hdbuy-package-badge{

display:inline-flex;

align-items:center;

padding:.75rem 1.6rem;

margin-bottom:1.5rem;

border-radius:50px;

background:

linear-gradient(90deg,#2E63FF,#6D5DFB);

color:#fff;

font-size:.82rem;

font-weight:700;

letter-spacing:.08rem;

box-shadow:

0 15px 35px rgba(46,99,255,.25);

}

.hdbuy-package-content h2{

font-size:clamp(1.5rem,3vw,2.3rem);

font-weight:800;

line-height:1.1;

color:#fff;

margin-bottom:1.25rem;

}

.hdbuy-package-content h2 span{

display:block;

margin-top:.4rem;

background:

linear-gradient(90deg,#4DB4FF,#7D5EFF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hdbuy-package-content>p{

font-size:1.05rem;

line-height:1.9;

color:#D7DEEF;

margin-bottom:2rem;

max-width:700px;

}

/*==================================================
        PRICE CARD
==================================================*/

.hdbuy-price-wrapper{

margin-bottom:2rem;

}

.hdbuy-price-card{

display:flex;

justify-content:space-between;

align-items:center;

padding:1.6rem 2rem;

border-radius:22px;

background:

linear-gradient(135deg,

rgba(46,99,255,.12),

rgba(109,93,251,.12));

border:1px solid rgba(255,255,255,.08);

}

.hdbuy-old-price{

display:block;

font-size:1.2rem;

color:#94A3B8;

text-decoration:line-through;

margin-bottom:.35rem;

}

.hdbuy-current-price{

font-size:3rem;

font-weight:800;

color:#fff;

margin:0;

}

.hdbuy-discount{

display:inline-block;

padding:.55rem 1rem;

border-radius:50px;

background:#22C55E;

color:#fff;

font-size:.82rem;

font-weight:700;

margin-bottom:.45rem;

}

.hdbuy-price-right small{

display:block;

color:#CBD5E1;

font-size:.9rem;

}

/*==================================================
        LICENSE INFO
==================================================*/

.hdbuy-license-box{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:1rem;

margin-bottom:2rem;

}

.hdbuy-license-item{

display:flex;

align-items:center;

gap:1rem;

padding:1rem 1.2rem;

border-radius:18px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.06);

}

.hdbuy-license-item i{

width:52px;

height:52px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

background:linear-gradient(135deg,#2E63FF,#6D5DFB);

color:#fff;

font-size:1.3rem;

}

.hdbuy-license-item h6{

margin:0;

font-size:1rem;

font-weight:700;

color:#fff;

}

.hdbuy-license-item span{

display:block;

margin-top:.3rem;

font-size:.9rem;

color:#CBD5E1;

}

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

.hdbuy-feature-card{

display:flex;

align-items:center;

gap:.9rem;

padding:1rem 1.2rem;

height:100%;

border-radius:18px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.06);

transition:.35s;

}

.hdbuy-feature-card:hover{

transform:translateY(-5px);

border-color:#2E63FF;

background:rgba(46,99,255,.08);

}

.hdbuy-feature-card i{

color:#4DB4FF;

font-size:1.25rem;

}

.hdbuy-feature-card span{

font-size:.95rem;

font-weight:600;

color:#fff;

}

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

.hdbuy-action-wrapper{

display:flex;

gap:1rem;

margin:2.5rem 0;

flex-wrap:wrap;

}

.hdbuy-buy-btn,

.hdbuy-trial-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:.75rem;

padding:1rem 2rem;

border-radius:60px;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.hdbuy-buy-btn{

background:linear-gradient(135deg,#2E63FF,#6D5DFB);

color:#fff;

box-shadow:0 18px 40px rgba(46,99,255,.35);

}

.hdbuy-buy-btn:hover{

color:#fff;

transform:translateY(-5px);

}

.hdbuy-trial-btn{

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.08);

color:#fff;

}

.hdbuy-trial-btn:hover{

background:#fff;

color:#111827;

}

/*==================================================
        PAYMENT
==================================================*/

.hdbuy-payment-wrapper{

padding:1.6rem;

margin-bottom:2rem;

border-radius:20px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.06);

}

.hdbuy-payment-wrapper h6{

margin-bottom:1rem;

color:#fff;

font-weight:700;

}

.hdbuy-payment-icons{

display:flex;

gap:1rem;

flex-wrap:wrap;

align-items:center;

}

.hdbuy-payment-icons img{

height:32px;

filter:brightness(0) invert(1);

opacity:.9;

transition:.35s;

}

.hdbuy-payment-icons img:hover{

transform:translateY(-3px);

opacity:1;

}

/*==================================================
        TRUST & CERTIFIED
==================================================*/

.hdbuy-trust-card{

height:100%;

padding:1.5rem;

text-align:center;

border-radius:18px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.06);

transition:.35s;

}

.hdbuy-trust-card:hover{

transform:translateY(-5px);

border-color:#2E63FF;

}

.hdbuy-trust-card i{

font-size:2rem;

color:#4DB4FF;

margin-bottom:.8rem;

}

.hdbuy-trust-card h6{

color:#fff;

font-weight:700;

margin-bottom:.5rem;

}

.hdbuy-trust-card p{

font-size:.88rem;

color:#CBD5E1;

margin:0;

}

.hdbuy-certified-box{

display:flex;

gap:1rem;

align-items:center;

margin-top:2rem;

padding:1.5rem;

border-radius:20px;

background:

linear-gradient(135deg,

rgba(46,99,255,.12),

rgba(109,93,251,.10));

border:1px solid rgba(255,255,255,.08);

}

.hdbuy-certified-icon{

width:65px;

height:65px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:linear-gradient(135deg,#2E63FF,#6D5DFB);

color:#fff;

font-size:1.8rem;

}

.hdbuy-certified-box h5{

margin:0 0 .4rem;

color:#fff;

font-weight:700;

}

.hdbuy-certified-box p{

margin:0;

font-size:.9rem;

line-height:1.7;

color:#CBD5E1;

}

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

@media(max-width:991px){

.hdbuy-package-wrapper{

padding:2.5rem;

}

.hdbuy-package-content{

text-align:center;

}

.hdbuy-license-box{

grid-template-columns:1fr;

}

.hdbuy-price-card{

flex-direction:column;

gap:1rem;

text-align:center;

}

.hdbuy-action-wrapper{

justify-content:center;

}

.hdbuy-certified-box{

flex-direction:column;

text-align:center;

}

}

@media(max-width:576px){

.hdbuy-package-wrapper{

padding:1.5rem;

border-radius:24px;

}

.hdbuy-package-content h2{

font-size:2rem;

}

.hdbuy-current-price{

font-size:2.3rem;

}

.hdbuy-buy-btn,

.hdbuy-trial-btn{

width:100%;

}

.hdbuy-payment-icons{

justify-content:center;

}

}