@import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);

    body {
        font-family: Raleway;
        color: black;
        background-color: #fff;
        margin: 0;
        padding: 0;
    }

    .navbar {
        display: flex;
        justify-content: center;
        padding: 15px 20px;
        background-color: #fff;
        border-bottom: 1px solid #ddd; 
        position: relative;
    }

    .navbar-content {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 1200px;
    }

    .navbar-logo img {
        max-width: 125px;
    }

    .navbar-logo {
        margin-right: auto;
        margin-left: 50px;
    }

    .navbar-menu {
        text-align: center;
        flex: 1;
    }

    .navbar-phone {
        display: flex;
        align-items: center;
        margin-left: auto;
        font-family: Raleway, sans-serif;
        font-weight: 500;
        font-size: 16px;
        color: #333;
        gap: 5px;
        background-color: rgb(77 143 196);
        padding: 0 15px;
        border-radius: 10px; 
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-phone i {
        font-size: 18px;
        color: #333;
    }

    a { /* phone number link */
        color: white;
        text-decoration: none;
        font-weight: bold;
    }
    
    a:hover {
        text-decoration: underline;
        color: black;
    }
    
    .navbar-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 1200px;
    }

     #menu-toggle {
        display: none;
        font-size: 24px;
        background: none;
        border: none;
        cursor: pointer;
        color: #333;
    } 

    button#menu-toggle {
        display: none;
    }

    .navbar-menu ul {
        list-style: none;
        display: inline-flex;
        gap: 130px;
        margin: 0;
    }

    .navbar-menu a {
        font-family: Raleway;
        text-decoration: none;
        color: #333;
        font-weight: bold;
        font-size: 17px;
        position: relative;
    }

    .navbar-menu a:hover,
    .navbar-menu a:focus {
        color: #000;
        border-bottom: 2px solid #333;
    }

    .flex-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 0 20px 0 30px;
    }

    .flex-container > div {
        flex: 1;
    }

    .flex-container img {
        height: 725px;
        width: 103%;
        object-fit: cover;
        box-shadow: 0 4px 0 4px rgba(0, 0, 0, 0.1);
        border-radius: 5px; 
    }

    .flex-container h1 {
        font-family: Raleway;
        font-size: 60px;
        line-height: 1.2;
        text-align: left;
        padding-left: 20px;

    }

    .flex-container p {
        font-size: 20px;
        color: #5e5e5d;
        text-align: left;
        margin: 20px 0;
        padding-left: 20px;
        padding-right: 30px;
    }

    #mission {
        background-color: #f7f4f1;
        padding: 120px 100px 150px 120px;
    }

    #mission p {
        font-family: Montserrat;
        font-weight:500;
        font-size: 25px;
        text-align: center;
        line-height: 1.5;
    }

    #services h1 {
        font-family: Montserrat;
        text-align: center;
       margin: 140px 0 60px 0;
    }

    .flexbox-services {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        margin: auto;
        max-width: 1200px;
    }

    .flexbox-services > * {
        flex: 1 1 100px;
    }

    .flexbox-services div {
        padding: 10px;
        flex: 1 1 calc(33.33% - 20px);
        max-width: calc(33.33% - 20px);
        box-sizing: border-box;
    }

    .flexbox-services > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 100px;
    }

    .flexbox-services h4 {
        background-color: rgb(77 143 196);
        font-family: Montserrat;
        color: #fff;
        margin: 10px 0 10px 25px;
        padding: 10px 20px 10px 20px;
        border-radius: 25px;
    }

    .flexbox-services p {
        font-family: Montserrat;
        font-size: 15px;
        line-height: 1.7;
        padding: 0 15px 0 15px;
        margin-bottom: 10px;
    }

    #contact {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    #contact > div {
        flex: 1;
        background-color:rgb(77 143 196);
        margin: 100px 0 50px 0;
        padding: 200px 0 200px 100px;
    }
    
    
    #contact h1 {
        font-family: Raleway;
        font-size: 40px;
        color: #fff;
    } 

    #contact h2 {
        font-family: Montserrat;
        color: #fff;
        font-weight: 400;
    }

    #contact p {
        font: Raleway;
        font-weight: bold;
        font-size: 20px;
        color: white;
    }

    form {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        box-sizing: border-box;
        /* width: 45%; */
        font-family: Montserrat;
        margin: 0 50px 0 50px;
    }

    #contact form p {
        font-weight: bold;
        font-size: 20px;
        margin: 0 0 20px 0;
    }

    input, textarea {
        font-family: Raleway;
        font-size: 16px;
        color: #333;
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    textarea {
        height: 150px;
        resize: none;
    }

    button {
        font-family: Raleway;
        font-size: 20px;
        color: black;
        font-weight: bold;
        padding: 10px 15px 10px 15px;
        border-radius: 25px;
        cursor: pointer;
        transition: background-color 0.3s;
        
    }

    button:hover{
        background-color: #333;
    }
    
    footer {
        font-family: Raleway;
        text-align: center;
        padding: 20px;
        background-color:#f7f4f1;
        color: black;
        font-size: 0.9em;
    }

    @media (max-width: 1024px) {
        .navbar {
            padding: 10px 20px;
            justify-content: space-between;
        }

        .navbar-logo {
            margin-left: 20px;
        }

        button#menu-toggle {
            top: 30px;
        }

        .navbar-menu {
            margin-top: 0;
            padding-top: 10px;
        }


        .flex-container {
            flex-direction: column;
            text-align: center;
        }

        .flex-container img {
            width: 100%;
        }

        .flexbox-services div {
            flex: 1 1 calc(50% - 20px);
            max-width: calc(50% - 20px);
        }

        #contact {
            flex-direction: column;
            align-items: center;
        }

        form {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .navbar {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            padding: 5px 20px;
        }

       .navbar-logo img {
            max-width: 80px;
            margin-left: 5px;
        } 

        .navbar-content {
            position: relative;
            padding-top: 30px; 
        }

        .navbar-menu {
            display: none;
            flex-direction: column;
            width: 100%;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1000;
            border-top: 1px solid #ddd;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            padding: 0;
        }

        .navbar-menu a {
            font-family: Raleway, sans-serif;
            font-size: 16px; 
            color: #555; 
            text-decoration: none;
            display: block; 
            padding: 8px 15px;  /* Adjusted padding for menu items */
            margin: 0; 
        }
        
        .navbar-menu a:hover {
            background-color: #f0f0f0; 
            color: #333; 
        }

        button#menu-toggle { /* hamburger menu button */
            display: block;
            position: absolute;
            right: 10px; 
            display: block;
            z-index: 10; 
            top: 30px;
            font-size: 25px;
            padding: 2px;
            border: 1px solid #000; /* Optional: Add a border if you'd like */
            border-radius: 5px; /* Optional: Round the edges for a smoother look */
            background-color: transparent; /* Keep the background transparent */
            cursor: pointer;
        }


        .navbar-menu.show {
            display: flex;
        }

    
        .navbar-menu ul {
            flex-direction: column;
            padding: 0;
            margin: 0;
        }

        .navbar-menu li {
            text-align: left;
            padding: 5px 0;
            margin: 0;
        }

        .navbar-phone {
            display: none;
        }

        .flex-container { /* hero section div */
            flex-direction: column;
            position: relative;
            text-align: center;
            align-items: center;
            padding: 55px;
            gap: 15px;
            background-image: url('../images/smallscreen-hero.jpg');
            background-size: cover;
            background-position: center;
            margin-bottom: 100px;
          }

          .flex-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.3); 
            z-index: 1;
        }

        .flex-container h1 {
            position: relative;
            font-size: 20px;
            line-height: 1.4;
            color: white;
            margin: 10px 0 15px 0;
            text-align: center;
            z-index: 2;
        }

        .flex-container p {
            position: relative;
            font-size: 14px;
            color: white;
            text-align: center;
            z-index: 2;
        }

        .flex-container img {
            display: none;
            opacity: 0.8;
        }

        .flex-container h1, .flex-container p {
            flex: 1 1 50%;
        }

        #mission {
            font-size: 5px;
        }

        .flexbox-services div {
            flex: 1 1 100%;
            max-width: 100%;
            margin: 0 0 5px 0;
        }

        .flexbox-services div h4,
        .flexbox-services div p {
            font-size: 13px;
            text-align: center;
        }

        #services h1 {
            font-size: 25px;
            margin-bottom: 25px;
        }

        .flexbox-services img {
            height: 250px;
        }

        #mission {
            background-color: #f7f4f1;
            padding: 80px 45px 100px 45px; 
        }

        #mission p {
            font-family: Montserrat;
            font-weight: 500;
            font-size: 16px;  /* Adjust font size for readability */
            text-align: center;  /* Center the text */
            line-height: 1.6;  /* Increase line height to spread out text */
            margin-bottom: 30px;  /* Add space between paragraphs */
            max-width: 700px;  /* Limit width of the text */
            margin-left: auto;
            margin-right: auto;  /* Center the text block */
            word-spacing: 3px;  /* Add space between words */
        }

        #contact > div {
            font-size: 10px;
            padding: 20px 70px;
            margin: 90px 0 10px 0;
            text-align: center;
        }

        #contact h1 {
            font-size: 20px;
        }

        #contact p {
            font-size: 15px;
        }

        form {
            padding: 0 20px;
        }

        input, textarea {
            font-size: 10px;
            padding: 10px;
        }
        
        button {
            font-size: 13px;
            padding: 10px;
        }

        footer {
            font-size: 7px;
            margin: 55px 0 0 0;
            padding: 5px 0 5px 0;
        }
    }