@import url(./fonts.css);

html,body{
  margin: 0%;
  box-sizing: border-box;
  overflow-x: hidden;
}

:root{
  /* theme colors */
  --text-gray:#3f4954;
  --light:#F1F1F1;
  --white: #ffffff;
  --bg-color: #0f0f0f;
  --dark-color: #0a0a0a;
  --dayLight: #00c6fb;
  --dayDark: #005bea;
  --nightLight: #2a5298;
  --nightDark: #1e3c72;

  /* theme gradient colors */
  --day: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
  --night: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);

  /* theme font-family */
  --lev_Nuni:"lev_Nuni",cursive;
  --reg_Nuni:"reg_Nuni",cursive;
  --bold_Nuni:"bold_Nuni",cursive;
  --lev_Mont:"lev_Mont",cursive;
  --reg_Mont:"reg_Mont",cursive;
  --bold_Mont:"bold_Mont",cursive;
}

/*-- ---Global Classes--- --*/
a{
  text-decoration: none; 
  color: var(--text-gray);
}

.flex-row{
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap;
}

ul{list-style-type: none;}

i{padding: 0 .2rem;}

h1{
  font-family:var(--bold_Nuni);
  font-size: 3.5rem;
  color: var(--dayDark);
}

h2{
  font-family: var(--bold_Mont);
  font-size: 1.5rem;
  color:var(--dayDark);
}

h3{
  font-family:var(--bold_Mont);
  font-size: 1.1rem;
  color: var(--dayLight);
}

h4{
  font-family: var(--bold_Nuni);
  color:var(--text-gray);
}

button.btn{
  border: none;
  border-radius: 0.4rem;
  padding: 1rem 3rem;
  font-size: 1rem;
  font-family: var(--reg_Mont);
  cursor: pointer;
  color:var(--white);
}

.container{margin: 0 5vw;}

p{
  font-family:var(--lev_Nuni);
  color:var(--text-gray);
}

.dark-mode{
  background: var(--dark-color);
  background-color: var(--dark-color);
  color: var(--dark-color);
}

.dark-color{
  color: var(--white);
}

.dark-accent{
  background-color: var(--bg-color);
}

.light-text{
  color: var(--light);
}
/*-- x--Global Classes--x --*/

/*-- ---Navbar--- --*/
.nav{
  padding: 0 2rem;
  height: 0rem;
  min-height: 10vh;
  overflow: hidden;
  transition: height 1s ease-in-out;
}

.nav .nav-menu{justify-content: space-between;}

/*- -Mobile Only- -*/
.nav .toggle-collapse{
  position: absolute;
  top: 0%;
  width: 85%;
  cursor: pointer;
  display: none;
}

.nav .toggle-collapse .toggle-icons{
  display: flex;
  justify-content: flex-end;
  padding: 1.65rem 0;
}

.nav .toggle-collapse .toggle-icons i{
  font-size: 1.4rem;
  color: var(--text-gray);
  justify-content: space-around;
}

.nav .toggle-collapse .toggle-icons i:hover{
  color: var(--dayDark);
}

.collapse{height: 14rem;}
/*- x-Mobile Only-x -*/

.nav .nav-items{
  display: flex;
  margin: 0;
}

.nav .nav-items .nav-link{
  padding: 1.6rem 1rem;
  font-size: 1.1rem;
  position: relative;
  font-family: var(--reg_Mont);
  cursor: pointer;
}

.nav .nav-items .nav-link i{font-size: 1.4rem;}

.nav .nav-items .nav-link a:hover{color: var(--dayLight);}
  
.nav .nav-brand .logo{
  padding: auto;
  width: 75px;
  height: 75px;
}

.logo-not-show{
  display: none;
}

.dark-logo{
  padding: auto;
  width: 75px;
  height: 75px;
  display: none;
}

.dark-logo-show{
  display: initial;
}

.nav .social{padding: 1.4rem 0;}

.nav .social i{font-size: 1.4rem;}

.nav .social i:hover{color:var(--dayDark);}

.switch:hover{
  cursor:pointer;
  color: var(--nightLight) !important;
}
/*-- x--Navbar--x --*/

/*-- ---Main Content--- --*/
/*- -Site Title- -*/
main .site-title{
  height: 80.5vh;
  display: flex;
  justify-content: center;
  background: url(../img/leap.png);
  background-size: contain;
  background-repeat: no-repeat;
}

main .site-title .site-background{
  padding-top: 13rem;
  text-align: center;
}

main .site-title h1{color:var(--dayLight);margin: .3rem;}

main .site-title h3{color:var(--dayDark);margin: .3rem;}

main .site-title .btn{
  margin: 1.8rem;
  background: var(--day);
}

main .site-title .btn:hover{
  background: transparent;
  border: 1px solid var(--white);
  color: var(--white);
}
/*- x-Site Title-x -*/

/*- -Carousel- -*/
main .blog .blog-post{padding-top: 6rem;}

main .blog-post .blog-content{
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 70%;
  margin: 3rem 3rem;
  box-shadow: 0 15px 20px rgba(0,0,0,0.2);
}

main .blog-content .blog-title{padding: 2rem 0;}

main .blog-content .btn-blog{
  padding: .7rem 2rem;
  background: var(--day);
  margin: .5rem;
}

main .blog-content .btn-blog:hover{
  background: transparent;
  border: 2px double var(--text-gray);
  color: var(--dayLight);
}

main .blog-content span{
  display: block;
  font-family:var(--lev_Mont);
  color:var(--text-gray);
}

section .container .owl-nav{
  position: absolute;
  top: 0%;
  margin: 0 auto;
  width: 100%;
}

.owl-nav button.owl-prev .owl-nav-prev,
.owl-nav button.owl-next .owl-nav-next{
  color:var(--bg-color);
  background: transparent;
  font-size: 2rem;
}
/*- x-Carousel-x -*/

/*- -Site Content- -*/
main .site-content{
  display: grid;
  grid-template-columns: 70% 30%;
}

main .post-content{width:100%;}

main .site-content .post-content > .post-image, .post-title{
  padding: 1rem 2rem;
  position: relative;
}

main .site-content .post-content > .post-image .post-info{
  background: var(--dayLight);
  padding: .5rem;
  position: absolute;
  bottom: 0%;
  left: 18.5vw;
  border-radius: 3rem;
}

main .site-content .post-content > .post-image > div{overflow:hidden;}

main .site-content .post-content > .post-image .img{
  width: 100%;
  transition: all 1s ease;
}

main .site-content .post-content > .post-image .img:hover{transform: scale(1.3);}

main .site-content .post-content > .post-image .post-info span{
  margin: .5rem;
  color:var(--white);
}

main .site-content .post-content .post-title h2{padding-bottom: .8rem; cursor: pointer;}

main .site-content .post-content .post-title .post-btn{
  border-radius: 1;
  margin-top: 0.3rem;
  padding: .8rem 1.5rem;
  background: var(--dayDark);
}

main .site-content .post-content .post-title .post-btn:hover{
  background: var(--day);
}

main .site-content .pagination{
  justify-content: center;
  color:var(--bg-color);
  margin: 4rem 0;
}

main .site-content .pagination a{
  padding: .6rem .9rem;
  border-radius: 2rem;
  margin: 0 .3rem;
  font-family: var(--lev_Nuni);
}

main .site-content .pagination a:hover{
  background: var(--dayDark);
}

main .site-content .pagination i:hover{
  color: var(--white);
}

main .site-content .pagination .pages{
  background: var(--text-gray);
  color:var(--white)
}

/*- x-Site Content-x -*/

/*- -Sidebar- -*/
.site-content > .sidebar .category-list{font-family: var(--reg_Mont);}

.site-content > .sidebar .category-list .list-items{
  background:var(--dayDark);
  padding: .4rem 1rem;
  margin: .8rem 0;
  border-radius: 3rem;
  width: 70%;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.site-content > .sidebar .category-list .list-items:hover{
  background: var(--day);
}

.site-content > .sidebar .category-list .list-items a{color:var(--white);}

.site-content > .sidebar .category-list .list-items span{color:var(--white);}

.site-content .sidebar .popular-post .post-content{padding: 1rem 0;}

.site-content .sidebar .popular-post h2{padding-top: 8rem;}

.site-content .sidebar .popular-post .post-info{
  padding: .4rem .1rem !important;
  bottom: 0rem !important;
  left: 2rem !important;
  border-radius: 0rem !important;
}

.site-content .sidebar .popular-post .post-info span{
  font-size: .9rem !important;
}

.site-content .sidebar .newsletter{padding-top: 3rem;}

.site-content .sidebar .newsletter .form-element{padding: .5rem 2rem;}

.site-content .sidebar .newsletter .input-element{
  width: 88%;
  height: 1.9rem;
  padding: .3rem .5rem;
  font-family: var(--reg_Nuni);
  font-size: 1rem;
}

.site-content .sidebar .newsletter .form-btn{
  border-radius: 0rem;
  padding: .8rem 32%;
  margin: 1rem 0;
  background: var(--day);
}
/*- x-Sidebar-x -*/
/*-- x--Main Site--x --*/

/*-- ---Footer--- --*/
footer.footer{
  height: 100%;
  background: var(--bg-color);
  position: relative;
}

footer.footer .container{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

footer.footer .container > div{
  flex-grow: 1;
  flex-basis: 0;
  padding: 3rem .9rem;
}

footer.footer .container h2{
  color: var(--white);
  padding-top: .6rem;
}

footer.footer .container p{
  color: var(--text-gray);
  padding-top: .6rem;
}

footer.footer .newsletter .form-element{
  background: var(--dark-color);
  display: inline-block;
}

footer.footer .newsletter .form-element input{
  padding: .5rem .7rem;
  border: none;
  background: transparent;
  color: var(--white);
  font-family: var(--lev_Nuni);
  font-size: 1rem;
  width: 73%;
}

footer.footer .newsletter .form-element span{
  background: var(--dayDark);
  border: none;
  color: var(--white);
  padding: .5rem .7rem;
  cursor: pointer;
}

footer.footer .newsletter .form-element span:hover{
  background: var(--dark-color);
  color: var(--dayLight);
}

footer.footer .follow .social i{
  color:var(--white);
  font-size: 1.4rem;
}

footer.footer .follow .social i:hover{color:var(--dayDark);}

footer.footer .rights{
  justify-content: center;
  padding-bottom: 1rem;
}

footer.footer .rights h4 a{color: var(--white);}

footer.footer .rights h4 a:hover{
  color: var(--dayLight)
}

footer.footer .move-up{
  position: absolute;
  right: 6%;
  top: 50%;
}

footer.footer .move-up span{color:var(--dayLight);}

footer.footer .move-up span:hover{
  cursor:pointer;
  color: var(--white);
}

/*-- x--Footer--x --*/

/* Viewport less then or equal to 1130px */
@media only screen and (max-width: 1130px){
  .site-content .post-content > .post-image .post-info{
    left: 2rem !important;
    bottom: 1.2rem !important;
    border-radius: 0% !important;
  }

  .site-content .sidebar .popular-post .post-info{display: none !important;}

  footer.footer .container{grid-template-columns: repeat(2,1fr);}
}

/* Viewport less then or equal to 750px */
@media only screen and (max-width: 750px){
  .nav .nav-menu,.nav .nav-items{flex-direction: column;}

  .nav .social i{padding: 0rem 2.5rem;}

  .nav .toggle-collapse{display: initial;}

  main .blog-post .blog-content{width: 80%;}

  main .site-content{grid-template-columns: 100%;}

  .site-content .sidebar{display:none;}

  footer.footer .container{grid-template-columns: repeat(1,1fr);}

  footer.footer .move-up{
    position: absolute;
    right: 1%;
    top: 1%;
  }
}

/* Viewport less then or equal to 520px */
@media only screen and (max-width: 520px){
  /* main .blog{height:125vh} */

  main .blog-post .blog-content{margin: 1rem 2rem;}

  .site-content .post-content > .post-image .post-info{display:none;}

  main .site-content .post-content .post-title .post-btn{margin-left: 3.6rem;}
  
  main .site-content .pagination{margin-left: 2rem;}

  footer.footer .container > div{padding: 1rem .9rem !important;}
  
  footer .rights{
    padding: 0 1.4rem;
    text-align: center;
  }
  
  nav .toggle-collapse{width: 80%;}
}