/*Blogs post css*/
body {
	 background: #eee;
}
 .date__box {
	 position: absolute;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 color: #ccc;
	 border: 4px solid;
	 font-weight: bold;
	 padding: 5px 10px;
}
 .date__box .date__day {
	 font-size: 22px;
}
 .blog-card {
	font-size: 18px;
	 padding: 30px;
	 position: relative;
}
 .blog-card .date__box {
	 opacity: 0;
	 transform: scale(0.5);
	 transition: 300ms ease-in-out;
}
 .blog-card .blog-card__background, .blog-card .card__background--layer {
	 z-index: -1;
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
}
 .blog-card .blog-card__background {
	 padding: 15px;
	 background: white;
}
 .blog-card .card__background--wrapper {
	 height: 100%;
	 clip-path: polygon(0 0, 100% 0, 100% 80%, 0 60%);
	 position: relative;
	 overflow: hidden;
}
 .blog-card .card__background--main {
	 height: 80%;
	 position: relative;
	 transition: 300ms ease-in-out;
	 background-repeat: no-repeat;
	 background-size: cover;
}
 .blog-card .card__background--layer {
	 z-index: 0;
	 opacity: 0;
	 background: rgba(51, 51, 51, 0.9);
	 transition: 300ms ease-in-out;
}
 .blog-card .blog-card__head {
	 height: 300px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
 .blog-card .blog-card__info {
	 z-index: 10;
	 background: white;
	 padding: 20px 15px;
}
 .blog-card .blog-card__info h1 {
	 transition: 300ms ease-in-out;
}
 .blog-card:hover .date__box {
	 opacity: 1;
	 transform: scale(1);
}
 .blog-card:hover .card__background--main {
	 transform: scale(1.2) rotate(5deg);
}
 .blog-card:hover .card__background--layer {
	 opacity: 1;
}
 .blog-card:hover .blog-card__info h1 {
	 color: orangered;
}
 a.icon-link {
	 color: #363738;
	 transition: 200ms ease-in-out;
}
 a.icon-link i {
	 color: blue;
}
 a.icon-link:hover {
	 color: blue;
	 text-decoration: none;
}
 .btn {
	 background: white;
	 color: #363738;
	 font-weight: bold;
	 outline: none;
	 box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
	 overflow: hidden;
	 border-radius: 0;
	 height: 50px;
	 line-height: 50px;
	 display: inline-block;
	 padding: 0;
	 border: none;
}
 .btn:focus {
	 box-shadow: none;
}
 .btn:hover {
	 background: blue;
	 color: #fff;
}
 .btn.btn--with-icon {
	 padding-right: 20px;
}
 .btn.btn--with-icon i {
	 padding: 0px 30px 0px 15px;
	 margin-right: 10px;
	 height: 50px;
	 line-height: 50px;
	 vertical-align: bottom;
	 color: white;
	 background: blue;
	 clip-path: polygon(0 0, 70% 0, 100% 100%, 0% 100%);
}
 .btn.btn--only-icon {
	 width: 50px;
}

.blogs_section{
    margin: 50px;
}


@media only screen and (max-width:475px){
	.blogs_section{
    margin: 0px;
}
}

/*Blog Best Country CSS*/

.Blog_details_container {
    width: 90%;
    margin: 0 auto;
    padding: 20px;
	font-size: 18px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    margin: 0;
    font-size: 2.5em;
}

header p {
    margin: 0;
    color: #777;
}

.blog-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.Blog_content {
    font-size: 1.2em;
    line-height: 1.6;
}

.comments-section {
    margin-top: 40px;
}

.comments-section h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.comment {
    margin-bottom: 20px;
}

.comment-author {
    font-weight: bold;
}

.comment-text {
    margin: 5px 0;
}

#comment-form {
    display: flex;
    flex-direction: column;
}

#comment-input {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.comment_button {
    align-self: flex-start;
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: #fff;
    cursor: pointer;
}

.comment_button:hover {
    background-color: #0056b3;
}