/* Search Box Styling */ .posts-search-box {font-family: "DM Sans", Sans-serif;padding-right: 25px;gap: 0px;margin-bottom: 20px;} .posts-search-box input[type=text]{border-color: #ff8d6b!important;border:1px solid red;} .posts-search-box input[type=text]:focus{border-color: #ff8d6b!important;} .posts-search-box .custom-select:focus-visible{outline: 0px solid #ff8d6b!important;box-shadow: none;} .posts-search-box input[type=text]:focus-visible{outline: 0px solid #ff8d6b!important;} .posts-search-box select, .posts-search-box input {padding: 10px 10px 10px 20px;font-size: 14px;border: 1px solid #ccc;} .posts-search-box select option{color: #000;} .posts-search-box select {color: #000;} .posts-search-box button {padding: 10px 15px;font-size: 14px;background-color: #343a40;color: white;border: none;border-radius: 5px;cursor: pointer;} .posts-search-box button:hover {background-color: #000;} /* Blog Posts Container */ .all-posts-container {display: flex;flex-wrap: wrap;justify-content: flex-start;;gap: 20px;padding: 15px;} /* Blog Post Card */ .post-card {position: relative;background: #fff;border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);overflow: hidden;text-align: left;transition: transform 0.3s ease-in-out; } .post-thumbnail a img {width: 100% !important;max-width: 100% !important;height: 241px !important;object-fit: cover;object-position: center center!important; transition-duration: .4s!important;} .post-thumbnail a img:hover {transform: scale(1.1);} .post-content {display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;padding: 0 0 25px;margin-bottom: 87px;} .post-date {border-radius: 2px;padding: 5px 10px; background: linear-gradient(93.05deg, #ff8d6b -19.83%, #465059 176.33%) !important;color: #fff !important; } h4.post-title a{font-family: "DM Sans", Sans-serif;font-size: 20px;font-weight: 700;line-height: 26.04px;color: var(--e-global-color-text);margin-top: 20px;} .post-title a {text-decoration: none;color: #333;font-size: 18px;font-weight: bold;display: block;} .post-excerpt {text-align: left;font-family: "DM Sans", Sans-serif;font-size: 16px;font-weight: 400;line-height: 20.83px;} .read-more-btn {margin-top: 10px;transition: 0.3s ease-in-out;position: absolute;padding-bottom: 0px;bottom: 20px;} .read-more { display: flex; align-items: center; gap: 10px; width: fit-content; background-color: var(--e-global-color-bd98b3e); font-family: Raleway, Sans-serif; font-size: 15px; font-weight: 700; line-height: 20px; fill: var(--e-global-color-accent); color: var(--e-global-color-accent); border-style: solid; border-width: 2px; border-color: var(--e-global-color-primary); border-radius: 50px 50px 50px 50px; padding: 8px 15px; } .read-more svg{width: 20px;height: 20px;transition: all 500ms ease;} .read-more:hover svg{rotate: 45deg;transition: rotate 0.3s ease-in-out;} .read-more:hover {color: #fff;background: #ff8d6b;transition: 0.3s ease-in-out;} /* Load More Button */ .load-more-container {text-align: center;margin-top: 40px;} #load-more-btn { background-color: #425663; font-family: "DM Sans", Sans-serif; font-size: 22px; font-weight: 700; line-height: 28.64px; fill: var(--e-global-color-accent); color: var(--e-global-color-accent); border-style: solid; border-width: 2px; border-color: var(--e-global-color-primary); border-radius: 50px 50px 50px 50px; padding: 12px 35px; } #load-more-btn svg{transition: all 500ms ease;} #load-more-btn:hover {background: #ff8d6b;} #load-more-btn:hover svg{rotate: 45deg;transition: rotate 0.3s ease-in-out;} .content-part{padding: 35px 15px 15px 15px;} #post-search-button{ background-color: #425663; font-family: "DM Sans", Sans-serif; font-size: 18px; font-weight: 700; line-height: 28.64px; fill: var(--e-global-color-accent); color: var(--e-global-color-accent); border-style: solid; border-width: 2px; border-color: var(--e-global-color-primary); border-radius: 0px 50px 50px 0px; padding: 12px 35px; } .load-more-container{ margin-top: 50px;} @media (min-width: 1050px) { .post-card {max-width: 32%;} .posts-search-box{display: grid;grid-template-columns: 25% 35%;margin-bottom:20px;justify-content:end;} .posts-search-box select{ border-radius: 50px 0px 0px 50px;border-color: #ff8d6b!important;} .posts-search-box input[type=text]{border-left: 0px;} .mobile-res{display: flex;} } @media screen and (min-width:600px) and (max-width:1050px) { .mobile-res{display: flex;} .posts-search-box select{ border-radius: 50px 0px 0px 50px;border-color: #ff8d6b!important;} .posts-search-box{display: grid;grid-template-columns: 40% 58%;margin-bottom:20px;justify-content:end;} .post-card {max-width: 48%!important;} .posts-search-box input[type=text]{border-left: 0px;} .posts-search-box {padding-right: 15px;} } /* Responsive Design */ @media (max-width: 600px) { .mobile-res{display: flex;width: 98%;} .posts-search-box select{ border-radius: 10px 10px 10px 10px;border-color: #ff8d6b!important;} .posts-search-box {display: flex;flex-direction: column;align-items: center;} .posts-search-box select, .posts-search-box input { width: 98%;} .all-posts-container {flex-direction: column;align-items: center;padding: 15px 5px!important;} .post-card {max-width: 100%;} .posts-search-box {gap: 10px!important;} .posts-search-box input[type=text]{ border-radius: 10px 0px 0px 10px!important;} #post-search-button {padding: 8px 30px!important;} .posts-search-box {padding-right: 5px!important;} } .custom-select { appearance: none; /* Removes default styles */ -webkit-appearance: none; -moz-appearance: none; background: url('data:image/svg+xml;charset=UTF-8,') no-repeat; background-position: right 10px center; /* Adjust margin right */ background-size: 20px; padding-right: 30px; /* Ensure space for icon */ border: 1px solid #ccc; border-radius: 5px; font-size: 18px; cursor: pointer; }