/* NORMAL PC WIDESCREEN SETTINGS (min-WIDTH: 1500px) */
@media (min-width: 1500px){

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*END OF CSS USED TO REMOVE BROWSER MARGINS!!!!!!!!!!!!!*/

a{
	color: blue;
	text-decoration: none;
}

a:hover{
    color: darkgreen;
}

.contact_table {
            width: 100%;
            border-collapse: collapse;
        }

        .contact_input_title {
            font-weight: bold;
            padding: 10px;
        }

        .contact_input_title label {
            display: block;
        }

        /* Add some padding to the table cells */
        .contact_table td {
            padding: 8px;
        }

        /* Flex container to align textarea and image */
        .textarea-image-container {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        /* Textarea will take 2/3 of the width */
        .textarea-container {
            flex: 2; /* 2/3 width */
            margin-right: 10px;
        }

        .textarea-container textarea {
            width: 100%;
            height: 200px;
        }

        /* Image container will take 1/3 of the width */
        .image-container {
            flex: 1; /* 1/3 width */
            max-width: 100%; /* Image won't exceed container's size */
            text-align: center; /* Center the image */
        }

        /* Success/Error message styling */
        .success-message, .error-message {
            color: green;
            font-weight: bold;
        }

        .error-message {
            color: red;
        }

.HomepageBox{
    font-size: 2vw;
	font-weight: 600;
    text-align: center;
    padding: 1vw;
    border: BLACK 0.15vw solid;
    border-radius: 1.5vw;
	width: 15vw;
	margin: auto;
	float: right;
	color: paleturquoise;
	background-color: #373636;
	transition: all linear 80ms;
	position: relative;
	bottom: 0.6vw;
	/* Flexbox properties to center text vertically */
    display: flex;
    justify-content: center; /* Centers text horizontally */
    align-items: center; /* Centers text vertically */
    height: 100%; /* Ensure the container takes up full height */
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.2); /* Dark shadow */
}

.HomepageBox:active{
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

.HomepageBox:hover{
	color: lawngreen;
	transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.para_title{
	font-size: 1.2vw;
	font-weight: 600;
	text-decoration: underline;
}

.para{
	position: relative;
	top:0.2vw;
}


.link{
	padding:1vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
	border: 0.2vw solid black;
	border-radius: 2vw;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5vw;
	font-weight: 600;
	background-color: #373636;
	color: palegoldenrod;
	transition: all linear 80ms;
}

.link:active{
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

.link:hover{
	color: lawngreen;
}

.links{
	color: red;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.request_form{
	margin-left: 0vw;
}

.bottom{
	background-color: lightgrey;
}

.email_address{
	font-weight: 600;
}

.bold{
font-weight: 700;
}

.wrapper{
	height: 100vh;
	width: 100vw;
	background-image: url(../../images/DISPLAY3/background_dell.jpg);
    background-size: cover;
    
}

.sectionsWrapper{
	font-size: 1vw;
	padding-left: 3vw;
	padding-right: 3vw;
	padding-top: 0vh; /* Add space above the content */
    padding-bottom: 4vh; /* Add space below the content */
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	height: 90vh;
	width: 70vw;
	line-height:2.1vh;
	background-color: lightgrey;
	border-radius: 2vw;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}

.pageTitle{
	font-size: 2.5vw;
	padding: 1vw;
	text-align: start;
	text-decoration: underline;
	position: relative;
	top:0.3vw;
}



/* Add extra space above the contact table */
.contact_table {
    border-collapse: collapse;
    width: 70vw;
    background-color: whitesmoke;
    border-radius: 1vh;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.1); /* Light shadow */
    margin: 3vh auto 1.5vh auto; /* Add margin to top (increase the 3vh to get more space) */
    padding: 1vw;
}

/* Optional: If you want more space specifically above the first row of the table */
.contact_table tr:first-child td {
    padding-top: 1.5vw;  /* Adjust this value to get more space above the first row */
   
}

/* Optional: If you want more space specifically above the first row of the table */
.contact_table tr:last-child td {
  
    padding-bottom: 1.5vw;  /* Adjust this value to get more space above the first row */
}

/* Style for the label inside the left column (contact_input_title) */
form.contact_input .contact_input_title label {
    background-color: lightgray; /* Change this to the color you want */
    padding: 0.5vw; /* Optional: Add padding around the label */
    border-radius: 1vh; /* Optional: Round the corners of the label */
    display: inline-block; /* Ensure the background is applied only to the label, not the entire column */
    width: 12vw;
    text-align: right;
    font-size: 1.1vw;
    padding: 0.6vw; /* Padding inside the input/textarea fields */
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.1); /* Light shadow */
    border: 0.2vh solid darkgray;
}

/* Style for the input and textarea fields */
form.contact_input input {
    background-color: white; /* Change this to the desired background color */
    padding: 0.6vw; /* Padding inside the input/textarea fields */
    padding-left: 1vw;
    font-size: 1.25vw; /* Font size for the text inside the input/textarea */
    border-radius: 1vh; /* Optional: Rounded corners for the input/textarea */
    border: 0.1vh solid #ccc; /* Border color */
    width: 50.5vw; /* Ensure they take up full width of their assigned cells */
    
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.1); /* Light shadow */
}

/* Increase font size for the first input (Your Name) */
.contact_table tr:nth-child(1) td input {
    font-size: 1.25vw; /* Adjust the size as needed */
}

/* Increase font size for the second input (Your Email Address) */
.contact_table tr:nth-child(2) td input {
    font-size: 1.25vw; /* Adjust the size as needed */
}



/* Style for the input and textarea fields */
form.contact_input textarea {
    background-color: white; /* Change this to the desired background color */
    padding: 1vw; /* Padding inside the input/textarea fields */
    font-family: Arial;
    font-size: 1.2vw; /* Font size for the text inside the input/textarea */
    border-radius: 1vh; /* Optional: Rounded corners for the input/textarea */
    border: 0.1vh solid #ccc; /* Border color */
    width: 50vw; /* Ensure they take up full width of their assigned cells */
    height:28vh;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.1); /* Light shadow */
}

/* Align the "Your Question" row title and textarea to the top */
form.contact_input tr:nth-child(4) td {
    vertical-align: top; /* Align the content of the third row to the top */
}

/* Submit Button Styling */
form.contact_input button {
    font-size: 2vw; /* 200% larger font size */
    padding: 0.4vw; /* Increase padding to make the button larger */
    background-color: white; /* Red background color */
    color: black; /* White text */
    border-radius: 2vw; /* 1vh rounded corners */
    border: none; /* Optional: Remove border if desired */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    width: 27vw;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
    position: relative;
    top: 0.5vh;
    border: 0.2vh solid black;
}

/* Optional: Button hover effect */
form.contact_input button:hover {
    background-color: rgb(169, 229, 169); /* Darker red when hovering */
    color: black;
    border: 0.2vh solid darkgreen;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

form.contact_input button:active {
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

/* Increase left padding for the first column (the title cells) */
form.contact_input table td:first-child {
    padding-left: 1.7vw; /* Adjust the value as needed */
}


.item_title{
    font-size: 0.8vw;
}

.telephone {
    position: absolute;
    bottom: 2vh; /* or adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-weight: bold;
    background-color: #f2f2f2; /* optional styling */
    padding: 1vh 2vw;
    border-radius: 1vh;
    box-shadow: 0 0.3vh 0.5vh rgba(0, 0, 0, 0.2);
    width: 37vw;
    margin-bottom: 1.5vh;
}


}


@media (max-width: 1400px){



/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*END OF CSS USED TO REMOVE BROWSER MARGINS!!!!!!!!!!!!!*/

a{
	color: blue;
	text-decoration: none;
}

a:hover{
    color: darkgreen;
}

.contact_table {
            width: 100%;
            border-collapse: collapse;
        }

        .contact_input_title {
            font-weight: bold;
            padding: 10px;
        }

        .contact_input_title label {
            display: block;
        }

        /* Add some padding to the table cells */
        .contact_table td {
            padding: 8px;
        }

        /* Flex container to align textarea and image */
        .textarea-image-container {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        /* Textarea will take 2/3 of the width */
        .textarea-container {
            flex: 2; /* 2/3 width */
            margin-right: 10px;
        }

        .textarea-container textarea {
            width: 100%;
            height: 200px;
        }

        /* Image container will take 1/3 of the width */
        .image-container {
            flex: 1; /* 1/3 width */
            max-width: 100%; /* Image won't exceed container's size */
            text-align: center; /* Center the image */
        }

        /* Success/Error message styling */
        .success-message, .error-message {
            color: green;
            font-weight: bold;
        }

        .error-message {
            color: red;
        }

.HomepageBox{
    font-size: 2vw;
	font-weight: 600;
    text-align: center;
    padding: 1vw;
    border: BLACK 0.15vw solid;
    border-radius: 3vw;
	width: 15vw;
	margin: auto;
	float: right;
	color: paleturquoise;
	background-color: #373636;
	transition: all linear 80ms;
	position: relative;
	bottom: 0.6vw;
	/* Flexbox properties to center text vertically */
    display: flex;
    justify-content: center; /* Centers text horizontally */
    align-items: center; /* Centers text vertically */
    height: 100%; /* Ensure the container takes up full height */
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.2); /* Dark shadow */
}

.HomepageBox:active{
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

.HomepageBox:hover{
	color: lawngreen;
	transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.para_title{
	font-size: 1.2vw;
	font-weight: 600;
	text-decoration: underline;
}

.para{
	position: relative;
	top:0.2vw;
}

.link{
	padding:1vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
	border: 0.2vw solid black;
	border-radius: 2vw;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5vw;
	font-weight: 600;
	background-color: #373636;
	color: palegoldenrod;
	transition: all linear 80ms;
}

.link:active{
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

.link:hover{
	color: lawngreen;
}

.links{
	color: red;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.request_form{
	margin-left: 0vw;
}

.bottom{
	background-color: lightgrey;
}

.email_address{
	font-weight: 600;
}

.bold{
font-weight: 700;
}

.wrapper{
	height: 100vh;
	width: 100vw;
	background-image: url(../../images/DISPLAY3/background_ipad.jpg);
    background-size: cover;
}

.sectionsWrapper{
	font-size: 1vw;
	padding-left: 3vw;
	padding-right: 3vw;
	padding-top: 0vh; /* Add space above the content */
    padding-bottom: 4vh; /* Add space below the content */
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	height: 83vh;
	width: 70vw;
	line-height:2.1vh;
	background-color: lightgrey;
	border-radius: 2vw;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pageTitle{
	font-size: 3vw;
	font-weight: 600;
	padding: 1vw;
	text-align: start;
	text-decoration: underline;
	position: relative;
	top:0.3vw;
}

/* Add extra space above the contact table */
.contact_table {
    border-collapse: collapse;
    width: 70vw;
    background-color: whitesmoke;
    border-radius: 1vh;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.1); /* Light shadow */
    margin: 3vh auto 1.5vh auto; /* Add margin to top (increase the 3vh to get more space) */
    padding: 1vw;
}

/* Optional: If you want more space specifically above the first row of the table */
.contact_table tr:first-child td {
    padding-top: 1.5vw;  /* Adjust this value to get more space above the first row */
   
}

/* Optional: If you want more space specifically above the first row of the table */
.contact_table tr:last-child td {
  
    padding-bottom: 1.5vw;  /* Adjust this value to get more space above the first row */
}

/* Style for the label inside the left column (contact_input_title) */
form.contact_input .contact_input_title label {
    background-color: lightgray; /* Change this to the color you want */
    padding: 0.5vw; /* Optional: Add padding around the label */
    border-radius: 1vh; /* Optional: Round the corners of the label */
    display: inline-block; /* Ensure the background is applied only to the label, not the entire column */
    width: 12vw;
    text-align: right;
    font-size: 1.2vw;
    padding: 0.6vw; /* Padding inside the input/textarea fields */
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.1); /* Light shadow */
    border: 0.2vh solid darkgray;
}

/* Style for the input and textarea fields */
form.contact_input input {
    background-color: white; /* Change this to the desired background color */
    padding: 0.6vw; /* Padding inside the input/textarea fields */
    padding-left: 1vw;
    font-size: 1.5vw; /* Font size for the text inside the input/textarea */
    border-radius: 1vh; /* Optional: Rounded corners for the input/textarea */
    border: 0.1vh solid #ccc; /* Border color */
    width: 50.5vw; /* Ensure they take up full width of their assigned cells */
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.1); /* Light shadow */
}

/* Increase font size for the first input (Your Name) */
.contact_table tr:nth-child(1) td input {
    font-size: 1.5vw; /* Adjust the size as needed */
}

/* Increase font size for the second input (Your Email Address) */
.contact_table tr:nth-child(2) td input {
    font-size: 1.5vw; /* Adjust the size as needed */
}

/* Style for the input and textarea fields */
form.contact_input textarea {
    background-color: white; /* Change this to the desired background color */
    padding: 1vw; /* Padding inside the input/textarea fields */
    font-family: Arial;
    font-size: 1.5vw; /* Font size for the text inside the input/textarea */
    border-radius: 1vh; /* Optional: Rounded corners for the input/textarea */
    border: 0.1vh solid #ccc; /* Border color */
    width: 50vw; /* Ensure they take up full width of their assigned cells */
    height:28vh;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.1); /* Light shadow */
}

/* Align the "Your Question" row title and textarea to the top */
form.contact_input tr:nth-child(4) td {
    vertical-align: top; /* Align the content of the third row to the top */
}

/* Submit Button Styling */
form.contact_input button {
    font-size: 2vw; /* 200% larger font size */
    padding: 0.4vw; /* Increase padding to make the button larger */
    background-color: white; /* Red background color */
    color: black; /* White text */
    border-radius: 2vw; /* 1vh rounded corners */
    border: none; /* Optional: Remove border if desired */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    width: 27vw;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
    border: 0.2vh solid black;
}

/* Optional: Button hover effect */
form.contact_input button:hover {
    background-color: rgb(169, 229, 169); /* Darker red when hovering */
    color: black;
    border: 0.2vh solid darkgreen;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

form.contact_input button:active {
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

/* Increase left padding for the first column (the title cells) */
form.contact_input table td:first-child {
    padding-left: 1.7vw; /* Adjust the value as needed */
}

.item_title{
    font-size: 0.8vw;
}

.telephone {
    position: absolute;
    bottom: 2vh; /* or adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-weight: bold;
    background-color: #f2f2f2; /* optional styling */
    padding: 1vh 2vw;
    border-radius: 1vh;
    box-shadow: 0 0.3vh 0.5vh rgba(0, 0, 0, 0.2);
    width: 37vw;
    margin-bottom: 1vh;
}

}



/* MATEVIEW SETTINGS (min-height: 1000px) */
@media (min-height: 1000px){

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*END OF CSS USED TO REMOVE BROWSER MARGINS!!!!!!!!!!!!!*/

a{
	color: blue;
	text-decoration: none;
}

a:hover{
    color: darkgreen;
}

.contact_table {
            width: 100%;
            border-collapse: collapse;
        }

        .contact_input_title {
            font-weight: bold;
            padding: 10px;
        }

        .contact_input_title label {
            display: block;
        }

        /* Add some padding to the table cells */
        .contact_table td {
            padding: 8px;
        }

        /* Flex container to align textarea and image */
        .textarea-image-container {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        /* Textarea will take 2/3 of the width */
        .textarea-container {
            flex: 2; /* 2/3 width */
            margin-right: 10px;
        }

        .textarea-container textarea {
            width: 100%;
            height: 100px;
        }

        /* Image container will take 1/3 of the width */
        .image-container {
            flex: 1; /* 1/3 width */
            max-width: 100%; /* Image won't exceed container's size */
            text-align: center; /* Center the image */
        }

        /* Success/Error message styling */
        .success-message, .error-message {
            color: green;
            font-weight: bold;
        }

        .error-message {
            color: red;
        }

.HomepageBox{
    font-size: 2vw;
	font-weight: 600;
    text-align: center;
    padding: 1vw;
    border: BLACK 0.15vw solid;
    border-radius: 1.5vw;
	width: 15vw;
	margin: auto;
	float: right;
	color: paleturquoise;
	background-color: #373636;
	transition: all linear 80ms;
	position: relative;
	bottom: 0.6vw;
	/* Flexbox properties to center text vertically */
    display: flex;
    justify-content: center; /* Centers text horizontally */
    align-items: center; /* Centers text vertically */
    height: 100%; /* Ensure the container takes up full height */
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.2); /* Dark shadow */
}

.HomepageBox:active{
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

.HomepageBox:hover{
	color: lawngreen;
	transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.para_title{
	font-size: 1.2vw;
	font-weight: 600;
	text-decoration: underline;
}

.para{
	position: relative;
	top:0.2vw;
}


.link{
	padding:1vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
	border: 0.2vw solid black;
	border-radius: 2vw;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5vw;
	font-weight: 600;
	background-color: #373636;
	color: palegoldenrod;
	transition: all linear 80ms;
}

.link:active{
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

.link:hover{
	color: lawngreen;
}

.links{
	color: red;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.request_form{
	margin-left: 0vw;
}

.bottom{
	background-color: lightgrey;
}

.email_address{
	font-weight: 600;
}

.bold{
font-weight: 700;
}

.wrapper{
	height: 100vh;
	width: 100vw;
	background-image: url(../../images/DISPLAY3/background_viewmate.jpg);
    background-size: cover;
    
}

.sectionsWrapper{
	font-size: 1vw;
	padding-left: 3vw;
	padding-right: 3vw;
	padding-top: 0vh; /* Add space above the content */
    padding-bottom: 4vh; /* Add space below the content */
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	height: 90vh;
	width: 70vw;
	line-height:2.1vh;
	background-color: lightgrey;
	border-radius: 2vw;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}

.pageTitle{
	font-size: 2.5vw;
	padding: 1vw;
	text-align: start;
	text-decoration: underline;
	position: relative;
	top:0.3vw;
}



/* Add extra space above the contact table */
.contact_table {
    border-collapse: collapse;
    width: 70vw;
    background-color: whitesmoke;
    border-radius: 1vh;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.1); /* Light shadow */
    margin: 3vh auto 1.5vh auto; /* Add margin to top (increase the 3vh to get more space) */
    padding: 1vw;
}

/* Optional: If you want more space specifically above the first row of the table */
.contact_table tr:first-child td {
    padding-top: 1.5vw;  /* Adjust this value to get more space above the first row */
   
}

/* Optional: If you want more space specifically above the first row of the table */
.contact_table tr:last-child td {
  
    padding-bottom: 1.5vw;  /* Adjust this value to get more space above the first row */
}

/* Style for the label inside the left column (contact_input_title) */
form.contact_input .contact_input_title label {
    background-color: lightgray; /* Change this to the color you want */
    padding: 0.5vw; /* Optional: Add padding around the label */
    border-radius: 1vh; /* Optional: Round the corners of the label */
    display: inline-block; /* Ensure the background is applied only to the label, not the entire column */
    width: 12vw;
    text-align: right;
    font-size: 1.1vw;
    padding: 0.6vw; /* Padding inside the input/textarea fields */
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.1); /* Light shadow */
    border: 0.2vh solid darkgray;
}

/* Style for the input and textarea fields */
form.contact_input input {
    background-color: white; /* Change this to the desired background color */
    padding: 0.6vw; /* Padding inside the input/textarea fields */
    padding-left: 1vw;
    font-size: 1.25vw; /* Font size for the text inside the input/textarea */
    border-radius: 1vh; /* Optional: Rounded corners for the input/textarea */
    border: 0.1vh solid #ccc; /* Border color */
    width: 50.5vw; /* Ensure they take up full width of their assigned cells */
    
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.1); /* Light shadow */
}

/* Increase font size for the first input (Your Name) */
.contact_table tr:nth-child(1) td input {
    font-size: 1.25vw; /* Adjust the size as needed */
}

/* Increase font size for the second input (Your Email Address) */
.contact_table tr:nth-child(2) td input {
    font-size: 1.25vw; /* Adjust the size as needed */
}



/* Style for the input and textarea fields */
form.contact_input textarea {
    background-color: white; /* Change this to the desired background color */
    padding: 1vw; /* Padding inside the input/textarea fields */
    font-family: Arial;
    font-size: 1.2vw; /* Font size for the text inside the input/textarea */
    border-radius: 1vh; /* Optional: Rounded corners for the input/textarea */
    border: 0.1vh solid #ccc; /* Border color */
    width: 50vw; /* Ensure they take up full width of their assigned cells */
    height:35vh;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.1); /* Light shadow */
}

/* Align the "Your Question" row title and textarea to the top */
form.contact_input tr:nth-child(4) td {
    vertical-align: top; /* Align the content of the third row to the top */
}

/* Submit Button Styling */
form.contact_input button {
    font-size: 2vw; /* 200% larger font size */
    padding: 0.4vw; /* Increase padding to make the button larger */
    background-color: white; /* Red background color */
    color: black; /* White text */
    border-radius: 2vw; /* 1vh rounded corners */
    border: none; /* Optional: Remove border if desired */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    width: 27vw;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
    position: relative;
    top: 0.5vh;
    border: 0.2vh solid black;
}

/* Optional: Button hover effect */
form.contact_input button:hover {
    background-color: rgb(169, 229, 169); /* Darker red when hovering */
    color: black;
    border: 0.2vh solid darkgreen;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

form.contact_input button:active {
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

/* Increase left padding for the first column (the title cells) */
form.contact_input table td:first-child {
    padding-left: 1.7vw; /* Adjust the value as needed */
}


.item_title{
    font-size: 0.8vw;
}

/* Place this AFTER your media-query block so it always applies */
.telephone {
    position: absolute;
    bottom: 0.8vh;   /* was 2vh; lower value moves it further down */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-weight: bold;
    background-color: #f2f2f2;
    padding: 1vh 2vw;
    border-radius: 1vh;
    box-shadow: 0 0.3vh 0.5vh rgba(0,0,0,0.2);
    width: 37vw;
    margin-top: 0; /* has no effect on absolute; keep at 0 */
}



.g-recaptcha{
    position: relative;
    top:0px;
}

}