


/*===============================
    32.BLOG DETAILS css 
================================*/







.blog-dteails-content{
    border: 2px solid $border-color-2;
    padding: 50px;
    @media #{$xs} {
        padding: 50px 20px;
    }
    @media #{$sm} {
        padding: 50px;
    }
    & .blog-details-top{
	    & > span{
	        background: $theme-color;
	        color: $white;
	        font-weight: 700;
	        font-size: 14px;
	        letter-spacing: 3px;
	        padding: 0 15px;
	        line-height: 30px;
	        

	    }
	    & .title{
	        font-size: 32px;
	        line-height: 42px;
	        padding-right: 40px;
	        padding-top: 25px;
	        @media #{$lg} {
	            padding-right: 0;
	            font-size: 27px;
	        }
	        @media #{$md} {
	            padding-right: 0;
	            font-size: 30px;
	        }
	        @media #{$xs} {
	            padding-right: 0;
	            font-size: 18px;
	            line-height: 28px;
	        }
	        @media #{$sm} {
	            padding-right: 0;
	            font-size: 21px;
	            line-height: 32px;
	        }
	    }
	    & ul{
	        padding: 20px 0;
	        & li{
	            display: inline-block;
	            color: $text-color-3;
	            font-size: 14px;
	            margin-right: 28px;
	            @media #{$xs} {
	                margin-right: 00px;
	                margin-bottom: 10px;
	            }
	            @media #{$sm} {
	                margin-right: 20px;
	                margin-bottom: 0;
	            }
	            & i{
	                padding-right: 6px;
	            }
	        }
	    }
	    & > p{
	        color: $text-color-3;
	        font-size: 15px;
	        padding-bottom: 35px;
	    }
    }
    & .blog-details-bath{
    	& img{
    		width: 100%;
    	}
    	& .title{
    		font-size: 30px;
    		padding-top: 40px;
    		padding-bottom: 20px;
    		@media #{$xs} {
    			font-size: 26px;
    		}
    		@media #{$sm} {
    			font-size: 26px;
    		}
    	}
    	& p{
    		border-bottom: 1px solid $border-color-2;
    		padding-bottom: 35px;
    	}
    	& ul{
    		padding-left: 30px;
    		@media #{$lg} {
    			padding-left: 18px;
    		}
    		@media #{$xs} {
    			padding-left: 0px;
    		}
    		@media #{$sm} {
    			padding-left: 30px;
    		}
    		& li{
				color: $text-color-3;
				line-height: 30px;
				@media #{$xs} {
					font-size: 13px;
				}
				@media #{$sm} {
					font-size: 15px;
				}
    		}
    	}
    }
    // & .blog-details-quote{
    // 	background: #f3f5ff;
    // 	border-radius: 10px;
    // 	padding: 50px 50px 57px;
    // 	position: relative;
    // 	z-index: 5;
    // 	@media #{$xs} {
    // 		padding: 50px 10px 57px;
    // 	}
    // 	@media #{$sm} {
    // 		padding: 50px 50px 57px;
    // 	}
    // 	& p{
    // 		color: $heading-color;
    // 		font-weight: 700;
    // 		& span{
    // 			color: $text-color;
    // 		}
    // 	}
    // 	& .title{
    // 		line-height: 38px;
    // 		padding-top: 13px;
    // 		@media #{$lg} {
    // 			font-size: 20px;
    // 		}
    // 		@media #{$xs} {
    // 			font-size: 17px;
    // 			line-height: 27px;
    // 		}
    // 		@media #{$sm} {
    // 			font-size: 19px;
    // 			line-height: 29px;
    // 		}
    // 	}
    // 	& i{
    // 		font-size: 190px;
    // 		color: #e4e9ff;
    // 		z-index: -1;
    // 		position: absolute;
    // 		bottom: 15px;
    // 		right: 30px;
    // 		@media #{$xs} {
    // 			font-size: 90px;
    // 		}

    // 	}
    // }
    // & .blog-details-confarance{
    // 	& .confarance-flex{
    // 		@media #{$xs} {
    // 			display: block !important;
    // 		}
    // 		& .confarance-thumb-1{
    // 			width: 50%;
	//     		@media #{$xs} {
	//     			width: 100%;
	//     		}
    // 			& img{
    // 				width: 100%;
    // 				padding-top: 10px;
    // 			}
    // 		}
    // 		& .confarance-thumb-2{
    // 			width: 83%;
    // 			padding-left: 35px;
    // 			@media #{$xs} {
	//     			padding-left: 0;
	//     			width: 100%;
	//     			padding-top: 20px;
	//     		}	
    			
    // 		}
    // 	}
    // }
    & .blog-details-bar{
		padding: 30px;
		background: #000;
		background: #f5f2ff;
    	& .blog-social{
			display: block;
			text-align: center;
    		& .title{
    			font-size: 20px;
    			
    			padding-bottom: 30px;
    		}
    	}
    }
    // & .blog-details-next-prev{
    // 	border-top: 1px solid $border-color;
    // 	border-bottom: 1px solid $border-color;
    // 	position: relative;
    // 	& .post-prev{
    // 		& a{
    // 			& span{
    // 				color: $text-color-2;
    // 				font-weight: 700;
    // 				font-size: 14px;
    // 				
    // 				letter-spacing: 2px;
    // 			}
    // 			& .title{
    // 				font-size: 28px;
    // 				
    // 				padding-top: 5px;
    // 				@media #{$lg} {
    // 					font-size: 20px;
    // 				}
    // 				@media #{$xs} {
    // 					font-size: 18px;
    // 				}
    // 				@media #{$sm} {
    // 					font-size: 18px;
    // 				}

    // 			}
    // 		}
    // 	}
    // 	& .post-next{
	// 		& a{
	// 			& span{
    // 				color: $text-color-2;
    // 				font-weight: 700;
    // 				font-size: 14px;
    // 				
    // 				letter-spacing: 2px;
	// 			}
	// 			& .title{
    // 				font-size: 28px;
    // 				
    // 				padding-top: 5px;
    // 				@media #{$lg} {
    // 					font-size: 20px;
    // 				}
    // 				@media #{$xs} {
    // 					font-size: 18px;
    // 				}
    // 				@media #{$sm} {
    // 					font-size: 18px;
    // 				}
	// 			}
	// 		}
    // 	}
    // 	& > a{
    // 		position: absolute;
    // 		left: 50%;
    // 		top: 50%;
    // 		transform: translate(-50%, -50%);
    // 		@media #{$xs} {
    // 			display: none;
    // 		}
    // 		@media #{$sm} {
    // 			display: block;
    // 		}
    // 	}
    // }
    // & .blog-details-releted-post{
		
    // 	& .title{
    // 		font-size: 26px;
    // 		padding-bottom: 5px;
    // 	}
    // 	& .blog-details-releted-item{
    // 		box-shadow: 0px 8px 16px 0px rgba(93, 93, 93, 0.06);
    // 		& .releted-thumb{
    // 			& img{
    // 				width: 100%;
    // 			}
    // 		}
    // 		& .releted-content{
	// 			padding: 35px 40px;
	// 			@media #{$lg} {
	// 				padding: 35px 20px;
	// 			}
	// 			@media #{$md} {
	// 				padding: 35px 20px;
	// 			}
	// 			@media #{$xs} {
	// 				padding: 35px 15px;
	// 			}
	// 			@media #{$sm} {
	// 				padding: 35px 40px;
	// 			}
	// 			& span{
	// 				font-size: 14px;
	// 				color: $text-color-3;
	// 				padding-bottom: 5px;
	// 				& i{
	// 					padding-right: 5px;
	// 				}
	// 			}
	// 			& .title{
	// 				font-size: 20px;
	// 				line-height: 30px;
	// 				@media #{$lg} {
	// 					font-size: 17px;
	// 				}
	// 				@media #{$xs} {
	// 					font-size: 18px;
	// 				}
	// 				@media #{$sm} {
	// 					font-size: 20px;
	// 				}
	// 			}
	// 			& p{
	// 				font-size: 14px;
	// 				line-height: 26px;
	// 				padding-top: 3px;
	// 			}
    // 		}
    // 	}
    // }
	// & .blog-details-written{
	// 	border: 2px solid $border-color;
	// 	padding: 40px;
	// 	@media #{$xs} {
	// 		padding: 15px;
	// 	}
	// 	@media #{$sm} {
	// 		padding: 31px;
	// 	}

	// 	& .written-area{
	// 		@media #{$xs} {
    // 			display: block !important;
    // 		}
	// 		& .written-thumb{
	// 			width: 100%;
	// 			& img{
	// 				width: 100%;
	// 			}
	// 		}
	// 		& .written-content{
	// 			padding-left: 40px;
	// 			@media #{$xs} {
	//     			padding-left: 0;
	//     		}
	// 			& span{
	// 				
	// 				font-size: 12px;
	// 				font-weight: 700;
	// 				letter-spacing: 2px;
	// 				color: $text-color-3;
	// 				@media #{$xs} {
	// 	    			padding-top: 20px;
	// 	    		}
	// 			}
	// 			& .title{
	// 				font-size: 36px;
	// 				@media #{$lg} {
	// 					font-size: 30px;
	// 				}
	// 				@media #{$xs} {
	// 					font-size: 22px;
	// 				}
	// 				@media #{$sm} {
	// 					font-size: 30px;
	// 				}
	// 			}
	// 			& p{
	// 				font-size: 14px;
	// 				color: $text-color-3;
	// 				line-height: 26px;
	// 				padding-top: 7px;
	// 			}
	// 		}
	// 	}
	// }
	// & .blog-details-comments{
	// 	position: relative;
	// 	& > .title{
	// 		font-size: 26px;
	// 		padding-bottom: 5px;
	// 	}

	// 	& .blog-comments-area{
	// 		margin-top: 40px;
	// 		padding-left: 130px;
	// 		position: relative;
	// 		border-bottom: 1px solid $border-color;
	// 		padding-bottom: 25px;

	// 		@media #{$xs} {
    // 			padding-left: 0px;
    // 		}
	// 		@media #{$sm} {
    // 			padding-left: 110px;
    // 		}
	// 		& .blog-left{
	// 			& .title{
	// 				font-size: 18px;
	// 			}
	// 			& span{
	// 				font-size: 12px;
	// 				color: $theme-color;
	// 				font-weight: 700;
	// 				
	// 				letter-spacing: 2px;
	// 				padding-top: 5px;
	// 				padding-bottom: 15px;
	// 			}
	// 		}
	// 		& .blog-right{
	// 			& a{
	// 				color: #69a1bb;
	// 				font-weight: 700;
	// 				font-size: 14px;
	// 				line-height: 40px;
	// 				border: 2px solid $border-color;
	// 				padding: 0 20px;
	// 				border-radius: 30px;
	// 			}
	// 		}
	// 		& p{
	// 			font-size: 14px;
	// 		}
	// 		& img{
	// 			position: absolute;
	// 			left: 0;
	// 			top: -10px;
	// 	    	@media #{$xs} {
	//     			width: 18%;
	//     			position: inherit;
	//     			top: 0;
	//     			padding: 15px 0;
	//     		}
	// 	    	@media #{$sm} {
	//     			width: 18%;
	//     			position: absolute;
	//     			top: -10px;
	//     			padding: 0;
	//     		}
	// 		}
	// 		&.ml-125{
	// 			@media #{$xs} {
	// 				margin-left: 50px;
	// 			}
	// 		}
	// 		& .d-flex{
	// 			@media #{$xs} {
	// 				display: block !important;
	// 			}
	// 			@media #{$sm} {
	// 				display: flex !important;
	// 			}
	// 		}
	// 	}
	// }
	// & .blog-details-post-comments{
	// 	margin-top: 40px;
	// 	& .title{
	// 		font-size: 26px;
	// 		padding-bottom: 30px;
	// 	}
	// 	& .post-comments-area{
	// 		padding: 30px 50px 50px;
	// 		@media #{$sm} {
	// 			padding: 30px 50px 50px;
	// 		}
	// 		@media #{$xs} {
	// 			padding: 20px;
	// 		}
	// 		& .input-box{
	// 			& textarea{
	// 				width: 100%;
	// 				border: 0;
	// 				height: 150px;
	// 				resize: none;
	// 				padding-top: 20px;
	// 				padding-left: 30px;
	// 				&::placeholder{
	// 					opacity: 1;
	// 					font-size: 14px;
	// 					color: #6b93aa;
	// 				}
	// 			}
	// 			& input{
	// 				width: 100%;
	// 				border: 0;
	// 				line-height: 60px;
	// 				padding-left: 30px;
	// 				&::placeholder{
	// 					opacity: 1;
	// 					color: #6b93aa;
	// 					font-size: 14px;
	// 				}
	// 			}
	// 			& button{
	// 				background: #ff4b57;
	// 				line-height: 60px;
	// 				padding: 0 60px;
	// 				border-color: #ff4b57;
	// 				border-radius: 30px;
	// 				
	// 				font-size: 14px;
	// 				@media #{$xs} {
	// 					line-height: 50px;
	// 					padding: 0 30px;
	// 				}
	// 				& i{
	// 					padding-right: 6px;
	// 				}
	// 			}
	// 		}
	// 	}
	// }
}


