@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --main-color: #001965;
    --skyBlue: #e0effa;
    --lightPink: #f8dde6;
    --veryLightGray: #f6f5f4;
    --white: #fff;
    --main-bg: #feecdc;
    --blue: #005ad2;
    --gray: #d9d9d9;
}

.bg__main{
    background-color: var(--main-bg);
}
p,h1,h2,h3,h4,h5{
    color: var(--main-color);

}
.bold{
    font-family: "Noto Sans", sans-serif;
    font-weight: 700;
}
.p_content{
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
}
.main__title{
        font-family: "Noto Sans", sans-serif;
        font-weight: 500;
        font-size: 60px;
}
/* formula container start*/
.formula-container {
            display: flex;
            align-items: center;
            /* justify-content: center; */
            margin: 3rem 0 0 0;
            flex-wrap: wrap;
            gap: 1rem;
            color: var(--main-color);
        }

        .formula-left {
            font-weight: bold;
            font-size: 2.5rem;
            font-family: "Noto Sans", sans-serif;
    font-weight: 700;
        }

        .formula-fraction {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            min-width: 300px;
        }

        .formula-numerator {
            font-style: italic;
            font-size: 1.8rem;
            padding: 0.5rem 1rem;
            text-align: center;
            white-space: nowrap;
            font-family: "Noto Sans", sans-serif;
            font-weight: 500;
        }

        .formula-line {
            width: 100%;
            max-width: 400px;
            height: 3px;
            background-color: var(--main-color);
            margin: 0.3rem 0;
        }

        .formula-denominator {
            font-style: italic;
            font-size: 1.8rem;
            padding: 0.5rem 1rem;
            text-align: center;
            white-space: nowrap;
            font-family: "Noto Sans", sans-serif;
            font-weight: 500;
        }
/* formula container end*/


/* section --1 css start */
.bg__main{
    position: relative;
    padding: 7% 2%;
}
.main__title{
    position: absolute;
    left: 10%;
    top: -9.5%;
}
.section__margine{
    margin-bottom: 10%;
}
/* section --1 css end */
p{
    margin-bottom: 0;
}

/* section --2 css start */
.underLine{
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--main-color);
    cursor: pointer;
}
.underLine::after{
    position: absolute;
    left: 0;
    width: 100%;
    content: '';
    bottom: 0;
    height: 1px;
    display: block;
    background: none repeat scroll 0 0 transparent;
    background: var(--main-color);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
}
a:hover::after{
    animation: underlineAnimation 0.5s linear;
}
@keyframes underlineAnimation{
    from{
        width: 0%;
    }
    to{
        width: 100%;
    }
}
/* section --2 css end */


/* calculation start */
.main__title_calculation{
    position: absolute;
    left: 10%;
        top: -7.5%;
     font-family: "Noto Sans", sans-serif;
            font-weight: 500;
        font-size: 60px;
}
.bg__main_calculation{
    position: relative;
    padding: 5% 2%;
    background-color: var(--main-bg);
}



/* blue section */
.blue_section{
    background-color: var(--main-color);

}
.blue_section_text{
    font-size: 20px;
    font-family: "Noto Sans", sans-serif;
            font-weight: 700;
    color: var(--white);
}

/* discription result  */
.res_discription_row{
    padding: 4% 0;
}
.res_discription_row p{
    font-size: 20px;
    min-width: 85px;
}
.border_bottom{
    border-bottom: 1px dotted var(--main-color);
}

.v__gradient {
  width: 7%;
  min-width: 30px;
  /* max-width: 60px; */
  flex-shrink: 0; 
}

.v__gradient div {
  height: 100%;
  width: 100%;
  background: linear-gradient(rgb(80, 234, 54) 0%, rgb(80, 234, 54) -6.59919%, yellow 38.4008%, yellow 61.8016%, red 100%);
}

.v__gradient_content {
  flex: 1;
  margin-left: 15px; /* Space between gradient and content */
}


.modal-backdrop{
        background-color: rgba(0, 25, 101, 0.9) !important;
}





.btn-close{
    --bs-btn-close-bg: url('../media/close.png') !important;
}

.btn-close{
        font-size: 20px;
    display: flex;
    opacity: 1;
    justify-content: center;
    align-items: center;
}

.custom__btn__fill{
        background: var(--main-color);
    padding: 10px 40px;
    border-radius: 45px;
    border: none;
    outline: none;
    color: white;
}

.custom__btn__outline{
    border: 1px solid var(--main-color);
    color: var(--main-color);
    background-color: transparent;
    border-radius: 45px;
    padding: 10px 40px;
}
.bg-color{
    background-color: var(--blue);
}

.no-radius .modal-content, .modal-header {
    border-radius: 0 !important;
}

.no-radius  .modal-header {
    padding-left: 3rem !important;
}


.disclaimer_top{
    top: -15%;
}

.below__disclaimer__top{
    
}

.tooltip-inner {
    text-align: left; /* Aligns the text to the left */
    font-family: "Noto Sans", sans-serif;
            font-weight: 400;
}

.custom-tooltip {
  --bs-tooltip-bg: var(--gray);
  --bs-tooltip-color: var(--main-color);
  font-size: 0.7rem;
    font-family: "Noto Sans", sans-serif;
            font-weight: 400;
  line-height: 0.8rem;
    border: .0625rem solid #ccc5bd;
    border-radius: .5rem;
    -webkit-box-shadow: 0 0 .625rem rgba(0, 0, 0, .1);
    box-shadow: 0 0 .625rem rgba(0, 0, 0, .1);
    
}

.tooltip .arrow {
    width: 32px; /* Increase the width */
    height: 32px; /* Increase the height */
    margin-left: -6px;
}

/* model */
#exampleModalLabel{
    font-family: "Noto Sans", sans-serif;
            font-weight: 700;

}
.modal-body p{
    font-family: "Noto Sans", sans-serif;
            font-weight: 400;
    color: var(--main-color);
}
.modal-body .custom__btn__outline{
    font-family: "Noto Sans", sans-serif;
            font-weight: 400;
}





/* footer css */
.footer_header{
    font-size: 14px;
    font-family: "Noto Sans", sans-serif;
            font-weight: 700;
}
.social_link{
    display: flex;
    flex-direction: column;
}
.footer_content{
    font-family: "Noto Sans", sans-serif;
            font-weight: 400;
    font-size: 13px;

}
.social_link .footer_content{
    display: inline-block;
}
.promo p{
    color: #d4d7dc;
    font-family: "Noto Sans", sans-serif;
            font-weight: 400;
    font-size: 13px;
}

.arrow_animation{
   text-decoration: none;
   color: var(--main-color);
    font-family: "Noto Sans", sans-serif;
            font-weight: 400;
    cursor: pointer;
}

.footer_botton_content{
    display: flex;
    flex-wrap: wrap;
    font-family: "Noto Sans", sans-serif;
            font-weight: 400;


}
.footer_botton_content a{
   display: inline-block;
    
}


.footer_botton_content a{
    margin-right: calc((100vw - 330px) / 24 * 2);
    display: inline;
    font-family: "Noto Sans", sans-serif;
            font-weight: 400;
    font-size: 13px;
}
@media screen and (max-width: 768px) {
    .footer_botton_content {
        gap: 15px;
        flex-direction: column;
        align-items: start;
    }
}
@media screen and (max-width: 480px) {
    .footer_botton_content {
        gap: 15px;
        flex-direction: column;
        align-items: start;
    }
    
    
}




.arrow_animation {
    position: relative;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.arrow_animation::after {
    content: "⟶";
    position: absolute;
    left: calc(100% - 10px); /* Start closer to the text */
    top: 50%;
    transform: translateY(-50%) translateX(0px); /* Start further left */
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9em;
}

.arrow_animation:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(25px); /* End further right */
}













































/* Responsive adjustments */
@media screen and (max-width: 995px) {
    .main__title {
        font-size: 45px;
            top: -6.5%;
    }
  .main__title_calculation {
       font-size: 45px;
            top: -6.5%;
    }
    .no-radius  .modal-header {
    padding-left: 1rem !important;
    }
}


@media screen and (max-width: 768px) {
  .v__gradient {
    width: 30px;
  }
  
  .v__gradient_content {
    margin-left: 10px;
  }
   .main__title {
    font-size: 35px;
        top: -5.5%;
        left: 1%;
    }
    .main__title_calculation {
        font-size: 35px;
        top: -5.5%;
        left: 1%;
    }
     .formula-numerator, .formula-denominator{
        font-size: 1.3rem;
    }
    .formula-left {
        font-size: 2rem;
    }
}

@media screen and (max-width: 480px) {
  .v__gradient {
    width: 25px;
  }
   .no-radius  .modal-header {
    padding-left: 0.5rem !important;
    }
  .v__gradient_content {
    margin-left: 8px;
  }
  .blue_section_text {
    font-size: 18px;
    }
    .res_discription_row p {
    font-size: 14px;
    }
    .p_content
    {
        font-size: 14px;
    }

    .formula-container {
    margin: 1rem 0 0 0;
    flex-wrap: nowrap;
    gap: 1rem;
    }
    .formula-fraction {
    min-width: 200px;
    }
    .formula-numerator, .formula-denominator{
        font-size: 1rem;
    }
        .formula-left {
        font-size: 1rem;
        min-width: 60px;
    }
        .main__title {
        font-size: 26px;
        top: -6%;
        left: 1.5%;
    }
    .result-value{
        width: 115px;
    }
        .main__title_calculation {
        font-size: 26px;
        top: -3.5%;
        left: 1%;
    }
    .modal-body p{
        font-size: 12px;
    }
    .custom__btn__fill {
        padding: 6px 30px;
        font-size: 12px;
    }
    .custom__btn__outline {
        padding: 6px 30px;
        font-size: 12px;
    }
    .res_discription_row p {
        min-width: 58px;
    }

}