@import url(./element.css);

#el-header-page{
    position: sticky;
    top: 0;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 8px 10px rgba(0, 0, 0, .1);
    z-index: 9999;
    width: 100%;
}
#el-header-page .el-content-area{
    width: 100%;
    padding: var(--padding);
}
#el-header-page ul,
#el-container-menu-phone .el-social-links{
    display: flex;
    align-items: center;
    width: 100%;
}#el-header-page .el-checkout{
     margin-left: auto;
 }#el-header-page .el-checkout .el-btn,
  #el-header-page .el-open-menu-phone .el-btn,
  #el-container-menu-phone .el-social-links .el-btn{
      font-size: var(--font-size-text);
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      border-radius: 50%;
      background-color: var(--blue);
      color: #fff;
      transition: var(--transition);
  }#el-header-page .el-checkout .el-btn:hover,
   #el-header-page .el-open-menu-phone .el-btn:hover,
   #el-container-menu-phone .el-social-links .el-btn:hover{
       background-color: var(--violet);
   }#el-header-page .el-open-menu-phone .el-btn{
        background-color: transparent;
    }.el-menu-desktop ul {
         display: flex;
         align-items: center;
         gap: 1.5rem;
     }.el-menu-desktop a{
          font-size: calc(var(--font-size-text) * 1);
          font-family: var(--font-text) !important;
          text-decoration: none;
          color: #fff;
          font-weight: 600;
          transition: var(--transition);
      }.el-logo a{
            width: 80px;
            display: block;
           font-size: calc(var(--font-size-text) * 1.3);
           font-family: var(--font-text) !important;
           text-decoration: none;
           color: var(--violet);
           font-weight: 600;
           transition: var(--transition);
           background-image: linear-gradient(135deg, var(--violet), var(--blue));
           -webkit-background-clip: text; /* Pour la compatibilité avec certains navigateurs */
           -webkit-text-fill-color: transparent; /* Pour la compatibilité avec certains navigateurs */
       }.el-menu-desktop a:hover{
            color: var(--violet);
        }.el-menu-desktop{
             display: none;
         }
#el-sliders .owl-item img{
    width: 100%;
}
#el-sliders .el-content-area{
    width: 100%;
    padding: 50px 0;
}#el-sliders #el-particules{
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
 }#el-sliders #el-bg{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: .5;
  }
#el-sliders{
    width: 100%;
    background-image: url(../assets/img/header-bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}
#el-popular-products{
    width: 100%;
}
#el-popular-products .el-content-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}#el-popular-products .el-content-area .el-title-and-filter ul {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
 }
#el-popular-products .el-content-area .el-title-and-filter ul li {
    font-family: var(--font-text) !important;
    font-weight: 300;
    text-transform: capitalize;
    font-size: var(--font-size-text);
    background: #24298b;
    padding: var(--padding);
    border-radius: var(--border-radius);
    cursor: pointer;
    color: rgba(242, 242, 242, .5);
    transition: all var(--transition);
}
#el-popular-products .el-content-area .el-title-and-filter ul li.el-active {
    background-color: var(--violet);
    color: #f2f2f2;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}#el-popular-products .el-content-area .el-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
     justify-content: center;
     align-items: center;
     gap: 1rem;
 }

#el-statistic{
    width: 100%;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
    background-image: url(../assets/img/17.jpg);
    position: relative;
    min-height: 400px;
}#el-statistic::after{
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     background-image: linear-gradient(120deg, var(--violet) 0%, var(--blue) 100%);
     opacity: .9;
 }#el-statistic .el-content-area{
      width: 100%;
      padding: 1rem;
      position: relative;
      z-index: 1;
  }/* #el-statistic::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(36, 36, 36, 0.3);
    z-index: -1;
} */#el-statistic .el-grid,
       #el-heros .el-grid{
           display: grid;
           grid-template-columns: repeat(auto-fit, 200px);
           justify-content: center;
           align-items: center;
           gap: 2rem;
       }

#el-sponsors .el-grid{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 849px;
    /* display: flex !important;
    flex-wrap: wrap !important; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    grid-gap: 0;
}#el-sponsors .el-content-area{
     padding: 1rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
     width: 100%;
 }#el-sponsors{
      width: 100%;
  }

#el-heros{
    width: 100%;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-image: url(../assets/img/14.jpg);
    background-attachment: fixed;
    position: relative;
}#el-heros::after{
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     background-image: linear-gradient(120deg, var(--violet) 0%, var(--blue) 100%);
     opacity: .9;
 }#el-heros .el-content-area{
      width: 100%;
      padding: 1rem;
      position: relative;
      z-index: 1;
  }#el-heros .el-grid{
       grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
       width: 100%;
       gap: 1rem;
   }

/* PAGES */
#el-details-event .el-grid{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}#el-details-event .el-content-area{
     padding: 1rem 1rem 0;
 }
#el-breadcrumb{
    background-image: url(../assets/img/27.jpg);
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
    padding: 30px 0;
    width: 100%;
    position: relative;
    min-height: 200px;
}#el-breadcrumb::after{
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     background-image: linear-gradient(120deg, var(--violet) 0%, var(--blue) 100%);
     opacity: .9;
 }#el-breadcrumb .el-content-area{
      width: 100%;
      padding: 0 1rem;
      position: relative;
      z-index: 1;
  }#el-breadcrumb .el-grid{
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: .5rem;
       justify-content: flex-start;
       width: 100%;
   }#el-breadcrumb a,
    #el-breadcrumb span{
        text-decoration: none;
        font-size: calc(var(--font-size-text) * 1.3);
        color: var(--colorText);
        font-family: var(--font-text) !important;
        font-weight: 600;
    }#el-breadcrumb a{
         color: rgba(242, 242, 242, .8);
         font-weight: 300;
     }
#el-details-event{
    margin-bottom: 1rem;
}
#el-details-event img{
    width: 100%;
}#el-details-event .el-contentainer{
     width: 100%;
     background-color: #fff;
     border-radius: 5px;
     border: 1px solid #efefef;
 }#el-details-event header{
      color: #1a1a1a;
      font-family: var(--font-text) !important;
      font-size: calc(var(--font-size-text) * 1.4);
      font-weight: 500;
      padding: 1rem;
      border-bottom: 1px solid #efefef;
  }#el-details-event main{
       padding: 1rem;
       display: flex;
       flex-direction: column;
       gap: 1rem;
       min-height: 180px;
   }/* .rotor-top,
.rotor-bottom,
.rotor,
.rotor-leaf-rear,
.rotor-leaf-front{
    background-color: var(--success) !important;
}.flipdown.flipdown__theme-dark .rotor:after{
    border-color: var(--success);
} */#flipdown{
            width: 100% !important;
            /* min-height: 140px; */
        }#el-counter-down{
             font-size: var(--font-size-text);
             font-family: var(--font-text) !important;
         }
.el-contentainer .el-event-right{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}.el-contentainer .el-icon{
     background-color: rgba(80, 90, 221, .3);
     color: var(--blue);
     width: calc(var(--font-size-text) * 3);
     height: calc(var(--font-size-text) * 3);
     border-radius: 50%;
 }.el-contentainer .svg-inline--fa{
      color: inherit !important;
  }.el-contentainer .el-group-title{
       display: flex;
       flex-direction: column;
       gap: .5rem;
   } .el-contentainer .el-subtitle{
         color: rgba(0, 0, 0, .5);
         font-size: var(--font-size-text);
         font-family: var(--font-text) !important;
         font-weight: 300;
         letter-spacing: 1px;
     }.el-contentainer .el-title{
          color: #1a1a1a;
          font-size: calc(var(--font-size-text) * 1.1);
          text-transform: uppercase;
          font-family: var(--font-text) !important;
      } .el-contentainer main.el-descriptif,
        .el-contentainer main.el-descriptif *{
            color: #68686d;
            font-size: calc(var(--font-size-text) * 1.1);
            line-height: var(--line-height-text);
            font-weight: 300;
            font-family: var(--font-text) !important;
            letter-spacing: 1px;
        }.el-controls-btn{
             display: flex;
             justify-content: flex-start;
             gap: 1rem;
             align-items: center;
             width: fit-content;
         }.el-controls-btn .el-btn{
              padding: .5rem 1rem;
              background: var(--success);
              font-family: var(--font-text) !important;
              font-size: var(--font-size-text);
              border-radius: 5px;
              color: #fff;
              text-align: center;
              transition: var(--transition);
              box-shadow: 0 8px 10px rgba(0, 0, 0, .1);
          }.el-controls-btn .el-btn:hover{
               transform: scale(.97);
           }.el-controls-btn .el-vip{
                background: #1a1a1a;
                color: var(--warning);
            }

/* ABOUT */

#el-about{
    width: 100%;
}#el-about .el-content-area{
     width: 100%;
     padding: 1rem;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     color: var(--colorText);
     font-family: var(--font-text) !important;
     font-size: var(--font-size-text);
     line-height: var(--line-height-text);
 }#el-about .el-content-area > p{
      color: var(--colorText);
      font-family: inherit !important;
      font-size: var(--font-size-text);
      line-height: var(--line-height-text);
      font-weight: 300;
      letter-spacing: 1px;
  }#el-about .ui-accordion .ui-accordion-header,
   .ui-accordion .ui-accordion-content *{
       font-family: var(--font-text) !important;
       font-size: var(--font-size-text);
       line-height: var(--line-height-text);
   }.ui-accordion .ui-accordion-content *{
        font-weight: 300;
        letter-spacing: 1px;
        color: #68686d;
    }.ui-accordion .ui-accordion-content div,
     .ui-accordion .ui-accordion-content ul,
     .ui-accordion .ui-accordion-content ol{
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }
.ui-accordion .ui-accordion-content ul,
.ui-accordion .ui-accordion-content ol{
    list-style:initial;
    padding: 1rem;
}.ui-accordion .ui-accordion-content .el-intitule{
     color: #1a1a1a;
     font-size: calc(var(--font-size-text) * 1.2);
     font-weight: 600;
 }.ui-state-active,
  .ui-widget-content .ui-state-active,
  .ui-widget-header .ui-state-active,
  a.ui-button:active,
  .ui-button:active,
  .ui-button.ui-state-active:hover{
      background: var(--blue);
      border-color: var(--blue);
      color: #fff;
  }