/* GLOBALS */
@font-face {
    font-family: "Hack";
    src: url("../assets/fonts/Hack-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Fira Sans";
    src: url("../assets/fonts/FiraSans-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Oxygen";
    src: url("../assets/fonts/Oxygen-Bold.ttf") format("truetype");
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Fira Sans", sans-serif;
}

a {
    color: #3a88a7
}

h1 {
    font-size: 22px;
    margin: 20px 0;
    font-family: "Oxygen", sans-serif;
    color: #1d495a;
}

h2 {
    font-size: 18px;
    margin: 12px 0;
    font-weight: bold;
}


p {
    font-size: 18px;
    margin: 10px 0;
}

img {
    width: 100%;
}

footer {
    float: none;
    background: linear-gradient(132deg, #1d495a, #3a88a7, #00cedd);
    color: #e5ecec;
    padding: 15px;
    text-align: center;
}
footer a {
    color: #e5ecec;
}
section {
    padding: 0 15px;
}
/* CLASSES */
/* Header */
.banner {
    background: linear-gradient(132deg, #1d495a, #3a88a7, #00cedd);
    background-size: 400% 400%;
    animation: Gradient 13s ease infinite;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.banner img {
    width: 30%;
    padding: 15px;
    min-width: 300px;
}
@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Navigation Bar */
.navbar ul {
    list-style: none;
    overflow: hidden;
    background-color: #00000031;
}
.navbar li {
    float: left;
}
.navbar li a {
    display: inline-block;
    text-align: center;
    padding: 16px;
    font-family: "Oxygen", sans-serif;
    color: #e5ecec;
    text-decoration: none;
    font-size: 18px;
    transition: 0.2s;
}
.navbar li a:hover {
    background-color: #00000031;
}

/* Grid */
.services-grid {
    padding: 15px;
}
/* Cards */
.card {
    display:inline-block;
    box-shadow: 0 4px 8px 0 #1d495a75;
    transition: 0.3s;
    max-width: 500px;
    min-height: 500px;
    padding: 15px;
    margin: 15px;
    background: linear-gradient(132deg, #1d495a27, #3285a71c)
}
.card:hover {
  box-shadow: 0 8px 16px 0 #1d495a75;
  background: linear-gradient(132deg, #1d495a36, #3286a73b)
}
.card img {
    border-radius: 5px 5px 0 0;
    max-width: 30%;
    padding: 15px;
}
.card-content {
    padding: 0 15px;
}