@charset "utf-8";
/* CSS Document */
body {
    font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	color: dimgrey;
    margin: 0;
    padding: 0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px 0px 0px;   
    margin-top: 20px; /* Space above the header */
}

p, ol, li {
/*	font-size: 14pt; */
}
		
h1, h2, h3 {
	font-weight: bold;
}

hr {
	border: 1px solid dimgrey;
}

.left-column h2 {
	 padding-left: 80px;
			
		}		
.left-column p { 
	font-style: italic;
	 padding-left: 80px;
}
		

.homeimage {
	max-width: 250px;
}

.clientimage {
	max-width: 150px;	
}

.logo {
    font-size: 24px;
    font-weight: bold;
	height: 86px;
	width: 250px;
	background-image: url("../images/leantotheinside-logo.png");
	background-position: right;
	background-repeat: no-repeat;

}

.nav {
  /*  position: relative; */
}

.nav-items {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-items li {
    margin: 0 20px;
}

.nav-items li a {
	color:dimgrey;
	text-decoration: none;
    
}

.nav-active {
	border-bottom: 2px solid #FFB600;
}

.separator {
    margin: 0 10px;
    display: inline-block;
}

.burger {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-items {
    display: flex;
    transition: transform 0.5s ease; /* Smooth transition */
}

.carousel-item {
    min-width: 100%;
    display: flex;
}

.left-column {
    width: 30%;
    padding: 20px;
	
}


	
.right-column {
    width: 50%;
    /* display: flex;  Use flexbox */
    justify-content: center; /* Center horizontally */
  /*  align-items: flex-start; */ /* Align items to the top */
    padding: 20px; /* Add padding if needed */
}		

.right-column img {
   /* width: 100%; */
    height: auto;
	max-height: 500px;
}



.carousel-item.active {
    display: flex;
}

.controls {
    display: flex; /* Use flexbox for layout */
    flex-direction: row; /* Arrange buttons in a row */
    justify-content: center; /* Center buttons horizontally */
    margin: 20px 0;
  /*  background-color: #f0f0f0;*/ /* Light background for visibility */
    padding: 10px; /* Padding around the controls */
    border-radius: 5px; /* Rounded corners */

}

.controls button {
    width: 40px; /* Set a fixed width */
    height: 40px; /* Set a fixed height */
    border: 5px solid dimgrey; /* 5px border */
    border-radius: 50%; /* Make it circular */
    background-color: white; /* Background color */
    color: dimgrey; /* Text color */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover */
    display: flex; /* Center content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    margin: 0 5px; /* Space between buttons */
}

.controls button:hover {
    background-color:darkgray; /* Change background on hover */
    color: white; /* Change text color on hover */
}

.copyright {
    text-align: center;
    margin: 20px 0;
    font-size: 14px; /* Adjust font size as needed */
    color: #555; /* Change text color */
}

.copyright a img {
padding: 20px 10px ;
	margin-top: 10px;
}

hr {
    margin: 20px 0; /* Space above and below the horizontal rule */
}

@media (max-width: 768px) {
	
	header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px 0px 0px;   
    margin-top: 0px; /* Space above the header */
}
	
	
	.logo {
    font-size: 24px;
    font-weight: bold;
	height: 56px;
	width: 100px;
	background-image: url("../images/leantotheinside-logo-b.png");
	background-position: right;
	background-repeat:space;

}
	
	
    .nav-items {
        display: none; /* Hide by default */
        flex-direction: column; /* Stack items vertically */
        position: absolute;
        background-color: #f8f8f8; /* Background color */
        top: 80px; /* Position below the header */
        right: 0;
        width: 100%; /* Full width */
      /*  border: 1px solid #ccc; */ /* Border for visibility */
        z-index: 1000; /* Ensure it appears above other content */
    }
	.nav-items li {
		padding-top: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #ccc;
	}
    .nav-items.active {
        display: flex; /* Show when active */
    }
	
	.separator {
  		visibility: hidden;
		display: none;
	}
		.left-column {
    	padding: 0px 20px 0px 20px; /* Add padding if needed */
	}
	
	.left-column h2 {
	 	padding-left: 0px;
			
	}		
	.left-column p { 
	 	padding-left: 0px;
	}
	.right-column {
    	padding: 0px; /* Add padding if needed */
	}
	
	.homeimage {
	max-width: 100px;
}
	
	.right-column p, .right-column h3 {
	padding-left: 20px;
	padding-right: 20px;
}
    .burger {
        display: block; /* Show burger icon */
    }
    .carousel-item {
        flex-direction: column; /* Stack columns on smaller screens */

    }
    .left-column, .right-column {
        width: auto; /* Full width for both columns */
    }
	.right-column img {
    	width: 100%; 
    	height: auto;
}
}