.mobile_width {
   width: auto;
}
.logo_con {
   height: 70px;
}
.logo_right {
   height: 45px;
}

.nav_header nav ul li > a,
.nav_header ul li .group div {
   font-weight: 500;
}
.nav_header li > div ul li:not(:last-of-type) {
   display: block;
   width: 100%;
   border-bottom: 1px solid #6666;
}

footer {
   background-color: var(--midnight);
}

footer li a {
   font-size: 1.1rem;
   color: #ddd;
}

footer p {
   font-size: 1rem;
   color: #ddd;
}

footer ul li .facebook {
   background-color: #1877f2;
}

footer ul li .insta {
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

footer ul li .you_tube {
   background-color: #ff0000;
}

footer ul li .linkdin {
   background-color: #1b3e51;
}
.service p {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--secondary);
   margin-bottom: 0.4rem;
}
.service img {
   height: 75%;
}
.hover-btn {
   background-color: #fff;
}
.hover-btn:hover {
   transition: all ease 1s;
   background-color: var(--secondary);
   color: #fff;
   gap: 4;
}
.blog_date {
   font-size: 0.9rem;
}
.bg-secondary {
   background-color: var(--secondary);
}
.bg-primary {
   background-color: var(--primary);
}
.bg-midnight {
   background-color: var(--midnight);
}

.mission_img {
   position: absolute;
   top: 10%;
   right: -4%;
}
.about_img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.vision_img {
   position: absolute;
   bottom: 0;
   left: 0;
}
.why_choose .why_icon {
   font-size: 1.875rem;
   line-height: 1.25rem;
}

.services_main {
   display: block;
   padding-inline: 20px;
}
.service_inside {
   padding-inline: 60px;
   display: block;
   margin: auto;
}
.breadcrum_padding {
   padding-top: 150px;
   padding-bottom: 80px;
}
.health_vector {
   position: absolute;
   top: 25%;
   left: 60%;
   transform: translateX(-50%);
   z-index: 0;
}
.why_health {
   border-radius: 0px 100px 0px 0px;
}
.rotate_div:hover .bg-softBg1 {
   transition: all ease 0.5s;
   background-color: var(--primary);
   transform: rotate(360deg);
}

.page_container {
   position: relative;
   box-shadow: 0 2px 10px #ddd;
   margin-top: -4%;
   margin-bottom: 5%;
   background: #fff;
   padding: 2px 1rem;
   z-index: 2;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

/* .blog_content :is(h1, h2, h3, h4, h5) {} */

.blog_sec h3.heading-4 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
   margin-bottom: 0.9rem;
   overflow: hidden;
}

.blog_sec p {
   display: -webkit-box;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
   margin-bottom: 0.75rem;
   overflow: hidden;
}

.blog_content img {
   margin-inline: auto;
   margin-block: 0.5rem 1.5rem;
   max-width: 900px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
   overflow: hidden;
}
.blog_content h1 {
   font-size: 2.1rem;
}
.blog_content :is(h3, h4) {
   font-weight: 600;
   margin-block: 1.5rem 0.8rem;
}
.blog_content h3 {
   font-size: 1.75rem;
}
.blog_content h4 {
   font-size: 1.5rem;
}
.blog_content :is(h5, h6) {
   font-weight: 500;
}
.blog_content p {
   color: var(--obsidian);
}

.investment_sec h4.heading-4 {
   font-family: var(-popp);
}

.companylogo_sec .swiper-slide {
   display: flex;
}

/* ===================   Loan Calculater  ================= */

.loan_calc {
   position: relative;
}

.loan_calc .container {
   height: auto;
   /* width: 700px; */
   border-radius: 20px;
   padding: 1rem 2rem;
   margin-inline: auto;
   background-image: linear-gradient(to bottom left, #e4dfec, white, white);
   box-shadow: 0 2px 15px #ddd;
}

.loan_calc .container .loan_calc_content {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
}
.loan_calc .container .loan_calc_content > div {
   width: calc(100% / 2 - 1rem);
}

.loan_calc .sub-container {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   height: max-content;
}
.loan_calc .sub-container::before {
   content: "";
   position: absolute;
   right: 0;
   top: 50%;
   transform: translatey(-50%);
   width: 2px;
   height: 75%;
   background: #eee;
}
.loan_calc .sub-container .view {
   max-width: 90%;
}

.loan_calc .header h3 {
   margin-bottom: 30px;
   color: var(--charcole);
   font-weight: 600;
}

.breakup {
   width: 65%;
   margin-inline: auto;
}

.detail {
   display: flex;
   justify-content: space-between;
}
.detail h6 {
   font-size: 1.04rem;
   font-weight: 500;
   font-family: var(--popp);
   color: var(--secondary);
}

.details > div {
   margin-bottom: 1rem;
}

.details input {
   width: 100%;
}

/*----- Styling the sliders ----*/
input[type="range"] {
   -webkit-appearance: none;
   margin: 10px 0;
   width: 100%;
}

input[type="range"]:focus {
   outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
   width: 100%;
   height: 6px;
   cursor: pointer;
   background: #f7931edd;
}

input[type="range"]::-webkit-slider-thumb {
   box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey;
   border: 5px solid #ffffff;
   height: 20px;
   width: 20px;
   border-radius: 50%;
   background: var(--primary);
   cursor: pointer;
   margin-top: -6px;
   -webkit-appearance: none;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
   background: #b3b3b3;
}

input[type="range"]::-moz-range-track {
   width: 100%;
   height: 6px;
   cursor: pointer;
   background: #9088d2;
   border-color: transparent;
   border-width: 16px 0;
   color: transparent;
   border-radius: 10px;
}

input[type="range"]::-moz-range-thumb {
   box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey;
   border: 5px solid #ffffff;
   height: 20px;
   width: 20px;
   border-radius: 50%;
   background: #9088d2;
   cursor: pointer;
   margin-top: -6px;
}

input[type="range"]::-ms-track {
   width: 100%;
   height: 6px;
   cursor: pointer;
   background: #9088d2;
   border-color: transparent;
   border-width: 16px 0;
   color: transparent;
   border-radius: 10px;
}

input[type="range"]::-ms-fill-lower {
   background: #9088d2;
   border-radius: 5px;
}

input[type="range"]::-ms-fill-upper {
   background: #9088d2;
   border-radius: 5px;
}

input[type="range"]::-ms-thumb {
   box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey;
   border: 5px solid #ffffff;
   height: 20px;
   width: 20px;
   border-radius: 50%;
   background: #9088d2;
   cursor: pointer;
   margin-top: -6px;
}

input[type="range"]:focus::-ms-fill-lower {
   background: #9088d2;
}

input[type="range"]:focus::-ms-fill-upper {
   background: #9088d2;
}

/*-------------------------------------*/

.chart-details h6 {
   font-weight: 500;
   font-family: var(--popp);
   color: var(--secondary);
}

.loan-details {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 1.4rem;
}

#price-container {
   color: var(--charcole);
   margin-top: 2rem;
   text-align: center;
}

#price {
   color: #130f31;
   font-size: 1.5rem;
   font-weight: 500;
}
#price-container::before {
   content: "Monthly Payable:";
   font-size: 0.8rem;
   display: block;
}

.owl-theme .owl-nav {
        display: flex;
        width: 100%;
        justify-content: space-between;
        position: absolute;
        left: 32%;
        padding: 0px 30px;
        top: 32%;
        transform: translate(-32%, -32%);
      }
      .owl-carousel .owl-nav button.owl-next,
      .owl-carousel .owl-nav button.owl-prev {
        font-size: 25px;
        background-color: var(--charcole);
        border-radius: 50%;
        color: #ddd;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      @media only screen and (max-width: 900px) {
        .owl-theme .owl-nav {
          padding: 0px 30px;
          left: 40%;
          top: 40%;
          transform: translate(-40%, -40%);
        }
      }
      @media only screen and (max-width: 576px) {
        .owl-theme .owl-nav {
          padding: 0px 10px;
          left: 65%;
          top: 65%;
          transform: translate(-65%, -65%);
        }
        .owl-carousel .owl-nav button.owl-next,
        .owl-carousel .owl-nav button.owl-prev {
          font-size: 18px;
          background-color: var(--charcole);
          border-radius: 50%;
          color: #ddd;
          width: 30px;
          height: 30px;
        }
      }