@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body{margin: 0; font-family: "Inter", sans-serif;}

/*.total-container {margin: 0 5rem;}*/

a {text-decoration: none; color: #000; }

.navbar {display: flex; justify-content: space-between; align-items: center;margin: 0 5rem;}
.navbar ul {display: flex; list-style-type: none; justify-content: center; gap: 1.5rem;}
.navbar ul li a i {color: #1e1e1e; }
.outer-body-container {background: #fafafa; margin: 0 5rem; height: auto; display: flex; justify-content: flex-start; /* gap: 20px; */}
.mob-menu-outer{display: none;}
.left-container {background: #ebebeb; width: 25%; padding: 20px; height: fit-content;}

.search-box {display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 15px; gap: 8px; border-radius: 3px; margin-bottom: 20px;}
.search-input{width: 86%;}
.search-icon img {position: relative; top: 3px;right: 20px;}
.search-input input {border: none; outline: none; font-size: 15px; color: #767676; font-weight: 400;width:100%; }
.recent-posts, .archives {background: #fff;}
.recent-posts, .archives {padding: 5px 15px 10px; border-radius: 3px; margin-bottom: 20px; }
.recent-posts-heading, .archives-heading {font-weight: 600; font-size: 20px; color: #1e1e1e; }
.post-links {padding: 10px 0; border-bottom: 2px solid #ebebeb; }
.post-links:last-child {border-bottom: none;}
.post-links a {font-weight: 400; font-size: 15px; color: #1e1e1e; text-decoration: none; }
.post-links a:hover{color: green; transition: 0.3s;font-weight: 500;}
.dropdown-container {display: flex; justify-content: center; gap: 10px; }
.dropdown {position: relative; width: 100%; /* border: 1px solid #b9b9b9; border-radius: 3px; padding-right: 10px; text-align: center; width: 100%; */ }
.month, .year {border: 1px solid #b9b9b9; border-radius: 3px; outline: none; padding: 10px; font-size: 15px; color: #1e1e1e; font-weight: 400; line-height: 21px; text-align: left; width: 100%; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url(./images/black-arrow.webp); background-repeat: no-repeat, repeat; background-position: right 10px top 50%, 0 0; }
.view-res-btn {text-align: center; margin-top: 10px;}
.view-res-btn button {border: none; width: 100%; padding: 15px; background: #f87400; color: #fff; font-weight: 500; font-size: 14.5px; border-radius: 3px; cursor: pointer;}
.btn-arrow {position: relative; top: -1px; left: 4px; }
.btn-arrow img {width: auto; height: 9px; }
.right-container {width: 75%; padding: 20px; }
.card-container {display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 20px; }
.card {background: #fff; width: 32.1%; border-radius: 3px; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; }
.card-img img {width: 100%; height: 250px; object-fit: fill; border-top-left-radius: 3px; border-bottom-right-radius: 3px; }
.card-text-cont {padding: 15px; }
.top-line {display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.top-line-text {font-weight: 500; color: #929292; font-size: 14px; line-height: 21px; }
.top-line-icn {position: relative; bottom: -2px; padding-right: 5px; }
.top-line-clock {position: relative; bottom: -5px; padding-right: 5px; }
.card-title {font-weight: 600; font-size: 20px; line-height: 27px; color: #2d2d2d; margin-bottom: 8px; height: 50px; }
.card-title p, .card-subhead p {padding: 0; margin: 0; }
.card-subhead {font-weight: 400; font-size: 14px; line-height: 23px; color: #464646; margin-bottom: 8px; }
.card-btn button {padding: 10px 0; border: none; outline: none; font-weight: 500; font-size: 14px; line-height: 21px; color: #424242; background: #fff; font-family: "Inter", sans-serif; }
.card-btn-arrow {position: relative; top: 1px; }
.pagination-cont {display: flex; justify-content: center; gap: 5px; padding-top: 20px; }
.page {padding: 15px 20px; border-radius: 5px; font-size: 18px; line-height: 21px; font-weight: 400; text-align: center; color: #616161; background: #eeeded; }
.current-page{background: #2D2D2D;color: #fff; }

/**************post page css******************/

.blog-content-container {padding: 20px; width: 75%; }
.blog {background: #fff; padding: 20px; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; border-radius: 3px; width: 96.5%; }
.blog-title {font-weight: 600; font-size: 40px; line-height: 48px; color: #2d2d2d; margin-bottom: 13px; }
.blog-title p {padding: 0; margin: 0; }
.blog-title h1{font-size: inherit;}
.sub-content{margin-top: 40px;}
.sub-content .blog-title p{font-size: 30px;}
.site-date {display: flex; justify-content: flex-start; gap: 2rem; align-items: center; margin-bottom: 13px;}
.site-date-text {font-weight: 500; color: #929292; font-size: 14px; line-height: 21px; }
.site-date-icn {position: relative; bottom: -2px; padding-right: 5px; }
.site-date-clock {position: relative; bottom: -5px; padding-right: 5px; }
.blog-bnr img {height: auto; width: 100%; border-radius: 3px; }
.blog-content {text-align: left; }
.blog-content p{line-height: 21px;}
.blog-content ul {list-style-type: none; padding: 0; }
.blog-content li {margin-bottom: 10px; font-weight: 400; font-size: 16px; line-height: 24px; }
.blog-content li span {color: #1e1e1e; font-weight: 500; }
.blog-btn {padding: 40px 0; }
.blog-btn a {border: none; border-radius: 3px; outline: none; cursor: pointer; padding: 15px; text-align: center; color: #616161; background: #eeeded; font-weight: 400; font-size: 16px; line-height: 19.2px; }
.blog-btn a:hover{background: #EAEAEA;}
.blog-arrow {position: relative; top: 1px; padding-right: 4px; }
.copyright {background: #e6e6e6; padding: 10px; font-family: "Inter", sans-serif; }
.copyright p {color: #555555; text-align: center; padding: 0; margin: 0; font-size: 14px; line-height: 21px; font-weight: 400; }

/**********Media Queries**************/

@media screen and (max-width: 1850px) {
  .card-title { font-size: 18px; }
  .card-text-cont {padding: 10px; }
  .top-line-text, .card-btn button{font-size: 12px;}
  .card-subhead{font-size: 12px; line-height: 20px;}
  .search-input input,.post-links a, .month, .year, .view-res-btn button{font-size: 13px;}
  .recent-posts-heading, .archives-heading{font-size: 18px;}
}

@media screen and (max-width: 1700px){
  .left-container{width: 20%;}
  .right-container{width: 80%;}
  .navbar, .outer-body-container{margin: 0 3rem;}
  .card{width: 32%;}
}
@media screen and (max-width: 1440px) {
  .card-container{gap: 10px;}
  .card {width: 32.66%; }
  .search-input input,.post-links a, .month, .year, .view-res-btn button {font-size: 12px; }
  .month, .year{padding: 7px;    background-position: right 6px top 48%, 0 0;}
  .page{font-size: 14px;padding: 10px 15px;}
  .top-line-icn{bottom: -4px;padding-right: 0;}
  .top-line-clock{padding-right: 0;}
}

@media screen and (max-width:  1425px){
  .card {width: 32.6%; }
}

@media screen and (max-width: 1360px){
  .card-title {font-size: 17px;line-height: 24px; }
  .recent-posts, .archives{padding: 5px 8px 10px}
}
@media screen and (max-width: 1325px){
  .card {width: 32.5%; }
  .card-text-cont {padding: 8px; }
  .top-line-text, .card-btn button {font-size: 11px; }
}

@media screen and (max-width: 1280px) {
  .right-container, .blog-content-container{width: 70%;}
  .left-container {width: 30%; }
  .card {width: 49.2%; }
  .blog{width: 94.5%;}
}

@media screen and (max-width: 1083px){
  .card{width: 49%;}    
  .blog {width: 92.5%; }
}

@media screen and (max-width: 1020px){
  .blog-title{font-size: 35px;}
  .dropdown-container{flex-wrap: wrap;}
  .recent-posts-heading, .archives-heading {font-size: 16px; }
}

@media screen and (max-width: 980px){ .card {width: 100%; }}

@media screen and (max-width: 900px){
  .blog-title{font-size: 28px;}
  .blog-content p{font-size: 14px;}
  .site-date{gap: 1rem;}
}

@media screen and (max-width: 800px){
  .navbar, .outer-body-container {margin: 0 1rem; }
  .blog-title{font-size: 24px;}
  .blog{width: 90.2%;} 
}

/****mobiles****/

@media screen and (max-width: 600px){
  .navbar {flex-direction: column; justify-content: center; }
  .outer-body-container {flex-direction: column; }
  .left-container, .right-container {width: 92.5%; }
  .navbar, .outer-body-container {margin: 0 1rem; }
  .mob-menu-outer {display: block; border-top: 1px solid #8d8d8d; border-bottom: 1px solid #8d8d8d; width: 100%; padding: 3px 0; }
  .mobile-menu-button {margin: 0 auto; border-top: 1px solid #8d8d8d; border-bottom: 1px solid #8d8d8d; width: 98%; text-align: center; padding: 3px; color: #5b5b5b; }
  .left-container {display: none; }
  .blog-content-container {width: 93%; } 
  .blog {width: 92%; }
}

@media screen and (max-width: 515px){
  .left-container, .right-container, .blog-content-container {width: 91%; } 
  .blog {width: 91%; }
}


@media screen and (max-width: 430px){
  .top-line-text, .card-btn button {font-size: 12px; }
  .site-date-text{font-size: 12px;}
  .left-container, .right-container {width: 85%; }
  .left-container, .right-container, .blog-content-container{width: 89.5%;}
  .blog{width: 88%;}
  .top-line-icn{bottom: -2px;} 
  .top-line-icn img, .top-line-clock img{height: auto;width: 12px;}
  .top-line-clock{bottom: -3px;}
  .blog-title {font-size: 28px; line-height: 35px;}
}

@media screen and (max-width: 375px){
  .left-container, .right-container, .blog-content-container{width: 88%;}
  .blog {width: 87%; }
  .blog-title{font-size: 26px;}
  .site-date{flex-wrap: wrap;justify-content: flex-start;gap: 0;}
}

@media screen and (max-width: 320px){
  .left-container, .right-container, .blog-content-container{width: 85.5%;}
  .blog {width: 85%; }
  .top-line-text, .card-btn button {font-size: 10px; }
}