
.blogs .content {padding: 60px 0;text-align: center;background-color: #f0f7fe;margin-bottom: 45px;}
.blogs .content h1 {display: inline-block; width: 100%;font-size: 40px; color: #0061bc;  margin: 0;}
.blogs .blog-list h3 {display: inline-block;width: 100%; margin: 10px 0; font-size: 24px;color: #0061bc;}
.blogs .blog-list svg { overflow: hidden; vertical-align: middle; margin: 0 10px 10px 0; fill: #0061bc;    font-size: 14px;}
.blogs .blog-list ul {display: flex; flex-direction: row; gap:20px}
.blogs .blog-list ul li{display: flex; flex-direction: row; gap:2px;place-items: center; font-size: 14px;
color: #989897;}
.blogs .blog-list .blog p { font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: var(--clr-light-300); margin-top: 10px; margin-bottom: 20px;}
.blogs .blog-list a {color: #ffc500; font-size: var(--fs-300); font-weight: var(--fw-bold);}
.blogs .blog-list a:hover {color: #0061bc; transition: 0.3s;}
.blogs .columns {display: grid; grid-template-columns: 64% 1fr; gap: 30px;}
.blogs .blog-list .load_btn{margin:20px 0px; font-size: var(--fs-400);}
.blogs .blog-list .blog{margin-bottom: 20px;overflow: hidden;}
.quote .quote-form {max-width: 100%;}
.quote .quote-form .title h2 {font-size: calc(var(--fs-xl) - 4px);}
.quote form {padding: 20px;}
.quote .group:nth-child(2) div:nth-child(2) {display: grid; grid-template-columns: repeat(2, 1fr);}
.quote :where(.group:nth-child(3) div:nth-child(2), .group:nth-child(4) div:nth-child(3)) {flex-direction: column;}
.blog-search-heading {font-size: var(--fs-700); font-weight: var(--fw-semi-bold); color: #58595b; padding-bottom: 13px;border-bottom: 1px solid #ccc; text-transform: uppercase; margin: 30px 0 28px 0;}
.search-blog input {width: 100%; border: 1px solid #ccc; padding: 12px 6px; border-radius: 5px;}
.search-input-wrapper {
position: relative;
}
.search-input-wrapper input[type="text"] {padding-right: 40px;}
.search-input-wrapper .search-button {position: absolute;top: 50%;right: 10px;transform: translateY(-50%);background: none;border: none;cursor: pointer;padding: 0;}
.search-input-wrapper .search-button img { width: 20px;height: auto;}

.blog-categories-heading {font-size: var(--fs-700); font-weight: var(--fw-semi-bold); color: #58595b; padding-bottom: 13px; border-bottom: 1px solid #ccc; text-transform: uppercase; margin: 30px 0 28px 0;}
.blog-categories ul li {list-style-position: inside; color: #58595b;  margin-bottom: 25px;}   
.blog-categories ul li a {color: var(--clr-dark-500); font-weight: var(--fw-semi-bold);}
.blogs .blog-list .blog img{transition: transform 0.9s ease;}
.blogs .blog-list .blog:hover img{transform: scale(1.02);}
.bi-chevron-double-right{fill: #ffc500 !important;margin: 0px !important;}
/* {MEDIA-QUERY} */
@media only screen and (width < 1250px) {.blogs .columns {grid-template-columns: 60% 1fr;}}
@media only screen and (width < 991px) {
:root {--fs-700: 20px;}
.blogs iframe {max-height: 480px;}
.blogs .columns {grid-template-columns: 50% 1fr;}
.blogs :where(.popular-blogs > div, .review-blogs > div) {gap: 20px;}
.blogs .review-blogs > div {grid-template-columns: repeat(2, 1fr)}
}
@media only screen and (width < 767px) {
:root {--fs-700: 16px;}
.blogs iframe {max-height: 310px;}
.blogs .columns {grid-template-columns: 1fr;}
.blogs .sidebar {max-width: 590px;}
.quote .quote-form .title h2 {font-size: var(--fs-xl) !important;}
}
@media only screen and (width < 475px) {
:root {--fs-700: 14px;}
.blogs iframe {max-height: 200px;}
.blogs :is(.popular-blogs > div, .review-blogs > div) {grid-template-columns: 1fr;}
}

.blogs .sidebar {position: sticky; top: 72px; height: fit-content;}
.quote .quote-form {max-width: 100%;}
.quote .quote-form .title h2 {font-size: calc(var(--fs-xl) - 4px);}
.quote form {padding: 20px;}
.quote .group:nth-child(2) div:nth-child(2) {display: grid; grid-template-columns: repeat(2, 1fr);}
.quote :where(.group:nth-child(3) div:nth-child(2), .group:nth-child(4) div:nth-child(3)) {flex-direction: column;}
.quote :where(.group input, .group:nth-child(4) textarea) {padding-block: 10px;}
.quote .group:nth-child(4) textarea {height: 60px;}
quote .buttons {flex-direction: column;}
.quote form button {margin-inline: auto;}