@media (max-width: 768px) {
    .modal-dialog {
        max-width: 90%;
    }
}

.custom-hr-container {
    width: 80%;
    margin: 0 auto;
    /* Ortalanması için margin kullanılır */
}

.shadow-box {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3) !important;
    border-radius: 15px !important;
    padding: 11px !important;
}

#radiographytokensdiv .shadow-box h1 {
    font-weight: 800 !important;
    color: #30353F;
    font-size: 30px !important;
}

#radiographytokensdiv .shadow-box h3 {
    color: #30353F;
    font-size: 25px !important;
    font-weight: 400 !important;
}

#radiographytokensdiv .shadow-box h2 {
    color: #30353F !important;
    font-size: 21px !important;
    font-weight: 600 !important;
}

.most {
    width: 200px;
    padding: 20px 0px;
    text-align: center;
    line-height: 1;
    color: #fff;
    position: absolute;
    background: #1876FF;
    top: -53px;
    font-size: 13px;
    left: 100% !important;
    transform: translate(-50%, 0);
}

@media (max-width: 767px) {
    .col-2 {
        width: 21.6666%;
        /* Tam genişlik */
    }
}

@media (max-width: 992px) {
    .col-2 {
        width: 30.6666%;
        /* Tam genişlik */
    }
}

@media (max-width: 1200px) {
    .col-2 {
        width: 48.6666%;
        /* Tam genişlik */
    }
}

#hero-banner-ucretler .breadcrumb-container {
    position: relative;
    top: -20px;
    display: inline-block;
    /* Ensure the container wraps around the content */
    color: white;
    padding-left: 0;
    /* Reset padding to align container to the left */
    margin-right: 1300px;
    margin-left: -50px;
}

#hero-banner-ucretler .breadcrumb-wrapper {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

#hero-banner-ucretler .breadcrumb-item {
    display: inline-block;
    font-family: Inter;
    font-size: 15px;
    font-weight: 400;
    line-height: 13.5px;
    text-align: left;
    padding-bottom: 10px;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
}

#hero-banner-ucretler .breadcrumb-item a {
    color: white;
    text-decoration: none;
}

#hero-banner-ucretler .breadcrumb-separator {
    display: inline-block;
    margin: 0 20px;
}

#hero-banner-ucretler .breadcrumb-icon {
    width: 4.5px;
    height: 9px;
    opacity: 1;
    margin: 0;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    #hero-banner-ucretler .breadcrumb-container {
        margin-right: 0;
        /* overflow-x: hidden; */
        margin-top: 90px;
        margin-left: -150px;
    }

    #hero-banner-ucretler .breadcrumb-wrapper {
        flex-wrap: wrap;
    }
}

#hero-banner-ucretler .breadcrumb-line {
    position: absolute;
    left: 0;
    bottom: -5px;
    /* Adjust according to space needed */
    width: 100%;
    /* Matches the width of the breadcrumb-wrapper */
    height: 2px;
    /* Thickness of the line */
    background-color: #3E506B;
    /* Line color */
}

@media (min-width: 1024px) {
    #hero-banner-ucretler .breadcrumb-container {
        margin-right: 1074px;
        /* Adjust margin for laptop screens */
    }
}

@media (max-width: 768px) {
    .mobile-flex-container {
        display: flex;
        flex-direction: column !important;
        /* Dikey hizalama */
        justify-content: center !important;
        align-items: center !important;
        background-color: #056bfa;
        padding: 16px;
        border-radius: 12px;
        color: white;
        margin-top: 20px !important;
        position: relative;
    }

    .mobile-flex-container span {
        text-align: center !important;
        margin-bottom: 10px;
        /* Buton ile araya boşluk ekleme */
    }

    .more-button {
        background-color: white !important;
        color: black !important;
        border: none !important;
        border-radius: 20px !important;
        padding: 8px 16px !important;
        cursor: pointer !important;
        text-decoration: none !important;
        text-align: center !important;
        position: relative !important;
    }
}

.cards-container {
    width: 100%;
    padding: 0 120px;
    margin-bottom: 100px;

    .price-cards-area {
        .header-area {
            text-align: center;
            margin-top: 80px;

            .title-area {
                margin-bottom: 84px;

                .subtitle {
                    color: #5B6071;
                    font-weight: 500;
                }

                .title {
                    color: #181B23;
                    font-size: 40px;
                    font-weight: bold;

                    .blue-text {
                        color: #1876FF;
                    }
                }

            }

            .header-btn-area {
                margin-bottom: 78px;

                .choose-btn-container {
                    display: flex;
                    background-color: #F7F7F8;
                    border-radius: 100px;
                    width: fit-content;
                    margin: auto;
                    position: relative;

                    .blue-bg {
                        transition: all 300ms ease-in-out;
                        position: absolute;
                        width: 50%;
                        height: 100%;
                        left: 0;
                        top: 0;
                        border-radius: 100px;
                        background-color: #1D79FF;
                    }

                    .choose-btn {
                        padding: 14px 80px;
                        transition: all 300ms ease-in-out;
                        color: #010914;
                        font-size: 22px;
                        z-index: 1;
                        cursor: pointer;

                        &.active {
                            color: #FFFFFF;
                        }
                    }
                }
            }
        }

        .price-cards {
            .flex-area {
                display: flex;
                gap: 16px;
                flex-wrap: wrap;
                justify-content: center;
                align-items: stretch;

                .price-card {
                    flex: 1;
                    max-width: 400px;
                    /* Kartların aşırı büyümesini önler */
                    min-width: 280px;
                    /* Çok küçülmesini önler */
                    font-family: "Inter", sans-serif;
                    border-radius: 20px;
                    border: 1px solid #9299B530;
                    box-shadow: 0 3px 12px #14142B15;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    min-width: 300px;
                    /* Minimum genişlik belirledik */

                    &.not-favorite {
                        margin-top: 44px;
                    }

                    .top-area {
                        .most-favorited {
                            padding: 10px;
                            color: white;
                            text-align: center;
                            background-color: #1876FF;
                        }

                        .card-content-area {
                            padding: 40px 26px;

                            height: 100%;

                            .card-header-area {
                                .subtitle {
                                    color: #373B4160;
                                    font-size: 14px;
                                    font-weight: 500;
                                }

                                .title {
                                    color: #373B41;
                                    font-size: 26px;
                                    font-weight: 700;
                                }
                            }

                            .offer-area {
                                display: flex;
                                align-items: baseline;
                                gap: 6px;
                                margin-bottom: 30px;

                                .offer {
                                    color: #373B41;
                                    font-size: 38px;
                                    font-weight: 700;
                                }

                                .offer-text {
                                    color: #373B41;

                                    .bold {
                                        font-weight: 700;
                                        font-size: 20px;
                                    }
                                }
                            }

                            .list-area {
                                .list-item {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    margin-bottom: 10px;

                                    .left-area {
                                        display: flex;
                                        align-items: center;
                                        gap: 4px;
                                    }

                                    .right-area {
                                        .detail-btn {
                                            background: none;
                                            border: none;
                                            outline: none;
                                            display: flex;
                                            align-items: center;
                                            gap: 4px;

                                            .text {
                                                text-decoration: underline;
                                                color: #1876FF;
                                            }
                                        }
                                    }
                                }
                            }

                            .text-area {
                                .bold-text {
                                    color: #373B41;
                                    font-size: 38px;
                                    font-weight: 700;
                                    margin-bottom: 20px;
                                }

                                .text {
                                    color: #373B41;
                                    font-size: 14px;
                                    margin-bottom: 20px;
                                }

                                .blue-text {
                                    color: #1876FF;
                                    font-size: 14px;
                                    margin-bottom: 20px;
                                }
                            }
                        }
                    }

                    .bottom-area {
                        padding: 40px 26px;

                        .price-area {
                            color: #373B41;
                            display: flex;
                            align-items: baseline;
                            margin-bottom: 16px;

                            .price {
                                font-size: 42px;
                                font-weight: 600;
                            }

                            .time {}
                        }

                        .btn-area {
                            width: 100%;

                            .pursache-btn {
                                color: white;
                                width: 100%;
                                border: none;
                                outline: none;
                                border-radius: 14px;
                                background-color: #1876FF;
                                padding: 16px 0;
                            }
                        }
                    }
                }
            }
        }
    }
}

.secury-payment-area {
    margin-bottom: 60px;

    .img-area {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #9299B530;

        .text-area {
            border-left: 1px solid #787D8A40;
            color: #9299B5;
            padding-left: 16px;
        }
    }

    .desc {
        text-align: center;
        color: #9299B5;
        padding-top: 20px;
    }
}

.header-card {
    margin-bottom: 20px;
    padding: 26px 52px;
    border-radius: 25px;
    border: 1px solid #9299B530;
    background-color: white;
    box-shadow: 0 0 4px 0 #14142B20;

    .desc {
        color: #170F49;
        font-size: 22px;
        font-weight: 600;
    }
}

.desc-card {
    padding: 56px 52px;
    margin-bottom: 40px;
    border-radius: 25px;
    border: 1px solid #9299B530;
    background-color: white;
    box-shadow: 0 0 4px 0 #14142B20;

    .inner-card {
        padding: 50px 60px;
        border: 1px solid #1876FF;
        border-radius: 25px;

        .title {
            color: #170F49;
            font-size: 22px;
            font-weight: 500;
            margin-bottom: 16px;
        }

        .list {
            .list-item {
                font-size: 18px;
                color: #170F49;

                .blue-text {
                    color: #1876FF;
                }
            }
        }
    }
}

@media (max-width: 1560px) {
    .cards-container {
        padding: 0 50px;
    }
}

@media (max-width: 1420px) {
    .cards-container {
        padding: 0 25px;
    }
}

@media (max-width: 1300px) {
    .price-card {
        min-width: calc(50% - 16px);
    }
}

@media (max-width: 768px) {
    .price-card {
        min-width: 100%;
    }
}

.details-container {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.6s ease-in-out, opacity 0.4s ease-in-out, transform 0.6s ease-in-out, margin-bottom 0.6s ease-in-out;
    transform: translateY(-10px);
    margin-bottom: 0;
    /* Başlangıçta sıfır */
}

.details-container.open {
    height: auto;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 20px;
    /* Açılınca margin-bottom ekleniyor */
}


.details-container {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.6s ease-in-out, opacity 0.4s ease-in-out, transform 0.6s ease-in-out, margin-bottom 0.6s ease-in-out;
    transform: translateY(-10px);
    margin-bottom: 0;
    /* Başlangıçta sıfır */
}

.details-container.open {
    height: auto;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 20px;
    /* Açılınca margin ekleniyor */
}

.recaptchaPosition {
    margin-left: 0;
    margin-right: auto;
}

.error-message {
    position: absolute;
    font-size: 12px;
    color: red;
    visibility: hidden;
    margin-left: 6px;
}

.submitContact {
    background-color: #021838;
    color: white;
}

.submitContact:hover {
    background-color: #021838;
    color: white;
}

.swal2-styled.swal2-confirm {
    background-color: #0f1e55 !important;
}