*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
    font-family: var(--font);
    user-select: none;
}


:root{
    --font:'Poppins', sans-serif;
    --brown:rgb(116, 165, 173);
    --back:rgba(49, 67, 75, 0.993);
    --black_bg:black;
    /* --brown:#c5872bf8; */
}

.logo img{
    width:165px;
    height:160px;
}
.login img{
    width:40x;
    height:40px;
    cursor: pointer;
}  
.burger{
    display:none;
}
header{
    position: sticky;
    top:0;
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding:2rem 2.3rem;
    height:40px;
    width:100%;
    margin:auto;
    background-color:rgba(61, 85, 95, 0.993);
    /* position: relative; */
    z-index:10000;
}
.ul{
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    grid-column-gap:3.5rem;
    text-align: center;
    margin: auto;
}
.ul li,a {
    list-style:none;
    text-decoration:none;
    font-size:1.2rem;
    font-weight: bold;
    font-family:var(--font);
    /* font-family:Arial, Helvetica, sans-serif; */
    color:white;
    display: inline-block;
}
/* li .active{
    color:black;
} */
li a:hover{
transition:all 0.2;
color:rgb(33, 39, 39);
}


/* ///////////  Right Blog   /////////// */


.name{
    background-color:rgba(210, 230, 236, 0.829);
    border:1px solid  rgb(181, 202, 207);
    border-radius:10px;
    width:100%;
    text-align: center;
    margin-top:2rem;
    margin-bottom:1rem;
}
.name h1{
color:rgba(53, 69, 80, 0.938);
}

.blog{
    border-radius:4px;
    /* background-color:rgba(241, 241, 241, 0.925); */
    /* padding:.3rem; */
}
.blog-sec{
    /* background-color:rgba(255, 255, 255, 0.5);  */
    padding:1rem;
    background-color:rgba(190, 189, 189, 0.322); 
}
.blog-container{
    margin-top:.1rem;
    width:100%;
    height:100vh;
    overflow: hidden;
    overflow-y: scroll;
}
.blog-content{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  grid-column-gap:1rem;
  place-items:center;
  grid-row-gap:2rem;
  justify-content: center;
}
.blog .img img{
width:270px;
height:210px;
border-radius:3px;
}
.blog span{
    font-size:.9rem;
    padding-bottom:.1rem;
    padding-top:.1rem;
    color:rgb(85, 85, 85);
    padding-left:.2rem;
    border-bottom:1px solid black;
}
.blog h3{
    font-size:1.1rem;
    padding-bottom:.7rem;
    padding-top:.2rem;
    width:230px;
    color:rgb(36, 35, 35);
}
.blog p{
    font-size:.9rem;
    width:210px;
    font-weight:300;
}
.blog i{
    font-size:1.5rem;
    color:rgb(49, 49, 49);
}



/* ////////// footer  ////////// */


footer a{
    color:rgb(73, 71, 71);
    text-decoration: none;
    padding:1rem;
    font-size: 1.1rem;
    letter-spacing:.3px;
}
footer{
    background-color:var(--black_bg);
    text-align: center;
    margin: auto;
    width:100%;
    padding:4rem;
    height:300px;
}
footer hr{
    color:rgb(73, 71, 71);
    margin-bottom:.2rem;
    width:100%;
}
footer .addres{
    color:rgb(73, 71, 71);
    float:left;
    padding:2rem 1rem;
    font-size:1rem;
    font-weight: bolder;
    letter-spacing:1px;
}
footer .copy{
    color:rgb(87, 85, 85);
    padding:-.2rem .2rem;
    font-size:1.1rem;
    font-weight: bolder;
    letter-spacing:1px;
}
.copy img{
    width:22px;
    height:22px;
    margin-top:.3rem;
}
.addres li{
    list-style: none;
}








/* /////////////  @meida Query    ////////// */


@media screen and (max-width:1024px) and (min-width:899px){

      /* ///////////////  main content  //////////////// */

      .blog h3{
        width:250px;
    }

    .blog-content{
        padding:1rem  0rem;
        display:grid;
        margin: auto;
        grid-column-gap:2rem;
        grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    }
    .blog img{
        width:200px;
    }
    .blog-container{
        width:850px;
    overflow-y: scroll;
        /* overflow: visible; */
    }
    .blog-sec{
        display: flex;
        justify-content: center;
        place-items:center;
        margin: auto;
    }

 /* ///////// footer  //////// */
    
    
    
 footer .addres{
    padding:2.5rem 0;
}
footer .addres li a{
    font-size:.8rem;
}
footer .copy{
    font-size:1rem;
}
.copy img{
    width:20px;
    height:20px;
}
form input{
    width:200px;
    height:2.3rem;
    font-size: .6rem;
}
footer{
    padding:1rem .7rem 0rem .7rem;
    height:220px;
}
footer a{
    padding:.7rem;
    font-size: 1rem;
}


}







@media screen and (max-width:900px) and (min-width:812px){
    
    /* ///////////////  header  //////////////// */


    .ul{
        flex-direction: column;
        grid-row-gap:2rem;  
        position:absolute;
        margin-top:2%;
        /* background-color:#942a2a; */
        background-color:var(--back);
        /* background-color:var(--brown); */
        width:101%;
        border-radius:3px;
        left:-150%;
        padding:1.7rem;
        transition:0.6s;
        z-index:100000;
        text-align: center;
    }
    header{
    background-color:white;
    box-shadow:0px 1px 1px 2px rgba(0,0,0,0.1);
    width:100%;
    }
    .burger img{
        width:35px;
        height:35px;
        cursor: pointer;
    }
    .burger{
        display: block;
    }
    .ul.active{
        position: absolute;
        left:-1%;
    }
    li a{
        font-size:1.2rem;
    }

    /* ///////////////  main content  //////////////// */

    .blog h3{
        width:250px;
    }

    .blog-content{
        padding:1rem  0rem;
        display:grid;
        margin: auto;
        grid-column-gap:2rem;
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    }
    .blog img{
        width:200px;
    }
    .blog-container{
        width:700px;
    overflow-y: scroll;
        /* overflow: visible; */
    }
    .blog-sec{
        display: flex;
        justify-content: center;
        place-items:center;
        margin: auto;
    }

 /* ///////// footer  //////// */
    
    
    
 footer .addres{
    padding:2.5rem 0;
}
footer .addres li a{
    font-size:.8rem;
}
footer .copy{
    font-size:1rem;
}
.copy img{
    width:20px;
    height:20px;
}
form input{
    width:200px;
    height:2.3rem;
    font-size: .6rem;
}
footer{
    padding:1rem .7rem 0rem .7rem;
    height:240px;
}
footer a{
    padding:.7rem;
    font-size: 1rem;
}



}



@media screen and (max-width:811px) and (min-width:600px){
    
    /* ///////////////  header  //////////////// */


    .ul{
        flex-direction: column;
        grid-row-gap:2rem;  
        position:absolute;
      margin-top:3%;
        /* background-color:#942a2a; */
        background-color:var(--back);
        /* background-color:var(--brown); */
        width:101%;
        border-radius:3px;
        left:-150%;
        padding:1.7rem;
        transition:0.6s;
        z-index:100000;
        text-align: center;
    }
    header{
    background-color:white;
    box-shadow:0px 1px 1px 2px rgba(0,0,0,0.1);
    width:100%;
    }
    .burger img{
        width:35px;
        height:35px;
        cursor: pointer;
    }
    .burger{
        display: block;
    }
    .ul.active{
        position: absolute;
        left:-1%;
    }
    li a{
        font-size:1.2rem;
    }

    /* ///////////////  main content  //////////////// */

    .blog h3{
        width:200px;
    }
    .blog p{
        width:200px;
    }

    .blog-content{
        padding:1rem  0rem;
        display:grid;
        margin: auto;
        grid-column-gap:1rem;
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    }
    .blog .img img{
        width:220px;
        height:220px;
    }
    .blog-container{
        width:560px;
    overflow-y: scroll;
        /* overflow: visible; */
    }
    .blog-sec{
        display: flex;
        justify-content: center;
        place-items:center;
        margin: auto;
    }

 /* ///////// footer  //////// */
    
    
    
 footer .addres{
    padding:2.5rem 0;
}
footer .addres li a{
    font-size:.8rem;
}
footer .copy{
    font-size:1rem;
}
.copy img{
    width:20px;
    height:20px;
}
form input{
    width:200px;
    height:2.3rem;
    font-size: .6rem;
}
footer{
    padding:1rem .7rem 0rem .7rem;
    height:220px;
}
footer a{
    padding:.7rem;
    font-size: 1rem;
}



}
    
@media screen and (max-width:599px) and (min-width:458px){
    
    /* ///////////////  header  //////////////// */


    .ul{
        flex-direction: column;
        grid-row-gap:2rem;  
        position:absolute;
      margin-top:5%;
        /* background-color:#942a2a; */
        background-color:var(--back);
        /* background-color:var(--brown); */
        width:101%;
        border-radius:3px;
        left:-150%;
        padding:1.7rem;
        transition:0.6s;
        z-index:100000;
        text-align: center;
    }
    header{
    background-color:white;
    box-shadow:0px 1px 1px 2px rgba(0,0,0,0.1);
    width:100%;
    }
    .burger img{
        width:35px;
        height:35px;
        cursor: pointer;
    }
    .burger{
        display: block;
    }
    .ul.active{
        position: absolute;
        left:-1%;
    }
    li a{
        font-size:1.2rem;
    }

    .login img{
        width:33px;
        height: 33px;
    }
    .logo img{
        width:145px;
        height:145px;
    }

    /* ///////////////  main content  //////////////// */

    .blog h3{
        width:170px;
        font-size:1rem;
    }
    .blog p{
        width:170px;
    }


    .blog-content{
        padding:1rem  0rem;
        display:grid;
        margin: auto;
        grid-column-gap:1rem;
        grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    }
    .blog .img img{
        width:170px;
        height:170px;
    }
    .blog-container{
        width:420px;
    overflow-y: scroll;
        /* overflow: visible; */
    }
    .blog-sec{
        display: flex;
        justify-content: center;
        place-items:center;
        margin: auto;
    }

 /* ///////// footer  //////// */
    
    
    
 footer .addres{
    padding:2.5rem 0;
}
footer .addres li a{
    font-size:.8rem;
}
footer .copy{
    font-size:1rem;
}
.copy img{
    width:20px;
    height:20px;
}
form input{
    width:200px;
    height:2.3rem;
    font-size: .6rem;
}
footer{
    padding:1rem .7rem 0rem .7rem;
    height:240px;
}
footer a{
    padding:.7rem;
    font-size: 1rem;
}



}



    
@media screen and (max-width:457px) and (min-width:398px){
    
    /* ///////////////  header  //////////////// */


    .ul{
        flex-direction: column;
        grid-row-gap:2rem;  
        position:absolute;
        margin-top:6%;
        /* background-color:#942a2a; */
        background-color:var(--back);
        /* background-color:var(--brown); */
        width:101%;
        border-radius:3px;
        left:-150%;
        padding:1.7rem;
        transition:0.6s;
        z-index:100000;
        text-align: center;
    }
    header{
    background-color:white;
    box-shadow:0px 1px 1px 2px rgba(0,0,0,0.1);
    width:100%;
    }
    .burger img{
        width:35px;
        height:35px;
        cursor: pointer;
    }
    .burger{
        display: block;
    }
    .ul.active{
        position: absolute;
        left:-1%;
    }
    li a{
        font-size:1.1rem;
    }

.login img{
    width:33px;
    height:33px;
}
.logo img{
    width:142px;
    height:142px;
}

    /* ///////////////  main content  //////////////// */

    .blog h3{
        width:155px;
        font-size:.9rem;
    }
    .blog p{
        width:155px;
    }
    .blog span{
        font-size:.8rem;
    }

    .blog-content{
        padding:1rem  0rem;
        display:grid;
        margin: auto;
        grid-column-gap:.7rem;
        grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    }
    .blog .img img{
        width:130px;
        height:130px;
    }
    .blog-container{
        width:370px;
    overflow-y: scroll;
        /* overflow: visible; */
    }
    .blog-sec{
        display: flex;
        justify-content: center;
        place-items:center;
        margin: auto;
    }


 /* ///////// footer  //////// */
    
    
    
 footer .addres{
    padding:2.5rem 0;
}
footer .addres li a{
    font-size:.8rem;
}
footer .copy{
    font-size:1rem;
}
.copy img{
    width:20px;
    height:20px;
}
form input{
    width:200px;
    height:2.3rem;
    font-size: .6rem;
}
footer{
    padding:1rem .7rem 0rem .7rem;
    height:260px;
}
footer a{
    padding:.7rem;
    font-size: 1rem;
}



}

@media screen and (max-width:397px) and (min-width:340px){
    
    /* ///////////////  header  //////////////// */


    .ul{
        flex-direction: column;
        grid-row-gap:2rem;  
        position:absolute;
        margin-top:7%;
        /* background-color:#942a2a; */
        background-color:var(--back);
        /* background-color:var(--brown); */
        width:101%;
        border-radius:3px;
        left:-150%;
        padding:1.7rem;
        transition:0.6s;
        z-index:100000;
        text-align: center;
    }
    header{
    background-color:white;
    box-shadow:0px 1px 1px 2px rgba(0,0,0,0.1);
    width:100%;
    padding:2rem .8rem;
    }
    .burger img{
        width:35px;
        height:35px;
        cursor: pointer;
    }
    .burger{
        display: block;
    }
    .ul.active{
        position: absolute;
        left:-1%;
    }
    li a{
        font-size:1.1rem;
    }

.login img{
    width:32px;
    height:32px;
}
.logo img{
    width:138px;
    height:138px;
}

    /* ///////////////  main content  //////////////// */

    .blog h3{
        width:145px;
        font-size:.8rem;
        color:black;
    }
    .blog p{
        width:150px;
    }
    .blog span{
        font-size:.7rem;
    }

    .blog-content{
        padding:1rem  0rem;
        display:grid;
        margin: auto;
        grid-column-gap:.7rem;
        grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    }
    .blog .img img{
        width:124px;
        height:124px;
    }
    .blog-container{
        width:310px;
    overflow-y: scroll;
        /* overflow: visible; */
    }
    .blog-sec{
        display: flex;
        justify-content: center;
        place-items:center;
        margin: auto;
    }


 /* ///////// footer  //////// */
    
    
    
 footer .addres{
    padding:2.5rem 0;
}
footer .addres li a{
    font-size:.8rem;
}
footer .copy{
    font-size:1rem;
}
.copy img{
    width:20px;
    height:20px;
}
form input{
    width:200px;
    height:2.3rem;
    font-size: .6rem;
}
footer{
    padding:1rem .7rem 0rem .7rem;
    height:260px;
}
footer a{
    padding:.7rem;
    font-size: 1rem;
}



}


@media screen and (max-width:339px) and (min-width:280px){
    
    /* ///////////////  header  //////////////// */


    .ul{
        flex-direction: column;
        grid-row-gap:2rem;  
        position:absolute;
        margin-top:7%;
        /* background-color:#942a2a; */
        background-color:var(--back);
        /* background-color:var(--brown); */
        width:101%;
        border-radius:3px;
        left:-150%;
        padding:1.7rem;
        transition:0.6s;
        z-index:100000;
        text-align: center;
    }
    header{
    background-color:white;
    box-shadow:0px 1px 1px 2px rgba(0,0,0,0.1);
    width:100%;
    padding:2rem .8rem;
    }
    .burger img{
        width:35px;
        height:35px;
        cursor: pointer;
    }
    .burger{
        display: block;
    }
    .ul.active{
        position: absolute;
        left:-1%;
    }
    li a{
        font-size:1.1rem;
    }

.login img{
    width:32px;
    height:32px;
}
.logo img{
    width:130px;
    height:130px;
}

    /* ///////////////  main content  //////////////// */

    .blog h3{
        width:230px;
        font-size:.8rem;
        color:black;
    }
    .blog p{
        width:230px;
    }
    .blog span{
        font-size:.8rem;
    }

    .blog-content{
        padding:1rem  0rem;
        display:grid;
        margin: auto;
        grid-column-gap:.7rem;
        grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    }
    .blog .img img{
        width:230px;
        height:230px;
    }
    .blog-container{
        width:250px;
    overflow-y: scroll;
        /* overflow: visible; */
    }
    .blog-sec{
        display: flex;
        justify-content: center;
        place-items:center;
        margin: auto;
    }

     /* ///////// footer  //////// */
    
    
    
     footer .addres{
        padding:2.5rem 0;
    }
    footer .addres li a{
        font-size:.8rem;
    }
    footer .copy{
        font-size:1rem;
    }
    .copy img{
        width:20px;
        height:20px;
    }
    form input{
        width:200px;
        height:2.3rem;
        font-size: .6rem;
    }
    footer{
    padding:1rem .7rem 0rem .7rem;
        height:260px;
    }
    footer a{
        padding:.7rem;
        font-size: 1rem;
    }


}