body, .container-fluid {
    position: relative; /* Définit un contexte pour le positionnement absolu */
}

@media (min-width: 768px) {
    .absolute-bottom-left {
        position: fixed;
        bottom: 0px;
        left: 10px;  
        color: white; 
        font-size: 10px;
        z-index: 1000;
    }
}
body {
color: #000000
}

.mainColor {
color: #008623;


}

.links {
margin-top: 40px !important;
}

.bg-green {
background-color: #008623 !important;
border-radius: 25px;
font-weight: bold;

}

.bg-green:hover {
background-color: #008623 !important;
border-radius: 25px;
font-weight: bold;

}

.bgColor {
background-color: #008623 !important;

font-weight: bold;

}

.mainBorder {
border: 1px solid #008623;

font-weight: bold;

}

.custom-forgetmdp :hover {
color: #008623;


}

.secondary {
color: rgb(143, 141, 141) !important
}

label {
font-weight: bold;
color: #666EE8;
}

.bn-5 {
margin-top: 50px !important;
}


.countdown .time {
font-size: 2.5rem;
font-weight: bold;
color: #008623;

}

.countdown .label {
font-size: 1.2rem;
color: #6c757d;
}

.dropdown-menu {
    min-width: 220px;
    animation: dropIn 0.18s ease;
}

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    font-size: 0.875rem;
    color: #374151;
    border-radius: 6px;
    margin: 0 4px;
    transition: background 0.15s, color 0.15s;
}

.dropdown-item:hover {
    background: #F0F4FF;
    color: #1D4ED8;
}

.dropdown-item:hover .icon-wrap {
    transform: scale(1.15);
}

.icon-wrap {
    width: 22px;
    text-align: center;
    transition: transform 0.15s;
    font-size: 0.95rem;
}
/* ── Dropdown container ── */
.custom-dropdown {
    position: relative;
    display: inline-block;
}

/* ── Trigger button ── */
.custom-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    letter-spacing: 0.01em;
}

.custom-dropdown__trigger:hover  { opacity: 0.88; }
.custom-dropdown__trigger:active { transform: scale(0.97); }

.custom-dropdown__chevron {
    transition: transform 0.25s ease;
    margin-left: 2px;
}

/* chevron rotate when open */
.custom-dropdown.is-open .custom-dropdown__chevron {
    transform: rotate(180deg);
}

/* ── Menu ── */
.custom-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 230px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.06);
    padding: 6px;
    list-style: none;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 999;
}

.custom-dropdown.is-open .custom-dropdown__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* ── Items ── */
.custom-dropdown__item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.custom-dropdown__item a:hover {
    background: #F0F4FF;
    color: #1D4ED8;
}

.custom-dropdown__item a:hover .custom-dropdown__icon {
    transform: scale(1.2);
}

/* ── Icon wrapper ── */
.custom-dropdown__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
    transition: transform 0.15s;
}

/* ── Divider ── */
.custom-dropdown__divider {
    height: 1px;
    background: #F1F5F9;
    margin: 5px 8px;
}
.info {
height: 100vh;
background-image: url('/images/client.jpeg') !important;
/* URL de l'image de fond */
background-size: cover;
/* Pour couvrir toute la page */
background-position: center;
display: flex;
justify-content: space-around;
align-items: center;
}

.title {
letter-spacing: 10px;
font-weight: bold;
margin-top: 30px !important;
margin-bottom: 25px !important;
}

.title2 {
letter-spacing: 4px;
font-weight: 400;
margin-bottom: 105px !important;
}

.conference-box {
background: white;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 30px;
width: 70% !important;
justify-content: center;
align-items: center;
background-image: url('{{ asset('/images/Vector.png') }}');
background-size: 43%;
background-position: left bottom;
background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .conference-box  {
        width: 90% !important;
    }
}

@media (max-width: 768px) {
    .conference-box1  {
        width: 90% !important;
    }
    .display{
        margin-left: 45px!important;
         margin-right: 45px!important;
         padding-right: 5px;
         padding-left: 5px;


    }
}


.conference-box1  {
background: white;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 70% ;
justify-content: center;
align-items: center;
background-image: url('{{ asset('/images/Vector1.png') }}');
background-size: ;
background-position: right bottom;
background-repeat: no-repeat;


}

.conference-title {
font-weight: bold;
text-transform: uppercase;
font-size: 1rem;
color: #000000;

}

.conference-description {
font-size: 0.75rem;
margin-bottom: 15px;
padding-bottom: 5px;
color: #000000;
margin-top: 10px;
border-bottom: 0.3px solid #00000046;


}

.icon-text {
display: flex;
align-items: center;
margin-bottom: 5px;
font-size: 0.85rem;
}

.icon-text i {
color: green;
margin-right: 8px;
}

.btn-group .btn {
margin: 5px 3px;
}

.btn {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.377) !important;
/* ombre douce */
transition: box-shadow 0.3s ease !important;
}

.date {
border-bottom: 0.3px solid #00000046;
margin: 10px 10px 10px 0px;
}

.form-control {
border: none;
border-bottom: 1px solid #ccc;
border-radius: 0;
box-shadow: none;
}

.form-control:focus {
box-shadow: none;
border-color: #28a745;
}

.btn-shadow {
box-shadow: 0 4px 8px rgba(0, 128, 0, 0.3);
border-radius: 25px;
font-weight: bold;
}

.btn-shadow:hover {
box-shadow: 0 6px 12px rgba(0, 128, 0, 0.4);
}


.password-wrapper {
position: relative;
}

.password-wrapper i {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #666;
}

@media (max-width: 767.98px) {

.info {
height: auto;
padding: 20px 10px;
background-position: center top;
background-size: cover;
}

.conference-box  .conference-box1 {
width: 100% !important;
padding: 10px;
background-size: 60%;
background-position: center bottom;
}

.conference-title {
font-size: 0.9rem;
}

.conference-description {
font-size: 0.7rem;
}

.title {
font-size: 1.2rem;
letter-spacing: 3px;
}
.absolute-bottom-left {
    position: absolute;
    bottom: 10px; /* Distance par rapport au bas de l'écran */
    left: 10px;  /* Distance par rapport au côté gauche */
    color: #000; /* Couleur du texte */
    font-size: 16px; /* Taille du texte */
    z-index: 1000; /* S'assurer que l'élément est au-dessus des autres */
}
.title2 {
font-size: 1rem;
margin-bottom: 30px !important;
font-weight: 500 !important;
}

.row > [class*="col-"] {
padding-left: 15px;
padding-right: 15px;
}

.container-fluid > .row {
flex-direction: column;
}

.btn {
font-size: 0.8rem;
margin: 5px 2px !important;
}

form {
width: 100% !important;
}

img[alt="SYGEC"] {
margin: 20px auto;
width: 60px !important;
}

.form-group input,
.password-wrapper input {
font-size: 0.9rem;
}

.links {
font-size: 0.85rem;
}

.checkbox label {
font-size: 0.85rem;
}

.btn.bg-green {
font-size: 0.9rem;
padding: 10px 25px;
}