/* Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?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 {
	background-color:#14121d;
}

@media screen and (max-width:3840px) {
    button.now {
    	float:left;
    	border:0;
    	text-align:center;
    	background:#ff0000;
    	color:#fff;
    	border:1px solid #ff0000;
    	font-family:manrope;
    	font-size:12px;
    	min-width:120px;
    	margin-right: 1.2rem;
    	padding:10px;
    	margin:1rem 1rem 0 0;
    	border-radius:3px;
    	outline:none;
    	transition:0.2s linear;
    }
    
    button.now:hover{
    	background:#191723;	
    	color:#ffffff;
    }
    
    button.later {
    	float:left;
    	border:0;
    	text-align:center;
    	background:#191723;
    	color:#ffffff;
    	border:1px solid #ff0000;
    	font-family:manrope;
    	font-size:12px;
    	min-width:120px;
    	margin:1rem 0 0 0;
    	padding:10px;
    	border-radius:3px;
    	outline:none;
    }
    
    /* Custom Scroll Bar*/
    ::-webkit-scrollbar {
        width: 0;
    }
     
    /* BG of scroll bar */
    ::-webkit-scrollbar-track {
        -webkit-border-radius: none;
        border-radius: none;
    }
     
    /* Handle of sroll bar */
    ::-webkit-scrollbar-thumb {
    	height:80px;
        background: #ff5e14; 
    }
    
    ::selection {
    	background:#ff4500;
    	color:#ffffff;
    }
    	
    ::placeholder {
    	color:#ffffffcc;
    	font-weight:400;
    }
    	
    .search-bar {
      	position: relative;
      	overflow: hidden;
      	width:50%;
    	margin:0 auto;
    	text-align:center;
    }
    
    section {
      	padding: 70px 0;
      	margin: 0 auto;
      	text-align: center;
    	width:75%;
    }    
    
    input[type=text].blog-search-input {
    	width: 100%;
      	padding: 14px;
      	background:#3f3f3f33;
    	border:1.2px solid #ff4500;
      	color: #fff;
      	outline:none;
    	font-family:manrope;
    	font-weight:500;
    	border:1.8px solid #ff0000;
    	border-radius:5px;	
    	font-size:14px;
    }
    	
    button.blog-search {
      	position: absolute;
      	right: 0;
      	background: #ff0000;
      	padding: 13px 20px;
      	outline:none;
    	border:1.8px solid #ff0000;
      	top: 0;
    	transition:0.5s linear;	
    	border-top-right-radius: 5px;
    	border-bottom-right-radius: 5px;
    }
    	
    button.blog-search i {
      	color: #ffffff;
      	font-size: 18px;
    	padding:2px;
      	transform: rotate(-6deg);
    }
    
    p {
    	font-family:manrope;
    	font-size:12px;
    	line-height:1.45em;
    	margin:5px 0;
    	text-align:left;
    	color:#ffffff;
    }
    
    .horizontal-line {
    	text-align:center;
    	margin:30px auto;
    }
    	
    .sort-text {
      	position: relative;
      	display: inline-block;
      	padding: 0 10px;
    	color:#a5a5a5;
    	font-family:manrope;
    	text-align:center;
    	font-size:12px;
    }
    
    .sort-text::before, .sort-text::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 100px; /* Adjust the width of the lines */
      height: 1.5px; /* Adjust the height of the lines */
      background-color: #323232; /* Line color */
    }
    
    .sort-text::before {
      left: -100px; /* Position the line before the text */
    }
    
    .sort-text::after {
      right: -100px; /* Position the line after the text */
    }
    	
    div.sort-tags {
    	width:60%;
    	text-align:center;
    	margin:20px auto;
    }
    	
    .filter-button {
      	background-color: #14121d; /* Set the background color */
      	color: white; /* Set the text color */
      	border: none; /* Remove the border */
      	padding: 10px 20px; /* Add some padding around the text */
      	cursor: pointer; /* Change cursor to a pointer on hover */
    	font-family:Manrope;
    	border:1.5px solid #323232;
    	border-radius:5px;
    	transition:0.2s linear;
    	font-size:12px;
    	margin:3px 0;	
    }
    
    .filter-button:hover {
      	background-color: #ff0000; /* Change the background color on hover */
    	border:1px solid #ff0000;
    }
    	
    .filter-button.active {
    	background-color: #ff0000; /* Change the background color for active state */
    	border: 1px solid #ff0000;
    }
    
    p.sorting-message {		
    	width:95%;
    	font-size:13px;
    	font-weight:500;
    	color:#ffffff;
    	margin:20px auto;
    }
    
    p.tag {
    	color:orangered;
    	font-size:12px;
    	font-weight:500;
    	padding:3% 0 1% 0;
    	font-family:manrope;
    	margin:0;
    }
    	
    img.blog-image{
      	width: 100%;
      	object-fit:cover;
    	border-radius:3px;
    }
    
    hr {
    	background:orangered;
    	border:none;
    	height:4px;
    	width:7%;
    	margin:0 auto;
    }
    
    .container {
      max-width: 100%;
      width: 100%;
      margin: 0 auto;
    }
    
    main {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap:30px 30px;
      margin:0;
      padding:10px;
    }
    
    header{
      width: 100%;
      margin: 0 auto;
      text-align:center;
    }
    
    header h1 {
      margin:150px auto 20px auto;
      font-size:50px;
      font-family:poppins;
      color:#ffffff;
      font-weight:800;
      width:70%;
    }
    
    h2 {
    	font-family:manrope;
    	margin:0 auto 40px auto;
    	color:orangered;
    	font-size:16px;
    }
    
    h3 {
    	font-size:18px;
    	line-height:1.3em;
    	margin:0 0 20px 0;
    	padding:0;
    	text-align:left;
    	color:#ffffff;
    	font-family:manrope;
    	font-weight:600;
    }
    
    .singleBlog {
    	margin:0;
    	padding:25px;
    	border: 1.5px solid #323232;
    	background:#191723;
    	border-radius:5px;
    }
    
    .singleBlog:hover {
    	transform: scale(1.02);
    	transition: 0.1s linear;
    	border: 1.5px solid #ff0000;
    	background:#211a26;
    	cursor:pointer;
    	background-image:linear-gradient(to bottom, rgba(255,0,0,0), #ff000040);
    }
    
    .col-sm-4 {
    	margin:5% 0 5% 0;
    }
    
    .col-sm-12 {
    	margin:0 0 0 0;
    }
    
    div.nextpage {
    	text-align:center;
    }
    
    .pagination {
      display: inline-block;
    }
    
    .pagination a:hover:not(.active) {
    	background-color:orangered;
    	color:#fff;
    }
    
    .pagination a {
      float: left;
      padding: 10px 20px;
      text-decoration: none;
      transition: background-color .3s;
      border: 1px solid orangered;
      margin: 0 8px;
      font-family:manrope;
      color:#ffffff;
    }
    
    .pagination a.active {
      background-color:orangered;
      color: white;
    }
}

@media screen and (max-width:992px) {
	
  main{
    grid-template-columns: repeat(2, 1fr);
	grid-gap: 20px;
  }
  
  div.container {
	padding:0;
  }
}


@media screen and (max-width:1024px) {
	
	main {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 25px;
		padding:10px;
	}
	
	section {
		padding:12px 0;	
		width:100%;
	}
  
	div.container {
		padding:0;
	}
	
	div.search-bar {
		width: 70%;
	}
	
	div.new {
		height:350px;
		width:90%;
	}
	
	div.sort-tags {
		width:90%;
	}
	
	header h1 {
		font-size:7vw;
		margin:20% auto 5% auto;
		width:95%;
	}

	h2 {
		font-size:16px;		
		margin:4% auto;
		width:80%;
	}

	h3 {
		font-size:18px;  
		text-align:left;
		margin:2% 0;
	}	
  
	.fa-share-alt {
		font-size:25px;
	}
  
	p {
		font-size:13px;
		margin:1% 0;
	}
	
	p1 {
		font-size:15px;
	}
	
	p2 {
		font-size:18px;
	}
	
	p.tag {
		font-size:1.7vw;
		margin:2% 0;
	}
	
	.singleBlog {
		margin:0;
	}
	
}

@media screen and (max-width:500px) {
	
	div.search-bar {
		width: 80%;
	}
		
	::placeholder {
		font-size:12px;	
	}
		
	input[type=text].blog-search-input {
		font-size:16px;
		padding:18px 10px;
		border:1px solid #ff4500;
	}
		
	button.blog-search i { 
		padding:8px;
	}
	
	div.sort-tags { 
		width:94%;
	}
	
	.filter-button {
		margin:3px 1px;
		font-size:10px;
	}
	
	p.sorting-message {		
		width:92.5%;
		font-size:15px;
		margin: 10px auto;
	}
	
	section {
		margin:0 0 0 0;
		padding:20px 0;
		width:100%;
	}

    main {
      grid-template-columns: repeat(1, 1fr);
	  grid-gap:30px;
	  padding:15px;
    }
	
	div.container {
		width:100%;
		padding:0;
	}
	
	div.new {
		height:230px;
		width:100%;
	}
	
	header h1 {
		margin:120px 0 20px 0;
		font-size:8vw;
		width:100%;
		font-weight:800;
	}
	
	button.now, button.later  {
		font-size:12px;
	}
	
	p {
		font-size:12px;
		line-height:1.45em;
	}
	
	p.tag {
		font-size:12px;
		margin: 2% 0;
	}
	
	p1 {
		font-size:12px;
		width:90%;
		margin:3% auto;
	}
	
	p2 {
		font-size:15px;
		line-height:1.45em;
		width:90%;
	}
	
	h2 {
		font-size:3.5vw;
		width:80%;
		margin:0 auto 30px auto;
		font-family:manrope;
		color:orangered;
	}	
	
	h3 {
		font-size:4vw;
		margin:0 0 20px 0;
		text-align:left;
		line-height:1.1em;
	}	
	
	hr {
		width:10%;
		margin:3% auto;
	}
	
	.singleBlog {
		padding:30px 20px;	
		background:#131620;
		border:1.5px solid #2b2838;
		border-radius:6px;
	}
	
	.singleBlog:hover {
		transform:none;
		border:1px solid orangered;
		transition:0.2s linear;
		background-image:linear-gradient(to bottom, rgba(255,0,0,0), #ff000020);
	}
	
	.pagination {
		display: inline-block;
	}
	
	.pagination a:hover:not(.active) {
		background-color:green;
		color:#fff;
	}
	
	.pagination a {
		color: #ffffff;
		float: left;
		padding: 8px 16px;
		text-decoration: none;
		transition: background-color .3s;
		border: 1px solid orangered;
		margin: 0 8px;
	}
}