html {
    background-color: #0b0b0b;
    color: white;



}




/* Fixer le footer au bas de la page */
footer {
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    left: 0;
    gap: 20px;
    bottom: 0;

    background-color: var(--background-night);
    padding: 30px;

}
/* 
header {
    background: radial-gradient(ellipse at bottom, #042816 0%, #000 100%);
   
    padding: 25px;
    padding-top: 9px;
    padding-bottom: 9px;
    border: 1px solid var(--background-day);
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-color: rgb(54, 54, 54);
} */



header {
    background: linear-gradient( to top, #121212ed 0%, #0000 100%);
    /* background-color: var(--background-night); */
    padding: 25px;
    padding-top: 9px;
   
    padding-bottom: 9px;
    margin: 20px 40px;
    border-radius: 29px;
    border: 1px solid #474545;
    /* position: sticky !important; */
    top: 20px;
    /* border-top-width: 0px; */
    /* border-left-width: 0px; */
    /* border-right-width: 0px; */
    /* border-bottom-width: 1px; */
    border-color: rgba(79, 79, 79, 0.192);
    z-index: 9999944 !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
    transition: top 0.3s, opacity 0.3s;
}


.header-hidden {
    top: -100px;
    opacity: 0;
  }


/* Utiliser Flexbox pour le contenu principal (main) */
main {
    display: flex;
    flex-direction: column;
    min-height: 80vh;
    background-color: transparent;
    background-image:linear-gradient(0deg, transparent 24%, rgba(15, 122, 27, 0.03) 25%, rgba(16, 69, 6, 0.03) 26%, transparent 27%, transparent 74%, rgba(12, 132, 42, 0.03) 75%, rgba(8, 82, 25, 0.03) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(5, 156, 63, 0.03) 25%, rgba(33, 149, 27, 0.03) 26%, transparent 27%, transparent 74%, rgba(9, 131, 54, 0.03) 75%, rgba(11, 167, 29, 0.03) 76%, transparent 77%, transparent);
  
    height:100%;
  background-size:100px 100px;
}

/* Styling des sections à l'intérieur du main */
section {
    flex: 1;

}









.fixed {
    position: relative;
    top: -99px;
    opacity: 1;
    animation: move 2s infinite alternate !important;
}

@keyframes move {
    0% {

        opacity: 1;
    }

    50% {

        opacity: 0.6;
    }

    100% {

        opacity: 1;
    }

}


.fixed1 {
    left: -50px;
    rotate: -22deg;
    transition: 0.14s;
}

.fixed2 {
    left: 50px;
    rotate: 22deg;
    transition: 0.14s;
}


.copyright {
    color: var(--text-color-lowWhite)
}

.minH29 {
    min-height: 29px;
}

.minH200 {
    min-height: 200px !important;
}

.colorGray {
    color: var(--text-color-lowWhite)
}

.colorGray2 {
    color: var(--text-color-lowWhite2)
}

.flex {
    display: flex;

}

.flexPc {
    display: flex;

}

.gap5 {
    gap: 5px
}

.gap10 {
    gap: 10px
}

.gap20 {
    gap: 20px
}

.gap30 {
    gap: 30px
}

.gap40 {
    gap: 40px
}

.gap50 {
    gap: 50px
}


.max340 {
    max-width: 340px;
}

.max400 {
    max-width: 400px;
}

.max700 {
    max-width: 700px;
}

.max900 {
    max-width: 900px;
}

.row {
    flex-direction: row;

}

.rowPc {
    flex-direction: row;

}

.mg30{
    margin: 30px;
}
.mg50 {
    margin: 50px;
}
.mgBottom20 {
    margin-bottom: 20px;
}

.mgBottom50 {
    margin-bottom: 50px;
}

.pd10 {
    padding: 10px;
}

.pd20 {
    padding: 20px;
}

.pd30 {
    padding: 30px;
}

.pd40 {
    padding: 40px;
}

.pd50 {
    padding: 50px;
}

.pdTop50 {
    padding-top: 50px;
}
.pdTop10{
    padding-top: 10px;
}

.pd100 {
    padding: 100px;
}

.pdTop100 {
    padding-top: 100px;
}

.pdBottom0 {
    transition: 0.3s;
    padding-bottom: 0px;
}
.pdBottom15 {
    transition: 0.3s;
    padding-bottom: 15px;
}

.pdTop0 {
    transition: 0.3s;
    padding-top: 0px;
}

.text_center {
    text-align: center;
}

.center {
    justify-content: center;
    align-items: center !important;
}

.top {
    align-items: flex-start;
}

.topColumn {
    justify-content: flex-start !important;
    flex-direction: column;
}

.space-between {
    justify-content: space-between;
    align-items: center;
}

.space-around {
    justify-content: space-around;
    align-items: center;
}

.space-evenly {
    justify-content: space-evenly;
    align-items: center;
}

.column {
    flex-direction: column;
}



.left {
    justify-content: left;
    align-items: left;
}

.leftPc_CenterMob {
    justify-content: left !important;
    align-items: flex-start !important;
    
  }

.right {
    justify-content: right;
    align-items: right;
}





.max_width {
    max-width: 100%;
    min-width: max-content !important;
}
/*HEADER*/
.nav_link {
    border: 1px solid #2e2e2e;
    padding: 8px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    border-radius: 5px;
    color: rgb(149, 149, 149);
    transition: 0.23s;
}



.raibownText {
    transition: 0.23s;
    background: linear-gradient(250.61deg, #66FA63 40%, #FFCE51 100%);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.raibownText2 {
    transition: 0.23s;
    background: linear-gradient(250.61deg, #66FA63 60%, #C0FF51 20%);
    background-size: 200%;
    background-clip: text;
    opacity: 0.6;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

@keyframes animate {
    0% {
        background-position: 0%;
    }

    50% {
        background-position: 100%;
    }

    100% {
        background-position: 0%;
    }
}

.raibownText:hover {
    animation-play-state: paused;
}

.nav_link:hover {
    user-select: none;
    transform: scale(1.05);
    color: var(--text-color-2)
}

.nav_link{
    max-height: 25px !important;
}
.active_link {
    transition: 0.23s;
    background: var(--main-color);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;


}






 /* ToolBar css */

.toolbar_button, .toolbar_button2, .toolbar_button_active, .toolbar_button_active2 {
    border-radius: 100px;
    border: 1px solid transparent;
    text-align: center;
    justify-content: center;
    font-family: "poppins_regular", sans-serif !important;
    user-select: none;
    font-size: 13px;
    padding: 5px 10px;  /* Ajouté une largeur de padding */
    margin: 0;
    opacity: 0.4;
    transition: opacity 0.23s;  /* Transition pour l'opacité */
    cursor: pointer;  /* Style commun pour le curseur */
}

/* Sélecteur pour tous les <p> dans .toolbar_button et .toolbar_button2 */
.toolbar_button p, .toolbar_button2 p {
    font-size: 13px;
}

.toolbar_slider, .toolbar_slider2 {
    position: absolute;
    top: 3px;
    left: 1%;
    height: 80%;
    width: 48%;
    background-color: #404040;
    border-radius: 100px;
    border: 1px solid #0330165d;
    transition: left 0.3s;  /* Animation du mouvement */
}

.toolbar_menu, .toolbar_menu2 {
    padding: 3px 5px;  /* Uniformisé le padding */
    border-radius: 100px;
    border: 1px solid transparent;
    background-color: #242424ce;
    text-align: center;
    justify-content: center;
    font-family: "poppins_regular", sans-serif !important;
    user-select: none;
    margin-bottom: 15px;
    font-size: 13px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.toolbar_menu:hover, .toolbar_menu2:hover, .toolbar_button:hover, .toolbar_button2:hover,
.toolbar_button_active:hover, .toolbar_button_active2:hover {
      /* Uniformisé le style de hover */
    opacity: 1;
}

.toolbar_button_active, .toolbar_button_active2 {
    opacity: 1;
    z-index: 12;
}

 /* ToolBar css end*/



.illustrations_prompt_items{
    position: relative;
    min-height: 150px;
    min-width: 100px;
    width: 100%;
    padding:10px;
    border-radius : 8px;
    background-color: #1B1B1B;
    border: 1px solid #383838;
}

#illustrations_items{
    overflow: hidden;
    padding: 15px;
    position: relative;
}

 /* Styles CSS pour le carrousel */
.carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    user-select: none;
  }
  
  .carousel-slide {
    flex: 0 0 auto;
    transition: all 0.5s ease;
    position: relative;
   
    user-select: none;
    background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(251, 251, 251, 0.461) 0%, rgba(0,0,0,0.5130646008403361) 100%);
    border-radius: 8px;
    padding: 1px;
    
  }
  
  .carousel-slide img {
    user-select: none;
    border-radius : 8px;
    max-width: 100%;
    display: block;
    max-height: 380px;
    transition: all 0.24s ease;
  }
  
  .carousel-control {
    user-select: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #33333333;
    backdrop-filter: blur(4px);
    border: 1px solid transparent;
    color: white;
    transition: all 0.19s ease;
    /* border: none; */
    padding: 10px;
    cursor: pointer;
    z-index: 1;
  }
  .carousel-control:hover{
    background-color: #5d5d5d;
    transition: all 0.49s ease;
    backdrop-filter: blur(4px);
    border: 1px solid #686868;
    border: 1px solid #403f3f;
    color: white;
  }
  .carousel-control:active{
    background-color: #c0c0c0;
    transition: all 0.59s ease;
    backdrop-filter: blur(4px);
    border: 1px solid #686868;
    color: white;
    transform: scale(0.98);
    top: 44%;
    
  }
  
  .carousel-control.left {
    right: 10px;
    
    border-radius: 9px;
  }
  
  .carousel-control.right {
    left: 10px;
    
    border-radius: 9px;
  }
  
  .carousel-slide:hover {
    z-index: 333;
    cursor: pointer;
    transition: transform 0.24s ease; /* Transition douce pour l'effet de scale */
    opacity: 1 !important;
    transform: scale(1.05); /* Légèrement plus grand */
}

.carousel-slide:hover img {
    z-index: 333;
    transition: all 0.24s ease;
    opacity: 1 !important; /* S'assurer que l'image survolée est entièrement opaque */
}








.svg_swap_click{
    cursor: pointer;
    transition: 0.23s;
    opacity: 0.4;
    position: absolute;
    right: 20px;
    top: 37%
   
}

.svg_swap_click:hover{
    opacity: 1;
    cursor: grab;
    transform: scale(1.1);
    transition: 0.23s;
}
.svg_swap_click:active{
    opacity: 1;
    cursor: grab;
    transform: scale(0.9);
    transition: 0.23s;
}




 


.btn {
    flex: 1 1 auto;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    background: linear-gradient(90deg, var(--c1, #6363FA), var(--c2, #CC53FC) 51%, var(--c1, #6363FA)) var(--x, 0)/ 200%;
    color: white;
    padding: 8px;
    border-radius: 5px;
    font-size: 14px;
}




.login_btn_div{
    padding: 7px;
    border-radius: 54px;
    border: 1Px solid #ccdc391b;
   
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4caf4f40;
    padding-bottom: 7px;
    padding-top: 7px !important;
}

@keyframes bg_animation {
    0% {
        background-color: #4caf4f40;
        outline: 1px solid rgba(0, 255, 76, 0.198);
        outline-offset: 1px;
    }
    100% {
        outline: 1px solid rgba(0, 255, 76, 0.198);
        outline-offset: 10px;
        background-color: #7faf4c2f;
    }
    
}
.radiaBackground_v2{
    background:  radial-gradient(ellipse at bottom, #193b1b 0%, #000 100%);
}



.login-btn:active{
    transform: scale(0.99) !important;
    
    outline: 1px solid rgb(202, 226, 215) !important; 
    transition: 0.23s;

}
.login-btn:hover {
    
    transform: scale(1.03);
    outline: 7px solid rgb(4, 68, 39);
    box-shadow: 0px 10px 31px #54ad58b8, 0px 10px 51px #1fff7c85;
   

}
.login-btn:hover p{
    filter: drop-shadow(2px 4px 29px rgba(255, 255, 255, 0.579)) drop-shadow(2px 4px 9px rgba(255, 255, 255, 0.553)) drop-shadow(2px 4px 12px rgba(255, 255, 255, 0.399));
}
.wrap {
    flex-wrap: wrap;
  
}

.login-btn{
    position: relative;
    overflow: hidden;
}


.login-btn::after{
    content: "";
    background-color: rgb(185, 255, 188);
    height: 100%;
    width: 3em;
    display: block;
    filter: drop-shadow(2px 4px 29px rgba(255, 255, 255, 0.579)) drop-shadow(2px 4px 9px rgba(255, 255, 255, 0.553)) drop-shadow(2px 4px 12px rgba(255, 255, 255, 0.399));
    position: absolute;
    top: 0;
    left: -4.5em;
    -webkit-transform: skewX(-45deg) translateX(0);
    transform: skewX(-45deg) translateX(0);
    -webkit-transition: none;
    transition: none;
    animation: moving_test 3s ease-in-out infinite;
}



@keyframes moving_test{
    30% {
        webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);
    }
    
    100% {
        webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);
    }
}




.section_idea_to_script_img{
    grid-column-gap: 8px;
    grid-row-gap: 0px;
    background-image: linear-gradient(to bottom, rgba(21, 145, 62, 0.153) 40%, rgba(6, 125, 57, 0));
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: 16px 10px 6px 8px;
    font-weight: 400;
    display: flex;
            }

            
.v2-announcement-pill-ctn {
    grid-column-gap: 8px;
    grid-row-gap: 0px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 95%, rgba(255, 229, 178, 0.23));
   
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: 6px 10px 6px 8px;
    font-weight: 400;
    display: flex;


   
}

.v2-announcement-pill-ctn2{
    grid-column-gap: 8px;
    grid-row-gap: 0px;
    background:#22c55e30 !important;
    background-image: none !important;
     
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: 10px 12px 10px 12px;
    font-weight: 400;
    display: flex;


    opacity: 1;
    outline-offset: 2px ;
   
    filter: drop-shadow(2px 4px 6px #0dcc6154);
    margin-bottom: 30px;
   
}


@keyframes outline_scale {
    0% {
        outline-offset: 2px;
        outline: 2px dashed #0dcc6154 ;
    }
    50% {
        outline-offset: 6px;
        outline: 2px dashed #0dcc6012 ;
    }
    100% {
        outline-offset: 2px;
        outline: 2px dashed #0dcc6066 ;
    }

    
}



.v2-pill-new {
    width: auto;
    height: auto;
    outline-offset: 0px;
    mix-blend-mode: normal;
    background-image: linear-gradient(#4CAF50 19%, #7ee507);
    border: 1px solid #5cda40;
    border-radius: 5px;
    outline: 3px rgba(0, 0, 0, 0);
    align-self: center;
    padding: 4px 8px;
    font-size: 20px;
    display: inline-block;
}

.text-block-40 {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    font-size: 10px;
    font-weight: 600;
    user-select: none;
}

.v2-announcement-text {
    color: #ffffff;
    user-select: none;
    letter-spacing: 0;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(#ffffffc4, #bcde93dd);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 14px;
    font-weight: 500;
}

.btn.login-btn {
    height: 44px;
    font-weight: bold;
    color: rgb(255, 255, 255);
font-family: "poppins_semiBold", sans-serif !important;
background-image: linear-gradient(#4CAF50 19%, #0ee507);
border: 1px solid #5cda40;
padding-left: 20px;
padding-right: 20px;

    border-radius: 58px;
    border: 1px solid #094a2cce;
    box-shadow: inset 0 0 2px rgba(223, 223, 223, .85), inset 0 -1px 2px -1px rgba(255, 255, 255, .71), 0 3px 2px rgba(16, 15, 15, 0.838), 0 3px 5px rgba(16, 15, 15, 0.932),0 3px 9px rgba(16, 15, 15, 0.932);


}

@keyframes scaleInout {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.985);
    }
    100% {
        transform: scale(1);
    }
    
}



@keyframes scaleInoutNone {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
    
}
.green{
    background: linear-gradient(250.61deg, #129C10 40%, #23CCC2 100%);
}

.blackBg {
    background-color: var(--background-night);
}
.blackBg2{
    background:  radial-gradient(ellipse at bottom, #15501900 0%, #1f422f00 100%);
}

button.no-style {
    border: none;
    background: none;
    outline: none;
    cursor: pointer;
}



.text_input_homePage {
    background-color: var(--background-night);
    border: 1px solid var(--text-color-lowWhite);
    border-radius: 4px;
    padding: 10px;
    color: var(--text-color-lowWhite2);
    transition: 0.23s;
    margin-bottom: 0px;
    min-width: 32vw;
    display: none;
    font-size: 14px;
    caret-color: #129C10;

    outline: none;
    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0%);
}

.text_input_homePage:focus {
    border: 1px solid var(--background-day);
}

.card-video {
    width: 34vh;
    height: 63vh;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: 0.24s;
    overflow-y: hidden;
    /*border-image-source: linear-gradient(138.11deg, #9814FF 16.16%, rgba(255, 68, 158, 0.05) 102.38%);*/

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card-video-select {
    animation: bouge 1.2s ease-in-out infinite alternate;
}

.card-video:hover {
    cursor: pointer;
    transition: 0.22s;
}

.video-container {
    position: relative;
    scroll-snap-align: start;

}



.none {
    display: none;
}

.play-pause-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: 0.23s;
    z-index: 2222;
}

.opacity05 {
    opacity: 0.2;

}

.progress-barDiv {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 5px;
    background: rgb(123, 123, 123);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.progress-bar {
    height: 5px;
    width: 0;
    background: #00ff00;
    /* vert fluo */
}

/* Fait moi une grille par groupe de 5 elements avec un flex wrap qui s'adapte à la taille de l'écran */
.grid {
    display: grid;
     width: -webkit-fill-available;
    width: -moz-available;
    grid-template-columns: repeat(auto-fit, minmax(240px, 350px));
    grid-gap: 20px;
    justify-items: center;
    /* Horizontal centering */
    align-items: center;
    /* Vertical centering */
    width: -moz-available;

}
.grid_1 {
    display: grid;
     width: -webkit-fill-available;
    width: -moz-available;
    grid-template-columns: repeat(auto-fit, minmax(40px, 180px));
    grid-gap: 30px;
    justify-items: center;
    /* Horizontal centering */
    align-items: center;
    
    /* Vertical centering */
    width: -moz-available;

}

/* .line:nth-child(1) {
    
    background-image: linear-gradient(#4CAF50 19%, #0ee507);
border: 1px solid #5cda40;
border-radius: 50px;
} */


.header_login_btn {
    height: 35px;
    background-image: linear-gradient(#0c250d 12%, #083f06 100%);
    border: 1px solid #5cda40;
    border-radius: 50px;
    display: flex;
    color: #14fe14;
    justify-content: center;
    align-items: center;
}

.line_transparent_btn{
    background-image: linear-gradient(#4caf5059 19%, #0ee5071c) !important;
    border: 1px solid #5cda4059 !important;
    border-radius: 50px;
}

.line {
    color: white;
    padding: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 4px;
    border: 1px solid rgb(39, 39, 39);
}

.line:hover {
    border: 1px solid rgb(72, 72, 72);
    transition: 0.23s;
    background: var(--main-color);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    outline: 4px solid rgb(4, 68, 39);

}

.header_login_btn:hover {
    background: linear-gradient(250.61deg, #129C10 40%, #23CCC2 100%);
    color: white;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: white;

}



.btn-gray:nth-child(1) {
    background: transparent;
}

.btn-gray {
    color: white;
    padding: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 4px;

    border: 1px solid rgb(67, 67, 67);
}

.btn-gray:hover {
    cursor: pointer;
    border: 1px solid rgb(72, 72, 72);
    transition: 0.23s;
    background: #393939;
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    outline: 2px solid rgb(91, 91, 91);
    transform: scale(1);
}

.btn-gray:nth-child(1):hover {
    background: #393939;
    color: white;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: white;

}


.point_restant {
    font-size: 20px;
}

.upgrade_link {
    background: linear-gradient(250.61deg, #129C10 40%, #23CCC2 100%);
    color: white;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: white;

}

.space-betweenMob {
    justify-content: end;
}

.faq {

    border: 1px solid rgb(56, 56, 56);
    border-radius: 4px;
    transition: all 0.23s;
    user-select: none;
    overflow: hidden;
    max-height: fit-content;
    max-width: 380px;
    cursor: pointer;
}

/* Styles pour les FAQ - Ajout des styles manquants */
.faqText {
    color: var(--text-color-lowWhite3);
    font-size: 16px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0;
    line-height: 24px;
    transition: all 0.3s ease-in-out;
    user-select: none;
}

.faqText.active {
    max-height: 500px;
    opacity: 1;
    padding-top: 10px !important;
    padding-bottom: 15px !important;
    margin-top: 10px;
    margin-bottom: 10px;
}

.faq.active {
    border-color: rgba(16, 173, 97, 0.533);
    background-color: rgba(16, 173, 96, 0.02);
}

.active {
    height: max-content !important;
    opacity: 1;
    transition: all 0.23s;
}

.rotate {
    transform: rotate(45deg);
    transition: 0.23s
}

svg {
    transition: 0.25s;
}

.faq:hover {
    cursor: pointer;
}

.centerText {
    text-align: center;
}

.pdTop0 {
    padding-top: 0px;
}

.pdLF24 {
    padding-left: 24px;
    padding-right: 24px;
}

#hero_section {
    width: 100%;
    min-height: 65vh;
    background: radial-gradient(63.62% 100.62% at 50% 140%, rgba(83, 198, 81, 0.35) 0%, rgba(0, 0, 0, 0) 100%);

    background-image:linear-gradient(0deg, transparent 24%, rgba(15, 122, 27, 0.05) 25%, rgba(16, 69, 6, 0.05) 26%, transparent 27%, transparent 74%, rgba(12, 132, 42, 0.05) 75%, rgba(8, 82, 25, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(5, 156, 63, 0.05) 25%, rgba(33, 149, 27, 0.05) 26%, transparent 27%, transparent 74%, rgba(9, 131, 54, 0.05) 75%, rgba(11, 167, 29, 0.05) 76%, transparent 77%, transparent);
  height:100%;
  background-size:100px 100px;
}

.greenH1 {
    font-size: clamp(1rem, 4vw, 4rem);
    text-align: center;
    line-height: 1.2;
    font-family: "poppins_semiBold", sans-serif !important;
    background: var(--main-color);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate 3s linear infinite;
}

.max_width_pc{
    width: max-content !important;
}

.greenH2 {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    font-family: "poppins_semiBold", sans-serif !important;
    background: var(--main-color);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate 3s linear infinite;
}

.greenP {
    font-size: 16px;
    line-height: 1.5;
    font-family: "poppins_semiBold", sans-serif !important;
    background: var(--main-color);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate 3s linear infinite;
}


.heightContent {
    height: -webkit-fill-available !important;
    height: -moz-available !important;
}

.widthContent {
    width: -webkit-fill-available !important;
    width: -moz-available !important;
}

.width100 {
    width: 100% !important;
}


.columnMob {
    flex-direction: row;
}

.no-scroll {
    overflow: hidden;
}


.mgTop50 {
    margin-top: 50px;
}

.mgTop20 {
    margin-top: 20px;
}

.mgTop10 {
    margin-top: 10px;
}

.mgTop100 {
    margin-top: 100px !important;
}

.mgTop20Snap {
    /* This enables scroll snapping */
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 76vh;
    /* Adjust this value according to your need */
}

.sectionSnap {
    /* This enables scroll snapping */
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    height: 100vh;
    /* Adjust this value according to your need */
}


#section-snap{
    background:  (ellipse at bottom, #15501900 0%, #1f422f26 100%) !important;
}










/* Le modal (background) */
.modal,
.login_modal,.pricing_modal,.image_modal{
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 144444;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0 0 0 / 84%);
    backdrop-filter: blur(5px);
}

.btn_primary_google {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 4px;
    padding: 5px 20px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
    transition: all 0.23s;
    display: flex;
    text-transform: capitalize;

    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 10px;
    text-decoration: none;

    border-radius: 9px;
    transition: all 0.15s;
    outline: 0px solid rgb(202, 226, 215);
}

.btn_primary_google:hover {
    text-decoration: none;
    transform: scale(1.05);
    outline: 3px solid rgb(3, 90, 50);
}

.login_modal,.pricing_modal,.image_modal {
    background-color: rgba(0, 0, 0, 0.601);
    backdrop-filter: blur(15px);
}

/* Modal Content */
.modal-content {
    background-color: #111;
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 40px;
    border: 1px solid rgba(0, 255, 0, 0.07);
    border-radius: 8px;
    z-index: 555555;
    width: 50%;
    /* Could be more or less, depending on screen size */
    color: #fff;
    animation: modal-bounce 0.6s;
}
.modal-content2{
    background-color: #1b1b1b;
}

@keyframes modal-bounce {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    60% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.modal-button {
    display: block;
    margin: 0;
    border: none;
    background-color: lime;
    color: black;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}

.height40vh {
    min-height: 40vh;
}

.close-button {
    background-color: #444;
    color: white;
    margin: 0px;
}

.visible {
    display: flex !important;
}

.emoji {
    font-size: 40px;
}

.close {
    color: #848484;
    float: right;
    font-size: 28px;
    position: relative;
    top: -14px;
    left: 5px;
}

.selectNone {
    user-select: none;
}

.close:hover,
.close:focus {
    color: #dedede;
    text-decoration: none;
    cursor: pointer;
}

.video-js .vjs-tech {
    border: 1px solid #3a3939;
    border-radius: 9px;
}

.vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    top: -0.5vh !important;
}
.vjs-big-play-button > .vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before{
    top: 3.9vh !important;
    transform: scale(1.4);
    color: #7fff84;
}
.video-js .vjs-fullscreen-control {
    cursor: pointer;
    flex: none;
    bottom: -40px !important;
}
.video-js .vjs-picture-in-picture-control {
    cursor: pointer;
    flex: none;
    bottom: -40px !important;
}
.video-js .vjs-time-control {
    flex: none;
    font-size: 1em;
    line-height: 3em;
    min-width: 2em;
    width: auto;
    padding-left: 1em;
    padding-right: 1em;
    bottom: -40px !important;
    left : 44px
}

.video-js .vjs-slider {
    position: relative;
    cursor: pointer;
    padding: 0;
    margin: 0 0.45em 0 0.45em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #3260a2;
    background-color: #4caf4f47;
}
.video-js .vjs-load-progress div {
    background: rgb(109 190 16);
}

.video-js .vjs-volume-panel {
    display: flex;
    bottom: -40px !important;
}
.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{
    bottom: -12px !important;
}
.video-js .vjs-progress-control {
    position: absolute;
    width: inherit;
    cursor: pointer;
    flex: auto;
    display: flex;
    align-items: center;
    min-width: 4em;
    touch-action: none;
}
.vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
    content: "\f107";
    top: -6px;
}
.vjs-icon-picture-in-picture-enter:before, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
    content: "\f127";
    top: -7px;
    left : 38px
}
.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
    content: "\f108";
    top: -6px;
    left: 40px
}
#final_video_output{
    height: 72vh;
    width: 79vw;
    max-width: 384px;
    transition : 0.23s;
   
}



.bgColorGray{
    background: #282626;
}
.fit-content {
    width: fit-content;
    height: fit-content;
}

.mob_only {
    display: none;
}

/*FOOTER*/
.foot_link {
    padding: 10px;
    text-decoration: none;
    color: rgb(149, 149, 149);
    transition: 0.23s;
}



.foot_link:hover {
    user-select: none;
    color: rgb(255, 255, 255);
}








/*Page pricing*/

.animBtn {
    animation: outline 1s infinite ease-in-out;
    transition: 0.3s;
}

@keyframes outline {
    0% {
        outline: 0px solid rgb(4, 68, 39);
    }

    50% {
        outline: 4px solid rgb(3, 90, 50);
    }

    100% {
        outline: 0px solid rgb(4, 68, 39);
    }

}

#oldPrice1, #oldPrice2 {
    text-decoration: line-through;
    text-decoration-color: #637362;
    opacity: 1;
    color: #4d4d4d;
    font-size: 30px;
}
  
  .custom_first_month{
    position: absolute;
    background: #0dcc602d;
    border: 1px solid #0dcc60;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 4444;
    backdrop-filter: blur(10px);
    color: #0dcc61;
    width: 264px;
    text-align: center;
    font-size: 15px;
    border-radius: 19px;
    top: -20px;
    border-radius: 3px;

}

.btn_primary_pricing {
    text-decoration: none;
    border: none;
    background: transparent;
    border: 1px solid rgb(194, 194, 194);
    cursor: pointer;
    transition: 0.3s;
    border-radius: 29px;

}

.btn_primary_pricing:hover,
.select {

    outline: 4px solid rgb(4, 68, 39);
    background: var(--main-color);
    border-color: #0dcc61;

}
.btn_primary_pricing:hover{
    color : white !important;
}

.pricing_card {
    transform: scale(0.9);
    user-select: none;
    display: flex;
    flex-direction: column;
    width: -webkit-fill-available;
    width: -moz-available;
    align-items: center;
    justify-content: start;
    background-color: rgb(21, 21, 21);
    border: 1px solid #4F4F4F;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.05));
    border-radius: 20px;
    min-width: 25vw;
    min-height: 20vh;
    transition: 0.2s;
    max-width: 550px;
   

}





.pricing_card_favoris{
    overflow: hidden;
    background: rgb(32, 32, 32);
  }
  .pricing_card_favoris:after{
    content: "";
    position: absolute;
    top: -290px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    border-radius: 110px;
    height: 580px;
    filter: blur(50px);
    z-index: -1;
    background-image: linear-gradient(180deg, #4cc71749 0%, #20232000 100%);
  }
  .pricing_card_favoris:before{
    content: "";
    position: absolute;
    bottom: -510px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    border-radius: 110px;
    height: 580px;
    filter: blur(50px);
    z-index: -1;
    background-image: linear-gradient(180deg, #c7b81749 0%, #20232000 100%);
  }
  

.pricing_card:nth-child(2) {
    transform: scale(1.05);
    border: 1px solid rgb(4, 68, 39);
}

.pricing_card:nth-child(3) {
    border: 1px solid rgb(4, 68, 39);
}

.pricing_card_header_price {
    font-size: 40px;
    font-family: "poppins_semiBold", sans-serif !important;
    color: white;
    margin-bottom: 0px;
}

.pricing_card_header_price_currency {
    font-size: 20px;

    color: white;
    margin-bottom: 0px;
}

.pricing_card_header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    padding-top: 10px;
    padding-bottom: 0px;
    gap: 15px;
}

.pricing_card_header_title {
    font-size: 25px;
    font-family: "poppins_semiBold", sans-serif !important;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
}

.pricing_card_hr {
    opacity: 0.4;
}

.custom_hr,.custom_hr2{
    border : none;
  
    margin : 30px;
    height: 1px;
    background: #4F4F4F;
    opacity: 0.2;
   
}

.status_subscription{
    background: #0A3419;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color : #22C55E;
    border-radius : 5px
}
.custom_hr2{
    padding: 0px !important;
    margin: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #696969;
}

.raibownText2{
    background: linear-gradient(90deg, #0dcc61 0%, #0dcc61 20%, #0dcc61 40%, #0dcc61 60%, #0dcc61 80%, #0dcc61 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 2s ease-in-out infinite;
    font-family: "poppins_semiBold", sans-serif !important;
   opacity: 1;
    margin-bottom: 0px;
   
    user-select: none;
    text-transform: uppercase;
}
.pricing_card_body_title {
    font-size: 20px
}


.pricing_card_body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 30px;
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
    gap: 15px;
}

.pricing_card a {
    cursor: pointer
}

.pricing_card:hover {

    transition: 0.2s;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
}

#pricing_section {

    min-height: 89vh;
    background: transparent;
    padding-bottom: 100px;
}

.radiaBackground {
    width: 100%;
    background: radial-gradient(63.62% 100.62% at 50% 140%, rgba(83, 198, 81, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
}


.billing_method {
    transiton: all 0.2s;
    border-radius: 50px;
    padding: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 1vh;
    background: linear-gradient(250.61deg, rgba(18, 156, 16, 0) 40%, rgba(35, 204, 194, 0.44) 100%);
    border: 1px solid #404040;
}

.ft12 {
    font-size: 13px;
}

.ft12 p {
    font-size: 13px;
}
.ft15 {
    font-size: 15px !important;
}

.best_choice {
    background: linear-gradient(250.61deg, rgba(18, 156, 16, 0) 40%, rgba(35, 204, 194, 0.44) 100%);
    border: 1px solid #404040;
    text-align: center;
    padding: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 5px;
}


#month_billing,
#year_billing {
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 18px;
    transition: 0.14s;
}

#month_billing {
    padding-left: 15px;
    cursor: pointer;
    user-select: none;
}

#year_billing {
    user-select: none;
    cursor: pointer;
}

.billing_select {
    transition: 0.14s;
    background: var(--background-day);
    color: var(--text-color);
}



#script_render {
    color: white;
    padding: 20px;
}



.nav_bar_workspace ul {
    display: flex;
    flex-direction: column;
    text-align: center;

    position: fixed;
    height: fit-content;
    max-width: 70px;
    background-color: #1f1f1f;
    gap: 0;

}

.nav_bar_workspace ul li {
    display: flex;
    flex-direction: column;
    text-align: center;


    background-color: #1f1f1f;
    gap: 0;
    transition: 0.15s;
}
.nav_bar_workspace ul li a {
    padding: 20px 10px 20px;
}
.nav_bar_workspace ul li:hover {
    background-color: #2f2f2f;
    transition: 0.15s;
}

.nav_bar_link {
    transition: 0.15s
}
path {
    transition: 0.15s
}
.nav_bar_link:hover path {
    transition: 0.15s;
    fill: #66FA63;
}

.nav_bar_link_active path {
    transition: 0.15s;
    fill: #66FA63;
}


.nav_bar_link_active {
    background-color: #2f2f2f !important;
    transition: 0.15s;
}

/*Page PROJECT */

.profil_card {
    background: #151515;
    border: 1px solid #4F4F4F;
    box-sizing: border-box;
    border-radius: 100%;


    transition: 0.2s;
    object-fit: cover;

}

.relative {
    position: relative;
}

.div1_project_title {
    position: absolute;
    top: -35px;
    font-size: 16px;

}

.div1_project_title2 {
    position: absolute;
    top: -35px;
    font-size: 16px;
}

.grid_project {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30%, 42%));
    gap: 9vw;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.project_card {

    border: 1px solid #4F4F4F;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: 0.2s;
    object-fit: cover;

    min-height: 80vh;
}
.project_card:nth-child(1){
    width : max-content 
}


.video_card_border,
.video_card_border1 {
    border-radius: 8px;
    min-height: 65vh;
    max-height: 65vh;
    max-width: 340px;
    border: 2px dashed #424141;
}


#loading_script svg{
    height: 20px !important;
}
.video_card_border1 {
    min-height: max-content;
    max-height: max-content;
    padding: 24px;
    padding-left: 0px;
    padding-right: 0px;
}

.border_none {
    border: none
}


/*INPUT */

.input_text {
    border: 1px solid #4F4F4F;
    min-height: 40px;
    color: #B8B8B8;
    background: #484848;
    transition: 0.13s;
    resize: vertical;
    padding: 10px;

    border-radius: 4px;

    outline: 0px solid rgba(4, 68, 39, 0);

}

.input_text:focus {
    outline: 1px solid rgb(4, 68, 39);
    border: 1px solid #4F4F4F;
    min-height: 40px;
    color: #ededed;
    background: #484848;
    border-radius: 4px;
}





.input_text_white {
    border: 1px solid #4F4F4F;
    min-height: 40px;
    color: #121212;
    background: #2d2d2d;
    transition: 0.13s;
    resize: vertical;
   
    border-radius: 8px;

    outline: 0px solid rgba(4, 68, 39, 0);

}

.input_text_white:focus {
    outline: 1px solid rgb(4, 68, 39);
    border: 1px solid #4F4F4F;
    min-height: 40px;
    color: #252525;
    background: #3b3a3a;
    border-radius: 4px;
}





.input_text_none {
    border:none;
    min-height: 40px;
    color: #B8B8B8;
    background: transparent;
    transition: 0.13s;
    resize: vertical;
    padding: 10px;

    border-radius: 4px;

    outline:none;

}

.input_text_none:focus {
    
    min-height: 40px;
    color: #525252;
    background: transparent;
    border-radius: 4px;
}




#profil_btn:hover {
    transform: scale(1) !important;
}

.profil_menu {
    opacity: 0;
    transition: opacity 0.5s;
    visibility: hidden;
    position: absolute;
    top: 45px;
    right: 0px;
    padding: 10px;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    background: #363636;
    border-radius: 3px;
    border: 1px solid #2f2f2f;
    z-index: 333;
    transition: 0.2s;
    box-shadow: 1px 2px 15px 0px #00000061;

}

.borderNone {
    border: none !important;
}

.profil_menu2 {
    opacity: 0;
    transition: opacity 0.5s;
   
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 10px;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    background: #363636;
    border-radius: 3px;
    border: 1px solid #2f2f2f;
    z-index: 333;
    transition: 0.2s;
    visibility: hidden;
    width: -webkit-fill-available !important;
    width: -moz-available !important;
    box-shadow: 1px 2px 15px 0px #00000061;

}

.mg_left_pc75 {
    margin-left: 75px;
}

.profil_menu.show {
    opacity: 1;
    visibility: visible;
}
.profil_menu2.show {
    opacity: 1;
    visibility: visible;
    z-index: 333333;
    width: -webkit-fill-available !important;
    width: -moz-available !important;
}

.profil_menu_nav_link {
    color: #B8B8B8;
    width: 200px;
    transition: 0.2s;
    padding: 10px;
    
    border-bottom: 1px solid rgb(49, 49, 49);
}

.profil_menu_nav_link:hover {
    color: #ededed;
    transition: 0.2s;
    padding: 5px;
    background-color: #464646;
}



.select-container {
    position: relative;
}

.custom-select {
    position: relative;
    display: inline-block;
    user-select: none;

}

.input_select {
    background-color: #484848;
    border-radius: 4px;

    color: white;
    font-size: 15px;
    padding: 10px;
    border: 1px solid #4F4F4F;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding-right: 30px;
    /* space for the icon */
}

.select-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}



.select-container {
    position: relative;
}

.custom-select {
    position: relative;
    display: inline-block;

    cursor: pointer;
}

#selectedOption {
    padding-right: 30px;
    /* Espace pour l'icône */
}

.select-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}


.progressBarContainer {
    position: relative;
    width: 100%;
    max-width: 200px !important;
    height: 22px;
    background: #4caf5021;
}

.progressBar {
    position: absolute;
    height: 100%;
    background: #4caf50;
    width: 0%;
    max-width: 200px !important;
}

.maxContent {
    max-height: max-content;
    min-height: max-content;
}

.width_maxContent{
    width: max-content !important;
}
.minWidth300pxMobile{
    min-width: 390px !important;
}
.playButton {
    /* Suppression des styles par défaut */
    border: none;
    background: none;
    padding: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer;
    outline: inherit;
    color: white;
    font-size: 15px;
}

.custom-dropdown {
    position: absolute;
    width: 102%;
    background: #393939;
    color: white;
    border-radius: 4px;
    top: 44px;
    left: -2px;
    user-select: none;
    max-height: 140px;
    overflow: auto;
    z-index: 22;
}

.tag,.tag_basic {
    border: 1px solid rgb(16, 229, 16);
    font-size: 12px;

    border-radius: 4px;
    padding: 5px;
    margin: 5px;
    display: inline-block;
    cursor: pointer;
    transition: 0.14s;
}
.tag2{
    border: 1px solid rgb(16, 229, 16);
    font-size: 11px;

    border-radius: 4px;
    padding: 5px;
    margin: 0px;
    display: inline-block;
    cursor: pointer;
    transition: 0.14s;
}

.tag_basic{
    border : 1px solid rgb(87 87 87)
}
.tag_basic span{
    color: rgb(136, 136, 136);
}
.custom-dropdown1 {
    min-width: 256px;
     width: -webkit-fill-available;
    width: -moz-available;
   width: -moz-available;;
    top: -305px;
    left: -3px;
    user-select: none;
    max-height: 300px;
}

.custom-dropdown div {
    padding: 8px;
    transition: 0.14s;
}

.custom-dropdown div:hover {
    background: #484848;
}

.hidden {
    display: none !important;
}


.userSelectNone {
    user-select: none;
}

.radio-container {
    display: flex;
}

.radio-container label {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 4px;
    background: #292929;
    cursor: pointer;
    transition: 0.20s;
}

.radio-container input[type="radio"] {
    display: none;
}

.radio-label.checked {
    background: linear-gradient(250.61deg, #129C10 40%, #23CCC2 100%);
    color: white;
    transition: 0.20s;
}
.radio-label2.checked{
   
    background: #717171;
    color: white;
    transition: 0.20s;

}



.playButtonVoice,
.playButton,
.stopButton,
.stopButtonVoice {
    border: none;
    appearance: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.20s;
    background: #393939;
    color: white;
    transition: 0.20s;
    min-height: 30px;
    max-height: 30px;
    min-width: 30%;
    max-width: 30%;
}

.radio-container label:hover {
    background: linear-gradient(250.61deg, #129C10 40%, #23CCC2 100%);
    color: white;
}

.radio-label2:hover {
    background: #393939 !important;
    color: white;
}
.checkmark {
    font-size: 21px !important;
}

.ftNormal {
    font-size: 14px !important
}


.pd0 {
    padding: 0px !important;
}
.noneHover {
    transform: none !important;
  border-color : transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.noneHover:hover {
  transform: none !important;
  border-color : transparent !important;
  box-shadow: none !important;
  outline: none !important;
}



.link_gray {
    border: 1px solid #363636;
    padding: 3px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    border-radius: 5px;
    color: #CFCFCF;
    transition: 0.23s;
    background: #2E2E2E;
    outline: 0px rgb(4, 68, 39);
    
}
.max_width_900{
    max-width: 900px;
}
.link_gray:hover {
    background: #363636;
    color: white;
    outline: 2px rgb(6, 101, 58) ;
   
}
#toolbar_item_bar_2{
    display: none;
}


.card_subscribe,.card_subscribe2{
    border: 1px solid #292929;
    border-radius: 9px;
    margin-top: 52px !important;
    background: #181818;
    padding: 32px;
}


#show_image_style{
    padding: 0px !important;
}
.image_style_default{
    border-radius: 4px;
    height: 45px;
    object-fit: cover;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}



.slider_custom_price_cl{
    width: 100%;
    -webkit-appearance: none;
    height: 5px;
    border-radius: 5px;
    background: #0ec46c;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}


.slider_custom_price_cl{
    -webkit-appearance: none;
    width: 100%;
    border: 1px solid #ffffff3b;
    height: 5px;
    border-radius: 5px;
    background: linear-gradient(250.61deg, #ffce517d 0% , #66fa63eb 40%, #00000000 100%);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}


.slider_custom_price_cl::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: linear-gradient(250.61deg, #66FA63 40%, #FFCE51 100%);
    z-index: 222;
    cursor: pointer;
    border-radius: 50%;
    border : solid 1px #21e787;
}

.slider_custom_price_cl::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
    z-index: 222;
    border-radius: 50%;
}

.slider_label {
    position: absolute;
    margin-left: 0px;
    text-align: center;
    width: max-content;
}

.slider_label::after {
    content: '';
    position: absolute;
    width: 3px;
    box-shadow: 0px 0px 5px 2px #7dff816b;
    z-index: -1;
    height: 15px;
    background-color: #7dff82;
    left: 50%;
    border-radius: 22px;
    top: -12px;
}

.slider_value {
    position: absolute;
    top: -42px;
    padding-left: 9px;
    padding-right: 9px;
    left: 0%;
    width: max-content;
    margin-left: 0;
    text-align: center;
    backdrop-filter: blur(5px);
    background-color: #09090961;
    /* padding: 0; */
    border-radius: 5px;
    border: 1px solid rgb(115 115 115 / 38%);
}


.section_gray_content{
    opacity: 0;
    transition: 0.24s;
}

.show{
    opacity: 1;
    transition: 0.24s;
    visibility: visible;
    display: flex !important;
}



.responsive_row_to_column{
    align-items: flex-start;
}
@keyframes scale {
    0% {
        transform: scale(0.89);
    }

    50% {
        transform: scale(1.24);
    }

    100% {
        transform: scale(1);
    }
}

.opacity-animation-inverse {
    animation: opacity-animation-inverse 0.25s forwards;
}
@keyframes opacity-animation-inverse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }
    
}
@keyframes scale-inverse {
    0% {
       opacity: 1;
    }

    50% {
        transform: scale(0.49);
        opacity: 0.2;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.scale-animation {
    animation: scale 0.34s;
}
.scale-animation-inversed {
    animation: scale-inverse 0.25s forwards ;
}





.animation_floating{
    animation: animation_floating 1s infinite alternate;
}
@keyframes animation_floating {
    0% {
        transform: translateY(0px);
    }

    

    100% {
        transform: translateY(-10px);
    }
    
}






/**/

.vertical_hr1{
    border : none;
    border-left: 1px solid #989898;
    height: 20px;
    margin: 0px 10px;
}
.vertical_hr91{
    
    height: 90px;
    
}
.style_design{
    width: max-content !important;
    background-color: #484848;
    padding:2px 10px;
    border-radius: 5px;
    font-size: 13px;
    border : solid 1px transparent;
    transition : 0.20s
}
.style_design:hover{
    transition : 0.20s;
    cursor: pointer;
    background-color: #000000;
    color : #1ECC7C;
    border : solid 1px #1ECC7C;
}
.style_design_active,.new_feature_active{
    background-color: #000000;
    padding:2px 10px;
    border-radius: 5px;
    font-size: 13px;
    color : #1ECC7C;
    border : solid 1px #1ECC7C;
}
.bubble{
    background-color: #484848;
    padding:5px;
    border-radius: 100px;
    height: 20px;
    width: 20px;
    display: flex;
    transition : 0.20s;
    align-items: center;
    
}
.bubble:hover{
    cursor: pointer;
    background-color: #000000;
    transition : 0.20s;
}
.bubble:hover svg path{
    transition : 0.20s;
    fill : #1ECC7C;

}

.bubble_white_gray{
    background-color: #f6cbcb;
    padding:5px;
    border-radius: 100px;
    height: 14px;
    width: 15px;
    display: flex;
    transition : 0.10s;
    align-items: center;
    color: #f37a7a;
    
}
.bubble_white_gray:hover{
    cursor: pointer;
    background-color: #f37a7a;
    transition : 0.10s;
    color : white;
    transform: scale(1.14);
}
.section_gray{
    background-color: #161515;
    padding: 5px;
    border-radius: 5px;
    transition : all 0.10s;
    height: 430px;
    border: 1px solid #303030;
    overflow: auto;
   
    
}
#section_gray_controler{
    padding: 10px;
}
.section_gray:hover{
    cursor: pointer;
    background-color: #303030 !important;
}
.section_gray_active{
    height: 50px !important;
    overflow: hidden;
   
    transition : all 0.23s
}



.titkok_thumbmail{
    min-width: 37px;
    max-width: 37px;
    height: 70px;
    border : solid 1px transparent;
    transition : 0.20s;
    object-fit: cover;
    background-size: cover;
    background-position: top;
    background-color: #C8C8C8;
    border-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

#section_gray_svg{
    transition : 0.20s;
    transform: rotate(180deg);

}
.section_gray_svg_active{
    transition : 0.20s;
    transform: rotate(0deg) !important;

}




.hero_title{
    font-family: "poppins_semiBold", sans-serif !important;
    min-width: 760px;
    z-index: 4555;
}
/*$$$$$$$$$$$$$$$$$$$*/

.sticky_header{
    position: fixed;
    z-index: 111;
     width: -webkit-fill-available;
    width: -moz-available;
    
}
.sticky_header_grid{
margin-top: 80px;
}








.spane_step::after{
    content: "1";
    position: absolute !important;
    color: #12B76D;
    padding: 10px 10px;
    border-top-right-radius: 28px;
    border-bottom-left-radius: 28px;
    width: 33px;
    height: 22px;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    
    font-weight: 900 !important;
    font-family: "poppins_semiBold", sans-serif !important;
    font-size:clamp(2em, 2.5vw, 2.3rem) !important;
    border: 1px solid #12B76DBA;
    
    top: -50px;
    left: 0%;
    animation: anim_span_step 2s infinite;
    background-color: #0F7C3B31;
    z-index: -1;
    transition: none;
  }

  @keyframes anim_span_step {
    0% {
        border: 1px solid #12b76d7a;
        transform: perspective(110px) rotateY(-15deg) rotateX(-20deg);
    }
    30% {
        border: 1px solid #08ff90;
    }
    60% {
        border: 1px solid #12b76d7a;
        filter: drop-shadow(0px 0px 10px #12b76d7a);
        transform: perspective(110px) rotateY(25deg) rotateX(19deg);
    }
    
    100% {
        border: 1px solid #15ff21ba;

        transform: perspective(110px) rotateY(-15deg) rotateX(-20deg);
    }
    
  }

  .spane_step2::after{
    content: "2";
  }


  .spane_step3::after{
    content: "3";
  }

  .spane_step4::after{
    content: "4";
  }

  .spane_step5::after{
    content: "5";
  }
  
  

  

@media screen and (max-width: 1155px) {
.section_idea_to_script_img_responsive{
    width: 400px;
}

}
@media screen and (min-width: 1140px) {



.sticky_header{
    position: fixed;
    z-index: 111;
     width: -webkit-fill-available;
    width: -moz-available;
}
}

@media screen and (max-width: 1140px) {
    .spane_step::after{
        display: none !important;
       }
    .centerMob {
        text-align: center !important;
        justify-content: center !important;
    }
    .leftPc_CenterMob {
        justify-content: center !important;
        align-items: center !important;
        
      }
    .responsive_row_to_column{
        align-items: center !important;
        justify-content: center;
        gap: 30px;
        flex-direction: column !important;
    }
    .minWidth300pxMobile {
        min-width: max-content !important;
    }

    .fixed1 {

        left: 30px;
    }

    .fixed2 {

        left: -30px;
    }
    .column_in_mobile{
        flex-direction: column;
    }

    .wrapMob {
        flex-wrap: wrap !important;
        
    }   

    .workspace_link_pc{
        display: none !important;
    }
    

    
}




@media screen and (max-width: 1000px) {
   
  


    .width_maxContent {
        width: -webkit-fill-available !important;
    }
    .modal_image{
        display: none !important;
    }
    .card_subscribe{
        background: fixed;
        border : none;
    }
    .card_subscribe2{
       margin-top: 5px !important;
    }
    .fixed1 {

        left: 50px;
    }

    .fixed2 {

        left: -50px;
    }

    .grid_project{
        gap: 3vw;
    }
    
}


@media screen and (max-width: 970px) {

    .hideTablette{
        display: none !important;
    }
    .fixed1 {

        display: none;
    }

    .fixed2 {

        display: none;
    }

}

@media screen and (max-width: 1055px) {
.grid_project{
    gap : 12vw !important
}
}


@media screen and (max-width: 890px) {
    
    header {
        margin-bottom: 0px;
    }
    
    #tuto_final_render{
        flex-direction : column !important
    }
    .affiliate_banner {
        display: none !important; /* hide on mobile */
    }
    #show_image_style {
        justify-content: space-between;
        padding: 0px !important;
    }

    .card_subscribe2 {
        grid-template-columns: 100%; /* occupy full width */
    }
    .font_size24Mob{
        font-size: 24px !important;
    }
    .hide_in_mobile{
        display: none !important;
    }
    
    .mg_left_pc75{
        margin-left: 10px !important;
    }
    .modal-content {
        width: 75%;
        padding: 20px;
        margin-top: -100px;
    }
    .mgTop0_pc{
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
    .modal-content2{
         width: -webkit-fill-available;
    width: -moz-available;
        width: -moz-available;
    }
   
    .project_card:nth-child(1){
        width : auto !important
    }
    .grid {

        grid-template-columns: repeat(auto-fit, minmax(104px, 335px));
    }

    .fixed1 {

        display: none;
    }

    .mgTop0Mob{
        padding-top:15px;padding-bottom:40px

    }


    .headerPc {
        display: none;
    }
    .flex_items_workspace{
        flex-wrap: wrap;
    }

    .minWidth300pxMobile {
        min-width: max-content !important;
    }
    #help {
        display: none;
    }
    .grid_project {
        display: grid;
        gap : 14vw;
        grid-template-columns: repeat(auto-fit, minmax(30%, 100%));

    }
    .close_login {
        top: -15px !important;
        left: 2px !important;
    }
    .close_pricing_modal,.close_image_modal{
        top: 10px;
        right: 15px !important;
        position: absolute !important;
        cursor: pointer;
    }
    

    .rowPc {
        flex-direction: column-reverse;
    }
    .rowPc2 {
        flex-direction: row;
    }
    .pricing_card:nth-child(2) {
        transform: scale(1);

    }

    .space-betweenMob {
        display: flex;
        justify-content: space-between;
    }

    .footerPc {
        flex-direction: column;
    }

    .centerMob2 div {
        justify-content: center !important;
    }

  

    .centerMob2 p {
        justify-content: center !important;
    }

    .centerMob {
        text-align: center;
    }

    .imagePc {
        display: none;
    }

    #driver-popover-item{
        max-width: 100px !important;
    }

    .columnMob {
        flex-direction: column;
    }
    .mob_only{
        display: flex;
    }

    .text_input_homePage {
        min-width: 200px;

    }


    .fixed2 {

        display: none;
    }
    .fit_content_mob{
        width: fit-content !important;
    }
}


@media screen and (max-width: 795px) {


    .max_width_pc{
        width: fit-content !important;
    }
    .responsive_row_to_column_v2{
        align-items: center !important;
        justify-content: center;
        gap: 30px;
        flex-direction: column !important;
    }
    .responsive_row_to_column_v2>div{
        padding-bottom: 0px;
        padding-top: 0px;
    }
    
    .hero_title{
        font-size: clamp(3rem, 5vw, 3.5rem);
        min-width: 100%;
    }
    .hero_title_2{
        font-size: clamp(2.3rem, 5vw, 3.5rem);
        min-width: 100%;
    
    }

}
@media screen and (max-width: 576px) {
    .v2-announcement-pill-ctn2{
        display: none;
    }

    #hero_section{
        min-height: 90vh;
    }
    .pdTop50Mob {
        padding-top: 60px;
    }
    .greenH1{
        font-size: clamp(2.6rem, 5vw, 3.5rem);
        min-width: 100%;
    }
    div:where(.swal2-container) div:where(.swal2-popup) {
       
        width: 19em !important;

    }
    div:where(.swal2-icon).swal2-warning {
        display: none !important;
    }
    .hideTablette{
        display: flex !important;
    }
    .mob_width200{
        width: 160px !important;
    }
    .mob_mgLeft33{
        margin-left: 33px !important;
    }
    .grid {

        grid-template-columns: repeat(auto-fit, minmax(144px, 235px));
    }
    .fit_content_mob{
        width: fit-content !important;
    }

    .section_gray{
       
        height: 390px;
       
        
    }

}



@media screen and (max-width: 568px) {

    .greenH1_responsive{
        font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
        min-width: 100%;
    }
.responsive_row_to_column p{
    text-align: center !important;
}
    .section_idea_to_script_img img{
        width: 300px;
    }
    .icon_resize_mobile{
        width: 94px;
    }
    .pd0_mobile{
        padding : 20px !important
    }
    .hero_title{
        font-size: clamp(2.6rem, 5vw, 3.5rem);
        min-width: 100%;
        z-index: 33;
    }
    .video-container:last-child {
        margin-bottom: 100px;
    }

    .mgTop20Snap {
        height: 70vh;
    }

    .card-video {
        width: 37vh;
        height: 55vh;
    }
}

@media screen and (max-width: 500px) {
    .padding_l_r_10_mobile{
        padding-left: 5px;
        padding-right: 5px;
    }
    .responsiveInputBtn {
        flex-wrap: wrap;
        padding: 10px;
        z-index: 55;
        flex-direction: column;
    }

    .text_input_homePage {
        width: 70vw;
    }

}

@media (max-width: 1027px) {
    .select_voice_responsive {
        flex-direction: column !important
    }

    .select_voice_responsive .custom-select{
        width : 90% !important
    }
}

@media screen and (max-width: 325px){
    .mob_mgLeft33{
        margin-left: 12px !important;
    }
}



.credit_claim_description{
    font-size: 13px;
    color: #a49e9e;
    line-height: 1.3;
    max-width: 300px;
}


.raibownText_F {
    transition: 0.23s;
    background: linear-gradient(250.61deg, #66FA63 40%, #FFCE51 100%) !important;
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
        }

        .credit_already_claim{
            border : 1px solid transparent !important
        }

        .credit_already_claim1{
            filter: blur(3px) !important;
            transition: 0.20s ;

        }
        .credit_already_claim1:hover{
            cursor: not-allowed !important;
            border : 1px solid rgb(194, 194, 194) !important;
            outline: 2px solid transparent;
        }


        @keyframes rotate_custom {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        #wheel {
            animation: rotate_custom 1.2s linear infinite;
        }











.black_friday_discount_glow{
    display: flex;
    justify-content: center;
    align-items: center;
    animation: glow 0.5s infinite;
    box-shadow: inset 0px -2px 1px #2A2A2AFF;
    background: #3b3b3b;
    height: 23px;
    border-radius: 10px;
    padding: 12px 10px;
    
}
@keyframes glow {
    0% {
       text-shadow: 0 0 5px #D4FF0082;
    }
    50% {
        text-shadow: 0 0 10px #D4FF00AF;
    }
    100% {
        text-shadow: 0 0 5px #D4FF0066;
    }
}



/* Style pour le conteneur du sélecteur de langue */
.language-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 20px;
    position: relative;
}

.language-switch {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(102, 250, 99, 0.2);
    border-radius: 8px;
    padding: 6px 12px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    text-decoration: none;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.language-switch:hover {
    background: rgba(40, 40, 40, 0.8);
    border-color: rgba(102, 250, 99, 0.4);
}

.language-switch.active {
    border-color: #65fa6385;
    color: #65fa63df;
    background: rgba(102, 250, 99, 0.1);
}

.language-switch .flag {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
}

/* Animation du hover */
.language-switch::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 8px;
    background: linear-gradient(45deg, #66FA63, #FFCE51);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.language-switch:hover::after {
    opacity: 0.1;
}