@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box;}
html,body{
    font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-size: 28px;
  line-height: 1.35;
  background-color: #000000;
  color: #ffffff;
  @media screen and (max-width:1280px) {font-size: 20px; }
}
.wrapper { opacity: 0.5;}
.container{
    max-width: 1422px; width: 90%; margin: 0 auto;
     @media screen and (max-width:767px) { width: 80%;  }
}
.theme-header{
    position: absolute; width: 100%; top: 0; left: 0; 
}
.logo {background-image: url(../images/logo-bg.svg); 
    background-position: left top; background-size: auto 100%; background-repeat: no-repeat; 
    display: flex; justify-content: flex-start; align-items: center;
    padding: 34px 20px 19px 98px;
    a { width: 180px;
        img {  width: auto; height: 150px;  
            @media screen and (max-width:999px) { height: 100px;  }    
        }
    }
    @media screen and (max-width:999px) { padding:24px 20px 15px 72px;   } 
     @media screen and (max-width:767px) { padding:15px 20px 10px 42px;   } 
      
}


.border-top{ border-top: 1px solid #D3C93C;}
main {
    .hero {
        /*height: 100vh;*/ text-align: center;
        img {width: 100%; object-fit: contain; object-position: center bottom;
          /*   max-width: 1920px; max-height: 1200px; height: 100vh; */
            @media screen and (max-width:999px) {height: auto; }         
        }
        @media screen and (max-width:999px) {height: auto; padding-top:50px; } 
         @media screen and (max-width:767px) { padding-top:120px;}   
    }
    .page-copy{
        .content {
            padding: 126px 0 135px; display: flex; justify-content: space-between; gap: 30px; align-items: flex-start;          
                @media screen and (max-width:1280px) { padding: 80px 0; }  
            h1 { width: 46%; color: #D3C93C; font-size: 96px; line-height: 106px;
            @media screen and (max-width:1600px) {font-size: 3rem; align-self: flex-start;  }
             @media screen and (max-width:1280px) {font-size: 3.43rem;  line-height: 1; }  
                @media screen and (max-width:999px) {font-size: 2.5rem; }          
            }
            .desc { width: 48.5%; padding-top: 8px; padding-right: 20px; 
                p{ margin-bottom: 38px;}
                p:last-child{ margin-bottom: 5px;}
            }

            @media screen and (max-width:999px) { flex-direction: column;  padding: 2.5rem 30px;
                h1, .desc { width: 100%; }
                h1  {  line-height: 1;  
                    br { display: none;}
                }
            }
            @media screen and (max-width:767px) {  padding: 1.8rem 00px;
                h1  {  font-size: 2.2rem;    }
            }
        }
    }
}

.theme-footer {
     color: #D3C93C;
     .border-top {
        padding: 70px 0 60px; display: flex; justify-content: space-between; align-items: baseline;
        em{ color: #ffffff; margin: 0 13px; font-style: normal;}
        a {color: #D3C93C; text-decoration: none;
            &:hover{ text-decoration: underline;}
        }
        .photoby { font-style: italic; font-size: 18px;}

        @media screen and (max-width:1024px) {  padding: 30px 0; 
            .photoby { font-style: italic; font-size: 14px;}
        }
            @media screen and (max-width:767px) { flex-direction: column; gap: 10px; padding: 20px 0;  
                span { display: block;}
            }

     }
}