/* General styles */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 18px;
}

.container {
    max-width: 1200px;
    margin: 0 auto 0 auto;
}

.project-header {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Horizontally centers the content */
    align-items: center; /* Vertically centers the content */
    padding: 60px 0; /* Optional: Adjust padding as needed */
}

.center-icon {
    width: 200px; /* Adjust the width as needed */
    height: auto; /* Ensures the aspect ratio is maintained */
    display: block; /* Centers the image when combined with margin */
    margin: 0 auto; /* Centers the image horizontally */
}

.static-centered-img {
    display: block;
    position: relative; /* Ensures it respects its container */
    left: 50%; /* Moves the image's left edge to the center of the viewport */
    transform: translateX(-50%); /* Centers the image by shifting it left by half its width */
    width: 1920px; /* Set the fixed width of the image */
    height: auto; /* Maintain aspect ratio */
}

#custom-hr {
    border: none; /* Remove default borders */
    border-top: 1px solid #FFF; /* Custom line style */
    width: 100%; /* Full width of the content container */
    padding: 10px 0 0 0;
}

header {
    color: #fff;
    padding: 1em 0;
}

#image-holder img {
    width: 100%;
    height: auto;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px auto 5px auto;
}

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

nav ul li {
    margin-left: 28px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

nav ul li a:hover {
    color: #F2A25C; /* Change the color on hover */
}

main {
    padding: 20px 0; /* Padding top and bottom */
}

.multi-col {
    width: 100%;
    display: flex; /* This will lay the children divs side by side */
    justify-content: space-between; /* This adds space between the columns */
    align-items: flex-start; /* This aligns items vertically */
    margin: 12px 0 0 0;
}

.m-col {
    flex: 1;
    margin: 10px 24px 0 0; /* Adds a little space around each div */
}

.three-cols {
    width: 100%;
    display: flex; /* This will lay the children divs side by side */
    justify-content: space-between; /* This adds space between the columns */
    align-items: flex-start; /* This aligns items vertically */
    margin: 12px 0 0 0;
}

.col {
    flex: 1;
    margin: 10px 36px 0 0; /* Adds a little space around each div */
}

.col-1 {
    flex: 0 0 46%; /* flex-grow, flex-shrink, flex-basis */
}

.col-2 {
    flex: 0 0 32%;
    padding: 40px 0 0 0;
}

.col-3 {
    flex: 0 0 20%;
}

footer {
    color: #fff;
    padding: 100px 0 200px 0;
    text-align: left; /* Aligns footer text to the left */
}

.footer-content {
    text-align: left; /* Ensures text within the footer container is left-aligned */
}

/* CONTEXTUAL STYLES */
#contact {
    width: 100%;
}

#home-hdr {
    background-color: #7D08A8;
}

#search-hdr {
    background-color: #202123;
}

#search-cover {
    margin: 0 auto 0 auto;
    padding: 40px 0 0 0;
    max-width: 1200px;
}

.section-1200 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.project-hdr {
    font-size: 72px;
    font-weight: 600;
    letter-spacing: -1.5px;
}

/* BACKGROUND COLOR STYLES */

.bright-orange-bg {
    background-color: #AA8E28;
}
.grey-01-bg {
    background-color: #2D2D2D;
}

.grey-02-bg {
    background-color: #595959;
}
.grey-03-bg {
    background-color: #EBEBEB;
}

.purple-bg {
    background-color: #7D08A8;
}

.chalk-black-bg {
    background-color: #202123;
}

.white-bg {
    background-color: #FFFFFF;
}

/* SECTIONS STYLES */
.section-white {
    background-color: #ffffff;
    margin: 40px auto 0 auto;
}

/* TYPOGRAPHY */

.project-title {
    font-size: 78px;
    font-weight: 400;
}

.type-00 {
    font-size: 80px;
}

.type-0 {
    font-size: 72px;
}
.type-1 {
    font-size: 64px;
}

.type-40 {
    font-size: 40px;
    font-weight: 400;
}

.type-32 {
    font-size: 32px;
    font-weight: 400;
}

.type-2 {
    font-size: 30px;
    font-weight: 400;
}

.type-28 {
    font-size: 28px;
    font-weight: 400;
}

.type-3 {
    font-size: 26px;
    font-weight: 400;
}

.type-24 {
    font-size: 24px;
    font-weight: 400;
}

.type-4 {
    font-size: 22px;
    font-weight: 400;
}

.type-20 {
    font-size: 20px;
    font-weight: 400;
}

.type-5 {
    font-size: 18px;
    font-weight: 400;
}

.type-6 {
    font-size: 16px;
    font-weight: 400;
}

.type-7 {
    font-size: 15px;
    font-weight: 400;
}

.type-8 {
    font-size: 14px;
    font-weight: 400;
}

.type-heading {
    font-size: 28px;
    font-weight: 600;
}

/* LINE HEIGHT */

.lh-14 {
    line-height: 14px;
}

.lh-20 {
    line-height: 20px;
}

.lh-22 {
    line-height: 22px;
}

.lh-24 {
    line-height: 24px;
}

.lh-26 {
    line-height: 26px;
}

.lh-28 {
    line-height: 28px;
}

.lh-30 {
    line-height: 30px;
}

.lh-90 {
    line-height: 86px;
}

.lh-38 {
    line-height: 38px;
}



/* COLOR */
.clr-1 {
    color: white;
}

.clr-2 {
    color: #202123;
}

/* SPACING */
.sp-40 {
    margin: 40px 0 0 0;
}

.sp-20 {
    margin: 20px 0 0 0;
}

.pad-200 {
    padding: 200px 0 0 0;
}

.pad-120 {
    padding: 120px 0 0 0;
}

.pad-80 {
    padding: 80px 0 0 0;
}

.pad-60 {
    padding: 60px 0 0 0;
}

.pad-50 {
    padding: 50px 0 0 0;
}

.pad-40 {
    padding: 40px 0 0 0;
}

.pad-30 {
    padding: 30px 0 0 0;
}

.pad-24 {
    padding: 24px 0 0 0;
}

.pad-20 {
    padding: 20px 0 0 0;
}

.pad-16 {
    padding: 16px 0 0 0;
}

.pad-14 {
    padding: 14px 0 0 0;
}

.pad-12 {
    padding: 12px 0 0 0;
}

.pad-10 {
    padding: 10px 0 0 0;
}

.pad-8 {
    padding: 8px 0 0 0;
}

.pad-6 {
    padding: 6px 0 0 0;
}

.pad-btm-40 {
    padding: 0 0 40px 0;
}

.pad-top-btm-40 {
    padding: 40px 0 40px 0;
}

.pad-top-20-btm-40 {
    padding: 20px 0 40px 0;
}

.pad-top-30-btm-40 {
    padding: 30px 0 40px 0;
}

.pad-top-30-btm-50 {
    padding: 30px 0 50px 0;
}

.pad-top-30-btm-50 {
    padding: 30px 0 50px 0;
}

.pad-top-30-btm-60 {
    padding: 30px 0 60px 0;
}

.pad-top-40-btm-50 {
    padding: 40px 0 50px 0;
}

.m-top-14 {
    margin-top: 14px;
}

.m-top-20 {
    margin-top: 20px;
}



/* BORDER */
.divider {
    border-width: 6px 0 0 0;
    border-style: solid;
    border-color: #EFEFEF;
}

/* Media Queries */
@media (max-width: 1280px) {
    .container {
        max-width: calc(100% - 100px); /* Adjust the container's width to maintain 50px margins on each side */
        margin: 0 auto;
    }
    
	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40px auto 5px auto;
	}
	
    .three-cols, .multi-col, .section-1200 {
        flex-direction: column;
        align-items: stretch;
    }

    .col, .m-col {
        margin: 0 0 20px 0;
        width: 100%;
    }
    .col-2 {
		flex: 0 0 32%;
		padding: 0 0 0 0;
	}
	
	.pad-top-40-btm-50 {
		padding: 40px 0 10px 0;
	}
	
    .project-hdr {
        font-size: 60px;
    }

    #search-cover img {
        width: 100%;
        height: auto;
    }
	#image-holder img {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 1024px) {
    .container {
        max-width: calc(100% - 100px); /* Adjust the container's width to maintain 50px margins on each side */
        margin: 0 auto;
    }

.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40px auto 5px auto;
	}
    .three-cols, .multi-col, .section-1200 {
        flex-direction: column;
        align-items: stretch;
    }

    .col, .m-col {
        margin: 0 0 20px 0;
        width: 100%;
    }
	.col-2 {
		flex: 0 0 32%;
		padding: 0 0 0 0;
	}
	
	.pad-top-40-btm-50 {
		padding: 40px 0 10px 0;
	}
	
    .project-hdr {
        font-size: 48px;
    }

    #search-cover img {
        width: 100%;
        height: auto;
    }
	#image-holder img {
			width: 100%;
			height: auto;
		}
}