@charset "UTF-8";
/* CSS Document */

/* global */
body { padding: 0; margin: 0; font-size: 8px; background: #12284B; }
section { width: 100vw; height: 100vh; padding: 5rem; box-sizing: border-box; background-image: url("images/bg.webp"); background-size: 100% 100%; background-repeat: no-repeat; min-height: 568px; position: relative; }
h1 { width: 100%; padding: 0; margin: 0; font-size: 4rem; text-align: right; color: #12284B; font-family: 'Poppins', Helvetica, Arial, "sans-serif"; font-weight: 700; line-height: 1.2; position: absolute; bottom: 15%; right: 5rem; }
.logo { width: 280px; height: 96px; background-image: url("images/logo.svg"); background-size: cover; transition: all 0.5s ease; }
.fade-1 { animation-name: fade-1; animation-duration: 1.0s; }
.fade-2 { animation-name: fade-2; animation-duration: 1.5s; }

/* responsive styles */
@media only screen and (max-width: 1024px) {
    h1 { font-size: 3.5rem; }
}
@media only screen and (max-width: 860px) {
    section { padding: 4rem; background-image: url("images/bg-mobile.webp"); }
    h1 { right: 4rem; font-size: 2.75rem; }
    .logo { width: 210px; height: 72px; }
}
@media only screen and (max-width: 575px) {
    h1 {  font-size: 2.25rem; }
}
@media only screen and (max-width: 512px) {
    section { padding: 3rem; }
    h1 { right: 3rem; font-size: 1.75rem; }
}
@media only screen and (max-width: 360px) {
    section { padding: 2rem; }
    h1 { right: 2rem; font-size: 1.5rem; }
    .logo { width: 175px; height: 60px; }
}

/* animation */
@keyframes fade-1 {
    0% { opacity: 0.0; } 
    50% { opacity: 1; }
}
@keyframes fade-2 {
    0% { opacity: 0.0; } 
    50% { opacity: 0.0; } 
    100% { opacity: 1; }
}