/* ================================= */
/* ===== Base / Reset (minimal) ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

a {
    text-decoration: none;
    transition: 0.2s all ease-in-out;
    cursor: pointer;
}

a:-webkit-any-link:focus-visible {
    /* outline: 0px; */
    outline-color: transparent;
}

p {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

/* =================== */
/* ===== Body ===== */
html {
    scroll-behavior: smooth;
}

body {
    color: var(--clr-body, black);
    background: var(--bg-body, white);
    font-size: var(--body-fs, 1rem);
    font-weight: 400;
    font-family: var(--body-ff, 'Arial'), sans-serif;
    position: relative;
}

/* ======================== */
/* ===== Variables ===== */
:root {
    --bg-body: #ffffff;
    --clr-body: #4A5565;
    --body-fs: 1rem;
    --body-ff: 'Inter';
    /* --body-ff: 'Ibarra Real Nova'; */

    --container-width: min(1200px, 92vw);

    --clr-primary: #03AAF0;
    --clr-secondary: #AE864B;
    --clr-warning: #FAA52E;
    --clr-success: #09ca5f;
    --clr-danger: #09ca5f;

    --header-top: 40px;
}

/* ======================== */
/* ===== Components ===== */
.brth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid;
    padding: 1rem;
    font-size: 16px;
    line-height: 1.4;
    border-radius: 1rem;
    cursor: pointer;
    box-sizing: border-box;
}

.brth-btn.btn-lg {
    height: 74px;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    border-width: 3px;
}

.brth-btn.btn-primary {
    border-color: #00B8DB;
    background-color: var(--clr-primary);
    color: white;

}

.brth-tag {
    background: #00364C;
    display: inline-flex;
    border-radius: 40vw;
    padding: 7px 12px;
    color: #F8FBFF;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    text-transform: uppercase;
    align-items: center;
    gap: 8px;
}

.brth-tag.tag-sm {
    padding: 4px 7px;
    font-size: 8px;
    font-weight: 500;
    line-height: 10px;
}

.brth-tag.tag-primary {
    background: #00A3E01A;
    color: var(--clr-primary);
}

.brth-tag.tag-warning {
    background: #FAA52E;
    color: #3F2500;
}


/* ======================== */
/* ===== LAYOUT ===== */
/* =-=-= Containers =-=-= */
.container {
    width: var(--container-width);
    margin-inline: auto;
}

/* =-=-= Header =-=-= */
.brth-header {
    position: absolute;
    top: 40px;
    inset-inline: 0;
    z-index: 5;
}

.header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.5rem, 4vw, 6rem);
    container-type: inline-size;
    container-name: header;
}

.nav {
    padding-block: 16px;
    padding-inline: 24px;
    border-radius: 17px;
    background: #DFF5FF17;
}

.nav .nav-list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 4vw, 42px);
}

.nav .nav-list li>a {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: white;
}

.nav .nav-list li>a:hover,
.nav .nav-list li>a.text-warning:hover {
    color: #f46f30;
    text-decoration: underline;
}

.nav .nav-list li>a.text-warning {
    color: #FCB92C;
}

@media screen and (max-width: 992px) {
    .nav {
        display: none;
    }
}

/* =-=-= Footer =-=-= */
.brth-footer {
    background-color: #04AAF0;
    padding-block: 32px;
}

.footer-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.brth-footer-links {
    background: #152645;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    min-height: 54px;
}

.brth-footer-links>a {
    margin-inline: 16px;
    position: relative;
    color: white;
    font-size: 10px;
    text-transform: uppercase;
}

.brth-footer-links>a:not(:last-child):before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: white;
    inset-inline-end: -16px;
}

@media screen and (max-width: 450px) {
    .footer-wrapper {
        justify-content: center;
    }
}

/* ======================== */
/* ===== General ===== */
.svg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ======================== */
/* ===== Sections ===== */

/* =-=-= Hero =-=-= */
.brth-hero {
    min-height: 100svh;
    background-image: url('../media/new/hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    position: relative;
    isolation: isolate;
    place-content: end;
    padding-bottom: 40px;
}

.brth-hero::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    background: linear-gradient(90deg, rgba(33, 102, 131, 0.19) 0%, rgba(0, 8, 31, 0.95) 100%);
    background-blend-mode: hard-light;
    z-index: 2;
    rotate: 180deg;
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(110%) contrast(105%);
}


.hero-wrapper {
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-wrapper>h2 {
    font-size: clamp(12px, 3vw, 16px);
    font-weight: 400;
    line-height: 2;
    color: white;
    margin-bottom: 30px;
}

.hero-wrapper>h3 {
    font-family: 'Ibarra Real Nova';
    font-size: clamp(35px, 11vw, 130px);
    font-weight: 700;
    line-height: clamp(40px, 5vw, 85px);
    color: #DFF5FF;
    margin-bottom: 30px;
}

.hero-wrapper>h3 span {
    font-size: clamp(20px, 5vw, 70px);
    font-weight: 700;
    line-height: clamp(40px, 5vw, 85px);
    color: #DFF5FF;
}

.hero-speaker {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 1rem;
    justify-self: center;
    text-align: start;
}

.hero-speaker .speaker-img {
    width: 114px;
    height: 110px;
    border-radius: 100%;
}

.hero-speaker .speaker-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-speaker .speaker-name {
    font-weight: 600;
    font-size: clamp(14px, 3vw, 20px);
    line-height: 27px;
    color: white;
}

.hero-wrapper>p {
    font-size: 16px;
    line-height: 24px;
    color: white;
}

.hero-wrapper>p:not(:last-of-type) {
    margin-bottom: 16px;
}

.hero-wrapper>.brth-btn {
    font-size: clamp(18px, 3vw, 30px);
    font-weight: 600;
    line-height: 28px;
    color: white;
    padding-inline: 20px;
    margin-bottom: 18px;
}

.hero-wrapper>.brth-btn svg {
    height: 30px;
    width: auto;
}

.hero-wrapper>.brth-btn+p {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

/* =-=-= Badges =-=-= */
.brth-badges {
    padding: 28px;
    background: #07193A;
}

.brth-badges .badges-wrapper {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(166px, 1fr));
    max-width: 664px;
    row-gap: 30px;
}

.brth-badges .badges-wrapper .badge-item {
    text-align: center;
}

/* =-=-= What =-=-= */
.brth-what {
    padding-block: 92px 86px;
}

.brth-what-wrapper {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 3rem;
}

.what-content>p {
    font-size: 18px;
    line-height: 31px;
    color: #1F293A;
}

.what-content>p:not(:last-child) {
    margin-bottom: 40px;
}

.what-content>p:not(:first-child)>span {
    display: block;
    margin-bottom: 16px;
}

.what-img-wrapper {
    display: grid;
    align-items: end;
    position: relative;
    width: 100%;
    max-width: 550px;
    aspect-ratio: 1/1;
    justify-self: end;
    isolation: isolate;
}

.what-img-wrapper:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(26, 26, 26, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
    top: 0;
    border-radius: 24px;
    /* z-index: -1; */
}

.what-img-wrapper>img {
    grid-column: 1 / 1;
    grid-row: 1 / 2;
    min-height: 663px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0px 25px 50px -12px #00000040;
}

.what-img-wrapper .img-content {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    z-index: 1;
    margin-bottom: 40px;
}

.img-content .hero-speaker {
    gap: 0;
    margin-bottom: 14px;
}

.img-content .hero-speaker .speaker-img {
    width: 128px;
    height: 123px;
}

.img-content .hero-speaker .speaker-name {
    background: #00000099;
    padding-block: 20px;
    padding-inline: 70px 50px;
    border-radius: 14px;
    margin-inline-start: -30px;
    z-index: -1;
    font-size: 18px;
    line-height: 25px;
    font-weight: 600;
}

.img-content .logo-najahi {
    width: 145px;
    height: auto;
    margin-inline: auto;
}

@media screen and (max-width: 1030px) {
    .what-img-wrapper {
        justify-self: center;
    }
}

@media screen and (max-width: 550px) {
    .brth-what-wrapper {
        grid-template-columns: 1fr;
    }

    .img-content .hero-speaker {
        scale: 0.8;
    }

    .img-content .hero-speaker .speaker-img {
        width: 128px;
        height: auto;
    }

    .img-content .hero-speaker .speaker-name {
        padding-inline: 45px 15px;
        font-size: 14px;
    }
}

/* =-=-= In-Person =-=-= */
.brth-inperson {
    background: #EBF4FF;
    padding-block: 60px 74px;
    text-align: center;
}

.brth-inperson .brth-tag {
    gap: 8px;
    margin-bottom: 16px;
}

.inperson-wrapper>h2 {
    font-family: 'Playfair Display';
    font-size: clamp(35px, 5vw, 60px);
    font-weight: 500;
    line-height: 60px;
    color: #1A1A1A;
    margin-bottom: 30px;
}

.inperson-wrapper>p {
    font-size: clamp(14px, 3vw, 20px);
    font-weight: 400;
    line-height: clamp(18px, 3vw, 36px);
    color: #1A1A1A99;
    margin-inline: auto;
    max-width: 68ch;
    margin-bottom: 40px;
}

.inperson-img {
    max-width: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    border-radius: 24px;
    box-shadow: 0px 25px 50px -12px #00000040;
    position: relative;
    margin-bottom: 25px;
}

.inperson-img:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(179.73deg, rgba(115, 115, 115, 0.15) 71.42%, rgba(0, 0, 0, 0.3) 99.76%);
    border-radius: 24px;
}

.inperson-img img {
    border-radius: 24px;
    object-fit: cover;
    max-height: 500px;
    width: 100%;
    height: 100%;
}

.inperson-wrapper>ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(566px, 1fr));
    gap: 16px;
}

.inperson-wrapper>ul li {
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: white;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: #1A1A1A;
    text-align: start;
}

.inperson-wrapper>ul li .svg-icon {
    width: 56px;
    height: 56px;
    padding: 14px;
    background: #00A3E01A;
    color: var(--clr-primary);
    border-radius: 14px;
}

.inperson-wrapper>ul li span:not(.svg-icon) {
    max-width: 32ch;
}

.inperson-wrapper>ul li:nth-child(2) span:not(.svg-icon) {
    max-width: 30ch;
}

@media screen and (max-width: 570px) {
    .inperson-wrapper>ul {
        grid-template-columns: 1fr;
    }

    .inperson-wrapper>ul li {
        flex-direction: column;
        text-align: center;
    }
}

/* =-=-= Trusted =-=-= */
.brth-trusted {
    padding-block: 80px 96px;
    text-align: center;
}

.brth-trusted .brth-tag {
    gap: 8px;
    margin-bottom: 24px;
}

.trusted-wrapper>h2 {
    font-family: Playfair Display;
    font-size: clamp(35px, 5vw, 48px);
    font-weight: 500;
    line-height: 1;
    color: #1A1A1A;
    margin-bottom: 16px;
}

.trusted-wrapper>p {
    font-size: clamp(14px, 3vw, 18px);
    font-weight: 500;
    line-height: 1.8;
    color: #1A1A1A99;
    margin-inline: auto;
    margin-bottom: 60px;
    max-width: 50ch;
}

.trusted-wrapper>ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 42px;
}

.trusted-wrapper>ul li {
    border: 1px solid #1A1A1A0D;
    border-radius: 16px;
    box-shadow: 2px 4px 7.7px 0px #00000026;

}

.trusted-wrapper>ul li .item-img {
    max-height: 260px;
}

.trusted-wrapper>ul li img {
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
    max-height: 260px;
    width: 100%;
    object-fit: cover;
}

.trusted-wrapper>ul li:first-child img {
    object-position: 0 -95px;
}

.trusted-wrapper>ul li:nth-child(2) img {
    object-position: 0 -10px;
}

.trusted-wrapper>ul li:last-child img {
    object-position: top;
}

.trusted-wrapper>ul li .item-content {
    padding: 24px;
    text-align: start;
}

.trusted-wrapper>ul li .item-content>h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 24px;
    color: #1A1A1A;
    margin-bottom: 5px;
}

.trusted-wrapper>ul li .item-content>h4 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--clr-primary);
    margin-bottom: 12px;
}

.trusted-wrapper>ul li .item-content>p {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    line-height: 24px;
    color: #1A1A1AB2;
}

/* =-=-= Leave =-=-= */
.brth-leave {
    padding-block: 96px 56px;
    background: #152645;
    color: white;
}

.leave-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 24px;
}

.leave-content .brth-tag {
    margin-bottom: 24px;
}

.leave-content h2 {
    font-family: Playfair Display;
    font-size: clamp(30px, 5vw, 48px);
    font-weight: 500;
    line-height: 1;
    margin-bottom: 16px;
}

.leave-content>p {
    font-size: clamp(14px, 3vw, 18px);
    font-weight: 400;
    line-height: clamp(18px, 3vw, 32px);
    margin-bottom: 60px;
    color: #FFFFFFB2;
    max-width: 45ch;
}

.leave-content .leave-img img {
    min-height: auto;
}

.leave-content>ul {
    margin-bottom: 46px;
}

.leave-content>ul li {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #FFFFFFCC;
    font-size: 16px;
    line-height: 28px;
}

.leave-content>ul li:not(:last-child) {
    margin-bottom: 20px;
}

.leave-content>ul li .svg-icon {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background: #00A3E01A;
    color: var(--clr-primary);
    padding: 4px;
}

.leave-slogan {
    padding: 24px;
    margin-bottom: 54px;
    background: #00A3E01A;
    border-radius: 16px;
    max-width: 550px;
}

.leave-slogan>h3 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #FFFFFF99;
    margin-bottom: 8px;
}

.leave-slogan>p {
    font-family: Playfair Display;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: white;
}

.leave-img {
    margin-bottom: 50px;
}

.leave-img img {
    min-height: 674px;
    width: 100%;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0px 25px 50px -12px #00000040;
}

.leave-actions {
    text-align: center;
}

.leave-actions .brth-btn {
    font-size: clamp(16px, 3vw, 30px);
}

@media screen and (min-width: 981.98px) {
    .leave-content .leave-img {
        display: none;
    }
}

@media screen and (max-width: 982px) {
    .leave-wrapper>.leave-img {
        display: none;
    }
}

@media screen and (max-width: 570px) {
    .leave-wrapper {
        grid-template-columns: 1fr;
    }
}

/* =-=-= EXPERIENCE =-=-= */
.brth-experience {
    padding-block: 60px;
    text-align: center;
}

.brth-experience .brth-tag {
    margin-bottom: 24px;
}

.brth-experience h2 {
    font-family: Playfair Display;
    font-size: clamp(35px, 5vw, 60px);
    font-weight: 500;
    line-height: 1;
    color: #1A1A1A;
    margin-bottom: 24px;
}

.brth-experience p {
    font-size: clamp(14px, 3vw, 20px);
    font-weight: 400;
    line-height: clamp(18px, 5vw, 36px);
    color: #1A1A1A99;
    margin-bottom: 64px;
    margin-inline: auto;
    max-width: 50ch;
}

.brth-experience ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    text-align: start;
    gap: 24px;
}

.brth-experience ul li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--clr-primary);
    border-radius: 14px;
    background: #00A3E00D;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #1A1A1A;
}

.brth-experience ul li .svg-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #00A3E01A;
    color: var(--clr-primary);
}

.brth-experience ul li>span {
    max-width: 44ch;
}

@media screen and (max-width: 550px) {
    .brth-experience ul {
        grid-template-columns: 1fr;
    }
}

/* =-=-= GUIDED =-=-= */
.brth-guided {
    padding-block: 60px 100px;
}

.guided-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 32px;
}

.guided-wrapper .guided-img img {
    border-radius: 24px;
    box-shadow: 0px 25px 50px -12px #00000040;
    object-fit: cover;
    object-position: -80px;
}

.guided-wrapper>.guided-img img {
    min-height: 674px;
}

.guided-wrapper .guided-content .brth-tag {
    margin-bottom: 10px;
}

.guided-wrapper .guided-content h2 {
    font-family: Playfair Display;
    font-size: 40px;
    font-weight: 500;
    line-height: 48px;
    color: #1A1A1A;
    margin-bottom: 19px;
}

.guided-wrapper .guided-content>p {
    font-size: 18px;
    line-height: 32px;
    color: #1A1A1A;
    margin-bottom: 19px;
}

.guided-wrapper .guided-content ul {
    margin-bottom: 30px;
}

.guided-wrapper .guided-content ul li {
    display: flex;
    align-items: center;
    gap: 20px;
}

.guided-wrapper .guided-content ul li:not(:last-child) {
    margin-bottom: 24px;
}

.guided-wrapper .guided-content ul li .svg-icon {
    width: 48px;
    height: 48px;
    color: white;
    background: var(--clr-primary);
    border-radius: 14px;
}

.guided-wrapper .guided-content ul li .item-title h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: #3E2723;
    margin-bottom: 4px;
}

.guided-wrapper .guided-content ul li .item-title p {
    font-size: 16px;
    line-height: 24px;
    color: #4A5565;
}

.guided-wrapper .guided-content .guided-quote {
    border: 1px solid #E5E7EB;
    padding: 13px 24px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    font-style: italic;
    max-width: 50ch;
}

@media screen and (max-width: 992px) {
    .guided-wrapper {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 1024px) {
    .guided-wrapper .guided-img img {
        min-height: auto;
        object-position: unset;
    }
}

/* =-=-= WHOFOR =-=-= */
.brth-whofor {
    padding-block: 56px 100px;
    background: #EBF4FF;
    text-align: center;
}

.whofor-title .brth-tag {
    margin-bottom: 24px;
}

.whofor-title h2 {
    font-family: Playfair Display;
    font-size: clamp(35px, 5vw, 60px);
    font-weight: 500;
    line-height: 1;
    color: #1A1A1A;
    margin-bottom: 34px;
    margin-inline: auto;
    max-width: 18ch;
}

.whofor-title p {
    font-size: clamp(14px, 3vw, 20px);
    line-height: clamp(18px, 3vw, 36px);
    margin-bottom: 45px;
    color: #1A1A1A99;
}

.whofor-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 50px;
    align-items: center;
    text-align: start;
    margin-inline: 55px;
}

.whofor-wrapper .whofor-content {
    padding: 30px;
    border-radius: 24px;
    border: 1px solid #1A1A1A1A;
    background: white;
    height: 100%;
    box-shadow: 0px 8px 10px -6px #0000001A, 0px 20px 25px -5px #0000001A;
}

.whofor-wrapper .whofor-content h3 {
    font-family: Playfair Display;
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    color: #1A1A1A;
    margin-bottom: 30px;
}

.whofor-wrapper .whofor-content ul {
    margin-bottom: 32px;
}

.whofor-wrapper .whofor-content ul li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    color: #1A1A1ACC;
}

.whofor-wrapper .whofor-content ul li:not(:last-child) {
    margin-bottom: 24px;
}

.whofor-wrapper .whofor-content ul li .svg-icon {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    color: var(--clr-primary);
    background: #00A3E01A;
}

.whofor-wrapper .whofor-content ul li span:not(.svg-icon) {
    max-width: 34ch;
}

.whofor-wrapper .whofor-content>p {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: #1A1A1AB2;
}

.whofor-wrapper .whofor-img {
    height: 100%;
}

.whofor-wrapper .whofor-img img {
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0px 25px 50px -12px #00000040;
}

@media screen and (max-width: 992px) {
    .whofor-wrapper {
        margin-inline: 0;
    }
}

/* =-=-= MAIN TICKETS =-=-= */
.brth-main-tickets {
    padding-block: 77px;
    background: #152645;
    color: white;
    text-align: center;
}

.brth-main-tickets .brth-tag {
    margin-bottom: 28px;
}

.main-tickets-wrapper>h2 {
    font-family: Ibarra Real Nova;
    font-size: clamp(40px, 7vw, 130px);
    font-weight: 700;
    line-height: clamp(48px, 5vw, 150px);
    color: #DFF5FF;
    margin-bottom: 10px;
}

.main-tickets-wrapper>h3 {
    font-family: Ibarra Real Nova;
    font-size: clamp(30px, 5vw, 66px);
    font-weight: 700;
    line-height: clamp(38px, 5vw, 74px);
    color: #DFF5FF;
    margin-bottom: 37px;
}

.main-tickets-wrapper>ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.main-tickets-wrapper>ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
}

.main-tickets-wrapper>ul li .svg-icon {
    width: 56px;
    height: 56px;
    background: #00A3E01A;
    border-radius: 14px;
    color: #00A3E0;
    margin-bottom: 13px;
}

.main-tickets-wrapper>ul li .register-desc-wrapper h3 {
    opacity: 0.5;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.main-tickets-wrapper>li .register-desc-wrapper p {
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 600;
    line-height: 1.55;
    margin-bottom: 4px;
}

.main-tickets-wrapper .img-wrapper {
    max-width: 650px;
    margin-inline: auto;
    margin-bottom: 100px;
}

/* -=-=-=-=-=-=-=-=- */
.event-register-tickets-wrapper {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    text-align: start;
    margin-bottom: 48px;
}

.event-register-ticket {
    padding: 40px 25px;
    border-radius: 20px;
    background: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.event-register-ticket>h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: var(--ticket-title-clr, #1F293A);
}

.event-register-ticket>h4 {
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: var(--ticket-title-clr, #152645);
    margin-bottom: 21px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--ticket-title-border-clr, #15264575);
}

.event-register-ticket .ticket-price {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ticket-price-border-clr, #15264575);
}

.event-register-ticket .ticket-price>span {
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    color: var(--ticket-price-clr, #152645);
}

.event-register-ticket ul {
    flex: 1 0 0;
}

.event-register-ticket>.ticket-tag {
    position: absolute;
    inset-inline: 0;
    margin-inline: auto;
    display: inline-flex;
    justify-content: center;
    top: -16px;
    box-shadow: 0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A;
    width: max-content;
    padding: 8px 20px;
    border-radius: 40vw;
    background: var(--ticket-tag-bg, #152645);
    color: var(--ticket-tag-clr, white);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
}

.event-register-ticket ul {
    padding-block: 30px;
}

.event-register-ticket ul li {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    color: var(--ticket-list-clr, #152645);
    margin-bottom: 20px;
    padding-inline-start: 24px;
    max-width: 31ch;
}

.event-register-ticket ul li:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: var(--ticket-list-bullet-clr, #152645);
    inset-block-start: 10px;
    inset-inline-start: 9px;
}

.event-register-ticket ul li .brth-tag {
    color: white;
    background: #1F293A;
}

.event-register-ticket:not(.most-popular):not(.most-value) ul li .brth-tag {
    background: #A8CEDE;
    color: #152645;
}

.event-register-ticket .brth-btn {
    background: var(--ticket-btn-bg, #152645);
    color: var(--ticket-btn-clr, white);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-transform: uppercase;
    border: none;
    margin-bottom: 8px;
}

.ticket-valid-period {
    font-size: 13px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    color: #152645;
}

/* =-=-= Most Popular =-=-= */
.event-register-ticket.most-popular {
    background-color: #00A3E0;
    --ticket-tag-bg: #FAA52E;
    --ticket-tag-clr: white;
    --ticket-title-clr: white;
    --ticket-title-border-clr: #FFFFFF75;
    --ticket-price-linethrough-clr: #FFFFFF75;
    --ticket-price-clr: white;
    --ticket-price-border-clr: #FFFFFF75;
    --ticket-list-clr: white;
    --ticket-list-bullet-clr: white;
}

/* =-=-= Most Value =-=-= */
.event-register-ticket.most-value {
    --ticket-tag-bg: #18B890;
    --ticket-tag-clr: white;
    --ticket-title-clr: #18B890;
    --ticket-title-border-clr: #18B890;
    --ticket-price-linethrough-clr: #18B890;
    --ticket-price-clr: #18B890;
    --ticket-price-border-clr: #18B890;
    --ticket-list-clr: #18B890;
    --ticket-list-bullet-clr: #18B890;
    --ticket-btn-bg: #18B890;
    --ticket-btn-clr: white;
}

/* =-=-= Secure =-=-= */
.register-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    margin-bottom: 48px;
}

.register-secure .svg-icon {
    color: var(--clr-primary);
}

.register-secure p {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #FFFFFF;
}

.register-secure:before {
    /* content: ''; */
    position: absolute;
    width: 90%;
    height: 1px;
    background: #E5E7EB;
    bottom: -24px;
}

.paymen-methods h5 {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: white;
    margin-bottom: 16px;
}

.paymen-methods ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 19px;
    margin-bottom: 24px;
}

.paymen-methods ul li img {
    height: 18px;
}

.paymen-methods>p {
    font-size: 14px;
    line-height: 20px;
}

@media screen and (min-width:992px) {
    .event-register-ticket.most-popular {
        height: calc(100% + 29px);
        margin-top: -29px;
    }
}

@media screen and (max-width: 1024px) {
    .event-register-tickets-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media screen and (max-width: 500px) {
    .register-secure {
        flex-wrap: wrap;
    }
}

/* TOOLTIP */
.tooltip-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    cursor: pointer;
}

.tooltip-info::before {
    content: "i";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    border: 1px solid;
}

.tooltip-content {
    position: absolute;
    bottom: 125%;
    /* ABOVE */
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 260px;

    background: #111;
    color: #fff;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

/* Arrow */
.tooltip-content::after {
    /* content: ""; */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #111 transparent transparent transparent;
}

/* Desktop Hover */
@media (hover: hover) {
    .tooltip-info:hover .tooltip-content {
        opacity: 1;
        visibility: visible;
    }
}

/* Mobile Click (we’ll toggle a class) */
.tooltip-info.is-open .tooltip-content {
    opacity: 1;
    visibility: visible;
}

.event-register-ticket ul li .ticket-value {
    font-size: 16px;
    color: #FAA52E;
}

.event-register-ticket.most-popular ul li .ticket-value {
    color: #90E1FF;
}


.event-register-ticket.most-value ul li .tooltip-info::before {
    color: black;
}

/* MODAL */

.brth-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.brth-modal.is-open {
    display: block;
}

.brth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    transition: opacity .25s ease;
}

.brth-modal__dialog {
    position: relative;
    max-width: 640px;
    width: min(640px, 92vw);
    margin: 6vh auto 0;
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    transform: translateY(12px);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}

.brth-modal.is-open .brth-modal__backdrop {
    opacity: 1;
}

.brth-modal.is-open .brth-modal__dialog {
    transform: translateY(0);
    opacity: 1;
}

.brth-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.brth-modal__dialog h3 {
    margin-bottom: 30px;
}

.brth-modal__dialog .ff_submit_btn_wrapper {
    margin-bottom: 0;
}

.brth-modal__dialog .ff_submit_btn_wrapper .wpf_has_custom_css.ff-btn-submit {
    background: var(--clr-primary);
    padding-block: 12px;
    margin-top: 10px;
}


/* ===== Series ===== */
.brth-series {
    padding-block: 60px 90px;
    text-align: center;
}

.series-title .brth-tag {
    margin-bottom: 12px;
}

.series-title h2 {
    font-family: Playfair;
    font-size: clamp(35px, 5vw, 60px);
    font-weight: 600;
    line-height: 1;
    color: #111;
    margin-bottom: 10px;
}

.series-title p {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 45px;
    color: #6B7280;
}

.series-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 50px;
    align-items: flex-start;
    text-align: start;
    position: relative;
    margin-bottom: 50px;
}

.series-wrapper:before {
    content: '';
    position: absolute;
    width: 90%;
    height: 1px;
    background: #E5E5E5;
    bottom: -27px;
    margin-inline: auto;
    inset-inline: 0;
}

.series-card {
    border-radius: 20px;
    border: 1px solid #e5e5e5;
}

.series-card .card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-inline: 24px;
    padding-block: 16px;
    background: #F5F5F5;
    border-start-start-radius: 20px;
    border-start-end-radius: 20px;
}

.series-card .card-header h3 {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: #111;
}

.series-card .card-header p {
    font-size: 11px;
    font-weight: 400;
    line-height: 18px;
    color: #9CA3AF;
}

.series-card .card-body ul li {
    padding-inline: 24px;
    padding-block: 16px;
    display: grid;
    grid-template-columns: 120px 1fr 65px;
    gap: 10px;
}

.series-card .card-body ul li>p {
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: #111;
}

.series-card .card-body ul li.first-prog>p {
    font-style: Italic;
    font-weight: 400;
    color: #9CA3AF;
}

.series-card .card-body ul li.last-prog {
    opacity: 0.6;
}

.series-card .card-body ul li.special-prog {
    background: #00A3E00D;
}

.series-card .card-body ul li.special-prog>p {
    color: var(--clr-primary);
}

.series-card .card-body ul li>span:not(.duration) {
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    color: #9CA3AF;
}

.series-card .card-body ul li>.duration {
    padding-inline: 13px;
    padding-block: 5px;
    border: 1px solid #E5E5E5;
    border-radius: 40vw;
    min-width: max-content;
    height: min-content;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    color: #6B7280;
}

.brth-series .series-details {
    color: #9CA3AF;
    font-weight: 400;
    font-style: Italic;
    font-size: 13px;
    line-height: 19.5px;
    text-align: center;
    margin-bottom: 20px;
}

.brth-series .brth-btn.btn-primary.btn-lg {
    font-size: clamp(18px, 3vw, 30px);
}

/* ======================== */
/* ===== Thankyou live ===== */
.brth-thankyou {
    min-height: 100svh;
    background-image: url('../media/images/breathe.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    position: relative;
    isolation: isolate;
    place-content: center;
}

.brth-thankyou::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    background: linear-gradient(0deg, #00081F -6.43%, rgba(15, 51, 61, 0) 50.89%);
    background-blend-mode: multiply;
    z-index: -1;
}

.thankyou-live-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    align-items: center;
    gap: 40px;
}

.thankyou-live-content h2 {
    font-size: clamp(30px, 5vw, 50px);
    font-weight: 600;
    line-height: 40px;
    color: white;
    margin-bottom: 30px;
}

.thankyou-live-content p {
    font-size: clamp(14px, 3vw, 20px);
    font-weight: 400;
    line-height: 1.5;
    color: white;
}

.thankyou-live-content p:not(:last-child) {
    margin-bottom: 40px;
}

/* ======================== */
/* ===== Utilities ===== */
.w-100 {
    width: 100%;
}

.fw-medium {
    font-weight: 500;
}

.fw-semibold {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}