/* @CHARSET "ISO-8859-1"; */
/* Reset CSS
 * --------------------------------------- */

 @font-face {
  font-family: Oswald;
  src: url(../font/Oswald-Regular.ttf);
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
table {
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-weight: normal;
  font-style: normal;
}
strong {
  font-weight: bold;
}
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 100%;
  margin: 0;
  padding: 0;
  /* color:#444; */
}
q:before,
q:after {
  content: "";
}
abbr,
acronym {
  border: 0;
}

/* ***************************************** */
/* ***************************************** */

/* custom codes */


body{
  font-family: "Oswald", sans-serif;
  background-color: #eaeaea; /* Center section color */
  overflow-x: hidden;
}

h1 {
  font-size: 5em;
}
p {
  font-size: 2em;
}
.intro p {
  width: 50%;
  margin: 0 auto;
  font-size: 1.5em;
}
.column {
  display: flex;
  flex-direction: column; /* Arrange items in a column */
  gap: 10px; /* Add space between items */
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically */
}


/* ***************************************** */
/* background */



.bg-right, .bg-left {
  position: fixed;
  width: 8%;
  height: 100%;
  background-repeat: no-repeat;
  z-index: 1;
}

.bg-right {
  right: 0;
  background-color: #161616;
}

.bg-left {
  left: 0;
  background-color: #161616;
}


.bg-left img.fixed-logo {
  position: fixed; /* Ensures the logo stays fixed on the screen */
  top: 1%; /* Distance from the top of the screen */
  left: 1%; /* Distance from the left of the screen */
  width: 6%; /* Adjust the width of the logo as needed */
  height: auto; /* Maintain the aspect ratio of the logo */
  z-index: 1000; /* Keeps the logo above all other content */
}

.bg-left .first-layer-image {
  position: absolute; /* New images scroll with the page */
  top: 18%; /* Adjust the position as needed */
  width: 100%; /* Make the image fit within the section */
  height: auto; /* Maintain aspect ratio */
}

.bg-left .second-layer-image {
  position: absolute; /* New images scroll with the page */
  top: 50%; /* Adjust the position as needed */
  width: 100%; /* Make the image fit within the section */
  height: auto; /* Maintain aspect ratio */
}

.bg-left .third-layer-image {
  position: absolute; /* New images scroll with the page */
  top: 85%; /* Adjust the position as needed */
  left: 10%; /* Adjust for bg-left; for bg-right adjust right or left */
  width: 70%; /* Make the image fit within the section */
  height: auto; /* Maintain aspect ratio */
}

.bg-right .first-layer-image {
  position: absolute; /* New images scroll with the page */
  top: 5%; /* Adjust the position as needed */
  width: 90%; /* Make the image fit within the section */
  height: auto; /* Maintain aspect ratio */
}

.bg-right .second-layer-image {
  position: absolute; /* New images scroll with the page */
  top: 25%; /* Adjust the position as needed */
  left: 5%;
  width: 90%; /* Make the image fit within the section */
  height: auto; /* Maintain aspect ratio */
}

.bg-right .third-layer-image {
  position: absolute; /* New images scroll with the page */
  top: 55%; /* Adjust the position as needed */
  
  width: 90%; /* Make the image fit within the section */
  height: auto; /* Maintain aspect ratio */
}

.bg-right .fourth-layer-image {
  position: absolute; /* New images scroll with the page */
  top: 83%; /* Adjust the position as needed */
  width: 90%; /* Make the image fit within the section */
  height: auto; /* Maintain aspect ratio */
}







/* ***************************************** */
/* sections */


.section {
  text-align: center;
}

#section0 img {
  height: auto; /* Maintains the aspect ratio */
  width: 90%; /* Allows the image to scale down */
  display: inline-block; /* Treats the image as an inline element for centering */
  margin: 0 auto; /* Centers the image horizontally */
  margin-top: 10%;
  margin-bottom: 10%;
}

#section1 {
  text-align: left;
  width: 60%; /* Adjusts content width to account for 10% on each side */
  max-width: 1200px;
  position: relative;
  z-index: 2; /* Ensure it stays above the backgrounds */
}

.button-container {
  display: flex;
  flex-direction: column; /* Stacks buttons vertically */
  align-items: center; /* Centers buttons horizontally */
  margin-top: 5%;
  margin-bottom: 10%;
}


.haag-btn {
  display: block; /* Makes each button take the entire width of its container */
  width: 200px; /* Set a fixed width to keep the buttons consistent */
  padding: 10px 20px;
  background-color: #ffffff;
  color: #000000;
  font-size: 1.6em;
  text-decoration: none;
  border: 2px solid black;
  border-left: #787876 6px ridge;
  border-bottom: #787876 6px outset;
  margin: 10px 0; /* Adds vertical spacing between the buttons */
  text-align: center; /* Centers text inside the button */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.haag-btn:hover {
  background-color: #011167;
  color: #ffffff;
}




#section2 {
  position: relative; /* Sets a relative positioning context for child elements */
  width: 100%;
  height: 100vh; /* Full viewport height */
  margin-top: 10%;
  margin-bottom: 10%;
}


#section3 {
  margin-top: 20%;
}

#section3 i {
  font-size: 40px;
  color: #000000;
}

#section3 a {
  padding: 20px;
}

#section3 .copyright {
  text-transform: uppercase;
  padding: 20px 0;
  display: block;
}



/* ***************************************** */
/* image artist image */
.artist-img {
  position: absolute; /* Allows the image to freely float over the entire section */
  top: 50%; /* Centers vertically */
  left: 50%; /* Centers horizontally */
  transform: translate(-50%, -50%); /* Precisely centers the image in the container */
  max-width: 90%; /* Adjusts the size of the image to be proportional to the viewport width */
  height: autovh; /* Maintain aspect ratio */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
  z-index: 1;
}

/* ***************************************** */
/* responsive codes */
@media only screen and (max-width: 760px) {
  

  h1 {
    font-size: 3.5em;

  }

  p {
    font-size: 1.2em;
    line-height: 1.2; /* Double spacing */
  }

  #section0 img {
   height: auto;
   max-width: 75%;
  }

  

  #section1 {
    text-align: left;
    font-size: small;
  }

  .bg-right, .bg-left {
    position: fixed;
    width: 12%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: 1;
  }
  
  .bg-right {
    right: 0;
    background-color: #161616;
  }
  
  .bg-left {
    left: 0;
    background-color: #161616;
  }

  .bg-left img.fixed-logo {
    position: fixed; /* Ensures the logo stays fixed on the screen */
    top: 1%; /* Distance from the top of the screen */
    left: 1%; /* Distance from the left of the screen */
    width: 10%; /* Adjust the width of the logo as needed */
    height: auto; /* Maintain the aspect ratio of the logo */
    z-index: 1000; /* Keeps the logo above all other content */
  }

  .bg-right .fourth-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 87%; /* Adjust the position as needed */
    width: 100%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .button-container {
    margin-bottom: 15%;
    padding-bottom: 30%;
  }

  .haag-btn {
    display: block; /* Makes each button take the entire width of its container */
    width: 20%; /* Set a fixed width to keep the buttons consistent */
    height: 40px;
    padding: 7.5px 15px;
    background-color: #ffffff;
    color: #000000;
    font-size: 90%;
    text-decoration: none;
    border: 2px solid black;
    border-left: #787876 6px ridge;
    border-bottom: #787876 6px outset;
    margin: 5px 0; /* Adds vertical spacing between the buttons */
    text-align: center; /* Centers text inside the button */
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  #section2 {
    position: relative; /* Sets a relative positioning context for child elements */
    width: 100%;
    height: 100vh; /* Full viewport height */
    margin-top: -60%;
    margin-bottom: 10%;
  }


  .bg-left .first-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 18%; /* Adjust the position as needed */
    width: 100%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .bg-left .second-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 50%; /* Adjust the position as needed */
    width: 100%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .bg-left .third-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 85%; /* Adjust the position as needed */
    left: 10%; /* Adjust for bg-left; for bg-right adjust right or left */
    width: 70%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .bg-right .first-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 5%; /* Adjust the position as needed */
    width: 90%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .bg-right .second-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 25%; /* Adjust the position as needed */
    left: 5%;
    width: 90%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .bg-right .third-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 55%; /* Adjust the position as needed */
    
    width: 90%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .bg-right .fourth-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 83%; /* Adjust the position as needed */
    width: 90%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  #section3 {
    margin-top: -30%;
  }

  #section3 i {
    font-size: 20px;
    
  }

  #section3 .copyright {
   font-size: 13px;
  }
  

  
  
  

}