/*-----------------------------
** Blog Area Start
------------------------------*/


.blog{
  &.blog-page{
    padding: 70px 0px 40px;
    .single-blog{
      margin-bottom: 30px;
    }
  }
    &.blog-details{
      padding: 70px 0px 70px;
        .blog-details-box{
          .blog-images{
            .img{
              img{
                width: 100%;
              }
            }
          }
            .details{
                .content{
                    .blog-text{
                        margin-bottom: 10px;
                    }
                }
            }
        }
    }
   .blog-box{
     position: relative;
     background: #fff;
     margin-bottom: 30px;
     box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.05);
     border: 1px solid rgba(0, 0, 0, 0.1);
     .blog-images{
      width: 100%;
      margin-right: 15px;
      position: relative;
      overflow: hidden;
       .img{
         width: 100%;
         overflow: hidden;
         @include transition(.5s);
         img{
           @include transition(.5s);
         }
       }
       .date{
         position: absolute;
         background: $base-color;
         z-index: 2;
         top: 0;
         left: 30px;
         height: 100px;
         width: 60px;
        text-align: center;
        border-radius: 0px 0px 50px 50px;
         p{
           margin: 0;
           padding: 0;
           color: #fff;
           line-height: 18px;
           font-size: 16px;
         }
       }
     }
     .details{
       padding: 22px 30px 25px;
       .blog-title{
         font-size: 22px;
         line-height: 32px;
         font-weight: 600;
       }
       .post-meta{
        padding-left: 0px;
        margin-bottom: 10px;
        margin-top: 8px;
        li{
          list-style: none;
          display: inline-block;
          a{
            font-size: 16px;
            margin-right: 10px;
            transition: $transition;
            color: #010c2f;
            i{

            }
            &:hover{
              color: $base-color;
            }
          }
        }
      }
     
       .content{
         .blog-text{
            font-size: 16px;
            line-height: 26px;
            margin-bottom: 0px;
          }
          blockquote{
              background: $base-color;
              padding: 30px 30px 30px;
              margin-top: 10px;
              p{
                  margin-bottom: 0px;
                  color: #fff;
              }
          }
       }
     }
     &:hover{
      .blog-images{
        .img{
          transform: scale(1.15);
        }
      }
     }
    
   }
   .page-link-btn{
     font-size: 18px;
     max-width: 640px;
     font-size: 18px;
     line-height: 28px;
     margin: 0 auto;
     font-weight: 300;
     color: $body-color;
     text-decoration: underline;
   }
  }
  
  .blog-details{
    .social-link{
        background: #f3f6ff;
        display: flex;
        justify-content: center;
        padding: 20px 20px 20px;
        .tag{
          .title{
            font-size: 14px;
            color: #000000;
            display: inline-block;
            margin-bottom: 0px;
            line-height: inherit;
          }
          a{
            color: #545558;
            font-size: 14px;
            display: inline-block;
            margin-bottom: 0px;
          }
        }
        .social-links{
          padding-left: 0px;
          margin-bottom: 0px;
          li{
            display: inline-block;
            a{
              width: 30px;
              height: 30px;
              line-height: 30px;
              font-size: 14px;
              text-align: center;
              border-radius: 50%;
              display: inline-block;
              color: #fff;
              margin-left: 2px;
              background: $base-color;
              transition: $transition;
              &:hover{
                box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.3);
              }
            }
          }
        }
      }
  
    }
    .comment-area{
      margin-top: 43px;
      .top-header-area{
        .title{
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 25px;
        } 
      }
     .all-comment{
       margin-top: 18px;
       width: 100%;
       li{
         margin-bottom: 30px;
         width: 100%;
         .single-comment{
           position: relative;
           display: flex;
           border-bottom: 1px solid rgba(0, 0, 0, 0.10);
           padding-bottom: 16px;
           margin-bottom: 20px;
           .left-area{
             text-align: center;
             padding-right: 30px;
             margin-right: 30px;
             position: relative;
             &::before{
               position: absolute;
               content: "";
               height: 70%;
               width:1px;
               background:rgba(0, 0, 0, 0.10);
               right: 0px;
               top: 50%;
               transform: translateY(-50%);
             }
             img{
               width: 60px;
               height: 60px;
               border-radius: 50%;
               border: 2px solid $base-color;
               box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.10);
             }
             .name{
               margin-top: 15px;
               font-size: 14px;
               color: #143250;
               font-weight: 600;
               margin-bottom: 0px;
             }
             .date{
               font-size: 12px;
               color: #143250;
               margin-bottom: 0px;
             }
           }
           .right-area{
             flex: 1;
             .header-area{
               margin-bottom: 10px;
               .title{
                 font-size: 16px;
                 font-weight: 600;
                 color: #143250;
                 margin-top: 0px;
                 border: 0px;
                 padding: 0px;
                 margin-bottom: 0px;
               }
             }
             .comment-body{
               p{
                 font-size: 16px;
                 line-height: 26px;
               }
             }
             .comment-footer{
               .links{
                 a{
                   display: inline-block;
                   font-size: 14px; 
                 }
               }
             }
           }
         }
         .replay-review{
           margin-left: 100px;
         }
         .replay-area{
           position: relative;
           padding-left: 127px;
           margin-bottom: 20px;
           textarea{
             width: 100%;
             height: 50px;
             padding: 10px 20px;
             border: 1px solid rgba(0, 0, 0, 0.1);
           }
           button{
             width: 120px;
             height: 40px;
             line-height: 40px;
             border: 0px;
             background: $base-color;
             color: #fff;
             font-weight: 600;
             border-radius: 50px;
             font-size: 14px;
             margin-top: 10px;
             display: inline-block;
             text-align: center;
             margin-right: 10px;
           }
           .remove{
             width: 120px;
             height: 40px;
             border: 0px;
             background: $base-color;
             border-radius: 50px;
             color: #fff;
             font-weight: 600;
             font-size: 14px;
             line-height: 40px;
             display: inline-block;
             text-align: center;
             margin-top: 0px;
           }
         }
       }
     }
     .review-area{
      .title{
         font-size: 24px;
         font-weight: 600;
         margin-bottom: 5px;
      }
     }
   
     .write-comment-area{
       padding-top: 20px;
       input{
         width: 100%;
         height: 55px;
         background: #fff;
         color: #555;
         border: 1px solid rgba(0, 0, 0, 0.10);
         padding: 0px 20px;
         font-size: 14px;
         margin-bottom: 15px;
         @include placeholder-color(#555);
       }
       textarea{
         width: 100%;
         height: 190px;
         background: #fff;
         color: #888888;
         border: 1px solid rgba(0, 0, 0, 0.10);
         padding: 10px 20px;
         font-size: 14px;
         margin-bottom: 15px;
         resize: none;
         @include placeholder-color(#888888);
       }
       .submit-btn{
         background: $base-color;
         border: 0px;
         color: #fff;
         padding: 14px 30px;
         border-radius: 0px;
         font-size: 14px;
         font-weight: 600;
         border-radius: 50px;
         
         cursor: pointer;
         border: 1px solid $base-color;
         transition: $transition;
         &:hover{
           background: #fff;
           color: $base-color;
         }
         &:focus{
           outline: 0px;
         }
       }
     }
  }
  
    // Serch Widget Area Start
    .serch-widget{
        padding: 30px 30px 30px;
        background: #fff;
        box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.1);
        .title{
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        input{
          width: 100%;
          height: 40px;
          background: none;
          border: 0px;
          border-bottom: 1px solid $base-color;
          &:focus{
              border: 0px;
              border-bottom: 1px solid $base-color;
          }
        }
        .submit{
            margin-top: 20px;
          background: $base-color;
          border: 0px;
          color: #fff;
          cursor: pointer;
          font-size: 14px;
          border-radius: 50px;
          padding: 7px 25px;
          border: 1px solid $base-color;
          transition: $transition;
          &:hover{
            background: #fff;
            color: $base-color;
          }
          &:focus{
            outline: 0;
          }
        }
    }

    // Categori Widget Area Start
    .categori{
        padding: 22px 30px 22px;
        background: #fff;
        box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.1);
        .title{
          font-size: 20px;
          line-height: 30px;
          font-weight: 600;
        }
        .categori-list{
          padding-left: 0px;
          margin-bottom: 0px;
          margin-top: 15px;
          li{
            list-style: none;
            line-height: 36px;
            a{
              display: flex;
              justify-content: space-between;
              transition: $transition;
              &:hover,
              &.active
              {
                color: $base-color;
                padding-left: 5px;
              }
            }
          }
        }
    }

    // Recent Post Widget Area Start
    .recent-post-widget{
        padding: 20px 30px 30px;
        background: #fff;
        box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.1);
        .title{
          font-size: 20px;
          line-height: 30px;
          font-weight: 600;
         
        }
        .post-list{
          padding-left: 0px;
          margin-bottom: 0px;
          margin-top: 20px;
          li{
            list-style: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.10);
            margin-bottom: 15px;
            padding-bottom: 15px;
            .post{
              display: flex;
              .post-img{
                margin-right: 20px;
              }
              .post-details{
                flex: 1;
                .post-title{
                  font-size: 14px;
                  color: #2f3744; 
                  transition: $transition;
                  &:hover{
                    color: $base-color;
                  }
                }
                .date{
                  color: #7b8698;
                  font-size: 12px;
                  margin-bottom: 0px;
                }
              }
              
            }
            &:last-child{
              border-bottom: 0px;
              margin-bottom: 0px;
              padding-bottom: 0px;
            }
            }
          }
    }

    // newsletter Widget Area Start
    .newsletter-widget{
        padding: 30px 30px 30px;
        background: #fff;
        box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.1);
        .title{
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        input{
          width: 100%;
          height: 40px;
          background: none;
          border: 0px;
          border-bottom: 1px solid $base-color;
          &:focus{
              border: 0px;
              border-bottom: 1px solid $base-color;
          }
        }
        .submit{
            margin-top: 20px;
          background: $base-color;
          border: 0px;
          color: #fff;
          cursor: pointer;
          font-size: 14px;
          border-radius: 50px;
          padding: 7px 25px;
          border: 1px solid $base-color;
          transition: $transition;
          &:hover{
            background: #fff;
            color: $base-color;
          }
          &:focus{
            outline: 0;
          }
        }
    }

    // tag Widget Area Start
    .tags{
        padding: 22px 30px 15px;
        background: #fff;
        box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.1);
        .title{
          font-size: 20px;
          line-height: 30px;
          font-weight: 600;
        }
        .tags-list{
          padding-left: 0px;
          margin-bottom: 0px;
          margin-top: 29px;
          li{
            list-style: none;
            display: inline-block;
            a{
              font-size: 14px;
              padding: 6px 22px;
              border: 1px solid rgba(0, 0, 0, 0.20);
              border-radius: 50px;
              display: inline-block;
              transition: $transition;
              margin-bottom: 15px;
              margin-right: 9px;
              &:hover{
                background: $base-color;
                border-color: $base-color;
                color: #fff;
                box-shadow: 0px 8px 10px 2px rgba(0, 0, 0, 0.15);
              }
            }
          }
        }
      }

    .blog-aside{
        .categori,
        .recent-post-widget,
        .newsletter-widget,
        .tags
        {
            margin-top: 30px;
        }
    }
  
   
  





    
  




/*-----------------------------
** Blog Area End
------------------------------*/