*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
}
body{
    background-color: #01b4dd;
}
/* Fonts */
@font-face {
    font-family: 'ImpactCustom';
    src: url('fonts/unicode.impact.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Sections background wrappers */
.section1{ background-color: #000000; }
.section2{ background-color: #01b4dd; }
.section3{ background-color: #f8f9fa; }
.section4{ background-color: #ffffff; }
.section5{ background-color: #01b4dd; }
.section6{ background-color: #f8f9fa; }
.section7{ background-color: #fffbe6; }
.white_gray_background{ background-color: #f8f9fa; }
.white_background{ background-color: #ffffff; }
/* Paddings */
.padding_100px{ padding: 100px 0; }
.padding_80px{ padding: 80px 0; }
.padding_50px{ padding: 50px 0; }
.padding_40px{ padding: 40px 0; }
.padding_20px{ padding: 20px ; }
/*Intégral padding*/
.padding_40px_40px{ padding: 40px 40px; }

/* Paddings bottom */
.padding_bottom_60px{ padding-bottom: 60px; }
.padding_bottom_40px{ padding-bottom: 40px; }
.padding_bottom_10px{ padding-bottom: 10px; }
/*margins*/
/*margins bottom*/
.margin_bottom_40px{ margin-bottom: 40px; }
.margin_bottom_20px{ margin-bottom: 20px; }
.margin_bottom_10px{ margin-bottom: 10px; }
/*margins top*/
.margin_top_40px{ margin-top: 40px; }
.margin_top_20px{ margin-top: 20px; }
.margin_top_10px{ margin-top: 10px; }
/*alignement des textes*/
.text_center{ text-align: center; }
.text_left{ text-align: left; }
/* Text sizes */
.text_size_18px{ font-size: 18px; }
.text_size_21px{ font-size: 21px; }
.text_size_35px{ font-size: 35px; }
.text_size_45px{ font-size: 45px; }
.text_size_60px{ font-size: 60px; }
.text_size_80px{ font-size: 80px; }
/* Fonts */
.font_impact{ font-family: 'ImpactCustom'; }
.font_open_sans{ font-family: 'Open Sans', sans-serif; }
/* Font weights */
.font_weight_700{ font-weight: 700; }
.font_weight_600{ font-weight: 600; }
.font_weight_500{ font-weight: 500; }
.font_weight_400{ font-weight: 400; }
/* Colors */
.yellow_text{ color: #fecd20; }
.blue_text{ color: #01b4dd; }
.gray_text{ color: #666666; }
.light_gray_text_two{ color: #999999; }
.gray_text2{ color: #555555; }
.white_text{ color: #ffffff; }
.black_text{ color: #000000; }
.border_radius_25px{ border-radius: 25px; }
/* Text styles */
.italic_text{ font-style: italic; }
.bold_text{ font-weight: bold; }

.justify_left{ justify-content: left; }
.justify_center{ justify-content: center; }
.justify_self_center{ justify-self: center; }
.box_shadow{ box-shadow: 0 2px 5px rgba(0,0,0,0.20);}
.guide_img{ 
    max-width: 500px;
    width: 100%; 
    height: auto;
    display: block;
    border-radius: 15px;
}
/* Layout container */
.main_container{
    max-width: 1100px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0px 50px;
    width: 100%;
    z-index: 1;
    display: grid;
}

.grid_2x1{ 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;   
    grid-template-columns: 5% 95%;
    background-color: #ffffff; 
    border-radius: 25px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.20);
    padding: 20px;
}
.grid_3x4{
    display: grid; 
    grid-template-columns: repeat(3, 4fr); 
    gap: 20px;
}

.number{ 
    background-color: #01b4dd;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex; 
    align-items: center;
    justify-content: center;
    font-weight: 700;
    padding-top: 14px;
}
/* Buttons */
.main_btn_container{ margin-top: 20px; }
.main_btn{
    font-size: 18px;
    padding: 10px 18px;
    border-radius: 25px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    border: none;
    background-color: #fecd20;
    color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    outline: none;
    transition: all 0.3s;
    display: inline-block;
    text-decoration: none;
}
.main_btn span{ position: relative; z-index: 2; color: #fff; text-decoration: none; }
.main_btn:after{
    content: '';
    position: absolute; top: 0; left: 0; width: 0; height: 100%;
    background: #a1f4f7; transition: all 0.3s; border-radius: 10px;
}
.main_btn:hover:after{ width: 100%; }

/* Cards and grids */
.pricing_cards{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pricing_cards2{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.pricing_card{
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.20);
}

.pricing_card_empty{ border-radius: 20px; padding: 20px; position: relative; }

.grid_two{ display: grid; 
    grid-template-columns: 
    repeat(2, 1fr); 
    gap: 40px; 
    width: 100%; }
.grid_two_item{ display: flex; flex-direction: column; }
.grid_two_item img{ max-width: 100%; height: auto; display: block; border-radius: 15px; }

.features{ list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.features li{ display: flex; align-items: center; gap: 10px; color: #374151; }
.features i{ color: #01b4dd; }

.grid_commentaires{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid_commentaires_item{
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.20);
}

/* Responsive --------------------------------------------------------------*/
@media screen and (max-width: 1024px){
    .main_container{ padding: 0px 30px; }
    .padding_100px{ padding: 70px 0; }
    .text_size_80px{ font-size: 70px; }
    .text_size_60px{ font-size: 55px; }
    .text_size_45px{ font-size: 42px; }
    .text_size_35px{ font-size: 32px; }
    .text_size_21px{ font-size: 20px; }
    .pricing_cards{ grid-template-columns: repeat(2, 1fr); }
    .pricing_cards2{ grid-template-columns: repeat(2, 1fr); }
    .grid_two{ grid-template-columns: 1fr; gap: 30px; }
    .grid_commentaires{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 768px){
    .main_container{
        display: grid;
        grid-template-columns: auto;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0 auto;
        height: auto;
        padding: 0px 24px;
    }
    .padding_100px{ padding: 60px 0; }
    .margin_bottom_40px{ margin-bottom: 20px; }
    .text_size_80px{ font-size: 50px; }
    .text_size_60px{ font-size: 50px; }
    .text_size_45px{ font-size: 37px; }
    .text_size_35px{ font-size: 27px; }
    .text_size_21px{ font-size: 20px; }
    .text_size_18px{ font-size: 18px; }
    .grid_2x1{ grid-template-columns: 1fr; padding: 20px; }
    .grid_3x4{ gap: 10px; }
    .padding_40px_40px{ padding: 20px 20px; }
    .grid_commentaires{ grid-template-columns: 1fr; }
    .padding_bottom_60px{ padding-bottom: 40px; }
}

@media screen and (max-width: 480px){
    .main_container{ padding: 0px 8px; }
    .padding_100px{ padding: 40px 0; }
    .text_size_80px{ font-size: 35px; }
    .text_size_60px{ font-size: 42px; }
    .text_size_45px{ font-size: 32px; }
    .text_size_35px{ font-size: 26px; }
    .text_size_21px{ font-size: 18px; }
    .text_size_18px{ font-size: 16px; }
    .text_size_16px{ font-size: 14px; }
    .grid_3x4{ gap: 5px; }
    .padding_40px_40px{ padding: 10px 10px; }
    .main_btn{ width: 100%; max-width: 320px; padding: 12px 20px; }
    .pricing_cards{ grid-template-columns: 1fr; gap: 10px; }
    .pricing_cards2{ gap: 5px; }
}


/* Hero section css --------------------------------------------------------------*/
/* Hero slider layout */
.hero-slider {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    /* height controlled dynamically to the current image */
    height: var(--hero-h, auto);
    transition: height 300ms ease;
    overflow: hidden;
    background: #000;
}

.hero-slides {
    display: flex;
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: translateX(-100%);
    transition: transform 600ms ease;
}

.hero-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* keep entire image */
}

/* Overlay text keeps existing project's classes */
.section1 .main_container,
.section1 .main_content {
    pointer-events: none;
}

/* Small screens */
@media (max-width: 640px) {
    .hero-slider {
        padding: 0;
    }
}

/* Match container paddings on common breakpoints */
@media screen and (max-width: 1024px){
    .hero-slider{ padding: 0; }
}
@media screen and (max-width: 768px){
    .hero-slider{ padding: 0; }
}
@media screen and (max-width: 480px){
    .hero-slider{ padding: 0; }
}






/* Navbar css --------------------------------------------------------------*/
/* Navbar */
.navbar{
    background-color: #01b4dd;
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;   
}

.navbar_cntainer{
    display: flex;
    justify-content: space-between;
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}
#navbar_logo{
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
}
#navbar_logo img{
    height: 50px;
    width: auto;
    display: block;
}
.fa-gem {
    margin-right: 0.5rem;
}

.navbar_menu{
    display: flex;
    align-items: center;
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
   
}
.navbar_item{
   display: flex;
   align-items: center;
}
.navbar_links{
    color: #fff;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0 1rem;
    height: 100%;
    white-space: nowrap;
}
.navbar_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    width: 100%;

}

.navbar_links:hover{
    color: #f0c040;
    transition: all 0.3s ease;
}

@media screen and (max-width: 960px){
    .navbar_cntainer{
        display: flex;
        justify-content: space-between;
        height: 80px;
        z-index: 1;
        width: 100%;
        padding: 0 30px;
        max-width: 1300px;
        padding: 0;
    }

    .navbar_menu{
        display: grid;
        grid-template-columns: auto;
        margin: 0;
        width: 100%;
        position: absolute;
        top: -1000px;
        opacity: 0;
        transition: all 0.6s ease;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        z-index: -1;
        background: #01b4dd;

    }

    .navbar_menu.active {
        top: 100%;
        opacity: 1;
        transition: all 0.6s ease;
        z-index: 99;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        font-size: 1.4rem;
 
    }

    #navbar_logo{
        padding-left: 25px;
    }

    .navbar_toggle .bar{
        width: 35px;
        height: 5px;
        margin: 6px;
        transition: all 0.3s ease-in-out;
        background: #fff;
    }
    .navbar_item{
        width: 100%;
    }
    .navbar_links{
        text-align: center;
        padding: 2rem;
        width: 100%;
        display: table;
        white-space: nowrap;  
    }
    #mobile-menu {
        position: absolute;
        top: 20%;
        right: 5%;
        transform: translate(5%, 20%);
    }
    .navbar_btn{
        padding-bottom: 2rem;
    }

    .navbar_toggle .bar{
        display: block;
        cursor: pointer;
    }
    #mobile-menu.is-active .bar:nth-child(2){
        opacity: 0;
    }
    #mobile-menu.is-active .bar:nth-child(1){
        transform: translateY(11px) rotate(45deg) ;
    }
    #mobile-menu.is-active .bar:nth-child(3){
        transform: translateY(-11px) rotate(-45deg);
    }

}

/* Footer css --------------------------------------------------------------*/
.footer{
    background-color: #01b4dd;
    color: #fff;
    padding: 2rem 1rem 1rem;
    font-family: sans-serif;
}
.footer-container{
    max-width: 1300px;
    margin: 0 auto;
}
.footer-top-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding-bottom: 1rem;
    flex-wrap: wrap;
}
.footer-logo img{
    width: 180px;
}
.language-select{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: #fff;
}
.language-select i{ font-size: 1rem; color: #fff; }
.language-select select{
    padding: 0.4rem 0.6rem 0.4rem 0.8rem;
    border-radius: 10px;
    border: 2px solid #fff;
    background-color: #01b4dd;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    width: 150px;
    transition: all 0.3s ease;
    caret-color: #fff;
}
.language-select select:hover{
    background-color: #fff;
    color: #01b4dd;
    border-color: #f0c040;
}
.footer-columns{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}
.footer-col h4{
    font-size: 0.7rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-col ul{ list-style: none; padding: 0; margin: 0; }
.footer-col li{ margin-bottom: 0.8rem; font-weight: bold; }
.footer-col a{
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}
.footer-col a:hover{ color: #f0c040; }
.social-icons{ display: flex; gap: 1rem; margin-top: 1rem; }
.social-icons a{
    width: 45px; height: 45px; border: 2px solid #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff;
    font-size: 1.2rem; transition: all 0.3s ease;
}
.social-icons a:hover{ background-color: #fff; color: #01b4dd; border-color: #f0c040; }
.footer-bottom{
    border-top: 1px solid #fff;
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.8rem;
}
.active-link{ color: #f0c040 !important; }

@media (max-width: 768px){
    .footer-top-row{ flex-direction: column; text-align: center; gap: 1.5rem; }
    .language-select{ justify-content: center; width: 90%; margin-top: 0.3rem; }
    .language-select select{ width: 95%; border-radius: 20px; }
    .footer-columns{ flex-direction: column; gap: 2.5rem; align-items: flex-start; text-align: left; width: 100%; padding-left: 2rem; padding-right: 2rem; }
    .footer-col h4{ font-size: 1.3rem; margin-bottom: 0.8rem; }
    .footer-col li{ font-size: 1.1rem; }
    .social-icons{ justify-content: center; }
    .footer-logo{ text-align: center; }
    .footer-logo img{ margin: 0 auto; }
}