/*

Theme Name: johnnydoe

Theme URI: https://www.johnnydoe.com/

Author: Johnny Doe

*/

html {
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
    width: 100%;
    /* overflow-x: hidden; */
}

body {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 1.7;
    color: #F5F5F3;
    background-color: #000000;
}

a {
    -webkit-transition: color 0.4s ease-out;
    -moz-transition: color 0.4s ease-out;
    transition: all 0.4s ease-out;
    color: #C6A664;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #fff;
}

p {
    font-weight: 300;
    font-style: Light;
    font-size: 16px;
    line-height: 29.75px;
    color: #FFFFFFB2;
}

section {
    overflow: hidden;
}

h1,
h2 {
    font-family: "Times New Roman", serif;
    color: #C9A961;
    line-height: 1;
    font-size: clamp(46px, calc(46px + (72 - 46) * ((100vw - 375px) / (1440 - 375))), 72px);
    font-weight: 400;
}

@supports (-webkit-text-fill-color: transparent) {

    h1,
    h2 {
        background: linear-gradient(135deg, #C9A961 0%, #F4E4C1 50%, #C9A961 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* Firefox-only */
@supports (-moz-appearance: none) {

    h1,
    h2 {
        background: none;
        -webkit-text-fill-color: initial;
        color: #C9A961;
    }
}


/* h1,

@supports (-webkit-background-clip: text) {

    h1,
    h2 {
        background: linear-gradient(135deg, #C9A961 0%, #F4E4C1 50%, #C9A961 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
} */


/* --------homepage------ */

/* #home{
    padding-top: 50px;
} */

.padding-deco-1 {
    padding-top: 100px;
}

.padding-deco-2 {
    padding-top: 200px;
}

.padding-deco-3 {
    padding-top: 300px;
}

.homepage-header {
    background: url(images/homepage_header.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

#home .section-text {
    padding-bottom: 0;
}

.navbar-header {
    position: relative;
    /* height: 94px; */
    height: 110px;
}

.logo {
    width: 85px;
    height: 94px;
}

.navbar-brand {
    position: absolute;
    top: 15px;
    left: 22px;
    z-index: 100;
}

.navbar-toggler {
    border: none;
    /* margin-right: 20px; */
}

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

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-collapse ul li {
    padding: 20px;
}

.navbar-nav li.current_page_item a {
    color: #C6A664;
}

.navbar {
    background: #1A1A1B;
    border: 1px solid #0A0A0A1A;
    padding: 15px;
}

.navbar-collapse {
    flex-grow: 0;
    flex-basis: auto;
}

.navbar-nav .menu-item {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.navbar-nav .menu-item a {
    color: #fff;
}

.navbar-nav .menu-item a.active {
    color: #C6A664;
    font-weight: 500;
}

.navbar-nav .menu-item a:hover {
    color: #C6A664;
}

a.navbar-brand-text {
    display: block;
}

.navbar-brand-text h2 {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #fff !important;
    letter-spacing: 2.4px;
    line-height: 24px;
    background: none;
    -webkit-text-fill-color: #fff;
}

.navbar-brand-text p {
    font-size: 10px;
    color: #C6A664;
    letter-spacing: 1.5px;
    margin-bottom: 0;
    line-height: 1;
}

.btnContactTop {
    background-color: #1A1A1B;
    border: 1px solid #C6A664;
    padding: 11.5px 21px;
    border-radius: 5px;
    transition: all 0.4s ease-out;
}

.btnContactTop:hover {
    background-color: #c6a664;
    border: 1px solid #edcf91;
    box-shadow: 0.5px 0.5px 3px 0.5px #edcf91;
    transition: all 0.4s ease-out;
}

.btnContactTop:hover a::after {
    content: "";
    position: absolute;
    top: 1px;
    right: -25px;
    background: url(images/arrow-right-black.svg);
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    visibility: visible;
}

.btnContactTop a {
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    position: relative;
}

.btnContactTop:hover a {
    color: #1a1c1d;
    margin-right: 10px;
}

.header-text {
    max-width: 570px;
    /* padding-top: 50px; */
}

.section-top {
    position: relative;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 23.03%, #000000 100%);
}

.homepage-header .section-top h1 {
    padding-top: 50px;
}

.homepage-header .section-top p {
    font-size: 18px;
    line-height: 25.28px;
    letter-spacing: 0.36px;
    font-weight: 400;
    margin-bottom: 1.3rem;
}

.section-top h1 {
    padding-top: 20px;
}

.section-top p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 1.3rem;
}

.border-header {
    border-top: 0.5px solid;
    border-image-source: linear-gradient(90deg, #C6A664 0%, rgba(198, 166, 100, 0) 100%);
    border-image-slice: 1;
    width: 196px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.border-header-bottom {
    margin: 20px 0;
}

.brush-content {
    background: url(images/brush.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 100px 0;
}

.img-anim p {
    font-family: "Tinos", serif;
    font-weight: 400 !important;
    font-style: italic;
    font-size: 55px !important;
    line-height: 50px !important;
    font-size: clamp(30px, calc(30px + (55 - 30) * ((100vw - 375px) / (1440 - 375))), 55px) !important;
    text-align: center;
    max-width: 570px;
    margin: 0 auto;
    color: #fff;
    margin-bottom: 0 !important;
}

.img-anim.brush-content p {
    max-width: 450px;
}

.img-anim.star-content p {
    max-width: 500px;
}

.section-two-homepage .section-text {
    padding-top: 35px;
}

.section-two-homepage {
    background: url("images/homepage_section_two.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-top: -3px;
}

.section-two-homepage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60.71% 60.71% at 50% 50%,
            rgba(0, 0, 0, 0.8) 0%,
            #000 101%);
    pointer-events: none;
    z-index: 1;
}

.section-text h2 {
    font-size: clamp(32px, calc(32px + (42 - 32) * ((100vw - 375px) / (1440 - 375))), 42px);
    line-height: clamp(1.15, calc(1.3 + (1.15 - 1.3) * ((100vw - 375px) / (1440 - 375))), 1.3);
    letter-spacing: 1.44px;
    line-height: 1.2;
    position: relative;
}

.section-two-homepage h5 {
    font-family: "Times New Roman", serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28.17px;
    letter-spacing: 5px;
    text-transform: uppercase;
    position: relative;
    padding-left: 45px;
}

.section-two-homepage h5::after {
    content: "";
    background: url(images/dots.svg);
    background-repeat: no-repeat;
    width: 35px;
    height: 5px;
    position: absolute;
    left: 0;
    top: 12px;
}

.txt-section-vline {
    position: relative;
    padding-left: 15px;
    padding-top: 15px;
}

.txt-section-vline::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 0;
    border-left: 1px solid;
    border-image-source: linear-gradient(180deg, #C6A664 0%, rgba(198, 166, 100, 0) 100%);
    border-image-slice: 1;
    width: 5px;
    height: 200px;
}

p.pstrong {
    font-family: "Times New Roman", serif;
    font-weight: 400;
    color: #C9A961;
    line-height: 28.17px;
    letter-spacing: 0.43px;
}

.section-three {
    padding-top: 35px;
    padding-bottom: 60px;
    background: url("images/homepage_section_three.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-top: -6px;
}

.section-three::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60.71% 60.71% at 50% 50%,
            rgba(0, 0, 0, 0.85) 0%,
            #000 101%);
    pointer-events: none;
    z-index: 1;
}

.ctaBottom {
    background-color: #000;
    border: 1px solid #C6A664;
    padding: 11.5px 21px;
    border-radius: 5px;
    width: 294px;
    transition: all .7s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
}

.ctaBottom span {
    transition: all .3s ease;
    text-transform: uppercase;
    color: #b1955a;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 2.1px;
}

.ctaBottom span img {
    width: 16px;
    height: 16px;
}

.ctaBottom:hover .text {
    margin-right: 20px;
    color: #1A1A1B;
    cursor: pointer;
}

.ctaBottom:hover {
    background-color: #c6a664;
    border: 1px solid #edcf91;
    box-shadow: 0.5px 0.5px 3px 0.5px #edcf91;
    cursor: pointer;
}

.ctaBottom .arrow {
    width: 16px;
    height: 16px;
    background: url("/wp-content/themes/johnnydoe/images/arrow-right.svg") no-repeat center;
    background-size: contain;
    transition: background-image 0.2s ease;
}

.ctaBottom:hover .arrow {
    background-image: url("/wp-content/themes/johnnydoe/images/arrow-right-black.svg");
}

/* --------programs------ */

.section-text {
    padding-bottom: 3vw;
    z-index: 10;
    position: relative;
}

/* .programs-header {
    background: url(images/programs_header.jpg);
    background-size: cover;
    background-repeat: repeat-y;
    background-position: top center;
} */

#programs .section-top-programs {
    padding-top: 130px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.7) 45%, #000 100%);
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.7) 45%, #000 100%), url("images/programs_header.jpg");
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#programs .section-top-programs-test {
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.7) 45%, #000 100%), url("images/programs_header.jpg");
    padding-top: 130px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 300px;
}

.header-text span {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.8px;
    color: #C6A664;
    text-transform: uppercase;
}

.light-content {
    background: url(images/light.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 130px 0 70px 0;
}

#programs .section-two-programs .section-text {
    background:
        radial-gradient(60.71% 60.71% at 50% 50%,
            rgba(0, 0, 0, 0.85) 0%,
            #000000 100%),
        url("images/homepage_section_three.jpg");
    padding-bottom: 0;
    padding-top: 35px;
}

.section-two-programs {
    background: url("images/programs_section_two.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: -3px;
    margin-top: -3px;
    padding-bottom: 60px;
}

.section-two-programs::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60.71% 60.71% at 50% 50%,
            rgba(0, 0, 0, 0.8) 0%,
            #000 101%);
    pointer-events: none;
    z-index: 1;
}

.programs-box {
    padding: 40px;
    border-radius: 10px;
    border-width: 0.89px;
    background: #FFFFFF0D;
    border-top: 0.89px solid #FFFFFF0D;
    height: 100% !important;
}

.programs-box h3 {
    font-family: "Tinos", serif;
    font-weight: 400;
    font-style: SemiBold;
    font-size: 27.52px;
    line-height: 35.78px;
    letter-spacing: 0.28px;
    color: #FFFFFFF2;
}

.programs-box ul {
    border-bottom: 0.89px solid #FFFFFF1A;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.section-text ul li {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    list-style: disc;
    color: #FFFFFFA6;
    padding-bottom: 16px;
    padding-left: 10px;
}

.section-text ul li:last-child {
    padding-bottom: 0;
}

.section-text ul li::marker {
    color: #D4AF37;
}

/* --------method------ */

#method .section-top-method {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 45%, #000 100%), url("images/method_header.jpg");
    padding-top: 130px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.rose-content {
    background: url(images/rose.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 150px 0;
}

#method .section-two-method .section-text {
    padding-top: 35px;
    padding-bottom: 60px;
}

.section-two-method {
    background: url("images/method_section_two.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: -4px;
    margin-top: -6px;
}

.section-two-method::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60.71% 60.71% at 50% 50%,
            rgba(0, 0, 0, 0.8) 0%,
            #000 101%);
    pointer-events: none;
    z-index: 1;
}

.method-box {
    border-left: 1px solid #C6A664;
    padding-left: 20px;
}

.method-box h3 {
    color: #C6A664;
    font-weight: 400;
    font-size: 22px;
    line-height: 25.6px;
    letter-spacing: 0.32px;
}

/* -----------results------------- */

#results .section-top-results {
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.7) 45%, #000 100%), url("images/results_header.jpg");
    padding-top: 130px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.star-content {
    background: url(images/star.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 70px 0 70px 0;
}

#results .section-two-results .section-text {
    padding-top: 12px;
    padding-bottom: 60px;
}

.section-two-results {
    background: url("images/results_section_two.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: -4px;
    margin-top: -6px;
}

.section-two-results::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60.71% 60.71% at 50% 50%,
            rgba(0, 0, 0, 0.8) 0%,
            #000 101%);
    pointer-events: none;
    z-index: 1;
}

.section-two-results h3,
.section-two-forum h3 {
    font-family: "Tinos", serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 44.8px;
    letter-spacing: 0.28px;
    color: #FFFFFFCC;
}

.results-box ul {
    padding-left: 3px;
}

.results-box ul li::marker {
    font-size: 20px;
}

.results-box ul li {
    position: relative;
    border-left: 1px solid #C6A6641A;
    margin-bottom: 30px;
    padding-left: 20px;
    padding-bottom: 0;
    list-style: none;
}

.results-box ul li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -4px;
    width: 8px;
    height: 8px;
    background: #c6a564;
    border-radius: 50%;
    transform: translateY(-50%);
}

.results-box ul li::after {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    width: 1px;
    height: 0;
    background: #c6a564;
    transform: translateY(-50%);
    transition: height 0.4s ease;
    z-index: 1;
}

.results-box ul li:hover::after {
    height: 100%;
}

.results-box ul li:hover {
    color: #fff;
    cursor: default;
}

.border-results {
    position: relative;
    max-width: 1200px;
    margin: 40px 0;
    height: 1px;
}

/* Circle */
.border-results::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 4px;
    background: #c6a564;
    border-radius: 50%;
    transform: translateY(-50%);
}

/* Line with space after circle */
.border-results::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 25px;
    width: calc(100% - 25px);
    height: 0.5px;
    background: linear-gradient(90deg,
            #c6a56445 0%,
            #00000000 100%);
    transform: translateY(-50%);
}

/* ------------discretion----------- */
#discretion .section-top-discretion {
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.8) 35%, #000 100%), url("images/discretion_header.jpg");
    padding-top: 130px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.fume-content {
    background: url(images/fume.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 150px 0;
}

.section-two-discretion .section-text {
    padding-top: 45px;
    padding-bottom: 55px;
}

.section-two-discretion {
    background: url("images/discretion_section_two.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: -3px;
    margin-top: -3px;
}

.section-two-discretion::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60.71% 60.71% at 50% 50%,
            rgba(0, 0, 0, 0.9) 0%,
            #000 101%);
    pointer-events: none;
    z-index: 1;
}

.section-two-discretion h2 {
    border-top: 1px solid #C9A96116;
    padding-top: 25px;
}

.section-two-discretion h3 {
    font-family: "Tinos", serif;
    font-weight: 400;
    font-size: 27.52px;
    line-height: 35.78px;
    letter-spacing: 0.28px;
    color: #FFFFFFCC;
    border-top: 1px solid #C9A96126;
    padding-top: 25px;
}

.discretion-box {
    padding: 22px 0 12px 0;
}

.discretion-box ul {
    padding-left: 3px;
}

.discretion-box ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 16px;
    list-style: none;
}

.discretion-box li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #e0b45f, #4f380e);
    transform: rotate(45deg);
}

/* ---------------clients------------ */

#clients .section-top-clients {
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.8) 35%, #000 100%), url("images/clients_header.jpg");
    padding-top: 130px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.glow-content {
    background: url(images/glow.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 150px 0;
}

#clients .section-two-clients .section-text {
    padding-top: 35px;
    padding-bottom: 55px;
}

.section-two-clients {
    background: url("images/clients_section_two.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: -3px;
    margin-top: -3px;
}

.section-two-clients::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60.71% 60.71% at 50% 50%,
            rgba(0, 0, 0, 0.9) 0%,
            #000000 101%);
    pointer-events: none;
    z-index: 1;
}

.section-two-clients h3 {
    font-family: "Tinos", serif;
    font-weight: 400;
    font-size: 27.52px;
    line-height: 35.78px;
    letter-spacing: 0.28px;
    color: #FFFFFFCC;
}

.clients-box h4 {
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #C6A664CC;
    position: relative;
    padding-left: 16px;
}

.clients-box h4::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 4px;
    background: #D4AF37;
    transform: translateY(-50%);
    border-radius: 50%;
}

.clients-box p {
    padding-left: 16px;
}

.img-anim.glow-content p {
    max-width: 460px;
}


/* --------letters----------- */

#letters .section-top-letters {
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.7) 45%, #000 100%), url("images/letters_header.jpg");
    padding-top: 130px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#letters .section-two-programs {
    padding-bottom: 0px;
}

.pulse-content {
    background: url(images/pulse.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 150px 0;
}

.letters-box {
    padding: 50px;
    border-radius: 10px;
    border-width: 0.89px;
    height: 100% !important;
    background: linear-gradient(180deg, #141414 0%, #0D0D0D 100%);
    border: 1px solid #1A1A1A;
    border-radius: 3.6px;
    border-width: 1px;
}

.letters-box h3 {
    /* font-family: Playfair Display; */
    font-family: "Tinos", serif;
    font-weight: 400;
    font-style: SemiBold;
    font-size: 27.52px;
    line-height: 35.78px;
    letter-spacing: 0.28px;
    color: #FFFFFFF2;
}

.letters-box p.no-letters {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: #4A4A4A;
    padding-bottom: 27px;
}

.ctaRM {
    padding-top: 27px;
    transition: all .7s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
}

.ctaRM span {
    transition: all .3s ease;
    text-transform: uppercase;
    color: #b1955a;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 2.1px;
}

.ctaRM span img {
    width: 16px;
    height: 16px;
}

.ctaRM:hover .text {
    margin-right: 20px;
    cursor: pointer;
}

.ctaRM:hover {
    cursor: pointer;
}

.ctaRM .arrow {
    width: 16px;
    height: 16px;
    background: url("images/arrow-right.svg") no-repeat center;
    background-size: contain;
}

/* --------forum----------- */

/* .forum-header {
    background: url("images/forum_header.jpg");
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
} */

.hero-header-forum {
    width: 80%;
    height: 80dvh;
    margin: 0 auto;
    /* width: 100%;
    height: 100dvh; */
    /* background-image: url("images/hero-forum.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat; */
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.3) 45%, #000 100%), url("images/hero-forum.jpg");
    /* background: radial-gradient(60.71% 60.71% at 50% 50%, rgba(0, 0, 0, 0.4) 0%, #000 100%), url("images/hero-forum.jpg"); */
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
}

#forum .section-top-forum {
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.7) 45%, #000 100%), url("images/forum_header.jpg");
    padding-top: 80px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#forum .section-top-forum a {
    text-decoration: underline;
}

#forum .section-top-forum a:hover {
    color: #FFFFFFB2;
}

#forum .ctaBottom {
    margin-bottom: 20px;
}

.ctaBottomForum {
    /* width: 294px; */
    transition: all .7s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
}

.ctaBottomForum span {
    transition: all .3s ease;
    color: #FFFFFF;
}

.ctaBottomForum span img {
    width: 16px;
    height: 16px;
}

.ctaBottomForum:hover .text {
    margin-right: 20px;
    color: #b1955a;
    cursor: pointer;
}

.ctaBottomForum:hover {
    cursor: pointer;
}

.ctaBottomForum .arrow {
    width: 16px;
    height: 16px;
    background: url("/wp-content/themes/johnnydoe/images/arrow-right-white.svg") no-repeat center;
    background-size: contain;
    transition: background-image 0.2s ease;
}

.ctaBottomForum:hover .arrow {
    background-image: url("/wp-content/themes/johnnydoe/images/arrow-right.svg");
}

.section-two-forum a {
    color: #fff;
    text-decoration: underline;
}

.section-two-forum a:hover {
    color: #c6a564;
    text-decoration: underline;
}

.dignumbers-content {
    background: url(images/dignumbers.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 100px 0;
}

#forum .section-two-forum .section-text {
    padding-top: 35px;
    padding-bottom: 55px;
}

.section-two-forum {
    background: url("images/forum_header.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: -3px;
    margin-top: -3px;
}

.section-two-forum::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60.71% 60.71% at 50% 50%,
            rgba(0, 0, 0, 0.8) 0%,
            #000 101%);
    pointer-events: none;
    z-index: 1;
}

.section-two-forum h5 {
    position: relative;
    font-family: "Times New Roman", serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28.17px;
    letter-spacing: 5px;
    text-transform: uppercase;
    padding-left: 45px;
    padding-bottom: 30px;
    color: #C9A961;
}

.section-two-forum h5::before {
    content: "";
    background: url(images/dots.svg);
    background-repeat: no-repeat;
    width: 35px;
    height: 5px;
    position: absolute;
    left: 0;
    top: 12px;
}

/* --------about----------- */

#about .section-top-about {
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.8) 45%, #000 100%), url("images/about_header.jpg");
    padding-top: 130px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#about .section-two-forum .section-text {
    padding-top: 35px;
    padding-bottom: 35px;
}

.fingerprints-content {
    background: url(images/fingerprints.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 150px 0;
}

/* --------contact----------- */

#contact .section-top-contact {
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.85) 30%, #000 100%), url("images/contact_header.jpg");
    padding-top: 100px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.particles-content {
    background: url(images/particles.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 320px 0;
}

#contact .header-text {
    max-width: 635px;
}

input,
textarea,
select.form-select {
    width: 100%;
    padding: 20px;
    background-color: #0b0b0c;
    border: 1px solid #C6A6644D;
    color: #F5F5F366;
    text-transform: uppercase;
    letter-spacing: 2.1px;
    font-size: 14px;
    border-radius: 0;
    line-height: 1.2;
}

input[type=submit] {
    background: none;
    border: 1px solid #b1955a;
    color: #b1955a;
}

.mobile-menu-inner {
    background-color: #1A1A1B;
    margin-top: 20px;
    padding-bottom: 20px;
}

.contact-box {
    height: 100% !important;
}

select.form-select {
    color: #86868666;
}

/* --------footer------ */

#footer {
    background: #0B0B0C;
    border-top: 1px solid #C6A6641A;
    padding: 42px 0;
}

p.pfooter {
    font-family: "Times New Roman", serif;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 5px;
    color: #FFFFFF99;
    text-align: right;
}

#footer a {
    /* font-family: "Times New Roman", serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle; */
    color: #FEDB95;
}

#footer a:hover {
    color: #fff;
}

.topMenu.is-sticky {
    position: fixed;
    top: 0;
    background: #1c1c1c;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    z-index: 3000;
}

/* -------------------------------responsive design */

@media (max-width: 1199px) {
    .navbar-collapse {
        width: 100% !important;
    }

    .navbar-header {
        height: auto;
    }

    .logo {
        width: 40px;
        height: 44px;
    }

    .border-menu-mobile {
        border-bottom: 1px solid #00000033;
        z-index: 100;
        position: relative;
    }

    .navbar-nav {
        align-items: end;
        padding-top: 2%;
    }

    .top-menu-mobile {
        background: transparent;
        transition: background-color 0.2s ease;
        padding: 20px 0;
        box-sizing: border-box;
    }

    .top-menu-mobile.affix {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        display: block;
        z-index: 10000;
        background-color: #000000cb;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        /* Safari */
    }

    .top-menu-mobile:has(.navbar-collapse.show) {
        background: #000;
    }

    .btnContactTop {
        margin: 0px 25px;
        text-align: center;
    }

    .navbar-collapse ul li {
        width: 90%;
        margin: 0 auto;
    }

    .section-top-homepage {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 9.9%, #000000 100%);
    }

    /* .programs-header {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/programs_header.jpg");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    } */

    /* #programs .section-top-programs {
        background: none;
    } */

    .results-header>* {
        position: relative;
        z-index: 1;
    }

    .navbar-collapse ul li.current-menu-item {
        background: #BB9A490D;
        border: 1px solid #BB9A491A;
        border-radius: 5px;
    }

    .homepage-header {
        background:
            rgba(0, 0, 0, 0.6) url(images/homepage_header.jpg);
        background-blend-mode: overlay;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    }

    .homepage-header::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 0;
    }

    #discretion .section-top-discretion {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.8) 35%, #000 100%), url("images/discretion_header.jpg");
    }

    .img-anim p {
        max-width: 410px;
    }

    .img-anim.star-content p {
        max-width: 400px;
    }

    .img-anim.glow-content p {
        max-width: 350px;
    }

    .section-three {
        padding-bottom: 2vw;
    }

    .ctaBottomForum .arrow {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 1024px) {

    #programs .section-top-programs {
        /* background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/programs_header.jpg"); */
        /* background-position: top center; */
        padding-top: 100px;
    }

    #method .section-top-method {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/method_header.jpg");
        background-position: top center;
        padding-top: 100px;
    }

    #results .section-top-results {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/results_header.jpg");
        background-position: top center;
        padding-top: 100px;
    }

    #discretion .section-top-discretion {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/discretion_header.jpg");
        background-position: top left;
        padding-top: 100px;
    }

    #clients .section-top-clients {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/clients_header.jpg");
        background-position: top center;
        padding-top: 100px;
    }

    #letters .section-top-letters {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/letters_header.jpg");
        background-position: top left;
        padding-top: 83px;
    }

    #forum .section-top-forum {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/forum_header.jpg");
        background-position: top center;
        padding-top: 50px;
    }

    #about .section-top-about {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/about_header.jpg");
        background-position: top center;
        padding-top: 100px;
    }

    #contact .section-top-contact {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/contact_header.jpg");
        background-position: top center;
        padding-top: 53px;
    }

    .letters-box p.no-letters,
    .ctaRM {
        padding-bottom: 0;
    }

    .letters-box {
        padding: 30px;
    }

    .star-content {
        padding: 100px 0 100px 0;
    }

    #forum .section-two-forum .section-text {
        padding-top: 1vw;
    }

    #results .section-top-results .padding-deco-2 {
        padding-top: 170px;
    }

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

    .fingerprints-content {
        background: url(images/fingerprints_m.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        padding: 120px 0;
    }
}

@media (max-width: 918px) {
    .padding-deco-2 {
        padding-top: 170px;
    }
}

@media (max-width: 767px) {
    p {
        font-size: 14px;
        line-height: 24px;
        color: #FFFFFFB2;
    }

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

    p.pfooter {
        text-align: center;
        padding-top: 20px;
        border-top: 1px solid #FFF3;
        margin-top: 20px;
    }

    .padding-deco-1,
    .padding-deco-2,
    .padding-deco-3,
    #results .section-top-results .padding-deco-2 {
        padding-top: 0px;
    }

    .brush-content {
        padding: 50px 0;
    }

    #programs .section-top-programs {
        /* background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/programs_header.jpg"); */
        background-position: top center;
        padding-top: 150px;
    }

    #method .section-top-method {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 15%, rgba(0, 0, 0, 0.75) 30%, #000 100%), url("images/method_header.jpg");
        background-position: top center;
        padding-top: 150px;
    }

    #results .section-top-results {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 15%, rgba(0, 0, 0, 0.75) 30%, #000 100%), url("images/results_header.jpg");
        background-position: top center;
        padding-top: 150px;
    }

    #discretion .section-top-discretion {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/discretion_header.jpg");
        background-position: top center;
        padding-top: 150px;
    }

    #clients .section-top-clients {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/clients_header.jpg");
        background-position: top center;
        padding-top: 150px;
    }

    #letters .section-top-letters {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/letters_header.jpg");
        background-position: top center;
        padding-top: 150px;
    }

    #forum .section-top-forum {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/forum_header.jpg");
        background-position: top center;
        padding-top: 150px;
    }

    #about .section-top-about {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.7) 35%, #000 100%), url("images/about_header.jpg");
        background-position: top center;
        padding-top: 150px;
    }

    #contact .section-top-contact {
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.8) 35%, #000 100%), url("images/contact_header.jpg");
        background-position: top center;
        padding-top: 150px;
    }

    .light-content,
    .star-content {
        padding: 40px 0 40px 0;
    }

    .rose-content,
    .glow-content,
    .dignumbers-content {
        padding: 40px 0 40px 0;
    }

    .pulse-content {
        padding: 50px 0 60px 0;
    }

    .fume-content,
    .particles-content {
        padding: 40px 0;
    }

    .fingerprints-content {
        padding: 50px 0 30px 0;
    }

    .img-anim p {
        max-width: 400px;
        margin-bottom: 0 !important;
    }

    .img-anim.brush-content p {
        max-width: 300px;
    }

    .section-three {
        padding-bottom: 20px;
    }
}

@media (max-width:600px) {
    .img-anim p {
        max-width: 300px;
    }

    .img-anim.light-content p {
        max-width: 350px;
    }

    .img-anim.brush-content p {
        max-width: 250px;
    }

    .section-padding-mobile {
        padding-left: 25px;
        padding-right: 25px;
    }

    .particles-content {
        background: url(images/particles_mobile.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        padding: 50px 0;
    }

    h1,
    h2 {
        text-align: center;
    }

    .border-header {
        border-image-source: linear-gradient(90deg, rgba(198, 166, 100, 0) 0%, #C6A664 53.85%, rgba(198, 166, 100, 0) 100%);
        margin: 0 auto;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .header-text {
        text-align: center;
    }

    .section-top-homepage::after {
        background: none;
    }

    #programs .section-top-programs {
        padding-top: 120px;
    }

    #method .section-top-method {
        padding-top: 120px;
    }

    #results .section-top-results {
        padding-top: 120px;
    }

    #discretion .section-top-discretion {
        padding-top: 120px;
    }

    #clients .section-top-clients {
        padding-top: 120px;
    }

    #letters .section-top-letters {
        padding-top: 120px;
    }

    #forum .section-top-forum {
        padding-top: 70px;
    }

    #about .section-top-about {
        padding-top: 120px;
    }

    #contact .section-top-contact {
        padding-top: 70px;
    }

    .ctaBottom {
        width: 100%;
    }

    .img-anim p {
        max-width: 70%;
        line-height: 1.2 !important;
    }

    .title-dots {
        text-align: center;
    }

    .section-two-forum .title-dots h5 {
        display: inline-flex;
        align-items: center;
    }

    .section-two-forum h2 {
        padding-bottom: 10px;
    }
}

@media (max-width:576px) {
    .navbar-toggler {
        margin-right: 20px;
    }
}

@media (max-width:475px) {

    .img-anim.fume-content p {
        max-width: 80%;
    }

    .img-anim.pulse-content p {
        max-width: 90%;
    }

    .section-two-discretion h2 {
        border-top: 1px solid #c9aa6126;
    }

    .ctaBottomForum:hover .text {
        margin-right: 0px;
    }

    .ctaBottomForum .arrow {
        width: 30px;
        height: 30px;
    }
}