/* Akasha Cult Master CSS -- Created by Bomber Ross. */

 body {
  padding-top: 120px;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-right: 15px;
  padding-left: 15px;
}

.marketing {
	min-height: 430px;
}

/* Custom page footer */
.footer {
	margin-top: 20px;
  padding-top: 19px;
  color: #777777;
  border-top: 1px solid #c4c4c4;
}


.logo { height: 100px;
	width: auto;
	padding: 15px 0;


/* Ensure the logo is responsive and fits the navbar */
.logo {
    max-height: 50px; /* Adjust this height based on your navbar size */
    width: auto;
    padding: 5px 15px; /* Adds space around the logo */
    float: left;
}

	
}		

h1 {
  	text-align: center;
}

h2 {
  	text-align: center;
	font-weight: 300;
	font-family: Courier New;
	font-size:20px;
	

}
.navbar-default {
  	background-color: #FFFFFF;
  	border-color: #FFFFFF;
}


nav{
    	

   	text-align: center;
    	/*    or you can use what you did  position: relative;left:-90px */
    	font-family: Courier New;
	/* with this you can choose any font that you want*/
}








#scrollTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed position */
  bottom: 15px;
  right: 15px;
  z-index: 99; /* Ensure it stays on top */
  padding: 15px;
  background-color: #c4c4c4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#scrollTopBtn:hover {
  background-color: #333;
}

=============================================
/* Image Box and Hover */=============================================


img {
  	border-radius: 0px;
  	min-width: 100%;
}

.main-banner .left-content .thumb img {
  width: 100%;
  overflow: hidden;
	}


.imageBox {
      position: relative;
      display: inline-block;
	
    }


.hoverImg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Hidden by default on all devices */
    transition: opacity 0.3s ease;
}

/* 2. Hover Effect (Desktop Only) */
/* This only applies to screens wider than 1024px */
@media (min-width: 1024px) {
    .imageBox:hover .hoverImg {
        opacity: 1;
    }


    .imageBox .hoverImg {
      position: absolute;
      left: 0;
      top: 0;
      display: none;
	

   }

    .imageBox:hover .hoverImg {
      display: block;
   }

    .imageBox:hover .hoverImg {
	opacity: 1;
 	 transition: 0.3s;       
	display: block;

 
    }

}


=============================================
/* Carosel */
=============================================


* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
	
}

/* Hide the images by default */
.mySlides {
  display: none;
	
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
	

  width: auto;
  padding: 35px;
  margin-top: -50px;
  color: black;
   
  
  
}

/* Position the "prev button" to the left */
.prev {
  left: -35px;
  
  }


/* Position the "next button" to the right */
.next {
  right: -35px;
  
  }


/* Number text (1/4 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 13px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}



=============================================
/* Media Queries */
=============================================


@media (max-width: 768px) {
    /* Center the logo container */
    .navbar-header {
        text-align: center;
        width: 100%;
    }

    /* Force the logo link to be an inline block for alignment */
    .navbar-header a {
        display: inline-block;
        float: none;
        margin-right: 0;
    }

    /* Position the toggle button to the far right/left so it doesn't overlap */
    .navbar-toggle {
        float: right;
        margin-right: 15px;
    }

	
}

/* Mobile specific tweaks */
@media (max-width: 768px) {
    .logo {
        max-height: 80px; /* Slightly smaller for mobile phones */
        margin-top: 5px;
	margin-left: 55px;    }
    
   }

@media screen and (max-width: 768px) {
 .responsive {
	padding: 0px 20px;
}

	
	
  	.responsive img {
  		height: auto; 
 		width: 100%;

}

}

@media screen and (max-width: 768px) {
 .gallery .previews img {
	height: 30px;
}
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 768px: */
@media screen and (max-width: 768px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 768px or smaller */
  }
}