img {
    max-width: 100%;
}

@font-face {
    font-family: ar-rg;
    src: url(../fonts/ar-rg.ttf);
}

.ar-rg {
    font-family: ar-rg;
}

.ar-bd {
    font-family: ar-bd;
}

@font-face {
    font-family: ar-bd;
    src: url(../fonts/ar-bd.ttf);
}



@media only screen and (max-width: 481px) {
    /**home**/
    .header-wrap {
        border-bottom-left-radius: 13px;
        border-bottom-right-radius: 13px;
        position: fixed;
        width: 100%;
        left: 0px;
        top: 0px;
        z-index: 100;
        background-color: #082843;
        box-shadow: 0px 4px 14px 0px rgb(161, 160, 160);
    }
    .header-wrap .logo-header-wrap{
        width: 200px;
    }
    .top-space-wrap {
        padding-top: 70px;
    }

    .container {
        max-width: 950px;
    }

    .main-calculator-section {
        padding: 20px 0px;
    }

   

    .common-header {
        font-size: 22px;
        color: #082843;
        line-height: 1.6em;
        font-family: ar-bd;

    }

    p {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .common-btn {
        background-color: #0D0F45;
        padding: 10px 30px;
        border-radius: 20px;
        border: 1px solid #fff;
        color: white;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        font-family: ar-bd;
    }

    .common-btn:hover {
        background-color: white;
        box-shadow: 0px 0px 4px 0px grey;
        color: grey;
    }

    .box-shadow-wrap {
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
        border-radius: 24px;
    }

    .outer-box-range-sliders-wrap {
        padding: 10px 10px;
    }

    .range-tilte-wrap .common-header {
        font-size: 20px;
    }

    .display-range-wrap p {
        font-size: 20px;
        font-family: ar-bd;
        color: #945C88;
        line-height: normal;
        margin-bottom: 0px;
    }

    .range-display-input {
        border: 0px;
        width: 100%;
        font-size: 25px;
        color: #945C88;
        font-family: ar-bd;

    }

    .range-input-wrap {
        width: 100%;
    }

    .slidecontainer {
        width: 100%;
    }

    .slider {

        width: 100%;
        height: 10px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
        cursor: pointer;
    }

    .slider:hover {
        opacity: 1;
    }

    .animated-flower-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .animated-flower-wrap lottie-player {
        width: 350px;
    }

    .common-btn.line-btn-wrap {
  
        display: block;
        text-align: center;
    }

    .ab-arrow-wrap {
        position: absolute;
        bottom: 24px;
        right: 200px;
        width: 70px;
    }



    .footer-wrap {
        background: #082843;
        padding-top: 10px;
        border-radius: 10px 10px 0px 0px;
    }



    .footer-logo-wrap img {
        width: 230px;
    }

    .footer-nav-wrap {
        background-color: #3d588e7a;
        padding: 2px 0px;
        text-align: center;

    }
}

/* Tablet Vertical Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) and (max-width: 786px) {
    /**home**/
    .header-wrap {
        border-bottom-left-radius: 13px;
        border-bottom-right-radius: 13px;
        position: fixed;
        width: 100%;
        left: 0px;
        top: 0px;
        z-index: 100;
        background-color: #082843;
        box-shadow: 0px 4px 14px 0px rgb(161, 160, 160);
    }
    .header-wrap .logo-header-wrap{
        width: 200px;
    }
    .top-space-wrap {
        padding-top: 70px;
    }

    .container {
        max-width: 950px;
    }

    .main-calculator-section {
        padding: 20px 0px;
    }

   

    .common-header {
        font-size: 22px;
        color: #082843;
        line-height: 1.6em;
        font-family: ar-bd;

    }

    p {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .common-btn {
        background-color: #0D0F45;
        padding: 10px 30px;
        border-radius: 20px;
        border: 1px solid #fff;
        color: white;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        font-family: ar-bd;
    }

    .common-btn:hover {
        background-color: white;
        box-shadow: 0px 0px 4px 0px grey;
        color: grey;
    }

    .box-shadow-wrap {
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
        border-radius: 24px;
    }

    .outer-box-range-sliders-wrap {
        padding: 10px 10px;
    }

    .range-tilte-wrap .common-header {
        font-size: 20px;
    }

    .display-range-wrap p {
        font-size: 20px;
        font-family: ar-bd;
        color: #945C88;
        line-height: normal;
        margin-bottom: 0px;
    }

    .range-display-input {
        border: 0px;
        width: 100%;
        font-size: 25px;
        color: #945C88;
        font-family: ar-bd;

    }

    .range-input-wrap {
        width: 100%;
    }

    .slidecontainer {
        width: 100%;
    }

    .slider {

        width: 100%;
        height: 10px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
        cursor: pointer;
    }

    .slider:hover {
        opacity: 1;
    }

    .animated-flower-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .animated-flower-wrap lottie-player {
        width: 350px;
    }

    .common-btn.line-btn-wrap {
       
        display: block;
        text-align: center;
    }

    .ab-arrow-wrap {
        position: absolute;
        bottom: 24px;
        right: 200px;
        width: 70px;
    }



    .footer-wrap {
        background: #082843;
        padding-top: 10px;
        border-radius: 10px 10px 0px 0px;
    }



    .footer-logo-wrap img {
        width: 230px;
    }

    .footer-nav-wrap {
        background-color: #3d588e7a;
        padding: 2px 0px;
        text-align: center;

    }
}

/* Tablet Horizontal Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 786px) and (max-width: 1100px) {
    /**home**/
    .header-wrap {
        border-bottom-left-radius: 13px;
        border-bottom-right-radius: 13px;
        position: fixed;
        width: 100%;
        left: 0px;
        top: 0px;
        z-index: 100;
        background-color: #082843;
        box-shadow: 0px 4px 14px 0px rgb(161, 160, 160);
    }
    .header-wrap .logo-header-wrap{
        width: 200px;
    }
    .top-space-wrap {
        padding-top: 80px;
    }

    .container {
        max-width: 950px;
    }

    .main-calculator-section {
        padding: 20px 0px;
    }

   

    .common-header {
        font-size: 22px;
        color: #082843;
        line-height: 1.6em;
        font-family: ar-bd;

    }

    p {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .common-btn {
        background-color: #0D0F45;
        padding: 10px 30px;
        border-radius: 20px;
        border: 1px solid #fff;
        color: white;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        font-family: ar-bd;
    }

    .common-btn:hover {
        background-color: white;
        box-shadow: 0px 0px 4px 0px grey;
        color: grey;
    }

    .box-shadow-wrap {
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
        border-radius: 24px;
    }

    .outer-box-range-sliders-wrap {
        padding: 10px 10px;
    }

    .range-tilte-wrap .common-header {
        font-size: 20px;
    }

    .display-range-wrap p {
        font-size: 20px;
        font-family: ar-bd;
        color: #945C88;
        line-height: normal;
        margin-bottom: 0px;
    }

    .range-display-input {
        border: 0px;
        width: 100%;
        font-size: 25px;
        color: #945C88;
        font-family: ar-bd;

    }

    .range-input-wrap {
        width: 100%;
    }

    .slidecontainer {
        width: 100%;
    }

    .slider {

        width: 100%;
        height: 10px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
        cursor: pointer;
    }

    .slider:hover {
        opacity: 1;
    }

    .animated-flower-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .animated-flower-wrap lottie-player {
        width: 350px;
    }

    .common-btn.line-btn-wrap {
        margin-bottom: -60px;
        display: block;
        text-align: center;
    }

    .ab-arrow-wrap {
        position: absolute;
        bottom: 24px;
        right: 200px;
        width: 70px;
    }



    .footer-wrap {
        background: #082843;
        padding-top: 10px;
        border-radius: 10px 10px 0px 0px;
    }



    .footer-logo-wrap img {
        width: 230px;
    }

    .footer-nav-wrap {
        background-color: #3d588e7a;
        padding: 2px 0px;
        text-align: center;

    }
}

@media only screen and (min-width: 1100px) {

    /**home**/
    .header-wrap {
        border-bottom-left-radius: 13px;
        border-bottom-right-radius: 13px;
        position: fixed;
        width: 100%;
        left: 0px;
        top: 0px;
        z-index: 100;
        background-color: #082843;
        box-shadow: 0px 4px 14px 0px rgb(161, 160, 160);
    }
    .header-wrap .logo-header-wrap{
        width: 200px;
    }
    .top-space-wrap {
        padding-top: 80px;
    }

    .container {
        max-width: 1250px;
    }

    .main-calculator-section {
        padding: 20px 0px;
    }

   

    .common-header {
        font-size: 26px;
        color: #082843;
        line-height: 1.6em;
        font-family: ar-bd;

    }

    p {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .common-btn {
        background-color: #0D0F45;
        padding: 10px 30px;
        border-radius: 20px;
        border: 1px solid #fff;
        color: white;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        font-family: ar-bd;
    }

    .common-btn:hover {
        background-color: white;
        box-shadow: 0px 0px 4px 0px grey;
        color: grey;
    }

    .box-shadow-wrap {
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
        border-radius: 24px;
    }

    .outer-box-range-sliders-wrap {
        padding: 20px 20px;
    }

    .range-tilte-wrap .common-header {
        font-size: 20px;
    }

    .display-range-wrap p {
        font-size: 20px;
        font-family: ar-bd;
        color: #945C88;
        line-height: normal;
        margin-bottom: 0px;
    }

    .range-display-input {
        border: 0px;
        width: 100%;
        font-size: 25px;
        color: #945C88;
        font-family: ar-bd;

    }

    .range-input-wrap {
        width: 100%;
    }

    .slidecontainer {
        width: 100%;
    }

    .slider {

        width: 100%;
        height: 10px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
        cursor: pointer;
    }

    .slider:hover {
        opacity: 1;
    }

    .animated-flower-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .animated-flower-wrap lottie-player {
        width: 350px;
    }

    .common-btn.line-btn-wrap {
        margin-bottom: -60px;
        display: block;
        text-align: center;
    }

    .ab-arrow-wrap {
        position: absolute;
        bottom: 24px;
        right: 200px;
        width: 70px;
    }



    .footer-wrap {
        background: #082843;
        padding-top: 10px;
        border-radius: 10px 10px 0px 0px;
    }



    .footer-logo-wrap img {
        width: 230px;
    }

    .footer-nav-wrap {
        background-color: #3d588e7a;
        padding: 2px 0px;
        text-align: center;

    }

}

@media only screen and (min-width: 1600px) {
     /**home**/
     .header-wrap {
        border-bottom-left-radius: 13px;
        border-bottom-right-radius: 13px;
        position: fixed;
        width: 100%;
        left: 0px;
        top: 0px;
        z-index: 100;
        background-color: #082843;
        box-shadow: 0px 4px 14px 0px rgb(161, 160, 160);
    }
    .header-wrap .logo-header-wrap{
        width: 240px;
    }
    .top-space-wrap {
        padding-top: 90px;
    }

    .container {
        max-width: 1650px;
    }

    .main-calculator-section {
        padding: 20px 0px;
    }

   

    .common-header {
        font-size: 30px;
        color: #082843;
        line-height: 1.6em;
        font-family: ar-bd;

    }

    p {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .common-btn {
        background-color: #0D0F45;
        padding: 10px 30px;
        border-radius: 20px;
        border: 1px solid #fff;
        color: white;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        font-family: ar-bd;
    }

    .common-btn:hover {
        background-color: white;
        box-shadow: 0px 0px 4px 0px grey;
        color: grey;
    }

    .box-shadow-wrap {
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
        border-radius: 24px;
    }

    .outer-box-range-sliders-wrap {
        padding: 20px 20px;
    }

    .range-tilte-wrap .common-header {
        font-size: 25px;
    }

    .display-range-wrap p {
        font-size: 25px;
        font-family: ar-bd;
        color: #945C88;
        line-height: normal;
        margin-bottom: 0px;
    }

    .range-display-input {
        border: 0px;
        width: 100%;
        font-size: 25px;
        color: #945C88;
        font-family: ar-bd;

    }

    .range-input-wrap {
        width: 100%;
    }

    .slidecontainer {
        width: 100%;
    }

    .slider {

        width: 100%;
        height: 10px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
        cursor: pointer;
    }

    .slider:hover {
        opacity: 1;
    }

    .animated-flower-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .animated-flower-wrap lottie-player {
        width: 350px;
    }

    .common-btn.line-btn-wrap {
        margin-bottom: -60px;
        display: block;
        text-align: center;
    }

    .ab-arrow-wrap {
        position: absolute;
        bottom: 24px;
        right: 200px;
        width: 70px;
    }



    .footer-wrap {
        background: #082843;
        padding-top: 10px;
        border-radius: 10px 10px 0px 0px;
    }



    .footer-logo-wrap img {
        width: 230px;
    }

    .footer-nav-wrap {
        background-color: #3d588e7a;
        padding: 2px 0px;
        text-align: center;

    }
}

.blue-color {
    color: #3D588E;
}

.list-group-item-header {
    border-bottom: 2px solid #3D588E;
}

.breadcrumb-item {
    font-family: 'ar-bd';
}

.breadcrumb-item a {
    color: #693604;
    text-decoration: none;

}

.breadcrumb-item+.breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, ">");
}
.see-more-icon img{
    width: 30px;
    cursor: pointer;
    rotate: 0deg;
    transition: all 0.2s ease-in-out;
}
.see-more-icon.rotate-more-wrap img{
    rotate: 45deg;
} 
.accordion-custom-wrap{
    display: none;
}
.range-display-input {
 
    width: 250px;
    box-shadow: none;
    outline: none;
    background: #ebf1f3;
}
.box-list-calculator{
    position: sticky;
    top: 110px;
    z-index: 10;
    left: 0px;

}
.select-sip-btn{
    background-color: white;
    text-decoration: none;
    color: #0D0F45;
    font-family: ar-bd;
    font-size: 15px;
    padding: 6px 20px;
    border: 1px solid #082843;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
}
.select-sip-btn:hover, .select-sip-btn.active{
    color: #d1f2f9;
    background-color: #0D0F45;
}
.postion-sticky-wrap{
    position: sticky;
    top: 110px;
    z-index: 10;
    left: 0px;
}
body {

    font-family: ar-rg;
}
.drop-paragraph p{
    font-size: 17px;
}
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background: #ccd0ee;
}

::-webkit-scrollbar-thumb {

    background: #15186b;
    border-radius: 100px;
}
.list-calculators-home-wrap{
    text-decoration: none;
}