@import url(https://ka-p.fontawesome.com/releases/v6.5.1/css/pro.min.css?token=7ca6a895ef);
@import url(https://ka-p.fontawesome.com/releases/v6.5.1/css/pro-v4-shims.min.css?token=7ca6a895ef);
@import url(https://ka-p.fontawesome.com/releases/v6.5.1/css/pro-v5-font-face.min.css?token=7ca6a895ef);
@import url(https://ka-p.fontawesome.com/releases/v6.5.1/css/pro-v4-font-face.min.css?token=7ca6a895ef);
@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

:root {
    --white: #ffffff;
    --black: #1e1e1e;
    --gray: #818181;
    --sky-blue: #00ceff;
    --navy: #0a101c;
    --dark-black: #0b0a0c;
}

* {
    box-sizing: border-box;
}

body,
html {
    padding: 0;
    margin: 0;
    font-family: "Host Grotesk", sans-serif;
}

.hide-scroll {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p,
a {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "revxneue";
    font-weight: 600;
    color: var(--black);
    text-transform: uppercase;
}

h1 {
    font-size: 48px;
    color: var(--white);
}

h2 {
    font-size: 40px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

p {
    font-size: 18px;
    font-weight: 400;
    color: var(--gray);
}

img {
    width: 100%;
    height: auto;
}

.wrapper {
    max-width: 1140px;
    margin: auto;
}

.small-wrapper {
    max-width: 945px;
    margin: auto;
}

.sec-padding {
    padding: 100px 0;
}

.title {
    margin-bottom: 40px;
    text-align: center;
}

.title h4 {
    margin-bottom: 12px;
}

.title p {
    color: var(--gray);
    margin-top: 7px;
}

.white h2,
.white p,
.white span {
    color: var(--white);
}

.black p {
    color: var(--black);
}

.skyblue h2,
.skyblue h1 span {
    color: var(--sky-blue) !important;
}

button:focus {
    outline: unset !important;
}

.site-btn {
    background-color: var(--sky-blue);
    display: inline-block;
    border: 1px solid var(--sky-blue);
    border-radius: 8px;
    color: var(--black);
    font-size: 20px;
    font-weight: 600;
    padding: 9px 24px;
    min-width: 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: 0.3s all ease;
    z-index: 1;
    text-transform: capitalize;
}

.site-btn::before {
    content: "";
    background-color: var(--black);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    transition: 0.3s all ease;
    z-index: -1;
}

.site-btn:hover {
    color: var(--white);
    border: 1px solid transparent;
}

.site-btn:hover::before {
    height: 100%;
}

.outline-btn {
    background-color: transparent;
    color: var(--black);
    border-color: var(--black);
}

.black-btn {
    background-color: var(--navy);
    border-color: var(--navy);
    color: var(--white);
    text-transform: capitalize;
}

.black-btn::before {
    background-color: var(--white);
}

.black-btn:hover {
    color: var(--navy);
}

.sky-outline {
    border-color: var(--sky-blue);
}

.sky-outline::before {
    background-color: var(--sky-blue);
}

.sky-outline:hover {
    color: var(--black);
}

.white-btn {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--black);
    text-transform: uppercase;
}

.white-btn::before {
    background-color: var(--navy);
}

.white-btn:hover {
    color: var(--white);
    border-color: var(--white);
}

.bg-lightblue {
    background-color: #f0fcff;
}

.bg-skyblue {
    background-color: var(--sky-blue);
}

.bg-gray {
    background-color: #f7f7f7;
}

.bg-navy {
    background-color: var(--navy);
}

.bg-darkblack {
    background-color: var(--dark-black);
}

.bg-lightsky {
    background-color: rgba(0, 206, 255, 0.06);
}


/* header  */

header {
    padding: 30px 0;
    box-shadow: unset;
    font-weight: 400;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    transition: 0.1s all ease;
}

.sticky-header {
    transition: 0.1s all ease;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
}

header .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .navigation {
    flex-grow: 1;
}

header .navbar-expand-lg .navbar-nav {
    gap: 30px;
}

header .navbar-nav>li {
    margin: 0;
}

header .navbar-collapse .nav-link {
    color: var(--white);
    padding: 0 !important;
    font-size: 20px;
}

header .navbar-collapse .nav-link:hover {
    color: var(--sky-blue);
}

.vert-border {
    min-height: 17px;
    margin: 0;
    width: 1px;
    background-color: #757575;
    opacity: 1;
}


/* hero */

.hero {
    position: relative;
    z-index: 1;
    padding: 100px 0 50px;
}

.hero .image {
    margin-left: -10px;
}

.black-gradient {
    position: relative;
    z-index: 1;
}

.black-gradient::before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, rgba(11, 10, 12, 0) 67.15%, #0b0a0c 100%);
}

.hero h1 {
    margin-top: 15px;
    text-align: center;
}


/* video  */

.video-thumbnail {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
}

.play-btn img {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: 0.3s all ease;
    width: auto;
    max-width: 100%;
}

.play-btn img:hover {
    transform: scale(0.9);
}

.overlay {
    position: relative;
    z-index: 1;
}

.overlay::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.43);
}

.single-btn {
    margin-top: 40px;
}


/* split  */

.split {
    padding: 80px 0;
}

.price-card {
    padding: 24px;
    border-radius: 12px;
}

.price-card img {
    max-width: 210px;
    display: block;
    margin: auto;
}

.price-card h3 {
    font-size: 22px;
    text-align: center;
    margin: 15px 0 24px;
    font-family: "Host Grotesk", sans-serif;
}

.price-card .btn-img img {
    max-width: 209px;
    transition: 0.3s all ease;
}

.price-card .btn-img img:hover {
    transform: translatey(-6px);
}

.separator {
    opacity: 0.44;
}

.separator span {
    text-transform: uppercase;
    color: var(--black);
    font-family: "revxneue";
    font-size: 32px;
    font-weight: 600;
    padding: 15px 0;
    display: block;
}

.divider {
    min-height: 132px;
    width: 2px;
    background-color: var(--black);
    opacity: 1;
    margin: auto;
}

.newsletter {
    max-width: 509px;
}

.newsletter h3 {
    font-size: 34px;
    margin-bottom: 30px;
}

.newsletter input {
    color: var(--navy) !important;
    border-radius: 8px;
    background-color: var(--white);
    margin-bottom: 15px;
    height: 50px;
    border-color: transparent;
}

.newsletter input::placeholder {
    color: var(--navy);
}

.newsletter button {
    margin-top: 18px;
    display: block;
}

.newsletter p {
    font-size: 20px;
    color: var(--black);
    margin-top: 16px;
}


/* two-colm  */

.two-colm h4 {
    margin-bottom: 12px;
}

.two-colm h2 {
    margin-bottom: 17px;
}

.two-colm h6 {
    color: var(--gray);
    font-size: 18px;
    font-weight: 400;
    font-family: "Host Grotesk", sans-serif;
    text-transform: unset;
}

.two-colm ul {
    margin: 12px 0 18px;
    padding-left: 27px;
    list-style-type: none;
}

.two-colm ul li::marker {
    color: var(--black);
}

.two-colm ul li {
    font-size: 18px;
    color: var(--gray);
    margin-top: 4px;
    position: relative;
}

.two-colm ul li::before {
    content: "\2022";
    position: absolute;
    left: -17px;
    color: var(--black);
}

.two-colm ul li span {
    color: var(--black);
    font-weight: 500;
}

.two-colm .text>span {
    font-size: 20px;
    font-weight: 500;
    color: var(--black);
    margin-top: 6px;
    display: block;
}


/* slider  */

.short-card {
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    aspect-ratio: 9 / 15;
}

.short-card.overlay::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 46.86%, rgba(0, 0, 0, 1) 100%);
    z-index: 0;
    height: 60%;
    bottom: 0;
    top: unset;
}

.short-card img {
    object-fit: cover;
    height: 100%;
}

.play-icon {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: white;
    color: var(--black);
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: unset;
}

.auto-slider-sec .auto-slider-home .owl-item {
    transition: 0.4s all ease;
}

.auto-slider-sec .auto-slider-home .center {
    transform: scale(1.1);
}

.auto-slider-sec .owl-stage-outer {
    padding: 70px 0;
}

.slider-footer {
    text-align: center;
    margin-top: 20px;
}

.splide-section .splide__slide.is-active .short-card {
    transform: scale(1.1);
    z-index: 10;
}

.splide-section .splide__track {
    padding: 70px 0;
}


/* journey  */

.cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.title.v2 p {
    color: var(--gray);
}

.img-card {
    padding: 40px;
    border-radius: 20px;
    transition: 0.3s all ease;
}

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

.img-card img {
    border-radius: 10px;
}

.img-card .site-btn {
    text-transform: capitalize;
    flex-grow: 1;
}

.text-colm {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.text-colm span {
    font-size: 18px;
    font-weight: 500;
    color: var(--black);
}

.text-colm p {
    font-size: 16px;
    font-weight: 300;
    color: var(--black);
    margin-top: 6px;
}

.text-colm .head {
    flex-basis: 35%;
}

.text-colm .body {
    flex-basis: 65%;
}

.btn-row {
    margin-top: 40px;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.img-card:is(span,
p,
h3) {
    transition: 0.3s all ease;
}

.img-card.active,
.img-card:hover {
    background-color: var(--dark-black);
    transition: 0.3s all ease;
}

.img-card.active span,
.img-card:hover span {
    transition: 0.3s all ease;
    color: var(--white);
}

.img-card.active p,
.img-card:hover p {
    color: var(--white);
    transition: 0.3s all ease;
}

.img-card.active h3,
.img-card:hover h3 {
    color: var(--white);
    transition: 0.3s all ease;
}

.img-card.active .outline-btn,
.img-card:hover .outline-btn {
    color: var(--white);
    border-color: var(--white);
    transition: 0.3s all ease;
}

.img-card.active .outline-btn::before,
.img-card:hover .outline-btn::before {
    background-color: var(--white);
    transition: 0.3s all ease;
}

.img-card.active .outline-btn:hover,
.img-card:hover .outline-btn:hover {
    color: var(--black);
    transition: 0.3s all ease;
}

.bottom-text {
    margin-top: 50px;
}

.bottom-text h3 {
    font-size: 26px;
}

.bottom-text ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    list-style-type: none;
    margin: 17px 0 24px;
}

.bottom-text ul li {
    color: var(--gray);
    font-size: 18px;
    font-weight: 400;
}

.dot {
    min-width: 4px;
    aspect-ratio: 1;
    background-color: var(--sky-blue);
    border-radius: 50%;
}


/* two colm  */

.two-colm p {
    margin-top: 9px;
}

.two-colm span {
    font-weight: 700;
}


/* .two-colm  */

.text.black h6 {
    color: var(--black);
    font-size: 20px;
}

.text.black ul li {
    color: var(--black);
}

.text.black p {
    color: var(--black);
}

.two-colm .site-btn {
    margin-top: 25px;
}

.img-radius img {
    border-radius: 20px;
}

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


/* footer  */

footer {
    padding: 40px 0;
}

.copyright p {
    color: var(--navy);
    font-size: 16px;
}

.copyright a {
    color: var(--navy);
    transition: 0.3s all ease;
}

.copyright a:hover {
    color: var(--gray);
}

.social-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-links a {
    min-width: 40px;
    aspect-ratio: 1;
    font-size: 24px;
    color: black;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s all ease;
}

.social-links a:hover {
    color: var(--gray);
}


/* podcast  */

.banner {
    padding-top: 190px;
}

.black-gradient.v2::before {
    bottom: 0;
}

.filter-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.filter-content h2 {
    margin-top: 5px;
}

.filter-bar {
    border: 1px solid #c8c3c3;
    border-radius: 8px;
    padding: 4px;
}

.filter-btn {
    background-color: transparent;
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--black);
    font-size: 16px;
    padding: 9px 20px;
    font-family: "Rubik", sans-serif;
}

.filter-btn.active {
    background-color: var(--sky-blue);
    border: 1px solid var(--sky-blue);
}

.search-field {
    width: 100%;
    max-width: 230px;
    margin-left: auto;
    position: relative;
    z-index: 1;
}

.search-field input {
    padding: 10px 45px 10px 20px;
    border-radius: 4px;
    border: 1px solid #c8c3c3;
}

.search-field input::placeholder {
    color: #c8c3c3 !important;
}

.src-bar {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 15px;
    width: max-content;
    height: max-content;
    bottom: 0;
    margin: auto;
}

.src-bar i {
    color: var(--black);
    font-size: 16px;
}

.pod-card {
    padding: 0 !important;
    box-shadow: unset !important;
}

.pod-card .video-thumbnail {
    border-radius: 12px;
}

.pod-card .overlay::before {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.pod-card .static-body h4 {
    margin: 15px 0;
}

.pod-card .cust-badge {
    position: absolute;
    right: 12px;
    bottom: 12px;
}

.load-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}


/* moonlight-detail  */

@media (min-width: 992px) {
    .custmize-col .row>div:first-child {
        width: 52%;
    }
    .custmize-col .row>div:last-child {
        width: 48%;
    }
}

.banner {
    padding: 200px 0 120px;
}

.banner .video-thumbnail {
    border-radius: 10px;
}

.banner .play-btn img {
    max-width: 118px;
}

.colorful-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 32px 0 28px;
}

.cust-badge {
    padding: 10px 20px;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 32px;
}

.banner .cust-badge {
    padding: 10px 20px;
}

.blue {
    background-color: rgba(0, 206, 255, 0.1);
    border: 1px solid rgba(0, 206, 255, 0.5);
    color: var(--sky-blue);
}

.green {
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.5);
    color: #008f35;
}

.gold {
    background-color: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.5);
    color: #d09e03;
}

.purple {
    background-color: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.5);
}

.banner .text p {
    margin-top: 20px;
}

.social-links h6 {
    color: var(--white);
    font-size: 20px;
    font-weight: 600;
}

.social-links.style2 a {
    border-radius: 50%;
    background-color: var(--white);
    font-size: 22px;
}


/* snapshot  */

.static-card {
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0px 6px 30px 0px #0a101c14;
    height: 100%;
}

.static-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.icon {
    min-width: 47px;
    aspect-ratio: 1;
    border-radius: 8px;
    background-color: var(--sky-blue);
    color: var(--black);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

.static-body p {
    font-weight: 300;
    margin-top: 15px;
}


/* requirement  */

.cust-badge.white {
    background-color: var(--white);
    color: var(--black);
    font-size: 12px;
    padding: 3px 8px;
}

.divider-border {
    border-bottom: 1px solid #bfdbe1 !important;
}

.product-detail {
    display: flex;
    align-items: center;
    gap: 28px;
}

.product-detail .image {
    position: relative;
    border-radius: 20px;
}

.product-detail .image img {
    max-width: 180px;
    border-radius: 20px;
}

.product-detail .cust-badge {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 12px;
}

.product-detail .text p {
    margin-top: 15px;
    font-size: 18px;
    font-weight: 400;
}

.product-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.product-price h3 span {
    font-size: 20px;
    text-transform: lowercase;
}

.requirement .single-btn .site-btn {
    font-size: 26px;
}


/* step  */

.steps {
    counter-reset: step-card;
}

.counter::before {
    counter-increment: step-card;
    content: "" counter(step-card);
    color: #cdcdcd;
    font-size: 40px;
    font-weight: 600;
    font-family: "revxneue";
    line-height: 1;
}

.steps .wrapper>.row .col-12.divider-border {
    border-color: rgba(30, 30, 30, 0.15) !important;
}

.step-card {
    display: flex;
    gap: 50px;
}

.steps .row>div:not(:last-child) .step-card {
    margin-bottom: 32px;
}

.step-card p {
    font-size: 20px;
    margin: 20px 0;
}

.step-card span {
    color: #999999;
    font-size: 18px;
}


/* plan  */

.plan {
    /* counter-reset: list-card; - Removed: using week_number from database instead */
}

.list-card .icon h3 {
    margin-top: 5px;
}

/* Removed counter - using week_number from database directly */
/* .list-card .icon h3::before {
    counter-increment: list-card;
    content: "" counter(list-card);
    line-height: 1;
} */

.list-card .text span {
    color: var(--gray);
    display: inline-block;
    margin-bottom: 5px;
}

.list-card ul {
    list-style-type: none;
    padding-left: 9px;
    margin-top: 15px;
}

.list-card li {
    position: relative;
    color: var(--gray);
    font-weight: 300;
    margin-top: 5px;
    text-transform: capitalize;
}

.list-card ul li::before {
    content: "\2022";
    position: absolute;
    left: -10px;
    color: var(--gray);
}

.text-card {
    box-shadow: unset;
}

.text-card p {
    font-style: italic;
    font-weight: 300;
    text-transform: capitalize;
}


/* curve  */

.curve {
    background-image: url(../images/bg-anime.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.center-card {
    text-align: center;
    height: 100%;
}

.center-card .static-head {
    flex-direction: column;
}

.center-card h4 {
    margin: 22px 0 15px;
}

.center-card p {
    margin: auto;
    max-width: 300px;
}


/* idea  */

.lengthy-card {
    padding: 0;
    box-shadow: unset;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lengthy-head {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 25px;
}

.lengthy-body h4 {
    margin: 20px 0 10px;
}

.length-body p {
    font-weight: 400;
    margin: 0;
}

.lengthy-foot {
    margin-top: 40px;
}


/* modals  */

.moonlight-modal .modal-dialog {
    max-width: 670px;
}

.moonlight-modal .modal-header {
    margin-bottom: 40px;
    align-items: flex-start;
}

.moonlight-modal .btn-close {
    display: none;
}

.moonlight-modal .modal-content {
    border-radius: 12px;
    padding: 36px;
}

.modal-content .modal-title {
    line-height: 1.3;
}

.submit-form label {
    color: var(--black);
    font-size: 18px;
    font-weight: 400;
}

.submit-form textarea,
.submit-form input {
    color: var(--black) !important;
    padding: 11px 20px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.submit-form input::placeholder,
.submit-form textarea::placeholder {
    color: #c8c3c3;
    font-weight: 300;
}

.submit-form textarea {
    min-height: 150px;
    resize: none;
}

.submit-form .check-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.submit-form .check-field label {
    margin-bottom: 0;
    cursor: pointer;
}

.submit-form select,
.submit-form select option {
    color: #c8c3c3;
    padding: 11px 20px;
}

.submit-form button.site-btn {
    margin-top: 20px;
    min-width: 190px;
}

.submit-form .check-field input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: #00ceff;
}

.submit-form .form-select {
    background-image: url(../images/form-chevron.svg);
}


/* media query  */

@media (max-width: 1199px) {
    h2 {
        font-size: 36px;
    }
    h3 {
        font-size: 23px;
    }
    h4 {
        font-size: 22px;
    }
    p {
        font-size: 16px;
    }
    .title p {
        margin-top: 2px;
    }
    .site-btn {
        font-size: 17px;
        padding: 9px 15px;
    }
    /* hero  */
    .hero .image {
        margin-left: 0;
    }
    /* split  */
    .newsletter h3 {
        font-size: 30px;
        margin-bottom: 20px;
    }
    .newsletter p {
        font-size: 18px;
    }
    .price-card img {
        max-width: 185px;
    }
    /* .two-colm  */
    .two-colm h4 {
        margin-bottom: 6px;
    }
    .two-colm h2 {
        margin-bottom: 10px;
    }
    .two-colm ul {
        margin: 6px 0 8px;
    }
    .two-colm ul li {
        font-size: 16px;
    }
    /* journey  */
    .text-colm br {
        display: none;
    }
    .text-colm span {
        font-size: 16px;
    }
    /* moonlight-detail  */
    h1 {
        font-size: 40px;
    }
    .colorful-badges {
        margin: 20px 0;
    }
    .banner .cust-badge {
        font-size: 14px;
        padding: 8px 15px;
    }
    .banner .text p {
        margin-top: 10px;
    }
    /* requirement  */
    .product-detail .text p {
        font-size: 16px;
        margin-top: 10px;
    }
}

@media (max-width: 991px) {
    h4 {
        font-size: 20px;
    }
    h2 {
        font-size: 32px;
    }
    .sec-padding {
        padding: 70px 0;
    }
    p {
        font-size: 14px;
    }
    /* header  */
    header {
        padding: 15px 0 !important;
    }
    .logo img {
        max-width: 40px;
    }
    .navbar-toggler {
        background-color: transparent;
        padding: 0;
        box-shadow: unset;
        color: var(--black);
        font-size: 25px;
        box-shadow: unset !important;
    }
    .navbar-toggler-icon {
        height: unset;
        width: unset;
    }
    .navbar-toggler-icon i::before {
        opacity: 1;
        color: var(--sky-blue);
    }
    .navbar-toggler-icon i::after {
        color: var(--gray);
        opacity: 1;
    }
    header nav {
        position: unset;
    }
    .navbar-collapse {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: var(--black);
        padding: 20px 4%;
    }
    header .navbar-expand-lg .navbar-nav {
        gap: 20px;
    }
    header .navbar-collapse .nav-link {
        font-size: 16px;
    }
    .navbar-nav {
        align-items: start !important;
        gap: 10px;
    }
    .vert-border {
        display: none;
    }
    /* hero  */
    .hero {
        padding: 50px 0 25px;
    }
    .logo-image img {
        max-width: 280px;
        margin: auto;
        display: block;
    }
    .banner {
        padding: 130px 0 70px;
    }
    .social-links.style2 a {
        font-size: 16px;
    }
    .product-price {
        justify-content: start;
    }
    .product-detail .image img {
        border-radius: 12px;
    }
    /* video section  */
    .play-btn img {
        max-width: 130px;
    }
    /* split  */
    .newsletter h3 {
        font-size: 18px;
    }
    .price-card img {
        max-width: 130px;
    }
    .newsletter input {
        height: 40px;
        margin-bottom: 10px;
    }
    /* two colm  */
    .two-colm h6 {
        font-size: 16px;
    }
    .two-colm ul li {
        font-size: 14px;
    }
    .cards-wrapper {
        max-width: 600px;
        margin: auto;
    }
    .btn-row {
        flex-wrap: wrap;
    }
    .text-colm {
        flex-wrap: wrap;
        align-items: start;
    }
    .text-colm .body,
    .text-colm .head {
        flex-basis: unset;
    }
    .bottom-text ul {
        margin: 10px 0 15px;
        gap: 10px;
    }
    .bottom-text ul li {
        font-size: 15px;
    }
    .bottom-text h3 {
        font-size: 22px;
    }
    .two-colm .text>span {
        font-size: 16px;
    }
    /* footer  */
    .footer-logo img {
        max-width: 150px;
    }
    .copyright p {
        font-size: 14px;
    }
    .social-links {
        gap: 5px;
    }
    .social-links a {
        min-width: 30px;
        font-size: 20px;
    }
    .hero {
        padding: 80px 0 20px;
    }
    /* moonlight-detail  */
    .header-v2 .logo img {
        max-width: 160px;
    }
    .requirement .single-btn .site-btn {
        font-size: 18px;
    }
    /* steps  */
    .step-card {
        gap: 30px;
    }
    .step-card p {
        margin: 10px 0;
        font-size: 16px;
    }
    /* podcast page  */
    .filter-content {
        gap: 12px;
    }
    .filter-content h2 {
        font-size: 25px;
    }
    .filter-btn {
        padding: 6px 14px;
        font-size: 15px;
    }
    .search-field input {
        padding: 8px 35px 8px 15px;
    }
    .search-field {
        max-width: 200px;
    }
}

@media (max-width: 767px) {
    .site-btn {
        font-size: 14px;
    }
    br {
        display: none;
    }
    .title {
        margin-bottom: 20px;
    }
    h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 19px;
    }
    .hero {
        padding: 90px 0 20px;
    }
    .sec-padding {
        padding: 50px 0;
    }
    .video-thumbnail {
        border-radius: 10px;
    }
    .overlay::before {
        border-radius: 10px;
    }
    .play-btn img {
        max-width: 90px;
    }
    .single-btn {
        margin-top: 20px;
    }
    .separator {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }
    .separator span {
        text-align: center;
        padding: 0;
    }
    .divider {
        min-height: unset;
        width: 100%;
        min-width: unset;
    }
    /* journey  */
    .img-card {
        padding: 30px 15px;
        border-radius: 10px;
    }
    .btn-row {
        margin-top: 24px;
    }
    .bottom-text ul {
        flex-direction: column;
    }
    .journey .dot {
        display: none;
    }
    .bottom-text ul {
        gap: 5px;
    }
    .moonlight-modal .modal-content {
        padding: 20px;
    }
    .moonlight-modal .modal-header {
        margin-bottom: 20px;
    }
    .moonlight-modal .btn-close {
        display: block;
    }
    .submit-form label {
        font-size: 16px;
    }
    .submit-form textarea,
    .submit-form input {
        padding: 7px 15px;
    }
    /* moonlight-detail  */
    .banner {
        padding: 90px 0 50px;
    }
    .banner .play-btn img {
        max-width: 85px;
    }
    .colorful-badges {
        flex-wrap: wrap;
    }
    .cust-badge {
        padding: 6px 12px;
    }
    .social-links.style2 a {
        font-size: 16px;
    }
    .product-price {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    .product-detail {
        flex-wrap: wrap;
    }
    .step-card {
        gap: 19px;
        margin-bottom: 24px;
    }
    .step-card p {
        margin: 4px 0;
        font-size: 14px;
    }
    .counter::before {
        font-size: 25px;
    }
    .step-card span {
        font-size: 16px;
    }
    /* .curve  */
    .curve .btn-row .site-btn {
        width: 65%;
    }
    .center-card h4 {
        margin: 0 0 8px;
    }
    .lengthy-foot {
        margin-top: 15px;
    }
    .requirement .single-btn .site-btn {
        font-size: 16px;
    }
    /* slider section  */
    .auto-slider-sec .owl-stage-outer {
        padding: 40px 0;
    }
    .short-card {
        border-radius: 12px;
    }
    /* podcast page  */
    .filter-content {
        flex-wrap: wrap;
    }
    .search-field {
        max-width: 100%;
    }
    .lengthy-head .image {
        width: 100%;
    }
    .podcast .lengthy-body h4 {
        margin: 15px 0 0;
    }
    .short-card .play-icon {
        bottom: 12px;
        left: 12px;
    }
    .steps .title h2 {
        font-size: 27px;
    }
    .product-detail .image {
        margin: auto;
        width: 100%;
    }
    .product-detail .image img {
        max-width: 100%;
    }
}