body{
  font-family: "Roboto", sans-serif;
  background:#f4f7fb;
  color:#000;
  margin: 0;
}

header{
  background:#0f172a;
  color:#fff;
  padding:120px 10%;
  text-align:center;
  position:relative;
  overflow:hidden;
  margin-top: 125px;
}

header::after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  background:#3b82f6;
  border-radius:50%;
  top:-100px;
  right:-100px;
  opacity:.2;
  animation: float 6s infinite ease-in-out;
}

.logo-width{
    width: 100px;
    padding: 25px 70px;
}
.header-fixed{
    position: fixed;
    top: 0;
    background: #fff;
    width: 100%;
    z-index: 1;
}

h1{
  font-size:48px;
  margin-bottom:10px;
  animation: fadeDown 1.2s ease forwards;
}

.section{
  padding:0px 10% 45px;
  opacity:1;
  transform:translateY(50px);
  transition:1s ease;
}

.section.show{
  opacity:1;
  transform:translateY(0);
}

.card{
   padding: 15px 0 0;
}

h2{
  color:#1e40af;
  margin-bottom:12px;
}

p{
  line-height:1.7;
  color:#000;
}
ul li{
     color:#000;
     margin-bottom: 15px;
}

@keyframes fadeDown{
  from{opacity:0;transform:translateY(-30px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(20px);}
}
@media (max-width: 768px) {
.logo-width{
    width: 60px;
    padding: 25px 20px;
}
h1 {
    font-size: 30px;
    margin-bottom: 10px;
    animation: fadeDown 1.2s ease forwards;
}
header {
    margin-top: 75px;
}
}