/*
Theme Name: Numerique
Theme URI: https://numerique.vamtam.com
Text Domain: numerique
Description: Welcome to Numérique, a modern Digital Marketing and SEO Theme. This lovely niche theme is built and suitable for any business operating in the Digital Marketing industry. The theme features carefully designed layouts ideal for every contemporary digital marketing agency, SEO services company, creative agency, web development agency, social media marketing agency or digital studio. It is suitable for users with zero programming skills and advanced developers.
Author: VamTam
Author URI: https://vamtam.com
Version: 13
Tested Up To: 6.1
Requires PHP: 7.4
License: Envato
License URI: https://themeforest.net/licenses
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, post-formats, theme-options, threaded-comments, translation-ready
/

/***************** partner dashboard style ******************/

body {
    font-family: "Montserrat", sans-serif;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
button,
a {
    font-family: "Montserrat", sans-serif;
    color: #111827;
}

p {
    font-family: "Source Sans Pro", sans-serif;
    color: #4b5563;
}

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

.h1-heading {
    font-size: 3rem !important;
    line-height: 1em !important;
    font-weight: bold !important;
    color: rgb(17 24 39) !important;
    letter-spacing: 0px !important;
}

.h2-heading {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
    font-weight: 700 !important;
    letter-spacing: 0px !important;
}

.h3-heading {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0px !important;
}

.sub-heading {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
    color: rgb(75 85 99) !important;
    margin-top: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0px !important;
}

.w1280 {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto
}

.primary-gradient-btn {
    display: flex;
    padding: 18px 28px;
    font-size: 16px;
    line-height: 1em;
    font-weight: 600;
    color: #fff;
    border-radius: 18px;
    background-image: linear-gradient(242deg, #5F4DA0 0%, #C8348C 100%);
    position: relative;
    overflow: hidden;
    border: none;
    transition: all 0.3s ease-in-out;

}

.secondary-gradient-btn {
    /* display: inline-block; */
    padding: 18px 28px;
    font-size: 16px;
    line-height: 1em;
    font-weight: 600;
    /* color: rgb(17 24 39); */
    color: #BE378E;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    border: 1px solid #BE378E;
    transition: all 0.3s ease-in-out;
    display: flex;
    background-color: #fff;
    transition: all 0.5s;


    &:hover {
        background-color: #be378e1f;
        border: 1px solid transparent;
    }
}
.secondary-gradient-btn {
    /* display: inline-block; */
    padding: 18px 28px;
    font-size: 16px;
    line-height: 1em;
    font-weight: 600;
    /* color: rgb(17 24 39); */
    color: #BE378E !important;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    border: 1px solid #BE378E;
    transition: all 0.3s ease-in-out;
    display: flex;
    background-color: #fff !important;
    transition: all 0.5s;
    background-image: none !important;



    &:hover {
        background-color: #be378e1f !important;
        border: 1px solid #BE378E !important;
    }
}


/* underline effect */
/* .primary-gradient-btn::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin: 4px auto 0;
  background: #a5b4fc;
  transition: width 0.3s;
}

.primary-gradient-btn:hover::after {
  width: 90%;
} */

/* hero section */

#hero-sec {
    padding: 130px 30px;
    background-image: radial-gradient(#FF5F6D 2px, transparent 2px), radial-gradient(#FFC371 2px, transparent 2px), radial-gradient(#8A2BE2 2px, transparent 2px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px, 30px 30px;
    position: relative;
}

#hero-sec:before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    background: #f9fafbe0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}

.hero-left-sec {
    width: 50%;
}

.hero-right-sec {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-button-container {
    margin-top: 35px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    width: 450px;
    padding: 25px;
    position: relative;
    overflow: hidden;
}

.hero-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 25px;
}

/* Gradient top border */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 6px;
    width: 100%;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: linear-gradient(90deg, #d946ef, #facc15);
}

.card h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0px !important;
}

.hero .subtitle {
    font-size: 14px;
    font-weight: 500;
}

.menu {
    font-size: 32px;
    color: #BB388F;
}


.resource {
    display: flex;
    align-items: center;
    background: #f9fafb;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
}

.resource .icon {
    font-size: 22px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    padding: 10px;
}

.pink {
    background: #fde2f3;
    color: #d946ef;
}

.purple {
    background: #ede9fe;
    color: #8b5cf6;
}

.yellow {
    background: #fef3c7;
    color: #f59e0b;
}

.resource h4 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0px !important;
}

.resource p {
    margin: 2px 0 0;
    font-size: 14px;
    color: #6b7280;
}

.view-link {
    display: block;
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
    font-weight: 600;
    color: #ec4899;
    text-decoration: none;
}

.view-link:hover {
    color: rgb(219 39 119);
}


/* search seciton style */


/* Hidden state (collapsed) */
.resource-card.hidden {
  opacity:0;
  transform: translateY(8px);
  max-height:0;
  padding-top:0; padding-bottom:0;
  margin:0;
  pointer-events:none;
}

/* Small helper */
.hidden-by-js { display:block; }



.search-section {
    background: #fff;
    padding: 60px 20px;
}

/* Tabs container */
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

/* Tabs */
.category-tabs .tab {
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 9999px;
    /* pill shape */
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.category-tabs .tab:first-child {
    background: transparent;
    font-weight: 600;
}

.category-tabs .tab:hover {
    background: #e5e7eb;
}

/* Active tab */
.category-tabs .tab.active {
    background: #ec4899;
    color: white;
}

/* Featured Resources sec style */

.feature-sec-container {
    padding: 65px 16px;
    background: #F9FAFB;
}



/******************/
.feature-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* exactly 3 cards per row */
    gap: 30px;
    /* space between cards */
    padding: 20px;
}

.resource-sec-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 100%;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: linear-gradient(90deg, #d946ef, #facc15);
}

.resource-sec-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    width: 100%;
    padding: 25px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s;

    &:hover {
        transform: translateY(-5px);
    }
}

.feature-heading-box {
    margin-bottom: 35px;
}

/* resource card sec */

.resource-icon-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 5px;
}

.resource-icon {
    width: 40px;
    padding: 8px;
    border-radius: 8px;
}

.feature-sec .text {
    padding: 16px 0;
}

.feature-sec .text p {
    font-size: 16px;
    line-height: 1.5em;
}

.feature-sec .status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.feature-sec .status span {
    font-size: 14px;
    color: #6b7280;
}

.feature-sec .status .res-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-size: 14px;
    color: 6b7280;
}

.feature-sec .status .res-btn svg {
    width: 18px;
}

.feature-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* hide extra cards by default */
.resource-sec-card {
    display: none;
}

/* show only first 3 */
.resource-sec-card:nth-child(-n+3) {
    display: block;
}

/* tab system card style */
.resource-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 100%;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: linear-gradient(90deg, #d946ef, #facc15);
}

.resource-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    width: 100%;
    padding: 25px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &:hover {
        transform: translateY(-5px);
    }
}


/***************************************************** Training Section ***********************************/
.training-sec {
    padding: 4rem 1rem;
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
}

/* Left Section */
.left {
    flex: 1 1 48%;
    min-width: 300px;
}

.left h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #111827;
    margin: 0;
}

.feature {
    display: flex;
    margin-top: 2rem;
}

.icon-box {
    height: 48px;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: white;
    flex-shrink: 0;
    padding: 12px;
}

.icon-pink {
    background-color: #ec4899;
}

.icon-purple {
    background-color: #8b5cf6;
}

.icon-yellow {
    background-color: #f59e0b;
}

.feature-text {
    margin-left: 1rem;
}

.feature-text p {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.4;
}

/* Right Section */
.right {
    flex: 1 1 48%;
    min-width: 300px;
    margin-top: 2.5rem;
}

.upcoming-event-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
}

.upcoming-event-card h3 {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: #111827 !important;
    letter-spacing: 0px !important;
}

.event {
    background: #f9fafb;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

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

.event h4 {
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
    color: #111827 !important;
    letter-spacing: 0px !important;
}

.event p {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0.25rem 0 0;
}

.badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
}

.badge-pink {
    background: #fce7f3;
    color: #be185d;
}

.badge-purple {
    background: #ede9fe;
    color: #5b21b6;
}

.badge-yellow {
    background: #fef3c7;
    color: #92400e;
}

.btn {
    margin-top: 1.5rem;
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(to right, #ec4899, #8b5cf6);
    color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn:hover {
    background: linear-gradient(to right, #db2777, #7c3aed);
}


.page-id-11925 header.page-header {
    display: none;
}


/************** contact sec ***************/
.contact-sec .hero-button-container {
    justify-content: center;
}
.contact-sec-container {
    padding: 65px 16px;
    background-color: #F9FAFB;
    margin-bottom: 40px;
}
.contact-btn-icon {
    height: 0px;
    width: 35px;
    display: flex;
    align-items: center;
    color: white;
    flex-shrink: 0;
    padding: 7px;
}





/* Tablet (max 1024px) → 2 per row */
@media (max-width: 1024px) {
    .feature-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .training-sec {
        flex-direction: column;
    }

    .training-sec .right {
        width: 100%;
    }
}

/* mobile view style */

@media (max-width: 767px) {
    #hero-sec {
        padding: 95px 16px;
    }

    .hero {
        flex-direction: column;
    }

    .h1-heading {
        font-size: 36px !important;
    }

    .hero-left-sec {
        width: 100%;
    }

    .hero-right-sec {
        width: 100%;
        margin-top: 50px;
    }

    /* feature sec */
    .feature-card-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .feature-card-grid {
        padding: 0;
    }
}