body, html{
  height: 100%;
  padding: 0;
  margin: 0;
}

h1{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 25px;
}

h2{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 25px;
}

p, li{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wrapper{
  max-width: auto;
  margin: 50px 50px;
}

.form-wrapper{
  max-width: 800px;
  margin: 30% 30%;
  margin-top: 5%;
}

.logo{
  height: 90px;
  width:180px;
  float: left;
}

.page-header{
  padding-top: 20px;
  font-size: 40px;
  text-align: center;
}

.text-xs-center {
  text-align: center;
}

.g-recaptcha {
  max-width: 100%;
  display: inline-block;
}

.submit-button {
  margin-top:5%;
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 900px){
  .page-header{
    padding-top: 20px;
    font-size: 30px;
    padding-bottom: 80px;
  }

  .form-wrapper{
    max-width: 90%;
    margin: 0% 0%;
    margin-top: 5%;
  }
}

/* Inserting a banner image */
.banner-image {
  background-image: url("../static_files/website_banner.webp");
  
  /* Setting the height of the banner */
  height: 50%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.service-column
{
  float: left;
  width: 50%;
}

.service-img{
  float: right;
  width: 50%;
}
/*------------------------Styling the introduction Sections of the pages------------------------------------*/

.introduction{
  text-align: center;
}

.quick-contact-form {
  margin-top: 50px;
  margin-right: 50%;
  padding-bottom: 20px;
}

.contact-background {
  background-image: url("../static_files/contact_form_background.webp");
  background-repeat: no-repeat;
  background-size: cover;
  border: #ccc 1px solid;
  margin-top: 50px;
}

@media screen and (max-width: 900px){
  .quick-contact-form {
    margin-left: 5%;
    margin-right: 5%;
  }
}


/*------------------------Styling the 2 column section ------------------------------------*/

.two-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 50px;
}

.column {
  flex: 1 0 45%;
  width: 50%;
  height: 550px;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid lightgray;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  margin: 5px;
}

.column img {
  display: block;
  width: 100%;
  height: 200px;
  padding-top: 5px;
  align-self: center;
  object-fit: fill;
  border-radius: 10px;
}

.column p {
  font-size: 16px;
  line-height: 1.5;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 10px;
  text-align: center;
}

.column h2 {
  padding-left: 5px;
  padding-right: 5px;
}

@media screen and (max-width: 900px){
  .column p {
    font-size: 12px;
    line-height: 1.5;
    padding-left: 5px;
    padding-right: 5px;
    justify-content: center;
    text-align: center;
  }

  .column {
    flex: 1 0 45%;
    flex-direction: column;
    width: 50%;
    height: 600px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid lightgray;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    margin: 5px;
  }

  .column img {
    display: block;
    width: 100%;
    height: auto;
    padding-top: 5px;
    align-self: center;
    object-fit: fill;
    border-radius: 10px;
  }

  .column h2 {
    font-size: 18px;
  }
  
}

/*----------------------------Styling the service cards--------------------------------*/

* {
  box-sizing: border-box;
}

/* Float four columns side by side */
.card-column {
  float: left;
  width: 33.33%;
  height: 200px;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.card-row {
  margin: 0 -5px;
  padding-bottom: 80px;
}

/* Clear floats after the columns */
.card-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 900px) {
  .card-column {
    width: 100%;
    display: block;
    padding-bottom: 50px;
    padding-left: 100px;
    padding-right: 100px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.8);
  padding: 16px;
  text-align: center;
  background-color: #fff;
  border-radius: 15px 15px 15px 15px;
  color: #000;
}

/*----------------------------Styling the card images--------------------------------*/
.card-images {
  width:120px; 
  height:120px;
}

@media screen and (max-width: 900px){
  .card-images {
    width:100px; 
    height:100px;
  }
}

/*----------------------Styling the long service card images------------------------*/
.long-card-image {
  padding: 10px;
  width: 100%;
  height:auto;
  border: 1px solid lightgray;
  border-radius: 15px;
  box-shadow: 5px 5px 5px 5px lightgrey;
  margin-bottom: 50px;
}

/*----------------------------Styling the who we are--------------------------------*/

/* Who we are */
.who-we-are-image {
  width: 80%; 
  height: auto;
  margin-left: 10%;
  margin-top: 10%;
}

/* Styling the columns in the who we are section*/
.who-we-are-column {
  float: left;
  width: 50%;
}

/* Remove extra left and right margins, due to padding */
.who-are-we-row {
  margin: 0 -5px;
}

/* Clear floats after the columns */
.who-are-we-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 900px) {
  .who-we-are-column {
    width: 100%;
    display: block;
    padding-left: 50px;
    padding-right: 50px;
    justify-content: center;
  }

  .who-we-are-image{
    display: none;
  }
}

/*----------------------------Styling the introduction--------------------------------*/

/* Introducing TORIS Technologies */
.introduction-column {
  width: 100%;
  text-align: justify;
  margin-bottom: 80px;
}

/* Styling the video */
.intro-video{
  width: 100%;
  height: auto;
  padding-left: 20%;
  padding-right: 20%;
}

/* Responsive columns */
@media screen and (max-width: 900px) {
  .introduction-column {
    width: 100%;
    display: block;
    padding-left: 50px;
    padding-right: 50px;
  }

  .intro-video{
    width: 100%;
    height: auto;
    padding-left: 0%;
    padding-right: 0%;
  }
}

/*----------------------------Styling call to action--------------------------------*/

/* Float four columns side by side */
.cta-column {
  width: 100%;
  padding-bottom: 120px;
  padding-top: 50px;
}

/* Remove extra left and right margins, due to padding */
.cta-row {
  margin: 0 -5px;
}

/* Clear floats after the columns */
.cta-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */
.cta-card {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.8);
  padding: 16px;
  text-align: center;
  background-color: #fff;
  border-radius: 15px 15px 15px 15px;
  color: #000;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url("../static_files/cta-banner.webp");
  height: 350px;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Call to action button on home page styling */
.cta-button{
  background-color: #FE6902;
  color: #000;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  font-weight: 700;
  border: 0px;
  border-radius: 20px;
  height: 50px;
  width: 400px;
  box-shadow: 1px 1px #333;
  margin-top: 100px;
}

/* Call to action button on home page styling for the hover */
.cta-button:hover{
  background-color: #ff8037;
  padding: 10px;
  width: 210px;
  height: 55px;
}

/* Styling the call to action text */
.cta-text{
  float: right;
  color: #fff;
  padding-right: 5%;
  margin-top: 110px;
  font-weight: 700;
  font-size: 20px;
}

/* Responsive columns */
@media screen and (max-width: 900px) {
  .cta-column {
    width: 100%;
    display: block;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
    text-align: center;
  }

  .cta-button{
    height: 30px;
    font-size: 12px;
    width: 200px;
    box-shadow: 1px 1px #333;
    margin-top: 0px;
  }

  /* Styling the call to action text */
  .cta-text{
    margin-top: 110px;
    font-weight: 700;
    font-size: 14px;
  }

  .cta-card {
    height: 200px;
  }

  .cta-row {
    height: 200px;
  }
}

/*-------------------------------------------------------------------------------------*/


/*----------------------------Styling call to action--------------------------------*/

/* Float four columns side by side */
.cta2-column {
  width: 100%;
  padding-bottom: 120px;
  padding-top: 50px;
}

/* Remove extra left and right margins, due to padding */
.cta2-row {margin: 0 -5px;}

/* Clear floats after the columns */
.cta2-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */
.cta2-card {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.8);
  padding: 16px;
  text-align: center;
  background-color: #fff;
  border-radius: 15px 15px 15px 15px;
  color: #000;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url("../static_files/cta-banner.webp");
  height: 200px;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Call to action button on home page styling */
.cta2-button{
  background-color: #FE6902;
  color: #000;
  padding: 15px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  font-weight: 700;
  border: 0px;
  height: 50px;
  width: 100%;
  box-shadow: 1px 1px #333;
  margin-top: 10px;
  border-radius: 10px;
}

/* Call to action button on home page styling for the hover */
.cta2-button:hover{
  background-color: #ff8037;
  width: 100%;
  height: 55px;
}

/* Styling the call to action text */
.cta2-text{
  float: right;
  color: #fff;
  padding-right: 5%;
  font-weight: 700;
  font-size: 20px;
}

/* Responsive columns */
@media screen and (max-width: 900px) {
  .cta2-column {
    width: 100%;
    display: block;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
  }

  .cta2-text{
    float: right;
    color: #fff;
    padding-right: 5%;
    font-weight: 700;
    font-size: 12px;
  }

  .cta2-card {
    height: 230px;
  }

  .cta2-button{
    padding: 5px;
    font-size: 12px;
    height: 30px;
  }
}

/*-------------------------------------------------------------------------------------*/

a:link {
  color: #ddd;
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  color: #ddd;
  text-decoration: none;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #fff;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #FE6902;
  color: #000;
}

/* Style the navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

/* Styling the h o n e y p o t*/
.yeahon{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], input[type=email], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #FE6902;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #FE6902;
}

/* Styling the footer */
.footer{
    background-color: #333;
    color: #fff;
    height: 50px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 10px;
}

.footer-link{
  color: #fff;
}

.footer-list, li{
  font-size: 12px;
  margin-left: 15%;
}

.footer-section{
  background-color:#333;
  color: #fff;
}

/* Footer Columns */
.footer-column {
  float: left;
  width: 33.33%;
}

.social-footer-icons{
  display: flex;
  justify-content: center;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.footer-headings{
  text-align: center;
}

.footer-paragraph{
  text-align: justify;
  margin-left: 15%;
  margin-right: 15%;
  font-size: 12px;
}

.social-footer{
  display: flex;
  justify-content: center;
  background-color:#333;
}

@media screen and (max-width: 900px){
  .topnav a:not(:last-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }

  .footer-section { 
      display : none; 
      visibility : hidden;
  }

  .wrapper h1{
    font-size: 20px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  
  .topnav.responsive a.icon {
    position: fixed;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (max-width: 800px){
   .banner-image {
    display: none;
  }

  .cta-button{
    font-size: 12px;
  }

  .cta-text{
    padding-right: 0;
  }
}