/**** searchBlog ****/
#searchBlog {margin: 0; padding: 0 0 80px 0;}
#searchBlog h3 {margin: 0; padding: 0; font-weight: 600; font-size: 40px; line-height: 55px; letter-spacing: 0.3em; text-transform: uppercase; color: #393939; background: url(../images/category-heading-icon.png) no-repeat;}
#searchBlog ul {margin: 0; padding: 20px 0 0 0; list-style: none; display: flex; align-items: center; flex-wrap: wrap;}
#searchBlog ul li {margin: 0; padding: 0; display: inline-flex; align-items: center; flex-wrap: wrap;}
#searchBlog ul li.searchFeild {width: calc(100% - 115px); margin-right: 15px;}
#searchBlog ul li.searchFeild input[type="text"] {width: 100%; background: #fff; border: 1px solid rgba(0, 0, 0, 0.2); font-size: 16px; font-weight: 500; color: #393939; padding: 8px 12px; border-radius: 4px;}
#searchBlog ul li.searchFeild input[type="text"]:focus {outline: none;}
#searchBlog ul li.searchBtn {width: 100px;}
#searchBlog ul li.searchBtn input[type="submit"] {background: #2c52b4; color: #fff; border-radius: 4px; padding: 7px 20px; font-weight: 600; font-size: 18px; border: 1px solid #2c53b4; transition: all ease-in-out 0.3s; width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#searchBlog ul li.searchBtn input[type="submit"]:hover {background: none; color: #2c52b4;}

/**** category ****/
#category {margin: 0; padding: 0;}
#category h3 {margin: 0; padding: 0; font-weight: 600; font-size: 40px; line-height: 55px; letter-spacing: 0.3em; text-transform: uppercase; color: #393939; background: url(../images/category-heading-icon.png) no-repeat;}
#category ul {margin: 0; padding: 20px 0 0 0; list-style: none;}
#category ul li {margin: 0; padding: 0; border-bottom: 1px dashed #B5B5B5;}
#category ul li a {padding: 12px 0 12px 30px; font-weight: 500; font-size: 18px; line-height: 30px; text-transform: capitalize; color: #393939; transition: all ease-in-out 0.3s; position: relative; display: flex; align-items: center; flex-wrap: wrap;}
#category ul li a img {margin-right: 10px; max-width: 24px; position: absolute; left: 0; top: 22px;}
#category ul li a:hover {padding-left: 35px;}

/**** newsSubscription ****/
#newsSubscription {margin: 80px 0 0 0; padding: 20px 30px 30px 30px; background: linear-gradient(144.75deg, #274DAE 1.87%, #7717AF 64.91%, #7717AF 100%); border-radius: 21px; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);}
#newsSubscription h4 {margin: 0; padding: 0; font-size: 26px; font-weight: 600; color: #fff; text-align: center;}
#newsSubscription p {margin: 0; padding: 10px 0 0 0; font-size: 18px; font-weight: 500; color: #fff; text-align: center;}
#newsSubscription .iconWrapper {width: 100%; height: 90px; margin-top: 10px; position: relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#newsSubscription .iconWrapper .icons {position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; flex-wrap: wrap;}
#newsSubscription .iconWrapper .icons img {filter: brightness(0) invert(1);}
#newsSubscription .iconWrapper .icons.iconOne {top: 6px; z-index: 1; margin-left: -25px; animation: moveUpDown 2s ease-in-out infinite;}
#newsSubscription .iconWrapper .icons.iconTwo {bottom: 0;}

.loadMoreWrapper {display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
.loadMoreWrapper button {border: none; color: #fff; padding: 8px 20px; display: inline-flex; border-radius: 4px; font-size: 16px; font-weight: 600; background: linear-gradient(135deg, #0005b2 0%, #c4006f 100%); margin-bottom: 60px; display: inline-flex; align-items: center; flex-wrap: wrap;}

@keyframes moveUpDown {
    0% {transform: translateY(6px);}
    50% {transform: translateY(-10px);}
    100% {transform: translateY(6px);}
}

#newsSubscription .newsletterForm {margin: 0; padding: 20px 0 0 0;}
#newsSubscription .newsletterForm ul {margin: 0; padding: 0; list-style: none; display: flex; align-items: center; flex-wrap: wrap;}
#newsSubscription .newsletterForm ul li {margin: 0; padding: 0; display: inline-flex; align-items: center; flex-wrap: wrap;}
#newsSubscription .newsletterForm ul li.formField {width: calc(100% - 100px);}
#newsSubscription .newsletterForm ul li.formField input[type="email"], #newsSubscription .newsletterForm ul li.formField input[type="text"] {background: #fff; border: none; padding: 6px 10px; border-radius: 4px; margin-right: 10px; width: 100%; box-sizing: border-box;}
#newsSubscription .newsletterForm ul li.formField input[type="email"]:focus, #newsSubscription .newsletterForm ul li.formField input[type="text"]:focus {outline: none;}
#newsSubscription .newsletterForm ul li.button {width: 90px;}
#newsSubscription .newsletterForm ul li.button input[type="submit"] {background: #ffbc25; font-weight: 500; color: #fff; border: none; width: 90px; padding: 6px 10px; border-radius: 4px; text-shadow: 1px 1px rgba(0, 0, 0, 0.4);}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    #searchBlog h3, #category h3 {font-size: 30px; line-height: 45px; background-size: contain;}
    #category ul li a {font-size: 16px; line-height: 24px;}
	#category ul li a img {margin-right: 10px; max-width: 20px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #searchBlog h3, #category h3 {font-size: 30px;  line-height: 40px; background-size: contain;}
    #searchBlog ul li.searchFeild {width: 100%; margin-right: 0; margin-bottom: 15px;}
    #category ul li a img {margin-right: 10px; max-width: 20px;}
    #category ul li a {font-size: 16px; line-height: 24px;}
    #newsSubscription {margin: 60px 0 0 0; padding: 15px 15px 20px 15px;}
    #newsSubscription .newsletterForm ul li.formField {width: 100%; margin-right: 0; margin-bottom: 15px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #searchBlog h3, #category h3 {font-size: 30px; line-height: 45px; background-size: contain;}
    #searchBlog ul li.searchFeild {width: 100%; margin-right: 0; margin-bottom: 15px;}
    #category ul li a img {margin-right: 10px; max-width: 20px;}
    #category ul li a {font-size: 16px; line-height: 24px;}
    #newsSubscription {margin: 60px 0 0 0; padding: 15px 15px 20px 15px;}
    #newsSubscription p {font-size: 16px;}
    #newsSubscription .newsletterForm ul li.formField {width: 100%; margin-right: 0; margin-bottom: 15px;}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #searchBlog, #category {padding-left: 10px;}
    #searchBlog h3, #category h3 {font-size: 34px; line-height: 55px; letter-spacing: 5.2px; background-size: contain;}
    #category ul li a img {margin-right: 10px; max-width: 26px;}
    #category ul li a {font-size: 16px; line-height: 26px;}
    #newsSubscription {margin: 60px 0 0 0; padding: 20px 20px 20px 20px;}
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    #searchBlog h3, #category h3 {font-size: 34px; line-height: 55px; letter-spacing: 5.2px; background-size: contain;}
    #category ul li a img {margin-right: 10px; max-width: 26px;}
    #category ul li a {font-size: 16px; line-height: 26px;}
}
