
p{
	font-size: 18px;
    color: #9B9B9B;
}

.aclonica-regular {
  font-family: "Aclonica", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.abril-fatface-regular {
  font-family: "Abril Fatface", serif;
  font-weight: 400;
  font-style: normal;
}
.aclonica-regular {
  font-family: "Aclonica", sans-serif;
  font-weight: 400;
  font-style: normal;
}



nav.navbar.navbar-expand-lg {
    --bs-bg-opacity: 1;
    background-color: rgb(0 0 0) !important;
	position: fixed;
    width: 100%;
	z-index: 999;
}

.navbar-nav a{
	color: white;
	text-decoration: none;
	padding: 5px 10px;
	font-size: 18px;
}

.navbar-nav a:hover{
	color: rgba(220, 166, 61, 1);

}


.navbar-nav a:active{
	color: rgba(220, 166, 61, 1);

}

div#navbarSupportedContent {
    justify-content: flex-end;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(220, 166, 61, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-brand img {
    width: 60px;
}


.navbar-image {
  background-image: url('images/back1.png'); 
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 55%;
  height: 75%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; 
}


#home{
	height: 100vh;
	background: black;
}

#home h1{
        font-size: 5.5rem;
        font-family: 'Aclonica';
        color: #DCA63D;

}


#b1{
    font-size: 22px;
    text-decoration: none;
    background: #DCA63D;
    border-radius: 50px;
	transition: all 0.5s ease;
}

#b1:hover{
    background: white;
    color: #DCA63D;
	box-shadow: 0 8px 16px #DCA63D;
}

#b1 a{
	color: black;
	transition: all 0.5s ease;
	text-decoration:none;
    padding: 10px 40px;	
}
#b1 a:hover{
    color: #DCA63D;
}

#b2{
    font-size: 22px;
    text-decoration: none;
    background: black;
    border-radius: 50px;
	transition: all 0.5s ease;
	display:block;
	margin:auto;
}

#b2:hover{
    background: white;
    color: black;
	box-shadow: 0 8px 16px black;
}

#b2 a{
	color: white;
	transition: all 0.5s ease;
	text-decoration:none;
	padding: 10px 40px;
}
#b2 a:hover{
    color: black;
}



#author{
	background: black;
    padding: 100px 10px 25px 10px;
	overflow: hidden;	
}

.icons {
    position: relative;
    left: 80%;
    bottom: 40px;
	font-size: 30px;
	color: white;
}
.icons a{
	color:white;
}

.fa-brands:hover{
	    color: #DCA63D;
}

.fa-envelope:hover{
	    color: #DCA63D;
}

ul.custom-list {
  list-style: none;
  padding-left: 1.5em; /* space for bullet */
}

ul.custom-list li {
  position: relative;
  padding-left: 3.8em;
}

ul.custom-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.8em; /* vertical alignment */
  width: 55px; /* desired width */
  height: 55px; /* desired height */
  background-image: url('images/back.png');
  background-size: contain;
  background-repeat: no-repeat;
}



.container.bookimage img {
    max-width: 100%;
    height: auto;
    display: block;
}




#thoughts{
	
	padding: 100px 0px 100px 0px;;
	background: black;
}


#thoughts video {
    max-width: 90%;
    height: auto;
	display: block;
	margin: auto;

}


.thoughts_icons {
    position: relative;
    top: 50%;
	font-size: 30px;
	color: white;
}

.thoughts_icons a{
	color:white;
}

.throughtsimg img{
	max-width: 90%;
	height: auto;
	display: block;
	margin: auto;
}






























@media (max-width: 991.98px) {
  .navbar-collapse.show .navbar-image {
    display: block;
	    opacity: 1;
    transform: translateY(0);
  }
  #home h1{
	  font-size: 2.5rem;
  }
  
  img.sparkel{
      height: 55vh !important;
  } 
  .icons {
    left: 50%;
	right: 50%;
	top: 10px;

	}
	.thoughts_icons{
		top: 0%;
		margin-bottom: 20px;
	}

}

@media screen and (min-width: 1025px) and (max-width: 1280px){
	 nav.navbar.navbar-expand-lg{
		 padding: 8px 30px;	
	 }
}	