/* inquiryHub.html's css file -> inquiryHub.css : CSS for the entire webpage */
/* Icons: The Icons : The complete set of 675 icons in Font Awesome 4.7.0
Source: https://fontawesome.com/v4/icons/
*/
body { /* Basic styles for the entire body */
font-family:Arial, sans-serif; /* Set font-family to Arial or fallback to sans-serif */
margin:0; /* Remove default margin */
padding:0; /* Remove default padding */
}
/* -------------------------------------------- Styles for the header section --------------------------------------------*/
header{ /* Styles for the header section */
/*position:fixed;*/ /* Fix the header position */
top:0; /* Position it at the top of the viewport */
/*width:100%;*/ /* Take the full width of the viewport */
background-color:rgba(234,67,53,1.0); /* Transparent red header background */
color:#fff; /* Set text color to white */
padding:12px; /* Add padding around the header */
text-align:center; /* Center-align text */
left:0; /* Align the left edge to the left side of the viewport */
right:0; /* Align the right edge to the right side of the viewport */
z-index:1000; /* Ensure it stays on top of other content */
}
.spacer{ /* To create red box at background of header */
height:70px; /* Adjust the height according to your header's height */
background-color:rgba(234,67,53,1.0); /* Background color to red */
}
.header-content{ /* Styles for the header content */
display:flex; /* Use flexbox for layout */
justify-content:space-between; /* Distribute content evenly */
align-items:center; /* Center-align vertically */
}
.logo img{ /* Styles for the logo */
max-width:100px; /* Set maximum width for the logo */
height:auto; /* Maintain aspect ratio */
}
.navigation ul{ /* Styles for the navigation links */
list-style:none; /* Remove default list styles */
padding:0; /* Remove default padding */
margin:0; /* Remove default margin */
}
.navigation li{
display:inline; /* Display list items inline */
margin-right:15px; /* Adjust spacing between links */
}
.navigation a{
color:#fff; /* Set link text color to white */
text-decoration:none; /* Remove default underline */
transition:color 0.3s; /* Smooth transition for color change */
font-weight:500; /* Adjust font weight to make text slightly thicker */
}
.navigation a:hover{ /* Change color on hover */
color:rgba(251,188,5,1.0); /* Change text color to yellow on hover */
}
/* ------- Drop down style ------- */
.navigation-dropdown{ /* Set the positioning for the navigation dropdown */
position:relative; /* Set the position to relative */
display:inline-block; /* Display as an inline block element */
}
.navigation-dropdown-content{ /* Styles for the dropdown content */
display:none; /* Initially hide the dropdown content */
position:absolute; /* Position the dropdown content */
top:100%; /* Position the dropdown below the list item */
background-color:rgba(234,67,53,1.0); /* Background color for the dropdown */
/*min-width:160px;*/ /* Minimum width of the dropdown */
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); /* Apply shadow effect */
z-index:1; /* Set the stacking order */
left:0; /* Align the dropdown with the left edge of the list item */
width:auto; /* Adjust the width to fit the content */
}
.navigation-dropdown:hover .navigation-dropdown-content{ /* Show dropdown content on hover */
display:block; /* Display the dropdown content on hover */
}
.navigation-dropdown-content a{ /* Styles for the links inside the dropdown */
display:inline-block; /* Display dropdown links as block elements in one single line*/
color:white; /* Set text color */
padding:10px 13px; /* top-bottom and left-right -> Add padding */
text-decoration:none; /* Remove default underline */
text-align:center; /* Align text to the left */
width:auto; /* Make links take up full width within the dropdown */
box-sizing:border-box; /* Include padding in the width */
white-space:nowrap; /* Prevent line breaks */
vertical-align:middle; /* Adjusts vertical alignment */
font-family:Arial, sans-serif; /* Set the font family */
}
.navigation-dropdown-content a:hover{ /* Styles for the hover state of dropdown links */
background-color:rgba(234,67,53,1.0); /* Change background color on hover */
}
/* -------------------------------------------- Image and Company Logo Image --------------------------------------------- */
.image-container{ /* Container for the images */
position:relative; /* Ensure relative positioning for children */
height:512px; /* Height of the container */
width:100%; /* Full width */
text-align:center; /* Align content in the center */
}
.image-container-company-logo{ /* Styling for the company logo */
position:absolute; /* Position the logo absolutely */
top:30px; /* Adjust the top position */
left:30px; /* Adjust the left position */
/*max-width:200px;*/ /* Set maximum width for the logo */
z-index:1; /* Ensure it's above the sample image */
}
/* ----------- Styling for the overlay box ----------- */
.image-container-overlay-box{ /* Styles for an overlay box */
position:absolute; /* Positioned absolutely */
top:65%; /* Position vertically at the center */
left:50%; /* Position horizontally at the center */
transform:translate(-50%,-50%); /* Center the box */
background-color:rgba(234,67,53,0.7); /* Background color with transparency */
padding:20px; /* Adds padding inside the box */
border-radius:10px; /* Rounds the corners of the box */
text-align:center; /* Centers the text horizontally */
color:white; /* Text color */
}
.image-container-overlay-box h2{ /* Styling for the heading inside the overlay box */
padding:5px; /* Padding for the heading */
margin-top:0; /* Remove margin from the top */
margin-bottom:30px; /* Adds space below the heading */
}
.image-container-overlay-box-entry-box{ /* Container for the entry box */
position:relative; /* Establishes positioning context */
display:inline-block; /* Displays as an inline block */
vertical-align:top; /* Ensures proper alignment */
}
.image-container-overlay-box-entry-box-comments-icon{ /* Styling for the search icon */
position:absolute; /* Positioned absolutely */
top:50%; /* Moves icon vertically to the middle */
transform:translateY(-50%); /* Adjusts the vertical position */
left:8px; /* Adjusted left position */
padding:9px 8px; /* Adjusted padding for alignment */
pointer-events:none; /* Prevents the icon from intercepting clicks */
}
.fa-comments{ /* Styling for the search icon */
color:#aaa; /* Sets the color for the search icon */
}
.image-container-overlay-box-entry-box input[type="text"]{ /* Styling for the input field */
padding:8px 32px 8px 40px;/* clockwise order-> top-left, top-right, bottom-right, and bottom-left.*/ /* Adjusted padding to accommodate the icon */
border:1px solid #ccc; /* Adds a border to the input field */
border-radius:5px; /* Rounds the corners */
width:300px; /* Sets the width of the input field */
/* New: Red border color when input is focused */
outline:none; /* Remove default focus outline */
}
.image-container-overlay-box-entry-box input[type="text"]:focus{ /* Styling for when input field is given */
border-color:rgba(234,67,53,1); /* Red border color when input is focused */
}
.image-container-overlay-box-entry-box button{ /* Styling for the submit button */
position:absolute; /* Positioned absolutely */
top:0; /* Aligned to the top of the container */
right:0; /* Aligned to the right of the container */
padding:8px 12px; /* Padding for the button */
/* When four values are given -> padding: top right bottom left;
When two values are given -> padding: top/bottom right/left;
When three values are given -> padding: top, right/left, bottom */
border:none; /* Removes button border */
background-color:rgba(234,67,53,0.8); /* Background color with transparency */
color:white; /* Text color */
border-radius:0 5px 5px 0;/* clockwise order-> top-left, top-right, bottom-right, and bottom-left.*/ /* Rounds the corners */
cursor:pointer; /* Displays pointer cursor on hover */
height:100%; /* Ensures the button height matches the container */
}
.image-container-overlay-box-entry-box button:hover{ /* Hover effect for the button */
background-color:rgba(234,67,53,1.0); /* Changes background color on hover */
color:rgba(251,188,5,1.0); /* Change color of text */
}
/* -------------------------------------------- Contact Info Box ------------------------------------------------------- */
.black-box{ /* Styles for a black box */
background-color:rgba(0,0,0,0.9); /* Semi-transparent black background */
color:white; /* Text color */
padding:20px; /* Padding around the content */
width:auto; /* Box spans the entire width */
text-align:center; /* Center-align text content */
}
.black-box-red-line{ /* Styles for a red line separator */
border:none; /* No border by default */
border-top:4px solid red; /* Red top border creating the line */
margin:10px auto; /* Margin for positioning */
width:40%; /* Adjust the width of the line */
}
.black-box h1{ /* Styles for the heading within the black box */
margin-top:10px; /* Top margin for the heading */
}
.black-box p{ /* Styles for paragraphs within the black box */
font-size:16px; /* Font size for paragraphs */
}
/* --------------------------------------------------- Contact Box --------------------------------------------------- */
.red-box{ /* Styles for a black box */
background-color:rgba(234,67,53,1.0); /* Semi-transparent black background */
color:white; /* Text color */
padding:20px; /* Padding around the content */
width:auto; /* Box spans the entire width */
text-align:center; /* Center-align text content */
}
.red-box h2{ /* Styles for the heading within the black box */
margin:0px; /* Top margin for the heading */
Padding-bottom:2px; /* Padding to bottom of text */
text-align:center; /* Make / set text alignment */
font-size:20px; /* Font size for paragraphs */
font-weight:300; /* Make the text a bit lighter */
}
.red-box-black-line{ /* Styles for a red line separator */
border:none; /* No border by default */
border-top:2px solid black; /* Red top border creating the line */
margin:3px auto; /* padding: top/bottom right/left; */ /* Margin for positioning */
margin-top:5px; /* Top margin */
width:25%; /* Adjust the width of the line */
}
.red-box-contact-form{ /* Styles for the red box contact form */
font-family: Arial, sans-serif; /* Set Font Family */
width:auto; /* Set width to auto */
margin:5px auto;/* padding: top/bottom right/left; */ /* Set margin to 5px top and bottom, auto left and right */
}
.red-box-contact-form-group{ /* Styles for the red box contact form group */
margin:10px auto; /* top/bottom right/left; */ /* Add margin at the bottom */
display:flex; /* Use flexbox for layout */
justify-content:space-between; /* Space between flex items */
}
.red-box-contact-form-group-element{/* Divide Group into elements to add icons */ /* Styles for the red box contact form group element */
position:relative; /* Establishes a positioning context */
display:flex; /* Use flexbox for layout */
width:100%; /* Set width to 100% */
}
.red-box-contact-form-group-element-search-icon{ /* Styling for the search icon */
position:absolute; /* Positioned absolutely */
top:50%; /* Moves icon vertically to the middle */
transform:translateY(-50%); /* Adjusts the vertical position */
/*left:5px; /* Adjusted left position */
padding:20px; /* Adjusted padding for alignment */
pointer-events:none; /* Prevents the icon from intercepting clicks */
}
.fa-user{/* For user Icon */ /* Styling for the search icon itself */
color:rgba(0,0,0,0.4); /* Sets color with transparency */
}
.fa-phone{/* For phone Icon */
color:rgba(0,0,0,0.4); /* Sets color with transparency */
}
.fa-envelope{/* For envelope Icon */
color:rgba(0,0,0,0.4); /* Sets color with transparency */
}
.fa-comment{/* For comment Icon */
color:rgba(0,0,0,0.4); /* Sets color with transparency */
}
.red-box-contact-form-group input,/* Styles for input and textarea inside red box contact form group */
.red-box-contact-form-group textarea{
flex:1; /* Allow elements to grow and take available space */
margin:5px; /* Add margin around elements */
padding:10px; /* Adjusted padding to accommodate the icon */
padding-left:35px; /* Padding to avoid overlap with the icon */
border:1px solid #ccc; /* Adds a border to the input field */
border-radius:5px; /* Rounds the corners */
width:auto; /* Sets the width of the input field */
/* New: Red border color when input is focused */
outline:none; /* Remove outline to change color on focus */
}
.red-box-contact-form-group textarea{ /* Styles only for text area */
font-family:Arial, sans-serif; /* Set Font Family */
text-align:center; /* Align text in the center */
}
.red-box-contact-form-group input:focus{ /* Styling for when input field is given */
border-color:rgba(251,188,5,1.0); /* Red border color when input is focused */
}
.red-box-contact-form-group textarea:focus{ /* Styling for when input field is given */
border-color:rgba(251,188,5,1.0); /* Red border color when input is focused */
}
.red-box-contact-form-group input[type="submit"]{ /* Styles for submit button within the red box contact form group */
width:auto; /* Width to 120px */
flex:0 0 auto; /* Reset the flex property for the submit button */
cursor:pointer; /* Set cursor style to pointer */
background-color:rgba(0,0,0,0.5); /* Set background color */
color:#fff; /* Set text color to white */
border:auto; /* Remove default border */
border-color:rgba(0,0,0,0.5); /* set border color */
padding:8px 15px; /* top/bottom right/left; */ /* Add padding */
transition:background-color 0.3s; /* Smooth transition for background color */
margin:0 auto; /* top/bottom right/left; */ /* Center the submit button */
font-size:15px; /* Set the font size for the button text */
}
.red-box-contact-form-group input[type="submit"]:hover{ /* Styles for submit button hover state within the red box contact form group */
background-color:rgba(0,0,0,1.0); /* Change background color on hover */
border-color:rgba(251,188,5,1.0);
}
/* --------------------------------------------------- White Box (Map Box) ---------------------------------------------- */
.white-box{
/*position:relative; /* Plot dividing line inside this box*/ /* Position relative for containing elements */
background-color:rgba(0,0,0,0.9); /* Semi-transparent black background */
/*color:black;*/ /* Text color */
/*margin:0;*/ /* Set in child elements */ /* Remove margin */
padding:10px; /* Set in child elements */ /* Padding around the content */
width:auto; /* Box spans the entire width */
text-align:center; /* Center-align text content */
justify-content:center; /* Center content horizontally */
display:flex; /* Use flexbox */
}
.white-box-horizontal-line{ /* Styles for the line inside .white-box */
width:1px; /* Line width */
height:auto; /* Line height */
background-color:rgba(0,0,0,0.1); /* Line color */
border-radius:5px; /* Round corners */
/* box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color]; */
box-shadow:1px 1px 1px 1px rgba(255,255,255,0.4); /* Shadow effect */
}
.white-box-left,/* Divide box into two parts - left (Working Hours) and right (Map) */
.white-box-right{
flex:1; /* Equal flex distribution */
color:white; /* Text Color */
justify-content:center; /* Center content horizontally */
text-align:center; /* Center-align text content */
padding-right:5px; /* add padding left side */
padding-left:5px; /* add padding right side */
}
.white-box-left{
margin-top:0; /* Remove space from top */
padding:0px 10px 1px 1px; /* top right bottom left */ /* Set overall padding */
/*padding-right:10px;*/ /* add padding left side */
}
.white-box-right{
padding:5px 5px 1px 10px; /* top right bottom left */ /* Set overall padding */
/*padding-left:10px;*/ /* add padding right side */
}
/* --------------------- Left Side element style (Contact Info) --------------------- */
.white-box-left-element{ /* Dividing boundary in box */
padding:1px; /* Padding around the line */
width:100%; /* Set width of item */
justify-content:center; /* Center content horizontally */
align-items:center; /* Center content vertically */
}
.white-box-left-element-boundary{ /* Make boundary line between each element */
height:1px; /* Line height */
width:90%; /* Line width */
align-items:center; /* Vertically center content */
background-color:rgba(0,0,0,0.1); /* Line color */
border-radius:5px; /* Round corners */
/* box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color]; */
box-shadow:1px 1px 1px 1px rgba(255,255,255,0.2); /* Shadow effect */
/*border:1px solid rgba(255,255,255,0.9); /* white border creating the line */
}
.white-box-left-element h2{ /* Styles for the heading within the white box */
margin-top:0; /* Set margin of heading */
margin-bottom:0; /* Make line (red line) below near */ /* Set bottom margin */
padding:2px 10px 5px 10px; /* top right bottom left */ /* Set overall padding */
/*margin-bottom:0;*/ /* Reset bottom margin */
text-align:center; /* Aligns the text to the center */
font-size:25px; /* Sets the font size for the heading */
font-weight:500;/*bold;*/ /* Makes the text a bit lighter */
}
.white-box-left-element-header-line{ /* Styles for a red line below header */
margin:0px auto 0; /*top left-right bottom */ /* Margin for horizontal centering */
border:none; /* No border by default */
border-top:2px solid rgba(234,67,53,1.0); /* pixels style color*/ /* Red top border creating the line */
/*width:65%;*/ /* Sets the width of the line */
padding:0px 10px 5px 10px; /* top right bottom left */ /* padding overall */
}
.white-box-left-element-working-hours-table{ /* Set the table width to 100% and collapse the borders between cells */
font-family:Arial, sans-serif; /* Set Font Family */
width:auto; /* Table spans 100% of its container */
border-collapse:collapse; /* Collapses cell borders */
font-size:15px; /* Adjust the font size as needed */
justify-content:center; /* Center content horizontally */
align-items:center; /* Center content vertically */
}
.white-box-left-element-working-hours-table td{ /* Apply padding, border, and font size to table cells */
font-family:Arial, sans-serif; /* Set Font Family */
padding:5px 10px 5px 23px; /* top right bottom left */ /* Space inside each cell */
font-size:inherit; /* Inherits font size from the parent table */
/*border:1px solid #fff;*/ /* Remove border -> border:none */ /* Border around each cell */
border:none; /* Remove cell borders */
}
.white-box-left-element-working-hours-table td:first-child{ /* Styles for the first column */
width:auto; /* Adjust width automatically based on content */
font-weight:bold; /* Make text bold */
text-align:left; /* Align text to the left */
}
.white-box-left-element-working-hours-table td:nth-child(2){ /* Styles for the second column */
width:auto; /* Adjust width automatically based on content */
font-weight:bold; /* Make text bold */
text-align:center; /* Align text to the center */
}
.white-box-left-element-working-hours-table td:last-child{ /* Styles for the last column */
width:auto; /* Adjust width automatically based on content */
text-align:center; /* Align text to the center */
}
.white-box-left-element p{
margin:0; /* Reset margin */
padding:10px; /* Set padding */
align-items:center; /* Vertically center content */
color:red; /* Set text Color */
font-weight:700; /* Make fount bold / make thiner */
text-align:center; /* Make text center */
}
.white-box-left-element .fa-envelope{ /* envelope style */
padding:0px 10px 0px 1px; /* top right bottom left */ /* Padding overall */
color:rgba(234,67,53,0.9); /* Make change color to red */
}
.white-box-left-element .fa-phone-square{ /* phone square style */
padding:0px 3px 0px 1px; /* top right bottom left */ /* Padding overall */
color:rgba(234,67,53,0.9); /* Make change color to red */
}
.white-box-left-element .fa-mobile{ /* mobile style */
padding:0px 3px 0px 1px; /* top right bottom left */ /* Padding overall */
color:rgba(234,67,53,0.9); /* Make change color to red */
}
.white-box-left-element a[href^="mailto"],/* Set style for link - mail and phone */
.white-box-left-element a[href^="tel"]{
color:rgba(234,67,53,0.9); /* Change the icon's color to red */
}
.white-box-left-element a[href^="mailto"]:hover,
.white-box-left-element a[href^="tel"]:hover/* Hover styles for links with mailto or tel when hover */
{
color:rgba(251,188,5,0.9); /* Change the icon's color to yellow on hover */
}
/* ---------------- Setup Social Media Icons ---------------- */
.white-box-left-element .fa-twitter, /* Style for twitter icon */
.white-box-left-element .fa-linkedin, /* Style for linkedin icon */
.white-box-left-element .fa-facebook, /* Style for facebook icon */
.white-box-left-element .fa-instagram, /* Style for instagram icon */
.white-box-left-element .fa-youtube, /* Style for youtube icon */
.white-box-left-element .fa-github{ /* Style for github icon */
color:rgba(234,67,53,0.5); /* Set color to red*/
padding:15px 25px; /* top/bottom left/right */ /* Add pading */
width:30px; /* Set width of text */
height:30px; /* Maintain a square shape */
font-size:40px; /* Control the size of the icon */
font-weight:5; /* Make fount bold / make thiner */
justify-content:center; /* Center content horizontally */
align-items:center; /* Center content vertically */
text-align:center; /* Make text align center */
/*text-decoration: none;*/
}
.white-box-left-element .fa-twitter:hover{ /* Change color on hover for twitter icon */
color:rgba(251,188,5,0.9); /* Change the icon's color to yellow on hover */
}
.white-box-left-element .fa-linkedin:hover{ /* Change color on hover for linkedin icon */
color:rgba(251,188,5,0.9); /* Change the icon's color to yellow on hover */
}
.white-box-left-element .fa-facebook:hover{ /* Change color on hover for facebook icon */
color:rgba(251,188,5,0.9); /* Change the icon's color to yellow on hover */
}
.white-box-left-element .fa-instagram:hover{ /* Change color on hover for instagram icon */
color:rgba(251,188,5,0.9); /* Change the icon's color to yellow on hover */
}
.white-box-left-element .fa-youtube:hover{ /* Change color on hover for youtube icon */
color:rgba(251,188,5,0.9); /* Change the icon's color to yellow on hover */
}
.white-box-left-element .fa-github:hover{ /* Change color on hover for github icon */
color:rgba(251,188,5,0.9); /* Change the icon's color to yellow on hover */
}
/* --------------------- Right Side element style ( Map ) --------------------- */
.white-box-right{ /* Styles for the container with relative positioning */
position:relative; /* make position to relative so object can be placed in container relative positions *//* Establishes relative positioning for container */
}
.white-box-right iframe{ /* Styles for iframes within the container */
width:100%; /* Full width within the container */
height:480px; /* Fixed height for the iframe */
padding:2px; /* Padding around the iframe */
border-radius:10px; /* Creates rounded corners for the iframe */
background-color:rgba(0,0,0,0.5); /* Adds background shading with transparency */
/* Shadow effect with defined properties -> box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color]; */
box-shadow:1px 1px 2px 2px rgba(0,0,0,0.1); /* Applies a shadow effect */
}
.white-box-right-overlay-box{ /* Styles for the overlay box with absolute positioning */
position:absolute; /* Positioned absolutely within its containing element */
top:20px; /* 15 pixels from the top of the parent element */
left:25px; /* 25 pixels from the left of the parent element */
width:35%; /* Occupies 35% of the parent element's width */
height:13%; /* Occupies 13% of the parent element's height */
background-color:rgba(255,255,255,1.0); /* Background color: white */
z-index:1; /* Stacking order - appears above elements with lower z-index */
}
.white-box-right-overlay-box h2{ /* Styles for h2 headers within the overlay box */
margin:0; /* No margin around the h2 */
padding:5px 5px 0 5px; /* Padding values: top 5px, right 5px, bottom 0, left 5px */
text-align:left; /* Text alignment: left */
font-size:20px; /* Font size: 15 pixels */
font-weight:500; /* Font weight: bold for increased emphasis */
color:black; /* Text color: black */
margin-bottom:0; /* Remove margin bottom for h2 */
}
.white-box-right-overlay-box h3{ /* Styles for h3 headers within the overlay box */
margin:0; /* No margin around the h3 */
padding:0 5px; /* Padding values: top and bottom 0, right and left 5px */
text-align:left; /* Text alignment: left */
font-size:13px; /* Font size: 13 pixels */
font-weight:5; /* Font weight: 5 (assuming a custom weight) */
margin-top:0; /* Remove margin top for h3 */
color:black; /* Text color: black */
}
.white-box-right-overlay-box p{ /* Styles for the paragraph within the overlay box */
margin:0px; /* Sets the margin around the paragraph to zero */
padding:0px; /* Sets padding around the paragraph to zero */
padding-top:2px; /* Adds padding of 2 pixels to the top of the paragraph */
padding-left:2px; /* Adds padding of 2 pixels to the left of the paragraph */
text-align:left; /* Aligns the text to the left */
font-size:10px; /* Sets the font size of the paragraph to 10 pixels */
font-weight:5; /* Sets the font weight to a lighter value (assuming a custom weight) */
color:black; /* Text color: black */
}
/* -------------------------------------------- Styles for the footer section -------------------------------------------- */
footer{
background-color:#000; /* Set background color to dark gray */
color:#fff; /* Set text color to white */
padding:2px; /* Add padding around the footer */
text-align:center; /* Center-align text */
position:bottom; /* Fix the footer to the bottom of the viewport */
bottom:0; /* Align the footer to the bottom */
height:fit-content; /* Set height to fit the content */
line-height:1; /* Adjust line height to remove extra space */
/*width:100%;*/ /* Set the width of the footer to 100% of the viewport */
left:0; /* Align the left edge to the left side of the viewport */
right:0; /* Align the right edge to the right side of the viewport */
}
.small-text{
font-size:10px; /* Adjust font size as needed */
}
.small-text strong{
font-weight:bold; /* CSS for making the specified text bold */
}