/* CORRECTED: Using the standard 'fonts' path and correct font weights */
@font-face {
  font-family: 'Marianne';
  src: url('fonts/Marianne-Light.woff2') format('woff2'); 
  font-weight: 300; /* This is correct for Light */
  font-style: normal;
}
@font-face {
  font-family: 'Marianne';
  src: url('fonts/Marianne-Bold.woff2') format('woff2');
  font-weight: 700; /* CORRECTED: 'Bold' corresponds to weight 700 */
  font-style: normal;
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-decoration: none;
}
body{
    overflow-x: hidden;
    /* This rule correctly applies Marianne Light (weight 300) to the entire page */
    font-family: 'Marianne', sans-serif;
    font-weight: 300;
}
#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.hero-header {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
}
.hero-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.78); 
    z-index: -1;
}
.wrapper{
    width:1280px;
    max-width: 95%;
    margin: 0 auto;
    padding: 0 20px;
}
header{
    padding: 40px 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
nav .togglebtn{
    width: 35px;
    height: 35px;
    position: absolute;
    top:45px;
    right: 3%;
    z-index: 5;
    cursor: pointer;
    display: none;
}
nav .togglebtn span{
    display: block;
    background-color: #16d387;
    margin: 5px 0px;
    width:100%;
    height:3px;
    transition: 0.3s;
    transition-property:  transform, opacity;
}
nav .navlinks{
    list-style-type: none;
}
nav .navlinks li{
    display: inline-block;
}
nav .navlinks li a{
     color:#ffffff;
     margin-right: 2.5rem;
     /* This text will now correctly inherit Marianne Light from the body */
}
.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top:4rem;
}
.container .hero-pic{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #16d387;
    box-shadow: 5px 7px 25px rgba(0,0,0,0.5);
}
.hero-pic img{
    height: 100%;
    width:100%;
    transition: 0.5s;
}
.hero-pic img:hover{
    transform: scale(1.2);
}
.hero-text{
    max-width: 500px;
    display: flex;
    flex-direction: column;
}

.hero-text h5 {
    color: #16d387;
    font-size: 1.2rem;
    margin-bottom: 0rem;
    line-height: 1.2; 
}

.hero-text .typed-lines {
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 8px 0 20px; 
    font-family: 'Spectral', serif;
    font-weight: 700;
    font-style: italic;
}

.hero-text h1{
    color: #ffffff;
    font-size: 3rem;
    font-family: 'Marianne', sans-serif;
    font-weight: 700; /* CORRECTED: This now matches the 'Bold' font file */
    margin: 0;
}

.btn-group{
    margin:45px 0;
}
.btn-group .btn{
    border-color: #ffffff;
    color:#ffffff;
    background-color: transparent;
    padding: 12px 25px;
    margin: 5px 0px;
    margin-right:7px;
    border-radius: 30px;
    border:2px solid #e5e5e5;
    box-shadow:  0 10px 10px -8px rgb(0 0 0 / 78%);
    /* This text will now correctly inherit Marianne Light from the body */
}
.btn.active{
    border-color:#16d387;
}
.hero-text .social i{
    color: #ffffff;
    font-size: 30px;
    margin-right: 10px;
    margin-left: 10px;
    transition: 0.5s;
}
.hero-text .social i:hover{
    color:#16d387;
    transform: rotate(360deg);
}
@media(max-width:930px){
    nav .togglebtn{display: initial;}
    .click {top:45px;}
    .click span{position: absolute; margin-top:12px}
    .click span:first-child{transform: rotate(-40deg);}
    .click span:nth-child(2){opacity: 0; margin:0;}
    .click span:last-child{transform: rotate(45deg); top:0;}
    nav .navlinks{position: absolute; top:110px; right:-100%; bottom: 0; width: 60%; height: 100vh; background-color: #222; z-index: 3; box-shadow: 5px 13px 30px rgba(0,0,0,0.1); transition: 0.5s; padding: 25px 0px;}
    nav .navlinks li{display: block;}
    nav .navlinks li a{display: block; margin-bottom: 15px; text-align: center;}
    nav .navlinks.open{right:0;}
}
@media(max-width:768px){
    .container{flex-direction: column; padding-top:2rem}
    .hero-text{padding:40px 0px;}
    .container .hero-pic {width: 200px; height: 200px; border-width: 5px;}
}