@font-face {
    font-family: 'Montserrat';
    src: url('../cdn/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Specify the range of weights if applicable */
}

@font-face {
    font-family: 'Montserrat Italic';
    src: url('../cdn/fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Specify the range of weights if applicable */
    font-style: italic;
}


/* Normal laptop screen (1024px - 1440px) */
@media only screen and (max-width: 1440px) {
    .container-screen {
        padding: 40px 5%;
        background-color: #FFF;
        display: flex;
        flex-direction: column;
    }
    .package-card {
        padding: 30px 15px;
    }
}

/* Normal laptop screen (1024px - 1440px) */
@media only screen and (min-width: 1441px) {
    .container-screen {
        padding: 40px 10%;
        display: flex;
        flex-direction: column;
    }
    .package-card {
        padding: 30px;
    }
}

.package-card-container {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    width: 100%;
}
.package-card {
    border-radius: 20px;
    width: 100%;
    cursor: pointer;
    box-shadow: 0px 4px 44px 0px rgba(0, 0, 0, 0.1);
}

.package-card:hover {
    box-shadow: 0px 0px 3px #D9D9D9; /* Outer border to emulate stroke */
}

.package-card--popular:hover {
    box-shadow: 0px 0px 3px #F96900; /* Outer border to emulate stroke */
}

.package-card--popular {
    border: 1px solid #F96900;
    position: relative;
}

.title--popular {
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.title--popular span {
    font-size: 13px;
    font-weight: bold;
    background: #F96900;
    color: #FFF;
    border-radius: 5px;
    padding: 6px 14px;
}

.package-tier {
    color: #939598;
    font-size: 14px;
    margin: 0;
}

.package-title {
    font-size: 20px;
    margin: 0;
}

.service-item-table {
    font-size: 13px;
    color: #BDBDBD;
}

.package-tier-table {
    font-size: 13px;
    color: #204392;
    margin: 0;
    text-wrap: nowrap;
}

.package-title-table {
    font-size: 15px;
    margin: 0;
}

.package-price {
    font-size: 18px;
    color: #204392;
    margin: 0;
    font-weight: 500;
}

.package-services {
    list-style-type: none;
    padding: 0;
}

.package-services li {
    display: flex;
    gap: 3px;
    margin-bottom: 14px;
}

.package-services i {
    padding-top: 4px;
}

.flex-1 {
    flex: 1;
}

.step {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex: 1;
    height: 68px;
    background-color: #F6F6F6;
    box-shadow: 0px 0px 0px 3px #F6F6F6; /* Outer border to emulate stroke */
    cursor: pointer;
}

.step::before,
.step::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 100%;
  background-color: #EBF7FD;
}

.step::before {
  left: -3px;
}

.step::after {
  right: -3px;
}

.step-holder .step:nth-child(1) {
    clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%, 0 0);
}

.step-holder .step:not(:first-child) {
    clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%, 5% 50%);
}

.step--active {
    background-color: #FFF4EC;
    box-shadow: 0px 0px 0px 3px #FFF4EC; /* Outer border to emulate stroke */
}

.circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; /* Adjust size as needed */
    height: 28px;
    border-radius: 50%;
    background-color: #BDBDBD; /* Circle color */
    color: #EBF7FD; /* Text color */
    font-size: 16px; /* Adjust font size as needed */
    margin-right: 8px;
}

.circle--active {
    background-color: #F96900;
    color: #EBF7FD;
}

.additional-links-holder {
    display: flex;
    gap: 25px;
    padding: 60px 0;
    justify-content: center;
    width: 100%;
}

.additional-links {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: unset;
    cursor: pointer;
}

.additional-links:hover {
    text-decoration: none;
    color: unset;
}

.additional-links p {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    margin-right: 8px;
}

.radio-button-header {
    font-size: 20px;
    color: #939598;
    font-weight: bold;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}

.radio-button-header--selected {
    color: #000000;
}

.accordion-item {
    border: 1px solid #D9D9D9;
    background-color: #FFF;
    border-radius: 10px;
}

.accordion-item--selected {
    border-color: #000;
}

.no-decordation {
    text-decoration: none !important;
}

.accordion-item-title {
    display: flex;
    align-items: center;
    padding: 15px 2%;
}

.order-summary {
    background: #FFF4EC;
    padding: 15px;
    border-radius: 10px;
}

.order-summary-title {
    font-size: 20px;
    font-weight: bold;
}

.services-included {
    color: #5B5B5B;
}

.services-included-subtitle {
    font-size: 13px;
    text-transform: uppercase;
}

.add-on-selection {
    background: #EBF7FD;
    padding: .5rem 10px;
    display: flex;
}

.cursor-pointer {
    cursor: pointer;
}

.prices {
    font-size: 15px;
}

.total-price-label {
    font-size: 20px;
    color: #000;
}

.total-price-amount {
    font-size: 20px;
    color: #F96900;
}

.sup-crossed {
    text-decoration: line-through red;
    font-size: 13px;
}

.button-steps {
    border-radius: 8px;
    border-color: #1FB1E7;
    color: #1FB1E7;
}

.button-steps--active {
    background-color: #1FB1E7;
    color: #FFF;
}

.orderDetails--subtitle {
    font-size: 22px;
    color: #000000;
    margin-bottom: 0;
    font-weight: bold;
}

.discount-badge {
    background: #FFE2CD;
    font-weight: bold;
    font-size: 12px;
    border-radius: 5px;
    padding: 4px 8px;
}

.discount-badge--select {
    cursor: pointer;
}

.discount-description {
    font-size: 12px;
    padding-left: 8px;
}

.delivery-price-add-on {
    color: #179E55;
}

.packSpecificDetails--title {
    font-size: 18px;
    color: #5B5B5B;
}

.packSpecificDetails--subtitle {
    font-size: 14px;
    color: #5B5B5B;
}

.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border: 0.25em solid #F96900;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border-big {
    width: 5rem;
    height: 5rem;
    border: 0.25em solid #F96900;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    100% {
        transform: rotate(360deg);
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.vertical-align-middle {
    vertical-align: middle !important;
}

.btn-orange {
    background: #F96900;
    color: #fff;
    border-color: #F96900;
    border-radius: 10px;
}

.btn-blue {
    background: #35B0E6;
    color: #fff;
    border-color: #35B0E6;
}

.btn-outline-blue {
    background: transparent;
    color: #6c757d;
    border-color: #35B0E6;

}

.btn-orange:hover {
    color: #fff;
}

.btn-main {
    padding: 25px 5px 25px 5px;
}

.tooltip-inner {
    text-align: left !important;
}

.full-loader {
    position: fixed;  /* Stay in place */
    display: flex;    /* Flexbox for centering the loader */
    justify-content: center;
    align-items: center;
    width: 100%;      /* Full width */
    height: 100%;     /* Full height */
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Black background with transparency */
    z-index: 1000;    /* Sit on top */
}

.small-loader {
    width: 100%;      /* Full width */
    height: 100%;     /* Full height */
    background-color: rgba(0, 0, 0, 0.3); /* Black background with transparency */
    z-index: 1000;    /* Sit on top */
    position: absolute;
    display: flex;    /* Flexbox for centering the loader */
    justify-content: center;
    align-items: center;
}

.fm-icon {
    border-radius: 28px;
    margin-left: 3px;
    width: 56px;
    height: 56px;
    color: #ffffff;
    font-size: 28px;
    line-height: 56px;
    text-align: center;
    cursor: pointer;
}

.fm-icon:hover {
    text-decoration: none; /* Remove underlining on hover */
    color: #ffffff;
}

@keyframes blink-border {
    0%, 100% { border-color: red; }
    50% { border-color: transparent; }
}

.field-error {
    border: 2px solid red;
    animation: blink-border 0.8s ease-in-out 4;
    outline: none;
}