/* Reset Default Browser Styles */
html,
body,
a,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
span,
section,
footer,
p,
i,
div {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
  list-style-type: none;
  color: inherit;
}

body {
  background-color: #030416;
  color: #fcfef9;
  font-family: "Noto Sans", sans-serif;
  overflow-x: hidden;
  max-width: 100%;
}

/*--------------------------------------------------------------
 # Colors
-------------------------------------------------------------- */
.navy-overlay {
  background-color: rgba(30, 58, 157, 10%);
}

/*--------------------------------------------------------------
 # Main
-------------------------------------------------------------- */
.container,
header {
  max-width: 1088px;
  padding: 0 32px;
  margin: 0 auto;
}

@media (max-width: 750px) {
  .container,
  header {
    padding: 0 16px;
  }
}

section {
  padding: 32px 0;
}

/*--------------------------------------------------------------
 # Navigation / Header
-------------------------------------------------------------- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background-color: #030416a8;
  backdrop-filter: blur(10px);
  z-index: 9999;
}

.customize-support header {
  top: 32px;
}

.logo-container,
.logo-container a {
  display: inline-block;
}

.logo-container img {
  max-width: 80px;
}

/* nav {
  padding-top: 1px;
  margin-top: 10px;
} */

nav ul {
  display: inline-flex;
  text-decoration: none;
  padding: 0;
  justify-content: center;
  border-radius: 20px;
}

nav ul li a,
.call-btn {
  padding: 16px;
  color: #7cc3df;
  display: block;
  border-radius: 20px;
  transition: 0.3s;
  border-bottom: none;
}

nav ul li a:hover,
nav ul li a:focus {
  color: #030416;
  background-color: #8cca65;
}

nav ul li a.contact,
.call-btn {
  background-color: #1cb6d0;
  color: #030416;
}

.call-btn:hover,
.call-btn:focus,
nav ul li a.contact:hover,
nav ul li a.contact:focus {
  background-color: #030416;
  color: #1cb6d0;
}

/*--------------------------------------------------------------
 # Navigation / Header (Mobile)
-------------------------------------------------------------- */
@media (max-width: 750px) {
  #drawer ul {
    display: none;
  }
} /* End Min width */

/*--------------------------------------------------------------
 # Typography
-------------------------------------------------------------- */
p a,
footer a {
  font-weight: 300;
  color: #7cc3df;
  border-bottom: 1px dotted;
}

footer a {
  display: inline-block;
  margin: 4px 0;
}

h1 {
  font-size: 2.5em;
  font-weight: 300;
  line-height: 150%;
  margin-bottom: 1em;
}

h2 {
  font-size: 2em;
  font-weight: 300;
  line-height: 150%;
  margin-bottom: 1em;
}

p {
  font-weight: 300;
  line-height: 200%;
  margin-bottom: 16px;
}

#word-cycle {
  font-weight: 600;
}

.standard-btn {
  padding: 16px 32px;
  background-color: #1cb6d0;
  color: #030416;
  display: inline-block;
  border-radius: 20px;
  margin-top: 16px;
  margin-right: 16px;
}

@media (max-width: 750px) {
  .standard-btn {
    padding: 8px 16px;
  }
}

/*--------------------------------------------------------------
 # BG image
-------------------------------------------------------------- */
.navy-wave-bg {
  background-image: url("../images/navy-offset-figma.png");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100%;
}

.navy-offset {
  background-color: #070c2a;
  position: relative;
}

@media (min-width: 1000px) {
	.navy-wave-bg {
		min-height: 95vh;
	}
  .navy-offset .container {
    margin-top: -210px;
  }
}

/*--------------------------------------------------------------
 # Columns
-------------------------------------------------------------- */
.two-col {
  display: flex;
  align-items: center;
  padding: 32px 0;
}

.two-col img {
  margin-left: 16px;
}

#contact {
  padding: 32px 0;
}

.four-col,
.row {
  display: flex;
}

.mdl-card {
  display: block;
  min-height: 200px;
  overflow: hidden;
  z-index: 1;
  position: relative;
  background: #fcfef9;
  color: #030416;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}

.card-text {
  padding: 16px;
}

.card-text h3 {
  font-weight: 600;
  font-size: 1.125em;
}

.card-text p {
  margin-bottom: 0;
}

.four-col .card-image {
  margin: 0;
  position: relative;
  display: block;
  overflow: hidden;
  background: #000 no-repeat 50% 50%;
  background-size: cover;
  background-origin: padding-box;
  background-attachment: scroll;
  padding-bottom: 56%;
}

.four-col img {
  object-fit: cover;
  min-height: 100%;
  height: 100%;
  transition: transform 0.3s;
  background: #000;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
}

.four-col article {
  margin: 0 8px;
}

.col-md-4 {
  width: 33.333%;
  margin: 16px;
}

.col-md-4 img {
  max-width: 100%;
}

.col-md-3 {
  width: 25%;
}

@media (max-width: 1000px) {
  .col-md-3,
  .col-md-4 {
    width: 45%;
  }

  .four-col,
  .row {
    flex-wrap: wrap;
  }
  .four-col article {
    margin: 8px;
  }
}

@media (max-width: 550px) {
  .col-md-3,
  .col-md-4 {
    width: 100%;
  }
}

.image-container img {
  border-radius: 20px;
}

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

/*--------------------------------------------------------------
 # Contact Form
-------------------------------------------------------------- */
#contact form {
  padding: 16px 0;
}

#contact label {
  font-weight: 500;
}

#contact input,
#contact textarea {
  width: 100%;
  max-width: 680px;
  padding: 10px;
  background-color: rgb(55, 65, 81);
  border: 1px solid rgb(75, 85, 99);
  border-radius: 8px;
  display: block;
  box-sizing: border-box;
  font-family: "Noto Sans", sans-serif;
}

#contact input:focus,
#contact textarea:focus {
  background: #fcfef9;
  color: #030416;
}

#contact p {
  margin-bottom: 20px;
}

#contact input[type="submit"] {
  display: inline-block;
  background-color: #1cb6d0;
  color: #030416;
  border: none;
  width: auto;
  font-size: 16px;
  padding: 16px 32px;
  border-radius: 20px;
}