/* Font is 100 - 900 in intervals of 100. regular and italic*/

html {
    scroll-behavior: smooth;
}

.backgroundimg{
    width: 200%;
    margin-left: -50%;
    margin-bottom: -100%;
}

body{
    font-family: inter;
    color: #1a1a1a;
    overflow-x: hidden;
    padding-top: 6%;
    min-height: 100vh; /* Ensures the body is at least the full height of the viewport */
    background-color: white;
}

h1, h2, h3, li{
    color: black;
}

h1{
    font-weight: 600;
    font-size: 40pt;
}

h2{
    font-weight: 400;
    font-size: 32pt;
}

p, label, input, textarea, button{
    font-weight: 200;
    font-size: 16pt;
    color: black;
}

input{
    padding-right: 30%;
}

a{
    margin-left: 42%;
    background-color: black;
    padding: 15px;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    align-self: center;
}

.looselink{
    background-color: grey;
}

a:hover{
    background-color: grey
}

.looselink:hover{
 background-color: lightgray;   
}

.white{
    color: white;
}

aside, .aside{
    margin-left: 33%;
    margin-top: -20%;
}

nav, footer{
    background-color: #2a2a2a;
    margin-left: -50%;
    margin-right: -50%;
}

footer{
    padding: 1%;
    margin-top: 15%;
    color: white;
}

.rounded{
    border-radius: 12px;
}

.center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.inline{
    display: inline-block;
    width: 40%;
    margin: auto;
}

.testimonial{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.imgcontainer{
width: 32%;
  height: 455px;
  margin-bottom: 25px;
  object-fit: cover;
  border-radius: 12px;
}

input, textarea, button{
    border-radius: 12px;
    padding: 1%;
    background-color: white;
}

.msg {margin-top:15px; padding:10px; border-radius:5px;}
.msg.success {background:#e0f7e0; color:#2b7a2b;}
.msg.error   {background:#f7e0e0; color:#7a2b2b;}

.content-wrapper {
    display: flex; /* Turns the wrapper into a flex container */
    align-items: flex-start; /* Important: Ensures items align to the top */
    /* You may need to manually set the max-width here if the current structure is constrained */
}

/* 2. Adjust the section (Form) and main (Sidebar) behavior */
.content-wrapper .inline {
    /* Overrides the default width behavior to respect the flex layout */
    flex-basis: 60%; 
    max-width: 60%; 
    margin: 0; /* Clear default margins */
    padding: 0;
}

.content-wrapper main {
    flex-basis: 35%;
    max-width: 35%;
    margin: 0; 
    /* Note: Keep any padding/background color defined in the HTML inline style for 'main' */
}

/* Optional: If you want a little gap between the form and the sidebar */
.content-wrapper {
    gap: 20px; /* Adjust gap size as needed */
}

nav{
    /* THE MAGIC PROPERTIES */
    position: fixed; 
    left: 50%;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    top: 0;
}