body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "M PLUS Rounded 1c", serif;
    font-weight: 400;
    font-style: normal;
}
* {
    box-sizing: border-box;
}
.rsp {
    max-width: 100%;
    height: auto;
}
.cell {
    position: relative;
    overflow: hidden;
    height: auto;
    max-height: 400px;
}

/* Overlay text options*/

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* center my text */
    color: white;
    /* color of my text */
    font-size: 24px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    /* background color*/
    padding: 10px;
    border-radius: 5px;
}

/* default - small devices */

[class*="col"] {
    grid-column-end: span 12;
}

/* below 600px tablet */

@media only screen and (max-width: 600px) {
    .sm1 {
        grid-column-end: span 12;
    }
    .sm2 {
        grid-column-end: span 6;
    }
    .sm3 {
        grid-column-end: span 4;
    }
    .sm4 {
        grid-column-end: span 3;
    }
}

/* above 601px  tablet */

@media only screen and (min-width: 601px) {
    .md1 {
        grid-column-end: span 12;
    }
    .md2 {
        grid-column-end: span 6;
    }
    .md3 {
        grid-column-end: span 4;
    }
    .md4 {
        grid-column-end: span 3;
    }
}

/* above 1025px  desktop */

@media only screen and (min-width: 1025px) {
    .col1 {
        grid-column-end: span 12;
    }
    .col2 {
        grid-column-end: span 6;
    }
    .col3 {
        grid-column-end: span 4;
    }
    .col4 {
        grid-column-end: span 3;
    }
}

/*Header Image Code*/

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 12-column grid */
    gap: 10px;
    /* Gap between my columns */
}
.grid-item {
    grid-column: span 12;
    /* Span across all 12 columns */
}
.grid-item img {
    width: 100%;
    height: auto;
    /* keep aspect ratio */
}
.image {
    flex-shrink: 0;
    margin-right: 20px;
}
.image img {
    max-width: 150px;
    height: auto;
}
h1 {
    margin: 0;
    font-family: "IBM Plex Serif", serif;
    font-size: 36px;
    line-height: 1.2;
    padding: 10px;
    /* Adds padding to h1 */
}
h2 {
    font-family: "IBM Plex Serif", serif;
}

/* Small Screens */

@media (max-width: 600px) {
    .next {
        flex-direction: column;
        align-items: flex-start;
    }
    .image {
        margin-right: 0;
        margin-bottom: 10px;
    }
}
@media (max-width: 400px) {
    .text {
        min-width: 90px;
    }
}

/*End of Header Image Code*/


/* Featured Messages on site */

.homepgheadertext {
    font-family: "IBM Plex Serif", serif;
    width: 40%;
    /* keeps og width */
    padding: 20px;
    /* Maintain padding */
    margin: 0 auto;
    /* center the text thing horizontally */
    text-align: center;
}
@media (max-width: 768px) {
    .homepgheadertext {
        width: 80%;
        /* width for smaller screens */
    }
}
@media (min-width: 769px) {
    .homepgheadertext {
        width: 40%;
        /*  width for larger screens */
    }
}

/*end of featured Messages */

body {
    margin: 0;
    padding: 0;
}

/* Container styles */

.col3 {
    margin: 0 15px;
    /* Adds margin to the left and right */
    text-align: left;
    /* Align text to the left */
    box-sizing: border-box;
    width: calc(100% - 30px);
}

/* Heading styles */

h2 {
    font-size: 24px;
    line-height: 1.2;
    /* Default line height */
}
.description {
    font-size: 16px;
}

/* Responsive styles for smaller screens */

@media (max-width: 768px) {
    h2 {
        font-size: 20px;
    }
    .description {
        font-size: 14px;
        /* Reduced size for description */
    }
}
@media (max-width: 480px) {
    h2 {
        font-size: 18px;
        /* Smaller size for small screens */
    }
    .description {
        font-size: 12px;
    }
}
@media (max-width: 320px) {}

/*Box next to text*/

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    /* Space between columns */
}

/* Placeholder Styling */

.placeholder {
    width: 100%;
    background-color: rgb(128, 128, 128);
    /* gray background for placeholder image*/
    font-size: 16px;
    /* Change my font size here */
    color: rgb(0, 0, 0);
    /* My text color */
    display: block;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* Padding for the inside of the placeholder image*/
    box-sizing: border-box;
    min-height: 450px;
    /* Min height */
    overflow: hidden;
    white-space: normal;
    text-align: center;
    /* Centers my text */
}

/* Makes Content Responsive */

@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
        /* Stack columns for small screens */
    }
    .placeholder {
        min-height: 250px;
        /* minimum height for phones */
        font-size: 14px;
        padding: 10px;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        /* Two columns on medium screens */
    }
    .placeholder {
        min-height: 400px;
    }
}

/*close Responsive*/


/* image next to text css*/

.text {
    padding: 10px;
    /* chanfes my padding around text */
    line-height: 1.5em;
    /* Spacing for line height */
}

/* Grid layout */

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
    /* Space between items on grid */
}
.cell {
    height: 100px;
}

/* Default for small devices */

[class*="col"] {
    grid-column-end: span 12;
}

/* Styles for screens below 600px */

@media only screen and (max-width: 600px) {
    .padded {
        padding: 10px;
        /* padding smaller screens */
    }
    .twothird {
        grid-column-end: span 12;
        /* width small screens*/
    }
    .col3 {
        grid-column-end: span 12;
        /* spans my text */
        text-align: left;
        /*  puts the text on left side  */
        padding: 0;
    }
    .text {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Styles for screens above 601px */

@media only screen and (min-width: 601px) {
    .padded {
        padding: 10px;
    }
    .twothird {
        grid-column-end: span 8;
    }
    .col3 {
        grid-column-end: span 4;
        /* Text area */
        padding: 10px;
    }
}

/* Styles for screens above 1025px */

@media only screen and (min-width: 1025px) {
    .padded {
        padding: 80px 9px;
    }
    .twothird {
        grid-column-end: span 8;
    }
    .col3 {
        grid-column-end: span 4;
        /* Text area */
        padding: 10px;
    }
}

/*Code for info page sizes*/

.combo {
    padding: 20px;
    /* Padding inside */
    min-height: 150px;
    border: 1px solid rgb(241, 241, 238);
    background-color: rgb(241, 241, 238);
    box-sizing: border-box;
    margin: 10px;
}

/* 3 columns on large screens */

@media (min-width: 1200px) {
    /* Large screens desktop view */
    .combo {
        width: calc(25% - 20px);
    }
}

/* Medium screens, 2 columns */

@media (min-width: 992px) and (max-width: 1199px) {
    /* Medium screens tablet view */
    .combo {
        width: calc(50% - 20px);
    }
}

/* Small screens, 1 column */

@media (max-width: 991px) {
    /* smaller screens/mobile view */
    .combo {
        width: calc(100% - 20px);
    }
}

/*3 col and single col*/

.singlecol {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    /* Space for columns */
    padding: 10px;
    /*  grid padding */
    margin-bottom: 40px;
    background-color: rgb(255, 240, 199);
}
.cell {
    /* Background color for entire doc*/
    color: black;
    /* text color*/
    padding: 20px;
    /* Inside padding for the cell */
    min-height: 300px;
    /* Minimum height for this cell */
    grid-column: span 12;
    display: grid;
    align-items: start;
    /* puts content on the top */
}
.layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    /* Space between cells */
    padding: 10px;
    /* Padding around the layout */
}
.cell.col3 {
    grid-column: span 4;
    /* spans 4 of 12 cols*/
    min-height: 200px;
    /* minimum height for the 3 cells */
    text-align: center;
    box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.1);
    background-color: rgb(241, 241, 238);
    /*color of the three things */
}
@media (max-width: 768px) {
    .cell.col3 {
        grid-column: span 12;
    }
}
.featured {
    width: 212x;
    height: 319px;
    background: rgb(200, 200, 200);
    /*changes the colour of my featured header*/
    display: grid;
}
body {
    margin: 0;
}
.hero {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin: -1rem -1rem 1rem;
    height: 50vh;
    color: white;
    background-color: rgb(58, 63, 45);
    background-image: url(../img/katie-smith-uQs1802D0CQ-unsplash.jpg);
    opacity: 0.9;
    background-size: cover;
    background-position: 47% 76%;
}
.homepgheadertext {
    grid-column: 1 / -1;
    /* Span across all columns */
    display: grid;
    place-items: center;
    text-align: center;
}
.hero2 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin: -1rem -1rem 1rem;
    height: 50vh;
    color: white;
    /* Text colour */
    background-image: url(../img/dulightthing.png);
    background-color: rgb(58, 63, 45);
    background-size: cover;
    background-position: 47% 76%;
}
.hero3 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin: -1rem -1rem 1rem;
    height: 50vh;
    color: white;
    /* Text colour */
    background-image: url(../img/Screenshot%202024-11-28%20at%2010.41.45%E2%80%AFAM.png);
    background-color: rgb(58, 63, 45);
    background-size: cover;
    background-position: 47% 76%;
}
.hero4 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin: -1rem -1rem 1rem;
    height: 50vh;
    background-image: url(../img/Computer.jpg);
    color: rgb(255, 255, 255);
    /* colour of my text */
    background-color: rgb(58, 63, 45);
    background-size: cover;
    background-position: 47% 76%;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

/*closes single and 3 col*/


/*Circular Image*/

.image-container {
    position: relative;
    width: 50%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    margin: 30px auto 0;
    overflow: hidden;
    border-radius: 50%;
}
.image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/*closes circular image code*/


/*contact Page*/

body {
    background-color: rgb(255, 240, 199);
    /* Background color of contact page */
}
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    /* adds space to my grid content */
    width: 80%;
    max-width: 1200px;
    /* Max width for larger screens */
    margin: 0 auto;
}
.t {
    background: rgb(255, 240, 199);
    overflow: hidden;
    text-align: center;
    grid-column: span 6;
    /* 6 out of the 12 columns */
}
.image {
    width: 100%;
    height: auto;
}
.image-text {
    background: rgb(255, 240, 199);
    /* Background color */
    overflow: hidden;
    text-align: center;
    grid-column: span 6;
    /* 6 out of the 12 columns */
    padding-top: 20px;
    /* Adds spacing to the top */
}
p {
    margin: 0;
    /* margins for my paragraphs */
    padding: 10px;
    /* Padding for my text */
}

/* contact page responsiveness thing*/

@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(1, 1fr);
        /* 1 in a row phones */
    }
}

/*Website Footer*/

* {
    box-sizing: border-box;
}
.footer {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding: 20px;
    background-color: rgb(95, 112, 85);
    color: white;
}
.footer-content {
    display: contents;
}
.footer-left {
    grid-column: 1 / 7;
}
.footer-right {
    grid-column: 7 / 13;
    text-align: right;
}