/* Global Styles */
:root
{
    --red: #DF265;
    --blue: #000062;
    --green: #1dba6e;
    --white: #fff
    --black: #000;
}
body,
html
{
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    font-family: "Gotu", sans-serif;
    scroll-behavior: smooth;
    background-color: #000062;
}

@keyframes zoomIn {
    from {
      transform: scale(0);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

.block {
    animation: zoomIn 0.8s ease-out;
}   
    @media only screen and (max-width: 600px) 
    {
        .block {
            animation: none;
        }
    }
.transition-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1dba6e;
    z-index: 9999;
    transition: opacity 5s ease;
}
.transition-wrapper
{
    display: flex;
	align-items: center;
	justify-content: center;
}
.transition-wrapper img
{
    width: 10%;
    height: auto;
}
.transition-wrapper.fade-out {
    opacity: 0;
    pointer-events: none;
}
.homepage-content {
    display: none;
    opacity: 0;
}
.homepage-content.visible {
    display: block;
    opacity: 1;
    transition: opacity 2s ease;
}
.bg-blue
{
    background-color: #000062 !important;
}
.bg-red
{
    background-color: #DF265E !important;
}
.bg-green
{
    background-color: #00c96e !important;
}   
.border-blue
{
    border: 1px solid #000062;
}
.bg-red
{
    border-color: #DF265E !important;
}
.border-gray
{
    border: 1px solid rgb(255,255,255,0.3);
}
.border-green
{
    border: 1px solid #00c96e;
}
.text-blue
{
    color: #000062;
}
.text-green, .text-green:hover
{
    color: #00c96e;
}
.text-red
{
    color: #DF265E;
}
.btn-outline-green
{
    border: 1px solid #00c96e;
}

/* Header */
#logo
{
    width: 48.63px;
    height: auto;
}

.navbar
{
    background-color: #000062;
}
#navbarNavAltMarkup a:hover
{
    color: #00c96e;
}
.navbar button,
.navbar-light .navbar-toggler
{
    background: #fff;
    color: #fff;
    border-color: #fff;
    border-radius: 3px;
}

#navbarNavAltMarkup a
{
    font-weight: 500;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
}

/* Body */
#landing h1
{
    color: #00c96e;
    font-family: "Aboreto", system-ui;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    text-transform: uppercase;
}
#landing h2
{
    font-weight: 600;
    color: #fff;
    font-weight: 900;
    font-style: normal;
}

#landing p
{
    font-weight: 400;
    color: #fff;
}

#landing
{
    background: linear-gradient(rgba(0, 0, 98, 0.9), rgba(16, 15, 15, 0.4));
    background: linear-gradient(rgba(0, 0, 98, 0.9), rgba(223, 38, 94, 0.4)), url("./images/banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


#text-title
{
    font-weight: 600;
    text-align: left;
    color: #000062;
}

#projects h3
{
    font-family: "Aboreto", system-ui;
}

#projects img
{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    height: auto;
    border-radius: .25rem;
}

#p
{
    color: #000062;
}

.card p
{
    font-weight: 400;
    text-align: center;
    color: #fff;
}

#tools h3
{
    text-align: center;
    color: #fff;
    font-family: "Aboreto", system-ui;
    font-weight: 800;
    font-style: normal;
}

#tools img
{
    width: 8em;
    height: auto;
}

#contact h3
{
    font-family: "Aboreto", system-ui;
}

#contact p
{
    font-weight: 500;
}

#contact label
{
    font-weight: 600;
    color: #000062;
}

::placeholder
{
    font-weight: 600;
    text-align: left;
    color: #000062;
}

#contact .icon1,
#contact .icon2
{
    transform: scale(1.2);
}

#contact .icon3
{
    transform: scale(1.5);
}

button
{
    font-weight: 600;
    text-align: center;
    padding: 10px 50px;
    border-radius: 3px;
    background: #DF265E;
    color: #fff;
    text-transform: uppercase;
}

textarea, input
{
    font-weight: 600;
    text-align: left;
    color: #000062;
}

.card-header
{
    padding: .5rem 1rem;
    background-color: rgba(0,0,0,.03);
    border-top: 1px solid rgba(0,0,0,.125);
}
.maps
{
    border: 0;
}
#tools img
{
    height: 100px;
    width: auto;
}