.fw-5 {font-weight: 500;}
        .fw-7 {font-weight: 700;}
        main {width: 800px;box-sizing: border-box;border-radius: 8px;background: 
            white;
                box-shadow: 5px 6px 6px #94b0bd5e;
            margin: 60px auto;
        }
        .card {display: flex;flex-direction: row;width: 100%;}
        .card .card-left {width: 40%;}
        .card .card-left .card-img {width: 100%;height: 310px;position: relative;}
        .card .card-left .card-img{content: "";
            width: 100%;height: 100%;background-repeat: no-repeat;background-size: cover;display: block;border-radius: 8px 0px 0px 8px;}
        .card .card-left .card-img img {
            width: 100%;
            height: 100%;
        }
        .card-img{
            overflow: hidden;
        }

        .inner-img {
  transition: 0.8s;
}

.inner-img:hover {
  transform: scale(1.3);
}
        .card .card-right {width: 60%;display: flex;flex-direction: column;padding: 40px;box-sizing: border-box;}
        .card .card-right .card-title {font-size: 20px;color: hsl(214, 17%, 51%);}
        .card .card-right .card-text {
            font-size: 14px;
            color: hsl(212, 23%, 69%);
            margin-top: 20px;
            height: 77px;
            overflow: hidden;
        }
        .card .card-right .card-right-body {display: flex;margin-top: 26px;}
        .card .card-right .card-right-body .card-rb-1 {flex-grow: 0.3;}
        .card .card-right .card-right-body .card-rb-1 img {width: 45px;border-radius: 50%;}
        .card .card-right .card-right-body .card-rb-2 {flex-grow: 7;display: flex;flex-direction: column;justify-content: center;row-gap: 3px;}
        .card .card-right .card-right-body .card-rb-2 .card-rb-2-title {color: hsl(214, 17%, 51%);}
        .card .card-right .card-right-body .card-rb-2 .card-rb-2-text {color: hsl(212, 23%, 69%);}
        .card .card-right .card-right-body .card-rb-3 {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .card .card-right .card-right-body .card-rb-3 .card-rb-3-inner {
            background: url(https://rvs-article-preview-component.netlify.app/images/icon-share.svg) hsl(210, 46%, 95%);
            width: 35px;
            height: 35px;
            background-repeat: no-repeat;
            background-size: 50%;
            background-position: center;
            border-radius: 50%;
            cursor: pointer;
        }
        .card .card-right .card-right-body .card-rb-3 .card-rb-3-inner:hover {
            background: url(https://rvs-article-preview-component.netlify.app/images/icon-share-white.svg) hsl(217, 19%, 35%);
            background-repeat: no-repeat;
            background-size: 50%;
            background-position: center;
        }
        .card .card-right .card-right-body .card-rb-3 .card-rb-3-inner-before {
            position: absolute;
            width: 275px;
            height: 55px;
            background: hsl(217, 19%, 35%);
            border-radius: 10px;
            display: flex;
            flex-direction: row;
            color: white;
            box-sizing: border-box;
            align-items: center;
            top: -80px;
            left: -110px;
            opacity: 0;
            justify-content: center;
            padding: 0px 20px;
            z-index: 2;
        }
        .card .card-right .card-right-body .card-rb-3 .card-rb-3-inner-before::after {
            content: "";
            position: absolute;
            top: 40px;
            left: 50%;
            width: 40px;
            height: 40px;
            background: hsl(217, 19%, 35%);
            transform: translate(-50%, -50%) rotate(45deg);
            z-index: -1;
        }
        .card .card-right .card-right-body .card-rb-3 .card-rb-3-inner:hover + .card-rb-3-inner-before {
            opacity: 1;
        }
        .before-1 {flex-grow: 2;letter-spacing: 7px;color: hsl(212, 23%, 69%);display: flex;justify-content: center;}
        .before-2 {flex-grow: 1;}
        .before-3 {flex-grow: 1;}
        .before-4 {flex-grow: 1;}



        /**/
        .blogtitle h1{
            opacity: 3 !important;
            margin: 19px 0 0px !important;
            font-size: 30px !important;
        }
        /*close*/

        @media screen and (max-width: 850px) {
            body {
                height: 100%;
                margin: 70px auto;
            }
            main {
                width: 86%;
            }
            .card {
                flex-direction: column;
            }
            .card .card-left {
                width: 100%;
            }
            .card .card-right {
                width: 100%;
                padding: 40px 25px 20px;
            }
            .card .card-left .card-img {
                height: 210px;
            }
            .card .card-left .card-img::before {
                border-radius: 8px 8px 0px 0px;
            }
            .card .card-right .card-right-body .card-rb-3 .card-rb-3-inner-before {
                top: -3px;
                left: -235px;
                width: 230px;
            }
            .card .card-right .card-right-body .card-rb-3 .card-rb-3-inner-before::after {
                content: unset;
            }
        }




/*readmore*/
.stage {
text-align:center;}
.stage a {
  line-height:1em;
  letter-spacing:0.04em;
  font-family: 'Montserrat', sans-serif;
  font-weight:normal;
  font-size:12px;
  text-decoration:none;
  color:#fff;
  background:#231f20;
  display:inline-block;
  padding:12px 10px 12px 10px;
  transition:background 200ms;
  border-radius:4px;
}
.stage a:hover {
  background:#4a4647;
  transition-timing-function: linear;
  transition-delay: 0.5s;
}
.stage a:after {
  font-family: 'FontAwesome', sans-serif;
  font-weight:300;
  content: "\f105";
  margin-left:20px;
  color:#fff;
  font-size:18px;
  vertical-align:middle;
  transition:color 200ms;
}

.stage a:hover:after {
  color:#fff;
}
/*clode readmore*/


.card-text p{
     overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
           line-clamp: 3; 
   -webkit-box-orient: vertical;
}