/* =========================================================
   WPP - WOMEN'S POWER FOR PEACE
   CUSTOM CSS
========================================================= */


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

:root {

    --wpp-purple: #4b1767;

    --wpp-purple-dark: #281039;

    --wpp-purple-light: #6b2a86;

    --wpp-gold: #e2a20a;

    --wpp-gold-dark: #c98c00;

    --wpp-pink: #a5236c;

    --wpp-light: #f8f0f7;

    --wpp-text: #1c1720;

    --wpp-white: #ffffff;

    --border-light: #ead8e8;

}


/* =========================================================
   GLOBAL
========================================================= */

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


html {

    scroll-behavior: smooth;

}


body {

    font-family: "Montserrat", sans-serif;

    color: var(--wpp-text);

    background: #ffffff;

    overflow-x: hidden;

}


a {

    text-decoration: none;

}


img {

    max-width: 100%;

}


p {

    line-height: 1.7;

}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar {

    background: var(--wpp-purple-dark);

    color: #ffffff;

    min-height: 39px;

    font-size: 12px;

}


.top-information {

    display: flex;

    align-items: center;

    gap: 28px;

    height: 39px;

}


.top-information span {

    display: flex;

    align-items: center;

    gap: 9px;

    white-space: nowrap;

}


.top-information i {

    color: #ffffff;

    font-size: 13px;

}


.top-social {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 21px;

    height: 39px;

}


.top-social a {

    color: white;

    font-size: 15px;

    transition: 0.3s;

}


.top-social a:hover {

    color: var(--wpp-gold);

    transform: translateY(-2px);

}


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

.main-navbar {

    background: #ffffff;

    min-height: 104px;

    position: relative;

    z-index: 1000;

    transition: 0.3s;

}


.navbar-scrolled {

    position: sticky;

    top: 0;

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

}


.wpp-logo {

    display: flex;

    align-items: center;

    gap: 12px;

}


.logo-symbol {

    width: 90px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.logo-circle {

    width: 70px;

    height: 70px;

    border: 5px solid var(--wpp-purple);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    color: var(--wpp-purple);

    font-size: 30px;

}


.logo-circle::before {

    content: "";

    position: absolute;

    width: 25px;

    height: 48px;

    background: var(--wpp-gold);

    border-radius: 70% 30% 70% 30%;

    right: -12px;

    bottom: 4px;

    transform: rotate(-20deg);

}


.logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.logo-text strong {

    color: var(--wpp-purple);

    font-family: "Playfair Display", serif;

    font-size: 52px;

    font-weight: 700;

}


.logo-text span {

    font-size: 11px;

    font-weight: 700;

    color: #111;

    letter-spacing: .3px;

}


.logo-text small {

    text-align: center;

    font-size: 11px;

    font-weight: 700;

    margin-top: 3px;

}


.navbar-nav {

    gap: 10px;

}


.nav-link {

    color: #111 !important;

    font-size: 13px;

    font-weight: 600;

    padding: 15px 10px !important;

    position: relative;

    transition: .3s;

}


.nav-link::after {

    content: "";

    position: absolute;

    height: 3px;

    width: 0;

    bottom: 2px;

    left: 10px;

    background: var(--wpp-gold);

    transition: .3s;

}


.nav-link:hover,

.nav-link.active {

    color: var(--wpp-purple) !important;

}


.nav-link:hover::after,

.nav-link.active::after {

    width: calc(100% - 20px);

}


.btn-donate {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 124px;

    height: 40px;

    border-radius: 11px;

    background: var(--wpp-gold);

    color: white !important;

    font-size: 13px;

    font-weight: 700;

    transition: .3s;

}


.btn-donate:hover {

    background: var(--wpp-gold-dark);

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(226,162,10,.3);

}


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

.hero-section {

    min-height: 360px;

    position: relative;

    overflow: hidden;

    background:

        linear-gradient(
            90deg,
            rgba(250,242,245,.98) 0%,
            rgba(250,242,245,.96) 32%,
            rgba(250,242,245,.55) 51%,
            rgba(0,0,0,.05) 65%
        ),

        url("../images/hero-women.jpeg");

    background-position: center;
 filter: brightness(1.20);
    background-size: cover;

}


.min-vh-hero {

    min-height: 360px;

}


.hero-content {

    position: relative;

    z-index: 5;

    padding: 35px 0 40px 5%;

}


.hero-content h1 {

    font-size: clamp(42px, 5vw, 67px);

    line-height: .98;

    font-weight: 800;

    color: var(--wpp-purple);

    margin-bottom: 10px;

    letter-spacing: -2px;

}


.hero-content h1 span {

    color: var(--wpp-gold);

}


.hero-script {

    color: var(--wpp-pink);

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: 27px;

    margin: 8px 0 13px;

}


.hero-description {

    max-width: 540px;

    font-size: 16px;

    line-height: 1.55;

    margin-bottom: 22px;

}


.hero-buttons {

    display: flex;

    gap: 28px;

    flex-wrap: wrap;

}


.btn-primary-wpp,

.btn-outline-wpp {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding: 10px 18px;

    min-width: 142px;

    border-radius: 11px;

    font-size: 12px;

    font-weight: 700;

    transition: .3s;

}


.btn-primary-wpp {

    background: var(--wpp-purple);

    color: white;

    border: 2px solid var(--wpp-purple);

}


.btn-primary-wpp:hover {

    background: var(--wpp-purple-dark);

    color: white;

    transform: translateY(-2px);

}


.btn-outline-wpp {

    background: transparent;

    border: 2px solid var(--wpp-purple);

    color: var(--wpp-purple);

}


.btn-outline-wpp:hover {

    background: var(--wpp-purple);

    color: white;

}


/* =========================================================
   NPO BADGE
========================================================= */

.npo-badge {

    position: absolute;

    right: 0;

    bottom: 20px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 15px;

    min-width: 365px;

    padding: 17px 35px 17px 18px;

    background: linear-gradient(
        90deg,
        var(--wpp-purple),
        #341147
    );

    color: white;

    border-radius: 30px 0 0 30px;

}


.npo-icon {

    font-size: 31px;

    color: var(--wpp-gold);

}


.npo-badge strong {

    display: block;

    font-size: 12px;

    margin-bottom: 7px;

}


.npo-badge span {

    display: block;

    font-size: 11px;

}


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

.about-section {

    background: white;

    padding: 28px 0 22px;

}


.about-column {

    padding: 0 28px;

    border-right: 1px solid #ebd9df;

}


.about-column:last-child {

    border-right: none;

}


.about-box {

    display: flex;

    gap: 20px;

}


.about-icon {

    flex: 0 0 85px;

    width: 85px;

    height: 85px;

    border-radius: 50%;

    background: var(--wpp-purple);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 37px;

}


.about-content h3 {

    color: var(--wpp-purple);

    font-size: 17px;

    font-weight: 700;

    margin-bottom: 8px;

}


.about-content p {

    font-size: 12px;

    line-height: 1.42;

    margin-bottom: 0;

}


.values-list {

    list-style: none;

    padding: 0;

    margin: 0;

}


.values-list li {

    font-size: 12px;

    margin-bottom: 7px;

}


.values-list i {

    color: var(--wpp-gold);

    margin-right: 7px;

}


/* =========================================================
   OBJECTIVES
========================================================= */

.objectives-section {

    background: #f8edf6;

    padding: 9px 0 18px;

}


.section-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-bottom: 15px;

}


.section-title span {

    height: 1px;

    background: var(--wpp-gold);

    width: 180px;

}


.section-title h2 {

    color: var(--wpp-purple);

    font-size: 18px;

    margin: 0;

    font-weight: 700;

}


.objectives-row {

    align-items: stretch;

}


.objective-item {

    padding: 15px 25px;

    display: flex;

    align-items: center;

    gap: 20px;

    border-right: 1px solid #e5c9dc;

}


.objective-item:last-child {

    border-right: none;

}


.objective-icon {

    flex: 0 0 48px;

    color: var(--wpp-purple);

    font-size: 35px;

    text-align: center;

}


.objective-item p {

    font-size: 11.5px;

    line-height: 1.4;

    margin: 0;

}


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

.section-heading {

    text-align: center;

    margin-bottom: 45px;

}


.section-heading span {

    display: block;

    color: var(--wpp-gold);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 8px;

}


.section-heading h2 {

    color: var(--wpp-purple);

    font-size: 35px;

    font-weight: 800;

    margin-bottom: 10px;

}


.section-heading p {

    max-width: 650px;

    margin: auto;

    color: #666;

}


/* =========================================================
   PROGRAMMES
========================================================= */

.programmes-section {

    padding: 85px 0;

    background: white;

}


.programme-card {

    height: 100%;

    padding: 35px 28px;

    background: white;

    border: 1px solid #eee;

    border-radius: 12px;

    box-shadow: 0 8px 30px rgba(53,20,70,.06);

    transition: .35s;

}


.programme-card:hover {

    transform: translateY(-8px);

    border-color: var(--wpp-purple);

    box-shadow: 0 18px 40px rgba(53,20,70,.12);

}


.programme-icon {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #f4e9f4;

    color: var(--wpp-purple);

    font-size: 28px;

    margin-bottom: 22px;

}


.programme-card h3 {

    font-size: 19px;

    color: var(--wpp-purple);

    font-weight: 700;

}


.programme-card p {

    color: #666;

    font-size: 13px;

}


.programme-card a {

    color: var(--wpp-purple);

    font-size: 11px;

    font-weight: 700;

}


.programme-card a i {

    margin-left: 10px;

}


/* =========================================================
   RESOURCES
========================================================= */

.resources-section {

    padding: 80px 0;

    background: #faf6fa;

}


.resource-card {

    background: white;

    border-radius: 10px;

    padding: 35px;

    text-align: center;

    height: 100%;

    border-bottom: 4px solid var(--wpp-purple);

    transition: .3s;

}


.resource-card:hover {

    transform: translateY(-5px);

}


.resource-card > i {

    font-size: 42px;

    color: var(--wpp-gold);

    margin-bottom: 20px;

}


.resource-card h3 {

    color: var(--wpp-purple);

    font-size: 20px;

}


.resource-card p {

    color: #666;

    font-size: 13px;

}


.resource-card a {

    font-size: 11px;

    color: var(--wpp-purple);

    font-weight: 700;

}


/* =========================================================
   GET INVOLVED
========================================================= */

.involved-section {

    background:

        linear-gradient(
            100deg,
            rgba(63,20,84,.98),
            rgba(91,29,110,.93)
        );

    color: white;

    padding: 70px 0;

}


.small-title {

    color: var(--wpp-gold);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

}


.involved-section h2 {

    max-width: 800px;

    font-size: 38px;

    font-weight: 700;

    margin: 10px 0;

}


.involved-section p {

    max-width: 700px;

    color: #eee;

}


.btn-white {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    background: white;

    color: var(--wpp-purple);

    padding: 15px 25px;

    border-radius: 8px;

    font-weight: 700;

    font-size: 12px;

}


.btn-white:hover {

    color: var(--wpp-purple);

    transform: translateY(-2px);

}


/* =========================================================
   NEWS
========================================================= */

.news-section {

    padding: 35px 0;

}


.news-card {

    height: 100%;

    background: white;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 5px 25px rgba(0,0,0,.07);

}


.news-image {
    height: 220px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
 filter: brightness(1.10);
    position: relative;
    overflow: hidden;
}

/* Effet lumineux */
.news-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(255, 255, 255, 0);
    transition: background 0.4s ease;
}

/* Zoom de l'image de fond */
.news-image {
    transition: background-size 0.5s ease,
                filter 0.5s ease;
}

.news-image:hover {
    background-size: 105%;
    filter: brightness(1.10);
}

/* Highlight */
.news-image:hover::after {
    background: rgba(255, 255, 255, 0.08);
}


.news-image-1 {

    background-image:
        url("../images/img1.png");

}


.news-image-2 {

    background-image:
        url("../images/img3.png");

}


.news-image-3 {

    background-image:
        url("../images/img2.jpeg");

}


.news-content {

    padding: 25px;

}


.news-content > span {

    color: var(--wpp-gold);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

}


.news-content h3 {

    color: var(--wpp-purple);

    font-size: 19px;

    line-height: 1.3;

    margin: 10px 0;

}


.news-content p {

    color: #666;

    font-size: 13px;

}


.news-content a {

    color: var(--wpp-purple);

    font-size: 11px;

    font-weight: 700;

}


/* =========================================================
   DONATE
========================================================= */

.donate-section {

    padding: 70px 0;

    background: #f8edf6;

}


.donate-box {

    background: var(--wpp-purple);

    color: white;

    padding: 45px 55px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.donate-box span {

    color: var(--wpp-gold);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

}


.donate-box h2 {

    font-size: 32px;

    margin: 8px 0;

}


.donate-box p {

    margin: 0;

    color: #eee;

}


.btn-donate-large {

    flex-shrink: 0;

    padding: 15px 25px;

    background: var(--wpp-gold);

    color: white;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 700;

}


.btn-donate-large:hover {

    color: white;

    background: var(--wpp-gold-dark);

}


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

.contact-section {

    padding: 90px 0;

}


.contact-item {

    display: flex;

    gap: 20px;

    margin-bottom: 30px;

}


.contact-icon {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #f4e9f4;

    color: var(--wpp-purple);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

}


.contact-item h4 {

    font-size: 16px;

    color: var(--wpp-purple);

    margin-bottom: 5px;

}


.contact-item p {

    font-size: 13px;

    color: #666;

    margin: 0;

}


.contact-form .form-control {

    margin-bottom: 18px;

    min-height: 50px;

    border: 1px solid #ddd;

    border-radius: 6px;

    font-size: 13px;

}


.contact-form textarea {

    resize: vertical;

}


.contact-form .btn-primary-wpp {

    min-height: 48px;

}


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

.footer {

    background: var(--wpp-purple-dark);

    color: white;

    padding: 35px 0 0;

}


.footer-column {

    padding: 0 25px;

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

}


.footer-column:last-child {

    border-right: none;

}


.footer-column h3 {

    color: var(--wpp-gold);

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 13px;

}


.footer-column p {

    color: #eee;

    font-size: 11.5px;

    line-height: 1.55;

}


.footer-column ul {

    list-style: none;

    padding: 0;

    margin: 0;

}


.footer-column ul li {

    margin-bottom: 7px;

}


.footer-column ul a {

    color: #eee;

    font-size: 11.5px;

    transition: .3s;

}


.footer-column ul a:hover {

    color: var(--wpp-gold);

    padding-left: 4px;

}


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

.newsletter-form input {

    width: 100%;

    height: 38px;

    border: none;

    border-radius: 5px;

    padding: 0 12px;

    font-size: 11px;

    margin-bottom: 8px;

}


.newsletter-form button {

    border: none;

    background: var(--wpp-gold);

    color: white;

    padding: 8px 19px;

    border-radius: 4px;

    font-size: 10px;

    font-weight: 700;

}


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

.footer-social {

    display: flex;

    gap: 18px;

}


.footer-social a {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    background: white;

    color: var(--wpp-purple-dark);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .3s;

}


.footer-social a:hover {

    background: var(--wpp-gold);

    color: white;

    transform: translateY(-3px);

}


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

.copyright {

    margin-top: 28px;

    padding: 17px 0;

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

    text-align: right;

}


.copyright p {

    margin: 0;

    font-size: 10px;

    color: #ddd;

}


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

.back-to-top {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--wpp-gold);

    color: white;

    z-index: 999;

    opacity: 0;

    visibility: hidden;

    transition: .3s;

}


.back-to-top.show {

    opacity: 1;

    visibility: visible;

}


.back-to-top:hover {

    color: white;

    background: var(--wpp-purple);

}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1199px) {

    .navbar-nav {

        gap: 2px;

    }


    .nav-link {

        font-size: 11px;

        padding-left: 6px !important;

        padding-right: 6px !important;

    }


    .hero-content h1 {

        font-size: 53px;

    }


    .hero-script {

        font-size: 23px;

    }


    .about-column {

        padding: 0 15px;

    }


    .about-icon {

        flex-basis: 70px;

        width: 70px;

        height: 70px;

        font-size: 28px;

    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 991px) {


    /* TOP BAR */

    .top-bar {

        display: none;

    }


    /* NAVBAR */

    .main-navbar {

        min-height: 80px;

    }


    .navbar-toggler {

        border: none;

    }


    .navbar-toggler:focus {

        box-shadow: none;

    }


    .navbar-collapse {

        background: white;

        padding: 15px;

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

    }


    .navbar-nav {

        align-items: stretch !important;

    }


    .nav-link {

        padding: 12px !important;

    }


    .nav-link::after {

        display: none;

    }


    .btn-donate {

        margin-top: 10px;

        width: 100%;

    }


    /* HERO */

    .hero-section {

        min-height: 650px;

        background:

            linear-gradient(
                180deg,
                rgba(250,242,245,.97) 0%,
                rgba(250,242,245,.88) 48%,
                rgba(0,0,0,.15) 100%
            ),

            url("../images/hero-women.jpeg");

        background-position: center;

    }


    .min-vh-hero {

        min-height: 650px;

    }


    .hero-content {

        padding: 35px 20px;

        text-align: center;

    }


    .hero-content h1 {

        font-size: 50px;

    }


    .hero-script {

        font-size: 22px;

    }


    .hero-description {

        margin-left: auto;

        margin-right: auto;

    }


    .hero-buttons {

        justify-content: center;

    }


    .npo-badge {

        bottom: 20px;

        min-width: auto;

        width: 90%;

        right: 5%;

        border-radius: 15px;

        padding: 15px;

    }


    /* ABOUT */

    .about-column {

        border-right: none;

        border-bottom: 1px solid #ead8df;

        padding: 25px 10px;

    }


    .about-column:last-child {

        border-bottom: none;

    }


    /* OBJECTIVES */

    .objective-item {

        border-right: none;

        border-bottom: 1px solid #e5c9dc;

    }


    .objective-item:last-child {

        border-bottom: none;

    }


    /* INVOLVED */

    .involved-section {

        text-align: center;

    }


    .involved-section h2 {

        font-size: 30px;

    }


    .involved-section .text-lg-end {

        text-align: center !important;

        margin-top: 25px;

    }


    /* DONATE */

    .donate-box {

        flex-direction: column;

        text-align: center;

        padding: 35px 25px;

    }


    /* FOOTER */

    .footer-column {

        border-right: none;

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

        padding: 25px;

    }


    .copyright {

        text-align: center;

    }

}


/* =========================================================
   RESPONSIVE - SMALL MOBILE
========================================================= */

@media (max-width: 575px) {


    .wpp-logo {

        gap: 5px;

    }


    .logo-symbol {

        width: 55px;

    }


    .logo-circle {

        width: 48px;

        height: 48px;

        font-size: 20px;

        border-width: 3px;

    }


    .logo-text strong {

        font-size: 35px;

    }


    .logo-text span {

        font-size: 7px;

    }


    .logo-text small {

        font-size: 8px;

    }


    .hero-content {

        padding-top: 45px;

    }


    .hero-content h1 {

        font-size: 40px;

    }


    .hero-script {

        font-size: 19px;

    }


    .hero-description {

        font-size: 14px;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: center;

        gap: 10px;

    }


    .btn-primary-wpp,

    .btn-outline-wpp {

        width: 210px;

    }


    .npo-badge {

        font-size: 10px;

    }


    .npo-icon {

        font-size: 23px;

    }


    .section-heading h2 {

        font-size: 28px;

    }


    .section-title span {

        width: 60px;

    }


    .objective-item {

        padding: 18px 10px;

    }


    .donate-box h2 {

        font-size: 25px;

    }


}

/* =========================================================
   WPP - MODAL COMING SOON
   ========================================================= */

.wpp-coming-modal {
    position: relative;

    border: none;
    border-radius: 20px;

    overflow: hidden;

    background: linear-gradient(
        145deg,
        #4f176b,
        #4f176b,
        #681f7f
    );

    color: white;

    box-shadow:
        0 25px 70px rgba(50, 10, 70, 0.45);
}


/* Bouton fermer */

.wpp-coming-modal .btn-close {
    position: absolute;

    top: 18px;
    right: 20px;

    z-index: 20;

    opacity: 1;

    width: 15px;
    height: 15px;
}


/* Corps */

.wpp-coming-modal .modal-body {

    padding: 45px 35px 35px;

}


/* Icône */

.wpp-modal-icon {

    width: 75px;
    height: 75px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #d99b17;

    color: white;

    font-size: 32px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25);
}


/* Titre */

.wpp-coming-modal h2 {

    margin: 0;

    font-size: 30px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


/* Ligne dorée */

.wpp-modal-line {

    width: 70px;
    height: 4px;

    background: #d99b17;

    border-radius: 5px;

    margin: 15px auto 20px;
}


/* Texte principal */

.wpp-modal-text {

    font-size: 17px;

    line-height: 1.7;

    margin-bottom: 10px;
}


.wpp-modal-text strong {

    color: #f0b323;

}


/* Texte secondaire */

.wpp-modal-subtitle {

    font-size: 14px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.85);

    margin-bottom: 25px;

}


/* =========================================================
   COUNTDOWN
   ========================================================= */

.countdown-container {

    display: flex;

    justify-content: center;

    gap: 8px;

    flex-wrap: wrap;

    margin: 25px 0;
}


.countdown-box {

    min-width: 65px;

    padding: 12px 8px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(5px);

    text-align: center;

    transition: all 0.3s ease;
}


.countdown-box:hover {

    transform: translateY(-4px);

    background: rgba(217, 155, 23, 0.25);

    border-color: #d99b17;

}


.countdown-box span {

    display: block;

    color: #f0b323;

    font-size: 25px;

    font-weight: 800;

    line-height: 1.2;
}


.countdown-box small {

    display: block;

    margin-top: 4px;

    font-size: 10px;

    text-transform: uppercase;

    color: white;

    letter-spacing: 0.5px;
}


/* Message */

.countdown-message {

    font-size: 13px;

    font-style: italic;

    color: rgba(255,255,255,0.9);

    margin: 20px 0;
}


.countdown-message i {

    color: #f0b323;

    margin-right: 5px;
}


/* Bouton */

.wpp-modal-button {

    background: #d99b17;

    color: white;

    font-weight: 700;

    padding: 12px 25px;

    border-radius: 8px;

    border: none;

    transition: all 0.3s ease;
}


.wpp-modal-button:hover {

    background: #f0b323;

    color: white;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.25);
}


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

@media (max-width: 576px) {

    .wpp-coming-modal .modal-body {

        padding: 40px 20px 25px;

    }

    .wpp-coming-modal h2 {

        font-size: 23px;

    }

    .wpp-modal-text {

        font-size: 15px;

    }

    .countdown-box {

        min-width: 55px;

        padding: 10px 5px;

    }

    .countdown-box span {

        font-size: 20px;

    }

}