/********************* BREADCRUMB *********************/
.breadcrumb-container {
    background-color: #F5F5F5;
    padding-left: 76px;
    .breadcrumb {
        opacity: 0.8;
    }
}

@media (min-width: 769px) {
    .breadcrumb-container .breadcrumb {
        padding: 16px 36px 20px 0;
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .breadcrumb-container {
        padding-left: 16px;
        padding-bottom: 24px;

        .breadcrumb {
            margin-top: 16px;
            margin-bottom: 0 !important;
        }
    }
}

/********************* BONUS CONTENT *********************/
.bonus-content-container {
    @media(max-width: 767px) {
        .bonus-container {
            flex-direction: column;
        }
    }

    .bonus-description {
        font-size: 20px;
    }

    .bonus-carousel {
        margin-right: -28px;
    }

    .slick-slide img {
        border: unset;
    }
    .fa-arrow-left {
        left: -60px;
        top: calc(50% - 20px);
        color: white;
        background-color: transparent;
    }

    .fa-arrow-right {
        right: -60px;
        top: calc(50% - 20px);
        color: white;
        background-color: transparent;
    }
}

/********************* PRIMARY HEADER *********************/
.primary-header-container {
    display: flex;
    background-color: #F5F5F5;
    /*background: linear-gradient(to bottom, #F5F5F5, #ffffff);*/
    padding: 1em;

    .header-description {
        font-family: "Inter", "Poppins", Helvetica, Arial, sans-serif;
        font-size: 20px;

        p{
            font-weight: inherit;
            color: inherit;
        }
    }

    .home-header-title {
        font-size: 3.5rem;
    }

    .home-header-stats {
        right: 10%;
    }
}

@media (max-width: 768px) {
    .primary-header-container {
        flex-direction: column;
        padding-top: 0;

        .header-title {
            font-size: 2em;
        }

        .estimate-container {
            flex-direction: column;
            .estimate-btn {
                width: 100%;
                max-width: 300px;
            }
        }

        .header-right-part {
            width: 100%
        }

        .home-header-business-woman {
            width: 80%;
        }
    }
}

@media (min-width: 769px) {
    .primary-header-container {
        padding: 24px 30px 36px 76px;
        gap: 44px;

        .header-description {
            width: 75%;
        }

        .header-left-part {
            width: 65%
        }

        .header-right-part {
            width: 65%
        }

        .header-right-part-ads {
            width: 40%
        }

        .header-video-container {
            max-width: 800px;

            .u-video-player {
                 background-color: #ebebeb;
            }
        }
    }
}

/********************* SECONDARY HEADER *********************/
.secondary-header-container {
    .header-description {
        font-family: "Inter", "Poppins", Helvetica, Arial, sans-serif;
        font-size: 20px;
    }
}
/********************* LOGOS *********************/
.logos-container {
    width: 100%;
    padding: 24px;
    padding-top: 0;
    position: relative;

    .logos-list {
        gap: 16px 4px;
        > div {
            flex-grow: 1;
        }
        img {
            width: 100%;
            height: auto;
        }
    }
    .company-logo {
        max-width: 7em;
    }

    &::before {
        content: "";
        position: absolute;
        width: 90%;
        height: 1px;
        background-color: #e3e6f0;;
        border-radius: 4px;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .logos-container .company-logo {
        max-width: 100px;
    }
}

/********************* CONTACT *********************/
.contact-container {
    .logos-container {
        &::before {
            height: 0;
        }
    }
    .logos-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 10px;
    }
    .fa-arrow-left {
        left: -76px;
        top: 50%;
    }
    .fa-arrow-right {
        right: -76px;
        top: 50%;
    }
}

/********************* LOGOS *********************/
.footer-container {
    .footer-logos {
        gap: 20px;
    }
}



/********************* LOGOS *********************/
.clients-case-container {
    background-color: #F5F5F5;
}

/********************* STAKES *********************/
.stakes-container {
    @media (max-width: 768px){
        .row {
            padding-bottom: 0 !important;
        }
        .stakes-list {
            flex-wrap: wrap;
        }
    }

    a.small-link-underlined, a.small-link-underlined:hover {
        box-shadow: unset;
        text-decoration: underline;
        text-wrap-style: balance;
    }
    @media (min-width: 768px) {
        .card
        {
            min-height: 333px;
        }
    }
}


.stakes-list-container {
    background: linear-gradient(to bottom, #fff, #F5F5F5);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 60px;
    gap: 40px 50px;

    @media (min-width: 426px) and (max-width: 768px) {
        & {
            grid-template-columns: repeat(2, 1fr);
            padding: 0 12px;
            gap: 26px 20px;
        }
    }

    @media (max-width: 426px) {
        & {
            grid-template-columns: repeat(1, 1fr);
            padding: 0 32px;
        }
    }
}
/********************* SECTOR *********************/
.sectors-list-container {
    background: linear-gradient(to bottom, #fff, #F5F5F5);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 60px;
    gap: 40px 50px;

    @media (min-width: 426px) and (max-width: 768px) {
        & {
            grid-template-columns: repeat(2, 1fr);
            padding: 0 12px;
            gap: 26px 20px;
        }
    }

    @media (max-width: 426px) {
        & {
            grid-template-columns: repeat(1, 1fr);
            padding: 0 32px;
        }
    }
}
/********************* WHY GOALMAP *********************/
.why-goalmap-container, .our-experts-container, .features-container {
    background-color: #F5F5F5;
    padding: 64px 64px 32px;

    .why-goalmap-img {
        max-height:24rem;
        width:30rem;
        object-fit: contain;
    }

    @media (max-width: 768px) {
        & {
            padding: 32px 32px 4px;
        }
    }
}


/********************* WEB APPLICATION *********************/
.web-application-container {
    padding: 64px 64px 48px;
    .estimate-button {
        width: min(300px, 78vw);
    }
}

@media (max-width: 768px) {
    .web-application-container {
        padding: 32px 16px 40px;
    }
}

/********************* ESTIMATE BUTTON *********************/
.estimate-btn, .see-more-btn, .estimate-caption {
    width: 300px;
}

.estimate-caption {
    font-family: "Inter", "Poppins", Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #46494B;
}
/********************* FOOTER CTA *********************/
.cta-footer-container {
    .estimate-button {
        width: 300px;
    }
}
/********************* FAQ *********************/

/********************* FORMATS *********************/
.formats-container {
    .emoji-lg-size {
        width: 64px;
    }

    .icon-lg-size{
        background-color: #7044e7;
        width: 64px;
        height: 64px;
    }

    @media (max-width: 768px) {
        &{
            padding-top: 0!important;
        }
        .row {
            margin-left: 0!important;
            margin-right: 0!important;
            padding-top: 0!important;
        }
        .catalog-button-container {
            padding-top: 0!important;
        }
    }
}

/********************* CLIENT CASES *********************/
.client-cases-container {
    .logo-image {
        height: 72px;
        max-width: 112px;
        width: auto;
        object-fit: contain;
    }

    .hide-for-search{
        display: none !important;
    }

    .paginator-container {
            display: grid;
            grid-template-columns: repeat(11, 1fr); /* 11 equal columns */
            gap: 10px;
            width: 300px;
    }

    .left-arrow {
        cursor: pointer;
        grid-column: 1;
    }

    .right-arrow {
        cursor: pointer;
        grid-column: 11;
    }

    .page-number {
        cursor: pointer;
        min-width: 35px;
    }

    .empty-space{
        min-width: 35px;
    }

    .page-ellipsis {
        min-width: 35px;
        text-align: center;
    }

    @media (max-width: 768px) {
        .page-number, .empty-space, .page-ellipsis{
            min-width: 20px;
        }

    }

    .current-page {
        grid-column: 6;
        font-weight: bold;
        background: #7F4EF9;
        border-radius: 8px;
        color: white;
    }
}


/********************* CLIENT TESTIMONIES *********************/
.client-testimonies-container {
    .client-testimonies-list {
        display: flex;
        justify-content: space-evenly;
        gap: 16px;
    }

    .client-testimony {
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
        flex: 1 1 25%;
        max-width: 45%;
        overflow: hidden;

        .card-img-top {
            border-radius: 30px;
            max-height: 250px;
        }

        .company-logo {
            height: 75px;
            width: 75px;
        }

        .testimony-text {
            font-style: italic;
        }
    }
    @media (max-width: 768px) {
        .client-testimonies-list {
            flex-direction: column;
            align-content: center;
        }
        .client-testimony {
            max-width: 80%;
        }
    }
}



/********************* EMPLOYEES TESTIMONIES *********************/
.employee-testimonies-container {
    .testimony {
        font-size: 18px;
        font-style: italic;
    }
}
/********************* ARTICLES *********************/
.articles-container {
    .articles-list {
        justify-content: center;
        .article {
            box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
            overflow: hidden;

            img {
                object-fit: cover;
            }
            .card-footer {
                transition: 0.3s ease-in;
            }
        }
    }
}

/********************* HOME CATALOG *********************/
.home-catalog-container {
    @media (max-width: 768px){
        & {
            padding-top: 0 !important;
        }
    }
}

/********************* OUR SPEAKERS *********************/
.our-speakers-container {
    background-color: #F5F5F5;
}

/********************* KPI *********************/
.kpi-container {
    background-color: #7044e7;

    .kpi-banner {
        justify-content: space-evenly;
    }
}

@media (max-width: 768px) {
    .kpi-banner {
        flex-direction: column;
        gap: 16px;
    }
}
/********************* WELLOFIX *********************/
.catalog-container {

    .hide-for-search{
        display: none !important;
    }

    .items-list {
        min-height: 1010px;
    }
    .paginator-container {
        display: grid;
        grid-template-columns: repeat(11, 1fr); /* 11 equal columns */
        gap: 10px;
        width: 300px;
    }
    .left-arrow {
        cursor: pointer;
        grid-column: 1;
    }
    .right-arrow {
        cursor: pointer;
        grid-column: 11;
    }
    .page-number {
        cursor: pointer;
        min-width: 35px;
    }
    .empty-space{
        min-width: 35px;
    }
    .page-ellipsis {
        min-width: 35px;
        text-align: center;
    }
    .current-page {
        grid-column: 6;
        font-weight: bold;
        background: #7F4EF9;
        border-radius: 8px;
        color: white;
    }

    @media (max-width: 768px) {
        .page-number, .empty-space, .page-ellipsis{
            min-width: 20px;
        }

    }
}

/********************* EVENTS *********************/
.events-container {
    .slick-track {
        padding-bottom: 16px;
        padding-top: 8px;
    }

    .fa-arrow-left {
        left: -76px;
        top: calc(50% - 20px);
        color: white;
        background-color: transparent;
    }

    .fa-arrow-right {
        right: -76px;
        top: calc(50% - 20px);
        color: white;
        background-color: transparent;
    }

    .link-underlined {
        box-shadow: unset;
    }
}

/********************* WHITE PAPER *********************/
.white-paper-container {
    .fa-arrow-left {
        left: -76px;
        top: calc(50% - 20px);
    }

    .fa-arrow-right {
        right: -76px;
        top: calc(50% - 20px);
    }
}

.hubspot-white-paper-container{
    background: linear-gradient(to bottom, #ffffff, #F5F5F5, #ffffff);
}

/********************* SECTORS *********************/
.sectors-container {
    background-color: #F5F5F5;
    .slick-track {
        padding-bottom: 16px;
        padding-top: 8px;
    }
    .fa-arrow-left {
        left: -76px;
        top: calc(50% - 20px);
    }

    .fa-arrow-right {
        right: -76px;
        top: calc(50% - 20px);
    }

    @media (min-width: 768px) {
        .btn {
            margin-top: 12px;
        }
    }
}

/********************* PRICING *********************/
.pricing-container {

    .pricing-list {
        display: grid;
        gap: 16px; /* Spacing between grid items */

        grid-template-columns: repeat(3, 1fr); /* Default: 4 columns */

        @media (max-width: 1239px) {
            & {
                gap: 32px;
                grid-template-columns: repeat(2, 1fr); /* 2 columns under 992px */
            }
        }

        @media (max-width: 768px) {
            & {
                gap: 8px;
                grid-template-columns: 1fr; /* 1 column under 768px */
            }
        }
    }

    .pricing-feature {
        display: flex;
        gap: 12px;
        line-height: 1.5;
        margin-bottom: 4px;
    }
}

/********************* BONUS *********************/

.ease-in-transition {
    transition: all 0.3s ease-in;
}

.custom-shadow {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
}

.card-image {
    padding: 16px;
    border-radius: 22px !important;
    object-fit: cover;
    height: 250px;
}

.form-control-hover:hover {
  border-color: rgba(112, 68, 231, 0.5);
}

a:hover .bg-light {
    background-color: #dae0e5 !important;
}

@media (max-width: 768px) {
    html {
        width: 100%;
        overflow-x: hidden;
    }
}

/********************* NAVBAR *********************/
@media (max-width: 991px) {
    .goalmap-navbar {
        padding: 16px !important;
    }

    .nav-item {
        margin-top: 8px;
    }

    .navbar-nav {
        margin-top: 8px;
    }

    .navbar-submenu {
        a {
            line-height: 2.2;
        }
    }
}

@media (min-width: 992px) and (max-width: 1239px) {
    .goalmap-navbar{
        padding: 4px 1.5vw !important;

        .nav-item, .navbar-brand {
            margin-right: min(0.7vw, 32px) !important;
        }
    }
}
@media (min-width: 768px) {
    .contact-button, .connect-button {
        width: 100%;
    }
}
@media (min-width: 992px){
    .contact-button {
        margin-right: 0px !important;
    }
}

.goalmap-navbar {
    padding: 24px min(5vw, 76px) 8px;
    transition: O.3s ease-in;
    background: #f5f5f5;

    .nav-item, .navbar-brand {
        margin-right: min(2vw, 42px);
        transition: O.3s ease-in;

        &:last-child{
            margin-right: 0;
        }
    }


    a{
        font-size: 1rem;
    }

    @media (max-width: 991px){
        & {
           margin-right: 0;
        }
        a {
            line-height: 2.4;
        }
    }
    .navbar-submenu {
        a {
            line-height: 1.9;
        }
        @media (max-width: 991px){
            a {
                line-height: 2.4;
            }
        }
    }

    .navbar-button {
        max-width: 300px;
    }


    .catalog-submenu {
        line-height: 1.7;
        text-wrap-style: pretty;
    }

    .menu-subtitle {
        font-size: 20px;
        text-align: center;
    }

    .events-container {
        gap: 16px;
    }

    .events-submenu {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: auto;
          gap: 10px;

          @media (max-width: 426px) {
              & {
                  grid-template-columns: repeat(2, 1fr);
              }
              img {
                width: 100% !important;
              }
              .spotlight-content {
                flex-direction: column !important;
              }
          }

          a {
            line-height: 1.6;
          }

          .highlight-event-container {
              grid-column: span 3;
              grid-row: span 2;
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 8px;
              img {
                  object-fit: cover;
              }
              @media (max-width: 426px) {
                & {
                   grid-column: span 2;
                }

              }
          }

          .regular-event-container {
              grid-column: span 1;
              grid-row: span 1;
              min-height: 124px;

              &:hover .card {
                border: 1px solid #4819c588;
              }

              .u-header__promo-icon {
                  margin-right: 0;
                  max-width: 3.5rem;
              }
          }
    }

    .catalog-menu::before {
        right: 16px!important;
    }

    .ressources-menu {
        .spotlight-submenu::before{
            right: -16px!important;
            height: calc(100% - 20px)!important;
        }

        .go-further-submenu{
            &::before {
               height: calc(100% - 20px)!important;
            }
        }



        .client-case-spotlight {
            .card {
                background-image: url('/img/product/enedis.jpg');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                width: 100%;
                height: 400px;
            }
            &:hover a {
                color: #4819c5!important;
                text-decoration: none;
            }
        }
    }

    .ambitions-menu {
        @media (min-width: 992px){
            a {
                line-height: 1.9;
            }
        }
    }
}

.categorized-carousel {
    .tab-pane.active.show {
        overflow: visible;
    }
}

.text-wrap-balance {
    text-wrap-style: balance;
}

.text-wrap-pretty {
    text-wrap-style: pretty;
}