@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");

/* ====Global style==== */
/* variable */
:root {
   --color-brich: #3d3825;
   --color-primary: #007c5d;
   --color-primary-dark: #006048;
   --color-primary-light: #32a250;
   --color-primary-extra-light: #32a150;
   --section-bg: #f7f6f2;
   --color-secondary: #ffd65c;
   --color-secondary-light: #fed65d;
   --color-white: #ffffff;
   --color-text: #48432c;
   --border-color: #EDEBE1;
   --color-primary-heading: #005f47;
   --font-family-mulish: "Mulish", sans-serif;
   --fs-h1: 26px;
   --lh-h1: 32px;
   --fs-h2: 20px;
   --lh-h2: 26px;
   --fs-h3: 18px;
   --lh-h3: 24px;
   --fs-h4: 16px;
   --lh-h4: 20px;
   --fs-h5: 15px;
   --lh-h5: 18px;
   --fs-label: 14px;
   --lh-label: 17px;
   --fw-light: 300;
   --fw-normal: 400;
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;
   --fw-extrabold: 800;
   --btn-font-size: 14px;
   --btn-line-height: 18px;
   --btn-padding: 12px;
   --btn-min-width: 120px;
}

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

body {
   --body-text: 14px;
   --body-line-height: 20px;
   font-family: var(--font-family-mulish);
   font-size: var(--body-text);
   line-height: var(--body-line-height);
   font-weight: var(--fw-normal);
   color: var(--color-text);
   background: var(--color-white);
   scroll-behavior: smooth;
   position: relative;
}

ul,
ol {
   list-style: none;
}

a {
   text-decoration: none;
   display: inline-block;
   color: var(--color-primary-extra-light);
}

img {
   width: 100%;
   max-width: 100%;
   height: auto;
   -o-object-fit: cover;
   object-fit: cover;
}

button {
   cursor: pointer;
   border: 0;
   outline: 0;
   background-color: transparent;
}

address {
   font-style: normal;
   font-size: 15px;
   line-height: 22.5px;
}

/* typrography */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
input,
select,
address {
   font-family: var(--font-family-mulish);
}

h1,
.h1 {
   font-size: var(--fs-h1);
   line-height: var(--lh-h1);
   font-weight: var(--fw-extrabold);
   color: var(--color-primary-heading);
}

h2,
.h2 {
   font-size: var(--fs-h2);
   line-height: var(--lh-h2);
   font-weight: var(--fw-bold);
   color: var(--color-primary);
}

h3,
.h3 {
   font-size: var(--fs-h3);
   line-height: var(--lh-h3);
   font-weight: var(--fw-bold);
   color: var(--color-brich);
}

h4,
.h4 {
   font-size: var(--fs-h4);
   line-height: var(--lh-h4);
   font-weight: var(--fw-bold);
}

h5,
.h5 {
   font-size: var(--fs-h5);
   line-height: var(--lh-h5);
   font-weight: var(--fw-bold);
   color: var(--color-primary);
}

label {
   font-size: var(--fs-label);
   line-height: var(--lh-label);
   font-weight: var(--fw-semibold);
   color: #47432c;
}

input,
textarea,
select,
option {
   padding: 14px;
   border: 1px solid #EDEBE1;
   border-radius: 8px;
   background-color: #FAF9F7;
   resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
   outline-color: var(--color-primary);
}

textarea {
   resize: none;
   height: 160px;
}

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image: url("../images/down-arrow-block.png");
   background-repeat: no-repeat;
   background-position-x: 92%;
   background-position-y: 50%;
}

.custom-radio {
   display: none;
}

.custom-radio-label {
   position: relative;
   padding-left: 28px;
   cursor: pointer;
   line-height: 20px;
   user-select: none;
}

.custom-radio-label::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   width: 18px;
   height: 18px;
   border: 1px solid #EDEBE1;
   border-radius: 4px;
   background: #FAF9F7;
   transition: 0.2s;
}

.custom-radio:checked+.custom-radio-label::before {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
}

.custom-radio-label::after {
   content: '';
   position: absolute;
   left: 7px;
   top: 2px;
   width: 5px;
   height: 10px;
   border: solid #fff;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
   display: none;
}

.custom-radio:checked+.custom-radio-label::after {
   display: block;
}

/* utility class*/
.d-flex {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
}

.flex-wrap {
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.flex-row {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
}

.flex-col {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
}

.flex-row-rev {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
   -ms-flex-direction: row-reverse;
   flex-direction: row-reverse;
}

.item-center {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

.item-end {
   -webkit-box-align: end;
   -ms-flex-align: end;
   align-items: end;
}

.item-start {
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
}

.justify-center {
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.justify-between {
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
}

.justify-start {
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: start;
}

.justify-end {
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   justify-content: end;
}

.text-center {
   text-align: center;
}

.text-left {
   text-align: left;
}

.text-right {
   text-align: right;
}

.gap-10 {
   gap: 10px;
}

.gap-20 {
   gap: 20px;
}

.gap-24 {
   gap: 24px;
}

.overflow-hidden {
   overflow: hidden;
}

/* component start  */
.grid {
   --grid-column: 1;
   --gap: 20px;
   display: -ms-grid;
   display: grid;
   gap: var(--gap);
   -ms-grid-columns: 1fr;
   grid-template-columns: repeat(var(--grid-column), 1fr);
}

@media screen and (min-width: 789px) {
   .grid {
      --grid-column: 2;
      --gap: 30px;
   }
}

@media screen and (min-width: 1025px) {
   .grid {
      --grid-column: 3;
      --gap: 40px;
   }
}

.btn {
   background-color: var(--color-secondary);
   color: var(--color-brich);
   text-align: center;
   font-size: var(--btn-font-size);
   line-height: var(--btn-line-height);
   font-weight: var(--fw-bold);
   padding: var(--btn-padding);
   border-radius: 6px;
   min-width: var(--btn-min-width);
   text-wrap: nowrap;
   -webkit-transition: all .3s linear;
   -o-transition: all .3s linear;
   transition: all .3s linear;
   cursor: pointer;
   border: 1px solid transparent;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   -ms-border-radius: 6px;
   -o-border-radius: 6px;
}

.btn:hover {
   border-color: var(--color-secondary);
   background-color: transparent;
}

.btn-primary {
   background-color: var(--color-primary);
   color: var(--color-white);
}

.btn-primary:hover {
   border-color: var(--color-primary);
   color: var(--color-primary);
}

.btn-white {
   background-color: var(--color-white);
   color: var(--color-primary);
}

.btn-white:hover {
   color: var(--color-primary);
   border-color: var(--color-white);
}

.btn-border {
   color: var(--color-primary);
   border: 1px solid var(--color-primary-extra-light);
   background-color: var(--color-white);
}

.common-wrap {
   max-width: 1264px;
   width: 100%;
   margin: 0 auto;
   padding: 0 12px;
}

section,
footer {
   --space-y: 32px;
   --space-b: 32px;
   padding: var(--space-y) 0 var(--space-b);
}

footer {
   padding-bottom: 0;
}

/* header section start */
.header-wrap {
   padding: 12px 0;
}

.header-wrap .site-logo {
   display: none;
}

.header-wrap .header-content {
   justify-content: center;
}

.header-right p {
   font-size: 16px;
   line-height: 19.2px;
   font-weight: 300;
}

.header-right p a {
   font-weight: 800;
   color: var(--color-primary-dark);
   margin-left: 8px;
}

.header-right .btn {
   font-size: 14px;
   line-height: 18px;
   font-weight: 600;
}

/* header section start */
/* navigation section start */
.nav-wrap {
   background-color: var(--color-primary);
}

.nav-wrap .site-logo {
   padding-block: 16px;
}

.navigation-wraper>ul {
   flex-grow: 1;
   gap: 6px;
   display: block;
}

.navigation-wraper>ul a {
   font-size: 18px;
   line-height: 21.6px;
   color: var(--color-white);
   padding-block: 12px;
   font-weight: 600;
   transition: all .3s linear;
}

.navigation-wraper>ul>li>a:after {
   content: '';
   width: 0%;
   height: 2px;
   background-color: #ffb821;
   left: 50%;
   bottom: 0px;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   transform: translateX(-50%);
   position: absolute;
   transition: all 0.3s ease-in;
}

.navigation-wraper>ul a:hover:after {
   width: 100%;
}

.navigation-wraper>ul>li {
   position: relative;
}

.nav-wrap ul li ul li:hover {
   background-color: #32a250;
}

.nav-wrap li a img {
   width: 10px;
   transition: all 0.3s linear;
   top: -1px;
   position: relative;
}

.nav-wrap ul li:hover a img {
   transform: rotate(180deg);
}

.navigation-wraper {
   flex-grow: 1;
   position: fixed;
   top: 0;
   left: auto;
   right: -100%;
   height: 100vh;
   min-height: 100%;
   width: 100%;
   background: var(--color-primary);
   transition: all 0.3s ease;
   z-index: 999;
   padding: 36px 20px;
   overflow: hidden;
   overflow-y: auto;
}

.navShown .navigation-wraper {
   right: 0;
}

.nav-wrap .close-btn {
   position: absolute;
   width: 24px;
   height: 24px;
   padding: 4px;
   top: 20px;
   right: 20px;
   gap: 8px;
   z-index: 999;
}

.navigation-wraper>ul {
   display: grid;
}

.navigation-wraper>ul a,
.navigation-wraper ul li ul li a {
   display: inline-block;
}

.navigation-wraper ul li ul.dropdown {
   padding-left: 20px;
   display: none;
}

.navigation-wraper ul li ul li a {
   font-size: 16px;
   line-height: 20px;
   padding: 14px 16px;
   font-weight: 700;
   display: block;
   color: var(--color-white);
}

/* navigation section end */
/* hero component start */
/* hero section start */
.hero-section {
   background-color: var(--section-bg);
}

.hero-section .common-wrap {
   flex-direction: column-reverse;
}

.content-wraper .sub-title {
   color: var(--color-primary-light);
   font-size: 16px;
   line-height: 26.4px;
   margin-bottom: 8px;
}

.media iframe,
.media video {
   width: 100%;
   height: 100%;
}

.content-wraper .title {
   margin-bottom: 24px;
}

.content-wraper .title span {
   color: #3d3825;
   display: block;
}

.content-wraper .btn-wraper {
   margin-top: 24px;
}

.home-page .content-wraper .btn-white,
.rate-quote .content-wraper .btn-white {
   border: 1px solid var(--color-primary-extra-light);
}

.rate-quote .content-wraper .btn-wraper span {
   font-style: italic;
}

.mortgages .item .btn {
   color: var(--color-white);
}

.media img {
   border-top-left-radius: 24px;
   border-bottom-right-radius: 24px;
   border-radius: 0;
}

.loan-officers-page .hero-section {
   background-color: transparent;
}

/* hero section end */
/* cta section start */
.get-quote-inner {
   --space-y: 24px;
   --space-x: 16px;
   padding: var(--space-y) var(--space-x);
   background-image: url(../images/home-financing-cta-bg.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   border-radius: 6px;
}

.get-quote-content h4,
.get-quote-content p {
   color: var(--color-white);
}

.get-quote-btn {
   flex-shrink: 0;
}

.get-quote-content-img {
   --size: 60px;
   width: var(--size);
   height: var(--size);
   flex-shrink: 0;
}

.get-quote-content-img img {
   height: 100%;
}

/* cta section end */
/* support box section start */
.support-box-section {
   --support-box-container-width: 600px;
   --space-y: 36px;
   --space-b: 48px;
}

.support-box-section .common-wrap {
   max-width: 645px;
}

.support-box .support-text a {
   color: var(--color-primary-extra-light);
}

.support-box img {
   max-width: 18px;
}

.support-box h2 {
   margin-bottom: 16px;
}

.support-box .support-text {
   margin-bottom: 16px;
}

.support-box p {
   margin-bottom: 55px;
}

.support-box .btn {
   min-width: 180px;
}

.support-box .support-btn {
   min-width: 210px;
   font-size: 17px;
   line-height: 20.4px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

.support-box .support-btn svg {
   width: 18px;
}

/* support box section start */
/* doubele quote section start */
.double-quote {
   position: relative;
   padding-left: 45px;
   display: inline-block;
}

.double-quote::before,
.double-quote::after {
   content: "";
   width: 10px;
   height: 10px;
   background-size: cover;
}

.double-quote::before {
   position: absolute;
   left: 0;
   top: 6px;
   background-image: url(../images/quote.png);
}

.double-quote::after {
   background-image: url(../images/quote-2.png);
   display: inline-block;
   margin-left: 20px;
}

.double-quote.white-quote::before {
   background-image: url(../images/white-quote.png);
}

.double-quote.white-quote::after {
   background-image: url(../images/white-quote-2.png);
}

/* doubele quote section end */
/* testimonial section start*/

.swiper-slide {
   height: auto;
}

.testimonial .testimonial-swiper,
.testimonial .yelp-testimonial {
   padding-top: 36px;
}

.testimonial .common-wrap {
   position: relative;
}

.slider-wrapper {
   position: relative;
}

.testimonial .swiper-button-prev,
.testimonial .swiper-button-next,
.testimonial .swiper-button-prev-yelp-testimonial,
.testimonial .swiper-button-next-yelp-testimonial {
   background-image: url(../images/testimonial-left-arrow.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   width: 40px;
   height: 36px;
   border-radius: 4px;
   margin-top: 0;
   position: static;
   display: block;
   cursor: pointer;
}

.swiper-button-wrapper {
   gap: 6px;
   position: static;
   align-self: flex-start;
}

.testimonial .swiper-button-prev {
   left: auto;
   right: 60px;
}

.testimonial .swiper-button-next,
.testimonial .swiper-button-next-yelp-testimonial {
   background-image: url(../images/testimonial-right-arrow.png);
}

.testimonial .swiper-button-prev::after,
.testimonial .swiper-button-next::after,
.testimonial .swiper-button-prev-yelp-testimonial::after,
.testimonial .swiper-button-next-yelp-testimonial::after {
   display: none;
}

.testimonial .image-wrap img {
   width: 24px;
}

.testimonial-item {
   padding: 20px;
   border: 1px solid #EDEBE1;
   border-radius: 8px;
}

.testimonial-content {
   flex-grow: 1;
}

.testimonial-content p {
   font-size: 15px;
   line-height: 26.25px;
   position: relative;
   padding-left: 20px;
   display: inline-block;
}

.testimonial-item .author-img {
   --size: 48px;
   max-width: var(--size);
   width: 100%;
   height: var(--size);
   border-radius: 50%;
   overflow: hidden;
}

.testimonial-author {
   gap: 12px;
   padding-left: 20px;
}

.testimonial-author h5 {
   font-size: 14px;
   line-height: 22.4px;
   color: var(--color-text);
}

.author-img img {
   height: 100%;
}

.testimonial .image-wrap img {
   margin-bottom: 8px;
}

.testimonials-page .testimonial h2 {
   color: #333333;
   font-size: 22px;
   line-height: 26.4px;
}

.testimonial .testimonial-author .review-img {
   width: 62px;
}

.testimonials-page .review-testimonial {
   padding-top: 20px;
}

.testimonials-page .testimonials {
   padding-top: 75px;
   padding-bottom: 58px;
}

.testimonials-page .testimonial-item {
   gap: 10px;
}

/* testimonial section start*/
/* Footer section start */
.footer-top {
   padding: 20px 0;
   background-color: var(--color-primary-light);
}

.footer-top img {
   width: 32px;
   height: 32px;
   vertical-align: middle;
   margin-right: 6px;
}

.footer-top h4 {
   color: var(--color-white);
}

.footer-top a {
   color: var(--color-secondary-light);
   text-decoration: underline;
}

.footer-middle {
   --space-y: 32px;
   --space-b: 32px;
   background-color: var(--section-bg);
   padding: var(--space-y) 0 var(--space-b);
}

.footer-middle h5 {
   font-weight: 800;
}

.footer-logo-wrap {
   gap: 17px;
}

.footer-logo-wrap .d-flex.flex-col.gap-24 {
   gap: 20px;
}

.footer-logo-wrap a {
   color: var(--color-text);
   font-size: 15px;
}

.footer-logo-wrap .email {
   text-decoration: underline;
}

.footer-links a {
   font-size: 16px;
   line-height: 40px;
   color: var(--color-text);
   transition: all linear .3s;
   display: inline;
}

.footer-links a:hover {
   color: var(--color-primary-extra-light);
}

.footer-form form input {
   border: none;
   background-color: var(--color-white);
   font-size: 15px;
   line-height: 18px;
   padding: 12px;
}

.footer-form .btn {
   padding-block: 12px;
   background-color: var(--color-secondary-light);
   color: #115740;
}

.footer-bottom {
   padding: 24px 0;
   background-color: var(--section-bg);
   border-top: 1px solid #E6E7DA;
}

.footer-bottom p,
.footer-bottom a {
   font-size: 16px;
   line-height: 19.2px;
   color: var(--color-text);
}

/* Footer section start */
/* let connect section start */
.let-connect {
   --support-box-container-width: 1060px;
   background-color: var(--section-bg);
}

.let-connect {
   --support-box-container-width: 1060px;
   background-color: var(--section-bg);
}

.support-box-section.let-connect .support-text {
   margin-bottom: 50px;
}

.about-shay .let-connect .btn {
   border: 1px solid var(--color-primary-extra-light);
}

.about-shay .let-connect .btn.btn-border:hover {
   background-color: var(--color-primary);
}

/* let connect section start */
/* author info section start */
.about-shay-wright .author-img {
   max-width: 114px;
   width: 100%;
   flex-shrink: 0;
}

.about-shay-wright .author-info {
   flex-grow: 1;
   gap: 16px;
}

.about-shay-wright .author-info img {
   max-width: 240px;
}

.about-shay-wright .author-img {
   overflow: hidden;
   border-radius: 4px;
}

.author-title * {
   font-size: 16px;
   line-height: 25.6px;
   color: #46432c;
}

.author-info .author-name {
   color: var(--color-primary);
}

.author-title a:last-child {
   color: var(--color-primary-extra-light);
   text-decoration: underline;
}

/* author info section start */
/* about shay hero section start */
.hero-section.about-shay-hero {
   background-image: url(../images/about-shay-bg.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

.calc-spacing {
   --width: 236px;
   --gap: 20px;
}

.hero-section.about-shay-hero .title,
.hero-section.about-shay-hero .content {
   color: var(--color-white);
}

.hero-section.about-shay-hero .content-wraper {
   max-width: 100%;
}

.ask-expert .hero-section .content span {
   color: var(--color-primary-extra-light);
}

/* about shay hero section end */
/* Mortgages style start  */
.mortgages .item {
   --space-y: 12px;
   --space-x: 12px;
   background: no-repeat;
   background-position: top;
   background-size: cover;
   padding: var(--space-y) var(--space-x);
   text-align: center;
   color: var(--color-white);
   min-height: 360px;
}

.mortgages .item:first-child p {
   margin-bottom: 26px;
}

.item h3 {
   color: var(--color-white);
   margin-bottom: 10px;
}

.item p {
   margin-bottom: 4px;
}

.item a {
   width: 100%;
   font-size: 14px;
   line-height: 18px;
   font-weight: 600;
}

.explore {
   background-color: #777777;
   color: var(--color-white);
}

/* Mortgages style start  */
/* calculetor section style start */
.calculator-container {
   border: 1px solid #EDEBE1;
   border-radius: 8px;
   width: 100%;
   padding-top: 20px;
}

.calculator-header {
   padding-left: 60px;
}

.calculator-header h2 {
   margin-bottom: 10px;
   font-weight: 800;
}

.calculator-body .tabs {
   background-color: var(--color-white);
}

.calculator-body .tab {
   padding: 14px 20px;
   background: #EBE9DE;
   border: none;
   cursor: pointer;
   font-size: 14px;
   font-weight: bold;
   border-radius: 4px 4px 0 0;
   min-width: 143px;
   color: var(--color-brich);
   margin-top: 30px;
}

.calculator-header {
   text-align: center;
   padding-inline: 12px;
}

.tab.active {
   background: var(--section-bg);
}

.calculator-form {
   background-color: var(--section-bg);
   width: 100%;
}

.calculator-form span {
   width: 100%;
   height: 1px;
   background-color: #DDDDDD;
   order: 2;
}

.calculator-form .form-inner {
   order: 3;
   width: 100%;
}

.calculator-form .output {
   order: 1;
   width: 100%;
}

.output-value {
   color: var(--color-primary);
   font-weight: bold;
   font-size: 32px;
   line-height: 36px;
}

.form-inner {
   max-width: 718px;
}

.calculator-form {
   flex-direction: column;
   padding-block: 20px;
   padding-right: 12px;
   padding-left: 12px;
}

.calculator-form.active {
   display: flex;
}

.input-group label {
   margin-bottom: 6px;
   display: block;
}

.input-group input {
   width: 100%;
   padding: 10px;
   border-radius: 6px;
   border: 1px solid #e0e0e0;
   font-size: 16px;
   height: 60px;
   background-color: var(--color-white);
}

.input-group {
   width: 100%;
   max-width: 100%;
}

.input-group label {
   font-size: 18px;
   line-height: 21.6px;
}

.mortgage-calculator-page .calculator-section {
   padding-top: var(--space-y);
}

/* calculetor section style end */
/* shay wright section style start */
.shay-wright-section .common-wrap {
   gap: 40px;
}

.shay-wright-section {
   padding-bottom: 47px;
}

.about-shay-wright {
   gap: 24px;
}

/* author info section start */
.author-info-section .author-img {
   --size: 100px;
   width: var(--size);
   max-width: var(--size);
   height: var(--size);
   border-radius: 50%;
   border: 10px solid var(--color-white);
}

.author-info-section .about-shay-wright {
   gap: 30px;
}

.author-info-section .about-shay-wright .author-info {
   gap: 6px;
}

.author-info-section .author-info .author-title span {
   line-height: 21px;
}

.faq-item {
   border-bottom: 1px solid #48432c;
   padding-right: 28px;
   padding-bottom: 22px;
   padding-top: 26px;
}

.faq-item:first-child {
   padding-top: 0;
}

.faq-button {
   background: none;
   border: none;
   font-size: 17px;
   line-height: 20.4px;
   font-weight: 800;
   cursor: pointer;
   width: 100%;
   text-align: left;
   padding: 0;
   color: #48432c;
   letter-spacing: 0.3px;
   position: relative;
}

.faq-button::after {
   content: "+";
   font-size: 20px;
   color: var(--color-primary);
   transition: transform 0.3s ease, opacity 0.3s ease;
   font-weight: 400;
   margin-top: -3px;
}

.faq-item.active .faq-button::after {
   content: "−";
}

.faq-content {
   display: none;
   color: #48432c;
   padding-top: 24px;
}

.faq-item .faq-content p {
   letter-spacing: -0.16px;
   line-height: 23.8px;
}

.faq-content p+p {
   margin-top: 24px;
}

.bank-statement-page .section-header-wrap {
   max-width: 380px;
   margin: 0 auto;
}

.bank-statement-page .loan-wrap {
   max-width: 700px;
   margin: 0 auto;
}

.bank-statement-page .common-faq-section {
   background-color: #F7F6F2;
}

.find-loan-officer .hero-section,
.get-preapproved .hero-section {
   background-color: transparent;
}

/* shay wright section style end */
/* common faq section style start */
.common-faq-section {
   background-color: #F7F6F2;
}

.common-faq>* {
   width: 100%;
}

.common-faq-wrap h2 {
   color: #007c5d;
   text-align: center;
   font-size: 26px;
   line-height: 31.2px;
   margin-bottom: 20px;
   font-weight: 700;
}

.common-faq-wrap .subtitle {
   text-align: center;
   color: #48432c;
   font-size: 18px;
   line-height: 21.6px;
   margin-bottom: 24px;
}

.common-faq-item {
   background: #FFFFFF;
   border-radius: 8px;
   border-radius: 8px;
   padding-block: 20px;
   padding-left: 36px;
   padding-right: 16px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   cursor: pointer;
   transition: all 0.3s ease;
}

.common-faq-item:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.question h5 {
   font-size: 18px;
   line-height: 21.6px;
   color: #48432c;
   font-weight: 400;
   margin: 0;
   position: relative;
}

.question h5::after {
   content: "";
   width: 10px;
   height: 8px;
   clip-path: polygon(0 0, 50% 100%, 100% 0);
   background-color: #333333;
   transition: 0.7s ease-in-out;
   flex-shrink: 0;
}

.common-faq-wrap .rotate {
   transform: rotate(180deg);
}

.answer {
   margin-top: 16px;
   margin-left: 10px;
   font-size: 14px;
   color: #4a4a4a;
   display: none;
   cursor: initial;
}

.answer p {
   font-size: 16px;
}

.answer p:not(:last-child) {
   margin-bottom: 10px;
}

.answer ul {
   list-style: disc;
   list-style-position: inside;
   padding-left: 20px;
}

.common-faq-item.accordion-active .question h5::after {
   transform: rotate(180deg);
}

.about-us .quote-section {
   padding: 0;
}

.about-us .quote-section .common-wrap {
   padding: 0;
}

.about-us .quote-content-wrapper {
   padding-inline: 0;
   background: none;
   color: var(--color-text);
   border-top: 1px solid #DDDDDD;
   border-bottom: 1px solid #DDDDDD;
   border-radius: 0;
}

.about-us-page .quote-content-wrapper h4 {
   font-style: italic;
   font-weight: 700;
}

.quote-content-wrapper {
   background: url(../images/home-financing-cta-bg.jpg) no-repeat center/cover;
   border-radius: 8px;
   color: var(--color-white);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 20px;
   padding: 30px 60px;
   padding-right: 40px;
   padding: 20px;
}

.quote-content-wrapper .double-quote::before,
.quote-content-wrapper .double-quote::after {
   width: 20px;
   height: 16px;
}

.quote-content__image {
   max-width: 60px;
   flex-shrink: 0;
   border-radius: 50%;
}

.quote-content__content {
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1;
   color: var(--color-white);
}

.quote-content__content h4 {
   font-size: 24px;
   line-height: 30px;
   font-weight: 700;
   color: var(--color-white);
}

/* quote section end */
/* form section style start */
.form-section .common-wrap {
   max-width: 824px;
}

.send-referral .form-section .common-wrap {
   max-width: 825px;
}

.send-referral .common-form {
   --space: 34px 42px 25px;
   padding-inline: 28px;
}

.send-referral .common-form h3 {
   line-height: 30px;
   font-size: 28px;
}

.send-referral .btn {
   border-radius: 10px;
   padding: 12px;
}

.common-form {
   --space: 12px;
   padding: var(--space);
   border: 1px solid #EDEBE1;
   border-radius: 12px;
   background-color: var(--color-white);
}

.common-form h3 {
   color: var(--color-primary);
   line-height: 26px;
   font-size: 28px;
}

.form-item {
   gap: 4px;
}

.form-item .selectric {
   width: 100%;
}

.form-item.comment {
   margin-top: 14px;
}

.form-item.form-submit .btn {
   padding-block: 12px;
   border-radius: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.form-item.form-submit .btn svg {
   width: 20px;
}

.form-full-width {
   grid-column: 1 / -1;
}

.form-submit img {
   width: 30px;
}

/* contact us section start */
.contact-us .common-form {
   flex-grow: 1;
}

.contact-us .common-form {
   width: 100%;
}

.contact-us .contact-info {
   width: 100%;
}

.contact-info {
   --space: 12px;
   padding: var(--space);
   border: 1px solid #EDEBE1;
   border-radius: 8px;
}

.contact-info svg {
   width: 20px;
   height: 24px;
   object-fit: contain;
   stroke: var(--color-primary);
}

.contact-info h3 {
   color: var(--color-primary);
}

.contact-info .contact-item:not(:last-child) a {
   color: var(--color-text);
}

/* contact us section end */
/* form section style end */
/* big card section start */
.card-wrapper {
   gap: 40px;
}

.card.horijontal-card {
   flex-direction: column-reverse;
   gap: 20px;
}

.card.horijontal-card:nth-child(n+3):not(:last-child) {
   padding-bottom: 40px;
   border-bottom: 1px solid #D5D5D5;
}

.card-content {
   gap: 16px;
}

.card-content a {
   text-decoration: underline;
}

.card-img {
   max-width: 522px;
   width: 100%;
   border-radius: 8px;
   overflow: hidden;
}

.card-title-wrap {
   gap: 12px;
   margin-top: -6px;
}

.card-title-wrap .card-title-img {
   --size: 40px;
   width: var(--size);
   height: var(--size);
   display: flex;
}

.card-body {
   width: 100%;
}

.horijontal-card .card-body {
   width: 100%;
}

.card-body ul {
   list-style: disc;
   list-style-position: inside;
   color: #48432c;
   font-size: 17px;
   line-height: 27px;
}

.mortgage-card .card-body ul {
   font-size: 16px;
   line-height: 19.2px;
}

.card-body p:has(+ p) {
   margin-bottom: 12px;
}

.card-body p:has(+ ul) {
   margin-bottom: 24px;
}

/* big card section end */
/* fha mortgages page  start*/
.basic-loan-item {
   padding: 16px;
   border: 1px solid #F5F5F5;
}

.basic-loan-item .loan-things {
   --size: 40px;
   width: var(--size);
   height: var(--size);
   font-size: 18px;
   line-height: 21.6px;
   font-weight: 700;
   color: #007255;
   flex-shrink: 0;
   background-color: #f0f7f1;
}

.basic-loan-item .loan-content h4 {
   margin-bottom: 10px;
   color: var(--color-text);
}

/* fha mortgages page  end*/
/* benefit mortgage section start */
.benefit-mortgage {
   background-image: url(../images/neighborhood-mortgages-bg.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

.benefit-mortgage .basic-loan-details,
.benefit-mortgage .basic-loan-details h2 {
   color: var(--color-white);
}

.benefit-mortgage .basic-loan-details h2 {
   line-height: 31.2px;
}

.benefit-mortgage .basic-loan-item .loan-content h4,
.benefit-mortgage .basic-loan-item {
   color: var(--color-white);
   font-size: 18px;
   line-height: 21.6px;
}

.benefit-mortgage .basic-loan-item {
   border: 0;
   background-color: var(--color-primary-dark);
   border-radius: 24px;
}

.benefit-mortgage .basic-loan-item .loan-things {
   --size: auto;
}

/* benefit mortgage section end */
/* ========================= loan parameters style start ================== */
.parameters-wrap .border {
   width: 100%;
   height: 1px;
   background-color: #EDEBE1;
}

.parameters-item p {
   margin-bottom: 14px;
}

.parameters-item {
   flex: 1;
}

.parameters {
   gap: 10px;
}

.parameters-links {
   font-size: 14px;
   flex-direction: row;
   row-gap: 0px;
}

.parameters-links ul li {
   list-style-type: disc;
}

.parameters-links ul,
ol {
   list-style-position: inside;
}

.parameters-item span {
   font-size: 18px;
   line-height: 21.6px;
   font-weight: 400;
   font-style: italic;
   color: var(--color-text);
}

/* ========================= loan parameters style end ================== */
/* =============== FHA loan rate style start ================= */
.mortgage-rates-inner {
   max-width: 527px;
   width: 100%;
   margin: 0 auto;
}

.exceptional-title {
   padding-top: 24px;
   padding-inline: 16px;
   margin-bottom: 24px;
}

.fha-loan .exceptional-title {
   padding-inline: 0px;
}

.exceptional-title h2 {
   margin-bottom: 5px;
}

.rate-box {
   border: 1px solid #EDEBE1;
   border-radius: 8px;
   overflow: hidden;
}

.rate-box-head {
   background-color: var(--color-primary);
}

.mortgage-rates .rate-box .rate-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
}

.rate-col h5 {
   color: white;
   font-size: 14px;
}

.rate-col p {
   font-size: 12px;
}

.rate-col {
   padding-block: 10px;
   padding-inline: 4px;
   border-right: 1px solid #EDEBE1;
}

.rate-col:not(:first-child) h5 {
   text-align: center;
}

.rate-box-body .rate-row {
   transition: all .3s linear;
}

.rate-box-body .rate-row:nth-child(even) {
   background-color: var(--color-white);
}

.rate-box-body .rate-row:hover {
   background-color: var(--color-white);
}

.rate-box-body .rate-row:nth-child(even):hover {
   background-color: var(--section-bg);
}

.rate-col:last-child {
   border: 0;
}

.rate-box-body {
   background-color: var(--section-bg);
}

.mortgage-rate-main-content .rate-box {
   border: none;
   border-radius: 0;
}

.mortgage-rate-main-content .mortgage-rates {
   border: 1px solid #EDEBE1;
   border-radius: 8px;
   margin-bottom: 32px;
}

.mortgage-rate-main-content .let-connect {
   background-image: url(../images/custom-interest-rate-quote.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   color: var(--color-white);
   padding-top: 24px;
   padding-bottom: 24px;
   padding-inline: 24px;
   border-radius: 8px;
   margin-bottom: 40px;
}

.mortgage-rate-main-content .support-box {
   max-width: 490px;
   margin: 0 auto;
}

.mortgage-rate-main-content .support-box h2 {
   color: var(--color-white);
}

.mortgage-rate-main-content .support-box p.support-text {
   font-size: 16px;
}

.mortgage-rate-main-content p.addvertised {
   font-size: 14px;
}

/* =============== FHA loan rate style end ================= */
/* ================ down-pament-rate style start ================ */
.down-pament-rates .rate-box .rate-row {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}

.down-pament-rates .rate-col {
   justify-content: start;
   padding-left: 30px;
}

/* ================ down-pament-rate style end ================ */
/* blog wrap common section start */
.blog-item {
   border-radius: 8px;
   border: 1px solid #EEECE3;
   overflow: hidden;
}

.blog-item-thumb {
   height: 200px;
}

.blog-item-thumb img {
   height: 100%;
}

.blog-item-content {
   padding: 32px 24px;
   flex-grow: 1;
}

.blog-item-content h5 a {
   color: var(--color-brich);
}

.blog-item-content p {
   flex-grow: 1;
}

.arrow-icon {
   display: inline-block;
   width: 10px;
   height: 8px;
   clip-path: polygon(0 0, 50% 100%, 100% 0);
   background-color: var(--color-primary-extra-light);
   margin-left: 10px;
}

/* blog wrap common section end */
/* how to apply section start */
.how-to-apply-page main .common-wrap {
   max-width: 844px;
}

.how-to-apply-page .how-to-apply {
   padding: 0;
}

.how-to-apply-page .author-title .author-name {
   color: var(--color-brich);
   text-transform: uppercase;
   font-size: 19px;
   line-height: normal;
}

.how-to-apply-page .author-title span {
   color: #a39866;
}

.how-to-apply-page .about-shay-wright {
   gap: 27px;
}

.how-to-apply-page .about-shay-wright .author-info {
   gap: 6px;
}

.how-to-apply-page .author-info p {
   line-height: normal;
}

.how-to-apply-page .item-center {
   gap: 10px;
}

section.author-info-wrapper.d-flex.flex-col.gap-10 {
   padding: 30px 0;
}

.how-to-apply ul li {
   position: relative;
   padding-left: 30px;
}

.how-to-apply ul li::before {
   content: "";
   position: absolute;
   width: 4px;
   height: 4px;
   background-color: var(--color-text);
   left: 0;
   top: 10px;
}

.how-to-apply .d-flex.flex-col.gap-20 {
   gap: 16px;
}

.pagination a {
   color: var(--color-text);
}

.author-info-wrapper {
   border: 1px solid #EDEBE1;
   border-width: 1px 0;
}

.author-info-wrapper .about-shay-wright {
   max-width: 100%;
}

.author-info-wrapper .about-shay-wright {
   padding-top: 0;
}

/* how to apply section end */
/* mortgage section start */
.mortgage-card {
   padding: 16px;
   padding-top: 40px;
   border-radius: 8px;
   border: 1px solid #EDEBE1;
}

.mortgage-card .card-content {
   gap: 24px;
}

.mortgage-card .card-body {
   flex-grow: 1;
}

.mortgage-card .card-body p:has(+ ul) {
   margin-bottom: 15px;
}

.mortgage-card .btn {
   text-decoration: none;
   padding: 14px;
}

.mortgage-card .card-body ul {
   list-style: none;
   padding-left: 15px;
}

.mortgage-card .card-body ul li {
   position: relative;
   padding-left: 16px;
}

.mortgage-card .card-body ul li:not(:last-child) {
   margin-bottom: 12px;
}

.mortgage-card .card-body ul li::before {
   position: absolute;
   content: "";
   display: block;
   width: 12px;
   height: 12px;
   background-image: url(../images/yellow-dot.png);
   background-repeat: no-repeat;
   left: -6px;
   top: 6px;
}

/* mortgage section end */
/* rate quote purchase page start */
.rate-quote-purchase, .rate-quote-finance {
   --form-section-mt: 70px;
}

/* rate quote purchase page end */
/* zero-down-mortgages start */
.mortgage-card-section .border span {
   display: block;
   width: 22px;
   height: 6px;
   background-color: var(--color-secondary);
   margin-top: 5px;
   margin-bottom: 30px;
}

.mortgage-rate-main-content .rate-col h6 {
   font-size: 12px;
   line-height: 16px;
   font-weight: 600;
}

.mortgage-rate-main-content .rate-col span {
   font-size: 10px;
   line-height: 15px;
   display: block;
}

/* zero-down-mortgages end */
/* loan-officers-texas start */
.loan-officers-texas .hero-section {
   background-color: transparent;
}

.loan-officers-texas .blog-item-content {
   background-color: var(--color-primary);
   color: var(--color-white);
   padding: 20px;
}

.loan-officers-texas .blog-item-content h6 {
   font-size: 14px;
   line-height: 19.6px;
}

.loan-officers-texas .blog-item-content .author-name {
   font-size: 14px;
   line-height: 19.6px;
}

.loan-officers-texas .blog-item-content p {
   font-size: 10px;
   line-height: 12px;
   margin-top: 13px;
   margin-bottom: 34px;
}

.loan-officers-texas .blog-item-content a {
   font-size: 13px;
   line-height: 16px;
   color: var(--color-white);
}

.loan-officers-texas .blog-item-content .contact {
   font-size: 12px;
   line-height: 16px;
   font-weight: 800;
}

.loan-officers-texas .blog-item-content .shay-bio {
   margin-top: 20px;
}

.loan-officers-texas .blog-item-content .shay-bio a {
   font-size: 12px;
   line-height: 14px;
   padding: 10px;
   background-color: var(--color-primary-dark);
   border-radius: 10px;
}

.loan-officers-texas .blog-item {
   border: none;
}

.loan-officers-texas .blog-item-thumb {
   height: auto;
}

.rate-quote .hero-section {
   background-color: transparent;
}

.rate-quote .hero-section .content {
   max-width: 340px;
   margin: 0 auto;
}

.popup-wrapper {
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 999;
   display: none;
   height: 100%;
   padding: 0;
   transform: translate(-50%, -50%);
   width: 100%;
   background: #00000095;
   padding-top: 100px;
}

.loan-officers .popup-wrap {
   grid-template-columns: repeat(1, 1fr);
   padding-inline: 24px;
   padding-top: 50px;
   padding-bottom: 30px;
   max-width: 856px;
   width: 100%;
   margin: 0 auto;
   background-color: var(--color-white);
   position: relative;
   border: 2px solid var(--color-primary);
   border-radius: 12px;
}

.popup-wrapper .common-wrap {
   max-width: 856px;
}

.loan-officers .popup-wrap .close-icon {
   position: absolute;
   top: 11px;
   right: 17px;
}

.loan-officers .popup-wrap h6 {
   font-size: 16px;
   font-weight: 800;
   line-height: 19.2px;
   margin-bottom: 20px;
}

.loan-officers .popup-wrap p {
   font-size: 15px;
   line-height: 21px;
   margin-bottom: 24px;
}

.meet-shay-wright .btn-wrapper .btn-white {
   border: 1px solid var(--color-primary);
}

.btn-wrapper .btn:hover {
   color: #fff;
}

.let-connect .btn-wrapper .btn.btn-primary:hover {
   color: var(--color-primary);
}

/* loan-officers-texas end */
/* selectric button style */
.selectric-item {
   position: relative;
}

.selectric-item .arrow {
   position: absolute;
   width: 12px;
   height: 8px;
   clip-path: polygon(0 0, 50% 100%, 100% 0);
   background-color: #333333;
   transition: 0.7s ease-in-out;
   top: 50%;
   right: 24px;
   transform: translateY(-50%);
}

.find-loan-officer .selectric {
   background-color: var(--color-secondary);
   color: var(--color-brich);
   text-align: start;
   font-size: 17px;
   line-height: 20.4px;
   font-weight: var(--fw-semibold);
   padding: 22px 24px;
   padding-right: 46px;
   border-radius: 4px;
   min-width: auto;
   text-wrap: nowrap;
   -webkit-transition: all .3s linear;
   -o-transition: all .3s linear;
   transition: all .3s linear;
   cursor: pointer;
   border: 1px solid transparent;
   display: flex;
   align-items: center;
   gap: 16px;
}

.find-loan-officer .selectric:hover {
   background-color: transparent;
   border-color: var(--color-secondary);
}

.selectric:focus+.arrow {
   transform: rotate(180deg);
}

/* selectric button end */
/* basic loan section start */
.section-header h2 {
   line-height: 28.6px;
}

.section-header p {
   font-size: 17px;
   line-height: 20.4px;
   font-weight: 700;
}

.benefit-mortgage .section-header p {
   font-weight: 400;
}

/* basic loan section end */
/* how to apply page start */
.how-to-apply-page .common-wrap {
   max-width: 824px;
}

/* how to apply page end */
.rate-quote-purchase .hero-section, .rate-quote-finance .hero-section {
   --space-b: 0px;
   padding-bottom: calc(var(--space-b) + var(--form-section-mt));
   background-image: url(../images/interest-rate-quote-bg.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   color: var(--color-white);
}

.rate-quote-purchase .hero-secondary .content-wraper .sub-title, .rate-quote-finance .hero-secondary .content-wraper .sub-title {
   color: var(--color-white);
}

.rate-quote-purchase .hero-secondary .content-wraper .title, .rate-quote-finance .hero-secondary .content-wraper .title {
   color: var(--color-white);
}

.rate-quote-purchase .common-form, .rate-quote-finance .common-form {
   margin-top: calc(var(--form-section-mt) * -1);
}

span.arrow-icon {
   transform: rotate(32deg);
}

.rate-quote-page .hero-section {
   background-color: #ffffff;
}

.rate-quote-page .btn-white {
   border-color: var(--color-primary);
}

.rate-quote-page .btn-white:hover {
   background-color: var(--color-secondary);
   color: var(--color-brich);
}

/* rate quote finance start */
.rate-quote-finance .section-title h3 {
   color: var(--color-primary);
}


.rate-quote-finance .form-section .common-wrap {
   max-width: 760px;
}

/* rate quote finance end */
.footer-support-box-wrap {
   padding-top: 50px;
}

.footer-support-box {
   padding-top: 108px;
}

.footer-support-box .support-box {
   max-width: 600px;
   margin: 0 auto;
}

.footer-form-section {
   padding-top: 30px;
}

.footer-form-section .common-form {
   padding-top: 8px;
}

.footer-form-section textarea {
   resize: none;
   height: 135px;
}

.get-quote-btn .btn:hover {
   color: #fff;
}

header {
   position: relative;
   width: 100%;
   transition: all 0.3s ease;
}

.nav-wrap.sticky {
   position: fixed;
   top: 0;
   left: 0;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   z-index: 9999;
   width: 100%;
}

.btn.btn-white:hover {
   background-color: var(--color-primary);
   color: var(--color-white);
}

a.btn.explore:hover {
   border-color: #777777;
}

.form-item.form-submit .btn:hover {
   background-color: var(--color-primary);
   color: #fff;
}

/* responsive  */
@media only screen and (min-width:426px) {
   .benefit-mortgage .basic-loan-card {
      --grid-column: 2;
   }

   .footer-middle .common-wrap {
      --grid-column: 3;
   }

   .footer-middle .footer-links {
      grid-column: span 2;
   }

   .footer-bottom .common-wrap {
      --grid-column: 3;
   }

   .footer-bottom p {
      text-align: left;
   }

   .about-shay-wright-page .hero-section .media {
      height: 324px;
   }
}

@media only screen and (min-width:460px) {
   .blog-wrap .common-wrap {
      --grid-column: 2;
   }
}


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

   /* varibale */
   :root {
      --fs-h1: 32px;
      --lh-h1: 38px;
      --fs-h2: 22px;
      --lh-h2: 28px;
      --fs-h3: 20px;
      --lh-h3: 26px;
      --fs-h4: 18px;
      --lh-h4: 22px;
      --fs-h5: 16px;
      --lh-h5: 20px;
      --fs-label: 15px;
      --lh-label: 18px;
      --btn-font-size: 16px;
      --btn-line-height: 20px;
      --btn-padding: 16px;
      --btn-min-width: 150px;
   }

   /* body typorgraphy */

   body {
      --body-text: 16px;
      --body-line-height: 22.4px;
   }

   section,
   main,
   footer {
      --space-y: 48px;
      --space-b: 48px;
   }

   /* header section start */
   .header-wrap {
      padding: 24px 0 30px;
   }

   .header-wrap .site-logo {
      display: block;
   }

   .header-right .btn {
      font-size: 17px;
      line-height: 14.5px;
   }

   /* header section end */
   /* navigation section style start */
   .nav-wrap ul {
      display: flex;
   }

   .nav-wrap ul li ul {
      top: 54px;
   }

   .header-wrap .header-content {
      justify-content: space-between;
   }

   .nav-wrap .site-logo {
      display: none;
   }

   .nav-wrap .hamburger-icon {
      display: none;
   }

   .nav-wrap ul a {
      padding-block: 13px;
   }

   .nav-wrap ul li ul.dropdown {
      background-color: #39bb5c;
      max-width: 254px;
      width: 254px;
      position: absolute;
      top: 46px;
      left: 0;
      right: 0;
      display: none;
      padding-left: 0;
      transition: all .3s ease-in-out;
      border-radius: 0 0 6px 6px;
      overflow: hidden;
   }

   .navigation-wraper {
      position: static;
      padding: 0;
      height: auto;
      display: block;
      width: 100%;
      transform: translateX(0);
      overflow: visible;
   }

   .nav-wrap .close-btn {
      display: none;
   }

   .navigation-wraper ul li ul li a {
      font-size: 19px;
      line-height: 22.8px;
      padding: 20px;
      font-weight: normal;
   }

   .navigation-wraper>ul>li:hover ul {
      display: block;
   }

   /* navigation section style end */
   /* common hero section style start */
   .hero-section .common-wrap {
      flex-direction: row;
   }

   .hero-section .content-wraper {
      max-width: 540px;
      width: 100%;
      padding-top: 16px;
   }

   .hero-section.hero-secondary .content-wraper {
      max-width: 442px;
   }

   .loan-officers-page .hero-section.hero-secondary .content-wraper {
      max-width: 530px;
   }

   .loan-officers-page .loan-officers-texas {
      padding-top: 0;
   }

   .hero-section.hero-center .content-wraper {
      max-width: 510px;
   }

   .get-preapproved .hero-section.hero-center .content-wraper {
      max-width: 555px;
   }

   .hero-section.learning-center .content-wraper {
      max-width: 720px;
   }

   .hero-section.double-img-hero .content-wraper {
      padding-top: 64px;
      max-width: 605px;
   }

   .hero-section .media {
      max-width: 676px;
      width: 100%;
   }

   .hero-section.hero-secondary .media {
      max-width: 590px;
   }

   .hero-section.double-img-hero .media {
      max-width: 586px;
   }

   .content-wraper .sub-title {
      margin-bottom: 8px;
   }

   .content-wraper .title {
      margin-bottom: 24px;
   }

   .double-img-hero .content-wraper .title {
      font-size: 36px;
      line-height: 43.2px;
      margin-bottom: 38px;
   }

   .content-wraper .btn-wraper {
      margin-top: 64px;
      gap: 12px;
   }

   .hero-secondary .content-wraper .btn-wraper {
      margin-top: 40px;
   }

   .double-img-hero .content-wraper .btn-wraper {
      margin-top: 54px;
      gap: 12px;
   }

   .content-wraper .btn-wraper .btn {
      min-width: 196px;
   }

   .find-loan-officer .selectric-item .btn {
      text-align: start;
      min-width: 242px;
      font-size: 16px;
   }

   .double-img-hero .content-wraper .btn-wraper .btn {
      min-width: 232px;
   }

   .content-wraper .sub-title {
      font-size: 22px;
      margin-bottom: 10px;
   }

   .media img {
      border-top-left-radius: 60px;
      border-bottom-right-radius: 60px;
      border-radius: 0;
   }

   .hero-section.hero-secondary .title,
   .how-to-apply-page h1,
   .about-shay-page .hero-section .title {
      --fs-h1: 36px;
      --lh-h1: 43.2px;
      font-weight: 700;
   }

   .buy-before-you-sell .hero-secondary .title {
      padding-right: 20px;
   }

   .buy-before-you-sell .basic-loan {
      padding: 92px 0 54px;
   }

   .hero-secondary .content-wraper .sub-title {
      font-size: 20px;
      line-height: 24px;
      margin-bottom: 10px;
   }

   .hero-section .content-wraper .content {
      width: 90%;
   }

   .hero-section.hero-secondary .content-wraper .content {
      width: 100%;
   }

   .fha-loan-page .hero-secondary .content-wraper .content {
      padding-right: 26px;
   }

   .hero-secondary {
      padding-top: 55px;
      padding-bottom: 25px;
   }

   /* common hero section style end */
   /* ====== Mortgages style start ====== */
   .mortgages .item {
      --space-y: 18px;
      --space-x: 24px;
   }

   .mortgages .item h3 {
      text-align: center;
   }

   .item a {
      font-size: 16px;
      line-height: 20px;
   }

   .mortgage-rate-main-content .let-connect {
      padding-top: 48px;
      padding-bottom: 30px;
      padding-inline: 24px;
   }

   /* ====== Mortgages style end ====== */
   /* cta common section style start */
   .get-quote-inner {
      --space-y: 32px;
      --space-x: 26px;
      flex-direction: row;
   }

   .get-quote-content {
      flex-direction: row;
   }

   .get-quote-content-inner {
      align-items: start;
      text-align: left;
   }

   /* cta common section style end */
   /* testimonial section styel stat */
   .testimonial-item {
      padding: 30px;
      height: 100%;
   }

   .swiper-button-wrapper {
      position: absolute;
      right: 0;
      top: 25px;
      right: 10px;
   }

   /* testimonial section style end */
   /* calculator section style start */
   .calculator-container {
      padding-top: 50px;
   }

   .calculator-header {
      text-align: start;
      padding-left: 60px;
      padding-right: 24px;
   }

   .calculator-header h2 {
      margin-bottom: 10px;
   }

   .tabs {
      padding-right: 24px;
      padding-left: 60px;
   }

   .calculator-body .tab {
      padding: 16px 24px;
      font-size: 16px;
   }

   .calculator-form {
      flex-direction: row;
      padding-block: 32px;
      padding-right: 24px;
      padding-left: 60px;
   }

   .calculator-form {
      padding-bottom: 40px;
   }

   .calculator-form .form-inner {
      order: 1;
      width: 100%;
      gap: 17px;
      row-gap: 52px;

   }

   .calculator-form .output {
      order: 3;
      width: 100%;
      padding-left: 80px;
      flex: 1;
      padding-top: 10px;
   }

   .calculator-form span {
      margin-top: 20px;
      width: 1px;
      height: auto;
      order: 2;
   }

   .input-group label {
      margin-bottom: 6px;
   }

   .output-value {
      font-size: 45px;
      line-height: 52.8px;
      margin-top: 9px;
   }

   .input-group {
      width: 210px;
      max-width: 100%;
   }

   .calculate-btn {
      min-width: 208px;
      font-size: 20px;
   }

   /* calculator section style end */
   /* shay wright section start */
   /* about shay */
   .author-info-section {
      --space-y: 70px;
   }

   .author-info-section .common-wrap {
      flex-direction: row;
      gap: var(--gap);
   }

   .author-info-section .about-shay-wright {
      flex-shrink: 0;
      max-width: var(--width);
      align-items: center;
      margin-top: -216px;
   }

   .author-info-section .author-info {
      text-align: center;
      align-items: center;
   }

   .buy-before-you-sell .common-faq-section,
   .jumbo-loan .common-faq-section {
      margin-top: 50px;
   }

   .common-faq-wrap .subtitle {
      margin-bottom: 60px;
   }

   .buy-before-you-sell .benefit-mortgage .common-wrap {
      gap: 62px;
   }

   .buy-before-you-sell .benefit-mortgage .basic-loan-item {
      padding-top: 40px;
      padding-bottom: 18px;
   }

   .buy-before-you-sell .form-section {
      padding-top: 30px;
   }

   .buy-before-you-sell .common-form {
      --space: 10px 42px 25px;
   }

   .buy-before-you-sell textarea {
      height: 135px;
   }

   .buy-before-you-sell .testimonial {
      padding-bottom: 0;
   }

   /* shay wright section end */
   /* quote section style start */
   .quote-content-wrapper {
      padding-block: 36px 45px;
      padding-left: 72px;
      padding-right: 80px;
   }

   .about-us-page .quote-content-wrapper {
      padding-block: 45px;
   }

   .about-us-page .card-wrapper {
      padding: 0 6px;
   }

   .about-shay-page .card.horijontal-card:nth-child(4) {
      gap: 40px 92px;
   }

   /* quote section style end */
   /* about shay style start */
   .hero-section.about-shay-hero .content-wraper {
      padding-left: calc(var(--width) + var(--gap));
   }

   .author-info-section .author-img {
      --size: 210px;
   }

   /* about shay style end */
   /* benifit mortgage start */
   .benefit-mortgage {
      padding: 58px 0 60px;
   }

   .benefit-mortgage .common-wrap {
      gap: 40px;
   }

   .benefit-mortgage .basic-loan-card {
      --grid-column: 3;
      gap: 20px;
   }

   .benefit-mortgage .basic-loan-details p {
      font-size: 18px;
      line-height: 21.6px;
   }

   .loan-qualification-inner .loan-content p {
      line-height: 18px !important;
      letter-spacing: -0.5px;
   }

   .loan-qualification-inner .basic-loan-item {
      padding: 45px 33px;
   }

   /* benifit mortgage end */
   /* common faq sectio start */
   .common-faq {
      flex-direction: row;
   }

   .common-faq-item {
      width: 100%;
      padding-block: 12px;
      padding-left: 20px;
   }

   /* common faq sectio end */
   /* form section start */
   .form-item-wrap {
      --grid-column: 2;
      gap: 30px 24px;
      margin-top: 22px;
   }

   .form-item-wrap select {
      font-size: 16px;
      color: #47432c;
   }

   .form-item-wrap select {
      padding: 13.5px;
   }

   .common-form {
      --space: 24px;
   }

   /* form section end */
   /* contact us section start */
   .contact-info {
      --space: 24px;
   }

   /* contact us section end */
   /* card section start */
   .card.horijontal-card {
      gap: 40px;
      flex-direction: row;
   }

   .card.horijontal-card:nth-child(even) {
      flex-direction: row-reverse;
   }

   .card-img,
   .card-content {
      flex: 1;
   }

   .card-content {
      gap: 30px;
   }

   .card-body p:has(+ p) {
      margin-bottom: 23px;
   }

   .card-body p:has(+ ul) {
      margin-bottom: 49px;
   }

   .about-us .card.horijontal-card:first-child {
      flex-direction: row-reverse;
   }

   .about-us .card-wrapper .card:nth-child(even) {
      flex-direction: row-reverse;
   }

   /* card section end */
   /* how to apply section start */
   .how-to-apply ul {
      padding-left: 52px;
      gap: 26px !important;
   }

   .author-info-wrapper .about-shay-wright {
      flex-direction: row;
   }

   .how-to-apply-page h1 {
      margin-bottom: 16px;
   }

   .how-to-apply-page img:not(.social-icon img) {
      margin-bottom: 24px;
   }

   .how-to-apply-page .how-to-apply {
      gap: 40px;
   }

   /* how to apply section end */
   /* down payment section start */
   .down-pament-rates .note {
      font-size: 14px;
      line-height: 16.8px;
      padding: 10px;
   }

   /* down payment section end */
   /* mortgage rate section start */
   .exceptional-title {
      margin-bottom: 18px;
      padding-top: 27px;
      padding-inline: 30px;
   }

   .down-pament-rates .exceptional-title {
      padding-top: 0;
   }

   .mortgage-rates-page .calculator-section {
      padding-top: 12px;
      padding-bottom: 86px;
   }

   .rate-col {
      padding-block: 20px;
      padding-inline: 7px;
   }

   .mortgage-rate-main-content .rate-col h5 {
      padding-left: 24px;
   }

   .mortgage-rate-main-content .rate-col h6 {
      font-size: 18px;
      line-height: 21.6px;
      padding-left: 24px;
   }

   .mortgage-rate-main-content .rate-col span {
      font-size: 14px;
      line-height: 16.8px;
   }

   .rate-col h5 {
      font-size: 18px;
   }

   .rate-col p {
      font-size: 18px;
   }

   section.down-pament-rates {
      padding-top: 40px;
   }

   /* mortgage rate section end */
   /* blog section start */
   .blog-wrap .common-wrap {
      --grid-column: 3;
   }

   /* blog section end */
   /* parameters section start */

   .parameters-wrap .border {
      width: 1px;
      height: unset;
      margin-inline: 45px;
   }

   .parameters-wrap .parameters-item li {
      padding-bottom: 10px;
   }

   .parameters {
      flex-direction: row;
   }

   .parameters-links {
      row-gap: 0px;
   }

   .parameters-links ul li {
      font-size: 16px;
   }

   .parameters-item h2 {
      margin-bottom: 5px;
   }

   .parameters-item p {
      margin-bottom: 32px;
   }

   .loan-officers .popup-wrap {
      grid-template-columns: repeat(2, 1fr);
      padding-inline: 36px;
      padding-top: 70px;
      padding-bottom: 50px;
   }

   /* parameters section end */
   /* footer section start */
   .footer-link-wrap {
      flex-direction: row;
   }

   .footer-link-wrap * {
      width: 100%;
   }

   .footer-top img {
      margin-right: 22px;
   }

   /* footer section end */

   section.blog-post-section {
      padding-top: 65px;
   }

   .blog-post-section .card:first-child .card-content {
      max-width: 560px;
   }

   .blog-post-section .card:nth-child(2) .card-body {
      padding-left: 58px;
      max-width: 600px;
   }

   .blog-post-section .card:nth-child(2) {
      gap: 40px 100px !important;
   }

   section.support-box-section.let-connect {
      padding-top: 55px;
   }

   .support-box-section .common-wrap {
      max-width: 645px;
      margin: 0 auto;
   }

   .author-content.gap-10 {
      gap: 28px;
   }

   .author-info-section .calc-spacing {
      --gap: 120px;
   }

   section.quote-section {
      padding-top: 40px;
   }

   .construction-loans .basic-loan {
      padding-top: 85px;
   }

   .hero-section .common-wrap {
      align-items: flex-start;
   }

   .jumbo-loan-page .hero-secondary .content-wraper .btn-wraper {
      margin-top: 18px;
   }

   .jumbo-loan-page .basic-loan {
      padding: 92px 0 70px;
   }

   .jumbo-loan-page .benefit-mortgage .common-wrap {
      gap: 60px;
   }

   .jumbo-loan-page .benefit-mortgage .basic-loan-item {
      padding-bottom: 50px;
   }

   .jumbo-loan-page .common-faq-section {
      margin-top: 125px !important;
   }

   section.mortgage-rate-main-content {
      padding-top: 70px;
   }

   .thank-you {
      margin-bottom: 175px;
   }

   /* contact us section style start */
   .contact-us {
      --space-y: 72px;
      --space-b: 72px;
   }

   .contact-us .common-wrap {
      flex-direction: row;
   }

   .contact-info {
      --space: 28px;
   }

   .contact-us .contact-info {
      width: 32.919%;
      align-items: center;
      flex-shrink: 0;
      padding: 35px 45px;
      padding-right: 50px;
      gap: 35px;
   }

   .contact-us-page .common-form {
      padding: 50px 35px 25px;
   }

   .contact-us .form-item-wrap {
      gap: 24px;
   }

   .contact-info ul {
      gap: 26px;
   }

   .contact-us {
      padding-top: 80px;
      padding-bottom: 95px;
   }

   /* contact us section style end */

}

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

   /* varibale */
   :root {
      --fs-h1: 42px;
      --lh-h1: 46.2px;
      --fs-h2: 26px;
      --lh-h2: 33.8px;
      --fs-h3: 24px;
      --lh-h3: 31.2px;
      --fs-h4: 20px;
      --lh-h4: 24px;
      --fs-h5: 18px;
      --lh-h5: 21.6px;
      --fs-label: 17px;
      --lh-label: 20.4px;
      --btn-font-size: 18px;
      --btn-line-height: 21.6px;
      --btn-padding: 18px;
      --btn-min-width: 176px;
   }

   /* body typorgraphy */
   body {
      --body-text: 17px;
      --body-line-height: 23.8px;
   }

   /* header section start */
   .header-wrap {
      padding: 36px 0 40px;
   }

   /* header section end */
   /* common hero section start */
   .hero-section {
      --space-y: 65px;
      --space-b: 57px;
   }

   .about-shay-wright-page .hero-section {
      --space-y: 54px;
   }

   .hero-section.double-img-hero {
      --space-y: 48px;
      --space-b: 46px;
   }

   .meet-shay-wright .content-wraper .btn-wraper {
      margin-top: 40px;
   }

   .about-shay-wright-page .hero-section .media {
      max-width: 562px;
      height: 324px;
   }

   .about-shay-wright-page .hero-section .content-wraper {
      padding-top: 20px;
   }

   .about-shay-wright-page .content-wraper .title {
      margin-bottom: 16px;
   }

   .about-shay-wright-page .content-wraper .btn-wraper {
      margin-top: 28px;
   }

   .about-shay-wright-page .content-wraper .btn-wraper .btn {
      min-width: 176px;
   }

   .rate-quote-page .hero-section {
      padding-bottom: 250px;
      padding-top: 58px;
   }

   .rate-quote-page .btn-white:hover {
      border-color: var(--color-primary);
   }

   .rate-quote-page .sub-title {
      font-size: 20px;
      margin-bottom: 5px;
   }

   .rate-quote-page h1.title {
      font-size: 36px;
   }

   .rate-quote-page .hero-section .content-wraper {
      max-width: 434px;
   }

   /* common hero section end */
   /* ====== Mortgages style start ====== */
   .mortgages-wrap {
      --space-y: 57px;
      --space-b: 93px;
   }

   .mortgages {
      --gap: 64px;
   }

   .mortgages .item {
      --space-y: 26px;
      --space-x: 26px;
   }

   .item a {
      font-size: 20px;
      line-height: 24px;
      padding-block: 13px;
   }

   /* ====== Mortgages style end ====== */
   /* cta common section style start */
   .cta {
      --space-y: 80px;
      --space-b: 73px;
   }

   .get-quote-inner {
      gap: 60px;
      padding-left: 22px;
      padding-top: 35px;
      padding-right: 40px;
      padding-bottom: 35px;
   }

   .how-to-apply-page section {
      padding-bottom: 100px;
   }

   .how-to-apply-page .get-quote-inner {
      padding-left: 25px;
      padding-top: 30px;
      padding-right: 20px;
      padding-bottom: 30px;
   }

   .how-to-apply-page .get-quote-inner {
      gap: 10px;
   }

   .how-to-apply-page .get-quote-content-img {
      --size: 74px;
   }

   .how-to-apply-page .get-quote-btn .btn {
      min-width: 190px;
      font-size: 18px;
      padding: 18px;
   }

   .how-to-apply-page .about-shay-wright .author-img {
      max-width: 75px;
   }

   .get-quote-content-inner.item-center.text-center.d-flex.flex-col.gap-10 {
      gap: 0;
   }

   .get-quote-btn .btn {
      min-width: 200px;
   }

   .get-quote-content-img {
      --size: 80px;
   }

   .get-quote-content-inner h4 {
      font-size: 21px;
      font-weight: 800;
      line-height: 25.2px;
   }

   .get-quote-content-inner p {
      font-size: 16px;
      line-height: 22.4px;
      width: 90%;
   }

   .how-to-apply-page .get-quote-content-inner p {
      width: 96%;
   }

   .how-to-apply-page .get-quote-content-inner .btn {
      min-width: auto;
   }

   /* cta common section style end */
   /* calculator section start */
   .calculator-header h2 {
      line-height: 31.2px;
      margin-bottom: 14px;
   }

   .calculator-header p {
      line-height: 20.4px;
   }

   /* calculator section end */
   /* testimonial section styel stat */
   .mortgage-rate-main-content .common-wrap {
      max-width: 734px;
   }

   .testimonial-item {
      padding: 50px 45px 40px 35px;
      gap: 30px;
   }

   /* testimonial section styel end */
   /* testimonial section start */
   .testimonial {
      --space-y: 70px;
   }

   /* testimonial section end */
   /* shay wright section start */
   .shay-wright-section {
      --space-y: 60px;
      --space-b: 60px;
   }

   .about-shay-wright {
      max-width: 400px;
      width: 100%;
   }

   .shay-wright-section .about-shay-wright-faq {
      max-width: 586px;
      width: 100%;
   }

   .shay-wright-section .common-wrap {
      flex-direction: row;
   }

   .about-shay-wright {
      gap: 43px;
      padding-top: 24px;
   }

   .about-shay-wright .author-info {
      gap: 23px;
   }

   .author-info-section .about-shay-wright {
      margin-top: -260px;
   }

   .author-info .author-name {
      font-size: 24px;
      line-height: 29px;
   }

   .about-shay-page .author-info .author-name {
      font-size: 20px;
      line-height: 24px;
      color: var(--color-text);
   }

   .bank-statement-page .common-faq-section {
      margin-top: 110px;
   }

   /* shay wright section end */
   /* quote section start */
   .quote-content-wrapper h4 {
      font-size: 19px;
      line-height: 34.25px;
      font-weight: 600;
   }

   .about-us-page .quote-content-wrapper h4 {
      font-size: 20px;
      line-height: 24px;
   }

   /* quote section end */
   /* big card section start */
   .learning-center-page .blog-wrap .common-wrap {
      --gap: 90px;
   }

   .learning-center-page .hero-secondary {
      padding-top: 30px;
      padding-bottom: 65px;
   }

   .learning-center-page .hero-section.learning-center .content-wraper {
      max-width: 730px;
   }

   .blog-post-section {
      --space-y: 80px;
      --space-b: 134px;
   }

   section.blog-wrap {
      padding-top: 80px;
   }

   .blog-item-content {
      padding: 24px 30px;
   }

   .learning-center-page .blog-wrap .common-wrap {
      gap: 100px 70px;
   }

   section.blog-wrap {
      padding-bottom: 133px;
   }

   .blog-item-content p {
      line-height: 18px;
   }

   .blog-item-content a {
      font-size: 16px;
   }

   .rate-quote .hero-section {
      --space-b: 162px;
   }

   .send-referral .form-section .common-form {
      gap: 40px;
   }

   /* big card section end*/
   /* about shay page style start */
   .calc-spacing {
      --gap: 110px;
   }

   .about-shay-page .hero-section {
      padding-top: 87px;
      padding-bottom: 87px;
   }

   .about-shay-page .content-wraper .title {
      font-size: 36px;
      line-height: 39.6px;
      font-weight: 600;
      margin-bottom: 7px;
   }

   .common-faq-section .common-faq {
      gap: 40px;
   }

   .common-faq-item {
      padding-block: 20px;
      padding-left: 30px;
   }

   .fha-loan .common-faq-section {
      margin-top: 45px;
      padding-bottom: 60px;
   }

   .fha-loan .benefit-mortgage .common-wrap {
      gap: 58px;
   }

   /* about shay page style end */
   .buy-before-you-sell .common-faq-section {
      margin-top: 100px;
   }

   .jumbo-loan .common-faq-section {
      margin-top: 110px;
   }

   /* loan section style start */
   .basic-loan-item .loan-content h4 {
      font-size: 19px;
      line-height: 22.8px;
   }

   .basic-loan {
      padding: 92px 0 106px;
   }

   .basic-loan .common-wrap {
      gap: 60px;
   }

   .section-header {
      gap: 16px;
   }

   .basic-loan-card {
      gap: 45px;
   }

   .basic-loan-item {
      padding: 36px 25px 40px;
      gap: 24px;
   }

   .benefit-mortgage .basic-loan-item {
      padding-top: 40px;
      padding-bottom: 32px;
   }

   .basic-loan-item .loan-content {
      flex-grow: 1;
   }

   .basic-loan-item .loan-content p {
      font-size: 16px;
      line-height: 23.2px;
   }

   .basic-loan-item .loan-content h4 {
      margin-bottom: 16px;
      font-size: 19px;
      line-height: 22.8px;
   }

   .support-box h2 {
      margin-bottom: 30px;
   }

   .mortgage-rates-page .support-box .support-title {
      margin-bottom: 10px;
   }

   .mortgage-rates-page .support-box .support-text {
      margin-bottom: 24px;
   }

   .mortgage-rates-page .support-box p {
      margin-bottom: 24px;
   }

   .support-box .support-text {
      margin-bottom: 32px;
      font-size: 18px;
      line-height: 25.2px;
   }

   .mortage-rates-today .support-box h2 {
      margin-bottom: 20px;
   }

   .mortage-rates-today .support-box .support-text {
      margin-bottom: 20px;
   }

   .mortage-rates-today .support-box p {
      margin-bottom: 30px;
   }

   /* loan section style end */
   /* banifit mortgage start */
   .testimonial .image-wrap img {
      width: 32px;
   }

   .benefit-mortgage .basic-loan-card {
      --grid-column: 5;
      gap: 10px;
   }

   /* banifit mortgage end */
   /* calculator section start */
   .calculator-section {
      padding-top: 0;
   }

   .basic-tab .form-inner {
      padding-bottom: 90px;
   }

   /* calculator section end */
   /* form section start */

   .form-section {
      --space-y: 90px;
   }

   .home-page .form-section {
      --space-y: 28px;
   }

   .common-form {
      --space: 42px 42px 25px;
      padding-inline: 25px;
   }

   /* form section end */
   .custom-radio-label::after {
      left: 9px;
      top: 5px;
   }

   .rate-quote-purchase .custom-radio-label {
      padding-left: 35px;
   }

   .rate-quote-purchase .hero-section, .rate-quote-finance .hero-section {
      padding-top: 30px;
   }

   .rate-quote-purchase .hero-section .content-wraper,  .rate-quote-finance .hero-section .content-wraper {
      max-width: 700px;
   }

   .rate-quote-purchase .form-section, .rate-quote-finance .form-section {
      padding-top: 0;
   }

   .rate-quote-purchase .support-box-section+.form-section .common-form {
      margin-top: 0;
   }

   .rate-quote-purchase .form-section .common-wrap {
      max-width: 760px;
   }

   .rate-quote-purchase .common-form {
      --space: 25px;
      padding-inline: 35px;
   }

   .rate-quote-purchase .custom-radio-label::before {
      width: 25px;
      height: 25px;
   }

   .rate-quote-purchase .form-item .gap-10 {
      gap: 35px;
   }

   .rate-quote-purchase .form-item {
      gap: 6px;
   }

   .rate-quote-purchase .hero-section,  .rate-quote-finance .hero-section {
      --space-b: 57px;
   }

   /* rate quote purchase page form secion end */
   /* card section start */
   .card-wrapper {
      gap: 160px;
   }

   .card.horijontal-card {
      gap: 40px 80px;
   }

   .about-us-page .card.horijontal-card {
      gap: 40px 48px;
   }

   .about-shay-page .card.horijontal-card {
      gap: 40px 20px;
   }

   .about-us .card-wrapper {
      gap: 62px;
   }

   .card.horijontal-card:nth-child(n+3):not(:last-child) {
      padding-bottom: 75px;
      padding-top: 10px;
   }

   /* card section end */
   /* blog section start */
   .blog-wrap {
      --space-y: 60px;
      --space-b: 60px;
   }

   .blog-wrap .common-wrap {
      --gap: 60px;
   }

   .loan-officers-page .blog-wrap .common-wrap {
      --gap: 100px;
   }

   /* blog section end */
   /* rate quote purchase start */
   .rate-quote-purchase .form-item-wrap {
      gap: 30px 40px;
   }

   /* rate quote purchase end */
   /* mortgage-card-section start */
   .types-of-mortgages .mortgage-card-section .grid {
      --gap: 112px;
      row-gap: 70px;
   }

   .types-of-mortgages section {
      --space-y: 90px;
   }

   .types-of-mortgages .hero-section.hero-secondary .content-wraper {
      max-width: 415px;
   }

   .types-of-mortgages .mortgage-card-section {
      padding-top: 65px;
   }

   .mortgage-card {
      padding-inline: 15px;
   }

   .zero-down-mortgages-page .mortgage-card-section {
      padding-top: 90px;
   }

   .zero-down-mortgages-page .mortgage-card .card-body ul {
      padding-left: 10px;
   }

   .zero-down-mortgages-page .mortgage-card {
      padding-top: 30px;
   }

   .zero-down-mortgages-page .mortgage-card .card-content {
      gap: 20px;
   }

   .zero-down-mortgages-page .mortgage-card .card-body ul li:not(:last-child) {
      margin-bottom: 15px;
   }

   .down-optiion {
      padding-top: 56px !important;
   }

   /* mortgage-card-section end */
   .parameters-wrap {
      --space-y: 110px;
      --space-b: 110px;
   }

   .how-to-apply-page .common-wrap {
      gap: 60px;
   }

   /* footer section start */
   .footer {
      padding-top: 92px;
   }

   .about-shay-wright-page+.footer {
      padding-top: 160px;
   }

   .footer-middle {
      --space-y: 96px;
      --space-b: 74px;
   }

   .footer-middle .common-wrap {
      --grid-column: 4;
   }

   .footer-bottom .common-wrap {
      --grid-column: 4;
   }

   .footer-form form {
      flex-direction: row;
   }

   .footer-form form .btn {
      min-width: auto;
   }

   .find-loan-officer+.footer {
      padding-top: 170px;
   }

   .get-preapproved+.footer {
      padding-top: 170px;
   }

   .loan-officers-page+.footer {
      padding-top: 170px;
   }

   .rate-quote-page+.footer {
      padding-top: 0;
   }

   /* footer section end */
}

@media only screen and (max-width:767px) {
   .testimonial .d-flex.flex-col.gap-20.item-center.justify-center {
      flex-flow: nowrap;
      justify-content: space-between;
   }

   .d-flex.item-center.justify-center.flex-wrap.gap-20.header-right {
      flex-flow: nowrap;
   }

   .header-right p {
      font-size: 12px;
   }

   .header-right p a {
      margin-left: 0;
   }

   .header-right .btn {
      font-size: 12px;
      padding: 10px;
   }

   nav.nav-wrap {
      background-color: #fff;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   }

   #hamburger {
      background-color: #007c5d;
      height: 30px;
   }

   .navigation-wraper ul li ul.dropdown {
      padding-left: 0;
   }

   li.has-sub-nav {
      display: contents;
   }

   .navigation-wraper ul li ul li a {
      padding: 10px 10px;
   }

   .double-quote {
      line-height: 26.25px;
   }

   .support-box .btn {
      min-width: 140px;
      font-size: 12px;
      padding: 10px;
   }

   .fha-loan .exceptional-title,
   .mortgage-rates-inner {
      padding-top: 0
   }

   .thank-you {
      margin-bottom: 80px;
   }
}

@media only screen and (max-width: 991px) {
   .content-wraper .btn-wraper .btn {
      min-width: 165px;
   }

   .loan-officers .popup-wrap {
      height: 550px;
      overflow-y: auto;
   }

   .loan-officers .popup-wrap .blog-item {
      overflow: visible;
   }

   .how-to-apply-page .about-shay-wright .author-img {
      max-width: 75px;
   }

   .hero-section .common-wrap {
      gap: 20px;
   }

   .mortgage-rates-inner {
      padding: 15px;
   }

   .nav-wrap ul li:hover a img {
      transform: unset;
   }

   .navShown.sub-menu-active .nav-wrap ul li a.active img {
      transform: rotate(180deg) !important;
   }

   .navigation-wraper>ul>li>a:after {
      display: none;
   }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
   .grid {
      --grid-column: 2 !important;
   }
}