*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    color: white;
}
body{
    background-color: black;
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
}
header > img {
    height: 40px;
    
}
header > nav{
display: flex;
justify-content: space-between;
width: 600px;
}
header > nav > a {
    font-family:'Open Sans';
    text-decoration: none;
}
header > a  {
display:none;
}
#one {
    height:687px;
    width:100%;
    overflow-x:hidden;
    display: flex;
    justify-content: center;
    position:relative;
    align-items: center;
}
#one > img {
    width:100%;
    height: 100%;
    filter: brightness(0.5);
}
#one > figcaption {
    position:absolute;
    text-align: center;
}
#one > figcaption > h1{
    font-family:'Open Sans';

    font-size: 50px;
}
#one > figcaption > p{
    font-family: 'Whisper', cursive;
    font-size: 40px;
}
#one > figcaption > a {
    font-family:'Open Sans';
    text-decoration: none;
    background-color:rgba(255,176,0,255);
    padding: 10px 40px;
    display: inline-block;
    margin-top: 30px;
    border-radius: 15px;
    font-weight: 600;
    letter-spacing: 2px;
}
#page{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    width: 100%;
}

#page > h1 {
    font-family:'Open sans';
    font-size: 50px;
    width: 50%;
    text-align: center;
}
#page > hr {
    height: 100px;
    width: 1px;
}
#page > p{
    text-align: center;
    font-family:'Open sans';
    width: 50%;
}
#two {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap:100px;
}
#two > img {
    width: 700px;
    height: 500px;
    object-fit: cover;
}
#two > figcaption{
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
   
}
#three {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-around;
    gap:100px;
}
#three > img {
    width: 700px;
    height: 500px;
    object-fit: cover;
}
#three > figcaption{
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#forth {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap:100px;
}
#forth > img {
    width: 700px;
    height: 500px;
    object-fit: cover;
}
#forth > figcaption{
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#forth > figcaption > p{
    font-family:'Open sans';
    font-size: 20px;
}
#three > figcaption > p{
    font-family:'Open sans';
    font-size: 20px;
}
#two > figcaption > p{
    font-family:'Open sans';
    font-size: 20px;
}
@media screen and (max-width: 900px) {
    header > a  {
        display:block;
        ;
        }
    header > nav {
        display: none;
    }
    #forth > figcaption{
        width: 80%;
        margin-bottom: 100px;
    }
    #forth > img {
        width: 100%;
    }
    #forth {
        display: flex;
        flex-direction: column;
    }
    #three > figcaption{
        width: 80%;
        margin-bottom: 100px;
    }
    #three > img {
        width: 100%;
    }
    #three {
        display: flex;
        flex-direction: column;
    }
    #two > figcaption{
        width: 80%;
        margin-bottom: 100px;
    }
    #two > img {
        width: 100%;
    }
    #two {
        display: flex;
        flex-direction: column;
    }
    #select0 > h1 {
        font-family:'Open Sans';
    
        font-size: 20px;
    }
    #select {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 50px;
        gap: 20px;
    }
    footer > .foot {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    footer > .foot > nav {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
  }
  #two> figcaption > a {
    font-family:'Open Sans';
    text-decoration: none;
    background-color:rgba(255,176,0,255);
    padding: 10px 40px;
    display: inline-block;
    margin-top: 30px;
    border-radius: 15px;
    font-weight: 600;
    letter-spacing: 2px;
}
#three> figcaption > a {
    font-family:'Open Sans';
    text-decoration: none;
    background-color:rgba(255,176,0,255);
    padding: 10px 40px;
    display: inline-block;
    margin-top: 30px;
    border-radius: 15px;
    font-weight: 600;
    letter-spacing: 2px;
}
#forth> figcaption > a {
    font-family:'Open Sans';
    text-decoration: none;
    background-color:rgba(255,176,0,255);
    padding: 10px 40px;
    display: inline-block;
    margin-top: 30px;
    border-radius: 15px;
    font-weight: 600;
    letter-spacing: 2px;
}
iframe {
    width: 100%;
}
#select > div > select {
    background-color: black;
    width: 200px;
}
#select {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 50px;
}
#select0 > #select > div {
    display: flex;
    flex-direction: column;
}
#select0{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:  50px  0px;
}
#select0 > a {
    font-family:'Open Sans';
    text-decoration: none;
    background-color:rgba(255,176,0,255);
    padding: 10px 40px;
    display: inline-block;
    margin-top: 30px;
    border-radius: 15px;
    font-weight: 600;
    letter-spacing: 2px;

}
#select0 > h1 {
    font-family:'Open Sans';

    font-size: 50px;
}
#select0 > #select > div > label {
    font-family:'Open Sans';
}
#select0 > #select > div > input {
    background-color: black;
    width: 200px;
}
footer {
    margin-top: 50px;
   
}
footer > .foot {
    display: flex;
    justify-content: space-around;
}
footer > .foot > nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

footer > .foot > nav > a{
    font-family:'Open Sans';
    text-decoration: none;
}
footer > .foot > .foot1 > a{
    font-family:'Open Sans';
    text-decoration: none;
}
footer > .foot > .foot1 > h3{
    font-family:'Open Sans';
    text-decoration: none;
    margin-top: 30px;
}
footer > .foot > .foot1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}
footer > .foot > .foot1 > h2 {
    font-family:'Open Sans';
    font-size: 40px;
}
footer > .foot > .foot2 > h2 {
    font-family:'Open Sans';
    font-size: 40px;
}
footer > .foot > .foot2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}
footer > h3 {
    text-align: center;
}