/* style.css */

/* Global Styles */
body 
{
    margin: 0;
    font-family: 'Arial, sans-serif, verdana';
    background-color: white;
    color: #333;
}

menu
{
    color: gold;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

menu:hover 
{
    text-decoration: underline;
}

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

/* Header */
header 
{
    background-color: #;
    color: #;
    padding: 0% 0%;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.header-left, .header-right 
{
    display: inline-block;
    vertical-align: middle;
}

.header-left 
{
    width: 30%;
}

.header-right 
{
    width: 60%;
    text-align: right;
}






/* Ensure the header container uses flex for better alignment */
.container 
{
    display: flex;
    justify-content: space-between; /* Space between the logo and links */
    align-items: center; /* Vertically center align items */
}

/* Float links to the right on larger screens */
.header-right 
{
    display: flex;
    justify-content: flex-end; /* Push links to the right */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.header-right a 
{
    border: 1px solid gold; /* Add gold border */
    margin-right: 2%; /* Add spacing between links */
    padding: 5px 10px; /* Adjust padding for better appearance */
    text-decoration: none; /* Remove underline from links */
    color: ; /* Make the links visible on a dark background */
    display: inline-block; /* Inline-block for consistent styling */
}

/* Stack links vertically on smaller screens */
@media (max-width: 768px)
{
    .header-right 
    {
        flex-direction: column; /* Stack links vertically */
        align-items: flex-end; /* Align links to the right */
    }

    .header-right a 
    {
        margin-right: 0; /* Remove horizontal margin */
        margin-bottom: 10px; /* Add spacing between stacked links */
        width: auto; /* Adjust width to fit content */
    }
}












.logo 
{
    width: 100%;
}

nav 
{
    float: right;
}

header::after 
{
    content: "";
    display: table;
    clear: both;
}



















/* Footer */
footer 
{
    background-color: #000;
    color: #fff;
    padding: 2% 2%;
	box-shadow: 0 4px 8px;
	min-height:180px;
}

.footer-left, .footer-right 
{
    display: inline-block;
    vertical-align: middle;
}

.footer-left 
{
    width: 50%;
}

.footer-right 
{
    width: 50%;
    text-align: right;
}

.social-icons img 
{
    width: 24px;
    margin-left: 10px;
}

/* Splash Section */
#splash 
{
    background: url('images/splash.jpg') no-repeat center center/cover;
    min-height: 420px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#splash::before 
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}

#splash-content 
{
    position: relative;
    color: white;
    text-align: left;
    z-index: 1;
    border: 0px solid gold;
    padding: 2%;
}

/* Video Section */
#video-section 
{
    padding: 0% 0;
    /*box-shadow: 0 4px 8px rgba(0,0,0,0.2);*/
    text-align: center;
}

#video-section iframe 
{
    width: 80%;
    max-width: 100%;
    border: none;
}

/* Projects and Services Sections */
.section 
{
    padding: 5% 0;
	margin-bottom:5%;
}

.section h2 
{
    text-align: center;
    margin-bottom: 2%;
    border-bottom: 2px solid gold;
    display: inline-block;
    padding-bottom: 0px;
}

/* Projects and Services Sections */
.splash-section 
{
    padding: 5% 0;
	margin-bottom:5%;
}

.splash-section h2 
{
    text-align: center;
    margin-bottom: 2%;
    border-bottom: 2px solid gold;
    display: inline-block;
    padding-bottom: 0px;
}

.project-section
{
	padding: 2% 0;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	margin-bottom: 5%;
}

.grid-container 
{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.grid-item 
{
    border: 0px solid black;
    padding: 0%;
    border-radius: 0px;
    width: calc(50% - 40px); /* 2 per row with gap */
    box-sizing: border-box;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.grid-item iframe, .grid-item img 
{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.description 
{
    margin-top: 15px;
    color: #555;
}

/* Quotes Section */
#quotes 
{
    background-color: #f0f0f0;
    padding: 10% 0;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    text-align: center;
    font-style: italic;
margin-bottom:0%;
}

/* Media Queries */
@media (max-width: 1024px)
{
    .grid-item 
    {
        width: calc(50% - 40px);
    }

    #video-section iframe 
    {
        width: 90%;
        height: 400px;
    }
}

@media (max-width: 768px) {
    .header-left, .header-right 
    {
        width: 100%;
        text-align: center;
        display: block;
    }

    nav 
    {
        float: none;
    }

    .grid-item 
    {
        width: 100%;
    }

    #video-section iframe 
    {
        width: 100%;
        height: 300px;
    }
}

/* Video iframe styling */
.vid-size 
{
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 1024px;
    padding: 0;
    margin: 0 auto;
    box-shadow: 0px 8px 16px rgba(128, 128, 128, 0.6);
}







/**
 * ***********************************************************************************
 
 PROJECTS		 PROJECTS		 PROJECTS			 PROJECTS		 PROJECTS
 
  * ***********************************************************************************/
 */




.section_accordion
{

  	cursor: pointer;
  	padding: 2% 5%;
  	width: 100%;
  	text-align: left;
  	outline: none;
  	transition: 0.8s;
	margin:2% 0% 2% 0%;
	
	background-image:url(images/arrow_gold.png);
	
    background-color: #000;
    color:#d4af37;
	border-bottom: 5px solid #d4af37;	
	
	
	background-position: right;
	background-size:5%;
	background-repeat:no-repeat;
}

.active, .section_accordion:hover {
 	background-color: #d4af37;
  	color: #000;
	border-bottom: 5px solid #000;

	background-image:url(images/arrow_black.png);
	background-position: left;
	background-size:5%;
	background-repeat:no-repeat;
}

/* Style the accordion panel. Note: hidden by default */
.section_panel {
  padding: 1% 1% 1% 10%;
  background-color: white;
  display: none;
  overflow: hidden;
} 
/*///////////////////////////////////////*/
.chapter_accordion
{
 	background-color: #000;
	/*background-color: #eee;*/
  	color: #fff;
  	cursor: pointer;
  	padding: 0% 5%;
  	width: 100%;
  	text-align: left;
  	border: none;
  	outline: none;
  	transition: 0.8s;
	margin:2% 0% 2% 0%;
	border-bottom: 3px solid #000;

	background-image:url(images/arrow_white.png);
	background-position: left;
	background-size:5%;
	background-repeat:no-repeat;	
}

.active, .chapter_accordion:hover {
 	/*background-color: #d4af37;*/
  	color: #000;
	border-bottom: 3px solid #000;

	background-image:url(images/arrow_black.png);
	background-position: right;
	background-size:5%;
	background-repeat:no-repeat;
}

/* Style the accordion panel. Note: hidden by default */
.chapter_panel {
  padding: 1% 1% 1% 10%;
  background-color: white;
  display: none;
  overflow: hidden;
} 
/*///////////////////////////////////////*/
.level_1_accordion
{
 	/*background-color: #bebebe;*/
	background-color: #fff;
  	color: #000;
  	cursor: pointer;
  	padding: 0% 5%;
  	width: 100%;
  	/*text-align: center;*/
	text-align: left;
  	border: none;
  	outline: none;
  	transition: 0.8s;
	margin:2% 0% 2% 0%;
	border-bottom: 3px solid #d4af37;	

	background-image:url(images/arrow_gold.png);
	background-position: left;
	background-size:5%;
	background-repeat:no-repeat;	
}

.active, .level_1_accordion:hover {
 	/*background-color: #d4af37;*/
  	color: #000;
	border-bottom: 3px solid #000;

	background-image:url(images/arrow_black.png);
	background-position: right;
	background-size:5%;
	background-repeat:no-repeat;
}

/* Style the accordion panel. Note: hidden by default */
.level_1_panel {
  padding: 1% 1% 1% 10%;
  background-color: white;
  display: none;
  overflow: hidden;
}
/*///////////////////////////////////////*/
.level_2_accordion
{
  	background-color: #000;
  		
	/*background-color: #949494;*/
  	color: #fff;
  	cursor: pointer;
  	padding: 0% 5%;
  	width: 100%;
  	/*text-align: center;*/
	text-align: left;
  	border: none;
  	outline: none;
	margin:2% 0% 2% 0%;
  	transition: 0.8s;
	border-bottom: 3px solid #000;	

	background-image:url(images/arrow_black.png);
	background-position: left;
	background-size:5%;
	background-repeat:no-repeat;	
}

.active, .level_2_accordion:hover {
 	/*background-color: #d4af37;*/
  	color: #000;
	border-bottom: 3px solid #d4af37;

	background-image:url(images/arrow_gold.png);
	background-position: right;
	background-size:5%;
	background-repeat:no-repeat;
}

/* Style the accordion panel. Note: hidden by default */
.level_2_panel {
  padding: 1% 0% 1% 10%;
  background-color: white;
  display: none;
  overflow: hidden;


}

.level_2_content 
{
  padding: 1% 1% 1% 10%;
  background-color: white;
  display: none;
  overflow: hidden;
}
/*///////////////////////////////////////*/
.level_3_accordion
{
 	/*background-color: #6a6a6a;*/
	background-color: #fff;
  	color: #000;
  	cursor: pointer;
  	padding: 0% 5%;
  	width: 100%;
  	text-align: center;
  	border: none;
  	outline: none;
	margin-bottom:2%;
  	transition: 0.8s;
	float:right;
	border-bottom: 3px solid #000;	
	
	
	background-image:url(images/arrow_gold.png);
	background-position: left;
	background-size:5%;
	background-repeat:no-repeat;	
}

.active, .level_3_accordion:hover {
 	background-color: #d4af37;
  	color: #000;
	border-bottom: 3px solid #000;

	background-image:url(images/arrow_black.png);
	background-position: right;
	background-size:5%;
	background-repeat:no-repeat;
}

/* Style the accordion panel. Note: hidden by default */
.level_3_panel {
  padding: 0% 0% 0% 8%;
  background-color: white;
  display: none;
  overflow: hidden;
}

.3rd_level_content
{
  	padding: 1% 0% 1% 28%;
  	background-color: white;
  	display: none;
  	overflow: hidden;
  	border-bottom: 10px solid #000;
}
/*///////////////////////////////////////*/
.level_4_accordion
{
 	background-color: #000;
 	/*background-color: #3f3f3f;*/
  	color: #fff;
  	cursor: pointer;
  	padding: 0% 5%;
  	width: 100%;
	float:right;
  	text-align: right;
  	border: none;
  	outline: none;
	margin-bottom:2%;
  	transition: 0.8s;
	border-bottom: 3px solid #000;	

	background-image:url(images/arrow_white.png);
	background-position: left;
	background-size:5%;
	background-repeat:no-repeat;	
}

.active, .level_4_accordion:hover {
 	background-color: #d4af37;
  	color: #000;
	border-bottom: 3px solid #000;

	background-image:url(images/arrow_black.png);
	background-position: right;
	background-size:5%;
	background-repeat:no-repeat;
}

/* Style the accordion panel. Note: hidden by default */
.level_4_panel 
{
  	padding: 0% 0% 0% 8%;
	width: 92%;
	float:right;	
  	background-color: white;
  	display: none;
  	overflow: hidden;
}

.level_4_content 
{
  padding: 1% 0% 1% 8%;
  background-color: white;
  display: none;
  overflow: hidden;
}
.4th_level_content
{
  	padding: 1% 0% 1% 28%;
  	background-color: white;
  	display: none;
  	overflow: hidden;
  	border-bottom: 10px solid #000;
}

/*///////////////////////////////////////*/
.level_5_accordion
{
	background-color: #fff;
  	color: #000;
  	cursor: pointer;
  	padding: 0% 5%;
  	width: 100%;
  	text-align: center;
  	border: none;
  	outline: none;
	margin-bottom:2%;
  	transition: 0.8s;
	float:right;
	border-bottom: 3px solid #000;	
	
	
	background-image:url(images/arrow_gold.png);
	background-position: left;
	background-size:5%;
	background-repeat:no-repeat;	
}

.active, .level_5_accordion:hover 
{
 	background-color: #d4af37;
  	color: #000;
	border-bottom: 3px solid #000;

	background-image:url(images/arrow_black.png);
	background-position: right;
	background-size:5%;
	background-repeat:no-repeat;
}

/* Style the accordion panel. Note: hidden by default */
.level_5_panel {
  padding: 0% 0% 0% 8%;
  background-color: white;
  display: none;
  overflow: hidden;
}
/*///////////////////////////////////////*/
.level_6_accordion
{
 	/*background-color: #d4af37;*/
 	background-color: #000;
  	color: #fff;
  	cursor: pointer;
  	padding: 0% 5%;
  	width: 92%;
	float:right;
  	text-align: right;
  	border: none;
  	outline: none;
	margin-bottom:2%;
  	transition: 0.8s;
	border-bottom: 3px solid #000;	

	background-image:url(images/arrow_white.png);
	background-position: left;
	background-size:5%;
	background-repeat:no-repeat;	
}

.active, .level_6_accordion:hover {
 	background-color: #d4af37;
  	color: #000;
	border-bottom: 3px solid #000;

	background-image:url(images/arrow_black.png);
	background-position: right;
	background-size:5%;
	background-repeat:no-repeat;
}

/* Style the accordion panel. Note: hidden by default */
.level_6_panel {
  padding: 0% 0% 0% 8%;
  background-color: white;
  display: none;
  overflow: hidden;


}