.accordion-secondary .accordion-button:not(.collapsed) {
    color: #000 !important;
    background-color: RGBA(var(--bs-secondary-rgb),var(--bs-bg-opacity,0.5)) !important;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-secondary);
}

.accordion-secondary .accordion-button:focus {
    z-index: 3;
    border-color: RGBA(var(--bs-secondary-rgb),var(--bs-bg-opacity,0.7)) !important;
    outline: 0;
    box-shadow: RGBA(var(--bs-secondary-rgb),var(--bs-bg-opacity,1)) !important;
}

.flip-wrapper {
    /*position: relative; 
    height: auto; */
    display: grid;
}

.landing-wrapper {
    /*perspective: 1000px;
    position: relative;*/
}

.content-std, .content-lyra {
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    backface-visibility: hidden;
    transition: transform 0.8s;
    /*position: absolute;*/
    top: 0;
}

#modeSwitchBtn {
    /*background-color: #232741;*/
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%35, 39, 65, 1%29'/%3e%3c/svg%3e");
}

    #modeSwitchBtn:checked {
        background-image: var(--bs-form-switch-bg);
    }

/*==================Toggle switch button================*/
.switch-button-wrapper {
    display: inline-flex;
    padding: 2px;
    border: 1px solid gray; 
    border-radius: 30px; 
    width: 304px;
  }

.switch-button {
    background: white;
    border-radius: 30px;
    overflow: hidden;
    width: 300px;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 1px;
    color: black;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
  }
  
  .switch-button-checkbox {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
  }
  
  .switch-button-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
    user-select: none;
    pointer-events: none;
    position: relative;
  }
  
  .switch-button-label:before {
    content: "";
    background: #5d2450;
    height: 100%;
    width: 50%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 30px;
    transform: translateX(0);
    transition: transform 300ms;
    z-index: 1;
  }
  
  .switch-button-checkbox:checked + .switch-button-label:before {
    transform: translateX(100%);
  }

  /* Default colors */
.switch-button-label-span {
    width: 50%;
    text-align: center;
    color: white; 
    z-index: 3;
    transition: color 300ms;
  }
  
  .switch-button-label-span-alt {
    width: 50%;
    text-align: center;
    color: black; 
    z-index: 3;
    transition: color 300ms;
  }
  
  /* Checked state colors */
  .switch-button-checkbox:checked + .switch-button-label .switch-button-label-span {
    color: black; 
  }
  
  .switch-button-checkbox:checked + .switch-button-label .switch-button-label-span-alt {
    color: white; 
  }
  
  body[dir="rtl"] .switch-button-label:before {
    transform: translateX(100%);
  }
  
  body[dir="rtl"] .switch-button-checkbox:checked + .switch-button-label:before {
    transform: translateX(0);
  }
/*==================END Toggle switch button================*/
/*==================features================*/
.features-navbar-dropdown{
    width: 100%; 
    background-color: aliceblue;
    padding:0;
}

.features-navbar-dropdown .card-section{
    background-color: beige;
    padding: 1rem 1rem 1rem 1rem;
}

@media (min-width: 992px) {
    .features-navbar-dropdown {
        width: 90vw; 
        max-width: 800px; 
        max-height: 70vh; 
        transform: translateX(-40%);
    }
}
.feature-cards{
    padding: 1rem 1rem 1rem 1rem;
}
.feature-card {
    background-color: white;
    /*background-clip: border-box;*/
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 13px;
    padding: 11px 0 11px 0;
    margin: 7px 0 0 0;
}

.feature-card-icon {
font-size: 1.5rem;
}

.feature-card-title {
font-size: 1rem;
font-weight: 500;
}

.feature-card-desc {
    font-size: 0.75rem;
    font-weight: 400;
}

.feature-card:hover i::before {
    color: #007bff;
    transform:scale(1.2);
    transition: transform 0.3s ease, color 0.3s ease;
}

/*==================END features================*/
.content-std {
    transform: rotateY(0deg);
}

.content-lyra {
    transform: rotateY(-180deg);
}

.flipped .content-std {
    transform: rotateY(180deg);
}

.flipped .content-lyra {
    transform: rotateY(0deg);
}



/*.flower-icon-circle {
    transition: all 0.3s ease-in-out;
    display: inline-block;
    background-color: #f0f0f0;
    border-radius: 50%;
    padding: 15px;
}*/
.flower-icon-circle {
    position: relative;
    display: inline-block;
    background-color: #f0f0f0;
    border-radius: 50%;
    padding: 15px;
    transition: all 0.3s ease-in-out;
    overflow: hidden; /* To ensure the light effect doesn't overflow */
}

    .flower-icon-circle i {
        /*font-size: 2rem;
        color: #333;*/
        transition: transform 0.3s, color 0.3s ease-in-out;
    }

    /*.flower-icon-circle:hover {
        background-color: #ff6f61; 
    }*/

    .flower-icon-circle:hover i {
        transform: scale(1.2); /* Slight icon enlargement */
        color: white; /* Change icon color on hover */
    }



.light-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0; /* Initial size */
    height: 0; /* Initial size */
    background: radial-gradient(circle, rgba(255, 235, 143, 0.2), transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Make sure it doesn't affect clicking */
    opacity: 0;
    transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out;
    filter: blur(15px); /* Adds the blurred, "star light" effect */
    z-index: 10000;
}

.flower-icon-circle:hover .light-circle {
    width: 100px; /* Expand size on hover */
    height: 100px; /* Expand size on hover */
    opacity: 1; /* Fade in the light circle */
}



.flower-lyr-title-content {
    /*margin-right: 1rem;*/
    position: relative;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}


.lyr-title {
    position: absolute;
    display: none;
    left: 80px;
}

.lyr-description {
    display: none;
    position: absolute;
    margin-top: 1.5rem;
    /*padding:0.5rem;
    background-color : white;*/
    width: 17rem;
    z-index: 10000;
    left: -6.5rem;
}

.lyra-center {
    display: none;
}

.lyra-constellation #lyraflower_content {
    position: relative;
}


/*Display text and remove circle bg and hide the feature text*/
.lyra-constellation .lyr-title {
    /*display: block;*/
    /*color: var(--bs-primary);*/
}

.lyra-constellation .lyr-description {
    color: var(--bs-primary);
}

.lyra-constellation .light-circle {
    display: none;
}

.lyra-constellation .flower-icon-circle {
    background-color: transparent !important;
    overflow: unset;
    position: unset;
}

.feature-text {
    text-align: center;
}
/*hide the feature text*/
.lyra-constellation .feature-text {
    display: none;
}

/* Hide the std central circle and display the lyr one*/
.lyra-constellation .standard-center {
    display: none;
}

.lyra-constellation .lyra-center {
    display: block;
}

.standard-center-text {
    display: none;
    height: 90%;
    font-size: 21px;
    font-weight: 400;
    padding-left: 11px;
}

.standard-center {
    cursor: pointer;
}

    .standard-center:hover .standard-center-text {
        display: flex;
    }

/* Force icon to a standard display */
.lyra-constellation .flower-icon-circle:hover i {
    transform: scale(1);
    color: var(--bs-primary);
}
/* Make icons as stars */
.lyra-constellation .flower-icon-circle i {
    color: var(--bs-primary);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle style="opacity:.15;fill:%23ffd191" cx="50" cy="50" r="36.107"/><circle style="opacity:.15;fill:%23ffd191" cx="50" cy="50" r="26.547"/><circle style="opacity:.25;fill:%23ffd191" cx="50" cy="50" r="20.403"/><path style="fill:%23ffd191" d="M59.001 52.719c7.801-3.455 7.801-1.982 0-5.437 5.428-8.729 14.415-20.698 29.648-35.931-15.233 15.233-27.202 24.22-35.931 29.648-3.455-7.801-1.982-7.801-5.437 0-8.729-5.428-20.698-14.415-35.931-29.648 15.233 15.233 24.22 27.202 29.648 35.931-7.801 3.455-7.801 1.982 0 5.437C35.57 61.448 26.583 73.417 11.35 88.65c15.233-15.233 27.202-24.22 35.931-29.648 3.455 7.801 1.982 7.801 5.437 0 8.729 5.428 20.698 14.415 35.931 29.648C73.417 73.417 64.43 61.447 59.001 52.719"/><path style="fill:%23ffe8cc" d="M80.266 50C46.879 48.276 48.276 46.878 50 80.265 51.724 46.878 53.122 48.276 19.734 50 53.121 51.724 51.724 53.121 50 19.734 48.276 53.122 46.878 51.724 80.266 50"/></svg>');
    background-size: cover;
    background-position: center center;
    display: inline-block;
    width: 80px;
    height: 80px;
    transition: background-image 0.3s ease-in-out; /* Smooth transition */
}

.lyra-constellation .flower-lyr-title-content span:nth-child(1) {
    display: inline-flex; /* Makes centering within the span easier */
    align-items: center;
    justify-content: center;
    position: relative; /* Needed for absolute positioning of i::before */
}

.lyra-constellation .flower-icon-circle i::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* make start more shining when hover the title*/
.lyra-constellation .flower-lyr-title-content span:hover i {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20style%3D%22opacity%3A.15%3Bfill%3A%23ffd191%22%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236.107%22%2F%3E%3Ccircle%20transform%3D%22rotate(-76.714%20423.386%20101.074)%22%20style%3D%22opacity%3A.25%3Bfill%3A%23ffd191%22%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2220.403%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ffd191%22%20d%3D%22M50-2.048c0%2020.148%203.232%2042.102%205.273%2035.821-2.041%206.282%2013.478-9.58%2025.321-25.88-11.843%2016.3-22.133%2035.961-16.789%2032.079-5.344%203.882%2016.535.171%2035.697-6.055-19.162%206.226-39.043%2016.084-32.438%2016.084-6.605%200%2013.276%209.858%2032.438%2016.084-19.162-6.226-41.04-9.937-35.697-6.055-5.344-3.882%204.947%2015.779%2016.789%2032.079-11.843-16.3-27.362-32.162-25.321-25.88C53.232%2059.947%2050%2081.902%2050%20102.05c0-20.148-3.232-42.102-5.273-35.821%202.041-6.282-13.478%209.58-25.321%2025.88%2011.843-16.3%2022.133-35.961%2016.789-32.079%205.344-3.882-16.535-.172-35.697%206.055%2019.162-6.226%2039.043-16.084%2032.438-16.084%206.605%200-13.277-9.858-32.438-16.084%2019.162%206.226%2041.04%209.937%2035.697%206.055%205.344%203.882-4.947-15.779-16.789-32.079%2011.843%2016.3%2027.362%2032.162%2025.321%2025.88C46.768%2040.054%2050%2018.099%2050-2.048%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ffe8cc%22%20d%3D%22M64.689%2058.481c-7.297-4.876-9.095-7.332-6.208-8.481-2.886-1.149-1.088-3.605%206.208-8.481-7.871%203.881-10.897%204.21-10.449%201.136-2.438%201.925-3.666-.86-4.241-9.618-.574%208.757-1.802%2011.543-4.241%209.618.449%203.074-2.578%202.745-10.449-1.136%207.297%204.876%209.095%207.333%206.208%208.481%202.887%201.149%201.089%203.605-6.208%208.481%207.871-3.881%2010.898-4.21%2010.449-1.136%202.438-1.926%203.666.86%204.241%209.618.574-8.758%201.803-11.543%204.241-9.618-.448-3.074%202.578-2.745%2010.449%201.136%22%2F%3E%3C%2Fsvg%3E');
    transform: scale(1.3);
    color: #ce984e;
}



/* remove the right margin after the titel we dont need it for now*/
.lyra-constellation .flower-lyr-title-content {
    margin-right: 0;
}


.lyra-constellation #vega {
    transform: translate(50%, 15%);
}

.lyra-constellation #sheliak {
    transform: translate(-20%, 40%);
}

.lyra-constellation #sulafat {
    transform: translate(40%, 40%);
}

.lyra-constellation #delta-lyrae {
    transform: translate(-15%, 60%);
}

.constellation-layout #zeta-lyrae {
    transform: translate(30%, 60%);
}

.constellation-layout #epsilon-lyrae {
    transform: translate(55%, 5%);
}



/*
    .lyra-constellation .flower-icon-circle {
        position: absolute;
        width: auto;
        height: auto;
    }

*/

#line-svg {
    display: none;
}

.lyra-constellation #line-svg {
    display: block;
}

.connecting-line {
    stroke-dasharray: 1000; /* Length should be longer than the line */
    stroke-dashoffset: 1000; /* Initially hide the entire line */
    animation: drawLine 1s ease forwards; /* Animate the line */
}

/* Keyframes to animate the line drawing */
@keyframes drawLine {
    to {
        stroke-dashoffset: 0; /* Reveal the entire line */
    }
}




/*-------------------------------------------------------------------*/
/*------------------------TIMELINE----------------------------------*/
/*-------------------------------------------------------------------*/

.std_content {
    display: block;
}

.lyra_content {
    display: none
}

.timeline_bg {
    background-image: url('../img/Stimeline.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    /*max-width: 928px; */
    position: relative;
    padding-bottom: calc(656 / 928 * 100%);
    height: 0;
    margin: auto;
}

.timeline-step-title {
    font-weight: bold;
    font-size: 21px;
    text-anchor: start; /* Equivalent to &quot;left&quot; in SVG */
    fill: #333;
}

.timeline-step-description {
    font-size: 17px;
    text-anchor: start; /* Equivalent to &quot;left&quot; in SVG */
    fill: #333;
}

.shadow-circle {
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3));
}

#how_it_works.lyra-constellation {
    color: #fff;
}

/*#how_it_works.lyra-constellation {
    background: url('../img/timeline/night_sky.jpg');
}
.lyra-constellation .timeline-container {
    background: url('../img/timeline/night_sky.jpg');
}*/

.lyra-constellation .std_content {
    display: none;
}

.lyra-constellation .lyra_content {
    display: block
}


.lyra_content .timeline-step-title {
    fill: #fff;
}

.lyra_content .timeline-step-description {
    fill: #fff;
}


/*-------------------------------------------------------------------*/
/*------------------------SECURITY----------------------------------*/
/*-------------------------------------------------------------------*/
:root {
    --honeycomb-gap-size: 10px; /* Define a CSS variable for padding */
}

.honeycomb {
    display: grid;
    grid-template-rows: 1fr 1fr; /* Sets two rows with equal height */
    height: 100%; /* Or specify a fixed height */
    position: relative;
    z-index: 1; /* Keep honeycomb above particle background */
}


.honeycomb-container {
    position: relative;
    /* Your existing honeycomb styles */
}

.honeycomb-row {
    display: flex;
    flex-wrap: wrap;
}

.hexagon {
    flex: 0 0 auto;
    width: 100%;
    padding: var(--honeycomb-gap-size);
}

.honeycomb .mt--3 {
    margin-top: 0;
}

@media (min-width: 768px) {

    .hexagon {
        flex: 0 0 auto;
        width: 50%;
    }
}

.particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.lyra-constellation .honeycomb-container {
    /*background-color: #0d1031;*/
    /*background: url('../img/timeline/night_sky.jpg');*/
    margin-bottom: -60%;
}

.lyra-constellation .hexagon {
    flex: 0 0 auto;
    width: 65%;
}

.lyra-constellation .honeycomb {
    justify-content: center;
    /*gap: 10px;*/
    /*width:75%;*/
}


.lyra-constellation .hexagon {
    position: relative;
    /*width: 200px;
    height: 115px;
    background-color: #fff;
    margin: 0 5px;
    
    
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;*/
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); /**/
    /*background-color: rgba(255, 111, 97, 1);*/

    box-shadow: 0 0 15px 5px rgba(255, 111, 97, 0.5); /* Soft glow effect */
    transition: box-shadow 0.3s ease;
}

    .lyra-constellation .hexagon:hover {
        background-color: rgba(255, 111, 97, 1);
    }

        .lyra-constellation .hexagon:hover i {
            transform: scale(2);
        }

    .lyra-constellation .hexagon::after {
        content: '';
        position: absolute;
        top: -15px;
        left: -15px;
        width: calc(100% + 30px);
        height: calc(100% + 30px);
        clip-path: inherit;
        background: rgba(255, 111, 97, 0.2);
        border: 2px solid rgba(255, 111, 97, 0.5);
        border-radius: 6px;
        animation: pulse 2s infinite ease-in-out;
        z-index: -3;
    }


/* Optional Hover Effect */
/*.lyra-constellation .hexagon .card {
        background-color: #ce6b00;
        color:white;
    }*/

/*.lyra-constellation .hexagon:hover {
        transform: scale(1.05);
    }*/

.lyra-constellation .hex-content {
    text-align: center;
    padding: 5% 0px 20% 0px;
    color: #333;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    /*clip-path: polygon(50% 2%, 100% 25%, 100% 75%, 50% 98%, 0 75%, 0 25%); */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); /**/
}

    .lyra-constellation .hex-content .card-body {
        padding: 16px 5px 8px 5px;
    }

    .lyra-constellation .hex-content i {
        font-size: 24px;
        color: #ff6f61;
        display: block;
        margin-bottom: 8px;
    }

    .lyra-constellation .hex-content h3 {
        font-size: 18px;
        margin-bottom: 10px;
        font-weight: bold;
    }

    .lyra-constellation .hex-content p {
        font-size: 14px;
        line-height: 1.4;
    }


.lyra-constellation .honeycomb-row {
    justify-content: end;
    position: relative;
}

    .lyra-constellation .honeycomb-row:nth-child(2) {
        transform: translateY(calc(-25% - 2*var(--honeycomb-gap-size)));
    }

    .lyra-constellation .honeycomb-row:nth-child(1) .hexagon:nth-child(2) {
        right: calc(32% + 4px);
        transform: translateY(calc(-25% - var(--honeycomb-gap-size)));
    }

    .lyra-constellation .honeycomb-row:nth-child(2) .hexagon:nth-child(1) {
        right: 0;
        transform: translateY(var(--honeycomb-gap-size) / -2);
    }

    .lyra-constellation .honeycomb-row:nth-child(2) .hexagon:nth-child(2) {
        right: calc(32% + 4px);
        transform: translateY(calc(-25% - var(--honeycomb-gap-size)));
    }

@media (min-width: 620px) {
    .lyra-constellation .honeycomb-container {
        margin-bottom: -50%;
    }
}

@media (min-width: 768px) {
    .lyra-constellation .honeycomb-container {
        margin-bottom: -15%;
    }

    .lyra-constellation .hex-content {
        padding: 20px;
    }

    .lyra-constellation .mt--3 {
        margin-top: 0;
    }

    .lyra-constellation .hexagon {
        /*flex: 0 0 auto;*/
        width: 40%;
        /*position:absolute;*/
    }

    .lyra-constellation .honeycomb {
        /*justify-content: end;*/
        /*display: block;*/
        position: relative;
        text-align: center;
    }


    .lyra-constellation .honeycomb-row:nth-child(2) {
        transform: translateY(calc(-25% - var(--honeycomb-gap-size) + var(--honeycomb-gap-size)/5));
    }

    .lyra-constellation .honeycomb-row:nth-child(1) .hexagon:nth-child(1) {
        right: calc(var(--honeycomb-gap-size) * -1);
    }

    .lyra-constellation .honeycomb-row:nth-child(1) .hexagon:nth-child(2) {
        transform: none;
        right: unset;
    }

    .lyra-constellation .honeycomb-row:nth-child(2) .hexagon:nth-child(1) {
        right: calc(20% - var(--honeycomb-gap-size) * 1.5);
        transform: none;
        /*background-color: rgba(0,255,0,0.5);*/
    }

    .lyra-constellation .honeycomb-row:nth-child(2) .hexagon:nth-child(2) {
        right: calc(20% - var(--honeycomb-gap-size) / 2);
        transform: none;
        /*background-color: rgba(0,0,255,0.5);*/
    }
}

@media (min-width: 1100px) {

    .lyra-constellation .honeycomb {
        justify-content: end;
    }

    .lyra-constellation .hexagon {
        width: 360px;
        height: 360px;
    }

    .lyra-constellation .honeycomb-row:nth-child(1) .hexagon:nth-child(1) {
        right: calc(var(--honeycomb-gap-size) * -1);
    }

    .lyra-constellation .honeycomb-row:nth-child(1) .hexagon:nth-child(2) {
        transform: none;
        right: unset;
    }

    .lyra-constellation .honeycomb-row:nth-child(2) .hexagon:nth-child(1) {
        right: calc(180px - var(--honeycomb-gap-size) * 1.5);
        transform: none;
        /*background-color: rgba(0,255,0,0.5);*/
    }

    .lyra-constellation .honeycomb-row:nth-child(2) .hexagon:nth-child(2) {
        right: calc(180px - (var(--honeycomb-gap-size) / 2));
        transform: none;
        /*background-color: rgba(0,0,255,0.5);*/
    }
}

/*------------------------------------------*/
.ux-std-mode {
    display: block;
}

.ux-lyra-mode {
    display: none;
}

/*.lyra-constellation .ux-std-mode {
    display: none;
}

.lyra-constellation .ux-lyra-mode {
    display: block;
}*/
.ux-globe-title {
    font-weight: bold;
    font-size: 23px;
    text-anchor: middle; /* Equivalent to &quot;left&quot; in SVG */
}

.ux-globe-description {
    font-size: 19px;
    text-anchor: middle; /* Equivalent to &quot;left&quot; in SVG */
    fill: #fff; /*#333;*/
}

#mainContainer {
    background-color: #232741;
}

.lyra-mode main {
    color: white;
}

.lyra-mode section:not(.bg-white) {
    box-shadow: unset !important;
}

.lyra-mode section.bg-white {
    /*box-shadow: 7px 7px 11px 0px #d75a4a;*/
    box-shadow: 0px 4px 8px #fafbff, 0px -4px 8px #fafbff;
    color: var(--bs-body-color);
}



.price-std-mode {
    display: block;
    max-width: 360px;
}

.price-lyra-mode {
    display: none;
    max-width: 360px;
}



.new-entrepreneur-offer {
    text-align: center;
    padding: 2em;
    background-color: #f9fafc;
    border-radius: 10px;
    max-width: 600px;
    margin: auto;
}

.offer-title {
    font-size: 2em;
    font-weight: bold;
    color: #3a3a3a;
}

.offer-subtitle {
    font-size: 1.5em;
    color: #007bff;
    margin: 0.5em 0;
}

.offer-details ul {
    list-style-type: none;
    padding: 0;
    color: #555;
}

.offer-details li {
    margin: 0.5em 0;
}

.offer-description {
    font-size: 1em;
    color: #333;
    margin: 1em 0;
}

.cta-button {
    background-color: #28a745;
    color: #fff;
    padding: 0.8em 1.5em;
    font-size: 1.2em;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    transition: background-color 0.3s ease;
}

    .cta-button:hover {
        background-color: #218838;
    }

.terms-link a {
    font-size: 0.9em;
    color: #666;
    text-decoration: underline;
}

.iti {
    width: 100%;
}

/*.lyra-mode .iti {
    --iti-border-color: #5b5b5b;
    --iti-dialcode-color: #999999;
    --iti-dropdown-bg: #0d1117;
    --iti-arrow-color: #aaaaaa;
    --iti-hover-color: #30363d;
    /*--iti-path-globe-1x: url("path/to/globe_light.webp");
    --iti-path-globe-2x: url("path/to/globe_light@2x.webp");
  }*/

  .lyra-mode .iti {
    color:#716d66;
    --iti-border-color: #5b5b5b;
    --iti-dialcode-color: #999999;
    --iti-dropdown-bg: #f8f6f2;
    --iti-arrow-color: #aaaaaa;
    /*--iti-hover-color: #30363d;*/
  }

  .iti__search-input {
    background-color: #f8f6f2;
  }

  .iti__tel-input::placeholder {
    color: #A9A9A9; /* Replace with your desired color */
    opacity: 0.5; /* Adjust opacity if needed (default is 1) */
  }

  #form_contact .form-check-input:checked {
    border-color: #fff;
  }

  /* Common styling for all icons */
  a.active-action {
    width: 100%;
    position: relative;
    padding-right: 24px; /* Add space for the icon on the right */
    display: inline-block; /* Ensure link behaves as a block for positioning */
  }
a.active-action::after {
    content: ""; /* Default empty content */
    position: absolute;
    top: 50%; /* Vertically center the icon */
    right: 8px; /* Position the icon slightly inside the right edge */
    transform: translateY(-50%); /* Correct centering due to height differences */
    font-family: "bootstrap-icons", sans-serif; /* Ensure you're using the correct font for icons */
    content: ""; /* Default content */
    font-size: 1em; /* Adjust the icon size as needed */
}

/* Specific icons for different classes */
a.active-action.active-edit::after {
    content: "\F4CB"; /* Unicode for pencil icon */
}

a.active-action.active-create::after {
    content: "\F4FA"; /* Unicode for plus-circle icon */
}

a.active-action.active-details::after {
    content: "\F3B1"; /* Unicode for file-text icon */
}

a.active-action.active-delete::after {
    content: "\F629"; /* Unicode for x-square icon */
}

a.active-action.active-duplicate::after {
    content: "\F759"; /* Unicode for copy icon */
}

.sidebar-collapsed:not(.nav-container-hovered) a.active-action::after{
    /*color:red;*/
    right: 12px;
    top: 65%;
    font-size: 0.85em;
    background-color: var(--bs-nav-pills-link-active-bg);
    padding: 0px 3px 0px 3px; /* Space around the icon */
    border-radius: 6px; /* Rounded corners */
    display: inline-block;
    width: auto; /* Adjust based on icon */
    height: auto;
}


.important-note {
  background-color: #fff3cd;  /* light yellow, like a warning */
  border-left: 4px solid #ffc107;  /* deeper yellow/orange for emphasis */
  padding: 10px 15px;
  font-style: italic;
  font-weight: 500;
  color: #856404;  /* dark gold/brown text */
  margin: 10px 0;
  border-radius: 4px;
}

.plan-column .price-annual-billing,
.plan-column .price-monthly-billing {
    color: var(--bs-primary);
    font-size: 1.5rem;
    font-weight: 500;
}