/* Main Containers */


    /* Centers in Window */
    .contact-wrapper {
        display: flex;
        justify-content: center;   /* Centers horizontally */
        align-items: center;       /* Centers vertically */
        min-height: 100vh;
        overflow: hidden;
    }


    /* Fits All Content */
    .contact {
        display: grid;
        grid-template-columns: 1.5fr .5fr; /* Two columns*/
        align-items: center; /* Align items vertically */
        justify-content: center; /* Center everything horizontally */
        gap: 40px; /* Space between columns */
        padding: 50px;
        width: fit-content;
        height: fit-content;
        margin: auto;
        position: relative;
        top: 0px;
    }

    /* Shows Content */
    .main-container {
        display: block;
    }

    .svg-background {
        z-index: -1;
    }


/* Form Side */

    .get-in-touch {
        position: relative;
        grid-column: 1;
    }

    .get-in-touch .form {
        display: flex;
        flex-direction: column;
    }

    .get-in-touch h2 {
        color: #FFFFFF;
        font-family: 'Anonymous Pro', monospace;
        font-weight: 300;
        font-size: 35px;
        margin-bottom: 15px;
    }

    .contact-form {
        box-sizing: border-box;
        padding: 0 5px;
    }

    .get-in-touch .row1 {
        display: flex;
        flex-direction: row;
        height: fit-content;
    }

    .name-input {
        width: 302.5px;
        height: 25px;
        background: linear-gradient(
            45deg,
            rgba(156, 165, 178, 0.22) 0%,
            rgba(156, 165, 178, 0.2075) 15%,
            rgba(156, 165, 178, 0.185) 31%,
            rgba(156, 165, 178, 0.22) 43%,
            rgba(156, 165, 178, 0.2075) 72%,
            rgba(156, 165, 178, 0.22) 97%
        );
        border: .5px solid #9ca5b2;        
        color: white;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        border-radius: 0.35em;
        resize: none;
        padding: 0.75em;
        margin-top: 3px;
        margin-left: 0px;
    }

    .half .svg-background {
        width: 326.5px !important;  /* Adjust as needed */
        height: 49px !important; /* Adjust as needed */
        position: absolute;
        border-radius: 0.35em; /* Ensure the correct rounded corners */
    }

    .half .responsive-svg {
        width: 100%;
        height: 100%;
        border-radius: 0.35em; /* Apply the same rounded corners */
    }


    .email-input {
        width: 302.5px;
        height: 25px;
        background: linear-gradient(
            45deg,
            rgba(156, 165, 178, 0.22) 0%,
            rgba(156, 165, 178, 0.2075) 15%,
            rgba(156, 165, 178, 0.185) 31%,
            rgba(156, 165, 178, 0.22) 43%,
            rgba(156, 165, 178, 0.2075) 72%,
            rgba(156, 165, 178, 0.22) 97%
        );
        border: .5px solid #9ca5b2;        
        color: white;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        border-radius: 0.35em;
        resize: none;
        padding: 0.75em;
        margin-top: 3px;
        margin-left: 15px;
    }

    .subject-input {
        width: 645px;
        height: 25px;
        background: linear-gradient(
            45deg,
            rgba(156, 165, 178, 0.22) 0%,
            rgba(156, 165, 178, 0.2075) 15%,
            rgba(156, 165, 178, 0.185) 31%,
            rgba(156, 165, 178, 0.22) 43%,
            rgba(156, 165, 178, 0.2075) 72%,
            rgba(156, 165, 178, 0.22) 97%
        );
        border: .5px solid #9ca5b2;        
        color: white;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        border-radius: 0.35em;
        resize: none;
        padding: 0.75em;
        margin-top: 15px;
    }

    .subject .svg-background {
        width: 669px !important;  /* Adjust as needed */
        height: 49px !important; /* Adjust as needed */
        margin-top: 15px;
        position: absolute;
        border-radius: 0.35em; /* Ensure the correct rounded corners */
    }

    .subject .responsive-svg {
        width: 100%;
        height: 100%;
        border-radius: 0.35em; /* Apply the same rounded corners */
    }

    .message-input {
        width: 645px;
        height: 150px;
        background: linear-gradient(
            45deg,
            rgba(156, 165, 178, 0.22) 0%,
            rgba(156, 165, 178, 0.2075) 15%,
            rgba(156, 165, 178, 0.185) 31%,
            rgba(156, 165, 178, 0.22) 43%,
            rgba(156, 165, 178, 0.2075) 72%,
            rgba(156, 165, 178, 0.22) 97%
        );
        border: .5px solid #9ca5b2;        
        color: white;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        border-radius: 0.35em;
        resize: none;
        padding: 0.75em !important;
        margin-top: 15px;
    }

    .message .svg-background {
        width: 669px !important;  /* Adjust as needed */
        height: 174px !important; /* Adjust as needed */
        margin-top: 15px;
        position: absolute;
        border-radius: 0.35em; /* Ensure the correct rounded corners */
    }

    .message .responsive-svg {
        width: 100%;
        height: 100%;
        border-radius: 0.35em; /* Apply the same rounded corners */
    }

    input[type="submit"] {
        border: none;
        border-radius: 0.35em;
        background-color: rgba(255, 255, 255, 0.25);
        border: solid 1px white;  
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);      
        color: white;
        cursor: pointer;
        font-size: 16px;
        width: 150px;
        height: 50px;
        text-align: center;
    }

    .actions {
        list-style-type: none;
        padding: 0;
        margin: 0;
        margin-top: 15px;
    }

    .result {
        position: absolute;
        list-style-type: none;
        margin-top: -32px;
        margin-left: 150px; 
        font-family: 'Inter', sans-serif;
        font-style: italic;
    }


/* Icons and Details on Right */

    .contact-side {
        top: -15px;
        grid-column: 2;
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: flex-start; /* Ensures everything aligns to the left */
    }

    ul.labeled-icons li .icon {
        height: 30px;
        width: 30px;
        margin-right: 10px; /* Adds space between the icon and text */
    }
   
    ul.labeled-icons {
        list-style: none;
        color: #FFFFFF;
        font-family: 'Inter', sans-serif;
        font-weight: 200;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Ensures list stays left-aligned */
    }
    
    ul.labeled-icons li {
        display: flex;
        align-items: center; /* Keeps icon and text aligned */
        justify-content: flex-start; /* Ensures they don’t spread out */
        line-height: 35px;
        margin-top: 40px; /* Reduced for better spacing */
        width: 100%;
    }

    ul.labeled-icons li a {
        color: inherit;
    }

    ul.labeled-icons li .contact-text {
        text-align: left; /* Ensures text is left-aligned */
    }

    ::-webkit-input-placeholder {
        color: #FFFFFF !important;
        opacity: 1.0;
    }

    :-moz-placeholder {
        color: #FFFFFF !important;
        opacity: 1.0;
    }

    ::-moz-placeholder {
        color: #FFFFFF !important;
        opacity: 1.0;
    }

    :-ms-input-placeholder {
        color: #FFFFFF !important;
        opacity: 1.0;
    }

    .contact-text {
        line-height: 1.5; /* Adjust this value as needed */
    }    


/* Responsivity */

    /* Resize for smaller laptop window */

    @media (min-width: 776px) and (max-width: 1040px) {

        .name-input {
            width: 205px;
        }

        .half .svg-background {
            width: 229px !important;  /* Adjust as needed */
        }
        
        .half .responsive-svg {
            width: 100% !important;
        }

        .email-input {
            width: 205px;
        }

        .subject-input {
            width: 450px;
        }

        .subject .svg-background {
            width: 474px !important;  /* Adjust as needed */
        }
        
        .subject .responsive-svg {
            width: 100% !important;
        }

        .message-input {
            width: 450px;
        }

        .message .svg-background {
            width: 474px !important;  /* Adjust as needed */
        }
        
        .message .responsive-svg {
            width: 100% !important;
        }

    }

    /* Resize for tablets*/

    @media (min-width: 550px) and (max-width: 776px) {

        .name-input {
            width: 205px;
        }

        .email-input {
            width: 205px;
        }

        .half .svg-background {
            width: 229px !important;  /* Adjust as needed */
        }
        
        .half .responsive-svg {
            width: 100% !important;
        }

        .subject-input {
            width: 450px;
        }

        .subject .svg-background {
            width: 474px !important;  /* Adjust as needed */
        }
        
        .subject .responsive-svg {
            width: 100% !important;
        }

        .message-input {
            width: 450px;
        }

        .message .svg-background {
            width: 474px !important;  /* Adjust as needed */
        }
        
        .message .responsive-svg {
            width: 100% !important;
        }

        .contact-side {
            display: none;
        }

        .contact {
            grid-template-columns: 1.5fr;

        }

    }

    /* Resize for mobile*/

    @media (max-width: 550px) {
        
        .get-in-touch h2 {
            font-size: 28px;
        }

        .name-input {
            width: 113.5px;
            font-size: 12px;
        }

        .half .svg-background {
            width: 137.5px !important;  /* Adjust as needed */
        }
        
        .half .responsive-svg {
            width: 100% !important;
        }

        .email-input {
            width: 113.5px;
            font-size: 12px;
            margin-left: 10px;
        }

        .subject-input {
            width: 255px;
            font-size: 12px;
            margin-top: 10px;
        }

        .subject .svg-background {
            width: 279px !important;  /* Adjust as needed */
            margin-top: 10px !important; 
        }
        
        .subject .responsive-svg {
            width: 100% !important;
        }

        .message-input {
            width: 255px;
            font-size: 12px;
            margin-top: 10px;
        }

        .message .svg-background {
            width: 279px !important;  /* Adjust as needed */
            margin-top: 10px !important;
        }
        
        .message .responsive-svg {
            width: 100% !important;
        }


        .contact-side {
            display: none;
        }

        .contact {
            grid-template-columns: 1.5fr;
        }

        input[type="submit"] {
            font-size: 12px;
            width: 111px;
            height: 40px;
        }

        .actions {
            margin-top: 10px;
        }

        
        .result {
            font-size: 12px;
            margin-left: 90px; 
        }

    }