@font-face {
    font-family: open-sans;
    src: url(../fonts/OpenSans-Regular.ttf) format('woff2');
}
@font-face {
    font-family: guru-regular;
    src: url(../fonts/Teko-Regular.ttf);
}
@font-face {
    font-family: guru-300;
    src: url(../fonts/Teko-Light.ttf);
}
@font-face {
    font-family: rale-400;
    src: url(../fonts/raleway.light.ttf);
}
@font-face {
    font-family: guru-semi;
    src: url(../fonts/Teko-SemiBold.ttf);
}

body{
    background-color: #efefef;
}

.col-7 .comment-on-blog{
    margin-top: 20px;
    padding: 15px 25px;
    padding-left: 50px;
    background-color: white;
}
.col-7 .blog-body{
    padding: 35px 25px;
    background-color: white;
}
.col-7 .title h1{
    color: black;
    font-weight: 500;
    font-family: guru-semi;
    font-size: 30px;
}
.col-7 .comment-body-h4{
    color: rgb(70, 70, 70);
    font-weight: 400;
    font-family: open-sans;
    font-size: 18px;
}
.col-3{
    /* margin-left:20px ; */
    /* padding: 0 50px; */
}

.search-blog{
    padding: 35px 40px;
    margin: 0 20px;
    background-color: white;
}
.search-blog input{
    width: 60%;
    padding: 10px;
    border: 1px solid #c2c2c2;
}

.best-blog{
    padding: 35px 40px;
    margin: 20px 20px;
    background-color: white;
}
.best-blog a{
    color: #0083F2;
}
.best-blog a:hover{
    color: black;
}

.blog-body-h1{
    font-size: 40px;
    font-weight: 300;
    font-family: rale-400;
    color: #3f3f3f;
}
.landing-single-blog .col-7 img{
    width: 100%;
}
.landing-single-blog .col-7 p:first-child{
   font-size: 14px;
   font-family: open-sans;
}
.landing-single-blog .col-7 p{
   font-size: 16px;
   font-family: open-sans;
}

.comment-on-blog .form{
    padding: 0;
}
.comment-on-blog .form textarea{
    width: 90%;
    border: 1px solid #a7a7a7;
    outline: none;
    resize: none;
    padding: 20px;
    background-color: #fbfbfb;
}
.comment-on-blog .form textarea::placeholder{
    font-size: 14px;
    color: #a7a7a7;
    font-family: open-sans;
}
.comment-on-blog .form input{
    width: 40%;
    margin: 5px 0;
    border: 1px solid #a7a7a7;
    outline: none;
    resize: none;
    padding: 20px;
    background-color: #fbfbfb;
}
.comment-on-blog .form input::placeholder{
    font-size: 14px;
    color: #a7a7a7;
    font-family: open-sans;
}

.comment-on-blog .form button{
    width: 25%;
    margin: 5px 0;
    outline: none;
    resize: none;
    border: none;
    padding: 15px 10px;
    color: white;
    font-size: 16px;
    font-family: open-sans;
    background-color: #666666;
}
.comment-on-blog .form button:hover{
    cursor: pointer;
    background-color: #222222;
}


@media(max-width:500px) and (min-width:375px){
    body{
        overflow-x: hidden;
    }
    .desktop-container {
        padding: 0 1%;
    }
    .row.d-flex{
        flex-direction: column;
    }
    .row .col-7{
        width: 100%;
    }
    .row .col-3{
        margin-top: 20px;
        width: 100%;
    }
    .search-blog {
        margin: 0px;
    }
    .best-blog {
        margin: 0;
        margin-top: 20px;
    }
    .col-7 .comment-on-blog {
        margin-top: 20px;
        padding: 15px 25px;
        padding-left: 25px;
        background-color: white;
    }
    .comment-on-blog .form input {
        width: 90%;
    }
    .comment-on-blog .form button {
        width: 40%;
    }
} 
@media(max-width:375px) and (min-width:320px){
    body{
        overflow-x: hidden;
    }
    .desktop-container {
        padding: 0 1%;
    }
    .row.d-flex{
        flex-direction: column;
    }
    .row .col-7{
        width: 100%;
    }
    .row .col-3{
        margin-top: 20px;
        width: 100%;
    }
    .search-blog {
        margin: 0px;
    }
    .best-blog {
        margin: 0;
        margin-top: 20px;
    }
    .col-7 .comment-on-blog {
        margin-top: 20px;
        padding: 15px 25px;
        padding-left: 25px;
        background-color: white;
    }
    .comment-on-blog .form input {
        width: 90%;
    }
    .comment-on-blog .form button {
        width: 40%;
    }
} 
@media(max-width:320px){
    
    .desktop-container {
        padding: 0 1%;
    }
    .row.d-flex{
        flex-direction: column;
    }
    .row .col-7{
        width: 100%;
    }
    .row .col-3{
        margin-top: 20px;
        width: 100%;
    }
    .search-blog {
        margin: 0px;
    }
    .best-blog {
        margin: 0;
        margin-top: 20px;
    }
    .col-7 .comment-on-blog {
        margin-top: 20px;
        padding: 15px 25px;
        padding-left: 25px;
        background-color: white;
    }
    .comment-on-blog .form input {
        width: 90%;
    }
    .comment-on-blog .form button {
        width: 40%;
    }
}