/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {

    .section-home {
        height: 170vh;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
        z-index: 2;
    }

    .small-title h3{
        font-size: 0.95em;
        font-weight: 400;
        padding-bottom: 0;
    }

    .hero-section {
        position: absolute;
        padding: 8em 1em;
        box-sizing: border-box;
        width: 100%;
        z-index: 1;
    }

    .hero-section > h1 {
        font-size: 3em;
        text-align: left;
        width: 100%;
        line-height: 1em;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: #ebfaf2;
        margin-bottom: 0
    }

    .intro-expertise {
        padding-inline: 1em;
        padding-block: 3em;
    }

    .small-title svg {
        margin-block: auto;
        margin-right: 1em;
    }

    .expertise-heading {
        margin-top: -0.3em;
        font-size: 2em;
        font-weight: 600;
        width: 70%;
    }

    .expertise-section {
        padding-top: 2em;
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
    }

    .expertise {
        width: 100%;
        border: none;
        padding-right: 1.7em;
    }

    .expertise:last-child {
        border: none;
        padding: 0;
    }

    .expertise-icon > svg {
        width: 30;
        height: 30;
        background-color: #04F489;
        padding: 1em;
        border-radius: 50%;
        stroke: #033D3D;
        border: 1px solid #0fd297;
    }

    .expertise-title {
        font-size: 1.4em;
        font-weight: 600;
        color: #374555;
    }

    .expertise-description {
        text-align: justify;
        width: 95%;
        font-size: 0.9em;
        line-height: 2em;
        font-weight: 500;
        color: #797878;
    }

    .properties-section {
        padding-inline: 1em;
        padding-block: 3em;
    }

    .properties-heading-section {
        display: flex;
        flex-wrap: wrap;

    }

    .properties-heading {
        width: 100%;
    }

    .more-CTA {
        font-weight: 500;
    }

    .properties-heading h1 {
        font-size: 2em;
        font-weight: 500;
        margin-block: 0;
    }

    .properties-heading p {
        width: 100%;
        font-weight: 500;
        margin-top: 1em;
    }

    .properties-nav-container {
        width: 60%;
        display: flex;
        align-items: center; /* center vertically */
        justify-content: space-between; /* distribute items along the horizontal axis */
    }

    .properties-nav {
        display: flex;
        margin-left: auto;
        gap: 1.5em;
    }

    a > svg {
        stroke-width: 1;
        stroke: grey;
    }

    .properties {
        margin-top: 2em;
        display: flex;
        flex-wrap: wrap;
        gap: 1.5em;
    }

    .property-div {
        width: 100%;
        text-decoration: none;
        color: #033D3D
    }

    .property {
        min-height: 15em;
        background-color: #00cc87;
        background-image: url("../img/house-isolated-field.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding-top: 1em;
        transition: all 0.3s ease-in-out;
    }

    .property:hover {
        box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
    }

    .date-added {
        display: none;
    }

    .property:hover .date-added {
        opacity: 1;
        transform: translateX(0);
    }

    .property-description {
        color: #12172;
        padding: 0em 1em 1em 1em;
        display: flex;
        flex-wrap: wrap;
        border: 1px solid transparent;
        transition: all 0.3s ease-in-out;
        background-color: #fafafc;
    }

    .property-location {
        display: flex;
        gap: 0.5em;
        color: dimgrey;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .property-location p {
        font-size: 0.9em;
    }

    .property-location svg {
        margin-block: auto;
    }

    .book-button {
        padding: 0.8em 2.5em;
        background-color: #033D3D;
        color: white;
        font-weight: 300;
    }

    .footer-description {
        margin-top: 0.5em;
        display: flex;
        width: 100%;
        gap: 3em;
    }

    .property-price {
        margin-block: auto;
        font-weight: 700;
        font-size: 1.2em;
    }

    .property-properties {
        margin-top: 0;
        display: flex;
    }

    .property-properties > p {
        font-size: 0.9em;
        font-weight: 500;
        padding-inline: 0.5em;
        border-right: 1px solid #bebebe;
        display: flex;
        color: #4d4d4d;
    }

    .property-properties > p svg {
        margin-block: auto;
        margin-right: 0.6em;
        color: #4d4d4d;
    }

    .property-properties > p:first-child {
        padding-left: 0;
    }

    .property-properties > p:last-child {
        border: none;
    }

    .see-more-CTA {
        border: none;
        padding: 1.2em 1.5em;
        font-family: Poppins;
        font-size: 0.9em;
        font-weight: 600;
        border-radius: 0.2em;
        margin-top: 4em;
        float: right;
        color: #3a3939;
        background-image: linear-gradient(to right, #d2fce8, #a2f3ed);
        transition: all 0.3s ease-in-out;
    }

    button:hover {
        cursor: pointer;
    }

    .services-section {
        background-color: #f6f6f6;
    }

    .container {
        padding-inline: 1em;
        display: flex;
        flex-wrap: wrap;
    }

    .services-image {
        width: 100%;
        padding-top: 5em;
        box-sizing: border-box;
        display: flex;
        gap: 1em;
    }

    .image:first-child {
        margin-top: 2em;
        min-height: 25em;
        width: 50%;
        background-image: url("../img/two-handsome-successful-african-american-businessmen-using-magnifying-glass.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .image:last-child {
        max-height: 25em;
        width: 50%;
        background-image: url("../img/african-american-woman.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding-right: 0em;
    }

    .services {
        padding-top: 0;
        width: 100%;
        padding-bottom: 4em;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .services-heading {
        margin-top: 0;
        font-size: 2em;
        font-weight: 600;
    }

    .services-list {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        gap: 0.5em;
    }

    .services-list > li {
        margin-block: 0.5em;
        background-color: rgba(0, 204, 135, 0.29);
        padding: 1.5em;
        width: 100%;
        font-weight: 600;
        color: #1A5638;
        font-size: 0.85em;
    }

    .services::before {
        z-index: 1;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(28, 31, 49, 0.8);
        top: 0;
        left: 0;
    }

    .achievements {
        padding-right: 1em;
        position: relative;
        z-index: 1;
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* added property */
        gap: 2em;
        float: right;
    }

    .achievement {
        border: 1px solid rgba(209, 248, 229, 0.37);
        display: flex;
        width: 32%;
        padding: 1.15em;
        background-color: #ffffff;
        gap: 1em;
    }

    .achievement-icon > svg {
        width: 50;
        height: 50;
        stroke: #15be74;
    }

    .achieve {
        margin-top: 0;
        padding-top: 0;
        font-size: 2.6em;
        font-weight: 600;
        color: #034f3c;
    }

    .service-description {
        position: relative;
        z-index: 1;
        width: 55%;
    }

    .service-heading {
        font-size: 3.5em;
        font-weight: 600;
        line-height: 1em;
        width: 55%;
        margin-block: 0;
        background: linear-gradient(45deg, #acf8d0, #46e1ad, #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .service-description {
        color: #5fffb5;
        margin-block: 3em;
        font-family: Raleway;
        font-weight: 500;
        line-height: 1.7em;
    }

    .explore-CTA {
        border: none;
        padding: 1.2em 1.5em;
        font-family: Bree Serif;
        font-size: 0.9em;
        font-weight: 600;
        border-radius: 0.2em;
        color: #3a3939;
        background-image: linear-gradient(to right, #d2fce8, #a2f3ed);
    }

    .subscribe-section {
        padding-inline: 1em;
        padding-block: 3em;
    }

    .articles {
        padding: 3em 1em;
    }

    .articles-container {
        margin-top: 2em;
        display: flex;
        flex-wrap: wrap;
        gap: 2em;
    }
    .articles-container > article {
        min-height: 30em;
        width: 100%;
        padding: 2em 3em;
    }

    article > a {
        padding: 1.5em 3em;
    }

    article > a > svg {
        margin-block: auto;
    }

    article > a:hover {
        background-color: #04F489;
        color: #033D3D;
    }

    .article-info > h3 {
        font-size: 1.8em;
        font-weight: 400;
    }

    .article-info > p {
        font-size: 0.9em;
        font-weight: 400;
        line-height: 1.7em;
    }

    .categories {
        margin-top: 1em;
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
    }

    .categories > a {
        padding: 1.3em 3em;
        border: 1px solid #778c8c;
        color: #778c8c;
        border-radius: 3em;
        text-decoration: none;
        font-weight: 400;
        font-size: 0.9em;
    }

    .subscribe-newsletter {
        width: 100%;
        margin: auto;
        background-color: #5fffb5;
        padding: 1.3em 2em;
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 2;

    }

    .subscribe-header {
        color: #131a42;
        text-align: center;
        width: 100%;
        font-size: 2em;
    }

    .subscribe-description {
        font-family: Raleway;
        text-align: center;
        color: #099d6b;
        font-weight: 500;
    }

    .subscribe-form {
        margin-left: 2em;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .subscribe-form form {
        width: 60%;
        background-color: #00cc87;
    }

    form .input-CTA {
        padding: 1.7em 1.5em 1.7em 2.5em;
        font-weight: 300;
        width: 87%;
        background-color: transparent;
        border: none;
        outline: none;
        color: #cbffe7;
        font-family: Bree Serif;
        font-size: 0.9em;
    }

    input:focus{
        background-color: transparent;
    }

    .subscribe-form form > button {
        padding: 1.3em 3em 1.3em 0em;
        float: right;
        background-color: transparent;
        margin: auto;
        width: 10%;
        border: none;
        outline: none;
    }

    .subscribe-CTA-button > svg {
        stroke: #bcffe0;
        width: 30;
        height: 30;
    }

    .section-about {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("../img/team.jpg");
    }


    .about-us {
        position: relative;
        min-height: 65vh;
        width: 100%;
        margin: auto;
    }

    @keyframes fade-in-float-up {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .welcome-title {
        position: absolute;
        top: 1.5em;
        font-weight: 700;
        line-height: 1em;
        padding-top: 1.2em;
        font-size: 3em;
        color: #f5fcf8;
        text-align: center;
        width: 60%;
        box-sizing: border-box;
        margin-inline: auto;
        z-index: 1;
        animation: fade-in-float-up 1s ease-in-out;
    }

    .about-us > p {
        font-weight: 500;
        position: absolute;
        width: 70%;
        top: 54%;
        left: 50%;
        margin-left: -35%; /* Half of the width */
        box-sizing: border-box;
        text-align: center;
        color: white;
        line-height: 1.5em;
        animation: fade-in-float-up 1.2s ease-in-out;
    }



    .container-section {
        background-color: #f8f8f8;
        box-sizing: border-box;
    }

    .team-section {
        margin-inline: 1em;
        padding-block: 3em;
    }

    .team-member {
        width: 23%;
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        gap: 2em;
        height: fit-content;
    }

    .member-image {
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-image: url("../img/CHIMANGEN.jpg");
        background-position-y: -2em;
        height: 15em;
    }

    .member-info {
        margin-top: 0em;
        width: 100%;
    }

    .member-name {
        color: #033D3D;
        font-weight: bold;
        font-size: 1.8em;
    }

    .member-description {
        margin-top: 1em;
        font-size: 0.87em;
    }

    .qualification {
        margin-top: 0.8em;
        color: #12c073;
        line-height: 1.5em;
    }

    .member-navbar {
        margin-top: 1em;
        background-color: #033D3D;
        color: white;
        padding: 1em 1em;
        display: flex;
        flex-direction: row;
        border-radius: 4em;
        gap: 0.5em;
        width: fit-content;
    }

    .achievement {
        display: none;
        box-sizing: border-box;
        width: 100%;
    }

    .career {
        display: none;
        box-sizing: border-box;
        width: 100%;
    }

    .history {
        display: none;
        box-sizing: border-box;
        width: 100%;
    }

    .blog-section {
        background-image: url('../img/blog-image.jpg');
        margin: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 60vh;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        padding: 3em 1em;
    }

    .blog-title {
        position: absolute;
        top: 1.5em;
        font-weight: 700;
        line-height: 1em;
        padding-top: 1.2em;
        font-size: 3em;
        color: #f5fcf8;
        text-align: center;
        width: 60%;
        box-sizing: border-box;
        margin-inline: auto;
        z-index: 1;
        animation: fade-in-float-up 1s ease-in-out;
    }

    .blog > p {
        font-weight: 500;
        position: absolute;
        width: 50%;
        top: 65%;
        left: 50%;
        margin-top: -0.75em; /* Half of the line-height */
        margin-left: -25%; /* Half of the width */
        box-sizing: border-box;
        text-align: center;
        color: white;
        line-height: 1.5em;
        animation: fade-in-float-up 1.2s ease-in-out;
    }


    .contact-section-container {
        background-image: url('../img/contact.jpg');
        margin: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 55vh;
        width: 100%;
        position: relative;
    }

    .contact-us {
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        margin: auto;
    }

    .contact-title {
        margin-top: 2em;
        font-weight: 500;
        padding-top: 1.2em;
        letter-spacing: -0.02em;
        font-size: 3em;
        color: white;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        z-index: 1;
        animation: fade-in-float-up 1s ease-in-out;
    }

    .contact-us > svg {
        color: white;
        text-align: center;
        width: 100%;
        margin-inline: auto;
        z-index: 1;
    }

    .contact-section {
        position: relative;
        z-index: 2;
        margin-top: -9em;
        box-sizing: border-box;
        width: 100%;
    }

    .contact-icon {
        margin-block: 1em;
        margin-inline: auto;
        width: 5em;
        height: 5em;
        background-image: url('assets/img/svg/email-icon.svg');
        border-radius: 50%;
    }

    .contact {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 2em;
        justify-content: center;
        margin-inline: auto;
    }


    .contact-block {
        width: 70%;
        padding: 2em;
    }

    .contact-type {
        font-weight: bold;
        font-size: 1.2em;
    }

    .contact-description {
        padding-block: 0.6em;
        font-size: 1em;
        line-height: 1.5em;
    }

    .contact-footer {
        padding-top: 2em;
        font-size: 0.9em;
        box-sizing: border-box;
    }

    .contact-form {
        width: 100%;
        padding: 3em 2em;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    .contact-form > form {
        width: 100%;
        background-color: #00cc87;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        padding: 3em 1em;
        padding-bottom: 7em;
        float: right;
        height: fit-content;
        gap: 1em;
    }

    .contact-form > form > input {
        font-family: "Plus Jakarta Sans";
        font-size: 0.9em;
        width: 100%;
        padding: 1em 0em;
        background-color: transparent;
        border: none;
        border-bottom: 3px solid white;
        color: white;
    }
    .block {
        width: 100%;
        padding-left: 0em;
        box-sizing: border-box;
        border-top: 1px solid grey;
        margin-top: 2em;
        padding-top: 2em;
    }

    .block > h3 {
        font-size: 2em;
        font-weight: 700;
        margin-block: 0em;
    }

    .block > p {
        padding-top: 0.3em;
        margin-top: 0;
        font-size: 1em;
        font-weight: 400;
        line-height: 1.5em;
        color: grey;
    }

    .section-store {
        background-image: url('../img/store.jpg');
        margin: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 65vh;
        width: 100%;
        position: relative;
    }

    .store-title {
        position: absolute;
        top: 20%;
        left: 50%;
        font-weight: 700;
        line-height: 1em;
        padding-top: 1.2em;
        font-size: 3em;
        color: #f5fcf8;
        text-align: center;
        width: 70%;
        box-sizing: border-box;
        margin-left: -35%; /* Half of the width */
        z-index: 1;
        animation: fade-in-float-up 1s ease-in-out;
    }

    .store > p {
        font-weight: 500;
        position: absolute;
        width: 50%;
        top: 65%;
        left: 50%;
        margin-top: -0.75em; /* Half of the line-height */
        margin-left: -25%; /* Half of the width */
        box-sizing: border-box;
        text-align: center;
        color: white;
        line-height: 1.5em;
        animation: fade-in-float-up 1.2s ease-in-out;
    }


    .products {
        padding: 3em 2em;
    }

    .products-container {
        display: flex;
        flex-wrap: wrap;
        gap: 2em;
        justify-content: center;
    }
    .products-container > aside {
        text-decoration: none;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: fit-content;
        background-color: #eae9e9;
        width: 85%;
        padding: 2em;
        box-sizing: border-box;
        position: relative;
        color: #043b2e;
        transition: all 0.3s ease-in-out;
    }

    aside:hover {
        background-color: #053a33;
        color: white;
    }

    aside:hover .document-footer > a {
        background-color: #ffffff;
        color: #0f7d63;
    }

    .document-image {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 15em;
        background-image: url("../img/pdf-imag.jpg");
    }

    .document-title {
        margin-top: 0.5em;
        font-weight: 600;
        font-size: 1.5em;
    }

    .document-author {
        font-weight: 400;
        font-size: 1em;
    }

    .document-footer {
        width: 100%;
        padding: 1em 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        gap: 1em;
    }

    .document-price {
        font-weight: 800;
        margin-block: auto;
        font-size: 1.3em;
        color: #f8f8f8;
        background-color: #00d084;
        padding: 0.7em 1em;
        transition: all 0.5s ease-in-out;
    }

    .document-footer > a {
        font-size: 1.1em;
        margin-block: auto;
        text-decoration: none;
        color: white;
        padding: 0.9em 2em;
        background-color: #053a33;
    }

    .cart-section-container {
        background-image: url('../img/cart.jpg');
        margin: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 50vh;
        width: 100%;
        position: relative;
    }

    .cart-title {
        position: absolute;
        top: 1.5em;
        font-weight: 700;
        line-height: 1em;
        padding-top: 1.2em;
        font-size: 3em;
        color: #f5fcf8;
        text-align: center;
        width: 60%;
        box-sizing: border-box;
        margin-inline: auto;
        z-index: 1;
        animation: fade-in-float-up 1s ease-in-out;
    }

    .cart-checkout > p {
        font-weight: 500;
        position: absolute;
        width: 50%;
        top: 65%;
        left: 50%;
        margin-top: -0.75em; /* Half of the line-height */
        margin-left: -25%; /* Half of the width */
        box-sizing: border-box;
        text-align: center;
        color: white;
        line-height: 1.5em;
        animation: fade-in-float-up 1.2s ease-in-out;
    }

    .cart-section {
        padding: 2em 2em;
    }

    .cart-section > h3 {
        font-size: 1.5em;
    }

    .cart-container {
        display: flex;
        flex-wrap: wrap;
        gap: 2em;
    }

    .checkout {
        background-color: #f0f1f1;
        width: 100%;
        padding: 1em 2em;
        box-sizing: border-box;
    }

    .summary {
        display: flex;
        flex-direction: column;
    }

    .summary-container {
        display: flex;
        flex-direction: row;
        gap: 2em;
        width: 100%;
    }

    .summary-container > p {
        width: 50%;
        font-size: 0.9em;
    }

    .summary-price {
        float: right;
    }

    .total-price {
        display: flex;
        flex-direction: column;
    }

    .total-container {
        display: flex;
        flex-direction: row;
        gap: 2em;
        width: 100%;
    }

    .total-container > p {
        width: 50%;
        font-size: 0.9em;
    }

    .total {
        float: right;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        border-bottom: 1px solid grey;
        height: fit-content;
    }

    th, td {
        padding: 1em;
        text-align: left;
    }

    th {
        background-color: #05342f;
        color: white;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 0.9em;
    }

    tr {
        border-top: 1px solid grey;
    }

    .item {
        display: flex;
        gap: 1em;
        width: fit-content;
    }

    .item > div {
        margin-block: auto;
    }

    .product-image {
        width: 2em;
    }

    form > button {
        margin-top: 1em;
        background-color: #000b21;
        color: white;
        border: none;
        font-family: "Hanken Grotesk";
        padding: 1.2em 2em;
        display: flex;
        gap: 1em;
    }







}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}