/* Basic responsive layout and simple animations inspired by brochure imagery */

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    color: #222;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    background: #ff3131;
    color: white;
}

.site-header .logo { font-weight:700; font-size:18px; }
.site-header .nav a { color: #cbd5e1; margin-left:16px; text-decoration:none; }
.site-footer { text-align: center; }
.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 40px;
    background-image: url("../images/red_splatter.jpg");
    background-repeat: repeat-x;
    /*background: linear-gradient(180deg, #f8fafc, #eef2ff);*/
}

.hero-content {
    flex:1 1 320px;
    max-width:600px;
}

.hero-images {
    flex:1 1 320px;
    position:relative;
    min-height:240px;
    display:flex;
    gap:12px;
    justify-content:center;
    align-items:center;
}

.hero-images img {
    max-width:45%;
    border-radius:8px;
    box-shadow: 0 8px 24px rgba(16,24,40,0.12);
    transform-origin:center;
}

/* simple keyframe animations */
@keyframes pop {
    0% { transform: scale(0.9); opacity:0; }
    60% { transform: scale(1.05); opacity:1; }
    100% { transform: scale(1); opacity:1; }
}

.animated { animation: pop 800ms ease both; }

.img-left { transform: rotate(-3deg); }
.img-right { transform: rotate(3deg); }

.about { padding:32px; background:white; }

.contact {
    padding: 32px;
    background: white;
}

.btn {
    display:inline-block;
    padding:12px 20px;
    background:#0b61ff;
    color:white;
    text-decoration:none;
    border-radius:8px;
    margin-top:12px;
}

/* responsive */
@media (max-width:700px) {
    .hero { padding:20px; }
    .hero-images img { max-width:40%; }
    .site-header { padding:12px 18px; }
}