body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
	color:#404040;
}
.navbar-brand img {
    width: 50%;
}
.upload-area {
    border: 2px dashed #ccc;
    padding: 30px;
    text-align: center;
    position: relative;
    height: 500px; /* Set a fixed height or make it responsive */
    overflow: hidden; /* Hide overflow to prevent image from going out of bounds */
    display: flex;
    flex-direction: column; /* Stack child elements vertically */
    justify-content: center;
    align-items: center;
}

.upload-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    margin-bottom: 10px; /* Space between button and text */
}

.upload-btn:hover {
    background-color: #0056b3;
}

#konva-container {
    display: none;
    margin: 0 auto; /* Center the container horizontally */
}

.lens-flare-options {
    /*height: 500px;*/ /* Match this height with the .upload-area */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-right: 15px; /* Add padding to avoid content hiding behind the scrollbar */
    border: 1px solid #cfd8e2; /* Add a border */
    border-radius: 10px; /* Make the border curved */
    padding: 10px; /* Add some padding inside the border */
	background-color:#eff2f5;
}

.lens-flare-options img {
    width: 100%;
}

.lens-flare-options {
    height: 500px; /* Match this height with the .upload-area */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-right: 15px; /* Add padding to avoid content hiding behind the scrollbar */
    border: 1px solid #cfd8e2; /* Add a border */
	border-top:1px solid #0187E8;
    /*border-radius: 10px; /* Make the border curved */
    border-radius: 0 0 10px 10px; /* Make the border curved */
    padding: 10px; /* Add some padding inside the border */
	background-color:#eff2f5;
	font-size:13px;
}

.lensflare-title{
	padding-bottom:5px;
}

.lens-flare-options-menu {
    height: 35px; /* Match this height with the .upload-area */
    padding-right: 15px; /* Add padding to avoid content hiding behind the scrollbar */
    border: 1px solid #cfd8e2; /* Add a border */
    border-bottom: 0px;
    border-radius: 10px 10px 0 0; /* Make the border curved */
    padding: 0 10px; /* Add some padding inside the border */
    background-color: #eff2f5;
    font-size: 13px;
    display: flex; /* Ensure flex layout */
    justify-content: space-between; /* Space out items evenly */
}

.lens-flare-options-menu a {
    flex-grow: 1;
    text-align: center;
    padding: 10px 0;
    border-bottom: 2px solid transparent; /* Default to no underline */
    xtransition: border-bottom 0.3s ease; /* Smooth transition */
	text-decoration:none;
}

.lens-flare-options-menu a.active {
    border-bottom: 3px solid #0187E8; /* Underline effect */
	font-weight:600;
	color:#0187E8!important;
}

.faq-section {
    padding: 40px 0;
}
h1 {
    font-size: 24px;
    font-weight: 700;
}
h2 {
    font-size: 25px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 20px;
}
.info-section,
.how-it-works-section {
    margin-bottom: 50px;
}

#download-toggle-area {
    padding: 30px 0;
    text-align: center;
}

.thumbnail {
    flex-basis: calc(33.333% - 2%); /* Set the basis for each thumbnail to be one-third of the container width, minus margins */
    flex-grow: 1; /* Allow thumbnails to grow if needed */
    flex-shrink: 1; /* Allow thumbnails to shrink if needed */
    margin: 1%; /* Add some margin between thumbnails */
    cursor: pointer;
    position: relative;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    text-align: left; /* Center the caption text */
    padding-bottom: 10px; /* Add padding to the bottom for the caption */
}

.thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 5px; /* Match the curved border of the thumbnail */
}

.thumbnail-caption {
    display: block;
    margin-top: 5px; /* Space between the image and the caption */
    font-size: 10px;
    color: #333;
	padding-left:4px;
}

.separator {
  width: 100%;
  height: 1px;
  border-top: 1px solid #ccc;
  margin-bottom:30px;
  margin-top:20px;
}

.hidden {
    display: none;
}
#sample-image-wrapper {
    padding: 30px 0px;
}
.thumbnails {
    display: flex;
    flex-wrap: wrap; /* Enable wrapping of thumbnails */
}

.fs12{
	font-size:12px;
}

.greyText{
	color:#9D9D9D;
}

.info-section img{
	width:100%;
}

.faq-section h5{
	font-weight:600;
	font-size:1.1em;
}

#what-is-lens-flare .h3, #lens-flare-for-social-media .h3{
	font-size:1em;
	font-weight:600;
}

.navbar {
    background-color: #fff !important;
    border-bottom: 2px solid #f0f2f5;
	font-size:0.8em;
}

.nav-link {
    color: rgba(0, 0, 0, .8)!important;
}

.navbar-nav .nav-item {
    margin-right: 25px; /* Adjust the value as needed */
}

.btn-outline-custom {
	color: #404040;
	border-color: #404040;
}

.btn-outline-custom:hover {
	background-color: #404040;
	color: white;
}

footer a {
    color: #404040;
}

a{
	color: #404040!important;/*overwrite the whole site link to this color*/
}

/* CSS rules for mobile devices */
@media only screen and (max-width: 768px) {
	.upload-area {
		height: 200px;
	}
	.greyText{
		display:block;
		margin-bottom:10px;
	}
}
@media only screen and (min-width: 768px) {
	.faq-padding{
		padding:2em;
	}
	.upload-area {
		
	}
}

@media only screen and (max-width: 376px) {
	.upload-area {
		height: 300px;
	}
	.greyText{
		display:block;
		margin-bottom:10px;
	}
}

@media only screen and (max-width: 385px) {

	#sample-image-wrapper img{
		width:40px!important;
		padding:0;
		margin:0;
	}
}

/* Styles for mobile devices with width less than 375px */
@media (max-width: 375px) {
    #download-toggle-area button,
    #reset-btn-wrapper a {
        display: block;
        width: 100%; /* Make the buttons and links take the full width */
        margin-bottom: 10px; /* Adds some space between the buttons/links */
    }
	
	#reset-btn-wrapper{
        text-align:Center;
    }
	
	.spacebtw{
		display:none;
	}
}