@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --dark-blue: #1E4878;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif; 
}

.service{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 5rem 0;
    flex-wrap: wrap;
    gap: 50px;
  }
  .service .info {
    width: 500px;
  }
  .map-img-container {
    background: linear-gradient(rgb(145, 225, 240), white);
    border-radius: 1rem;
     width: 400px;
     height: 400px;
    padding: 1rem;

  }
  
  .map-img-container img {
    width: 100%;
    height: 100%;
    border-radius: 1rem;

  }

section{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(white,rgb(87, 169, 224));
    background-size: cover;
    background-position: center;
}

.content {
    animation: zoom 1s linear forwards;
    margin: 60px 0;
}
header{
    position: relative;
    top: 0;
    width: 100%;
    padding: 0px 7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo{
    position: relative;
    text-transform: uppercase;
}
.navigation {
    display: flex;
    gap: 1rem;
}
header .navigation a{
    display: flex;
    flex-direction: column;
    color: #000;
    text-decoration: none;
    font-weight: 500;
    padding: 0.2rem;
    border-radius: 20px;
    transition: 0.3s;
    transition-property: background;
}

.service {
    margin: 60px 8%;
}
/* header .navigation a:not(:last-child){

} */

header .navigation a:hover{
    background: #3574c7;
}

/* .typing {
    overflow: hidden;
    width: 0;
    animation: typing 2s steps(7, end) forwards ;
    white-space: nowrap;
    animation-delay: 1s;
} */

@keyframes typing {
    from { width: 0; }
    /* 25% { width: 25%; }
    50% { width: 50%; }
    75% { width: 75%; } */
    to { width: 100%; white-space: wrap; }
}

@keyframes zoom {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(0.5);
    }
    100%{
      transform: scale(1);
    }
  }
@media (max-width: 725px){
    header {
        position:sticky;
        background-color: #ffffff;
        flex-direction: column;
        z-index: 10;
        padding: 5px 7rem;
        box-shadow: 1px 1px 5px var(--dark-blue);
    }
    .navigation {
        display: flex;
    }
    header img {
        height: 75px;
    }
    header .navigation a{
        font-weight: 500;
        font-size: 0.7rem;
        color: var(--dark-blue);
    }
    section {
        padding: 0 2rem;
    }
    .card-container {
        padding-top:2rem;
    }
}