.iframe-container {
    display: flex;
    gap: 20px;              /* space between iframes */
}

.iframe-container iframe {
    flex: 1;                /* equal width */
    height: 460px;          /* adjust as needed */
    border: 3px solid white; /* border color */
    border-radius: 8px;     /* optional rounded corners */
}

.iframe-container-small {
    display: flex;         /* Enables the flex behavior */
    width: 100%;           /* Ensures the container spans full width */
}

.iframe-container-small iframe {
    flex: 1;                /* Spans the full available width */
    height: 300px;          /* Reduced from 500px for a 'slimmer' look */
    border: 3px solid white; 
    border-radius: 8px;     
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Optional: adds depth against the white border */
}

@media (max-width: 600px) {
    .iframe-container-small iframe {
        height: 400px; /* Give mobile users a bit more room to see content */
    }
}

/* Stack on small screens */
@media (max-width: 768px) {
    .iframe-container {
        flex-direction: column;
    }
}

.hero{
  height:30vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8f9fb;
  text-align:center;
  font-family:Inter, Arial, sans-serif;
}

.cloud-logo{
  width:420px;
  margin-bottom:20px;
}

/* Ring */
.ring{
  fill:none;
  stroke:#c1122f;
  stroke-width:10;
  stroke-dasharray:220 80;
  transform-origin:80px 100px;
  animation:spin 12s linear infinite;
}

/* Nodes */
.node{
  fill:#c1122f;
  animation:pulse 2s infinite;
}

.node2{ animation-delay:.5s }
.node3{ animation-delay:1s }

/* Signal Wave */
.pulse{
  fill:none;
  stroke:#c1122f;
  stroke-width:2;
  opacity:.6;
  animation:signal 2.5s infinite;
}

/* Typography */
.brand{
  font-size:48px;
  font-weight:600;
  fill:#2b2b2b;
  letter-spacing:2px;
}

.tagline{
  font-size:16px;
  fill:#c1122f;
  letter-spacing:4px;
}

.hero-title{
  font-size:36px;
  margin-top:20px;
}

.hero-sub{
  font-size:18px;
  color:#555;
}

/* Animations */

@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.5); }
}

@keyframes signal{
  0%{
    r:20;
    opacity:.6;
  }
  100%{
    r:60;
    opacity:0;
  }
}