/* ============================================================================
* Blogger Free template CSS Index
==============================================================================*/
/*  1. Base CSS variables
    2. Custom padding variables
    3. Global declaratives
    4. Global media query declarative
    5. Body
    6. Header
    7. Blog main section
    8. Blog subcard
    9. Blog main Button
    10. Blog sidebar
    11. Recent articles
    12. Categories
    13. Tags
    14. Author section
    15. Contact For & Search Form
    16. Footer
-------------------------------------------------------------------------------*/

.heading-primary {
  font-family: "Lato", sans-serif;
  font-size: 4rem;
}

.heading-secondary {
  font-family: "Lato", sans-serif;
  font-size: 3rem;
}

.heading-tertiary {
  font-family: "Lato", sans-serif;
  font-size: 2rem;
}

.heading-quaternary {
  font-family: "Lato", sans-serif;
  font-size: 1.5rem;
}

.heading-tag {
  font-family: "Lato", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.paragraph {
  font-size: 1.8rem;
  margin-bottom: 0;
}

.weight {
  font-weight: 700;
}

/*--------------------------------------------------------------
* custom padding
----------------------------------------------------------------*/
.section-padding {
  padding: 2rem 3rem;
}

/*----- width < 991px ----- */
@media only screen and (max-width: 61.94em) {
  .section-padding {
    padding: 5rem 3rem;
  }
}

/*----- width < 768px -----*/
@media only screen and (max-width: 48em) {
  .section-padding {
    padding: 4rem 2rem;
  }
}

/*----- width < 480px -----*/
@media only screen and (max-width: 30em) {
  .section-padding {
    padding: 3rem 1rem;
  }
}

.banner-padding {
  padding: 8rem 6rem;
}

/*----- width < 991px ----- */
@media only screen and (max-width: 61.94em) {
  .banner-padding {
    padding: 6rem;
  }
}

/*----- width < 768px -----*/
@media only screen and (max-width: 48em) {
  .banner-padding {
    padding: 4rem;
  }
}

/*----- width < 480px -----*/
@media only screen and (max-width: 30em) {
  .banner-padding {
    padding: 4rem 2rem;
  }
}

.no-padding {
  margin: 0;
  padding: 0;
}


/*--------------------------------------------------------------
* Global link decoration declarative
----------------------------------------------------------------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: none;
  color: inherit;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*--------------------------------------------------------------
* Global media query declarative
----------------------------------------------------------------*/
html {
  box-sizing: border-box;
  font-size: 82.5%;
}

/*----- width < 1200px -----*/
@media only screen and (max-width: 75em) {
  html {
    font-size: 76.25%;
  }
}

/*----- width < 991px ----- */
@media only screen and (max-width: 61.94em) {
  html {
    font-size: 73.13%;
  }
}

/*----- width < 480px -----*/
@media only screen and (max-width: 30em) {
  html {
    font-size: 70%;
  }
}

/*--------------------------------------------------------------
* Body background and font properties
----------------------------------------------------------------*/
body {
  font-family: "Lato", sans-serif;
  color: #686666;
  font-size: 1.2rem;
  background-color: #ffffff;
  line-height: 1.6;
  letter-spacing: .08rem;
  font-weight: 400;
}

/*--------------------------------------------------------------
* Blogger first header section
----------------------------------------------------------------*/

.header-one {
  background-color: #010123;
  height: 6rem;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
}

.header-one__list {
  list-style: none;
}

.header-one__item {
  display: inline-block;
  padding: 0 2rem;
  color: #ffffff;
  transition: all .3s ease-in;
}

.header-one__item:hover {
  color: #1CB5E0;
}

.header-one__social--list {
  list-style: none;
}

.header-one__social--item {
  display: inline-block;
  padding: 0 2rem;
  color: #ffffff;
  transition: all .3s ease-in;
}

.header-one__social--item:hover {
  color: #1CB5E0;
}
/*--------------------------------------------------------------
* Blogger main header section
----------------------------------------------------------------*/
.header {
  /* min-height: 60vh; */
  position: relative;
}

.header-logo {

  height: 3rem;
}

.header-main__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.header-main__content {
  position: relative;
}

.header-main__text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 2rem;
  color: #ffffff;
  background: linear-gradient(to top, #010123, rgba(1, 1, 35, 0));
}

.header-main__link {
  display: flex;
  justify-content: space-between;
}
/*--------------------------------------------------------------
* navigation main menu
----------------------------------------------------------------*/

.navigation {
  min-height: 7rem;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
}

.nav-item {
  font-size: 1.8rem;
  margin: 0 2rem;
  color: #1CB5E0;
  transition: all .3s ease-in;
}

.nav-item:hover {
  border-bottom: 0.2rem solid rgba(1, 1, 35, 0.6);
}

.navbar-nav .active {
  border-bottom: 0.2rem solid rgba(1, 1, 35, 0.6);
}

.dropdown-menu {
  border: none;
  background-color: #ffffff;
}

.dropdown-menu .dropdown-item {
  font-size: 1.8rem;
  padding: 1rem 2rem;
  color: #1CB5E0;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #010123;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(1,1,35, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: #010123;
}
/*--------------------------------------------------------------
* navbar onscroll css
----------------------------------------------------------------*/
.nav-scroll {
  background: #ffffff;
  transition: background-color .5s ease 0s;
  /* position: fixed; */
  top: -100px;
  left: 0;
  width: 100%;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.nav-style .nav-scroll .navbar-nav .nav-link {
  color: #010123;
}

.nav-scroll .icon-bar {
  color: #010123;
  margin-right: 15px;
}

.nav-scroll .navbar-nav .active {
  color: #1CB5E0 !important;
}
/*--------------------------------------------------------------
* Blogger main section
----------------------------------------------------------------*/
.main__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.main__content {
  height: 40vh;
  border-radius: .2rem;
  position: relative;
  overflow: hidden;
}

.main__text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 2rem;
  color: #ffffff;
  background: linear-gradient(to top, #010123, rgba(1, 1, 35, 0));
}

.main__link {
  display: flex;
  justify-content: space-between;
}
/*--------------------------------------------------------------
* Blog subcard
----------------------------------------------------------------*/

.main__subcard {
  margin: 1rem 0;
  border-radius: .2rem;
  overflow: hidden;
}

.main__subcard .heading-quaternary {
  margin-bottom: .5rem;
}

.main__subcard--image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.main__subcard--text {
  padding: 1rem 0;
}

.main__subcard .main__link {
  margin-top: 5px;
}

.main__subcard .heading-tag {
  color: #1CB5E0;
}

.main__subcard .heading-tag:hover {
  color: #010123;
}

.main .card {
  border: none;
}
/*--------------------------------------------------------------
* Blogger main button
----------------------------------------------------------------*/
button {
  border: none;
}

.btn-blogger {
  background: #EB5757;
  color: #ffffff;
  padding: .8rem 2.2rem;
  border-radius: .1rem;
  transition: all .3s ease-in;
}

.btn-blogger:hover {
  background: #842121;
  color: #ffffff;
}

/*--------------------------------------------------------------
* Sidebar
----------------------------------------------------------------*/
.main-banner {
  margin: 6rem 0;
  background-color: #f9f7f6;
  border-radius: .2rem;
  text-align: center;
  padding: 3rem;
}

.main-banner__content {
  color: #1CB5E0;
  padding: 2rem;
  -webkit-box-shadow: 0px 0px 72px -17px #8a888a;
  -moz-box-shadow: 0px 0px 72px -17px #8a888a;
  box-shadow: 0px 0px 72px -17px #8a888a;
}

.main__sidebar>* {
  background-color: #ffffff;
  padding: 2rem 0;
  border-radius: .2rem;
}

.main__sidebar>*:not(:first-child) {
  margin: 1rem 0;
}

.main__sidebar>* .heading-tertiary {
  text-transform: uppercase;
}

/*--------------------------------------------------------------
* blog page recent articles list in sidebar
----------------------------------------------------------------*/
.main__recent {
  text-align: left;
}

.main__recent--list {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-column-gap: 2rem;
  grid-row-gap: 2vh;
  align-items: center;
}

.main__recent--img {
  width: 10rem;
  height: 100%;
  object-fit: cover;
  border-radius: .2rem;
  display: block;
}

.main__recent--contact {
  font-size: 1.2rem;
}

/*--------------------------------------------------------------
* blog page categories list in sidebar
----------------------------------------------------------------*/
.main__category--list {
  list-style: none;
}

.main__category--item {
  transition: all .4s;
}

.main__category--item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 4rem;
}

.main__category--item:not(:last-child) {
  border-bottom: 0.1rem solid #f9f7f6;
}

.main__category--item:hover {
  color: #010123;
}

/*--------------------------------------------------------------
* blog page tags list in sidebar
----------------------------------------------------------------*/
.main__tags--list {
  list-style: none;
}

.main__tags--list>* {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.main__tags--list>* a {
  background-color: #f9f7f6;
  border: 0.1rem solid #f9f7f6;
  font-size: 1.2rem;
  padding: .7rem 1.2rem;
  border-radius: .2rem;
  transition: all .4s;
}

.main__tags--list>* a:hover {
  background-color: #1CB5E0;
  color: #ffffff;
}

/*--------------------------------------------------------------
* blog page author section sidebar
----------------------------------------------------------------*/
.main__author {
  text-align: center;
  padding: 2rem;
  -webkit-box-shadow: 0px 0px 46px -28px #a3a0a3;
  -moz-box-shadow: 0px 0px 46px -28px #a3a0a3;
  box-shadow: 0px 0px 46px -28px #a3a0a3;
}

.main__author--image {
  border-radius: 50%;
  border: 0.2rem solid #1CB5E0;
  height: 12rem;
  width: 12rem;
  margin-bottom: 2rem;
}

/*--------------------------------------------------------------
* Main blog post 
----------------------------------------------------------------*/
.main__post .paragraph {
  margin-bottom: 4rem;
}

/*--------------------------------------------------------------
* Contact forms
----------------------------------------------------------------*/

.form__group:not(:last-child) {
  margin-bottom: 0;
}

.form__input {
  font-size: 1.4rem;
  color: #010123;
  padding: 1.2rem 2rem;
  border-radius: 2px;
  background-color: rgba(249, 247, 246, 0.4);
  border: none;
  border-bottom: 3px solid transparent;
  width: 100%;
  display: block;
  transition: all .3s;
}

.form__input:focus {
  outline: none;
  box-shadow: 0 1rem 2rem rgba(1, 1, 35, 0.4);
  border-bottom: 0.3rem solid #010123;
}

.form__input:focus:invalid {
  border-bottom: 0.3rem solid #EB5757;
}

.form__input::-webkit-input-placeholder {
  color: #010123;
}

.form__label {
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 2rem;
  display: block;
  transition: all 0.3s;
}

.form__input:placeholder-shown+.form__label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4rem);
}

/*----- input column text area -----*/
textarea {
  font-family: inherit;
  font-size: inherit;
}

/*--------------------------------------------------------------
* Search form with single input column
----------------------------------------------------------------*/
.search-form {
  display: flex;
  justify-content: center;
}

/*----- Search input -----*/
.search-form input {
  font-size: 1.4rem;
  background-color: #f9f7f6;
  border: none;
  padding: 1rem;
  border-radius: .2rem;
  width: 100%;
  transition: all .4s;
}

.search-form input:focus {
  outline: none;
  background-color: #f9f7f6;
}

.main__search {
  background-color: #1CB5E0;
}

.btn-search {
  padding: 0 1.5rem;
  background-color: #EB5757;
}

/*--------------------------------------------------------------
* Footer section
----------------------------------------------------------------*/
.footer {
  background-color: #010123;
  color: #ffffff;
}

.footer__main {
  padding: 10px 0;
}

.footer__main .heading-tag {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 0.06rem solid rgba(249, 247, 246, 0.6);
}

.footer__main--text {
  font-size: 1.6rem;
  letter-spacing: .08rem;
  margin-bottom: 2.5rem;
}

.footer__main--link {
  display: flex;
  align-items: center;
  list-style: none;
  font-size: 1.4rem;
  line-height: 2.8rem;
}

.footer__main--link>* {
  display: inline-block;
  vertical-align: middle;
}

.footer__main--link:hover a {
  color: #EB5757;
}

.footer__main--link:active {
  color: #EB5757;
}

/*--- width < 768px ---*/
@media only screen and (max-width: 48em) {
  .footer__main .row>* {
    margin-bottom: 4rem;
  }
}

/*--------------------------------------------------------------
* Footer subscription form
----------------------------------------------------------------*/

.footer__form {
  font-size: 1.5rem;
  padding: 1.2rem 1rem;
  width: 100%;
}

.footer form {
  display: flex;
  justify-content: space-between;
}

.footer form .btn__cta {
  background-color: #1CB5E0;
  padding: 1.2rem 2rem;
}

/*--------------------------------------------------------------
* Footer copy section
----------------------------------------------------------------*/
.footer__end--copy {
  color: #EB5757;
  font-size: 1.2rem;
  font-weight: 700;
}