#title {
  background-color: #003456;
  color: white;
}

body {
  font-family: 'Raleway';
  font-weight: 700;
}

.container-fluid{
  padding: 3% 15%;
}

h1 {
    font-family: 'Raleway';
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.5;
}
/* Navigation Bar */
.navbar-brand {
  font-size: 3rem;
}

.navbar-icon {
  height: 4rem;
  width: auto;
}
.navbar {
    padding: 2rem 0 0;
    background-color: #003456;
}
.nav-item {
    padding: 0 18px;
}
.nav-link {
    font-size: 1.2rem;

}
/* Download buttons */
.download-button {
  margin: 5% 3% 5% 0%;
}

/* Title Image */
.title-image {
  width: 75%;
  margin: 5% 20%;
}
.text-headings {
  margin: auto;
}

.p-headings {
  font-family: 'Raleway';
  font-weight: 400;
}


/* Abouts section */
#about {
    padding: 7% 15%;
    background-color: #f8f0ed;
}
.about-class {
      text-align: left;
}

/* features section */
#features {
  padding: 7% 15%;
  background-color: #f3d6c8;
}

h3 {
  font-family: 'Raleway';
  font-weight: 600;
  font-size: 1.5rem;
  text-align: center;
}

.h1-services {
    text-align: center;
}

.h3-title {
  text-align: left;
  font-family: 'Raleway';
  font-weight: 700;
  color: #003456;
}

.features-text {
  text-align: left;
  color: black;
  font-weight: 400;
}

.features-div {
  margin: 5% auto;
}

.image-icon {
  max-width: 100%;
  height: auto;
  margin: auto;
  border-radius: 50%;
}


/* Branches section */
#locations {
  background-color: #003456;
  text-align: center;
  color: white;
}
.cta-container {
  padding: 7% 10%;
}
.cta-image {
  max-width: 90%;
  height: auto;
}

#branches {
  background-color: #f8f0ed;
  padding: 7% 15%;
}

.card-branches {
  margin: 5% auto;
}




/* Location Section */
.map-locations {
    margin: 5% auto;
}

#locations {
  background-color: #003456;
  padding: 7% 15%;
  color: black;
}

.h1-locations {
  color: white;
}

.location-info {
  text-align: left;
  color: white;
  margin: 0;
  padding: 0;
}




input[type=text], 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: #003456;
  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: #004979;
}

/* Add a background color and some padding around the form */
.container-contact {
  border-radius: 5px;
  background-color: #f8f0ed;
  padding: 20px;
}





/* Footer section */
#footer {
  text-align: center;
  background-color: black;
  color: white;
  padding: 4% 7%;
}
.footer-icons {
  padding: 2% 1%;
  color: white;
}


@media only screen and (max-width: 600px) {
  	#about, #features, #branches, #locations {
    	padding: 7% 7%;    
	}
	.about-class, .features-text, .location-info {
		text-align: justify;
	}	 
	.navbar-brand {
		margin-right: 0px;
	}
}


/* Media Query of Website */
@media (max-width: 1020px) {
    #title {
      text-align: center;
    }
    .title-image {
    width: 65%;
    height: auto;
    margin: 2% 20% 5%;
    }
    .text-headings {
      margin: 10% 0% 5%;
    }

    .mobile-image {
    width: 65%;
    height: auto;
    margin: 10% 20% 0%;
    }

    .map-locations {
        margin: 10% auto;
        width: 100%;
    }

  .h1-locations {
    margin: 10% auto;
  }


    h1   {
    font-size: 2rem;
    }
    .download-button {
        margin: auto 1%;
    }
    .cta-heading {
      font-family: 'Raleway';
      font-weight: 700;
      font-size:  1.5rem;
    }
    .cta-image {
      max-width: 60%;
      height: auto;
      margin-bottom: 1.5rem;
    }

}