/* Reset some default browser styles */
body, h1, h2, p, a {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}

body {
    /* margin-left: 124px;
    margin-right: 124px; */
}

.body-container {
    margin-left: 124px;
    margin-right: 124px;    
}

.body-containenr-background {
    border-radius: 0px 0px 700px 700px;
    border: 1px solid #3C3B3B;
    background: #FFF;
    margin-bottom: -350px;
}

/* Styling for the navigation bar */
.navbar {
    margin-top: 32px;
    display: flex;
    justify-content: space-between; /* This will push navbar-content to the left and navbar-links to the right */
    align-items: center;
    /* padding: 20px 20px; Adjust for desired padding on the sides */
    background-color: #ffffff; /* Set to your desired color */
}

.navbar-content {
    /* Any additional styles you'd like for "Annemari Ruthven" */
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

.navbar-links {
    display: flex;
    gap: 56px; /* Adjust for desired space between the links */
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

.navbar-link {
    cursor: pointer; /* Making it clear they're clickable */
    /* Any additional styles you'd like for individual links */
}

/* Styling for the hero section */
#home {
    display: flex;
    margin-top: 96px;
    margin-bottom: 148px;
    /* padding: 64px 24px 156px 24px; Top, Right, Bottom, Left */
    flex-direction: column;
    align-items: center;
    width: 100%; /* To ensure it takes full width */
    box-sizing: border-box; /* To ensure padding is included in the width */
    /* max-width: 1200px; */
    align-self: stretch;
    background: rgba(255, 255, 255, 0.00);
    padding-bottom: 250px;
}

.small-container {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    border-radius: 16px;
    background: rgba(245, 247, 250, 0.00);
}

.home-logo {
    flex-shrink: 0;   /* prevent the item from shrinking */
    width:300px;
    height:300px;
    min-height: 120px;
    min-width:100px;
    border: 1px solid #000;
    background: url(../images/logo-background.jpeg);
    filter: grayscale(100%); /* This turns the image grayscale */
    background-size: cover;
    background-position: center;
    border-radius: 50%; /* This makes it round */
    background-size: 350%; /* This will zoom the image by 1.5 times */
    background-position: 50% 30%; /* Adjusts the image to focus on a specific part */
}

/* Styling for the profession tag above the hero title */
#home .profession-tag {
    display: flex;
    width: 100%;
    text-align: right;
    color: #212121;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-style: normal;
    align-self: stretch;
    line-height: normal;
    margin-bottom: 16px;   /* To give some space before the main title */
}

#home .profession-tag::before {
    content: '';                /* Empty content - essential for the pseudo-element to show */
    flex-grow: 1;               /* Let it take up all available space */
    height: 1px;                /* Height of the line */
    background: #979797;   /* Color of the line */
    margin-right: 10px;         /* Spacing between the text and the line */
    margin-top: 10px;
}

@font-face {
    font-family: 'Sometimes Times TRIAL'; 
    src: url('../fonts/SometimesTimesTRIAL-Light.otf') format('opentype');
  }

#home h1 {
    /* flex-shrink: 0;  */
    /* margin-left: auto; */
    /* font-size: clamp(20px, 10vw, 140px); */
    width:100%;
    font-size: 64px;
    font-weight: 100;
    font-family: 'Sometimes Times TRIAL', sans-serif; /* Default fallback to sans-serif if the custom font isn't available */
    color: #547858;
    line-height: normal;
    font-style: normal;
    align-self: stretch;
    text-align: right;
    padding-right: 80px;
    /* width:50%; */
}

#home p {
    color: #4F4F4F;
    align-self: stretch;
    font-family: 'Open Sans', sans-serif;
    font-size: 49px;
    font-style: normal;
    font-weight: 200;
    line-height: 140%;  /* This will automatically calculate to 68.6px */
    margin-top: 20px;   /* To give some space below the h1 */
    margin-bottom: 96px;
}

.devider {
    color: #212121;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: 140%; /* 22.4px */
    display: flex;
    padding: 24px 0px 64px 0px;
    align-items: left;
    gap: 20px;
    width:100%;
}

.devider::after {
    content: '';                /* Empty content - essential for the pseudo-element to show */
    flex-grow: 1;               /* Let it take up all available space */
    height: 1px;                /* Height of the line */
    background: #979797;   /* Color of the line */
    margin-left: 10px;         /* Spacing between the text and the line */
}

/* Styling for case studies */
#work {
    display: flex;
    /* width: 1440px; */
    width: 100%;
    flex-direction: column;
    align-items: center;
    /* gap: 48px; */
    flex-shrink: 0;
    /* position: relative; */
}

/* Spanning background to fill gaps of subsequent case study */
.work-background-1 {
    background-color: transparent;
    width: 100%;
}

.work-background-2 {
    background-color: #DDDDD8;
    width: 100%;
}

.work-background-3 {
    background-color: #D8D8DD;
    width: 100%;
}

.case-study {
    /* Common styles for case-study containers */
    position: relative;
    border-radius: 20px;
    /* padding: 20px; */
    width:100%;
    /* padding-left: 48px;
    padding-right: 48px; */
    /* height: 4043px; */
    margin-left: 0px;
    margin-right: 0px;
    /* margin-bottom: -2700px; To achieve the overlapping effect */
    padding-top: 300px;
}

.case-study-1 {
    border-radius: 700px 700px 0px 0px;
    border-top: 1px solid #979797;
    background: #DDDDD8;
    z-index: 1; /* To make sure this section stays on top */
}

.case-study-2 {
    border-radius: 700px 700px 0px 0px;
    border-top: 1px solid #979797;
    background: #D8D8DD;
    z-index: 2;
}

.case-study-3 {
    border-radius: 700px 700px 0px 0px;
    border-top: 1px solid #979797;
    background: #D8DDDD;
    z-index: 3;
}

/* Case content contains the image row, description and case cards */
.case-content {
    padding-bottom: 148px;
    /* margin-left: 124px;
    margin-right: 124px; */
    margin-left: 240px;
    margin-right: 240px;
}

.image-row {
    display: flex;
    flex-direction: row; /* This is default, but just to be explicit */
    justify-content: center; /* centers the images horizontally */
    gap: 10px; /* provides space between the images */
    margin-top: 0px;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.image-container {
    /* Styles for individual image containers */
    padding: 0px; /* Spacing between images */

}

.case-description {
    color: #212121;
    text-align: center;
    font-family: 'Sometimes Times TRIAL', sans-serif; /* Default fallback to sans-serif if the custom font isn't available */
    font-size: 48px;
    font-style: normal;
    /* font-weight: 100; */
    line-height: 140%; /* 84px */
    margin-top: 32px;
}

.case-card-row {
    display: flex;
    flex-direction: row; /* This is default, but just to be explicit */
    justify-content: space-between; /* spaces the cards evenly */
    gap: 32px; /* provides space between the images */
    margin-top: 48px;
    margin-bottom: 16px;
}

.case-card {
    color: #212121;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    min-width: 30%;
    box-sizing: border-box;
    padding-left: 32px;
    padding-right: 32px;
}

.case-card h2 {
    color: #7C7C7C;
    font-family: Open Sans;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 100% */
    margin-bottom: 4px;
}

#footer {
    color: #212121;
    text-align: center;
    font-family: Sometimes Times TRIAL;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 2.075px;
    display: flex;
    width: 100%;
    padding: 48px 0px 80px 0px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 80px;
}

#footer .copyright {
    color: #212121;
    text-align: center;
    font-family: Open Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 13px; /* 92.857% */    
}

#footer .svg-icon {
    vertical-align: middle;
  }

/* Media Query for screens below 700px wide - Mobile ss*/
@media (max-width: 700px) {
    .navbar-content {
        display: none;
    }

    .navbar {
        justify-content: flex-end;
    }

    .navbar-links {
        gap: 32px;
    }

    .body-containenr-background {
        margin-bottom: -100px;

    }

    .devider {
        padding-top: 72px;
        padding-bottom: 16px;
    }

    #home {
        padding-bottom: 100px;
        margin-top: 48px;
        margin-bottom: 100px;
    }

    #home p {
        margin-bottom: 0px;
        font-size: 32px;
    }

    .small-container {
        margin-bottom: 0px;
    }

    .home-logo {
        width:150px;
        height:150px;
    }

    .body-container {
        margin-left: 24px;
        margin-right: 24px;    
    }

    #home h1 {
        font-size: 42px;
        align-self: center;
        padding-right:32px;
    }

    #home p {
        font-size: 16px;
    }

    .case-study {
        padding-top: 60px;
    }

    .case-description {
        font-size: 32px;
    }

    .image-row {
        flex-direction: row; /* This is default, but just to be explicit */
    }

    .case-content {
        margin-left: 16px;
        margin-right: 16px;
        margin-top: 0px;
    }

    .case-card-row {
        flex-direction: column; /* This is default, but just to be explicit */
    }

    .case-card {
        padding-left: 16px;
        padding-right: 16px;
        line-height: 27px;
    }
}

/* Media Query for screens below 700px wide - Mobile ss*/
@media (max-width: 400px) {
    #home h1 {
        font-size: 38px;
        padding-right:16px;
    }
    .home-logo {
        width:150px;
        height:150px;
    }
}

/* ... Your existing CSS ... */

/* Media Query for screens wider than 1080px */
@media (min-width: 2000px) {
    html, body, #home .profession-tag, .devider, .case-card, .case-card h2 {
        font-size: 1.4rem; /* This increases the font size by 10% from the default */
    }

    #home h1 {
        font-size: 100px;
    }

    .case-description {
        font-size: 80px;
    }

    body {
        margin-left: 262px;
        margin-right: 262px;
    }

    .body-containenr-background {
        border-radius: 0px 0px 2200px 2200px;
    }

    .case-study-1 {
        border-radius: 2200px 2200px 0px 0px;
    }
    
    .case-study-2 {
        border-radius: 2200px 2200px 0px 0px;
    }
    
    .case-study-3 {
        border-radius: 2200px 2200px 0px 0px;
    }
}

/* Media Query for screens wider than 1080px */
@media (min-width: 701px) and (max-width: 1000px) {
    body {
        margin-left: 0px;
        margin-right: 0px;
    }

    /* .body-container {
        margin-left: 64px;
        margin-right: 64px;
    } */

    #home h1 {
        /* font-size: 48px; */
        /* margin-right: 0px;
        margin-left: auto; */
        /* padding-right: 48px; */
    }

    .case-study-1 {
        border-radius: 700px 700px 0px 0px;
    }
    
    .case-study-2 {
        border-radius: 700px 700px 0px 0px;
    }
    
    .case-study-3 {
        border-radius: 700px 700px 0px 0px;
    }
}