.content_section {
    .container {
        .containerPage {
            .sectionContent.contentCalculator {
                flex-direction: row;

                @media (max-width:1200px) {
                    & {
                        flex-direction: column-reverse;
                    }
                }
            }

            .sectionContent {
                .calculatorBox {
                    display: flex;
                    flex-direction: column;
                    box-shadow: 0px 8px 8px 0px #0000001F;
                    box-shadow: 0px 2px 8px 0px #00000014;
                    padding: 40px 24px;
                    border-radius: 24px;
                    -webkit-border-radius: 24px;
                    -moz-border-radius: 24px;
                    -ms-border-radius: 24px;
                    -o-border-radius: 24px;
                    row-gap: 22px;
                    position: relative;
                    background-color: #FFF;
                    z-index: 1;
                    flex: 1 1 100%;
                    overflow: visible;

                    .containerTwo {
                        display: flex;
                        gap: 24px;

                        @media (max-width:558px) {
                            flex-direction: column;
                        }
                    }

                    .containerInput {
                        position: relative;
                        width: 100%;

                        label {
                            position: absolute;
                            top: -14px;
                            right: 30px;
                            font-size: 14px;
                            font-weight: 800;
                            line-height: 21.87px;
                            color: var(--main-yellow);
                            background-color: #FFF;
                            padding: 4px 8px;
                            z-index: 1;
                            width: fit-content;

                        }

                        &:has(>input:not([type='file']))::after {
                            content: "KD";
                            position: absolute;
                            font-size: 15px;
                            font-weight: 400;
                            line-height: 22.05px;
                            right: 20px;
                            color: #AB972C;
                            top: 20px;
                        }
                    }

                    input {
                        all: none;
                        outline: none;
                        width: 100%;
                        border: 1px solid #4C4C4C80;
                        border-radius: 10px;
                        -webkit-border-radius: 10px;
                        -moz-border-radius: 10px;
                        -ms-border-radius: 10px;
                        -o-border-radius: 10px;
                        padding: 16px 34px;
                        height: initial;
                        font-size: 15px;
                        font-weight: 400;
                        line-height: 22.05px;
                        color: #4C4C4C;
                    }

                    .nice-select {
                        outline: none;
                        width: 100%;
                        border: 1px solid #4C4C4C80;
                        border-radius: 10px;
                        -webkit-border-radius: 10px;
                        -moz-border-radius: 10px;
                        -ms-border-radius: 10px;
                        -o-border-radius: 10px;
                        padding: 16px 34px;
                        height: initial;
                        font-size: 15px;
                        font-weight: 400;
                        line-height: 22.05px;
                        color: #4C4C4C;

                        &::after {
                            border-color: black;
                            height: 7px;
                            width: 7px;
                            border-width: 1px;
                            right: 26px;
                        }

                        .list {
                            padding: 0;
                            width: 100%;

                            .option {
                                font-size: 15px;
                                font-weight: 400;
                                line-height: 22.05px;
                                color: #4C4C4C;
                                display: flex;
                                align-items: center;
                            }
                        }
                    }

                    &::before {
                        content: "";
                        width: 50%;
                        height: 50%;
                        max-height: 128px;
                        position: absolute;
                        top: -2px;
                        right: -2px;
                        border: 4px solid var(--main-yellow);
                        border-top-right-radius: 24px;
                        z-index: -1;
                        border-bottom: none;
                        border-left: none;
                    }

                    button {
                        width: 100%;
                        max-width: 217px;
                        padding-block: 10px;
                        margin-inline: auto;
                        border: none;
                        outline: none;
                        font-size: clamp(16px, 1.6vw, 22px);
                        font-weight: 700;
                        line-height: 33px;
                        background-color: var(--main-blue);
                        color: #FFF;
                        margin-top: 24px;
                        border-radius: 10px;
                        -webkit-border-radius: 10px;
                        -moz-border-radius: 10px;
                        -ms-border-radius: 10px;
                        -o-border-radius: 10px;
                        transition: .5s all ease;
                        -webkit-transition: .5s all ease;
                        -moz-transition: .5s all ease;
                        -ms-transition: .5s all ease;
                        -o-transition: .5s all ease;

                        &:hover {
                            scale: 1.05;
                        }

                    }

                    .resultText {
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 23.52px;
                        color: var(--main-black);
                        text-align: center;
                        margin-bottom: 0;
                    }
                }

                .imageBox {
                    max-width: 320px;
                    flex: 1 1 100%;
                    border-radius: 24px;
                    -webkit-border-radius: 24px;
                    -moz-border-radius: 24px;
                    -ms-border-radius: 24px;
                    -o-border-radius: 24px;
                    overflow: hidden;

                    @media(max-width:1200px) {
                        & {
                            max-width: 100%;
                        }
                    }

                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                        object-position: 30% center;
                    }
                }
            }
        }
    }
}

html[dir="rtl"] .content_section {
    .container {
        .containerPage {
            .sectionContent {
                .calculatorBox {
                    .containerInput {
                        label {
                            right: initial;
                            left: 30px;
                        }

                        &:has(input)::after {
                            right: initial;
                            left: 20px;
                        }
                    }

                    .nice-select {
                        &::after {
                            left: 26px;
                            right: initial;
                        }
                    }
                }
            }
        }
    }
}