@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none!important;
    text-decoration: none!important;
    border: none!important;
    outline: none!important;
    transition: all 0.5s ease-in-out;
}
:root {
    --manrope: "Manrope", sans-serif;
    --mona-sans: "Mona Sans", sans-serif;
    --inter: "Inter", sans-serif;
    --bg-color: #0A0A18;
    --white: #FFFFFF;
    --dark: #000;
    --black: #333;
    --gray: #777;
    --main: #006FFF;
    /*  Red */
    --red: #fa0f0f;
    --red-light: #fa0f0f25;
    --light: #f5f5f5e2;
    --lighter: #f5f5f59a;
    --sub-main-2: #FFBB00;
    --sub-main-3: #58FF6C;
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    /* background: var(--main); */
    background: linear-gradient(to top, var(--main), #0099FF);
    border: 1px solid var(--main)!important;
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important;
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
}
::-webkit-scrollbar-thumb:hover{
    background: #0099FF;
}
#preloader{
    position: fixed;
    inset: 0;
    background: #0A0A18;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;

    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease, visibility .5s ease;
}

#preloader.hide{
    opacity: 0;
    visibility: hidden;
}

.loader-logo{
    animation: beat 1.5s ease-in-out infinite;
}

.loader-logo svg{
    width: 70px;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(1,0,215,.4));
}

.loading-text{
    margin-top: 20px;
    color: #fff;
    font-family: sans-serif;
    font-size: 13px;
    letter-spacing: 6px;
    opacity: .7;
    animation: fadeText 1.5s ease-in-out infinite;
}

@keyframes beat{
    0%,100%{
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(1,0,215,.2));
    }
    50%{
        transform: scale(1.12);
        filter: drop-shadow(0 0 30px rgba(1,0,215,.8));
    }
}

@keyframes fadeText{
    0%,100%{
        opacity:.3;
    }
    50%{
        opacity:1;
    }
}
section {
    padding: 70px 10px;
}
.heading {
    margin: 20px auto;
    text-align: center;
}
.heading h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 45px;
    line-height: 101%;
    letter-spacing: -6%;
    text-align: center;
    color: var(--white);
    padding: 10px 0;
}
.heading p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -2%;
    text-align: center;
    color: var(--light);
    padding: 10px 0;
}
.heading .heading-btn {
    margin: 30px auto;
}
.heading .heading-btn a {
    display: inline-block;
    padding: 8px 15px 10px;
    background: linear-gradient(to top, #E0F1FF , #FFFFFF);
    border: 1px solid #E0F1FF!important;
    border-image-source: linear-gradient(35.39deg, #E0F1FF 19.67%, rgba(255, 255, 255, 0) 52.07%, #E0F1FF 80.33%)!important;
    border-radius: 30px;
    color: var(--black);
    font-family: var(--manrope);
    font-size: 15px;
}
.heading .heading-btn a:hover {
    transform: scale(1.05);
}
header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 99;
}
header nav {
    width: 100%;
    height: auto;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-color);
}
header nav .logo img {
    width: 30px;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
header nav ul {
    margin: 0;
}
header nav ul li {
    position: relative;
    display: inline-block;
    padding: 8px 15px;
    z-index: 1;
}
header nav ul li::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    width: 0%;
    height: 100%;
    border-bottom: 1px solid var(--sub-main-2)!important;
    transition: 0.5s ease-in-out;
    z-index: -1;
}
header nav ul li:hover::before {
    width: 30%;
}
header nav ul li .menu-dropdown {
    position: absolute;
    top: 100%;
    left: 10%;
    width: min(210px, 90vw);
    /* max-width: 100%; */
    background: var(--bg-color);
    box-shadow: 0 0 5px var(--light);
    /* margin: 5px auto; */
    padding: 5px;
    z-index: 10;
    /* animation */
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transition:
        clip-path 0.4s ease,
        opacity 0.3s ease;

    pointer-events: none;
}
header nav ul li:hover .menu-dropdown{
    clip-path: inset(0 0 0 0);
    opacity: 1;
    pointer-events: auto;
}
header nav ul li .menu-dropdown .dropdown-list {
    margin: 5px;
    width: 100%;
    padding: 5px;
}
header nav ul li .menu-dropdown .dropdown-list a {
    font-size: 16px;
    font-family: var(--manrope);
}
header nav ul li .menu-dropdown .dropdown-list:hover a {
    color: var(--sub-main-2);
}
header nav ul li a {
    display: inline-flex;
    font-size: 15px;
    font-family: var(--manrope);
    color: var(--light);
    cursor: pointer;
}
header nav ul li a svg {
    width: 20px;
    height: 20px;
    margin-top: 2px;
}
header nav ul li:hover a svg{
    transform: rotate(180deg);
}
header nav .d-btn .btn {
    display: inline-block;
    padding: 8px 15px 10px;
    /* background: linear-gradient(to top, var(--main), #0099FF); */
    background: linear-gradient(to top, #001eff, var(--main));
    /* border: 1px solid var(--main)!important;
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; */
    /* box-shadow: 0px 28px 21.9px 0px #000000BD inset !important; */
    border-radius: 30px;
    color: var(--white);
    font-family: var(--manrope);
    font-size: 15px;
    transition: 0.8s ease-in-out;
}
header nav .d-btn .btn:hover {
    background: linear-gradient(to top, var(--main), #0099FF);
    border: 1px solid var(--main)!important;
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
}
header nav .menu-btn {
    display: none;
}
header nav .menu-btn svg {
    width: 25px;
    height: 25px;
    fill: var(--white);
    cursor: pointer;
}
/* =========================
RESPONSIVE MENU
========================= */
header .resp-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}
/* ACTIVE MENU */
header .resp-menu.active {
    opacity: 1;
    visibility: visible;
}
/* SIDEBAR */
header .resp-menu .resp-menu-box {
    position: absolute;
    top: 0;
    right: -100%;
    width: min(370px, 100%);
    height: 100vh;
    background: var(--bg-color);
    padding: 20px;
    overflow-y: auto;
    transition: right 0.5s ease;
}
/* ACTIVE SIDEBAR */
header .resp-menu.active .resp-menu-box {
    right: 0;
}
/* CLOSE BUTTON */
header .resp-menu .resp-menu-box .close-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
}
header .resp-menu .resp-menu-box .close-btn svg {
    width: 30px;
    height: 30px;
    fill: var(--white);
    cursor: pointer;
}
/* MENU CONTENT */
header .resp-menu .resp-menu-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* MENU LIST */
header .resp-menu .resp-menu-content .menu-list {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
/* LINKS */
header .resp-menu .resp-menu-content .menu-list a {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
    font-family: var(--manrope);
    color: var(--light);
}
/* ACTIVE LINK */
header .resp-menu .resp-menu-content .menu-list a.active {
    color: var(--sub-main-2);
}
/* DROPDOWN BUTTON */
header .resp-menu .dropdown-parent .resp-dropdown-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
/* DROPDOWN ICON */
header .resp-menu .dropdown-parent .resp-dropdown-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--white);
    transition: transform 0.4s ease;
}
/* ROTATE ICON */
header .resp-menu .dropdown-parent.active .resp-dropdown-btn svg {
    transform: rotate(180deg);
}
/* DROPDOWN */
header .resp-menu .dropdown-parent .resp-dropdown {
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-left: 12px;
    transition:
        max-height 0.5s ease,
        padding 0.5s ease;
}
/* OPEN DROPDOWN */
header .resp-menu .dropdown-parent.active .resp-dropdown {
    max-height: 300px;
    padding-bottom: 10px;
}
/* DROPDOWN LINKS */
header .resp-menu .dropdown-parent .resp-dropdown a {
    padding: 12px;
    font-size: 14px;
    color: var(--lighter);
    border-radius: 10px;
}
/* DROPDOWN HOVER */
header .resp-menu .dropdown-parent .resp-dropdown a:hover {
    background: rgba(255,255,255,0.05);
    color: var(--sub-main-2);
}
/* MOBILE BUTTON */
header .resp-menu .mobile-btn {
    margin-top: 15px;
    border-bottom: none !important;
}
/* MOBILE BUTTON LINK */
header .resp-menu .mobile-btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    border-radius: 40px;
    background: linear-gradient(to top, var(--main), #0099FF);
    color: var(--white) !important;
    font-weight: 600;
    text-align: center;
    transition: 0.8s ease-in-out;
}
header .resp-menu .mobile-btn a:hover {
    background: linear-gradient(to top, var(--main), #0099FF);
    border: 1px solid var(--main)!important;
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
}
header nav ul li a.active {
    color: var(--sub-main-2);
    position: relative;
}

/* header nav ul li a.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: var(--sub-main-2);
} */

#home {
    position: relative;
    width: 100%;
    height: auto;
    padding: 70px 20px;
    overflow: hidden;
    background: var(--bg-color);
    isolation: isolate;
}

.hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-video-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../assets/img/bg/bg6.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

#home .container-fluid {
    position: relative;
    z-index: 1;
}
/* Background wrapper */
.bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Each background */
.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* Active background */
.bg.active {
    opacity: 1;
}

/* Dark overlay */
.bg::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: rgba(0,0,0,0.4); */
    /* background: linear-gradient(to bottom, #0040FF26, #000819); */
    background: url('../assets/img/bg/bg6.png');
    background-size: cover;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
}
#home.other .bg::after {
    background: linear-gradient(to bottom, #0040FF26, #0008197d);
    /* background: none; */
    /* background: rgba(0,0,0,0.4); */
}
#home .container-fluid .hero-content {
    width: 900px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
}
#home .container-fluid .hero-content .top {
    display: inline-block;
    padding: 8px 15px;
    background-color: #99999942;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    font-size: 13px;
    color: var(--white);
    font-weight: 500;
    font-family: var(--manrope);
    margin: 10px auto;
    border: 1px solid var(--lighter)!important;
}
#home .container-fluid .hero-content .b-h {
    color: var(--white);
    font-family: var(--mona-sans);
    font-weight: 500;
    padding: 10px 0 10px;
    font-style: Medium;
    font-size: 70px;
    line-height: 101%;
    letter-spacing: -6%;
    text-align: center;

}
#home .container-fluid .hero-content .b-t {
    font-size: 18px;
    font-style: Regular;
    font-family: var(--mona-sans);
    font-weight: 400;
    color: var(--white);
    padding: 0 0 10px;
    line-height: 100%;
    letter-spacing: -2%;
    text-align: center;

}
#home .container-fluid .hero-content .b-t a {
    color: var(--sub-main-2);
    text-decoration: underline!important;
}
#home .container-fluid .hero-content .home-btn {
    margin: 10px;
}
#home .container-fluid .hero-content .home-btn a {
    display: inline-block;
    padding: 8px 15px 10px;
    /* background: linear-gradient(to top, var(--main), #0099FF); */
    background: linear-gradient(to top, #001eff, var(--main))!important;
    border: 1px solid var(--main)!important;
    /* border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important;
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important; */
    border-radius: 30px;
    color: var(--white);
    font-family: var(--manrope);
    font-size: 15px;
    transition: 0.8s ease-in-out;
}
#home .container-fluid .hero-content .home-btn a:hover {
    background: linear-gradient(to top, var(--main), #0099FF);
    border: 1px solid var(--main)!important;
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
}
#home .container-fluid .hero-content .home-btn a:active {
    transform: scale(1.07);
}
#home .container-fluid .hero-content .home-btn a:hover {
    background: transparent;
}
#trusted {
    width: 100%;
    height: auto;
    background: var(--white);
    text-align: center;
}
#trusted .trusted-box {
    width: 800px;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    padding: 10px;
}
#trusted .trusted-box .head {
    margin: 20px auto;
}
#trusted .trusted-box .head h2 {
    font-size: 50px;
    font-weight: 600;
    font-family: var(--mona-sans);
    color: var(--dark);
    font-style: SemiBold;
    line-height: 101%;
    letter-spacing: -6%;
    text-align: center;
}
/* Wrapper */
#trusted .trusted-box .brand-logo-wrapper {
    overflow: hidden;
    position: relative;
    margin: 20px auto;
}

/* Track */
#trusted .trusted-box .brand-logo-track {
    display: flex;
    width: max-content;
    animation: scroll 20s linear infinite;
}

/* Logos */
#trusted .trusted-box .brand-logo-track img {
    width: 140px;
    max-width: 100%;
    margin: 0 30px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: 0.3s ease;
    cursor: pointer;
}

/* Hover effect */
#trusted .trusted-box .brand-logo-track img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Scroll animation */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Fade edges (premium look) */
#trusted .trusted-box .brand-logo-wrapper::before,
#trusted .trusted-box .brand-logo-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: 2;
}

#trusted .trusted-box .brand-logo-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
}

#trusted .trusted-box .brand-logo-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
}

/* Pause on hover */
#trusted .trusted-box .brand-logo-wrapper:hover .brand-logo-track {
    animation-play-state: paused;
}
#trusted .trusted-box .content {
    margin: 25px auto;
}
#trusted .trusted-box .content p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: -2%;
    text-align: center;
}
#h-sections {
    width: 100%;
    min-height: auto;
    background-image: url('../assets/img/bg/bg3.png');
    background-color: var(--bg-color); /* fallback */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
#whatisgruvly {
    width: 100%;
    height: auto;
}
#whatisgruvly .img-cont img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
#whatisgruvly .gruvlyinfo .gruvly-head {
    margin: 20px 0;
}
#whatisgruvly .gruvlyinfo .gruvly-head h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 60px;
    line-height: 101%;
    letter-spacing: -4%;
    color: var(--white);
}
#whatisgruvly .gruvlyinfo .gruvly-cont {
    margin: 20px 0;
}
#whatisgruvly .gruvlyinfo .gruvly-cont p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    /* line-height: 100%; */
    letter-spacing: 0%;
    color: var(--white);
}
#whatisgruvly .gruvlyinfo .gruvly-btn a {
    display: inline-block;
    padding: 8px 15px 10px;
    /* background: linear-gradient(to top, var(--sub-main-2), #FFCC00); */
    background: linear-gradient( #fd9c00, #ffcc00);
    border: 1px solid #FFBB0066!important;
    /* border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; */
    /* box-shadow: 0px 28px 21.9px 0px #000000BD inset !important; */
    border-radius: 30px;
    color: var(--white);
    font-family: var(--manrope);
    font-size: 15px;
    transition: 0.8s ease-in-out;
}
#whatisgruvly .gruvlyinfo .gruvly-btn a:hover {
    background: linear-gradient(to top, var(--sub-main-2), #FFCC00);
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
}
#whatisgruvly.abt .gruvlyinfo .gruvly-btn a {
    background: radial-gradient(92.74% 116.94% at 92.74% 100%, #FFFFFF 0%, #00A2FF 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border: 1px solid!important;
    border-image-source: linear-gradient(35.39deg, #E0F1FF 19.67%, rgba(255, 255, 255, 0) 52.07%, #E0F1FF 80.33%) 1 !important;
    color: var(--dark);
}
#whatisgruvly.abt .gruvlyinfo .gruvly-btn a:hover {
    color: var(--white);
}
#creator-focused {
    width: 100%;
    height: auto;
}
#creator-focused .cf-box {
    width: 100%;
    min-height: 300px;
    padding: 10px;
    background: var(--white);
    border-radius: 8px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#creator-focused .cf-box.left {
    transform: rotate(-8deg);
}
#creator-focused .cf-box.right {
    transform: rotate(8deg);
}
#creator-focused .cf-box.active,
#creator-focused .cf-box:hover {
    background: #0100FF;
}
#creator-focused .cf-box .cf-head {
    margin: 10px 0;
}
#creator-focused .cf-box  .cf-head h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 30px;
    line-height: 101%;
    letter-spacing: -4%;
    color: var(--dark);
}
#creator-focused .cf-box.active .cf-head h2,
#creator-focused .cf-box:hover .cf-head h2 {
    color: var(--white);
}
#creator-focused .cf-box .cf-cont {
    width: 100%;
    height: auto;
    padding: 10px;
    margin: auto 0 5px;
}
#creator-focused .cf-box  .cf-cont p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 140%;
    letter-spacing: -2%;
    color: var(--black);
}
#creator-focused .cf-box.active .cf-cont p,
#creator-focused .cf-box:hover .cf-cont p {
    color: var(--light);
}
#creator-focused .cf-box  .cf-btn a {
    display: inline-flex;
    justify-content: space-between;
    padding: 10px 15px;
    width: 100%;
    height: auto;
    text-transform: capitalize;
    background: #3074A142;
    color: var(--black);
    border-radius: 8px;
}
#creator-focused .cf-box.active .cf-btn a,
#creator-focused .cf-box:hover .cf-btn a {
    background-image: #3074A142;
    color: var(--light);
}
#creator-focused .cf-box  .cf-btn a svg {
    width: 30px;
    height: 30px;
    fill: var(--black);
}
#creator-focused .cf-box.active .cf-btn a svg,
#creator-focused .cf-box:hover .cf-btn a svg {
    fill: var(--light);
}
#vism {
    width: 100%;
    height: auto;
}
#vism .vism-box {
    width: 100%;
    height: 200px;
    padding: 10px;
    border-radius: 8px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#vism .vism-box .vism-head {
    margin: 10px 0;
}
#vism .vism-box .vism-head h2 {
    font-family: var(--mona-sans);
    font-weight: 600;
    font-style: SemiBold;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--white);
}
#vism .vism-box .vism-cont {
    margin-top: auto;
}
#vism .vism-box .vism-cont p {
    font-family: var(--mona-sans);
    font-weight: 600;
    font-style: SemiBold;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(249, 249, 249, 0.38) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
#vism .vism-btn {
    margin: 20px 0;
}
#vism .vism-btn a {
    display: inline-block;
    padding: 8px 15px 10px;
    border-radius: 30px;
    color: var(--dark);
    font-family: var(--manrope);
    font-size: 15px;
    transition: 0.8s ease-in-out;
    background: radial-gradient(92.74% 116.94% at 92.74% 100%, #FFFFFF 0%, #00A2FF 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border: 1px solid!important;
    border-image-source: linear-gradient(35.39deg, #E0F1FF 19.67%, rgba(255, 255, 255, 0) 52.07%, #E0F1FF 80.33%) 1 !important;


}
#vism .vism-btn a:hover {
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    color: var(--white);
}
#vism .vism-btn a:active {
    transform: scale(1.07);
}
#h-why-gruvly {
    width: 100%;
    height: auto;
    background: linear-gradient(to right, #ffffffdd, #ffffffcc),url('../assets/img/bg/bg4.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#h-why-gruvly .img-cont img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
#h-why-gruvly .heading h2 {
    color: var(--dark);
}
#h-why-gruvly .h-why-cont {
    padding: 20px 0;
    margin: 20px auto;
}
#h-why-gruvly .h-why-cont .why-box {
    margin: 20px auto;
}
#h-why-gruvly .h-why-cont .why-box h3 {
    font-family: var(--mona-sans);
    font-weight: 700;
    font-style: Bold;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -2%;
}
#h-why-gruvly .h-why-cont .why-box p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    /* line-height: 100%; */
    letter-spacing: -2%;
}
#h-why-gruvly .h-why-btn a {
    display: inline-block;
    padding: 8px 15px 10px;
    /* background: linear-gradient(to top, var(--main), #0099FF); */
    background: linear-gradient(to top, #0100ff, #010099);
    border: 1px solid var(--main)!important;
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important;
    /* box-shadow: 0px 28px 21.9px 0px #000000BD inset !important; */
    border-radius: 30px;
    color: var(--white);
    font-family: var(--manrope);
    font-size: 15px;
    transition: 0.8s ease-in-out;
}
#h-why-gruvly .h-why-btn a:hover {
    background: linear-gradient(to top, var(--main), #0099FF);
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
}
#h-plan {
    width: 100%;
    height: auto;
    background: #00001B;
}
#h-plan .plan-box {
    position: relative;
    width: 100%;
    height:  100%;
    /* min-height: 400px; */
    background: #D9D9D90F;
    border: 1px solid #FFFFFF52!important;
    box-shadow: 0px 4px 4px 0px #00000040 inset;
    border-radius: 8px;
    margin: 20px auto;
    padding: 20px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#h-plan .row > div {
    display: flex;
}

#h-plan .row > div .plan-box {
    width: 100%;
}
#h-plan .plan-box .tier {
    position: absolute;
    top: 3%;
    right: 5%;
    display: inline-block;
    padding: 5px 10px;
    background: #D9D9D917;
    border: 1px solid #FFFFFF5E!important;
    backdrop-filter: blur(10px);
    text-align: center;
    text-transform: uppercase;
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 13px;
    line-height: 108%;
    letter-spacing: 0%;
    border-radius: 20px;
    color: var(--lighter)
}
#h-plan .plan-box .plan-head {
    margin: 30px 0;
}
#h-plan .plan-box .plan-head h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 20px;
    line-height: 108%;
    letter-spacing: -5%;
    color: var(--white);
    text-transform: uppercase;
}
#h-plan .plan-box .plan-head p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--lighter);
}
#h-plan .plan-box .plan-head .price {
    margin: 10px 0;
}
#h-plan .plan-box .plan-head .price h5 {
    font-family: var(--mona-sans);
    font-weight: 600;
    font-style: SemiBold;
    font-size: 16px;
    line-height: 110.00000000000001%;
    letter-spacing: -5%;
    padding: 10px 0;
}
#h-plan .plan-box.tier-one .plan-head .price h5 {
    color: #FFD258;
}
#h-plan .plan-box.tier-two .plan-head .price h5 {
    color: var(--sub-main-3);
}
#h-plan .plan-box.tier-three .plan-head .price h5 {
    color: var(--main);
}
#h-plan .plan-box.tier-four .plan-head .price h5 {
    background: radial-gradient(50% 50% at 50% 50%, #FFC400 0%, #FF9D00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
#h-plan .plan-box .plan-head .price h5 span {
    font-family: var(--mona-sans);
    font-weight: 600;
    font-style: SemiBold;
    font-size: 13px;
    line-height: 110.00000000000001%;
    letter-spacing: -5%;
    color: var(--lighter);
}
#h-plan .plan-box .plan-head .royalty {
    display: block;
    width: fit-content;
    padding: 8px 20px 10px;
    border: 1px solid;
    border-image-source: linear-gradient(49.27deg, rgba(255, 255, 255, 0.36) 25.46%, #FFFFFF 36.02%, #FFFFFF 54.72%, rgba(255, 255, 255, 0.44) 74.54%);
    text-align: center;
    text-align: center;
    margin: 20px auto;
    border-radius: 20px;
    font-family: var(--mona-sans);
}
#h-plan .plan-box.tier-one .plan-head .royalty {
    background: #FFD258;
    color: var(--dark);
}
#h-plan .plan-box.tier-two .plan-head .royalty {
    background: var(--sub-main-3);
    color: var(--dark);
}
#h-plan .plan-box.tier-three .plan-head .royalty {
    background: #006EFD;
    color: var(--light);
}
#h-plan .plan-box.tier-four .plan-head .royalty {
    background: radial-gradient(157.14% 1835.98% at 88.17% 100%, #FFD95A 0%, #FF9D00 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    color: var(--white);
}
#h-plan .plan-box .plan-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#h-plan .plan-box .plan-content .plan-c-h {
    margin: 10px 0;
}
#h-plan .plan-box .plan-content .plan-c-h h4 {
    font-family: var(--mona-sans);
    font-weight: 600;
    font-style: SemiBold;
    font-size: 20px;
    line-height: 110.00000000000001%;
    letter-spacing: -5%;
    color: var(--white);
}
#h-plan .plan-box .plan-content .plan-list {
    margin: 10px 0 20px;
}
#h-plan .plan-box .plan-content .plan-list .list {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
#h-plan .plan-box .plan-content .plan-list .list svg {
    width: 30px;
    height: 30px;
    fill: #FFD258;
    flex-shrink: 0;
}
#h-plan .plan-box.tier-one .plan-content .plan-list .list svg {
    fill: #FFD258;
}
#h-plan .plan-box.tier-two .plan-content .plan-list .list svg {
    fill: var(--sub-main-3);
}
#h-plan .plan-box.tier-three .plan-content .plan-list .list svg {
    fill: #006EFD;
}
#h-plan .plan-box.tier-four .plan-content .plan-list .list svg {
    fill: radial-gradient(157.14% 1835.98% at 88.17% 100%, #FFD95A 0%, #FF9D00 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
#h-plan .plan-box .plan-content .plan-list .list p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 100%;
    text-transform: capitalize;
    margin: 0;
    letter-spacing: -2%;
    color: var(--lighter);
}
#h-plan .plan-box .plan-btn {
    margin-top: auto;
}
#h-plan .plan-box .plan-btn a {
    display: inline-flex;
    justify-content: center;
    padding: 10px 15px;
    width: 100%;
    height: auto;
    border: 1px solid;
    border-image-source: linear-gradient(49.27deg, rgba(255, 255, 255, 0.072) 25.46%, rgba(255, 255, 255, 0.2) 36.02%, rgba(255, 255, 255, 0.2) 54.72%, rgba(255, 255, 255, 0.088) 74.54%);
    text-transform: capitalize;
    border-radius: 8px;
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 108%;
    letter-spacing: -5%;
    text-align: center;
    transition: 0.8s ease-in-out;
}
#h-plan .plan-box.tier-one .plan-btn a {
    background: #FFFFFF12;
    color: var(--lighter);
}
#h-plan .plan-box.tier-two .plan-btn a {
    background: var(--sub-main-3);
    color: var(--dark);
}
#h-plan .plan-box.tier-three .plan-btn a {
    background: var(--main);
    color: var(--light);
}
#h-plan .plan-box.tier-four .plan-btn a {
    background: radial-gradient(157.14% 1835.98% at 88.17% 100%, #FFD95A 0%, #FF9D00 100%); /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    color: var(--white);
}
#h-plan .plan-box .plan-btn a:hover {
    background: transparent;
    border: 1px solid var(--lighter)!important;
    color: var(--lighter);
    backdrop-filter: blur(20px);
}
#h-plan .exploregruvlyplan {
    margin: 20px auto;
}
#h-plan .exploregruvlyplan h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 30px;
    line-height: 101%;
    letter-spacing: -4%;
    color: var(--white);
    text-align: center;
}
#h-plan .exploregruvlyplanbtn {
    margin: 20px auto;
}
#h-plan .exploregruvlyplanbtn a {
    display: inline-block;
    padding: 8px 15px 10px;
    background: radial-gradient(157.14% 1835.98% at 88.17% 100%, #FFD95A 0%, #FF9D00 100%); /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border: 1px solid var(--lighter)!important;
    border-image-source: linear-gradient(49.27deg, rgba(255, 255, 255, 0.072) 25.46%, rgba(255, 255, 255, 0.2) 36.02%, rgba(255, 255, 255, 0.2) 54.72%, rgba(255, 255, 255, 0.088) 74.54%);
    /* box-shadow: 0px 28px 21.9px 0px #000000BD inset !important; */
    border-radius: 2px;
    color: var(--white);
    font-family: var(--manrope);
    font-size: 15px;
    transition: 0.8s ease-in-out;
}
#connectthrough {
    width: 100%;
    height: auto;
    background: url('../assets/img/bg/bg7.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#connectthrough .connect-btn a {
    display: inline-block;
    padding: 8px 15px 10px;
    background: linear-gradient(to top, #E0F1FF , #FFFFFF);
    border: 1px solid #E0F1FF!important;
    border-image-source: linear-gradient(35.39deg, #E0F1FF 19.67%, rgba(255, 255, 255, 0) 52.07%, #E0F1FF 80.33%)!important;
    border-radius: 30px;
    color: var(--black);
    font-family: var(--manrope);
    font-size: 15px;
}
#connectthrough .img-cont {
    margin: 30px auto;
}
#connectthrough .img-cont img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
#gruvstreamscoming {
    width: 100%;
    height: auto;
    background: url('../assets/img/bg/bg8.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#gruvstreamscoming .content p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -2%;
    color: var(--white);
}
#emerge {
    width: 100%;
    height: auto;
    background: linear-gradient(to right, #ffffffdd, #ffffffcc),url('../assets/img/bg/bg4.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#emerge .heading h2 {
    color: var(--dark);
}
#emerge .emerge-box {
    width: 100%;
    min-height: 200px;
    padding: 10px;
    background: var(--white);
    border: 2px solid var(--light)!important;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    border-radius: 8px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#emerge .emerge-box .emerge-head {
    display: flex;
    gap: 8px;
    margin: 10px;
}
#emerge .emerge-box .emerge-head .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ccc;
    margin: 1px 0;
}
#emerge .emerge-box .emerge-head h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 18px;
    line-height: 138%;
    letter-spacing: -2%;
}
#emerge .emerge-box .emerge-content {
    width: 100%;
    height: auto;
    padding: 10px;
    margin: auto 0 5px;
}
#emerge .emerge-box .emerge-content p {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 15px;
    line-height: 138%;
    letter-spacing: -2%;
    vertical-align: bottom;
}
#h-extra {
    width: 100%;
    height: auto;
    background: url('../assets/img/bg/bg8.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
/* ==== Services ===*/
#servHeroSection {
    width: 100%;
    height: auto;
    background: linear-gradient(to right, var(--bg-color), #0e2f5a);
}
#servHeroSection .hero-content {
    width: 900px;
    max-width: 100%;
    height: auto;
    margin: 10px auto;
}
#servHeroSection .hero-content .hero-head {
    margin: 10px 0;
}
#servHeroSection .hero-content .hero-head h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    line-height: 101%;
    letter-spacing: -6%;
    color: var(--white);
}
#servHeroSection.content-dist .hero-content .hero-head h2 span {
    color: var(--main);
}
#servHeroSection.music-publish .hero-content .hero-head h2 {
    font-size: 55px;
}
#servHeroSection.music-publish .hero-content .hero-head h2 span {
    color: var(--sub-main-2);
}
#servHeroSection.music-promo .hero-content .hero-head h2 {
    font-size: 55px;
}
#servHeroSection.music-promo .hero-content .hero-head h2 span {
    color: var(--sub-main-3);
}
#servHeroSection .hero-content .hero-text {
    margin: 20px 0;
}
#servHeroSection .hero-content .hero-text p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: -2%;
    padding: 10px 0;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(153, 153, 153, 0.21) 100%);
    --webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#servHeroSection .hero-content .hero-btn {
    margin: 20px 0;
}
#servHeroSection .hero-content .hero-btn a {
    display: inline-block;
    padding: 8px 15px 10px;
    border-radius: 30px;
    color: var(--dark);
    font-family: var(--manrope);
    font-size: 15px;
    transition: 0.8s ease-in-out;
}
#servHeroSection.content-dist .hero-content .hero-btn a {
    background: radial-gradient(63.05% 163.65% at 90.91% 100%, #FFFFFF 0%, #00A2FF 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border: 1px solid var(--white)!important;
}
#servHeroSection.content-dist .hero-content .hero-btn a:hover {
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    color: var(--white);
}
#servHeroSection.music-publish .hero-content .hero-btn a {
    background: radial-gradient(63.05% 163.65% at 90.91% 100%, #FFFFFF 0%, #FFD258 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border: 1px solid var(--white)!important;
}
#servHeroSection.music-publish .hero-content .hero-btn a:hover {
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    color: var(--white);
}
#servHeroSection.music-promo .hero-content .hero-btn a {
    background: radial-gradient(63.05% 163.65% at 90.91% 100%, #FFFFFF 0%, var(--sub-main-3) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border: 1px solid var(--white)!important;
}
#servHeroSection.music-promo .hero-content .hero-btn a:hover {
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    color: var(--white);
}
#servHeroSection .hero-content .hero-btn a:active {
    transform: scale(1.07);
}
#servHeroSection .hero-content .hero-img img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
#whygruvdist {
    width: 100%;
    height: auto;
    background: #1B1B1BE8;
    backdrop-filter: blur(311.3999938964844px)
}
#whygruvdist.music-promo {
    background: #FFFFFF;
}
#whygruvdist.music-promo .heading h2 {
    color: var(--dark);
}
#whygruvdist.music-promo .heading p {
    color: var(--black);
}
#whygruvdist .dist-content {
    width: 100%;
    height: auto;
    margin: 20px auto;
}
#whygruvdist .dist-content p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 23px;
    line-height: 100%;
    letter-spacing: 0%;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(153, 153, 153, 0.17) 100%);
    --webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#whygruvdist .dist-box {
    width: 100%;
    height: 200px;
    margin: 20px auto;
    background: #F1FFF208;
    backdrop-filter: blur(20px);
    border: 1px solid!important;
    border-radius: 8px;
    border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.39) 0%, rgba(0, 162, 255, 0.39) 100%)!important;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}
#whygruvdist.music-promo .dist-box {
    /* background: #3A3A3A; */
    background: #FFFFFF;
    border: 1px solid #2C2C2C2E!important;
}
#whygruvdist .dist-box .dist-head {
    margin: 10px 0;
}
#whygruvdist .dist-box .dist-head h3 {
    font-family: var(--mona-sans);
    font-weight: 600;
    font-style: Medium;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--white);
}
#whygruvdist.music-promo .dist-box .dist-head h3 {
    color: var(--dark);
}
#whygruvdist .dist-box .dist-text {
    margin-top: auto;
}
#whygruvdist .dist-box .dist-text p {
    font-family: var(--mona-sans);
    font-weight: 300;
    font-style: Medium;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--white);
}
#whygruvdist.music-promo .dist-box .dist-text p {
    color: var(--black);
}
#whygruvdist .dist-btn {
    text-align: center;
    margin: 20px auto;
}
#whygruvdist .dist-btn a {
    display: inline-block;
    padding: 8px 15px 10px;
    border: 1px solid var(--white)!important;
    border-radius: 30px;
    color: var(--dark);
    font-family: var(--manrope);
    font-size: 15px;
    transition: 0.8s ease-in-out;
}
#whygruvdist.content-dist .dist-btn a {
    background: radial-gradient(63.05% 163.65% at 90.91% 100%, #FFFFFF 0%, #00A2FF 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
#whygruvdist.content-dist .dist-btn a:hover {
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    color: var(--white);
}
#whygruvdist.music-publish .dist-btn a {
    background: radial-gradient(63.05% 163.65% at 90.91% 100%, #FFFFFF 0%, #FFD258 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
#whygruvdist.music-publish .dist-btn a:hover {
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    color: var(--white);
}
#whygruvdist .dist-btn a:active {
    transform: scale(1.07);
}
/* ── SECTION ── */
#how-it-works {
    width: 100%;
    /* max-width: 1100px; */
    height: auto;
    background: #0A0E17E3;
    backdrop-filter: blur(311.3999938964844px)
}

/* ── HEADING ── */
#how-it-works .heading {
    margin: 20px auto;
    text-align: center;
}

#how-it-works .heading h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-size: 45px;
    line-height: 101%;
    letter-spacing: -0.06em;
    text-align: center;
    color: var(--white);
    padding: 10px 0;
}

/* ── FLOW CONTAINER ── */
.hiw-flow {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 50px;
}

/* ── ROW ── */
.hiw-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
}

/* ── CARD ── */
.hiw-card {
    flex: 1;
    /* background: #111827; */
    background: #F1FFF208;
    /* border: 1px solid linear-gradient(to top, #FFFFFF, #00A1FF)!important; */
    border: 1px solid var(--lighter)!important;
    border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.39) 0%, rgba(0, 162, 255, 0.39) 100%)!important;
    /* border: 1px solid rgba(255,255,255,0.08) !important; */
    border-radius: 18px;
    /* padding: 36px 32px; */
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.hiw-card p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
    color: var(--light);
}

.hiw-card:hover {
    border-color: rgba(255,255,255,0.16) !important;
    background: #151f30;
}

/* ── HORIZONTAL ARROW ── */
.hiw-arrow-h {
    flex-shrink: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}

.hiw-arrow-h svg {
    width: 56px;
    height: 16px;
    display: block;
}

/* ── VERTICAL ARROW ROW ── */
.hiw-row-v {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    padding-right: calc(40px);   /* aligns with right card */
}

/* Right-side vertical arrow aligns over right card center */
.hiw-row-v .hiw-arrow-v {
    width: calc(50% - 40px);     /* half width minus half arrow-h */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
}

.hiw-arrow-v svg {
    width: 16px;
    height: 60px;
    display: block;
}
#how-it-works.music-publish .hiw-btn {
    margin: 20px 0;
}
#how-it-works.music-publish .hiw-btn a {
    display: inline-block;
    padding: 8px 15px 10px;
    border-radius: 30px;
    color: var(--dark);
    font-family: var(--manrope);
    font-size: 15px;
    transition: 0.8s ease-in-out;
}

#how-it-works.music-publish .hiw-btn a {
    background: radial-gradient(63.05% 163.65% at 90.91% 100%, #FFFFFF 0%, #FFD258 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
#how-it-works.music-publish .hiw-btn a:hover {
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    color: var(--white);
}
#how-it-works.music-publish .hiw-btn a:active {
    transform: scale(1.07);
}

/* ── RESPONSIVE ── */
@media (max-width: 680px) {
    #how-it-works .heading h2 { font-size: 36px; }

    .hiw-row {
    flex-direction: column;
    gap: 0;
    }

    /* hide horizontal arrows on mobile, show vertical instead */
    .hiw-arrow-h {
    width: auto;
    height: 52px;
    padding: 4px 0;
    transform: rotate(90deg);
    }

    .hiw-row-v {
    justify-content: center;
    padding-right: 0;
    }

    .hiw-row-v .hiw-arrow-v {
    width: auto;
    }

    .hiw-card {
    width: 100%;
    min-height: 100px;
    padding: 28px 24px;
    }

    /* reorder: 1 → 2 → 3 → 4 */
    .hiw-row.row-top   { order: 1; flex-direction: column; }
    .hiw-row-v         { order: 2; }
    .hiw-row.row-bot   { order: 3; flex-direction: column-reverse; }

    .hiw-row.row-bot .hiw-arrow-h { transform: rotate(90deg); }
}
#otherdist {
    width: 100%;
    height: auto;
    background: var(--bg-color);
    backdrop-filter: blur(311.3999938964844px)
}
#otherdist .othdist-box {
    width: 100%;
    height: auto;
    /* background: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, rgba(0, 162, 255, 0.01) 100%); */
    border: 1px solid var(--lighter)!important;
    /* border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.16) 100%)!important; */
    background: #F1FFF208;
    border: 1px solid!important;
    border-radius: 8px;
    padding: 10px;
    border-radius: 8px;
    margin: 20px auto;
}
#otherdist .othdist-box .img-cont img {
    width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
#otherdist .othdist-box .othdist-cont {
    margin: 20px 0;
}
#otherdist .othdist-box .othdist-cont .othdist-head {
    margin: 10px 0;
}
#otherdist .othdist-box .othdist-cont .othdist-head h3 a {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 20px;
    line-height: 101%;
    letter-spacing: -4%;
    color: var(--white);
}
#otherdist .othdist-box .othdist-cont .othdist-head h3 a:hover {
    color: var(--main);
    text-decoration: underline!important;
}
#otherdist .othdist-box .othdist-cont .othdist-text {
    margin: 20px 0;
}
#otherdist .othdist-box .othdist-cont .othdist-text p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: -2%;
    color: var(--lighter);
}
#monietise {
    width: 100%;
    height: auto;
    background-image: url('../assets/img/bg/bg10.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#monietise .money-box {
    width: 100%;
    height: auto;
    background: #00000017;
    border-top: 1px solid #FFFFFF24!important;
    border-radius: 8px;
    padding: 10px;
    margin: 20px 0;
}
#monietise .money-box .monie-head .icon {
    margin: 8px 0;
}
#monietise .money-box .monie-head .icon svg {
    fill: var(--lighter);
}
#monietise .money-box .monie-head .head-text {
    margin: 10px 0;
}
#monietise .money-box .monie-head .head-text h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.45px;
    color: var(--white);
}
#monietise .money-box .monie-head .head-text h4 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.31px;
    color: var(--main);
}
#monietise .money-box .money-content {
    margin: 20px 0;
}
#monietise .money-box .money-content p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 22.75px;
    letter-spacing: -0.15px;
    color: var(--lighter);
}
#monietise .monie-btn {
    text-align: center;
    margin: 20px auto;
}
#monietise .monie-btn a {
    display: inline-block;
    padding: 8px 15px 10px;
    background: radial-gradient(63.05% 163.65% at 90.91% 100%, #FFFFFF 0%, #00A2FF 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border: 1px solid var(--white)!important;
    border-radius: 30px;
    color: var(--dark);
    font-family: var(--manrope);
    font-size: 15px;
    transition: 0.8s ease-in-out;
}
#monietise .monie-btn a:hover {
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    color: var(--white);
}
#monietise .monie-btn a:active {
    transform: scale(1.07);
}
.stats-box {
    padding: 35px 40px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,0.08),
            transparent 60%
        ),
        linear-gradient(
            90deg,
            rgba(10, 85, 115, 0.15),
            rgba(0, 59, 137, 0.15)
        );
    backdrop-filter: blur(10px);
    margin: 20px auto;
}
.icon-box{
    width:48px;
    min-width:48px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.icon-box svg{
    width:32px;
    height:32px;
}
/* .icon-box {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #19a7ff;
    font-size: 24px;
} */

.stats-box h5 {
    color: #fff;
    /* font-size: 24px; */
    /* font-weight: 600; */
    font-family: var(--inter);
    font-weight: 700;
    font-style: Bold;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.44px;
}

.stats-box p {
    /* color: rgba(255,255,255,0.65);
    font-size: 14px;
    line-height: 1.7; */
    font-family: var(--inter);
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
    color: #99A1AF;
}

.stats-box h3 {
    color: #fff;
    /* font-size: 36px;
    font-weight: 700; */
    margin-bottom: 5px;
    font-family: var(--inter);
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.07px;
    text-align: center;
}
.stats-box h3 span {
    display: inline;
    color: #fff;
    /* font-size: 36px;
    font-weight: 700; */
    margin-bottom: 5px;
    font-family: var(--inter);
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.07px;
    text-align: center;
}

.stats-box span {
    /* color: rgba(255,255,255,0.6); */
    /* font-size: 13px; */
    display: block;
    font-family: var(--inter);
    font-weight: 400;
    font-style: Regular;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0px;
    text-align: center;
    color: #99A1AF;
}

/* Mobile */
@media (max-width: 991px) {
    .stats-box {
        padding: 25px;
    }

    /* .stats-box h3 {
        font-size: 28px;
    }

    .stats-box h5 {
        font-size: 20px;
    } */
}
#dataDriven {
    width: 100%;
    height: auto;
    background-image: url('../assets/img/bg/bg11.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#dataDriven .img-cont {
    margin: 30px auto;
}
#dataDriven .img-cont img {
    width: 50%;
    max-width: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
#serv-extra {
    width: 100%;
    height: auto;
    background-image: url('../assets/img/bg/bg11.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#serv-extra .extra-head h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    line-height: 128%;
    letter-spacing: -6%;
    color: var(--white);
}
#serv-extra .extra-content {
    margin: 20px 0;
}
#serv-extra .extra-content p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--white);
}
#serv-extra .extra-content .extra-btn {
    margin: 20px auto;
}
#serv-extra .extra-content .extra-btn a {
    display: inline-block;
    padding: 8px 15px 10px;
    background: radial-gradient(63.05% 163.65% at 90.91% 100%, #FFFFFF 0%, #00A2FF 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border: 1px solid var(--white)!important;
    border-radius: 30px;
    color: var(--dark);
    font-family: var(--manrope);
    font-size: 15px;
    transition: 0.8s ease-in-out;
}
#serv-extra .extra-content .extra-btn a:hover {
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    color: var(--white);
}
#serv-extra .extra-content .extra-btn a:active {
    transform: scale(1.07);
}

#music-publish-extra {
    width: 100%;
    height: auto;
    background: url('../assets/img/bg/bg11.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#music-publish-extra .heading-btn a {
    background: radial-gradient(63.05% 163.65% at 90.91% 100%, #FFFFFF 0%, #FFD258 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
#music-publish-extra .heading-btn a:hover {
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    color: var(--white);
}
#music-promo-extra {
    width: 100%;
    height: auto;
    background: url('../assets/img/bg/bg11.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#music-promo-extra .heading-btn a {
    background: radial-gradient(63.05% 163.65% at 90.91% 100%, #FFFFFF 0%, var(--sub-main-3) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
#music-promo-extra .heading-btn a:hover {
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    color: var(--white);
}
#monietisebeyond {
    width: 100%;
    height: auto;
    background: var(--bg-color);
}
#monietisebeyond .monieb-box {
    width: 100%;
    height: 200px;
    margin: 20px auto;
    background: #D9D9D912;
    border: 1px solid !important;
    border-image: linear-gradient(180deg, #FFFFFF 0%, #A8FFB2 100%) 1 !important;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}
#monietisebeyond .monieb-box .monieb-head {
    margin: 10px 0;
}
#monietisebeyond .monieb-box .monieb-head h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -3%;
    color: var(--white);
}
#monietisebeyond .monieb-box .monieb-price {
    margin-top: auto;
    float: right;
}
#monietisebeyond .monieb-box .monieb-price h3 {
    font-family: var(--mona-sans);
    font-weight: 600;
    font-style: SemiBold;
    font-size: 23px;
    line-height: 108%;
    letter-spacing: -5%;
    float: right;
    color: var(--sub-main-3);
}
#monietisebeyond .monieb-btn {
    margin: 20px 0;
}
#monietisebeyond .monieb-btn a {
    display: inline-block;
    padding: 8px 15px 10px;
    border-radius: 30px;
    color: var(--dark);
    font-family: var(--manrope);
    font-size: 15px;
    transition: 0.8s ease-in-out;
}

#monietisebeyond .monieb-btn a {
    background: radial-gradient(63.05% 163.65% at 90.91% 100%, #FFFFFF 0%, var(--sub-main-3) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
#monietisebeyond .monieb-btn a:hover {
    border-image-source: linear-gradient(35.39deg, rgba(0, 153, 255, 0.65) 19.67%, rgba(255, 255, 255, 0.208) 52.07%, rgba(0, 153, 255, 0.65) 80.33%) 1 !important; 
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    color: var(--white);
}
#monietisebeyond .monieb-btn a:active {
    transform: scale(1.07);
}

#growthrequired {
    width: 100%;
    height: auto;
    background: var(--bg-color);
}
#growthrequired .growth-left-side .growth-l-head {
    margin: 10px 0;
}
#growthrequired .growth-left-side .growth-l-head h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 60px;
    line-height: 128%;
    letter-spacing: -6%;
    color: var(--white);
}
#growthrequired .growth-left-side .growth-l-content {
    margin: 15px 0;
}
#growthrequired .growth-left-side .growth-l-content p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--white);
}
#growthrequired .growth-r-box {
    width: 100%;
    height: auto;
    background: #D9D9D947;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
}
#growthrequired .growth-r-box .growth-r-head {
    display: flex;
    gap: 10px;
}
#growthrequired .growth-r-box .growth-r-head .dot {
    width: 11px;
    height: 11px;
    margin: 4px 0;
    /* top: 3159px;
    left: 889px; */
    border-width: 1px;
    /* angle: 0 deg; */
    opacity: 1;
    border-radius: 50%;
    background: #58FF6C;
    border: 1px solid #95FFA2;
    box-shadow: 0px 0px 15.1px 2px #58FF6C;
}
#growthrequired .growth-r-box .growth-r-head .h-text h3 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -3%;
    text-align: center;
    color: var(--white);
}
#growthrequired .growth-r-box .growth-r-content {
    text-align: center;
    margin: 20px 0;
}
#growthrequired .growth-r-box .growth-r-content h1 {
    font-family: var(--mona-sans);
    font-weight: 700;
    font-style: Bold;
    font-size: 48px;
    line-height: 128%;
    letter-spacing: -6%;
    text-align: center;
    color: var(--white);
}
#contact {
    width: 100%;
    height: auto;
    background: var(--bg-color);
}
#contactContent .contact-info .contact-head {
    margin: 10px 0;
}
#contactContent .contact-info .contact-head h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 75px;
    line-height: 101%;
    letter-spacing: -6%;
    color: var(--white);
}
#contactContent .contact-info .contact-head p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    padding: 10px 0;
    color: var(--lighter);
}
#contactContent .contact-info .contact-list {
    margin: 20px 0;
}
#contactContent .contact-info .contact-list .contact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 20px 0 0;
    width: 100%;
    padding: 5px;
    height: auto;
    border: 1px solid #FFFFFF21!important;
    background: #D9D9D90D;
    border-radius: 8px;
}
#contactContent .contact-info .contact-list .contact-item .contact-content {
    display: flex;
    padding: 5px;
    gap: 10px;
}
#contactContent .contact-info .contact-list .contact-item .contact-content .icon {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #D9D9D90D;
    margin: 5px 0;
    border: 1px solid #FFFFFF21!important;
    border-radius: 8px;
}
#contactContent .contact-info .contact-list .contact-item .contact-content .icon svg {
    width: 30px;
    height: 30px;
    fill: var(--white);
    flex-shrink: 0;
}
#contactContent .contact-info .contact-list .contact-item .contact-content .contact-text {
    margin: 10px 0 0;
}
#contactContent .contact-info .contact-list .contact-item .contact-content .contact-text h3 {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -2%;
    color: var(--white);
}
#contactContent .contact-info .contact-list .contact-item .contact-content .contact-text p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: -2%;
    color: var(--lighter);
}
#contactContent .contact-info .contact-list .contact-item .contact-redirect {
    margin: 0 10px 0;
}
#contactContent .contact-info .contact-list .contact-item .contact-redirect a svg {
    width: 20px;
    height: 20px;
    fill: var(--white);
}
#contactContent .contact-info .contact-list .contact-item .contact-redirect a:hover svg {
    fill: var(--lighter);
}
#contactContent .contact-info .contact-list .contact-item .contact-redirect a:active svg {
    fill: var(--sub-main-2);
}
#contactContent .contact-form-container {
    width: 100%;
    height: auto;
    padding: 20px;
    background: var(--light-grey);
    border-radius: 10px;
}
#contactContent .contact-form-container .contact-head {
    margin: 10px 0;
}
#contactContent .contact-form-container .contact-head h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 30px;
    line-height: 101%;
    letter-spacing: -4%;
    color: var(--white);
}
#contactContent .contact-form-container .contact-head p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;
    padding: 10px 0;
    color: var(--lighter);
}
#contactContent .contact-form-container form {
    margin: 20px 0;
}
#contactContent .contact-form-container form .box {
    margin: 10px 0;
}
#contactContent .contact-form-container form .box label {
    font-family: var(--mona-sans);
    font-weight: 400;
    padding: 8px 0;
    font-size: 15px;
    color: var(--light);
}
#contactContent .contact-form-container form .box label span {
    color: var(--red);
}
#contactContent .contact-form-container form .box input,
#contactContent .contact-form-container form .box select,
#contactContent .contact-form-container form .box textarea {
    width: 100%;
    height: auto;
    padding: 10px 15px;
    border-radius: 10px;
    background: #F4F4F408;
    border: 1px solid #FFFFFF36!important;
    margin: 5px 0;
    font-size: 16px;
    outline: none!important;
    color: var(--white);
}
#contactContent .contact-form-container form .box select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #F4F4F408;
}
#contactContent .contact-form-container form .box select option {
    background-color: #111 !important;
    color: #fff !important;
}
#contactContent .contact-form-container form .box input:focus,
#contactContent .contact-form-container form .box select:focus,
#contactContent .contact-form-container form .box textarea:focus {
    outline: 1px solid var(--bs-blue)!important;
}
#contactContent .contact-form-container form .box textarea {
    resize: none;
    box-shadow: none!important;
}
#contactContent .contact-form-container form .box input::placeholder,
#contactContent .contact-form-container form .box select::placeholder,
#contactContent .contact-form-container form .box textarea::placeholder {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -4%;
    color: var(--lighter);
}
#lookpartner .look-partner-left h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 40px;
    line-height: 101%;
    letter-spacing: -6%;
    color: var(--white);
}
#lookpartner .look-partner-left a {
    display: inline-block;
    padding: 8px 15px 10px;
    background: linear-gradient(to top, #0100ff, #010099);
    border: 1px solid var(--main)!important;
    /* border-image-source: linear-gradient(35.39deg, #E0F1FF 19.67%, rgba(255, 255, 255, 0) 52.07%, #E0F1FF 80.33%)!important; */
    border-radius: 30px;
    color: var(--white);
    margin: 20px 0;
    font-family: var(--manrope);
    font-size: 15px;
}
#lookpartner .look-partner-right p {
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.17) 100%);
    color: transparent;
    -webkit-background-clip: text;
}
#faq .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Accordion Wrapper */
#faq .accordion-wrapper {
    max-width: 850px;
    margin: 30px auto;
}

/* Accordion Item */
#faq .accordion-item {
    background: #D9D9D90D;
    border: 1px solid #FFFFFF2E!important;
    border-radius: 20px;
    margin-bottom: 18px;
    border: 1px solid var(--border-grey);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: 0.3s;
}

#faq .accordion-item:hover {
    box-shadow: 0 8px 24px rgba(0,35,101,0.08);
}

/* Accordion Header */
#faq .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    transition: 0.2s;
}


/* Accordion Title (Icon + Text) */
#faq .accordion-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

#faq .icon-box {
    width: 48px;
    height: 48px;
    background: var(--sub-main-2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s;
}

#faq .icon-box i {
    font-size: 1.4rem;
    color: var(--sub-main);
    transition: 0.25s;
}

#faq .accordion-item.active .icon-box {
    background: var(--main);
}

#faq .accordion-item.active .icon-box i {
    color: #fff;
}

#faq .accordion-title h4 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin: 0;
}

/* Toggle Icon */
#faq .toggle-icon {
    width: 36px;
    height: 36px;
    background: #D9D9D90D;
    border: 1px solid #FFFFFF2E!important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s;
}

#faq .toggle-icon i {
    font-size: 1.1rem;
    color: var(--main);
    transition: 0.2s;
}

#faq .toggle-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--white);
}

#faq .accordion-item.active .toggle-icon svg.active {
    transform: rotate(180deg);
}

#faq .accordion-item.active .toggle-icon {
    background: var(--main);
}

#faq .accordion-item.active .toggle-icon i {
    color: #fff;
}


/* Accordion Content */
#faq .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.33,1,0.68,1);
    padding: 0 28px;
}

#faq .accordion-item.active .accordion-content {
    max-height: 500px;
    padding: 0 28px 24px 28px;
}

#faq .accordion-content p {
    color: var(--light);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Feature List */
#faq .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#faq .feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--light);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

#faq .feature-list li i {
    color: var(--sub-main-2);
    font-size: 0.85rem;
    width: 20px;
    flex-shrink: 0;
}

#faq .feature-list li svg {
    stroke: var(--sub-main-2);
    font-size: 0.85rem;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Responsive */
@media(max-width:768px) {
    #faq { padding: 60px 16px; }
    #faq .accordion-header { padding: 16px 20px; }
    #faq .icon-box { width: 42px; height: 42px; }
    #faq .icon-box i { font-size: 1.2rem; }
    #faq .accordion-title h4 { font-size: 1rem; }
    #faq .toggle-icon { width: 32px; height: 32px; }
    #faq .toggle-icon i { font-size: 0.9rem; }
    #faq .accordion-item.active .accordion-content { padding: 0 20px 20px 20px; max-height: 400px; }
}

@media(max-width:480px) {
    #faq .icon-box { width: 38px; height: 38px; }
    #faq .accordion-title h4 { font-size: 0.95rem; }
    #faq .accordion-item.active .accordion-content { max-height: 450px; }
}

footer {
	width: 100%;
	height: auto;
	background: var(--bg-color);
	background-size: cover;
	background-repeat: no-repeat;
	/* margin-top: 30px; */
	padding-top: 60px;
	padding-bottom: 40px;
}
footer .f-head {
    margin: 10px 0;
}
footer .f-head h2 {
    font-family: var(--mona-sans);
    font-weight: 500;
    font-style: Medium;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: -3%;
    color: var(--white);
}
footer .container .menu li {
	padding-top: 10px;
}
footer .container .menu li a {
	color: var(--lighter);
}
footer .container .menu li:hover {
	transform: translateX(10px);
}
footer .container .menu li:hover a {
    color: var(--sub-main-2);
}
footer.content-dist .container .menu li:hover a {
    color: var(--main);
}
footer.music-publish .container .menu li:hover a {
    color: var(--sub-main-2);
}
footer.music-promo .container .menu li:hover a {
    color: var(--sub-main-3);
}
footer .social-media {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
footer .social-media .icon {
    margin: 10px;
}
footer .social-media .icon svg {
    fill: var(--white);
    cursor: pointer;
}
footer .social-media .icon svg.bi-facebook:hover {
    fill: var(--main);
}
footer .social-media .icon svg.bi-whatsapp:hover {
    fill: green;
}
footer .social-media .icon svg.bi-twitter-x:hover {
    fill: var(--black);
}
footer .social-media .icon svg.bi-instagram:hover {
    fill: var(--red);
}
footer .social-media .icon svg.bi-threads:hover {
    fill: var(--black);
}
footer .container .q-l .q-btn {
    margin: 5px auto;
}
footer .container .q-l .q-btn a {
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 8px 15px 10px;
    border-image-source: linear-gradient(35.39deg, #E0F1FF 19.67%, rgba(255, 255, 255, 0) 52.07%, #E0F1FF 80.33%)!important;
    border-radius: 10px;
    color: var(--white);
    text-align: center;
    margin: 10px auto;
    font-family: var(--manrope);
    font-size: 15px;
}
footer .container .q-l .q-btn a:nth-child(1) {
    background: linear-gradient(to top, #0100ff, #010099);
    border: 1px solid var(--main)!important;
}
footer .container .q-l .q-btn a:nth-child(2) {
    box-shadow: 0px 28px 21.9px 0px #000000BD inset !important;
    background: transparent;
    border: 1px solid #E0F1FF!important;
}
footer .container .copyright {
    margin: 40px auto 10px;
    font-family: var(--mona-sans);
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 0%;
    color: var(--lighter);
}
@media (max-width: 993px) {
    #creator-focused .cf-box {
        min-height: auto;
    }
    #dataDriven .img-cont img {
        width: 70%;
    }
}
@media (max-width: 992px) {
    #h-sections {
        background-size: contain;
        background-position: top center;
        background-repeat: repeat-y;
        background-attachment: scroll;
        background-color: var(--bg-color);
    }
}
@media (max-width: 906px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 65px;
    }
}
@media (max-width: 847px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 60px;
    }
}
@media (max-width: 787px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 58px;
    }
}
@media (max-width: 768px) {
    #creator-focused .cf-box {
        min-height: auto;
        transform: rotate(0deg)!important;
    }
    #emerge .emerge-box {
        min-height: auto;
    }
    #whygruvdist .dist-box {
        height: auto;
    }
    #dataDriven .img-cont img {
        width: 100%;
    }
}
@media (max-width: 760px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 55px;
    }
    #home .container-fluid .hero-content .b-t {
        font-size: 16px;
    }
}
/* HIDE RESPONSIVE MENU ON DESKTOP */
@media(min-width: 751px) {
    header .resp-menu {
        display: none;
    }
}
@media(max-width: 750px) {
    header nav ul {
        display: none;
    }
    header nav .d-btn {
        display: none;
    }
    header nav .menu-btn {
        display: block;
    }
}
@media (max-width: 768px) {
    #trusted .trusted-box .head h2 {
        font-size: 40px;
    }
}
@media (max-width: 724px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 50px;
    }
}
@media (max-width: 665px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 48px;
    }
}
@media (max-width: 640px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 45px;
    }
    #home .container-fluid .hero-content .b-t {
        font-size: 15px;
    }
}
@media (max-width: 604px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 40px;
    }
    /* #home .container-fluid .hero-content .b-t {
        font-size: 14px;
    } */
}
@media (max-width: 500px) {
    #whatisgruvly .gruvlyinfo .gruvly-head h2 {
        font-size: 50px;
    }
    #whatisgruvly .gruvlyinfo .gruvly-cont p {
        font-size: 16px;
    }
}
@media (max-width: 545px) {
    /* #home .container-fluid .hero-content .b-h {
        font-size: 38px;
    } */
    #trusted .trusted-box .head h2 {
        font-size: 30px;
    }
    #trusted .trusted-box .content p {
        font-size: 15px;
    }
}
/* @media (max-width: 520px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 35px;
    }
    #home .container-fluid .hero-content .b-t {
        font-size: 13px;
    }
}
@media (max-width: 485px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 33px;
    }
}
@media (max-width: 460px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 30px;
    }
    #home .container-fluid .hero-content .b-t {
        font-size: 12px;
    }
} */
@media (max-width: 440px) {
    .heading h2 {
        font-size: 40px;
    }
    .heading p {
        font-size: 16px;
    }
}
@media (max-width: 430px) {
    #whatisgruvly .gruvlyinfo .gruvly-head h2 {
        font-size: 40px;
    }
    #whatisgruvly .gruvlyinfo .gruvly-cont p {
        font-size: 15px;
    }
}
/* @media (max-width: 429px) {
    #trusted .trusted-box .head h2 {
        font-size: 28px;
    }
} */
/* @media (max-width: 424px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 28px;
    }
    #home .container-fluid .hero-content .b-t {
        font-size: 11px;
    }
} */
/* @media (max-width: 405px) {
    #trusted .trusted-box .head h2 {
        font-size: 25px;
    }
} */
/* @media (max-width: 400px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 25px;
    }
} */
@media (max-width: 397px) {
    .heading h2 {
        font-size: 35px;
    }
}
/* @media (max-width: 364px) {
    #home .container-fluid .hero-content .b-h {
        font-size: 23px;
    }
    #home .container-fluid .hero-content .b-t {
        font-size: 10px;
    }
} */
@media (max-width: 356px) {
    .heading h2 {
        font-size: 30px;
    }
}
@media (max-width: 325px) {
    #whatisgruvly .gruvlyinfo .gruvly-head h2 {
        font-size: 30px;
    }
    #whatisgruvly .gruvlyinfo .gruvly-cont p {
        font-size: 13px;
    }
}