nav {
  overflow: visible;
}

.logo-wrap {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-right: auto;
  flex-shrink: 0;

  /* ADD THESE: */
  margin-left: 60px;       /* moves it right — increase to go further right */
  align-self: flex-end;    /* pins it to the bottom of the nav */
  margin-bottom: -25px;    /* pulls it down to spill over — increase to spill more */
}

h1 {
    font-family:'Courier New', Courier, monospace;
    font-size: 35px;
    margin-top: 6%;
    margin-left: 9%;
    color: #660F46;
}

#paragraph-1 {
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 15px;
    font-size: 20px;
}

#image-1 {
    width: 690px;
    height: 300px;
    border: #660F46;
    border-style: dotted;
    margin-left: 25%;
    margin-right: 20%;
    margin-top: 2%;
}

@media (max-width: 768px) {
 #image-1 {
    width: 330px;
    height: 150px;
    border: #660F46;
    border-style: dotted;
    margin-left: 4%;
    margin-right: 3%;
    margin-top: 2%;
    }
}

h2 {
    font-family:'Courier New', Courier, monospace;
    font-size: 35px;
    margin-top: 5%;
    margin-left: 9%;
    color: #660F46;
}

#paragraph-2 {
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 15px;
    font-size: 20px;
    margin-bottom: 10%;
}

#image-2 {
    width: 590px;
    height: 300px;
    margin-left: 30%;
    margin-right: 20%;
    margin-top: -7%;
}

@media (max-width: 768px) {
 #image-2 {
    width: 330px;
    height: 150px;
    margin-left: 4%;
    margin-right: 3%;
    margin-top: 2%;
    }
}

h3 {
    font-family:'Courier New', Courier, monospace;
    font-size: 35px;
    margin-top: 2%;
    margin-left: 9%;
    color: #660F46;
}

#paragraph-3 {
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 15px;
    font-size: 20px;
    margin-bottom: 0px;
}

.video{
margin-bottom: 20%;
position:absolute;top:0;left:0;width: 40%;height:40%;margin-left: 30%;margin-right: 20%; margin-top: 0px;
}

@media (max-width: 768px) {
 .video {
    width: 330px;
    height: 150px;
    margin-left: 8%;
    margin-right: 3%;
    margin-top: 35px;
    }
}

.bottom-bar {
    position:relative;   /* Keeps the bar at the bottom even when scrolling */
    bottom: 0;        /* Pins it to the bottom edge */
    left: 0;
    width: 100%;      /* Spans the full width of the screen */
    height: 100px;
    background-color: #607c8e; /* Dark background */
    color: white;
    display: flex;    /* Aligns the links in a row */
    justify-content: space-around; /* Spaces links evenly */
    padding: 15px 0;
    z-index: 1000;    /* Ensures it stays on top of other content like your video */
}

.bottom-bar a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

#image-3 {
    width: 260px;
    height: 340px;
    margin-top: 5%;
    margin-left: 300px;
    box-shadow: 5px 5px 15px #4b597f;
}

@media (max-width: 768px) {                
    #image-3 {       
    width: 145px;
    height: 190px;
    margin-top: 5%;
    margin-left: 30px;
    box-shadow: 5px 5px 15px #4b597f;                  
    }
}

#intro {

    margin-left: 250px;
    font-size: 22px;
    padding-top: 50px;
    margin-right: 300px;
    margin-bottom: 20%;
    position:absolute;
}

@media (max-width: 768px) {                
    #intro {  
    display: block;     
    font-size: 15px;
    margin-left: 5%;
    padding-top: 40px;
    margin-right: 50%;               
    }
}

#intro-headline-1 {
    font-size: 45px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #87a9dc;
    font-weight: lighter;
    margin-left: 45%;
    margin-top: -300px;
    margin-right: 8%;
}

@media (max-width: 768px) {                
    #intro-headline-1 {  
    display: block;     
    font-size: 18px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #87a9dc;
    font-weight: lighter;
    margin-left: 50%;
    margin-top: -170px;
    margin-right: 2%;                  
    }
}

#intro-headline-2 {
    font-size: 48px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bolder;
    color: #2c5a9c;
    margin-left: 45%;
    padding-top: 5px;
    font-style: italic;
}

@media (max-width: 768px) {                
    #intro-headline-2 {  
    display: block;     
    font-size: 18px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bolder;
    color: #2c5a9c;
    margin-left: 50%;
    padding-top: 5px;
    font-style: italic;                 
    }
}

#headshot {

    width: 350px;
    height: 230px;
    margin-left: 65%;
    margin-top: 29%;
    margin-bottom: 7%;
        box-shadow: 5px 5px 15px #685a50;
}

@media (max-width: 768px) { 
    #headshot { 
        /* Center the image and reset the heavy desktop margins */
        display: block;
        margin: 20px auto; 
        width: 40%;      /* Makes it fit the screen width */
        height: auto;    /* Keeps the image from looking squished */
        margin-left: 53%; 
        margin-top: 39.5%;
    }
}

#contact-1 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 50px;
    color: #660F46;
    margin-left: 16.9%;;
    margin-top: -4%;;
}

@media (max-width: 768px) {                
    #contact-1 {  
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 20px;
    color: #660F46;
    margin-left: 60%;
    margin-top: 58.5%;        
    }
}

#contact-2 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 22px;
    color: #95aaa7;
    margin-left: 17%;
    padding-top: 25px;
}

@media (max-width: 768px) {                
    #contact-2 {  
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 11px;
    color: #95aaa7;
    margin-left: 55%;
    padding-top: 19px;    
    margin-bottom: 8%;      
    }
}

h4 {
    font-family:'Courier New', Courier, monospace;
    font-size: 35px;
    margin-top: 6%;
    margin-left: 9%;
    color: #2c5a9c;
}
#paragraph-ai-1 {
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 30px;
    font-size: 20px;
}

h5 {
    font-family:'Courier New', Courier, monospace;
    font-size: 33px;
    margin-top: 5%;
    margin-left: 9.2%;
    color: #2c5a9c;
    padding-bottom: 25px;
}

#ai-1 {

    margin-left: 20%;
    margin-right: 20%;
    font-size: 20px;
    color: rgb(144, 172, 204);
}

@media (max-width: 768px) {                
    #ai-1 {       
        display: block;         
        margin-left: 5%; /* Increase this value (e.g., 5%, 10%, 20px) */                
        margin-right: 0%;                
        margin-top: 2%;                
        font-size: medium;                
    }
}

#resume {
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 30px;
    font-size: 20px;
    color: rgb(128, 187, 168);
    text-decoration: underline;
}

@media (max-width: 768px) {                
    #resume {       
        display: block;         
        margin-left: 5%; /* Increase this value (e.g., 5%, 10%, 20px) */                
        margin-right: 0%;                
        margin-top: 2%;                
        font-size: medium;                
    }
}

#ai-2 {
    margin-left: 26%;
    margin-right: 20%;
    width: 510px;
    height: 600px;
    padding-top: 32px;
}

@media (max-width: 768px) {                
    #ai-2 {       
    margin-left: 8%;
    margin-right: 0%;
    width: 310px;
    height: 420px;
    padding-top: 32px;                
    }
}

#site {

    margin-left: 20%;
    margin-right: 20%;
    padding-top: 30px;
    font-size: 20px;
    color: rgb(180, 174, 208);
    text-decoration: underline;
}

@media (max-width: 768px) {                
    #site {       
        display: block;         
        margin-left: 5%; /* Increase this value (e.g., 5%, 10%, 20px) */                
        margin-right: 0%;                
        margin-top: 2%;                
        font-size: medium;                
    }
}

#ai-3 {
  margin-left: 20%;                /* Removes space from the left */
  text-align: left;              /* Ensures text aligns left */
  font-size: 20px;
  color: rgb(180, 174, 208);
  padding-top: 30px;
  padding-bottom: 5%;
  margin-top:;
}

@media (max-width: 768px) {                
    #ai-3 {       
        display: block;         
        margin-left: 5%; /* Increase this value (e.g., 5%, 10%, 20px) */                
        margin-right: 0%;                                
        font-size: medium;  
        margin-top: -25px;      
        margin-bottom: 30px;        
    }
}

.disclaimer {
    /* Use VH for height-based spacing */
    margin-top: 10vh; 
    margin-left: 30px;
    margin-right: 30px;
}

@media (max-width: 768px) {
    .disclaimer {
        margin-left: 10px;
        margin-right: 10px;
        /* Reduce gap on mobile */
        margin-top: -10px; 
        text-align: center;
    }
}

@media (max-width: 768px) { 
    nav { 
        flex-direction: column; /* Stacks links under the KATE logo */
        align-items: center; 
        padding: 20px 10px 50px 10px; /* Extra bottom padding for logo spill */
        height: auto; 
    }

    .logo-wrap { 
        margin: 0 auto 30px auto !important; /* Centers logo & adds space below */
        align-self: center; 
        transform: scale(0.8); /* Shrinks logo slightly to fit screen */
    }

    .nav-links { 
        width: 100%;
        justify-content: center; /* Centers the links horizontally */
        gap: 15px; /* Tighter gap so they fit on one line */
        margin: 0 !important; 
    }

    .nav-links a { 
        font-size: 16px !important; /* Smaller, mobile-friendly size */
        white-space: nowrap; /* Prevents "human skills" from breaking into 2 lines */
    }
}

@media (max-width: 768px) {
    .explore-container {
        margin-top: 20px !important; /* Moves it below the hero text */
        margin-right: auto;
        margin-left: auto; /* Centers it on mobile */
        position: relative; 
        display: block;
    }
}