:root{
    --primary:#b5121b;
    --secondary:#f29a1a;
    --dark:#0d2b52
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Arial,sans-serif;
    background:#f4f6f9;
    color:#222
}

p{
    line-height:1.5;
    font-family: Arial, Helvetica, sans-serif;
    font-size: larger;
}

strong, b {
  font-weight: bold !important;
  color: #333333;
}

em, i {
  font-style: italic !important;
  font-family: serif;
}


header{
    position:sticky;
    top:0;
    background:rgba(13,43,82,.95);
    padding:12px;
    z-index:10
}
nav{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap
}
nav a{
    color:#fff;
    text-decoration:none;
    font-weight:bold
}
.banner{
    width: 100vw;
    height: 800px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.banner img{
    width: 100%;
    min-width: 100%;
    height:800px;
    display: block;
    object-fit: fill;
}
.banner-container {
  display: flex;             /* Turns the container into a flexbox */
  justify-content: center;   /* Centers the banner horizontally */
  align-items: center;       /* Centers the banner vertically */
  width: 100%;               /* Adjust to your design needs */
  height: 400px;             /* Define a fixed height for your banner area */
  background-color: #f0f0f0; /* Optional: Fills empty space if banner doesn't fill completely */
}

.center-banner {
  max-width: 100%;           /* Prevents the image from overflowing */
  max-height: 100%;          /* Prevents the image from overflowing */
  object-fit: contain;       /* Fits the image inside the box without stretching */
}

.hero,.content{
    max-width:1100px;
    margin:auto;
    padding:30px 20px;
}
.card{
    background:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 2px 12px rgba(0,0,0,.1)
}
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px
}

.dynamic-image{
    width:100%;
    border-radius:10px;
    transition:transform .4s
}
.dynamic-image:hover{transform:scale(1.05)}

footer{
    background:var(--dark);
    color:white;
    text-align:center;
    padding:20px;
    margin-top:30px
}
button,.cta{
    background:var(--secondary);
    color:white;
    border:none;
    padding:12px 18px;
    border-radius:6px;
    text-decoration:none;
    cursor:pointer
}

@media screen and (max-width: 424px) {
.banner {
display: none;
}
}



.icon-circle {
  /* Shape and size */
width: 60px;
height: 60px;
border-radius: 50%;

/* Colors */
background-color: #007bff; /* Change to your preferred background color */
color: #ffffff;             /* Icon color */

/* Center the icon perfectly inside */
display: inline-flex;
align-items: center;
justify-content: center;

/* Optional: Icon size */
font-size: 24px; 
}


.iconcard {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  max-width: 300px;
}

.iconcard-header-row {
  display: flex;
  justify-content: space-between; /* Pushes title to left, icon to right */
  align-items: center;
  margin-bottom: 15px;
}

.iconcard-header-row i {
  font-size: 24px;
  color: #007bff; /* Colors the icon blue */
}