:root{
    --orange:#0983a9;
    --black:#333;
    --light-color:#777;
    --border:.1rem solid rgb(118 115 115 / 20%);;
    --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

*{
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
}

html{
    font-size: 62.5%;
 
}
.data {

 

  

    padding:4rem;
  
    font-size:1.4rem;
  
    min-height:62vh;
  
    
  
  }

section{
    padding:2rem 10%;
}
body{
    background: url(../images/body.jpg);
}
a{
  word-wrap: break-word;
}
.btn-1{
    margin-top: 1rem;
    display: inline-block;
    background:#3398CC;
    color:#fff;
    border-radius: .5rem;
    padding:.9rem 3rem;
    cursor: pointer;
    font-size: 1.7rem;
}

.btn-1:hover{
    background:#011949;
}

.main-header{
    position: relative;
    top:0; left:0; right:0;
    z-index: 1000;
    background: #fff;
    box-shadow: var(--box-shadow);
    display: flex;
    align-items: center;
    padding:1.2rem 7%;
}

.main-header .logo{
    color:#444;
    font-size: 2.5rem;
    margin-right: auto;
}



.main-header .main-navbar a{
    color:#444;
    margin-right: 2rem;
    font-size: 1.7rem;
    text-transform: capitalize;
}

.main-header .main-navbar a:hover{
    color:var(--orange);
}

.main-header .icons i {
   
    color: #444;
  
    
    font-size: 1.7rem;
   
}

.main-header .icons i:hover{
    color:#fff;
    background:var(--orange);
}

.main-header .search-form{
    position: absolute;
    background:#fff;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    box-shadow: var(--box-shadow);
    top:110%; right:7%;
    height:6rem;
    width:50rem;
    padding:1rem;
    display: none;
}

.main-header .search-form.active{
    display: flex;
}

.main-header .search-form #search-box{
    width:100%;
    border:var(--border);
    border-radius: .5rem;
    padding:1rem;
    font-size: 1.7rem;
    color:var(--black);
    height: 100%;
}

.main-header .search-form label{
    font-size: 2rem;
    padding-left: 1rem;
    padding-right: .5rem;
    cursor: pointer;
    color:var(--black);
}

.main-header .search-form label:hover{
    color:var(--orange);
}

#menu-bars{
    display: none;
}
.home {
   
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 3rem;
    min-height: 35vh;
    padding-top: 0;
    background: url(../images/header.jpg);
    background-size: cover;
    background-position: center;

    
  
  }
  
  
  .home .content {
    /* -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
            flex: 1 1 42rem; */
            width: 80%;
            margin: auto;
            text-align: center;
  }
  .find{
      position: relative;
      width: 500px;
      margin: auto;
  }
  
    .search{
      /* margin-top: 10px; */
      width: 100%;
      outline: none;
      background-color: #ffffff;
      border: 1px solid rgb(0 137 209);
      box-shadow: 0 24px 13px rgb(46 56 58 / 20%);
      color: #59546A;
     font-size:1.4rem;
      border-radius: 45px;
     
      padding: 1.2rem 4rem;
    }
    
    #submit {
        background-color: #0983a9;
        border-radius: 0 45px 45px 0;
        padding: 1rem 4rem;
        color: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        font-size: 1.6rem;
    }
  
  .home .content h3 {
    font-size: 7rem;
    text-transform: capitalize;
    color: #fff;
    margin-bottom: 4rem;
  }
  
  
.cont{
    display: grid;
    grid-template-columns:  1fr;
    gap:1.5rem;
    /* background:#eee; */
}

.cont .posts-container .post{
    width:100%;

    background:#fff;
    /* border:var(--border); */
    padding:2rem;
    border-radius: .5rem;
    margin-bottom: 1.5rem;
    /* box-shadow: var(--box-shadow); */
}
.cont .posts-container .post .box{
border: var(--border);
    box-shadow: var(--box-shadow);
    padding: 2rem;
    margin-bottom: 2rem;
}
.cont .posts-container .post.top{
    /* background:#F9F7E5; */
    border:var(--border);
    box-shadow: none;
    padding:2rem;
}
.cont .posts-container .post.top h4{
 color: #C54F45;
 text-transform: capitalize;
 
}
.cont .posts-container .post.top h4 span{
    color:#888;
}
.cont .posts-container .post.top h4 .dark{
    color:#444;
    margin-right: 1rem;
}
.cont .posts-container .post h2{
 
    color: #0983A9;;
    padding-bottom: 1rem;
    padding-top: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #d9d4ca;
    text-transform: capitalize;


}
.cont .posts-container .post .box ul{
color: #777;
    line-height: 2;
    list-style-type: none;
}
.cont .posts-container .post .box ul li a{
   font-size: 1.4rem;
   text-transform: capitalize;
   color:#777;

    }
    .cont .posts-container .post .box ul li span{
        color: #aeadad;}
        .cont .posts-container .post .box h4{
            border-bottom: var(--border);
    color: #444;
    padding: 1rem 0;
        }
.cont .posts-container .post .box h4 a{

    color: #444;
   
    margin-bottom: 2rem;
font-size: 1.6rem;
text-transform: capitalize;
}
.cont .posts-container .post .box ul li .view{
    color: #0983A9!important;;
    margin-top: 1rem;
    }
    .cont .posts-container .post .box ul li .view i{
      color: #0983A9!important;;
      font-size: 1.4rem;
      padding: 0;
      }
    


.cont .posts-container .post .image{
    height: 40rem;
    width:100%;
    border-radius: .5rem;
    object-fit: cover;
}

.cont .posts-container .post .date{
    padding-top: 2rem;
    font-size: 1.5rem;
    color:var(--orange);
}

.cont .posts-container .post .title{
    padding-top: 1.5rem;
    font-size: 2.5rem;
    color:var(--black);
}

.cont .posts-container .post .text{
    color:var(--light-color);
    font-size: 1.6rem;
    line-height: 1.7;
    padding:1rem 0;
}

.cont .posts-container .links{
    border-top: var(--border);
    margin-top: .5rem;
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
}

.cont .posts-container .links .user{
    margin-right: auto;
}


.cont .posts-container .links .icon{
    padding-right: 1rem;
}

.cont .posts-container .links a{
    font-size: 1.5rem;
    color:var(--light-color);
}

.cont .posts-container .links a i{
    padding-right: .2rem;
    color:#3398CC;
}

.cont .posts-container .links a:hover{
    color:var(--orange);
    text-decoration: none;
}



.cont .sidebar .box{
    /* border:var(--border); */
    border-radius: .5rem;
    overflow:hidden;
    /* background:#fff; */
    margin-bottom: 1.5rem;
}

.cont .sidebar .box .title{
    padding:1.5rem;
    font-size: 2rem;
    color:#c54f45;;
  
    text-transform: capitalize;
}





.cont .sidebar .box .category{
    padding:1rem 1.5rem;
}

.cont .sidebar .box .category a{
    padding:.4rem 0;
    font-size: 1.6rem;
    color:var(--orange);
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.cont .sidebar .box .category a span{
    background:var(--light-color);
    color:#fff;
    border-radius: .5rem;
    padding:.5rem;
}

.cont .sidebar .box .category a:hover{
    color:var(--black);
    text-decoration: none;
}

.cont .sidebar .box .category a:hover span{
    background-color:var(--orange);
}

.cont .sidebar .box .p-post{
    padding:1rem 2rem;
}

.cont .sidebar .box .p-post a{
    padding:1rem 0;
    display: block;
}
.cont .sidebar .box .p-post .flex {
    display: flex;
    align-items: baseline;
}

.cont .sidebar .box .p-post a p{
    color:#444;
    font-size: 1.4rem;
    /* padding-bottom: 1rem; */
    text-decoration: none;
}
.cont .sidebar .box .p-post a .flex .icon i{
color: rgba(0,0,0,0.2);
font-size: 1rem;
margin-right: 1rem;}

.cont .sidebar .box .p-post a h3:hover{
    cursor: pointer;
    /* color: var(--orange); */
}


.cont .sidebar .box .p-post a span{
    color:var(--light-color);
    font-size: 1.2rem;
}

.cont .sidebar .box .p-post a span i{
    padding-right: .2rem;
}

.cont .sidebar .box .p-post a:hover{
    color:var(--orange);
    text-decoration: none;
}

.cont .sidebar .box .tags{
    padding:1rem;
}

.cont .sidebar .box .tags a{
    display: inline-block;
    padding:1rem 1.5rem;
    font-size: 1.5rem;
    color:var(--black);
    border-radius: .5rem;
    border:var(--border);
    margin:.5rem;
}

.cont .sidebar .box .tags a:hover{
    background:var(--black);
    color:#fff;
    text-decoration: none;
}
/* signup page */

.signup-wrapper{

    padding: 4rem; 
  
    height: 100%;
  
    display: flex;
  
    justify-content: center;
  
    align-items: center;
  
  
  
   }
  
   .signup-form{
  
        margin-top:60px;
  
    position: relative;
  
    width: 100%;
  
    max-width: 600px;
  
    padding: 60px 40px 40px;
    background: #fff;
  
    /* background: rgba(0,0,0,0.7); */
  
    border:2px solid #0983A9;
  
    border-radius: 10px;
  
    color: #fff;
  
    box-shadow: 0 15px 25px rgba(0,0,0,0.5);
  
   }
  
  
  
  .signup-form h2 {
  
    text-align: center;
  
    letter-spacing: 4px;
  
    margin-bottom: 2rem;
  
    font-size: 2.4rem;
  
    color: #0983A9;
  
  }
  
  .signup-form .input-group {
  
    position: relative;
  
    width:100%;
  
  }
  
  .signup-form .input-group input,textarea,select {
  
    width: 100%;
  
    padding: 10px 0;
  
    font-size: 1.4rem;
  
    color:#333;
  
    letter-spacing: 1px;
  
    margin-bottom: 30px;
  
    border: none;
  
    border-bottom: 1px solid rgba(0,0,0,.2);
  
    outline: none;
  
    background-color: transparent;
  
    resize: none;
  
  }
  
  .signup-form .input-group label{
  
      color: #444;
  
      font-size: 1.4rem;
  
  }
  
  .submit-btn {
  
     display: block;
  
     margin-left: auto;
  
     border: none;
  
     outline: none;
  
     background: #0983A9;
  
     font-size: 1.4rem;
  
     text-transform: uppercase;
  
     letter-spacing: 1px;
  
     padding: 10px 20px;
  
     border-radius: 5px;
  
     color: #fff;
  
     cursor: pointer;
  
     margin-bottom: 1.2rem;
  
   }
  
    /* login-form */
  
  .login-wrapper {
  
      padding:7rem ;
  
    
  
     display: flex;
  
     justify-content: center;
  
     align-items: center;
  
   }
  
 .login-wrapper .form {
  
       margin-top:40px;
  
     position: relative;
  
     width: 100%;
  
     max-width: 380px;
  
     padding: 80px 40px 40px;
  
     /* background: rgba(0,0,0,0.7); */
  
     border:2px solid #0983A9;
     background: #fff;
  
     border-radius: 10px;
  
     color: #fff;
  
     box-shadow: 0 15px 25px rgba(0,0,0,0.5);
  
   }
  
   

  
 .login-wrapper .form h2 {
  
     text-align: center;
  
     letter-spacing: 4px;
  
     margin-bottom: 2rem;
  
     font-size: 2.4rem;
  
     color: #0983A9;
  
   }
  
 .login-wrapper .form .input-group {
  
     position: relative;
  
   }
  
 .login-wrapper .form .input-group input {
  
     width: 100%;
  
     padding: 10px 0;
  
     font-size: 1.4rem;
  
     color:#111;
  
     letter-spacing: 1px;
  
     margin-bottom: 30px;
  
     border: none;
  
     border-bottom: 1px solid rgba(0,0,0,.2);
  
     outline: none;
  
     background-color: transparent;
  
   }
  
 .login-wrapper .form .input-group label{
  
       color: #333;
  
       font-size: 1.4rem;
  
   }
  
    /* advertise page */
  
  .content-top{
  
   margin-top:80px;
  
  
  
    text-align: center;
  
    list-style-type: none;
  
   
  
  }
  
  .content-top h2{
  
    color: #272F38;
  
    padding: 1rem;
  
    
  
    font-size: 2.1rem;
  
  }
  
  .content-top li{
  
    padding:.5rem;
  
    color: #384350;
  
    font-size: 1.4rem;
  
  }
  
  .content-top ul{
  
    list-style-type: none;
  
  }
  /*dashboard*/
  .dash-container{
    position: relative;
    width:  100%;
    display:flex;
    margin: 0rem auto;
   min-height: 100vh;
  
    
    
  }
  .dash{
      padding:1rem;
  }
  .dash-nav{
    position: absolute;
    top: 0;
    width :250px;
    height: 100%;
    background:#003e70;
    transition: 0.5s;
    /*overflow: hidden;*/
  }
  .dash-nav.active{
    width: 10px;
  
  }
  .dash-nav ul{
    position: absolute;
    top:0;
    left:0;
    width:100%
  }
  .dash-nav ul li{
    position: relative;
    width:100%;
    list-style: none;
  }
  .dash-nav ul li:hover{
    background:#033258;
    cursor:pointer;
  
  }
  /*.dash-nav ul li:nth-child(1){*/
  /*  margin-bottom:20px ;*/
  /*}*/
  
  .dash-nav ul li:nth-child(1):hover{
    background: transparent;
  }
  .dash-nav ul li a h2{
    font-size: 15px;
    
   
  }
  .dash-nav .link .dash-title h2{
      margin-top:0px;
      margin-bottom:10px;
  }
  
  
  
  .dash-nav ul li .link{
     
     padding:.5rem;
    position: relative;
    display: block;
    width: 100%;
    /*display: flex;*/
    text-decoration: none;
    color:#fff;
    font-size: 12px;
    border-bottom:1px solid rgba(0,0,0,0.2);
    
  
  }
  .dash-nav ul li a{
      color:#fff;
      text-decoration:none;
      text-align:left;
      font-size:1.6rem;
  }
  /*.dash-nav ul li a .icon{*/
  /*  position: relative;*/
  /*  display: block;*/
  /*  min-width: 60px;*/
  /*  height: 60px;*/
  /*  line-height: 60px;*/
  /*  text-align: center;*/
  
  /*}*/
  .dash-nav ul li a .icon .fab{
    color: #fff;
    font-size: 15px;
  }
  .dash-nav ul li  .dash-title{
    position: relative;
   
    display: block;
    padding: 0 30px;
    /*height: 60px;*/
    line-height: 25px;
    white-space: nowrap;
  }
  .dash-nav ul li a .brand{
    text-transform: uppercase;
    font-size: 15px;
  }
  .main-container{
    position: relative;
    width: calc(100% - 250px);
   
    left:250px;
    /* min-height: 100vh; */
    /*background: #f5f5f5;*/
    transition: 0.5s;
  }
  .main-container.active{
    width: calc(100% - 10px);
    left:10px;
  }
  
  
  .main-container .topbar{
    width: 100%;
    background: rgb(181 179 179 / 30%);
    height: 60px;
    padding-left: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .toggle h4{
    position: absolute;
      top: 13px;
      left: 49px;
  }
  .toggle{
    position: relative;
    width: 60px;
    height: 60px;
    
    cursor: pointer;
  }
  .toggle::before{
    content: '\f007';
    font-family: "Font Awesome 5 Free";
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 60px;
    font-size: 24px;
    text-align: center;
    color: #111;
  }
  
  
  




.footer {
    background: url(../images/footer.jpg) no-repeat;
    background-position: bottom;
    background-size: cover;
    padding-top: 4rem;
   
  }
  
  .footer .box-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 2rem;
  }
  
  .footer .box-container .box h3 {
    font-size: 2.2rem;
    text-transform: capitalize;
    color: #fff;
    padding: 1rem 0;
  }
  
  .footer .box-container .box .link {
    display: block;
    padding: .5rem 0;
    font-size: 1.4rem;
    line-height: 2;
    color: #c1c1c1;
    text-transform: capitalize;
  }
  
  .footer .box-container .box .link i {
    padding-right: .5rem;
    color: #0983a9;
  }
  
  .footer .box-container .box .link:hover {
    color: #0983a9;
  }
  
  .footer .box-container .box .link:hover i {
    padding-right: 2rem;
  }
  
  .footer .box-container .box p {
    padding: .5rem 0;
    font-size: 1.4rem;
    line-height: 2;
    color: #c1c1c1;
  }
  
  .footer .box-container .box p span {
    color: #0983a9;
  }
  
  
  
  .footer .box-container .box .share {
    margin-top: 2rem;
  }
  
  .footer .box-container .box .share a {
    height: 4.5rem;
    width: 4.5rem;
    line-height: 4.5rem;
    font-size: 1.7rem;
    background: #0983a9;
    color: #fff;
    border-radius: 50%;
    margin-right: 0.3rem;
    text-align: center;
  }
  
  .footer .box-container .box .share a:hover {
    background: #0983a9;
  }
  
  .footer .credit {
    font-size: 1.4rem;
    text-transform: capitalize;
    color: rgb(224 224 224);
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 0.1rem solid rgb(227 227 227 / 32%);
    text-align: center;

  
  }
  
  .footer .credit span {
    color: #0983a9;
  }





/* media queries  */

@media (max-width:991px){

    html{
        font-size: 55%;
    }

    .main-header{
        padding:1.5rem;
    }

    section{
        padding:2rem;
    }    

    .container{
        grid-template-columns: 2fr 1fr;
    }
    .dash-nav{
        left:-300px;
    }
    .dash-nav.active{
        left:0;
    }  

    .main-container{
        width:100%;
        left:0px;   
    
    }

}

@media (max-width:768px){

    #menu-bars{
        display: inline-block;
    }

    .main-header .search-form{
        top:100%; left: 0; right: 0;
        border-top: var(--border);
        width: 100%;
        border-radius: 0;
    }

    .main-header .main-navbar{
        position: absolute;
        top:100%; left: 0; right: 0;
        border-top: var(--border);
        border-bottom: var(--border);
        background: #fff;        
        display: none;
    }

    .main-header .main-navbar.active{
        display: block;
    }

    .main-header .main-navbar a{
        display: block;
       color:#444;
        padding:1.5rem;
       
       
    }
    .find{
        width:100%;
    }

    .cont{
        grid-template-columns: 1fr;
        gap:0;
    }

    .cont .posts-container .post .image{
        height: 30rem;;
    }
    footer .container{
        display: block;
    } 
    .signup-wrapper , .login-wrapper{
        padding:3rem 2rem;
    }


   
}

@media(max-width:480px){
    html{
        font-size: 50%;
    }
   
    .dash-nav{
        width: 100%;
        left: -100%;
        z-index: 1;
    }
    .dash-nav.active{
        width: 100%;
        left:0;
    }
  
    .toggle.active{
        /* position: fixed; */
        z-index: 1;
        right: 0;
        left:283px;
       
  
    }
    .toggle.active::before{
        color:#fff;
    }
    
    .dash-ban{
              left:0;
          }
          .dash-bottom{
              left:0;
              
          }
          .dash-container{
              width:100%;
          }
          
          
              .topbar h4{
                  display:block;
              }
              .toggle.active h4{
                  display:none;
                  
              }
              
              
    
  }
  @media only screen and (max-width: 500px) {
    .g-recaptcha {
    transform:scale(0.77);
    transform-origin:0 0;
    }
    }
    /* article_des css */
    .social-icons .fab, .fas, .fa-brands{
      font-size: 2.4rem;
        /* background: #ffb033; */
        margin:.4rem .2rem ;
        color: #fff;
        padding: 1rem;
        border-radius: 50%;
    }
    .social-icons .fa-buffer{
    
      background:#303030;
    
    }
    .social-icons .fa-buffer:hover{
      border:2px solid #303030;
     color:#303030;
     background:#fff;
    
    }
    .social-icons .fa-digg{
    
    background:#1B5891;
    
    }
    .social-icons .fa-digg:hover{
    border:2px solid #1B5891;
    color:#1B5891;
    background:#fff;
    
    }
    .social-icons .fa-envelope{
    
    background:#F7AE3C;
    
    }
    .social-icons .fa-envelope:hover{
    border:2px solid #F7AE3C;
    color:#F7AE3C;
    background:#fff;
    
    }
    .social-icons .fa-facebook-f{
    
    background:#3C5B9B;
    
    }
    .social-icons .fa-facebook-f:hover{
    border:2px solid #3C5B9B;
    color:#3C5B9B;
    background:#fff;
    
    }
    .social-icons .fa-linkedin-in{
    
    background:#0073B2;
    
    }
    .social-icons .fa-linkedin-in:hover{
    border:2px solid #0073B2;
    color:#0073B2;
    background:#fff;
    
    }
    .social-icons .fa-reddit-alien{
    background:#FF1A00;
    }
    .social-icons .fa-reddit-alien:hover{
    border:2px solid #FF1A00;
    color:#FF1A00;
    background:#fff;
    }
    .social-icons .fa-stumbleupon{
    
    background:#EB4924;
    }
    .social-icons .fa-stumbleupon:hover{
    border:2px solid #EB4924;
    color:#EB4924;
    background:#fff;
    }
    .social-icons .fa-tumblr{
    
    background:#2A445F;
    }
    .social-icons .fa-tumblr:hover{
    border:2px solid #2A445F;
    color:#2A445F;
    background:#fff;
    }
    .social-icons .fa-twitter{
    
    background:#2DAAE1;
    }
    .social-icons .fa-twitter:hover{
    border:2px solid #2DAAE1;
    color:#2DAAE1;
    background:#fff;
    
    }
    .social-icons .fa-whatsapp{
    
    background:#009C15;
    
    }
    .social-icons .fa-whatsapp:hover{
    border:2px solid #009C15;
    color:#009C15;
    background:#fff;
    
    }